@bigbinary/neetoui 5.2.46 → 6.0.0

package/index.cjs.js

@@ -9,8 +9,8 @@ var neetoCist = require('@bigbinary/neeto-cist');
 var require$$0 = require('util');
 var reactRouterDom = require('react-router-dom');
 var ReactDOM = require('react-dom');
-var _DatePicker = require('antd/lib/date-picker');
 var _ConfigProvider = require('antd/lib/config-provider');
+var _DatePicker = require('antd/lib/date-picker');
 var _Slider = require('antd/lib/slider');
 var _Table = require('antd/lib/table');
 var i18next = require('i18next');
@@ -42,8 +42,8 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React$3);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React$3);
 var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-var _DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(_DatePicker);
 var _ConfigProvider__default = /*#__PURE__*/_interopDefaultLegacy(_ConfigProvider);
+var _DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(_DatePicker);
 var _Slider__default = /*#__PURE__*/_interopDefaultLegacy(_Slider);
 var _Table__default = /*#__PURE__*/_interopDefaultLegacy(_Table);
 var _Tree__default = /*#__PURE__*/_interopDefaultLegacy(_Tree);
@@ -9461,9 +9461,19 @@ var Item$2 = function Item(_ref) {
     titleProps = _ref$titleProps === void 0 ? {} : _ref$titleProps,
     _ref$iconProps = _ref.iconProps,
     iconProps = _ref$iconProps === void 0 ? {} : _ref$iconProps;
+  var onKeyDown = function onKeyDown(e) {
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        onClick();
+        break;
+    }
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames$1("neeto-ui-accordion__wrapper", _defineProperty$7({}, className, className))
   }, /*#__PURE__*/React__default["default"].createElement("div", {
+    onClick: onClick,
+    onKeyDown: onKeyDown,
     "aria-controls": "neeto-ui-accordion-section-".concat(id),
     "aria-disabled": isOpen,
     "aria-expanded": isOpen,
@@ -9472,21 +9482,9 @@ var Item$2 = function Item(_ref) {
     tabIndex: 0,
     className: classnames$1("neeto-ui-accordion__item neeto-ui-flex neeto-ui-justify-between neeto-ui-items-center", {
       "neeto-ui-accordion__item--open": isOpen
-    }),
-    onClick: onClick,
-    onKeyDown: function onKeyDown(e) {
-      switch (e.key) {
-        case " ":
-        case "Enter":
-          onClick();
-          break;
-      }
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", _extends$4({}, titleProps, {
-    className: classnames$1("neeto-ui-accordion__item-handle neeto-ui-flex neeto-ui-flex-grow neeto-ui-items-center neeto-ui-break-words", {
-      "neeto-ui-text-gray-700": !isOpen,
-      "neeto-ui-text-gray-800": isOpen
     })
+  }, /*#__PURE__*/React__default["default"].createElement("div", _extends$4({}, titleProps, {
+    className: "neeto-ui-accordion__item-handle neeto-ui-flex neeto-ui-flex-grow neeto-ui-items-center neeto-ui-break-words"
   }), title), /*#__PURE__*/React__default["default"].createElement(motion.div, {
     animate: isOpen ? "open" : "collapsed",
     className: "neeto-ui-accordion__item-toggle-icon neeto-ui-flex-grow-0",
@@ -9502,11 +9500,7 @@ var Item$2 = function Item(_ref) {
       }
     }
   }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Right, _extends$4({
-    size: 16,
-    className: classnames$1({
-      "neeto-ui-text-gray-700": !isOpen,
-      "neeto-ui-text-gray-800": isOpen
-    })
+    size: 16
   }, iconProps)))), /*#__PURE__*/React__default["default"].createElement(Collapse, {
     "aria-labelledby": "neeto-ui-accordion-item-".concat(id),
     className: "neeto-ui-accordion__drop",
@@ -9539,9 +9533,9 @@ var Accordion = function Accordion(_ref) {
     setOpenTab(defaultActiveKey);
   }, [defaultActiveKey]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames$1(_defineProperty$7({
-      "neeto-ui-accordions-outer-wrapper": padded,
-      "neeto-ui-bg-gray-100": style === ACCORDION_STYLES.secondary
+    className: classnames$1("neeto-ui-accordions-outer-wrapper", _defineProperty$7({
+      "neeto-ui-accordions-outer-wrapper--padded": padded,
+      "neeto-ui-accordions-outer-wrapper--secondary": style === ACCORDION_STYLES.secondary
     }, className, className))
   }, React__default["default"].Children.map(children, function (child, index) {
     var isSingleOrLastChild = ramda.isEmpty(children) || index === children.length - 1;
@@ -19041,11 +19035,12 @@ var Avatar = function Avatar(_ref) {
   var isMedium = size === "medium";
   var isLarge = size === "large";
   var isExtraLarge = size === "extraLarge";
-  var imageContainerStyle = {
-    height: SIZE[size],
-    width: SIZE[size]
-  };
-  var imageClasses = classnames$1("neeto-ui-avatar ", {
+  var containerClasses = classnames$1("neeto-ui-avatar__container neeto-ui-select-none", {
+    "neeto-ui-avatar__container--medium": isMedium,
+    "neeto-ui-avatar__container--large": isLarge,
+    "neeto-ui-avatar__container--xlarge": isExtraLarge
+  }, className);
+  var imageClasses = classnames$1("neeto-ui-avatar", {
     "neeto-ui-avatar--medium": isMedium,
     "neeto-ui-avatar--large": isLarge,
     "neeto-ui-avatar--xlarge": isExtraLarge,
@@ -19069,14 +19064,13 @@ var Avatar = function Avatar(_ref) {
     disabled: !showTooltip,
     position: "bottom"
   }, tooltipProps), /*#__PURE__*/React__default["default"].createElement("span", _extends$4({
-    "data-testid": "avatar",
-    style: imageContainerStyle,
-    className: classnames$1("neeto-ui-avatar--container neeto-ui-select-none", className),
-    onClick: onClick
+    onClick: onClick,
+    className: containerClasses,
+    "data-testid": "avatar"
   }, otherProps), /*#__PURE__*/React__default["default"].createElement(Indicator, null), shouldDisplayFallbackAvatar ? /*#__PURE__*/React__default["default"].createElement(FallbackAvatar, {
+    name: name,
     className: "neeto-ui-avatar__svg",
     colors: COLOR_PALLETE,
-    name: name,
     size: SIZE[size],
     variant: AVATAR_VARIANT
   }) : /*#__PURE__*/React__default["default"].createElement("img", {
@@ -19116,9 +19110,7 @@ var Callout = function Callout(_ref) {
   }, otherProps), icon && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-callout__icon",
     "data-testid": "callout-icon"
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    size: 20
-  })), children);
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, null)), children);
 };
 
 var _excluded$w = ["children", "className", "required", "helpIconProps"],
@@ -21018,7 +21010,58 @@ var DatePicker = /*#__PURE__*/React$3.forwardRef(function (_ref2, ref) {
   var handleOnChange = function handleOnChange(date, dateString) {
     type === "range" && !date ? onChange([], dateString) : onChange(date, dateString);
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement(_ConfigProvider__default["default"], {
+    theme: {
+      token: _objectSpread$k({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
+      components: {
+        DatePicker: {
+          activeBg: "rgb(var(--neeto-ui-white))",
+          activeBorderColor: "rgb(var(--neeto-ui-primary-500))",
+          addonBg: "rgb(var(--neeto-ui-gray-100))",
+          cellActiveWithRangeBg: "rgb(var(--neeto-ui-primary-100))",
+          cellBgDisabled: "rgb(var(--neeto-ui-gray-100))",
+          cellHoverBg: "rgb(var(--neeto-ui-gray-200))",
+          cellHoverWithRangeBg: "rgb(var(--neeto-ui-primary-100))",
+          cellRangeBorderColor: "rgb(var(--neeto-ui-primary-100))",
+          hoverBg: "rgb(var(--neeto-ui-white))",
+          hoverBorderColor: "rgb(var(--neeto-ui-primary-500))",
+          // Global overrides
+          colorBgContainer: "rgb(var(--neeto-ui-white))",
+          colorBgElevated: "rgb(var(--neeto-ui-white))",
+          colorPrimary: "rgb(var(--neeto-ui-primary-500))",
+          colorPrimaryBorder: "rgb(var(--neeto-ui-primary-100))",
+          colorPrimaryHover: "rgb(var(--neeto-ui-primary-600))",
+          colorBorder: "rgb(var(--neeto-ui-gray-300))",
+          colorError: "rgb(var(--neeto-ui-error-500))",
+          colorErrorHover: "rgb(var(--neeto-ui-error-600))",
+          colorErrorOutline: "rgb(var(--neeto-ui-error-100))",
+          colorFillAlter: "rgb(var(--neeto-ui-gray-100))",
+          colorIcon: "rgb(var(--neeto-ui-gray-700))",
+          colorIconHover: "rgb(var(--neeto-ui-gray-800))",
+          colorLink: "rgb(var(--neeto-ui-primary-500))",
+          colorLinkHover: "rgb(var(--neeto-ui-primary-600))",
+          colorLinkActive: "rgb(var(--neeto-ui-primary-800))",
+          colorSplit: "rgb(var(--neeto-ui-gray-200))",
+          colorText: "rgb(var(--neeto-ui-gray-800))",
+          colorTextDescription: "rgb(var(--neeto-ui-gray-700))",
+          colorTextDisabled: "rgb(var(--neeto-ui-gray-500))",
+          colorTextHeading: "rgb(var(--neeto-ui-black))",
+          colorTextLightSolid: "rgb(var(--neeto-ui-white))",
+          colorTextPlaceholder: "rgb(var(--neeto-ui-gray-400))",
+          colorTextQuaternary: "rgb(var(--neeto-ui-gray-400))",
+          colorWarning: "rgb(var(--neeto-ui-warning-500))",
+          colorWarningHover: "rgb(var(--neeto-ui-warning-600))",
+          colorWarningOutline: "rgb(var(--neeto-ui-warning-100))",
+          controlItemBgActive: "rgb(var(--neeto-ui-pastel-purple))",
+          controlItemBgHover: "rgb(var(--neeto-ui-gray-100))",
+          controlOutline: "rgb(var(--neeto-ui-gray-300))",
+          // Sizes
+          cellHeight: 32,
+          padding: 22
+        }
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-input__wrapper"
   }, label && /*#__PURE__*/React__default["default"].createElement(Label, _objectSpread$k({
     required: required
@@ -21071,7 +21114,7 @@ var DatePicker = /*#__PURE__*/React$3.forwardRef(function (_ref2, ref) {
     className: "neeto-ui-input__error",
     "data-cy": "".concat(hyphenize(label), "-input-error"),
     id: errorId
-  }, error));
+  }, error)));
 });
 DatePicker.displayName = "DatePicker";
 
@@ -21142,7 +21185,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
   }, label && /*#__PURE__*/React__default["default"].createElement(Label, _objectSpread$j({
     required: required
   }, labelProps), label), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames$1("neeto-ui-date-time-input flex", className)
+    className: classnames$1("neeto-ui-date-time-input", className)
   }, /*#__PURE__*/React__default["default"].createElement(DatePicker, {
     dateFormat: dateFormat,
     defaultValue: defaultValue,
@@ -21262,8 +21305,7 @@ var Input$3 = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
     required: required,
     "data-cy": "".concat(hyphenize(label), "-input-label"),
     htmlFor: id
-  }, labelProps), label), isCharacterLimitVisible && /*#__PURE__*/React__default["default"].createElement(Typography, {
-    style: "body2",
+  }, labelProps), label), isCharacterLimitVisible && /*#__PURE__*/React__default["default"].createElement("p", {
     className: classnames$1("neeto-ui-input__max-length", {
       "neeto-ui-input__max-length--error": maxLengthError
     })
@@ -21298,16 +21340,14 @@ var Input$3 = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
     onChange: handleChange
   })), suffix && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-input__suffix"
-  }, suffix)), !!error && /*#__PURE__*/React__default["default"].createElement(Typography, {
+  }, suffix)), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "neeto-ui-input__error",
     "data-cy": "".concat(hyphenize(label), "-input-error"),
