colibri-ui 0.7.127 → 0.7.129

package/Checkbox/Checkbox.module.css

@@ -40,8 +40,8 @@
 }
 .checked::after {
   block-size: 8px;
-  border-block-end: 2px solid var(--palette-black);
-  border-inline-end: 2px solid var(--palette-black);
+  border-block-end: 2px solid var(--palette-white);
+  border-inline-end: 2px solid var(--palette-white);
   box-sizing: content-box;
   content: "";
   display: block;
@@ -57,8 +57,8 @@
   box-shadow: 0 0 0 2px var(--palette-alert);
 }
 .variant_primary_checked::after {
-  border-block-end: 2px solid var(--palette-black);
-  border-inline-end: 2px solid var(--palette-black);
+  border-block-end: 2px solid var(--palette-white);
+  border-inline-end: 2px solid var(--palette-white);
 }
 
 .control {

package/Chip/Chip.module.css

@@ -1,4 +1,4 @@
-.root {
+.chip {
   cursor: pointer;
   display: inline-block;
 }
@@ -41,18 +41,18 @@
 }
 .inner[data-size=s] {
   border-radius: 32px;
-  font-size: 15px;
-  line-height: 32px;
+  font-size: 0.875rem;
+  line-height: 2.2;
 }
 .inner[data-size=m] {
   border-radius: 36px;
-  font-size: 16px;
-  line-height: 36px;
+  font-size: 1rem;
+  line-height: 2.3;
 }
 .inner[data-size=l] {
   border-radius: 44px;
-  font-size: 18px;
-  line-height: 44px;
+  font-size: 1.15rem;
+  line-height: 2.4;
 }
 
 .content {
@@ -60,7 +60,7 @@
   display: flex;
   justify-content: flex-start;
   max-width: 200px;
-  padding: 0 20px;
+  padding: 0 1rem;
   user-select: none;
 }
 
@@ -72,8 +72,12 @@
 
 .icon-right {
   align-items: center;
+  color: var(--palette-bg-5);
   display: flex;
   justify-content: center;
   margin-left: -11px;
-  padding-right: 18px;
+  padding-right: 0.8rem;
+}
+.icon-right:hover {
+  color: var(--palette-black);
 }

package/Chip/index.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var classNames = require('classnames/bind');
 var styles = require('./Chip.module.css');
@@ -13,34 +14,40 @@ 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"),
+var Chip = function Chip(_a) {
+  var children = _a.children,
+    iconEnd = _a.iconEnd,
+    isActive = _a.isActive,
+    onClick = _a.onClick,
+    onClickIcon = _a.onClickIcon,
+    _b = _a.size,
+    size = _b === void 0 ? "m" : _b,
+    _c = _a.testID,
+    testID = _c === void 0 ? "chip" : _c,
+    props = tslib.__rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "testID"]);
+  return /*#__PURE__*/React__default.default.createElement("span", tslib.__assign({
+    className: clx("chip"),
     "data-testid": testID
-  }, /*#__PURE__*/React__default.default.createElement("span", {
+  }, props), /*#__PURE__*/React__default.default.createElement("span", {
     className: clx("inner", {
-      inner_active: isActive,
-      inner_inactive: !isActive
+      inner_active: iconEnd || isActive,
+      inner_inactive: !iconEnd && !isActive
     }),
     "data-size": size
   }, /*#__PURE__*/React__default.default.createElement("span", {
     className: clx("content"),
+    "aria-pressed": isActive,
+    role: "button",
+    tabIndex: 0,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("span", {
     className: clx("content-inner")
-  }, children)), iconOnRight && (/*#__PURE__*/React__default.default.createElement("span", {
+  }, children)), iconEnd && (/*#__PURE__*/React__default.default.createElement("span", {
     className: clx("icon-right"),
-    onClick: onIconOnRightClick || onClick
-  }, iconOnRight))));
+    role: "button",
+    tabIndex: 0,
+    onClick: onClickIcon
+  }, iconEnd))));
 };
 
 exports.default = Chip;

package/Chip/index.props.d.ts

