@majoo-ui/react 1.58.4-rc.2 → 1.58.4

package/index.umd.js

@@ -1333,7 +1333,7 @@
       bgDark: '#FFFFFF'
     }
   });
-  var colors$7 = core.foundations.colors;
+  var colors$8 = core.foundations.colors;
 
   const normalize = {
     '*,::before,::after': {
@@ -3298,7 +3298,7 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-      color: colors$7.iconSecondary,
+      color: colors$8.iconSecondary,
       size: "16px",
       __self: undefined,
       __source: {
@@ -3777,7 +3777,7 @@
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-    color: colors$7.iconSecondary,
+    color: colors$8.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -3864,7 +3864,7 @@
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-      color: colors$7.iconSecondary,
+      color: colors$8.iconSecondary,
       size: "16px",
       __self: undefined,
       __source: {
@@ -10304,7 +10304,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       size: 16,
-      color: colors$7.iconSecondary,
+      color: colors$8.iconSecondary,
       style: {
         verticalAlign: 'middle'
       },
@@ -10838,7 +10838,7 @@
   const _excluded$e = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue"];
   var _jsxFileName$z = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
   const {
-    colors: colors$6
+    colors: colors$7
   } = core.foundations;
   const InputSearchbox = _ref => {
     var _props$value;
@@ -10914,7 +10914,7 @@
       }
     })), /*#__PURE__*/React__default["default"].createElement(InputRightElement, {
       children: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
-        color: colors$6.iconSecondary,
+        color: colors$7.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$z,
@@ -11572,7 +11572,7 @@
             readOnly: readOnly
           }, {
             children: jsxRuntime.jsx(icons.CaretDownOutline, {
-              color: readOnly ? colors$7.gray300 : iconColor
+              color: readOnly ? colors$8.gray300 : iconColor
             }, void 0)
           }), void 0);
         };
@@ -11787,7 +11787,7 @@
                           }, {
                             children: jsxRuntime.jsx(icons.CircleInfoOutline, {
                               size: "16px",
-                              color: colors$7.iconDisable,
+                              color: colors$8.iconDisable,
                               style: {
                                 verticalAlign: 'text-bottom'
                               }
@@ -13236,7 +13236,7 @@
     color: '$textDisable',
     display: 'inline-flex'
   });
-  const IndeterminateFilled = styled('div', {
+  const IndeterminateFilled$1 = styled('div', {
     width: 16,
     height: 16,
     background: '$primary500',
@@ -13661,7 +13661,7 @@
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
-      color: disabled || readOnly ? colors$7.iconDisable : colors$7.iconPrimary,
+      color: disabled || readOnly ? colors$8.iconDisable : colors$8.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -13780,7 +13780,7 @@
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
-      color: colors$7.iconSecondary,
+      color: colors$8.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -13788,7 +13788,7 @@
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-      color: colors$7.iconSecondary,
+      color: colors$8.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -13947,7 +13947,7 @@
           columnNumber: 23
         }
       }, !(item !== null && item !== void 0 && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
-        color: colors$7.iconDisable,
+        color: colors$8.iconDisable,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
@@ -13955,14 +13955,14 @@
           columnNumber: 29
         }
       }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
-        color: colors$7.iconGreen,
+        color: colors$8.iconGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
           lineNumber: 834,
           columnNumber: 31
         }
-      })), isShowSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
+      })), isShowSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
@@ -14020,7 +14020,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
       size: "16px",
-      color: colors$7.iconDisable,
+      color: colors$8.iconDisable,
       style: {
         verticalAlign: 'text-bottom'
       },
