colibri-ui 0.7.67 → 0.7.69

package/Chip/Chip.module.css

@@ -0,0 +1,78 @@
+.root {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.inner {
+  box-sizing: border-box;
+  display: flex;
+  font-family: Roboto, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-width: 0;
+  place-items: stretch flex-start;
+  transition-duration: 0.3s;
+  transition-property: background, box-shadow, transform;
+  transition-timing-function: ease;
+}
+.inner_active {
+  background: rgb(237, 237, 237);
+}
+.inner_inactive {
+  background: var(--palette-white);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.inner_inactive:hover {
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+  transform: translateY(-2px);
+}
+.inner_inactive:active {
+  background: rgba(0, 0, 0, 0.02);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  outline: 0;
+  transition-duration: 0.15s;
+}
+@media (hover: none) {
+  .inner_inactive:hover {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+    transform: translateY(0);
+  }
+  .inner_inactive:active {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  }
+}
+.inner[data-size=s] {
+  border-radius: 32px;
+  height: 32px;
+}
+.inner[data-size=m] {
+  border-radius: 36px;
+  height: 36px;
+}
+.inner[data-size=l] {
+  border-radius: 44px;
+  height: 44px;
+}
+
+.content {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  max-width: 200px;
+  padding: 0 20px;
+  user-select: none;
+}
+
+.content-inner {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon-right {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-left: -11px;
+  padding-right: 18px;
+}

package/Chip/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { FC, ReactNode } from "react";
+type Size = "s" | "m" | "l";
+type Props = {
+    size?: Size;
+    testID?: string;
+    isActive?: boolean;
+    iconOnRight?: React.ReactNode;
+    onClick?: () => void;
+    onIconOnRightClick?: () => void;
+    children?: ReactNode;
+};
+declare const Chip: FC<Props>;
+export default Chip;

package/Chip/index.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var styles = require('./Chip.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(styles__default.default);
+var Chip = function Chip(props) {
+  var children = props.children,
+    iconOnRight = props.iconOnRight,
+    isActive = props.isActive,
+    onClick = props.onClick,
+    onIconOnRightClick = props.onIconOnRightClick,
+    _a = props.size,
+    size = _a === void 0 ? "m" : _a,
+    _b = props.testID,
+    testID = _b === void 0 ? "chip" : _b;
+  return /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx("root"),
+    "data-component": "Chip",
+    "data-testid": testID
+  }, /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx("inner", {
+      inner_active: isActive,
+      inner_inactive: !isActive
+    }),
+    "data-size": size
+  }, /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx("content"),
+    onClick: onClick
+  }, /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx("content-inner")
+  }, children)), iconOnRight && ( /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx("icon-right"),
+    onClick: onIconOnRightClick || onClick
+  }, iconOnRight))));
+};
+
+exports.default = Chip;

package/Chip/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Chip/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Icons/index.d.ts

@@ -2,7 +2,6 @@ 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 Docunebt } from "./Document";
 export { default as Exit } from "./Exit";
 export { default as EyeOpen } from "./EyeOpen";
 export { default as EyeClosed } from "./EyeClosed";

package/Icons/index.js

@@ -4,7 +4,6 @@ var ArrowNext = require('./ArrowNext.js');
 var Cart = require('./Cart.js');
 var Chevron = require('./Chevron.js');
 var Close = require('./Close.js');
-var Document = require('./Document.js');
 var Exit = require('./Exit.js');
 var EyeOpen = require('./EyeOpen.js');
 var EyeClosed = require('./EyeClosed.js');
@@ -23,7 +22,6 @@ exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
-exports.Docunebt = Document.default;
 exports.Exit = Exit.default;
 exports.EyeOpen = EyeOpen.default;
 exports.EyeClosed = EyeClosed.default;

package/Input/index.js

@@ -21,15 +21,17 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     label = _a.label,
     hint = _a.hint,
     error = _a.error,
+    required = _a.required,
     onChange = _a.onChange,
     _b = _a.variant,
     variant = _b === void 0 ? "primary" : _b,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
