@luscii-healthtech/web-ui 2.7.0 → 2.9.0

package/dist/web-ui.cjs.development.js

@@ -18,6 +18,7 @@ var ClipboardJS = _interopDefault(require('clipboard'));
 var ReactSelect = require('react-select');
 var ReactSelect__default = _interopDefault(ReactSelect);
 var dragula = _interopDefault(require('react-dragula'));
+var groupBy = _interopDefault(require('lodash/groupBy'));
 var debounce = _interopDefault(require('lodash.debounce'));
 var ReactQuill = _interopDefault(require('react-quill'));
 require('react-quill/dist/quill.snow.css');
@@ -29,6 +30,120 @@ require('react-draft-wysiwyg/dist/react-draft-wysiwyg.css');
 var reactHookForm = require('react-hook-form');
 var errorMessage = require('@hookform/error-message');
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+/**
+ * Container to be used for layouting instead of divs around the project.
+ * The spacing here has been coded according to our guidelines.
+ */
+
+var FlexContainer = function FlexContainer(props) {
+  var children = props.children,
+      alignItems = props.alignItems,
+      verticallySpaced = props.verticallySpaced,
+      horitontallySpaced = props.horitontallySpaced,
+      justifyContent = props.justifyContent,
+      hasPadding = props.hasPadding,
+      type = props.type;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("flex w-full", {
+      "flex-row": type === "row",
+      "flex-col": type === "column",
+      "justify-center": justifyContent === "center",
+      "justify-start": justifyContent === "start",
+      "justify-end": justifyContent === "end",
+      "justify-between": justifyContent === "between",
+      "items-start": alignItems === "start",
+      "items-center": alignItems === "center",
+      "items-end": alignItems === "end",
+      "space-x-4": horitontallySpaced,
+      "space-y-4": verticallySpaced,
+      "p-4": hasPadding
+    })
+  }, children);
+};
+
+var _excluded = ["children", "spaced"];
+/**
+ * Container to be used for layouting instead of divs around the project.
+ * The spacing here has been coded according to our guidelines.
+ */
+
+var FlexColumn = function FlexColumn(props) {
+  var children = props.children,
+      _props$spaced = props.spaced,
+      spaced = _props$spaced === void 0 ? true : _props$spaced,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React__default.createElement(FlexContainer, Object.assign({}, rest, {
+    type: "column",
+    verticallySpaced: spaced
+  }), children);
+};
+
+var _excluded$1 = ["children", "spaced"];
+/**
+ * Container to be used for layouting instead of divs around the project.
+ * The spacing here has been coded according to our guidelines.
+ */
+
+var FlexRow = function FlexRow(props) {
+  var children = props.children,
+      _props$spaced = props.spaced,
+      spaced = _props$spaced === void 0 ? true : _props$spaced,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1);
+
+  return /*#__PURE__*/React__default.createElement(FlexContainer, Object.assign({}, rest, {
+    type: "row",
+    horitontallySpaced: spaced
+  }), children);
+};
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -520,53 +635,6 @@ var Badge = function Badge(props) {
   }, props.badgeCount));
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
 var Spinner = function Spinner(props) {
   return /*#__PURE__*/React__default.createElement("svg", {
     className: "w-5 h-5 animate-spin " + props.className,
@@ -587,7 +655,7 @@ var Spinner = function Spinner(props) {
   }));
 };
 