@@ -14360,7 +14360,7 @@
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CirclePlusOutline, {
-      color: colors$7.iconGreen,
+      color: colors$8.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
@@ -14412,31 +14412,35 @@
       onItemCheck = _a.onItemCheck,
       onItemUncheck = _a.onItemUncheck,
       searchPlaceholder = _a.searchPlaceholder,
+      _c = _a.counterFooter,
+      counterFooter = _c === void 0 ? true : _c,
       counterFooterText = _a.counterFooterText,
-      _c = _a.isLoading,
-      isLoading = _c === void 0 ? false : _c,
+      _d = _a.isLoading,
+      isLoading = _d === void 0 ? false : _d,
       enabledItems = _a.enabledItems,
       emptyDataMessage = _a.emptyDataMessage,
       value = _a.value,
       fetchData = _a.fetchData,
       onQueryChange = _a.onQueryChange,
       css = _a.css,
+      wrapperCss = _a.wrapperCss,
       defaultSort = _a.defaultSort,
       title = _a.title,
-      hideSelectAll = _a.hideSelectAll;
+      hideSelectAll = _a.hideSelectAll,
+      customHeader = _a.customHeader;
     var t = reactI18next.useTranslation(['MajooUI/inputResourceList', 'translation']).t;
-    var _d = React.useState([]),
-      checkedResources = _d[0],
-      setCheckedResources = _d[1];
-    var _e = React.useState(),
-      query = _e[0],
-      setQuery = _e[1];
-    var _f = React.useState('asc'),
-      sortType = _f[0],
-      setSortType = _f[1];
-    var _g = React.useState([]),
-      data = _g[0],
-      setData = _g[1];
+    var _e = React.useState([]),
+      checkedResources = _e[0],
+      setCheckedResources = _e[1];
+    var _f = React.useState(),
+      query = _f[0],
+      setQuery = _f[1];
+    var _g = React.useState('asc'),
+      sortType = _g[0],
+      setSortType = _g[1];
+    var _h = React.useState([]),
+      data = _h[0],
+      setData = _h[1];
     var scrollerRef = React.useRef(null);
     React.useEffect(function () {
       function filterUnique(params) {
@@ -14633,7 +14637,7 @@
         position: 'relative'
       }, css)
     }, {
-      children: [onQueryChange && jsxRuntime.jsx(InputSearchbox, {
+      children: [customHeader, onQueryChange && jsxRuntime.jsx(InputSearchbox, {
         size: "lg",
         placeholder: searchPlaceholder || t('placeholder.search', 'Cari ...', {
           ns: 'translation'
@@ -14667,7 +14671,7 @@
         }, {
           children: jsxRuntime.jsx(icons.SortingOutline, {
             size: 16,
-            color: colors$7.iconSecondary
+            color: colors$8.iconSecondary
           }, void 0)
         }), void 0)]
       }), void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
@@ -14689,7 +14693,7 @@
           children: "Loading .... "
         }), void 0)
       }), void 0), jsxRuntime.jsxs(Box, __assign({
-        css: {
+        css: __assign({
           border: '1px solid $gray300',
           padding: '$spacing-05',
           borderRadius: '$lg',
@@ -14697,7 +14701,7 @@
           height: isLoading ? 285 : 'unset',
           overflow: 'auto',
           marginTop: '$spacing-03'
-        },
+        }, wrapperCss && wrapperCss),
         ref: scrollerRef
       }, {
         children: [data.length <= 0 && (value || checkedResources).length <= 0 && !isLoading || defaultSort && data.length < 1 ? jsxRuntime.jsx(Flex$1, __assign({
@@ -14737,7 +14741,7 @@
         }, {
           children: defaultSort ? renderWithSorting() : renderWithoutSorting()
         }), void 0)]
-      }), void 0), (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0 || checkedResources.length > 0) && jsxRuntime.jsx(Box, __assign({
+      }), void 0), counterFooter && (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0 || checkedResources.length > 0) && jsxRuntime.jsx(Box, __assign({
         css: {
           marginTop: '$spacing-04'
         }
@@ -14752,6 +14756,115 @@
     }), void 0);
   }
 