-    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "onChange", "variant", "size"]);
+    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "variant", "size"]);
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     className: classNames__default.default(className),
     label: label,
+    required: required,
     hint: hint,
     error: error
   }, /*#__PURE__*/React__default.default.createElement(index$1.default, {

package/Input/index.props.d.ts

@@ -10,4 +10,5 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     label?: ReactNode;
     hint?: ReactNode;
     error?: boolean;
+    required?: boolean;
 }

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

@@ -10,28 +10,26 @@
   list-style: none;
   padding: 8px 6px;
 }
-.item > * {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.item_disabled {
+  background-color: var(--palette-white);
+  color: var(--palette-bg-2);
+  cursor: not-allowed;
+  pointer-events: none;
 }
-
-.variant_primary {
+.item_variant_primary {
   background-color: var(--palette-white);
 }
-.variant_primary:hover {
-  background-color: var(--palette-primary-2);
+.item_variant_primary:hover {
+  background-color: var(--palette-primary-1);
 }
-.variant_primary:active {
-  background-color: var(--palette-primary-2);
+.item_variant_primary:active {
+  background-color: var(--palette-primary-1);
 }
-.variant_primary:focus, .variant_primary:focus-within {
-  background-color: var(--palette-primary-2);
+.item_variant_primary:focus, .item_variant_primary:focus-within {
+  background-color: var(--palette-primary-1);
 }
-
-.disabled {
-  background-color: var(--palette-white);
-  color: var(--palette-bg-2);
-  cursor: not-allowed;
-  pointer-events: none;
+.item > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/Menu/components/MenuItem/index.js

@@ -26,11 +26,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref,
     "data-component": "menu-item",
     style: {
-      backgroundColor: isSelected ? "var(--palette-primary-1)" : "var(--palette-white)"
+      backgroundColor: isSelected ? "var(--palette-primary-1)" : ""
     },
-    className: clx(styles__default.default.item, (_b = {
-      disabled: disabled
-    }, _b["variant_".concat(variant)] = !!variant, _b), className),
+    className: clx("item", (_b = {
+      item_disabled: !!disabled
+    }, _b["item_variant_".concat(variant)] = !!variant, _b), className),
     onClick: onClick
   }, children);
 });

package/Menu/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames');
+var classNames = require('classnames/bind');
 var styles = require('./Menu.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,6 +12,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+var clx = classNames__default.default.bind(styles__default.default);
 var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var selected = _a.selected,
     variant = _a.variant,
@@ -37,7 +38,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, [children, selected, onClick]);
   return /*#__PURE__*/React__default.default.createElement("ul", {
     ref: ref,
-    className: classNames__default.default(styles__default.default.menu, className)
+    className: clx("menu", className)
   }, renderChild);
 });
 

package/Modal/index.js

@@ -47,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(styles__default.default.root)
+    className: clx("root")
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["modal-overlay"]),
+    className: clx("modal-overlay"),
     onClick: onCloseHandler
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["modal-wrapper"], {
-      modalWrapper_desktop: isDesktop ? 1 : 0,
-      modalWrapper_mobile: !isDesktop ? 1 : 0
+    className: clx("modal-wrapper", {
+      "modal-wrapper_desktop": isDesktop ? 1 : 0,
+      "modal-wrapper_mobile": !isDesktop ? 1 : 0
     }, className),
     ref: modalRef
   }, title ? ( /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["title-wrapper"])
+    className: clx("title-wrapper")
   }, /*#__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(styles__default.default["close-wrapper"])
+    className: clx("close-wrapper")
   }, /*#__PURE__*/React__default.default.createElement(index$5.default, {
     onClick: onCloseHandler
   }))), /*#__PURE__*/React__default.default.createElement(index$6.default, null, children))));

package/RadioGroup/index.d.ts

@@ -21,7 +21,6 @@ interface Props {
     wrapped?: boolean;
     className?: string;
     disabled?: boolean;
-    hasError?: boolean;
 }
 declare const RadioGroup: FC<Props>;
 export default RadioGroup;