@@ -3,8 +3,8 @@ export type ChipProps = {
     size?: Size;
     testID?: string;
     isActive?: boolean;
-    iconOnRight?: React.ReactNode;
+    iconEnd?: React.ReactNode;
     onClick?: () => void;
-    onIconOnRightClick?: () => void;
+    onClickIcon?: () => void;
 };
 export {};

package/Datepicker/components/DatePicker/index.js

@@ -26,6 +26,7 @@ var DatePicker = function DatePicker(_a) {
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     placement: "bottom",
     preventAutoClose: true,
+    preventOverflow: true,
     fontSize: 14,
     trigger: ["click"],
     overlay: /*#__PURE__*/React__default.default.createElement(index$1.default, {

package/Dropdown/index.js

@@ -37,38 +37,46 @@ var Dropdown = function Dropdown(_a) {
     preventOverflow = _f === void 0 ? false : _f,
     _g = _a.preventAutoClose,
     preventAutoClose = _g === void 0 ? false : _g,
-    _h = _a.samewidth,
-    samewidth = _h === void 0 ? false : _h;
-  var _j = React.useState(null),
-    controlElement = _j[0],
-    setControlElement = _j[1];
+    _h = _a.flip,
+    flip = _h === void 0 ? true : _h,
+    _j = _a.samewidth,
+    samewidth = _j === void 0 ? false : _j;
   var _k = React.useState(null),
-    popperElement = _k[0],
-    setPopperElement = _k[1];
-  var _l = React.useState(false),
-    visible = _l[0],
-    setVisible = _l[1];
+    controlElement = _k[0],
+    setControlElement = _k[1];
+  var _l = React.useState(null),
+    popperElement = _l[0],
+    setPopperElement = _l[1];
+  var _m = React.useState(false),
+    visible = _m[0],
+    setVisible = _m[1];
   var isVisible = visibleProp && visible && !disabled;
-  var _m = reactPopper.usePopper(controlElement, popperElement, {
+  var _o = reactPopper.usePopper(controlElement, popperElement, {
       placement: placement,
       strategy: strategy,
       modifiers: [{
         name: "flip",
-        enabled: false
+        enabled: flip,
+        options: {
+          fallbackPlacements: ['top']
+        }
       }, {
         name: "preventOverflow",
         enabled: preventOverflow
       }]
     }),
-    popperStyles = _m.styles,
-    attributes = _m.attributes,
-    update = _m.update;
+    popperStyles = _o.styles,
+    attributes = _o.attributes,
+    update = _o.update;
   var isNotComponent = typeof children === "string";
   var reference = React.useMemo(function () {
     return React.Children.only(isNotComponent ? /*#__PURE__*/React__default.default.createElement("button", null, children) : children);
   }, [children, isNotComponent]);
-  var onToggle = React.useCallback(function (e) {
-    e.stopPropagation();
+  var onToggle = React.useCallback(function (event) {
+    var _a;
+    if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-ignore-click="true"]')) {
+      return;
+    }
     setVisible(function (state) {
       return !state;
     });

package/Dropdown/index.props.d.ts

@@ -15,5 +15,6 @@ export type DropdownProps = {
     visible?: boolean;
     preventOverflow?: boolean;
     preventAutoClose?: boolean;
+    flip?: boolean;
     samewidth?: boolean;
 };

package/Icons/CrossFill.d.ts

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

package/Icons/CrossFill.js

@@ -0,0 +1,32 @@
+'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 CrossFill = /*#__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({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    fill: fill,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+  }));
+});
+
+exports.default = CrossFill;

package/Icons/index.d.ts

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

package/Icons/index.js

@@ -4,6 +4,7 @@ var ArrowNext = require('./ArrowNext.js');
 var Cart = require('./Cart.js');
 var Chevron = require('./Chevron.js');
 var Close = require('./Close.js');
+var CrossFill = require('./CrossFill.js');
 var Edit = require('./Edit.js');
 var Exit = require('./Exit.js');
 var EyeOpen = require('./EyeOpen.js');
@@ -23,6 +24,7 @@ exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
+exports.CrossFill = CrossFill.default;
 exports.Edit = Edit.default;
 exports.Exit = Exit.default;
 exports.EyeOpen = EyeOpen.default;

package/MultiSelect/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { MultiSelectProps } from "./index.props";
-declare const MultiSelect: ({ className, groups, zIndex, fontSize, disabled, fullWidth, required, label, hint, error, size, placeholder, name, }: MultiSelectProps) => React.JSX.Element;
+declare const MultiSelect: ({ className, groups, zIndex, fontSize, disabled, fullWidth, required, label, hint, error, size, placeholder, name, type, }: MultiSelectProps) => React.JSX.Element;
 export default MultiSelect;

package/MultiSelect/index.js

@@ -9,10 +9,13 @@ var index$2 = require('../Dropdown/index.js');
 var index$4 = require('../base/InputRoot/index.js');
 var index$1 = require('../base/FormField/index.js');
 require('../Icons/index.js');
+var index$5 = require('../Chip/index.js');
+var generateUniqID = require('../helpers/generateUniqID.js');
 var styles = require('./index.module.css');
 var index$3 = require('./components/MenuOverlay/index.js');
 var index = require('./utils/index.js');
 var Chevron = require('../Icons/Chevron.js');
+var CrossFill = require('../Icons/CrossFill.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -53,7 +56,8 @@ var MultiSelect = function MultiSelect(_a) {
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
     placeholder = _a.placeholder,
-    name = _a.name;
+    name = _a.name,
+    type = _a.type;
   var _d = React.useState(false),
     isOpen = _d[0],
     setIsOpen = _d[1];
@@ -87,7 +91,10 @@ var MultiSelect = function MultiSelect(_a) {
       return group.options.filter(function (option) {
         return option.selected;
       }).map(function (option) {
-        return option.label;
+        return {
+          label: option.label,
+          key: index.createGroupOptionString(group.value, option.value)
+        };
       });
     });
   }, [preparedGroups]);
@@ -111,7 +118,38 @@ var MultiSelect = function MultiSelect(_a) {
       onChange: handleChange
     }),
     samewidth: true
-  }, /*#__PURE__*/React__default.default.createElement(index$4.default, {
+  }, type === "chip" ? (/*#__PURE__*/React__default.default.createElement(index$4.default, {
+    error: error,
+    size: size,
+    className: clx(styles__default.default.root, {
+      auto: !!prepraredLabel.length
+    }),
+    endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
+      className: clx(styles__default.default.icon, {
+        icon_isOpen: isOpen ? 1 : 0
+      })
+    }),
+    disabled: !!disabled
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default["base-input"], styles__default.default["base-input-flex"])
+  }, prepraredLabel.length ? (/*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, prepraredLabel.map(function (option, index) {
+    return /*#__PURE__*/React__default.default.createElement(index$5.default, {
+      size: "s",
+      iconEnd: /*#__PURE__*/React__default.default.createElement(CrossFill.default, null),
+      "data-ignore-click": true,
+      key: generateUniqID.default(index),
+      onClickIcon: function onClickIcon() {
+        return handleChange(option.key);
+      }
+    }, option.label);
+  }))) : (/*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.placeholder)
+  }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
+    type: "hidden",
+    name: name,
+    tabIndex: -1,
+    value: value || ""
+  }))) : (/*#__PURE__*/React__default.default.createElement(index$4.default, {
     error: error,
     size: size,
     className: clx(styles__default.default.root),
@@ -122,7 +160,7 @@ var MultiSelect = function MultiSelect(_a) {
     }),
     disabled: !!disabled
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-input"])
+    className: clx(styles__default.default["base-input"], styles__default.default["base-input-text"])
   }, prepraredLabel.length ? prepraredLabel.join(", ") : (/*#__PURE__*/React__default.default.createElement("span", {
     className: clx(styles__default.default.placeholder)
   }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
@@ -130,7 +168,7 @@ var MultiSelect = function MultiSelect(_a) {
     name: name,
     tabIndex: -1,
     value: value || ""
-  }))));
+  })))));
 };
 
 exports.default = MultiSelect;