+  var colors$6 = core.foundations.colors;
+  var IconBox = styled('div', {
+    height: 16,
+    width: 16,
+    cursor: 'pointer',
+    variants: {
+      border: {
+        true: {
+          borderRadius: 3,
+          border: '1.5px solid $gray300'
+        }
+      }
+    }
+  });
+  var IndeterminateFilled = styled('div', {
+    width: 16,
+    height: 16,
+    background: '$primary500',
+    color: '$textWhite',
+    borderRadius: 3,
+    fontSize: 14,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  });
+  var InputResourceListExpandable = function InputResourceListExpandable(_a) {
+    var _b;
+    var renderSelectAll = _a.renderSelectAll,
+      onItemCheck = _a.onItemCheck,
+      onItemUncheck = _a.onItemUncheck,
+      value = _a.value,
+      props = __rest(_a, ["renderSelectAll", "onItemCheck", "onItemUncheck", "value"]);
+    var _c = React.useState(false),
+      expand = _c[0],
+      setExpand = _c[1];
+    var _d = React.useState(value || []),
+      checkedItem = _d[0],
+      setCheckedItem = _d[1];
+    var handleChecked = function handleChecked(item) {
+      onItemCheck(item);
+      setCheckedItem(function (current) {
+        return __spreadArray(__spreadArray([], current, true), [item], false);
+      });
+    };
+    var handleUnChecked = function handleUnChecked(item) {
+      onItemUncheck(item);
+      setCheckedItem(function (current) {
+        return current.filter(function (currItem) {
+          return currItem.value !== item.value;
+        });
+      });
+    };
+    var handleCheckedAll = function handleCheckedAll() {
+      var _a, _b, _c;
+      if ((checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length) && !((_a = props === null || props === void 0 ? void 0 : props.data) === null || _a === void 0 ? void 0 : _a.length)) {
+        for (var i = 0; i < (checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length); i++) {
+          var item = checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem[i];
+          handleUnChecked(item);
+        }
+      } else {
+        for (var i = 0; i < ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length); i++) {
+          var item = (_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c[i];
+          handleChecked(item);
+        }
+      }
+    };
+    return jsxRuntime.jsxs(Box, {
+      children: [jsxRuntime.jsxs(Flex$1, __assign({
+        justify: "between",
+        align: "start"
+      }, {
+        children: [jsxRuntime.jsxs(Flex$1, __assign({
+          gap: 5
+        }, {
+          children: [jsxRuntime.jsx(IconBox, __assign({
+            onClick: handleCheckedAll,
+            border: Boolean(!(checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length))
+          }, {
+            children: (checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length) && !((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length) ? jsxRuntime.jsx(CheckOutline, {
+              color: colors$6.iconGreen
+            }, void 0) : (checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length) ? jsxRuntime.jsx(IndeterminateFilled, {
+              children: "-"
+            }, void 0) : ''
+          }), void 0), renderSelectAll]
+        }), void 0), jsxRuntime.jsx(Box, __assign({
+          css: {
+            cursor: 'pointer'
+          },
+          onClick: function () {
+            return setExpand(!expand);
+          }
+        }, {
+          children: expand ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
+        }), void 0)]
+      }), void 0), jsxRuntime.jsx(Box, {
+        children: expand && jsxRuntime.jsx(InputResourceList, __assign({}, props, {
+          value: checkedItem,
+          onItemCheck: handleChecked,
+          onItemUncheck: handleUnChecked
+        }), void 0)
+      }, void 0)]
+    }, void 0);
+  };
+  var ResourceList = function ResourceList(_a) {
+    var expandable = _a.expandable,
+      props = __rest(_a, ["expandable"]);
+    return expandable ? jsxRuntime.jsx(InputResourceListExpandable, __assign({}, props), void 0) : jsxRuntime.jsx(InputResourceList, __assign({}, props), void 0);
+  };
+
   var SelectInputSearch = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
     var _b = _a.showLeadingIcon,
       showLeadingIcon = _b === void 0 ? false : _b,
@@ -15167,7 +15280,7 @@
       }, {
         children: jsxRuntime.jsx(icons.MinusOutline, {
           size: 24,
-          color: disabled || disabledDecrement ? colors$7.iconDisable : colors$7.primary500
+          color: disabled || disabledDecrement ? colors$8.iconDisable : colors$8.primary500
         }, void 0)
       }), void 0), jsxRuntime.jsx(Input$4, {
         ref: ref,
@@ -15190,7 +15303,7 @@
       }, {
         children: jsxRuntime.jsx(icons.PlusOutline, {
           size: 24,
-          color: disabled || disabledIncrement ? colors$7.iconDisable : colors$7.primary500
+          color: disabled || disabledIncrement ? colors$8.iconDisable : colors$8.primary500
         }, void 0)
       }), void 0)]
     }), void 0);