package/RadioGroup/index.js

@@ -25,14 +25,11 @@ var RadioGroup = /*#__PURE__*/React.memo(function (_a) {
     wrapped = _c === void 0 ? false : _c,
     className = _a.className,
     _d = _a.disabled,
-    disabled = _d === void 0 ? false : _d,
-    _e = _a.hasError,
-    hasError = _e === void 0 ? false : _e;
+    disabled = _d === void 0 ? false : _d;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.group, {
       column: column,
-      wrapped: wrapped,
-      hasError: hasError
+      wrapped: wrapped
     }, className)
   }, options.map(function (option) {
     var id = option.id,

package/Select/index.d.ts

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

package/Select/index.js

@@ -26,6 +26,7 @@ var Select = function Select(_a) {
     label = _a.label,
     hint = _a.hint,
     error = _a.error,
+    required = _a.required,
     placeholder = _a.placeholder,
     disabled = _a.disabled,
     _c = _a.fullWidth,
@@ -56,6 +57,7 @@ var Select = function Select(_a) {
     className: clx(styles__default.default["form-field"], {
       "form-field_fullWidth": fullWidth ? 1 : 0
     }),
+    required: required,
     label: label,
     hint: hint,
     error: error

package/Select/index.props.d.ts

@@ -12,6 +12,7 @@ export interface SelectProps<T extends string> extends Omit<FormFieldProps, "chi
     disabled?: boolean;
     placeholder?: string;
     fullWidth?: boolean;
+    required?: boolean;
 }
 export type Coordinates = {
     top: number;

package/Theme/global.css

@@ -2,6 +2,12 @@
   margin: 0;
   padding: 0;
 }
+[data-page=colibri-ui] html,
+[data-page=colibri-ui] body {
+  font-family: Roboto, Arial, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+}
 [data-page=colibri-ui] input,
 [data-page=colibri-ui] label,
 [data-page=colibri-ui] textarea,

package/base/FormField/FormField.module.css

@@ -1,5 +1,11 @@
+@charset "UTF-8";
 .container {
   display: flex;
   flex-direction: column;
   gap: 8px;
+}
+
+.label_required::after {
+  color: var(--typography-alert);
+  content: " *";
 }

package/base/FormField/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames');
+var classNames = require('classnames/bind');
 var index = require('../../Typography/index.js');
 var styles = require('./FormField.module.css');
 
@@ -13,18 +13,23 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+var clx = classNames__default.default.bind(styles__default.default);
 var FormField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
     hint = _a.hint,
     children = _a.children,
     error = _a.error,
+    required = _a.required,
     className = _a.className;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(styles__default.default.container, className),
+    className: clx(styles__default.default.container, className),
     ref: ref
-  }, label && /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, label && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+    className: clx(styles__default.default.label, {
+      label_required: !!required
+    }),
     tag: "label"
-  }, label), children, hint && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, label)), children, hint && ( /*#__PURE__*/React__default.default.createElement(index.default, {
     variant: error ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/base/FormField/index.props.d.ts

@@ -3,6 +3,7 @@ export type FormFieldProps = {
     label?: ReactNode;
     hint?: ReactNode;
     error?: boolean;
+    required?: boolean;
     className?: string;
     children: ReactNode;
 };

package/esm/Chip/Chip.module.css

@@ -0,0 +1,78 @@
+.root {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.inner {
+  box-sizing: border-box;
+  display: flex;
+  font-family: Roboto, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-width: 0;
+  place-items: stretch flex-start;
+  transition-duration: 0.3s;
+  transition-property: background, box-shadow, transform;
+  transition-timing-function: ease;
+}
+.inner_active {
+  background: rgb(237, 237, 237);
+}
+.inner_inactive {
+  background: var(--palette-white);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.inner_inactive:hover {
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+  transform: translateY(-2px);
+}
+.inner_inactive:active {
+  background: rgba(0, 0, 0, 0.02);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  outline: 0;
+  transition-duration: 0.15s;
+}
+@media (hover: none) {
+  .inner_inactive:hover {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+    transform: translateY(0);
+  }
+  .inner_inactive:active {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  }
+}
+.inner[data-size=s] {
+  border-radius: 32px;
+  height: 32px;
+}
+.inner[data-size=m] {
+  border-radius: 36px;
+  height: 36px;
+}
+.inner[data-size=l] {
+  border-radius: 44px;
+  height: 44px;
+}
+
+.content {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  max-width: 200px;
+  padding: 0 20px;
+  user-select: none;
+}
+
+.content-inner {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon-right {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-left: -11px;
+  padding-right: 18px;
+}

package/esm/Chip/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { FC, ReactNode } from "react";
+type Size = "s" | "m" | "l";
+type Props = {
+    size?: Size;
+    testID?: string;
+    isActive?: boolean;
+    iconOnRight?: React.ReactNode;
+    onClick?: () => void;
+    onIconOnRightClick?: () => void;
+    children?: ReactNode;
+};
+declare const Chip: FC<Props>;
+export default Chip;

package/esm/Chip/index.js

@@ -0,0 +1,37 @@
+import React__default from 'react';
+import classNames from 'classnames/bind';
+import styles from './Chip.module.css';
+
+var clx = classNames.bind(styles);
+var Chip = function Chip(props) {
+  var children = props.children,
+    iconOnRight = props.iconOnRight,
+    isActive = props.isActive,
+    onClick = props.onClick,
+    onIconOnRightClick = props.onIconOnRightClick,
+    _a = props.size,
+    size = _a === void 0 ? "m" : _a,
+    _b = props.testID,
+    testID = _b === void 0 ? "chip" : _b;
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: clx("root"),
+    "data-component": "Chip",
+    "data-testid": testID
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: clx("inner", {
+      inner_active: isActive,
+      inner_inactive: !isActive
+    }),
+    "data-size": size
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: clx("content"),
+    onClick: onClick
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: clx("content-inner")
+  }, children)), iconOnRight && ( /*#__PURE__*/React__default.createElement("span", {
+    className: clx("icon-right"),
+    onClick: onIconOnRightClick || onClick
+  }, iconOnRight))));
+};
+
+export { Chip as default };

package/esm/Icons/index.d.ts

@@ -2,7 +2,6 @@ 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 Docunebt } from "./Document";
 export { default as Exit } from "./Exit";
 export { default as EyeOpen } from "./EyeOpen";
 export { default as EyeClosed } from "./EyeClosed";