-    id: errorId,
-    style: "body3"
-  }, error), helpText && /*#__PURE__*/React__default["default"].createElement(Typography, {
+    id: errorId
+  }, error), helpText && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "neeto-ui-input__help-text",
     "data-cy": "".concat(hyphenize(label), "-input-help"),
-    id: helpTextId,
-    style: "body3"
+    id: helpTextId
   }, helpText));
 });
 Input$3.displayName = "Input";
@@ -28290,13 +28330,13 @@ var MultiEmailInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
   }
   var isFilterEmailsLinkVisible = !!filterInvalidEmails && value.length > getValidEmailsCount(value);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-email-input"
+    className: "neeto-ui-input__wrapper neeto-ui-email-input__wrapper"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-flex neeto-ui-justify-between neeto-ui-email-input__title-row"
+    className: "neeto-ui-email-input__label-wrapper"
   }, label && /*#__PURE__*/React__default["default"].createElement(Label, _extends$4({
+    required: required,
     className: "neeto-ui-email-input__label",
-    "data-cy": "".concat(hyphenize(label), "-input-label"),
-    required: required
+    "data-cy": "".concat(hyphenize(label), "-input-label")
   }, labelProps), label), isCounterVisible && /*#__PURE__*/React__default["default"].createElement(Typography, {
     className: "neeto-ui-email-input__counter",
     "data-cy": "".concat(hyphenize(label), "-email-counter"),
@@ -28306,14 +28346,8 @@ var MultiEmailInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
     required: true,
     classNamePrefix: "neeto-ui-react-select",
     components: CUSTOM_COMPONENTS,
-    inputValue: inputValue,
     isDisabled: disabled,
-    isFocused: isFocused,
-    placeholder: placeholder,
-    ref: ref,
-    value: value,
-    visibleEmailsCount: visibleEmailsCount,
-    className: classnames$1("neeto-ui-react-select__container neeto-ui-email-input__select", {
+    className: classnames$1("neeto-ui-react-select__container neeto-ui-react-select__container--medium neeto-ui-email-input__select", {
       "neeto-ui-react-select__container--error": !!error
     }),
     styles: _objectSpread$g(_objectSpread$g({}, CUSTOM_STYLES), {}, {
@@ -28323,7 +28357,6 @@ var MultiEmailInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
       })
     }),
     onBlur: handleBlur,
-    onChange: onChange,
     onFocus: function onFocus() {
       return setIsFocused(true);
     },
@@ -28331,22 +28364,31 @@ var MultiEmailInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
       return setInputValue(inputValue);
     },
     onKeyDown: handleKeyDown
+  }, _objectSpread$g(_objectSpread$g(_objectSpread$g({
+    inputValue: inputValue,
+    isFocused: isFocused,
+    onChange: onChange,
+    placeholder: placeholder,
+    ref: ref,
+    value: value,
+    visibleEmailsCount: visibleEmailsCount
   }, !isOptionsPresent && {
     menuIsOpen: false
-  }, otherProps, overrideProps)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-email-input__bottom-info"
-  }, !!error && /*#__PURE__*/React__default["default"].createElement(Typography, {
+  }), otherProps), overrideProps))), !!error && /*#__PURE__*/React__default["default"].createElement(Typography, {
     className: "neeto-ui-input__error",
     "data-cy": "".concat(hyphenize(label), "-input-error"),
     style: "body3"
-  }, error, isFilterEmailsLinkVisible && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "neeto-ui-typography neeto-ui-text-body3 neeto-ui-font-semibold cursor-pointer",
+  }, error, isFilterEmailsLinkVisible && /*#__PURE__*/React__default["default"].createElement(Typography, {
+    className: "cursor-pointer",
+    component: "span",
+    style: "body3",
+    weight: "semibold",
     onClick: handleFilterEmails
   }, "\xA0", filterInvalidEmails.label ? filterInvalidEmails.label : "Click here to remove invalid emails.")), !!helpText && /*#__PURE__*/React__default["default"].createElement(Typography, {
     className: "neeto-ui-input__help-text",
     "data-cy": "".concat(hyphenize(label), "-input-help"),
     style: "body3"
-  }, helpText)));
+  }, helpText));
 });
 MultiEmailInput.displayName = "MultiEmailInput";
 