package/MultiSelect/index.module.css

@@ -2,6 +2,11 @@
   cursor: pointer;
 }
 
+.root.auto {
+  height: auto;
+  min-height: 36px;
+}
+
 .icon_isOpen {
   transform: rotate(180deg);
 }
@@ -16,15 +21,24 @@
   display: inline-block;
   flex: 1;
   margin: 7px 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   width: 100%;
 }
 .base-input ::placeholder {
   color: var(--palette-bg-2);
 }
 
+.base-input-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.base-input-flex {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+
 .placeholder {
   color: var(--input-primary-plaseholder-color);
   display: block;

package/MultiSelect/index.props.d.ts

@@ -14,6 +14,7 @@ export type GroupProps = {
     options: GroupOptions[];
 };
 type Size = "s" | "m" | "l";
+type Type = "chip";
 export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
     groups: GroupProps[];
     className?: string;
@@ -25,5 +26,6 @@ export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
     size?: Size;
     placeholder?: string;
     name?: string;
+    type?: Type;
 }
 export {};

package/base/InputRoot/index.js

@@ -23,9 +23,11 @@ var InputRoot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     variant = _c === void 0 ? "primary" : _c,
     disabled = _a.disabled,
     error = _a.error,
+    style = _a.style,
     size = _a.size;
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: ref,
+    style: style,
     className: clx(styles__default.default.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
   }, startIcon && /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default["base-icon"])

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 export type Size = "s" | "m" | "l";
 export type Variant = "primary";
 export type InputProps = {
@@ -9,4 +9,5 @@ export type InputProps = {
     startIcon?: ReactNode;
     endIcon?: ReactNode;
     size?: Size;
+    style?: CSSProperties;
 };

package/esm/Checkbox/Checkbox.module.css

@@ -40,8 +40,8 @@
 }
 .checked::after {
   block-size: 8px;
-  border-block-end: 2px solid var(--palette-black);
-  border-inline-end: 2px solid var(--palette-black);
+  border-block-end: 2px solid var(--palette-white);
+  border-inline-end: 2px solid var(--palette-white);
   box-sizing: content-box;
   content: "";
   display: block;
@@ -57,8 +57,8 @@
   box-shadow: 0 0 0 2px var(--palette-alert);
 }
 .variant_primary_checked::after {
-  border-block-end: 2px solid var(--palette-black);
-  border-inline-end: 2px solid var(--palette-black);
+  border-block-end: 2px solid var(--palette-white);
+  border-inline-end: 2px solid var(--palette-white);
 }
 
 .control {

package/esm/Chip/Chip.module.css

@@ -1,4 +1,4 @@
-.root {
+.chip {
   cursor: pointer;
   display: inline-block;
 }
@@ -41,18 +41,18 @@
 }
 .inner[data-size=s] {
   border-radius: 32px;
-  font-size: 15px;
-  line-height: 32px;
+  font-size: 0.875rem;
+  line-height: 2.2;
 }
 .inner[data-size=m] {
   border-radius: 36px;
-  font-size: 16px;
-  line-height: 36px;
+  font-size: 1rem;
+  line-height: 2.3;
 }
 .inner[data-size=l] {
   border-radius: 44px;
-  font-size: 18px;
-  line-height: 44px;
+  font-size: 1.15rem;
+  line-height: 2.4;
 }
 
 .content {
@@ -60,7 +60,7 @@
   display: flex;
   justify-content: flex-start;
   max-width: 200px;
-  padding: 0 20px;
+  padding: 0 1rem;
   user-select: none;
 }
 
@@ -72,8 +72,12 @@
 
 .icon-right {
   align-items: center;
+  color: var(--palette-bg-5);
   display: flex;
   justify-content: center;
   margin-left: -11px;
-  padding-right: 18px;
+  padding-right: 0.8rem;
+}
+.icon-right:hover {
+  color: var(--palette-black);
 }

package/esm/Chip/index.js

@@ -1,36 +1,43 @@
+import { __rest, __assign } from 'tslib';
 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"),
+var Chip = function Chip(_a) {
+  var children = _a.children,
+    iconEnd = _a.iconEnd,
+    isActive = _a.isActive,
+    onClick = _a.onClick,
+    onClickIcon = _a.onClickIcon,
+    _b = _a.size,
+    size = _b === void 0 ? "m" : _b,
+    _c = _a.testID,
+    testID = _c === void 0 ? "chip" : _c,
+    props = __rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "testID"]);
+  return /*#__PURE__*/React__default.createElement("span", __assign({
+    className: clx("chip"),
     "data-testid": testID
-  }, /*#__PURE__*/React__default.createElement("span", {
+  }, props), /*#__PURE__*/React__default.createElement("span", {
     className: clx("inner", {
-      inner_active: isActive,
-      inner_inactive: !isActive
+      inner_active: iconEnd || isActive,
+      inner_inactive: !iconEnd && !isActive
     }),
     "data-size": size
   }, /*#__PURE__*/React__default.createElement("span", {
     className: clx("content"),
+    "aria-pressed": isActive,
+    role: "button",
+    tabIndex: 0,
     onClick: onClick
   }, /*#__PURE__*/React__default.createElement("span", {
     className: clx("content-inner")
-  }, children)), iconOnRight && (/*#__PURE__*/React__default.createElement("span", {
+  }, children)), iconEnd && (/*#__PURE__*/React__default.createElement("span", {
     className: clx("icon-right"),
-    onClick: onIconOnRightClick || onClick
-  }, iconOnRight))));
+    role: "button",
+    tabIndex: 0,
+    onClick: onClickIcon
+  }, iconEnd))));
 };
 
 export { Chip as default };

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