package/esm/Icons/index.js

@@ -2,7 +2,6 @@ export { default as ArrowNext } from './ArrowNext.js';
 export { default as Cart } from './Cart.js';
 export { default as Chevron } from './Chevron.js';
 export { default as Close } from './Close.js';
-export { default as Docunebt } from './Document.js';
 export { default as Exit } from './Exit.js';
 export { default as EyeOpen } from './EyeOpen.js';
 export { default as EyeClosed } from './EyeClosed.js';

package/esm/Input/index.js

@@ -12,15 +12,17 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     label = _a.label,
     hint = _a.hint,
     error = _a.error,
+    required = _a.required,
     onChange = _a.onChange,
     _b = _a.variant,
     variant = _b === void 0 ? "primary" : _b,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
-    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "onChange", "variant", "size"]);
+    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "variant", "size"]);
   return /*#__PURE__*/React__default.createElement(FormField, {
     className: classNames(className),
     label: label,
+    required: required,
     hint: hint,
     error: error
   }, /*#__PURE__*/React__default.createElement(InputRoot, {

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

@@ -10,4 +10,5 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     label?: ReactNode;
     hint?: ReactNode;
     error?: boolean;
+    required?: boolean;
 }

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

@@ -10,28 +10,26 @@
   list-style: none;
   padding: 8px 6px;
 }
-.item > * {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.item_disabled {
+  background-color: var(--palette-white);
+  color: var(--palette-bg-2);
+  cursor: not-allowed;
+  pointer-events: none;
 }
-
-.variant_primary {
+.item_variant_primary {
   background-color: var(--palette-white);
 }
-.variant_primary:hover {
-  background-color: var(--palette-primary-2);
+.item_variant_primary:hover {
+  background-color: var(--palette-primary-1);
 }
-.variant_primary:active {
-  background-color: var(--palette-primary-2);
+.item_variant_primary:active {
+  background-color: var(--palette-primary-1);
 }
-.variant_primary:focus, .variant_primary:focus-within {
-  background-color: var(--palette-primary-2);
+.item_variant_primary:focus, .item_variant_primary:focus-within {
+  background-color: var(--palette-primary-1);
 }
-
-.disabled {
-  background-color: var(--palette-white);
-  color: var(--palette-bg-2);
-  cursor: not-allowed;
-  pointer-events: none;
+.item > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/esm/Menu/components/MenuItem/index.js

@@ -16,11 +16,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     ref: ref,
     "data-component": "menu-item",
     style: {
-      backgroundColor: isSelected ? "var(--palette-primary-1)" : "var(--palette-white)"
+      backgroundColor: isSelected ? "var(--palette-primary-1)" : ""
     },
-    className: clx(styles.item, (_b = {
-      disabled: disabled
-    }, _b["variant_".concat(variant)] = !!variant, _b), className),
+    className: clx("item", (_b = {
+      item_disabled: !!disabled
+    }, _b["item_variant_".concat(variant)] = !!variant, _b), className),
     onClick: onClick
   }, children);
 });

package/esm/Menu/index.js

@@ -1,7 +1,8 @@
 import React__default, { forwardRef, useMemo, Children, isValidElement, cloneElement } from 'react';
-import classNames from 'classnames';
+import classNames from 'classnames/bind';
 import styles from './Menu.module.css';
 
+var clx = classNames.bind(styles);
 var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   var selected = _a.selected,
     variant = _a.variant,
@@ -27,7 +28,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, [children, selected, onClick]);
   return /*#__PURE__*/React__default.createElement("ul", {
     ref: ref,
-    className: classNames(styles.menu, className)
+    className: clx("menu", className)
   }, renderChild);
 });
 