@@ -28391,17 +28433,17 @@ var NoData = function NoData(_ref) {
     lineHeight: "none",
     style: "h3"
   }, title), description && /*#__PURE__*/React__default["default"].createElement(Typography, {
-    className: "neeto-ui-text-center neeto-ui-mt-2",
+    className: "neeto-ui-text-center neeto-ui-no-data__description",
     "data-cy": "no-data-description",
     lineHeight: "normal",
     style: "body2"
   }, description), helpText && /*#__PURE__*/React__default["default"].createElement(Typography, {
-    className: "neeto-ui-mt-2 neeto-ui-text-center",
+    className: "neeto-ui-text-center neeto-ui-no-data__help-text",
     "data-cy": "no-data-help-text",
     lineHeight: "normal",
     style: "body2"
   }, helpText), (hasPrimaryButtonProps || hasSecondaryButtonProps) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-no-data__action-block neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-gap-2"
+    className: "neeto-ui-no-data__action-block neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center"
   }, hasPrimaryButtonProps && /*#__PURE__*/React__default["default"].createElement(Button, _extends$4({
     "data-cy": "no-data-primary-button"
   }, primaryButtonProps)), showButtonSeparator && /*#__PURE__*/React__default["default"].createElement(Typography, {
@@ -28591,7 +28633,7 @@ var Footer = function Footer(_ref) {
   var children = _ref.children,
     className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames$1("neeto-ui-pane__footer neeto-ui-shadow-m neeto-ui-flex neeto-ui-items-center", className)
+    className: classnames$1("neeto-ui-pane__footer neeto-ui-flex neeto-ui-items-center", className)
   }, children);
 };
 