-var _excluded = ["onClick", "text", "textColor", "textHoverColor", "icon", "isDisabled", "isPending", "className"];
+var _excluded$2 = ["onClick", "text", "textColor", "textHoverColor", "icon", "isDisabled", "isPending", "className"];
 var ButtonV2 = function ButtonV2(_ref) {
   var onClick = _ref.onClick,
       text = _ref.text,
@@ -597,7 +665,7 @@ var ButtonV2 = function ButtonV2(_ref) {
       isDisabled = _ref.isDisabled,
       isPending = _ref.isPending,
       className = _ref.className,
-      otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+      otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   function handleClick(event) {
     event.stopPropagation();
@@ -867,7 +935,7 @@ var BUTTON_ROLES = {
   ICON: "icon"
 };
 
-var _excluded$1 = ["text", "role", "type", "title", "link", "isPending", "isDisabled", "onClick", "className", "iconName", "hasIcon", "dynamicIcon"];
+var _excluded$3 = ["text", "role", "type", "title", "link", "isPending", "isDisabled", "onClick", "className", "iconName", "hasIcon", "dynamicIcon"];
 
 function Button(props) {
   var _props$text = props.text,
@@ -892,7 +960,7 @@ function Button(props) {
       _props$hasIcon = props.hasIcon,
       hasIconProps = _props$hasIcon === void 0 ? false : _props$hasIcon,
       dynamicIcon = props.dynamicIcon,
-      otherAttributes = _objectWithoutPropertiesLoose(props, _excluded$1);
+      otherAttributes = _objectWithoutPropertiesLoose(props, _excluded$3);
 
   var hasAddIcon = className.includes("add-button");
   var hasEditIcon = className.includes("edit-button");
@@ -1368,13 +1436,13 @@ function Modal(_ref) {
   }, children) : null);
 }
 
-var _excluded$2 = ["buttons", "buttonsAlignment", "children"];
+var _excluded$4 = ["buttons", "buttonsAlignment", "children"];
 var ModalWithButtons = function ModalWithButtons(props) {
   var buttons = props.buttons,
       _props$buttonsAlignme = props.buttonsAlignment,
       buttonsAlignment = _props$buttonsAlignme === void 0 ? "justify-between" : _props$buttonsAlignme,
       children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$4);
 
   return /*#__PURE__*/React__default.createElement(Modal, Object.assign({}, rest, {
     withPadding: false
@@ -1442,7 +1510,7 @@ ConfirmationDialog.defaultProps = {
 var css_248z$8 = ".cweb-box-shadow-default {\n  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-box-shadow-default {\n    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.cweb-datepicker {\n  width: 182px;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  background-color: #ffffff;\n  outline: none;\n  padding: 12px 12px 11px 12px;\n}\n\n.cweb-datepicker input.cweb-datepicker {\n  font-size: 14px;\n}\n\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b;\n}\n\n.cweb-datepicker::placeholder {\n  color: #64748b;\n}\n\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b !important;\n}\n\n.cweb-datepicker::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.react-datepicker-popper {\n  z-index: 5;\n}\n\n.react-datepicker-popper[data-placement^=\"bottom\"] {\n  margin-top: 4px;\n}\n\n.react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle {\n  border-bottom-color: #ffffff;\n  margin-top: -4px;\n}\n\n.react-datepicker-popper[data-placement^=\"top\"] {\n  margin-bottom: 4px;\n}\n\n.react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle {\n  border-top-color: #ffffff;\n  margin-bottom: -4px;\n}\n\n.cweb-datepicker-calendar {\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  padding: 0;\n  border: 1px solid #cccccc;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-datepicker-calendar {\n    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n  }\n}\n\n.cweb-datepicker-calendar .react-datepicker__triangle {\n  left: 10px;\n  border: 6px solid transparent;\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation {\n  top: 19px;\n  width: 19px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n  border: 0;\n  transform: rotate(90deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n  border: 0;\n  transform: rotate(-90deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n  width: auto;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n  overflow-x: hidden;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #334155;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 40px !important;\n  padding: 0 !important;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n  color: #ffffff;\n  background-color: #0074dd !important;\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n  background-color: #045baa !important;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__header {\n  padding-top: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 14px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 19px;\n  color: #2d2d2d;\n  margin: 0;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  text-transform: capitalize;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n  margin-bottom: 15px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n    .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #334155;\n  margin: 0;\n  height: 44px;\n  padding-left: 12px;\n  border-radius: 4px;\n  background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n  text-transform: capitalize;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 1px solid #cccccc;\n  transition: all 0.4s ease;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n      .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n      .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n  color: #0074dd;\n  border-color: #0074dd;\n  cursor: pointer;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n  min-width: 172px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  min-width: 107px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding: 0;\n  background-color: #f3f3f3;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-names,\n  .cweb-datepicker-calendar .react-datepicker__month {\n  margin: 0.4rem;\n}\n\n.cweb-datepicker-calendar .react-datepicker__month {\n  padding-bottom: 8px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-names,\n  .cweb-datepicker-calendar .react-datepicker__week {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-name,\n  .cweb-datepicker-calendar .react-datepicker__day {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #334155;\n  margin: 0;\n  width: 41px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-name {\n  height: 19px;\n  text-transform: capitalize;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day {\n  height: 30px;\n  border-radius: 4px;\n  transition: background-color 0.3s ease-in-out;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n  background-color: #ffffff;\n  color: #0074dd;\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #0074dd;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  margin: 0 auto;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n  background-color: #ffffff;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n  font-weight: bold;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n  background-color: #e8f5fc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n  background-color: #f8fafc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  color: #ffffff;\n  background-color: #0074dd;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n  background-color: #045baa;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n  color: #ffffff;\n  background-color: #045baa;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n  content: \"\";\n  position: absolute;\n  top: -3px;\n  left: 0;\n  bottom: initial;\n  right: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(45deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n  color: #cccccc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n  background-color: #ffffff;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n  color: #cccccc;\n}\n";
 styleInject(css_248z$8);
 
-var _excluded$3 = ["className", "hasCloseButton", "closeButtonText", "adjustDateOnChange", "showMonthDropdown", "showYearDropdown", "shouldCloseOnSelect", "allowSameDay", "minDate", "maxDate", "isDisabled", "selected"];
+var _excluded$5 = ["className", "hasCloseButton", "closeButtonText", "adjustDateOnChange", "showMonthDropdown", "showYearDropdown", "shouldCloseOnSelect", "allowSameDay", "minDate", "maxDate", "isDisabled", "selected"];
 
 var Datepicker = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Datepicker, _Component);
@@ -1497,7 +1565,7 @@ var Datepicker = /*#__PURE__*/function (_Component) {
         _this$props2$isDisabl = _this$props2.isDisabled,
         isDisabled = _this$props2$isDisabl === void 0 ? false : _this$props2$isDisabl,
         selected = _this$props2.selected,
-        otherProps = _objectWithoutPropertiesLoose(_this$props2, _excluded$3);
+        otherProps = _objectWithoutPropertiesLoose(_this$props2, _excluded$5);
 
     var dateFormat = this.getDateFormat();
     var pickerClassName = classNames("cweb-datepicker text-slate-700 text-sm", className);
@@ -1558,7 +1626,7 @@ var img$a = "data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14'
 var css_248z$9 = ".cweb-box-shadow-default {\n  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-box-shadow-default {\n    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.cweb-dropdown {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  position: relative;\n  outline: none;\n  border-radius: 4px;\n}\n\n.cweb-dropdown:focus {\n  outline: 4px solid rgba(0, 159, 227, 0.3);\n}\n\n.cweb-dropdown > .dropdown-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n  height: 44px;\n  border-radius: 4px;\n  transition: all 0.4s ease;\n}\n\n.cweb-dropdown > .dropdown-header > .dropdown-header-icon {\n  opacity: 0.5;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.cweb-dropdown > .dropdown-header:hover > .dropdown-header-icon {\n  opacity: 1;\n}\n\n.cweb-dropdown > .dropdown-list {\n  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.56);\n  display: none;\n  position: absolute;\n  top: 100%;\n  z-index: 1;\n  width: 100%;\n  max-height: 360px;\n  overflow-y: auto;\n  align-self: stretch;\n  margin-top: 8px;\n  padding: 0;\n  background-color: #ffffff;\n  list-style: none;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n}\n\n.cweb-dropdown > .dropdown-list > .dropdown-list-item {\n  cursor: pointer;\n}\n\n.cweb-dropdown > .dropdown-list > .dropdown-list-item-group > .dropdown-list-item {\n  cursor: pointer;\n}\n\n.cweb-dropdown.is-open > .dropdown-list {\n  display: block;\n  margin-bottom: 32px;\n}\n\n.cweb-dropdown.is-open > .dropdown-list.wider {\n  width: 200%;\n}\n";
 styleInject(css_248z$9);
 
-var _excluded$4 = ["placeholder", "className", "initialSelectedItemId", "onItemSelect", "items", "wider"];
+var _excluded$6 = ["placeholder", "className", "initialSelectedItemId", "onItemSelect", "items", "wider"];
 var ITEM_QUERY_FIELD_NAMES = {
   ID: "id",
   HIGHLIGHT_INDEX: "highlightIndex"
@@ -1830,7 +1898,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         _this$props$placehold = _this$props.placeholder,
         placeholder = _this$props$placehold === void 0 ? "" : _this$props$placehold,
         className = _this$props.className,
-        otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+        otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$6);
 
     var _this$state2 = this.state,
         selectedItem = _this$state2.selectedItem,
@@ -1953,7 +2021,7 @@ var EmptyListMessage = function EmptyListMessage(_ref) {
 var css_248z$a = ".cweb-error-block {\n  position: relative;\n  padding: 16px 16px 16px 56px;\n  background-color: #fff1f1;\n  border-radius: 8px;\n}\n\n.cweb-error-block:before {\n  content: \"\";\n  position: absolute;\n  left: 16px;\n  top: 14px;\n  z-index: 1;\n  width: 24px;\n  height: 23px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E    %3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E        %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2212%22 fill%3D%22%23FF6266%22%2F%3E        %3Ccircle cx%3D%2212%22 cy%3D%2217%22 r%3D%222%22 fill%3D%22%23FFF%22%2F%3E        %3Crect width%3D%224%22 height%3D%2210%22 x%3D%2210%22 y%3D%224%22 fill%3D%22%23FFF%22 rx%3D%222%22%2F%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n";
 styleInject(css_248z$a);
 
-var _excluded$5 = ["message", "className"];
+var _excluded$7 = ["message", "className"];
 ErrorBlock.propTypes = {
   message: PropTypes.string.isRequired,
   className: PropTypes.string
@@ -1963,7 +2031,7 @@ function ErrorBlock(_ref) {
   var message = _ref.message,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var containerClassName = classNames("cweb-error-block", className);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -2067,7 +2135,7 @@ InfoField.defaultProps = {
 var css_248z$c = ".input::-ms-clear {\n  display: none;\n}";
 styleInject(css_248z$c);
 
-var _excluded$6 = ["withSuffix", "withPrefix", "className", "clearable", "type", "isDisabled", "icon", "name", "value", "onChange", "isError"];
+var _excluded$8 = ["withSuffix", "withPrefix", "className", "clearable", "type", "isDisabled", "icon", "name", "value", "onChange", "isError"];
 // Don't know why yet but it can be fixed later.
 
 var INPUT_TYPES = {
@@ -2094,7 +2162,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       value = _ref$value === void 0 ? "" : _ref$value,
       onChange = _ref.onChange,
       isError = _ref.isError,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   var hasNoExtraContent = withPrefix === "" && withSuffix === "";
 
@@ -2262,7 +2330,7 @@ var img$g = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3
 var css_248z$d = ".cweb-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.cweb-loading .cweb-loading-text {\n  margin-bottom: 24px;\n}\n\n.cweb-loading.as-modal {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 9999;\n  background-color: rgba(255, 255, 255, 0.6);\n}\n\n.cweb-loading.as-modal .cweb-loading-panel {\n  position: relative;\n  width: 320px;\n  min-height: 120px;\n  border-radius: 4px;\n  padding: 16px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.cweb-loading.as-modal .cweb-loading-panel:before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  height: 3px;\n  background-color: #6abfa5;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n";
 styleInject(css_248z$d);
 
-var _excluded$7 = ["asModal", "asSpinner", "className", "spinnerColor"];
+var _excluded$9 = ["asModal", "asSpinner", "className", "spinnerColor"];
 function LoadingIndicator(_ref) {
   var _ref$asModal = _ref.asModal,
       asModal = _ref$asModal === void 0 ? false : _ref$asModal,
@@ -2272,7 +2340,7 @@ function LoadingIndicator(_ref) {
       className = _ref$className === void 0 ? "" : _ref$className,
       _ref$spinnerColor = _ref.spinnerColor,
       spinnerColor = _ref$spinnerColor === void 0 ? "blue" : _ref$spinnerColor,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var spinnerToRender = spinnerColor === "blue" ? img$f : img$g;
   var containerClassName = classNames("cweb-loading", className, {
@@ -2282,6 +2350,7 @@ function LoadingIndicator(_ref) {
     className: containerClassName
   }), /*#__PURE__*/React__default.createElement("img", {
     src: asSpinner ? spinnerToRender : img$e,
+    "data-chromatic": "ignore",
     className: classNames("text-gray-600 fill-current stroke-current", {
       "h-4 w-4": asSpinner,
       "h-12 w-12": !asSpinner
@@ -2699,7 +2768,7 @@ var TableFooter = function TableFooter(props) {
   }, props.paginationMenuProps)))));
 };
 
-var _excluded$8 = ["items", "fieldConfigurations", "emptyRowsText", "emptyFieldContentText", "isLoading", "showHeader", "paginationMenuProps", "onRowClick", "className"];
+var _excluded$a = ["items", "fieldConfigurations", "emptyRowsText", "emptyFieldContentText", "isLoading", "showHeader", "paginationMenuProps", "onRowClick", "className"];
 function Table(_ref) {
   var items = _ref.items,
       fieldConfigurations = _ref.fieldConfigurations,
@@ -2712,7 +2781,7 @@ function Table(_ref) {
       paginationMenuProps = _ref.paginationMenuProps,
       onRowClick = _ref.onRowClick,
       className = _ref.className,
-      otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   // For not displaying empty view at creation
   var _useState = React.useState(true),
@@ -2862,7 +2931,7 @@ var ImageIcon = function ImageIcon(props) {
   }));
 };
 
-var _excluded$9 = ["icon", "subtitle", "title", "accessories", "tooltipId", "onAssetLoadError", "roundTop"];
+var _excluded$b = ["icon", "subtitle", "title", "accessories", "tooltipId", "onAssetLoadError", "roundTop"];
 var ListItem = function ListItem(_ref) {
   var icon = _ref.icon,
       subtitle = _ref.subtitle,
@@ -2871,7 +2940,7 @@ var ListItem = function ListItem(_ref) {
       tooltipId = _ref.tooltipId,
       onAssetLoadError = _ref.onAssetLoadError,
       roundTop = _ref.roundTop,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
   var _useState = React.useState(false),
       loadIconError = _useState[0],
@@ -2913,6 +2982,7 @@ var ListItem = function ListItem(_ref) {
     className: "w-6 h-6"
   }), !loadIconError && icon && typeof icon === "string" && /*#__PURE__*/React__default.createElement("img", {
     src: icon,
+    "data-chromatic": "ignore",
     alt: "list-item-icon",
     className: "w-6 h-6 text-sm",
     onLoad: onListItemIconLoad,
@@ -3278,7 +3348,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     type: "strong",
     text: groupTitle || "",
     className: " ml-4"
-  }), " ", ":"), /*#__PURE__*/React__default.createElement(Checkbox, {
+  }), " "), /*#__PURE__*/React__default.createElement(Checkbox, {
     onChange: handleGroupClick,
     className: "ml-auto",
     isChecked: groupCheckboxState === CheckboxState.CHECKED,
@@ -3325,6 +3395,170 @@ var CheckboxList = function CheckboxList(_ref) {
   }));
 };
 
+var SearchIcon = function SearchIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M15.5 13.9996H14.71L14.43 13.7296C15.63 12.3296 16.25 10.4196 15.91 8.38965C15.44 5.60965 13.12 3.38965 10.32 3.04965C6.09001 2.52965 2.53002 6.08965 3.05002 10.3196C3.39002 13.1196 5.61002 15.4396 8.39002 15.9096C10.42 16.2496 12.33 15.6296 13.73 14.4296L14 14.7096V15.4996L18.25 19.7496C18.66 20.1596 19.33 20.1596 19.74 19.7496C20.15 19.3396 20.15 18.6696 19.74 18.2596L15.5 13.9996ZM9.50002 13.9996C7.01002 13.9996 5.00002 11.9896 5.00002 9.49965C5.00002 7.00965 7.01002 4.99965 9.50002 4.99965C11.99 4.99965 14 7.00965 14 9.49965C14 11.9896 11.99 13.9996 9.50002 13.9996Z",
+    fill: "currentColor"
+  }));
+};
+
+var SearchInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
+    icon: SearchIcon,
+    type: "text",
+    clearable: true,
+    ref: ref
+  }));
+});
+
+var transformToGroups = function transformToGroups(items) {
+  var pinned = items.find(function (option) {
+    return option.isPinned;
+  });
+  var itemsWithGroup = items.filter(function (option) {
+    return option.group;
+  });
+  var groups = Object.entries(groupBy(itemsWithGroup, "group")).map(function (group) {
+    return {
+      title: group[0],
+      items: group[1].sort(function (a, b) {
+        return a.label > b.label ? 1 : b.label > a.label ? -1 : 0;
+      })
+    };
+  });
+  var itemsWithoutGroup = items.filter(function (option) {
+    return !option.group;
+  });
+  var restGroup = {
+    name: undefined,
+    items: itemsWithoutGroup
+  };
+
+  if (pinned) {
+    var myGroup = {
+      items: [pinned]
+    };
+    return [myGroup].concat(groups, [restGroup]);
+  }
+
+  return [].concat(groups, [restGroup]);
+};
+
+var CheckboxListModal = function CheckboxListModal(_ref) {
+  var texts = _ref.texts,
+      initialItems = _ref.initialItems,
+      isLoadingInitialItems = _ref.isLoadingInitialItems,
+      isOpen = _ref.isOpen,
+      onSave = _ref.onSave,
+      onCloseClick = _ref.onCloseClick,
+      _ref$filterItem = _ref.filterItem,
+      filterItem = _ref$filterItem === void 0 ? function () {
+    return true;
+  } : _ref$filterItem,
+      className = _ref.className,
+      _ref$hasSearch = _ref.hasSearch,
+      hasSearch = _ref$hasSearch === void 0 ? false : _ref$hasSearch;
+  var containerClassName = classNames(className);
+
+  var _useState = React.useState([]),
+      items = _useState[0],
+      setItems = _useState[1];
+
+  var _useState2 = React.useState([]),
+      visibleItems = _useState2[0],
+      setVisibleItems = _useState2[1];
+
+  var _useState3 = React.useState([]),
+      groups = _useState3[0],
+      setGroups = _useState3[1];
+
+  var _useState4 = React.useState(""),
+      search = _useState4[0],
+      setSearch = _useState4[1];
+
+  React.useEffect(function () {
+    setItems(initialItems);
+  }, [initialItems]);
+  React.useEffect(function () {
+    setVisibleItems(items.filter(function (item) {
+      return filterItem(item, search);
+    }));
+  }, [items, search]);
+  React.useEffect(function () {
+    setGroups(transformToGroups(visibleItems));
+  }, [visibleItems]);
+
+  var handleOnItemChange = function handleOnItemChange(event) {
+    var updatedItems = [].concat(items);
+    var index = updatedItems.findIndex(function (item) {
+      return item.id === event.id;
+    });
+    updatedItems[index].isChecked = event.newCheckedValue;
+    setItems(updatedItems);
+  };
+
+  var handleOnCloseClick = function handleOnCloseClick(event) {
+    event.stopPropagation();
+    onCloseClick();
+  };
+
+  var handleOnSaveClick = function handleOnSaveClick() {
+    onSave(items.filter(function (item) {
+      return item.isChecked;
+    }));
+    onCloseClick();
+  };
+
+  var handleOnSearchChange = function handleOnSearchChange(event) {
+    var _event$currentTarget$;
+
+    setSearch((_event$currentTarget$ = event.currentTarget.value) != null ? _event$currentTarget$ : "");
+  };
+
+  var closeButton = /*#__PURE__*/React.createElement(SecondaryButton, {
+    text: texts.cancelLabel,
+    onClick: handleOnCloseClick,
+    key: "close-checkbox-list-modal",
+    className: "mr-2"
+  });
+  var saveButton = /*#__PURE__*/React.createElement(PrimaryButton, {
+    text: texts.confirmLabel,
+    onClick: handleOnSaveClick,
+    key: "save-selected-checkbox-list-items"
+  });
+  return /*#__PURE__*/React.createElement(ModalWithButtons, {
+    isOpen: isOpen,
+    title: texts.title,
+    onCloseClick: handleOnCloseClick,
+    withPadding: true,
+    shouldCloseOnOverlayClick: true,
+    className: containerClassName,
+    buttons: [closeButton, saveButton],
+    buttonsAlignment: "justify-end"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "max-h-135 overflow-y-auto pr-4"
+  }, isLoadingInitialItems && /*#__PURE__*/React.createElement(LoadingIndicator, null), hasSearch && !isLoadingInitialItems && /*#__PURE__*/React.createElement(SearchInput, {
+    className: "w-130 mb-2",
+    value: search,
+    placeholder: texts.searchPlaceHolder,
+    onChange: handleOnSearchChange
+  }), !isLoadingInitialItems && (items == null ? void 0 : items.length) > 0 && /*#__PURE__*/React.createElement(CheckboxList, {
+    groups: groups,
+    onChange: handleOnItemChange
+  }), !isLoadingInitialItems && (items == null ? void 0 : items.length) === 0 && /*#__PURE__*/React.createElement(Text, {
+    text: texts.emptyState
+  })));
+};
+
 var TEXT_TYPE_OPTIONS = {
   DEFAULT: "default",
   STRONG: "strong",
@@ -3808,7 +4042,7 @@ Page.propTypes = {
   navLayoutProps: PropTypes.object
 };
 
-var _excluded$a = ["text", "type", "className"];
+var _excluded$c = ["text", "type", "className"];
 var TITLE_TYPE_OPTIONS = {
   DEFAULT: "default",
   BIG: "big",
@@ -3827,7 +4061,7 @@ function LegacyTitle(_ref) {
       type = _ref.type,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
 
   var ContainerElement;
   var containerClassName = classNames("cweb-title", className, {
@@ -4212,7 +4446,7 @@ Radio.propTypes = {
 var css_248z$m = ".cweb-radio-group {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n}\n\n.cweb-radio-group > .cweb-radio {\n  flex: 0 0 auto;\n  margin-right: 8px;\n}\n\n.cweb-radio-group .cweb-form-field {\n  margin-bottom: 12px;\n}\n\n.cweb-radio-group .cweb-form-info-text {\n  margin-left: 1.5rem;\n}\n\n.cweb-radio-group.vertical {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.cweb-radio-group.vertical .cweb-form-field:not(:last-child) {\n  margin-bottom: 8px;\n}\n\n.cweb-radio-group.vertical > .cweb-radio {\n  flex: 0 0 auto;\n  margin-bottom: 8px;\n}\n\n.cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {\n  border: 1px solid #ff6266 !important;\n}\n";
 styleInject(css_248z$m);
 
-var _excluded$b = ["className", "radioClassName", "name", "selectedOption", "isVertical", "radioOptions", "onChange", "error", "isDisabled"];
+var _excluded$d = ["className", "radioClassName", "name", "selectedOption", "isVertical", "radioOptions", "onChange", "error", "isDisabled"];
 /**
  * @deprecated: use RadioV2 instead
  */
@@ -4227,7 +4461,7 @@ function RadioGroup(_ref) {
       onChange = _ref.onChange,
       error = _ref.error,
       isDisabled = _ref.isDisabled,
-      otherOptions = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      otherOptions = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   var containerClassName = classNames("cweb-radio-group", {
     vertical: isVertical
@@ -4273,7 +4507,7 @@ RadioGroup.propTypes = {
 var css_248z$n = ".radio-form-field-label input[type=\"radio\"]:checked + .radio-circle {\n  --bg-opacity: 1;\n  background-color: #0074DD;\n  background-color: rgba(0, 116, 221, var(--bg-opacity));\n}\n\n.radio-form-field-label[data-has-error=\"true\"] .radio-circle {\n  --border-opacity: 1;\n  border-color: #c53030;\n  border-color: rgba(197, 48, 48, var(--border-opacity));\n  outline: 4px solid rgba(255, 98, 102, 0.3);\n  outline-offset: 0;\n}\n\n.radio-form-field-label\n  input[type=\"radio\"]:checked\n  + .radio-circle\n  .radio-inner-circle {\n  --bg-opacity: 1;\n  background-color: #fff;\n  background-color: rgba(255, 255, 255, var(--bg-opacity));\n}\n";
 styleInject(css_248z$n);
 
-var _excluded$c = ["text", "info", "isError", "innerRef", "className"];
+var _excluded$e = ["text", "info", "isError", "innerRef", "className"];
 
 function RadioInner(_ref) {
   var text = _ref.text,
@@ -4281,7 +4515,7 @@ function RadioInner(_ref) {
       isError = _ref.isError,
       innerRef = _ref.innerRef,
       className = _ref.className,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   var value = otherProps.value,
       disabled = otherProps.disabled;
@@ -4332,12 +4566,12 @@ var RadioV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   }));
 });
 
-var _excluded$d = ["innerRef", "options"];
+var _excluded$f = ["innerRef", "options"];
 
 function RadioGroupInner(_ref) {
   var innerRef = _ref.innerRef,
       options = _ref.options,
-      registerProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      registerProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames("flex flex-col space-y-2")
@@ -4359,7 +4593,7 @@ var RadioGroupV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref)
 var css_248z$o = ".cweb-section .cweb-button:last-of-type {\n  margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n  margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n  margin-left: auto;\n  width: 32px;\n  height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid #eeeeee;\n  width: 100%;\n  padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-top: 1px solid #eeeeee;\n  width: 100%;\n  padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n  width: 32px;\n  height: 32px;\n}\n";
 styleInject(css_248z$o);
 
-var _excluded$e = ["title", "buttons", "footer", "children", "className", "isLoading", "loadingIndicatorProps"];
+var _excluded$g = ["title", "buttons", "footer", "children", "className", "isLoading", "loadingIndicatorProps"];
 function Section(_ref) {
   var title = _ref.title,
       buttons = _ref.buttons,
@@ -4369,7 +4603,7 @@ function Section(_ref) {
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
       loadingIndicatorProps = _ref.loadingIndicatorProps,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, restProps, {
     className: classNames("cweb-section", "flex justify-start flex-col items-start", "rounded-lg", "mx-0 my-4", "bg-white", "w-full", className)
@@ -4400,12 +4634,12 @@ function Section(_ref) {
 var css_248z$p = ".cweb-list-item {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 0 16px 0;\n  border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n  border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n  cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n  background-color: #f2fafd;\n}\n";
 styleInject(css_248z$p);
 
-var _excluded$f = ["children", "className", "onClick"];
+var _excluded$h = ["children", "className", "onClick"];
 var SectionItem = function SectionItem(props) {
   var children = props.children,
       className = props.className,
       onClick = props.onClick,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$f);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$h);
 
   var classes = classNames("cweb-list-item", className, {
     "cweb-list-item-clickable": !!onClick
@@ -4416,7 +4650,7 @@ var SectionItem = function SectionItem(props) {
   }, rest), children);
 };
 
-var _excluded$g = ["text", "icon", "className", "iconClass", "onClick"];
+var _excluded$i = ["text", "icon", "className", "iconClass", "onClick"];
 
 function SectionItemWithContent(props) {
   var text = props.text,
@@ -4424,7 +4658,7 @@ function SectionItemWithContent(props) {
       className = props.className,
       iconClass = props.iconClass,
       onClick = props.onClick,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$g);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$i);
 
   var mergedClasses = classNames("cweb-section-text-item", className);
   var iconClasses = classNames("w-6 h-6 mr-4", iconClass);
@@ -4440,7 +4674,7 @@ function SectionItemWithContent(props) {
   }));
 }
 
-var _excluded$h = ["isError", "styles", "options", "onChange", "value", "isMulti", "className"];
+var _excluded$j = ["isError", "styles", "options", "onChange", "value", "isMulti", "className"];
 
 function generateCustomStyles$1(hasError, isIE11) {
   return {
@@ -4545,7 +4779,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
       value = _ref.value,
       isMulti = _ref.isMulti,
       className = _ref.className,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   var isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
   var customStyles = generateCustomStyles$1(isError, isIE11);
@@ -5027,7 +5261,7 @@ var TagGroup = function TagGroup(_ref) {
 var css_248z$r = ".cweb-textarea {\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  resize: none;\n}\n\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n\n.cweb-textarea.resizable {\n  resize: both;\n}\n\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n  color: #737373;\n}\n\n.cweb-textarea::placeholder {\n  color: #737373;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n  color: #64748b !important;\n}\n\n.cweb-textarea::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.cweb-textarea:focus {\n  border-color: #0074dd;\n}\n\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n\n.cweb-textarea.has-error {\n  border: 1px solid #ff6266;\n  color: #ff6266;\n}\n";
 styleInject(css_248z$r);
 
-var _excluded$i = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
+var _excluded$k = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
 var RESIZE_TYPES = {
   NONE: "none",
   BOTH: "both",
@@ -5071,7 +5305,7 @@ function Textarea(props) {
       onKeyPress = props.onKeyPress,
       _onKeyDown = props.onKeyDown,
       onCtrlEnter = props.onCtrlEnter,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$i);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$k);
 
   var style;
 
@@ -5247,7 +5481,7 @@ var Timeline = function Timeline(props) {
   }, props.loadMoreButtonProps)));
 };
 
-var _excluded$j = ["titleProps", "title", "titleAccessory", "contentProps", "content", "defaultContent", "className", "buttons"];
+var _excluded$l = ["titleProps", "title", "titleAccessory", "contentProps", "content", "defaultContent", "className", "buttons"];
 function ViewItem(_ref) {
   var titleProps = _ref.titleProps,
       title = _ref.title,
@@ -5258,7 +5492,7 @@ function ViewItem(_ref) {
       defaultContent = _ref$defaultContent === void 0 ? "-" : _ref$defaultContent,
       className = _ref.className,
       buttons = _ref.buttons,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
   var titlePropsMerged = titleProps != null ? titleProps : {
     text: title != null ? title : defaultContent
@@ -5294,31 +5528,6 @@ function ViewItem(_ref) {
   })));
 }
 
-var SearchIcon = function SearchIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    className: props.className,
-    onClick: props.onClick,
-    role: props.onClick ? "button" : undefined,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M15.5 13.9996H14.71L14.43 13.7296C15.63 12.3296 16.25 10.4196 15.91 8.38965C15.44 5.60965 13.12 3.38965 10.32 3.04965C6.09001 2.52965 2.53002 6.08965 3.05002 10.3196C3.39002 13.1196 5.61002 15.4396 8.39002 15.9096C10.42 16.2496 12.33 15.6296 13.73 14.4296L14 14.7096V15.4996L18.25 19.7496C18.66 20.1596 19.33 20.1596 19.74 19.7496C20.15 19.3396 20.15 18.6696 19.74 18.2596L15.5 13.9996ZM9.50002 13.9996C7.01002 13.9996 5.00002 11.9896 5.00002 9.49965C5.00002 7.00965 7.01002 4.99965 9.50002 4.99965C11.99 4.99965 14 7.00965 14 9.49965C14 11.9896 11.99 13.9996 9.50002 13.9996Z",
-    fill: "currentColor"
-  }));
-};
-
-var SearchInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
-    icon: SearchIcon,
-    type: "text",
-    clearable: true,
-    ref: ref
-  }));
-});
-
 /**
  * Decorator for any input component. Adds a label and additional information to be shown.
  *
@@ -5376,7 +5585,7 @@ var isRequired = function isRequired(options) {
   return !!(options && "required" in options);
 };
 
-var _excluded$k = ["name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+var _excluded$m = ["name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
 /**
  * Input field that can be used in any react-hook-form context.
  */