package/esm/Modal/index.js

@@ -37,22 +37,22 @@ var Modal = function Modal(_a) {
     };
   }, [onCloseHandler]);
   return /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles.root)
+    className: clx("root")
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["modal-overlay"]),
+    className: clx("modal-overlay"),
     onClick: onCloseHandler
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["modal-wrapper"], {
-      modalWrapper_desktop: isDesktop ? 1 : 0,
-      modalWrapper_mobile: !isDesktop ? 1 : 0
+    className: clx("modal-wrapper", {
+      "modal-wrapper_desktop": isDesktop ? 1 : 0,
+      "modal-wrapper_mobile": !isDesktop ? 1 : 0
     }, className),
     ref: modalRef
   }, title ? ( /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["title-wrapper"])
+    className: clx("title-wrapper")
   }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement(Close, {
     onClick: onCloseHandler
   }))) : ( /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["close-wrapper"])
+    className: clx("close-wrapper")
   }, /*#__PURE__*/React__default.createElement(Close, {
     onClick: onCloseHandler
   }))), /*#__PURE__*/React__default.createElement(Content, null, children))));

package/esm/RadioGroup/index.d.ts

@@ -21,7 +21,6 @@ interface Props {
     wrapped?: boolean;
     className?: string;
     disabled?: boolean;
-    hasError?: boolean;
 }
 declare const RadioGroup: FC<Props>;
 export default RadioGroup;

package/esm/RadioGroup/index.js