@@ -28726,11 +28768,11 @@ var Popover = function Popover(_ref) {
     theme = _ref$theme === void 0 ? "light" : _ref$theme,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$h);
   return /*#__PURE__*/React__default["default"].createElement(Tooltip, _extends$4({
+    theme: theme,
     interactive: true,
     arrow: false,
     className: "neeto-ui-popover",
-    content: children,
-    theme: theme
+    content: children
   }, otherProps));
 };
 Popover.Title = Title;
@@ -28959,27 +29001,33 @@ var AsyncCreatableSelect = /*#__PURE__*/React$3.forwardRef(function (props, ref)
   }, selectProps));
 });
 
+var SPINNER_SIZES = {
+  small: "small",
+  medium: "medium"
+};
 var Spinner = function Spinner(_ref) {
   var _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? "dark" : _ref$theme,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SPINNER_SIZES.medium : _ref$size,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className;
-  var spinnerItemClassName = classnames$1("neeto-ui-spinner__item", {
-    "neeto-ui-bg-gray-800": theme === "dark"
-  }, {
-    "neeto-ui-bg-white": theme === "light"
-  });
   return /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classnames$1("neeto-ui-spinner", [className]),
-    "data-testid": "spinner"
+    "data-testid": "spinner",
+    className: classnames$1("neeto-ui-spinner", {
+      "neeto-ui-spinner--dark": theme === "dark",
+      "neeto-ui-spinner--light": theme === "light",
+      "neeto-ui-spinner--size-small": size === SPINNER_SIZES.small,
+      "neeto-ui-spinner--size-medium": size === SPINNER_SIZES.medium
+    }, [className])
   }, /*#__PURE__*/React__default["default"].createElement("i", {
-    className: spinnerItemClassName
+    className: "neeto-ui-spinner__item"
   }), /*#__PURE__*/React__default["default"].createElement("i", {
-    className: spinnerItemClassName
+    className: "neeto-ui-spinner__item"
   }), /*#__PURE__*/React__default["default"].createElement("i", {
-    className: spinnerItemClassName
+    className: "neeto-ui-spinner__item"
   }), /*#__PURE__*/React__default["default"].createElement("i", {
-    className: spinnerItemClassName
+    className: "neeto-ui-spinner__item"
   }));
 };
 