@@ -3,8 +3,8 @@ export type ChipProps = {
     size?: Size;
     testID?: string;
     isActive?: boolean;
-    iconOnRight?: React.ReactNode;
+    iconEnd?: React.ReactNode;
     onClick?: () => void;
-    onIconOnRightClick?: () => void;
+    onClickIcon?: () => void;
 };
 export {};

package/esm/Datepicker/components/DatePicker/index.js

@@ -16,6 +16,7 @@ var DatePicker = function DatePicker(_a) {
   return /*#__PURE__*/React__default.createElement(Dropdown, {
     placement: "bottom",
     preventAutoClose: true,
+    preventOverflow: true,
     fontSize: 14,
     trigger: ["click"],
     overlay: /*#__PURE__*/React__default.createElement(Calendar, {

package/esm/Dropdown/index.js

@@ -27,38 +27,46 @@ var Dropdown = function Dropdown(_a) {
     preventOverflow = _f === void 0 ? false : _f,
     _g = _a.preventAutoClose,
     preventAutoClose = _g === void 0 ? false : _g,
-    _h = _a.samewidth,
-    samewidth = _h === void 0 ? false : _h;
-  var _j = useState(null),
-    controlElement = _j[0],
-    setControlElement = _j[1];
+    _h = _a.flip,
+    flip = _h === void 0 ? true : _h,
+    _j = _a.samewidth,
+    samewidth = _j === void 0 ? false : _j;
   var _k = useState(null),
-    popperElement = _k[0],
-    setPopperElement = _k[1];
-  var _l = useState(false),
-    visible = _l[0],
-    setVisible = _l[1];
+    controlElement = _k[0],
+    setControlElement = _k[1];
+  var _l = useState(null),
+    popperElement = _l[0],
+    setPopperElement = _l[1];
+  var _m = useState(false),
+    visible = _m[0],
+    setVisible = _m[1];
   var isVisible = visibleProp && visible && !disabled;
-  var _m = usePopper(controlElement, popperElement, {
+  var _o = usePopper(controlElement, popperElement, {
       placement: placement,
       strategy: strategy,
       modifiers: [{
         name: "flip",
-        enabled: false
+        enabled: flip,
+        options: {
+          fallbackPlacements: ['top']
+        }
       }, {
         name: "preventOverflow",
         enabled: preventOverflow
       }]
     }),
-    popperStyles = _m.styles,
-    attributes = _m.attributes,
-    update = _m.update;
+    popperStyles = _o.styles,
+    attributes = _o.attributes,
+    update = _o.update;
   var isNotComponent = typeof children === "string";
   var reference = useMemo(function () {
     return Children.only(isNotComponent ? /*#__PURE__*/React__default.createElement("button", null, children) : children);
   }, [children, isNotComponent]);
-  var onToggle = useCallback(function (e) {
-    e.stopPropagation();
+  var onToggle = useCallback(function (event) {
+    var _a;
+    if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-ignore-click="true"]')) {
+      return;
+    }
     setVisible(function (state) {
       return !state;
     });

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

@@ -15,5 +15,6 @@ export type DropdownProps = {
     visible?: boolean;
     preventOverflow?: boolean;
     preventAutoClose?: boolean;
+    flip?: boolean;
     samewidth?: boolean;
 };

package/esm/Icons/CrossFill.d.ts

@@ -0,0 +1,4 @@
+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/CrossFill.js

@@ -0,0 +1,24 @@
+import { __rest, __assign } from 'tslib';
+import React__default, { forwardRef } from 'react';
+
+var CrossFill = /*#__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({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    fill: fill,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+  }));
+});
+
+export { CrossFill as default };

package/esm/Icons/index.d.ts

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

package/esm/Icons/index.js

@@ -2,6 +2,7 @@ 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 CrossFill } from './CrossFill.js';
 export { default as Edit } from './Edit.js';
 export { default as Exit } from './Exit.js';
 export { default as EyeOpen } from './EyeOpen.js';

package/esm/MultiSelect/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { MultiSelectProps } from "./index.props";
-declare const MultiSelect: ({ className, groups, zIndex, fontSize, disabled, fullWidth, required, label, hint, error, size, placeholder, name, }: MultiSelectProps) => React.JSX.Element;
+declare const MultiSelect: ({ className, groups, zIndex, fontSize, disabled, fullWidth, required, label, hint, error, size, placeholder, name, type, }: MultiSelectProps) => React.JSX.Element;
 export default MultiSelect;

package/esm/MultiSelect/index.js

@@ -5,10 +5,13 @@ import Dropdown from '../Dropdown/index.js';
 import InputRoot from '../base/InputRoot/index.js';
 import FormField from '../base/FormField/index.js';
 import '../Icons/index.js';
+import Chip from '../Chip/index.js';
+import generateUniqID from '../helpers/generateUniqID.js';
 import styles from './index.module.css';
 import MenuOverlay from './components/MenuOverlay/index.js';
 import { createGroupOptionString } from './utils/index.js';
 import Chevron from '../Icons/Chevron.js';
+import CrossFill from '../Icons/CrossFill.js';
 
 var clx = classNames.bind(styles);
 var sortedItems = function sortedItems(items) {
@@ -43,7 +46,8 @@ var MultiSelect = function MultiSelect(_a) {
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
     placeholder = _a.placeholder,
-    name = _a.name;
+    name = _a.name,
+    type = _a.type;
   var _d = useState(false),
     isOpen = _d[0],
     setIsOpen = _d[1];
@@ -77,7 +81,10 @@ var MultiSelect = function MultiSelect(_a) {
       return group.options.filter(function (option) {
         return option.selected;
       }).map(function (option) {
-        return option.label;
+        return {
+          label: option.label,
+          key: createGroupOptionString(group.value, option.value)
+        };
       });
     });
   }, [preparedGroups]);
@@ -101,7 +108,38 @@ var MultiSelect = function MultiSelect(_a) {
       onChange: handleChange
     }),
     samewidth: true
-  }, /*#__PURE__*/React__default.createElement(InputRoot, {
+  }, type === "chip" ? (/*#__PURE__*/React__default.createElement(InputRoot, {
+    error: error,
+    size: size,
+    className: clx(styles.root, {
+      auto: !!prepraredLabel.length
+    }),
+    endIcon: /*#__PURE__*/React__default.createElement(Chevron, {
+      className: clx(styles.icon, {
+        icon_isOpen: isOpen ? 1 : 0
+      })
+    }),
+    disabled: !!disabled
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: clx(styles["base-input"], styles["base-input-flex"])
+  }, prepraredLabel.length ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, prepraredLabel.map(function (option, index) {
+    return /*#__PURE__*/React__default.createElement(Chip, {
+      size: "s",
+      iconEnd: /*#__PURE__*/React__default.createElement(CrossFill, null),
+      "data-ignore-click": true,
+      key: generateUniqID(index),
+      onClickIcon: function onClickIcon() {
+        return handleChange(option.key);
+      }
+    }, option.label);
+  }))) : (/*#__PURE__*/React__default.createElement("span", {
+    className: clx(styles.placeholder)
+  }, placeholder))), /*#__PURE__*/React__default.createElement("input", {
+    type: "hidden",
+    name: name,
+    tabIndex: -1,
+    value: value || ""
+  }))) : (/*#__PURE__*/React__default.createElement(InputRoot, {
     error: error,
     size: size,
     className: clx(styles.root),
@@ -112,7 +150,7 @@ var MultiSelect = function MultiSelect(_a) {
     }),
     disabled: !!disabled
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["base-input"])
+    className: clx(styles["base-input"], styles["base-input-text"])
   }, prepraredLabel.length ? prepraredLabel.join(", ") : (/*#__PURE__*/React__default.createElement("span", {
     className: clx(styles.placeholder)
   }, placeholder))), /*#__PURE__*/React__default.createElement("input", {
@@ -120,7 +158,7 @@ var MultiSelect = function MultiSelect(_a) {
     name: name,
     tabIndex: -1,
     value: value || ""
-  }))));
+  })))));
 };
 
 export { MultiSelect as default };