@@ -15785,7 +15898,7 @@
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLeftOutline, {
-        color: colors$7.iconGreen,
+        color: colors$8.iconGreen,
         __self: this,
         __source: {
           fileName: _jsxFileName$s,
@@ -15815,7 +15928,7 @@
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronRightOutline, {
-        color: colors$7.iconGreen,
+        color: colors$8.iconGreen,
         __self: this,
         __source: {
           fileName: _jsxFileName$s,
@@ -17755,7 +17868,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
       children: /*#__PURE__*/React__default["default"].createElement(icons.TimeOutline, {
-        color: disabled ? colors$7.iconDisable : colors$7.iconPrimary,
+        color: disabled ? colors$8.iconDisable : colors$8.iconPrimary,
         __self: this,
         __source: {
           fileName: _jsxFileName$q,
@@ -19689,7 +19802,7 @@
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgLeftOutline, {
-      color: colors$7.iconGreen,
+      color: colors$8.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
@@ -19718,7 +19831,7 @@
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgRightOutline, {
-      color: colors$7.iconGreen,
+      color: colors$8.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
@@ -19778,7 +19891,7 @@
         columnNumber: 9
       }
     }, icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
-      color: activeTabs === value || isIconHovered ? colors$7.iconGreen : colors$7.iconDisable
+      color: activeTabs === value || isIconHovered ? colors$8.iconGreen : colors$8.iconDisable
     }), (!icon || activeTabs === value) && children)));
   };
   const TabsContent$1 = _ref4 => {
@@ -20564,7 +20677,7 @@
         columnNumber: 5
       }
     }, iconType === 'prev' ? /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
-      color: isHover ? colors$7.iconGreen : colors$7.iconPrimary,
+      color: isHover ? colors$8.iconGreen : colors$8.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
@@ -20572,7 +20685,7 @@
         columnNumber: 9
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
-      color: isHover ? colors$7.iconGreen : colors$7.iconPrimary,
+      color: isHover ? colors$8.iconGreen : colors$8.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
@@ -20705,7 +20818,7 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
-      color: currentPage === 1 ? colors$7.iconDisable : colors$7.iconPrimary,
+      color: currentPage === 1 ? colors$8.iconDisable : colors$8.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
@@ -20782,7 +20895,7 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
-      color: currentPage === totalPages ? colors$7.iconDisable : colors$7.iconPrimary,
+      color: currentPage === totalPages ? colors$8.iconDisable : colors$8.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
@@ -21087,7 +21200,7 @@
         columnNumber: 15
       }
     }, selectedLimit.toString()), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-      color: colors$7.gray400,
+      color: colors$8.gray400,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
@@ -21400,23 +21513,23 @@
     userSelect: 'none',
     color: '$textPrimary',
     '&[data-disabled]': {
-      color: colors$7.gray400,
+      color: colors$8.gray400,
       pointerEvents: 'none'
     },
     '&:hover': {
       cursor: 'pointer',
-      backgroundColor: colors$7.gray100
+      backgroundColor: colors$8.gray100
     },
     '&:active': {
-      backgroundColor: colors$7.gray150
+      backgroundColor: colors$8.gray150
     },
     '&:focus': {
-      backgroundColor: colors$7.gray100
+      backgroundColor: colors$8.gray100
     }
   });
   var ContextMenuSeparator = styled('div', {
     height: 1,
-    backgroundColor: colors$7.gray150,
+    backgroundColor: colors$8.gray150,
     margin: 5
   });
 