@@ -33630,19 +33678,19 @@ var HeaderCell = function HeaderCell(props) {
     }));
   }
   return /*#__PURE__*/React__default["default"].createElement(Resizable, {
+    onResize: onResize,
+    onResizeStop: onResizeStop,
     width: width,
+    draggableOpts: {
+      enableUserSelectHack: false
+    },
     height: 0,
     handle: /*#__PURE__*/React__default["default"].createElement("span", {
       className: "react-resizable-handle",
       onClick: function onClick(e) {
         return e.stopPropagation();
       }
-    }),
-    onResize: onResize,
-    onResizeStop: onResizeStop,
-    draggableOpts: {
-      enableUserSelectHack: false
-    }
+    })
   }, /*#__PURE__*/React__default["default"].createElement("th", _extends$4({}, restProps, {
     className: classnames$1(className, "drag-handler")
   })));
@@ -33656,19 +33704,19 @@ var ResizableHeaderCell = function ResizableHeaderCell(props) {
     return /*#__PURE__*/React__default["default"].createElement("th", restProps);
   }
   return /*#__PURE__*/React__default["default"].createElement(Resizable, {
+    onResize: onResize,
+    onResizeStop: onResizeStop,
     width: width,
+    draggableOpts: {
+      enableUserSelectHack: false
+    },
     height: 0,
     handle: /*#__PURE__*/React__default["default"].createElement("span", {
       className: "react-resizable-handle",
       onClick: function onClick(e) {
         return e.stopPropagation();
       }
-    }),
-    onResize: onResize,
-    onResizeStop: onResizeStop,
-    draggableOpts: {
-      enableUserSelectHack: false
-    }
+    })
   }, /*#__PURE__*/React__default["default"].createElement("th", restProps));
 };
 var ReorderableHeaderCell = function ReorderableHeaderCell(props) {
@@ -33960,8 +34008,57 @@ var Table = function Table(_ref) {
   React$3.useEffect(function () {
     return setColumns(columnData);
   }, [columnData]);
+  var neetoUIFontBold = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--neeto-ui-font-bold"), 10);
   var renderTable = function renderTable() {
-    return /*#__PURE__*/React__default["default"].createElement(_Table__default["default"], _extends$4({
+    return /*#__PURE__*/React__default["default"].createElement(_ConfigProvider__default["default"], {
+      theme: {
+        token: _objectSpread$6({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
+        components: {
+          Pagination: {
+            itemActiveBg: "rgb(var(--neeto-ui-primary-500))",
+            itemActiveBgDisabled: "rgb(var(--neeto-ui-gray-100))",
+            itemActiveColorDisabled: "rgb(var(--neeto-ui-gray-300))",
+            itemBg: "rgb(var(--neeto-ui-white))",
+            itemInputBg: "rgb(var(--neeto-ui-white))",
+            itemLinkBg: "rgb(var(--neeto-ui-white))",
+            // Global overrides
+            colorBgContainer: "rgb(var(--neeto-ui-primary-500))",
+            colorPrimary: "rgb(var(--neeto-ui-white))",
+            colorPrimaryHover: "rgb(var(--neeto-ui-white))",
+            colorBgTextHover: "rgb(var(--neeto-ui-gray-200))",
+            borderRadius: 6
+          },
+          Table: {
+            headerBorderRadius: 0,
+            bodySortBg: "rgb(var(--neeto-ui-gray-100))",
+            borderColor: "rgb(var(--neeto-ui-gray-200))",
+            expandIconBg: "rgb(var(--neeto-ui-white))",
+            filterDropdownBg: "rgb(var(--neeto-ui-white))",
+            filterDropdownMenuBg: "rgb(var(--neeto-ui-white))",
+            fixedHeaderSortActiveBg: "rgb(var(--neeto-ui-gray-200))",
+            footerBg: "rgb(var(--neeto-ui-gray-100))",
+            footerColor: "rgb(var(--neeto-ui-gray-800))",
+            headerBg: "rgb(var(--neeto-ui-gray-100))",
+            headerColor: "rgb(var(--neeto-ui-gray-700))",
+            headerFilterHoverBg: "rgb(var(--neeto-ui-gray-100))",
+            headerSortActiveBg: "rgb(var(--neeto-ui-gray-200))",
+            headerSortHoverBg: "rgb(var(--neeto-ui-gray-200))",
+            headerSplitColor: "rgb(var(--neeto-ui-gray-200))",
+            rowExpandedBg: "rgb(var(--neeto-ui-gray-200))",
+            rowHoverBg: "rgb(var(--neeto-ui-gray-100))",
+            rowSelectedBg: "rgb(var(--neeto-ui-primary-100))",
+            rowSelectedHoverBg: "rgb(var(--neeto-ui-pastel-purple))",
+            stickyScrollBarBg: "rgb(var(--neeto-ui-primary-100))",
+            cellPaddingBlock: 10,
+            // Global overrides
+            colorPrimary: "rgb(var(--neeto-ui-primary-500))",
+            fontSize: 14,
+            fontWeightStrong: neetoUIFontBold,
+            paddingContentVerticalLG: 10
+          }
+        }
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(_Table__default["default"], _extends$4({
       bordered: bordered,
       loading: loading,
       locale: locale,
@@ -34009,7 +34106,7 @@ var Table = function Table(_ref) {
           }
         };
       }
-    }, otherProps));
+    }, otherProps)));
   };
   return enableColumnReorder ? /*#__PURE__*/React__default["default"].createElement(ReactDragListView.DragColumn, dragProps, renderTable()) : renderTable();
 };
@@ -34078,8 +34175,7 @@ var Textarea = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
     required: required,
     "data-cy": "".concat(hyphenize(label), "-label"),
     htmlFor: id
-  }, labelProps), label), isCharacterLimitVisible && /*#__PURE__*/React__default["default"].createElement(Typography, {
-    style: "body2",
+  }, labelProps), label), isCharacterLimitVisible && /*#__PURE__*/React__default["default"].createElement("p", {
     className: classnames$1("neeto-ui-input__max-length", {
       "neeto-ui-input__max-length--error": maxLengthError
     })
@@ -34103,15 +34199,13 @@ var Textarea = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
   }), otherProps), {}, {
     onChange: onChange,
     value: value
-  })))), !!error && /*#__PURE__*/React__default["default"].createElement(Typography, {
+  })))), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "neeto-ui-input__error",
     "data-cy": "".concat(hyphenize(label), "-input-error"),