package/esm/MultiSelect/index.module.css

@@ -2,6 +2,11 @@
   cursor: pointer;
 }
 
+.root.auto {
+  height: auto;
+  min-height: 36px;
+}
+
 .icon_isOpen {
   transform: rotate(180deg);
 }
@@ -16,15 +21,24 @@
   display: inline-block;
   flex: 1;
   margin: 7px 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   width: 100%;
 }
 .base-input ::placeholder {
   color: var(--palette-bg-2);
 }
 
+.base-input-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.base-input-flex {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+
 .placeholder {
   color: var(--input-primary-plaseholder-color);
   display: block;

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

@@ -14,6 +14,7 @@ export type GroupProps = {
     options: GroupOptions[];
 };
 type Size = "s" | "m" | "l";
+type Type = "chip";
 export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
     groups: GroupProps[];
     className?: string;
@@ -25,5 +26,6 @@ export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
     size?: Size;
     placeholder?: string;
     name?: string;
+    type?: Type;
 }
 export {};

package/esm/base/InputRoot/index.js

@@ -13,9 +13,11 @@ var InputRoot = /*#__PURE__*/forwardRef(function (_a, ref) {
     variant = _c === void 0 ? "primary" : _c,
     disabled = _a.disabled,
     error = _a.error,
+    style = _a.style,
     size = _a.size;
   return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
+    style: style,
     className: clx(styles.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
   }, startIcon && /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles["base-icon"])

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 export type Size = "s" | "m" | "l";
 export type Variant = "primary";
 export type InputProps = {
@@ -9,4 +9,5 @@ export type InputProps = {
     startIcon?: ReactNode;
     endIcon?: ReactNode;
     size?: Size;
+    style?: CSSProperties;
 };

package/esm/index.js

@@ -39,6 +39,7 @@ 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 CrossFill } from './Icons/CrossFill.js';
 export { default as Edit } from './Icons/Edit.js';
 export { default as Exit } from './Icons/Exit.js';
 export { default as EyeOpen } from './Icons/EyeOpen.js';

package/index.js

@@ -41,6 +41,7 @@ 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 CrossFill = require('./Icons/CrossFill.js');
 var Edit = require('./Icons/Edit.js');
 var Exit = require('./Icons/Exit.js');
 var EyeOpen = require('./Icons/EyeOpen.js');
@@ -97,6 +98,7 @@ exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
+exports.CrossFill = CrossFill.default;
 exports.Edit = Edit.default;
 exports.Exit = Exit.default;
 exports.EyeOpen = EyeOpen.default;

package/package.json

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