@@ -21742,7 +21855,7 @@
                             justify: "between",
                             gap: 5,
                             css: {
-                              backgroundColor: colors$7.bgGray,
+                              backgroundColor: colors$8.bgGray,
                               padding: "$spacing-04 $spacing-05 ".concat('selection' in row.values ? '$spacing-04 $spacing-07' : ''),
                               borderBottom: '1pt solid $bgBorder',
                               alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
@@ -21777,7 +21890,7 @@
                         gap: 3,
                         css: {
                           height: '40px',
-                          backgroundColor: colors$7.bgGray,
+                          backgroundColor: colors$8.bgGray,
                           paddingRight: '$spacing-04'
                         }
                       }, {
@@ -22792,7 +22905,7 @@
                           children: [leftAddOnCells.map(function (_, index) {
                             return jsxRuntime.jsx("td", {
                               style: {
-                                backgroundColor: colors$7.bgGray
+                                backgroundColor: colors$8.bgGray
                               }
                             }, index);
                           }), jsxRuntime.jsxs(React__namespace.Fragment, {
@@ -23537,7 +23650,7 @@
   });
   const StyledOverlay = styled(ADialog__namespace.Overlay, {
     zIndex: 1,
-    backgroundColor: colors$7.bgDimmer,
+    backgroundColor: colors$8.bgDimmer,
     position: 'fixed',
     inset: 0,
     '@media (prefers-reduced-motion: no-preference)': {
@@ -23570,14 +23683,14 @@
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    color: colors$7.gray900,
+    color: colors$8.gray900,
     fontSize: 17,
     fontWeight: 500
   });
   const StyledDescription$1 = styled(ADialog__namespace.Description, {
     mx: 24,
     my: 20,
-    color: colors$7.gray900,
+    color: colors$8.gray900,
     fontSize: 15,
     lineHeight: 1.5
   });
@@ -24234,17 +24347,17 @@
     position: 'relative',
     userSelect: 'none',
     '&[data-disabled]': {
-      color: colors$7.gray400,
+      color: colors$8.gray400,
       pointerEvents: 'none'
     },
     '&:hover': {
       cursor: 'pointer'
     },
     '&:active': {
-      backgroundColor: colors$7.gray150
+      backgroundColor: colors$8.gray150
     },
     '&:focus': {
-      backgroundColor: colors$7.gray100
+      backgroundColor: colors$8.gray100
     }
   };
   const StyledItem = styled(DropdownMenuPrimitive__namespace.Item, Object.assign({}, itemStyles));
@@ -24261,11 +24374,11 @@
     padding: '8px 0',
     fontSize: 12,
     lineHeight: '25px',
-    color: colors$7.gray700
+    color: colors$8.gray700
   });
   const StyledSeparator = styled(DropdownMenuPrimitive__namespace.Separator, {
     height: 1,
-    backgroundColor: colors$7.gray150,
+    backgroundColor: colors$8.gray150,
     margin: 5
   });
   const StyledItemIndicator = styled(DropdownMenuPrimitive__namespace.ItemIndicator, {
@@ -24362,7 +24475,7 @@
       color: 'white'
     },
     '[data-disabled] &': {
-      color: colors$7.gray400
+      color: colors$8.gray400
     }
   });
   const StyledDropdown = styled(Button$4, {
@@ -28170,7 +28283,7 @@
         buttonType: "secondary"
       }, {
         children: jsxRuntime.jsx(icons.ChevronLeftOutline, {
-          color: colors$7.btnPrimary
+          color: colors$8.btnPrimary
         }, void 0)
       }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
         align: "center",
@@ -28230,7 +28343,7 @@
         buttonType: "secondary"
       }, {
         children: jsxRuntime.jsx(icons.ChevronRightOutline, {
-          color: colors$7.btnPrimary
+          color: colors$8.btnPrimary
         }, void 0)
       }), void 0)]
     }), void 0);