-    id: errorId,
-    style: "body3"
-  }, error), helpText && /*#__PURE__*/React__default["default"].createElement(Typography, {
+    id: errorId
+  }, error), helpText && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "neeto-ui-input__help-text",
-    id: helpTextId,
-    style: "body3"
+    id: helpTextId
   }, helpText));
 });
 Textarea.displayName = "Textarea";
@@ -34200,7 +34294,28 @@ var TimePicker$1 = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
       className: "neeto-ui-date-input-custom-panel__body"
     }, originalPanel));
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement(_ConfigProvider__default["default"], {
+    theme: {
+      token: _objectSpread$4({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
+      components: {
+        DatePicker: {
+          // Global overrides
+          colorBgElevated: "rgb(var(--neeto-ui-white))",
+          colorPrimary: "rgb(var(--neeto-ui-primary-500))",
+          colorPrimaryHover: "rgb(var(--neeto-ui-primary-600))",
+          colorBorder: "rgb(var(--neeto-ui-gray-300))",
+          colorLink: "rgb(var(--neeto-ui-primary-500))",
+          colorLinkHover: "rgb(var(--neeto-ui-primary-600))",
+          colorText: "rgb(var(--neeto-ui-gray-800))",
+          colorTextDisabled: "rgb(var(--neeto-ui-gray-500))",
+          colorTextPlaceholder: "rgb(var(--neeto-ui-gray-400))",
+          controlItemBgActive: "rgb(var(--neeto-ui-primary-800))",
+          controlItemBgHover: "rgb(var(--neeto-ui-gray-100))",
+          controlOutline: "rgb(var(--neeto-ui-gray-300))"
+        }
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-input__wrapper"
   }, label && /*#__PURE__*/React__default["default"].createElement(Label, _objectSpread$4({
     required: required
@@ -34238,7 +34353,7 @@ var TimePicker$1 = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
     className: "neeto-ui-input__error",
     "data-cy": "".concat(hyphenize(label), "-input-error"),
     id: errorId
-  }, error));
+  }, error)));
 });
 TimePicker$1.displayName = "TimePicker";