@@ -5388,7 +5597,7 @@ var FormInputInner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       label = _ref.label,
       info = _ref.info,
       decoratorClassname = _ref.decoratorClassname,
-      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
   return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
     name: name,
@@ -5409,7 +5618,7 @@ var FormInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   }));
 });
 
-var _excluded$l = ["innerRef", "name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+var _excluded$n = ["innerRef", "name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
 /**
  * Input field that can be used in any react-hook-form context.
  */
@@ -5422,7 +5631,7 @@ function FormRadioGroupInner(_ref) {
       label = _ref.label,
       info = _ref.info,
       decoratorClassname = _ref.decoratorClassname,
-      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
   return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
     name: name,
@@ -5444,7 +5653,7 @@ var FormRadioGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref
   }));
 });
 
-var _excluded$m = ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+var _excluded$o = ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
 
 var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
   var control = _ref.control,
@@ -5455,7 +5664,7 @@ var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef
       label = _ref.label,
       info = _ref.info,
       decoratorClassname = _ref.decoratorClassname,
-      selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
     name: name,
@@ -5478,7 +5687,7 @@ var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef
   }));
 });
 
-var _excluded$n = ["type", "name", "options", "fieldProps"];
+var _excluded$p = ["type", "name", "options", "fieldProps"];
 /**
  * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
  *
@@ -5543,7 +5752,7 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
       options = formFieldProps.options,
       _formFieldProps$field = formFieldProps.fieldProps,
       fieldProps = _formFieldProps$field === void 0 ? {} : _formFieldProps$field,
-      decoratorProps = _objectWithoutPropertiesLoose(formFieldProps, _excluded$n);
+      decoratorProps = _objectWithoutPropertiesLoose(formFieldProps, _excluded$p);
 
   var register = useFormReturn.register,
       control = useFormReturn.control,
@@ -6355,6 +6564,7 @@ exports.ChatBoxIcon = ChatBoxIcon;
 exports.CheckIcon = CheckIcon;
 exports.Checkbox = Checkbox;
 exports.CheckboxList = CheckboxList;
+exports.CheckboxListModal = CheckboxListModal;
 exports.ChevronDoubleIcon = ChevronDoubleIcon;
 exports.ConfirmationDialog = ConfirmationDialog;
 exports.CrossIcon = CrossIcon;
@@ -6369,6 +6579,8 @@ exports.EmptyStateDashboardIcon = EmptyStateDashboardIcon;
 exports.ErrorBlock = ErrorBlock;
 exports.ExclamationMarkIcon = ExclamationMarkIcon;
 exports.EyeIcon = EyeIcon;
+exports.FlexColumn = FlexColumn;
+exports.FlexRow = FlexRow;
 exports.Form = Form;
 exports.GearIcon = GearIcon;
 exports.GenericForm = GenericForm;