@@ -31309,7 +31422,7 @@
             marginRight: 9
           },
           size: "24",
-          color: colors$7.bgGreen,
+          color: colors$8.bgGreen,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -31330,7 +31443,7 @@
             margin: '0 9px'
           },
           size: "20",
-          color: colors$7.iconSecondary,
+          color: colors$8.iconSecondary,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -31402,7 +31515,7 @@
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
           size: "20",
-          color: colors$7.iconPrimary,
+          color: colors$8.iconPrimary,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -31829,10 +31942,10 @@
   const DesktopContainer = styled(Flex$1, {
     display: 'none',
     '& .active-scroll-spy': {
-      borderLeft: `4px solid ${colors$7.primary500} !important`
+      borderLeft: `4px solid ${colors$8.primary500} !important`
     },
     '& .active-scroll-spy .link-title': {
-      color: `${colors$7.primary500} !important`
+      color: `${colors$8.primary500} !important`
     },
     '@md': {
       display: 'unset'
@@ -31840,7 +31953,7 @@
   });
   const MobileContainer = styled(Flex$1, {
     backgroundColor: '$white',
-    border: `1px solid ${colors$7.gray150}`,
+    border: `1px solid ${colors$8.gray150}`,
     borderRadius: 8,
     padding: '8px 8px',
     width: '100%',
@@ -31967,7 +32080,7 @@
           marginLeft: '-4px !important',
           borderLeftWidth: '4px !important',
           borderLeftStyle: 'solid !important',
-          borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$7.primary500 : 'transparent'} !important`,
+          borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$8.primary500 : 'transparent'} !important`,
           paddingLeft: '16px !important',
           minHeight: 25
         },
@@ -50525,11 +50638,11 @@
       var getColor = function getColor(state) {
         switch (state) {
           case 'error':
-            return colors$7.red400;
+            return colors$8.red400;
           case 'active':
-            return colors$7.primary500;
+            return colors$8.primary500;
           default:
-            return colors$7.gray150;
+            return colors$8.gray150;
         }
       };
       var iconProps = {
@@ -52506,7 +52619,7 @@
                         }
                       }, void 0) : jsxRuntime.jsx(icons.MinusOutline, {
                         size: 16,
-                        color: colors$7.iconDisable
+                        color: colors$8.iconDisable
                       }, void 0)
                     }, void 0)
                   }), index + indexSubRow + 'tb-cell-collapse');
@@ -52812,9 +52925,9 @@
     function getBaseColor(color) {
       switch (color) {
         case 'primary':
-          return colors$7.gray300;
+          return colors$8.gray300;
         default:
-          return colors$7.gray150;
+          return colors$8.gray150;
       }
     }
     function getSize(size) {
@@ -52978,9 +53091,9 @@
           }
         }, {
           children: [showAllTags ? jsxRuntime.jsx(icons.ChevronUpOutline, {
-            color: colors$7.iconSecondary
+            color: colors$8.iconSecondary
           }, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {
-            color: colors$7.iconSecondary
+            color: colors$8.iconSecondary
           }, void 0), jsxRuntime.jsx(Paragraph, __assign({
             css: {
               fontWeight: 600,
@@ -55128,7 +55241,7 @@
   exports.InputPrefix = InputPrefix;
   exports.InputRadio = InputRadio;
   exports.InputRadioGroup = InputRadioGroup;
-  exports.InputResourceList = InputResourceList;
+  exports.InputResourceList = ResourceList;
   exports.InputRightAddon = InputRightAddon;
   exports.InputRightElement = InputRightElement;
   exports.InputSearchbox = InputSearchbox;