@@ -15,14 +15,11 @@ var RadioGroup = /*#__PURE__*/memo(function (_a) {
     wrapped = _c === void 0 ? false : _c,
     className = _a.className,
     _d = _a.disabled,
-    disabled = _d === void 0 ? false : _d,
-    _e = _a.hasError,
-    hasError = _e === void 0 ? false : _e;
+    disabled = _d === void 0 ? false : _d;
   return /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.group, {
       column: column,
-      wrapped: wrapped,
-      hasError: hasError
+      wrapped: wrapped
     }, className)
   }, options.map(function (option) {
     var id = option.id,

package/esm/Select/index.d.ts

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

package/esm/Select/index.js

@@ -16,6 +16,7 @@ var Select = function Select(_a) {
     label = _a.label,
     hint = _a.hint,
     error = _a.error,
+    required = _a.required,
     placeholder = _a.placeholder,
     disabled = _a.disabled,
     _c = _a.fullWidth,
@@ -46,6 +47,7 @@ var Select = function Select(_a) {
     className: clx(styles["form-field"], {
       "form-field_fullWidth": fullWidth ? 1 : 0
     }),
+    required: required,
     label: label,
     hint: hint,
     error: error

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

@@ -12,6 +12,7 @@ export interface SelectProps<T extends string> extends Omit<FormFieldProps, "chi
     disabled?: boolean;
     placeholder?: string;
     fullWidth?: boolean;
+    required?: boolean;
 }
 export type Coordinates = {
     top: number;

package/esm/Theme/global.css

@@ -2,6 +2,12 @@
   margin: 0;
   padding: 0;
 }
+[data-page=colibri-ui] html,
+[data-page=colibri-ui] body {
+  font-family: Roboto, Arial, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+}
 [data-page=colibri-ui] input,
 [data-page=colibri-ui] label,
 [data-page=colibri-ui] textarea,

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

@@ -1,5 +1,11 @@
+@charset "UTF-8";
 .container {
   display: flex;
   flex-direction: column;
   gap: 8px;
+}
+
+.label_required::after {
+  color: var(--typography-alert);
+  content: " *";
 }

package/esm/base/FormField/index.js

@@ -1,20 +1,25 @@
 import React__default, { forwardRef } from 'react';
-import classNames from 'classnames';
+import classNames from 'classnames/bind';
 import Typography from '../../Typography/index.js';
 import styles from './FormField.module.css';
 
+var clx = classNames.bind(styles);
 var FormField = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,
     hint = _a.hint,
     children = _a.children,
     error = _a.error,
+    required = _a.required,
     className = _a.className;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(styles.container, className),
+    className: clx(styles.container, className),
     ref: ref
-  }, label && /*#__PURE__*/React__default.createElement(Typography, {
+  }, label && ( /*#__PURE__*/React__default.createElement(Typography, {
+    className: clx(styles.label, {
+      label_required: !!required
+    }),
     tag: "label"
-  }, label), children, hint && ( /*#__PURE__*/React__default.createElement(Typography, {
+  }, label)), children, hint && ( /*#__PURE__*/React__default.createElement(Typography, {
     variant: error ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/esm/base/FormField/index.props.d.ts

@@ -3,6 +3,7 @@ export type FormFieldProps = {
     label?: ReactNode;
     hint?: ReactNode;
     error?: boolean;
+    required?: boolean;
     className?: string;
     children: ReactNode;
 };

package/esm/index.d.ts

@@ -2,6 +2,7 @@ export { default as Badge } from "./Badge";
 export { default as Button } from "./Button";
 export { default as Calendar } from "./Calendar";
 export { default as Checkbox } from "./Checkbox";
+export { default as Chip } from "./Chip";
 export { default as Counter } from "./Counter";
 export { default as DotsLoader } from "./DotsLoader";
 export { default as Dropdown } from "./Dropdown";

package/esm/index.js

@@ -2,6 +2,7 @@ export { default as Badge } from './Badge/index.js';
 export { default as Button } from './Button/index.js';
 export { default as Calendar } from './Calendar/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
+export { default as Chip } from './Chip/index.js';
 export { default as Counter } from './Counter/index.js';
 export { default as DotsLoader } from './DotsLoader/index.js';
 export { default as Dropdown } from './Dropdown/index.js';
@@ -30,7 +31,6 @@ export { default as ArrowNext } from './Icons/ArrowNext.js';
 export { default as Cart } from './Icons/Cart.js';
 export { default as Chevron } from './Icons/Chevron.js';
 export { default as Close } from './Icons/Close.js';
-export { default as Docunebt } from './Icons/Document.js';
 export { default as Exit } from './Icons/Exit.js';
 export { default as EyeOpen } from './Icons/EyeOpen.js';
 export { default as EyeClosed } from './Icons/EyeClosed.js';

package/index.d.ts

@@ -2,6 +2,7 @@ export { default as Badge } from "./Badge";
 export { default as Button } from "./Button";
 export { default as Calendar } from "./Calendar";
 export { default as Checkbox } from "./Checkbox";
+export { default as Chip } from "./Chip";
 export { default as Counter } from "./Counter";
 export { default as DotsLoader } from "./DotsLoader";
 export { default as Dropdown } from "./Dropdown";

package/index.js

@@ -4,35 +4,35 @@ var index = require('./Badge/index.js');
 var index$1 = require('./Button/index.js');
 var index$2 = require('./Calendar/index.js');
 var index$3 = require('./Checkbox/index.js');
-var index$4 = require('./Counter/index.js');
-var index$5 = require('./DotsLoader/index.js');
-var index$6 = require('./Dropdown/index.js');
-var index$7 = require('./Grid/index.js');
-var index$8 = require('./Grid/Item/index.js');
-var index$9 = require('./Image/index.js');
-var index$a = require('./Input/index.js');
-var index$b = require('./Menu/index.js');
-var index$c = require('./Menu/components/MenuItem/index.js');
-var index$d = require('./Modal/index.js');
-var index$e = require('./Portal/index.js');
-var index$f = require('./RadioGroup/index.js');
-var index$g = require('./Select/index.js');
-var index$h = require('./Separator/index.js');
-var index$i = require('./Skeleton/index.js');
-var index$j = require('./Switch/index.js');
-var index$k = require('./Theme/index.js');
-var index$l = require('./Tooltip/index.js');
-var index$m = require('./TimeSelect/index.js');
-var index$n = require('./Typography/index.js');
-var index$o = require('./hooks/useMediaSizes/index.js');
-var index$p = require('./hooks/useOnClickOutside/index.js');
-var index$q = require('./hooks/useScrollLock/index.js');
+var index$4 = require('./Chip/index.js');
+var index$5 = require('./Counter/index.js');
+var index$6 = require('./DotsLoader/index.js');
+var index$7 = require('./Dropdown/index.js');
+var index$8 = require('./Grid/index.js');
+var index$9 = require('./Grid/Item/index.js');
+var index$a = require('./Image/index.js');
+var index$b = require('./Input/index.js');
+var index$c = require('./Menu/index.js');
+var index$d = require('./Menu/components/MenuItem/index.js');
+var index$e = require('./Modal/index.js');
+var index$f = require('./Portal/index.js');
+var index$g = require('./RadioGroup/index.js');
+var index$h = require('./Select/index.js');
+var index$i = require('./Separator/index.js');
+var index$j = require('./Skeleton/index.js');
+var index$k = require('./Switch/index.js');
+var index$l = require('./Theme/index.js');
+var index$m = require('./Tooltip/index.js');
+var index$n = require('./TimeSelect/index.js');
+var index$o = require('./Typography/index.js');
+var index$p = require('./hooks/useMediaSizes/index.js');
+var index$q = require('./hooks/useOnClickOutside/index.js');
+var index$r = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
 var Chevron = require('./Icons/Chevron.js');
 var Close = require('./Icons/Close.js');
-var Document = require('./Icons/Document.js');
 var Exit = require('./Icons/Exit.js');
 var EyeOpen = require('./Icons/EyeOpen.js');
 var EyeClosed = require('./Icons/EyeClosed.js');
@@ -51,35 +51,35 @@ exports.Badge = index.default;
 exports.Button = index$1.default;
 exports.Calendar = index$2.default;
 exports.Checkbox = index$3.default;
-exports.Counter = index$4.default;
-exports.DotsLoader = index$5.default;
-exports.Dropdown = index$6.default;
-exports.Grid = index$7.default;
-exports.GridItem = index$8.default;
-exports.Image = index$9.default;
-exports.Input = index$a.default;
-exports.Menu = index$b.default;
-exports.MenuItem = index$c.default;
-exports.Modal = index$d.default;
-exports.Portal = index$e.default;
-exports.RadioGroup = index$f.default;
-exports.Select = index$g.default;
-exports.Separator = index$h.default;
-exports.SkeletonRect = index$i.SkeletonRect;
-exports.SkeletonText = index$i.SkeletonText;
-exports.Switch = index$j.default;
-exports.THEMES = index$k.THEMES;
-exports.Tooltip = index$l.default;
-exports.TimeSelect = index$m.default;
-exports.Typography = index$n.default;
-exports.useMediaSizes = index$o.default;
-exports.useOnClickOutside = index$p.default;
-exports.useScrollLock = index$q.default;
+exports.Chip = index$4.default;
+exports.Counter = index$5.default;
+exports.DotsLoader = index$6.default;
+exports.Dropdown = index$7.default;
+exports.Grid = index$8.default;
+exports.GridItem = index$9.default;
+exports.Image = index$a.default;
+exports.Input = index$b.default;
+exports.Menu = index$c.default;
+exports.MenuItem = index$d.default;
+exports.Modal = index$e.default;
+exports.Portal = index$f.default;
+exports.RadioGroup = index$g.default;
+exports.Select = index$h.default;
+exports.Separator = index$i.default;
+exports.SkeletonRect = index$j.SkeletonRect;
+exports.SkeletonText = index$j.SkeletonText;
+exports.Switch = index$k.default;
+exports.THEMES = index$l.THEMES;
+exports.Tooltip = index$m.default;
+exports.TimeSelect = index$n.default;
+exports.Typography = index$o.default;
+exports.useMediaSizes = index$p.default;
+exports.useOnClickOutside = index$q.default;
+exports.useScrollLock = index$r.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
-exports.Docunebt = Document.default;
 exports.Exit = Exit.default;
 exports.EyeOpen = EyeOpen.default;
 exports.EyeClosed = EyeClosed.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.67",
+  "version": "0.7.69",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},

package/Icons/Document.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type { Props } from "./index.props";
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
-export default _default;

package/Icons/Document.js

@@ -1,35 +0,0 @@
-'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 Document = /*#__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({
-    focusable: "false",
-    width: width,
-    height: height,
-    viewBox: "0 0 24 24"
-  }, props, {
-    ref: ref,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }), /*#__PURE__*/React__default.default.createElement("path", {
-    d: "M18.745 3H4.934C3.848 3 2.96 3.9 2.96 5v14c0 1.1.888 2 1.973 2h13.813c1.085 0 1.973-.9 1.973-2V5c0-1.1-.888-2-1.974-2zm-4.933 14H6.907v-2h6.907v2zm2.96-4H6.906v-2h9.866v2zm0-4H6.906V7h9.866v2z",
-    fill: fill
-  }));
-});
-
-exports.default = Document;

package/esm/Icons/Document.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type { Props } from "./index.props";
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
-export default _default;

package/esm/Icons/Document.js

@@ -1,27 +0,0 @@
-import { __rest, __assign } from 'tslib';
-import React__default, { forwardRef } from 'react';
-
-var Document = /*#__PURE__*/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 = __rest(_a, ["fill", "width", "height"]);
-  return /*#__PURE__*/React__default.createElement("svg", __assign({
-    focusable: "false",
-    width: width,
-    height: height,
-    viewBox: "0 0 24 24"
-  }, props, {
-    ref: ref,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M18.745 3H4.934C3.848 3 2.96 3.9 2.96 5v14c0 1.1.888 2 1.973 2h13.813c1.085 0 1.973-.9 1.973-2V5c0-1.1-.888-2-1.974-2zm-4.933 14H6.907v-2h6.907v2zm2.96-4H6.906v-2h9.866v2zm0-4H6.906V7h9.866v2z",
-    fill: fill
-  }));
-});
-
-export { Document as default };