@luminati-io/uikit 5.2.9 → 5.2.10

package/dist/umd/uikit.development.js

@@ -33490,24 +33490,32 @@ var useStyles = function useStyles(_ref) {
     size = _ref.size;
   var _useTheme = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.useTheme)(),
     color = _useTheme.color,
+    shadow = _useTheme.shadow,
     font_family = _useTheme.font_family,
     font_weight = _useTheme.font_weight,
     font_size = _useTheme.font_size,
     line_height = _useTheme.line_height;
-  var HeaderXl = {
+  var headerXl = {
     fontFamily: font_family.sans,
     fontStyle: 'normal',
     fontWeight: font_weight.medium,
     fontSize: font_size.lg,
     lineHeight: line_height.none
   };
-  var LabelSm = {
+  var labelSm = {
     fontFamily: font_family.sans,
     fontStyle: 'normal',
     fontWeight: font_weight.regular,
     fontSize: font_size.sm,
     lineHeight: line_height.none
   };
+  var labelBase = {
+    fontFamily: font_family.sans,
+    fontStyle: 'normal',
+    fontWeight: font_weight.regular,
+    fontSize: font_size.md,
+    lineHeight: line_height.none
+  };
   return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return (0,_util_with_user_styles__WEBPACK_IMPORTED_MODULE_4__.withUserStyles)(styles, {
       control: function control(baseStyles, _ref2) {
@@ -33519,21 +33527,24 @@ var useStyles = function useStyles(_ref) {
           md: 40,
           lg: 48
         };
-        var borderColor = color.gray_7;
+        var borderColor = color.border;
         var boxShadow = 'none';
-        var foreColor = color.gray_11_50;
-        var backgroundColor = color.white;
+        var foreColor = color.text_teritary;
+        var backgroundColor = color.bg;
         var cursor = 'text';
         if (isDisabled) {
-          foreColor = color.gray_9;
-          borderColor = color.gray_6;
-          backgroundColor = color.gray_2;
+          foreColor = color.text_disabled;
+          borderColor = color.border_disabled;
+          backgroundColor = color.bg_fill_teritary;
           cursor = 'default';
-        } else if (selectProps['aria-invalid']) borderColor = color.red_11;else if (isFocused) {
-          borderColor = color.blue_11;
-          boxShadow = "0px 0px 0px 2px rgba(0, 106, 220, 0.4)";
+        } else if (selectProps['aria-invalid']) borderColor = color.border_error;else if (isFocused) {
+          borderColor = color.border_primary;
+          boxShadow = shadow.primary;
         }
-        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), LabelSm), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
+          '&:hover': _objectSpread(_objectSpread({}, baseStyles['&:hover']), {}, {
+            borderColor: color.border_accent
+          }),
           minHeight: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(height[size] || height.sm),
           padding: "".concat(_shared__WEBPACK_IMPORTED_MODULE_3__.inputVerticalPadding, "px ").concat(_shared__WEBPACK_IMPORTED_MODULE_3__.inputHorizontalPadding, "px"),
           color: foreColor,
@@ -33550,7 +33561,7 @@ var useStyles = function useStyles(_ref) {
       },
       placeholder: function placeholder(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          color: color.gray_11
+          color: color.text_quaternary
         });
       },
       menu: function menu(baseStyles) {
@@ -33581,64 +33592,63 @@ var useStyles = function useStyles(_ref) {
         });
       },
       groupHeading: function groupHeading(baseStyles) {
-        return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          /* Label/base */
-          fontFamily: font_family.sans,
-          fontStyle: 'normal',
-          fontWeight: font_weight.regular,
-          fontSize: font_size.md,
-          lineHeight: line_height.none,
-          color: color.gray_11,
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelBase), {}, {
+          color: color.text_quaternary,
           textTransform: undefined
         });
       },
       option: function option(baseStyles, _ref3) {
         var isFocused = _ref3.isFocused,
           isDisabled = _ref3.isDisabled;
-        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), LabelSm), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
           display: 'flex',
           alignItems: 'center',
           gap: '8px',
           height: '40px',
-          backgroundColor: isFocused ? color.gray_2 : undefined,
-          color: isDisabled ? color.gray_9 : color.gray_11_50,
+          backgroundColor: isFocused ? color.bg_fill_secondary : undefined,
+          color: isDisabled ? color.text_disabled : color.text_teritary,
           '&:hover': {
-            backgroundColor: color.gray_2
+            backgroundColor: color.bg_fill_secondary
           }
         });
       },
       multiValue: function multiValue(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          backgroundColor: undefined,
-          border: "1px solid ".concat(color.gray_6),
+          backgroundColor: color.bg,
+          border: "1px solid ".concat(color.border),
           borderRadius: '4px'
         });
       },
       multiValueLabel: function multiValueLabel(baseStyles) {
-        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), LabelSm), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
           borderRadius: '4px',
           padding: '4px 4px 4px 8px',
-          color: color.gray_11_25
+          color: color.text
         });
       },
       multiValueRemove: function multiValueRemove(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          borderRadius: '4px',
-          color: color.gray_11,
+          borderRadius: '16px',
           cursor: 'pointer',
+          backgroundColor: color.icon_button_bg,
+          color: color.icon_button_icon_default,
+          ':active': {
+            color: color.icon_button_icon_active,
+            backgroundColor: color.icon_button_bg_active
+          },
           ':hover': {
-            backgroundColor: undefined,
-            color: color.gray_11_50
+            color: color.icon_button_icon_hover,
+            backgroundColor: color.icon_button_bg_hover
           }
         });
       },
       noOptionsMessage: function noOptionsMessage(baseStyles) {
-        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), HeaderXl), {}, {
-          color: color.gray_9
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), headerXl), {}, {
+          color: color.text_quaternary
         });
       }
     });
-  }, [styles, size, color, font_family, font_weight, font_size, line_height]);
+  }, [styles, size, color, shadow, font_family, font_weight, font_size, line_height]);
 };
 
 /***/ }),
@@ -33804,9 +33814,11 @@ var CompareToCalendar = function CompareToCalendar(props) {
     gap: "04"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
     icon: "ChevronLeft",
-    variant: "ghost",
+    size: "xs",
     onClick: onBack
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Header, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Label, {
+    variant: "lg",
+    color: "text",
     no_wrap: true
   }, "Compare to date")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_date_picker__WEBPACK_IMPORTED_MODULE_8__.StyledDayPicker, {
     fixedWeeks: true,
@@ -34037,12 +34049,15 @@ var borderRadius = '4px';
 var DayPickerWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
   displayName: "DayPickerWrapper",
   componentId: "sc-1gurvxq-0"
-})(["margin:0;padding:", " 0;box-sizing:border-box;background:white;border-radius:4px;box-shadow:", ";"], function (_ref3) {
+})(["margin:0;padding:", " 0;box-sizing:border-box;background:", ";border-radius:4px;box-shadow:", ";"], function (_ref3) {
   var spacing = _ref3.theme.spacing;
   return spacing['02'];
 }, function (_ref4) {
-  var box_shadow = _ref4.theme.box_shadow;
-  return box_shadow.md;
+  var color = _ref4.theme.color;
+  return color.bg_elevated;
+}, function (_ref5) {
+  var shadow = _ref5.theme.shadow;
+  return shadow.medium;
 });
 var StyledDayPicker = function StyledDayPicker(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(DayPickerStyles, _extends({}, props, {
@@ -34055,69 +34070,72 @@ var StyledDayPicker = function StyledDayPicker(props) {
 var DayPickerStyles = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(react_day_picker__WEBPACK_IMPORTED_MODULE_2__.DayPicker).withConfig({
   displayName: "DayPickerStyles",
   componentId: "sc-1gurvxq-1"
-})([".rdp-months{display:flex;}.rdp-month{padding:", " ", ";}.rdp-caption{display:flex;flex-direction:row;align-items:center;padding:", " ", ";gap:10px;}.rdp-caption_start:not(.rdp-caption_end){border-right:1px solid ", ";.rdp-caption{flex-direction:row-reverse;}}.rdp-caption_label{width:100%;text-align:center;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-nav{display:flex;flex-direction:row;gap:10px;}.rdp-nav_button{display:flex;align-items:center;justify-content:center;border:0 none;border-radius:4px;cursor:pointer;width:20px;height:20px;background-color:", ";.rdp-nav_icon{color:", ";}&:hover:not(:disabled){background-color:", ";}&:active:not(:disabled){background-color:", ";.rdp-nav_icon{color:", ";}}&:disabled{.rdp-nav_icon{color:", ";}cursor:not-allowed;}}.rdp-table{border-collapse:collapse;}.rdp-head_cell{box-sizing:border-box;min-width:32px;max-width:32px;height:32px;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-cell{padding:0;}"], function (_ref5) {
-  var spacing = _ref5.theme.spacing;
-  return spacing['03'];
-}, function (_ref6) {
+})([".rdp-months{display:flex;}.rdp-month{padding:", " ", ";}.rdp-caption{display:flex;flex-direction:row;align-items:center;padding:", " ", ";gap:10px;}.rdp-caption_start:not(.rdp-caption_end){border-right:1px solid ", ";.rdp-caption{flex-direction:row-reverse;}}.rdp-caption_label{width:100%;text-align:center;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-nav{display:flex;flex-direction:row;gap:10px;}.rdp-nav_button{display:flex;align-items:center;justify-content:center;border:0 none;border-radius:4px;cursor:pointer;width:20px;height:20px;background-color:", ";.rdp-nav_icon{color:", ";}&:hover:not(:disabled){background-color:", ";.rdp-nav_icon{color:", ";}}&:active:not(:disabled){background-color:", ";.rdp-nav_icon{color:", ";}}&:disabled{.rdp-nav_icon{color:", ";}cursor:not-allowed;}}.rdp-table{border-collapse:collapse;}.rdp-head_cell{box-sizing:border-box;min-width:32px;max-width:32px;height:32px;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-cell{padding:0;}"], function (_ref6) {
   var spacing = _ref6.theme.spacing;
-  return spacing['04'];
+  return spacing['03'];
 }, function (_ref7) {
   var spacing = _ref7.theme.spacing;
-  return spacing['03'];
+  return spacing['04'];
 }, function (_ref8) {
   var spacing = _ref8.theme.spacing;
-  return spacing['04'];
+  return spacing['03'];
 }, function (_ref9) {
-  var color = _ref9.theme.color;
-  return color.gray_4;
+  var spacing = _ref9.theme.spacing;
+  return spacing['04'];
 }, function (_ref10) {
-  var font_family = _ref10.theme.font_family;
-  return font_family.sans;
+  var color = _ref10.theme.color;
+  return color.border_secondary;
 }, function (_ref11) {
-  var font_weight = _ref11.theme.font_weight;
-  return font_weight.regular;
+  var font_family = _ref11.theme.font_family;
+  return font_family.sans;
 }, function (_ref12) {
-  var font_size = _ref12.theme.font_size;
-  return font_size.sm;
+  var font_weight = _ref12.theme.font_weight;
+  return font_weight.regular;
 }, function (_ref13) {
-  var line_height = _ref13.theme.line_height;
-  return line_height.none;
+  var font_size = _ref13.theme.font_size;
+  return font_size.sm;
 }, function (_ref14) {
-  var color = _ref14.theme.color;
-  return color.gray_11_50;
+  var line_height = _ref14.theme.line_height;
+  return line_height.none;
 }, function (_ref15) {
   var color = _ref15.theme.color;
-  return color.white;
+  return color.text_secondary;
 }, function (_ref16) {
   var color = _ref16.theme.color;
-  return color.gray_9;
+  return color.icon_button_bg;
 }, function (_ref17) {
   var color = _ref17.theme.color;
-  return color.gray_2;
+  return color.icon_button_icon_default;
 }, function (_ref18) {
   var color = _ref18.theme.color;
-  return color.blue_4;
+  return color.icon_button_bg_hover;
 }, function (_ref19) {
   var color = _ref19.theme.color;
-  return color.blue_11;
+  return color.icon_button_icon_hover;
 }, function (_ref20) {
   var color = _ref20.theme.color;
-  return color.gray_7;
+  return color.icon_button_bg_active;
 }, function (_ref21) {
-  var font_family = _ref21.theme.font_family;
-  return font_family.sans;
+  var color = _ref21.theme.color;
+  return color.icon_button_icon_active;
 }, function (_ref22) {
-  var font_weight = _ref22.theme.font_weight;
-  return font_weight.regular;
+  var color = _ref22.theme.color;
+  return color.icon_button_icon_disabled;
 }, function (_ref23) {
-  var font_size = _ref23.theme.font_size;
-  return font_size.xs;
+  var font_family = _ref23.theme.font_family;
+  return font_family.sans;
 }, function (_ref24) {
-  var line_height = _ref24.theme.line_height;
-  return line_height.none;
+  var font_weight = _ref24.theme.font_weight;
+  return font_weight.regular;
 }, function (_ref25) {
-  var color = _ref25.theme.color;
-  return color.gray_11;
+  var font_size = _ref25.theme.font_size;
+  return font_size.xs;
+}, function (_ref26) {
+  var line_height = _ref26.theme.line_height;
+  return line_height.none;
+}, function (_ref27) {
+  var color = _ref27.theme.color;
+  return color.text_quaternary;
 });
 var Day = function Day(props) {
   var buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
@@ -34137,76 +34155,76 @@ Day.displayName = 'Day';
 var DayWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
   displayName: "DayWrapper",
   componentId: "sc-1gurvxq-2"
-})(["padding:0;background-color:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";.rdp-day{display:flex;flex-direction:column;justify-content:center;align-items:center;width:32px;height:32px;box-sizing:border-box;border-radius:", ";border:1px solid ", ";background-color:", ";cursor:pointer;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";&:hover:not(:disabled){border:1px solid ", ";}&:disabled{color:", ";cursor:not-allowed;}}.rdp-day_today{color:", ";font-weight:", ";}.rdp-day_selected{background-color:", ";border:1px solid ", ";color:", ";}.rdp-day_range_middle{background-color:", ";border:1px solid ", ";color:", ";&.rdp-day_today{color:", ";}}"], function (_ref26) {
-  var $mod = _ref26.$mod,
-    color = _ref26.theme.color;
-  return $mod.selected ? color.blue_3 : color.white;
-}, function (_ref27) {
-  var $mod = _ref27.$mod;
-  return $mod.range_middle || $mod.range_end && !$mod.range_start ? '0' : borderRadius;
-}, function (_ref28) {
-  var $mod = _ref28.$mod;
-  return $mod.range_middle || $mod.range_end && !$mod.range_start ? '0' : borderRadius;
+})(["padding:0;background-color:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";.rdp-day{display:flex;flex-direction:column;justify-content:center;align-items:center;width:32px;height:32px;box-sizing:border-box;border-radius:", ";border:1px solid ", ";background-color:", ";cursor:pointer;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";&:hover:not(:disabled){border:1px solid ", ";}&:disabled{color:", ";cursor:not-allowed;}}.rdp-day_today{color:", ";font-weight:", ";}.rdp-day_selected{background-color:", ";border:1px solid ", ";color:", ";}.rdp-day_range_middle{background-color:", ";border:1px solid ", ";color:", ";&.rdp-day_today{color:", ";}}"], function (_ref28) {
+  var $mod = _ref28.$mod,
+    color = _ref28.theme.color;
+  return $mod.selected ? color.bg_fill_primary_hover : color.bg_elevated;
 }, function (_ref29) {
   var $mod = _ref29.$mod;
-  return $mod.range_middle || $mod.range_start && !$mod.range_end ? '0' : borderRadius;
+  return $mod.range_middle || $mod.range_end && !$mod.range_start ? '0' : borderRadius;
 }, function (_ref30) {
   var $mod = _ref30.$mod;
+  return $mod.range_middle || $mod.range_end && !$mod.range_start ? '0' : borderRadius;
+}, function (_ref31) {
+  var $mod = _ref31.$mod;
   return $mod.range_middle || $mod.range_start && !$mod.range_end ? '0' : borderRadius;
-}, borderRadius, function (_ref31) {
-  var color = _ref31.theme.color;
-  return color.white;
 }, function (_ref32) {
-  var color = _ref32.theme.color;
-  return color.white;
-}, function (_ref33) {
-  var font_family = _ref33.theme.font_family;
-  return font_family.sans;
+  var $mod = _ref32.$mod;
+  return $mod.range_middle || $mod.range_start && !$mod.range_end ? '0' : borderRadius;
+}, borderRadius, function (_ref33) {
+  var color = _ref33.theme.color;
+  return color.bg_elevated;
 }, function (_ref34) {
-  var font_weight = _ref34.theme.font_weight;
-  return font_weight.regular;
+  var color = _ref34.theme.color;
+  return color.bg_elevated;
 }, function (_ref35) {
-  var font_size = _ref35.theme.font_size;
-  return font_size.xs;
+  var font_family = _ref35.theme.font_family;
+  return font_family.sans;
 }, function (_ref36) {
-  var line_height = _ref36.theme.line_height;
-  return line_height.none;
+  var font_weight = _ref36.theme.font_weight;
+  return font_weight.regular;
 }, function (_ref37) {
-  var color = _ref37.theme.color;
-  return color.gray_11_50;
+  var font_size = _ref37.theme.font_size;
+  return font_size.xs;
 }, function (_ref38) {
-  var color = _ref38.theme.color;
-  return color.blue_10;
+  var line_height = _ref38.theme.line_height;
+  return line_height.none;
 }, function (_ref39) {
   var color = _ref39.theme.color;
-  return color.gray_7;
+  return color.text_secondary;
 }, function (_ref40) {
   var color = _ref40.theme.color;
-  return color.blue_11;
+  return color.border_primary_hover;
 }, function (_ref41) {
-  var font_weight = _ref41.theme.font_weight;
-  return font_weight.semibold;
+  var color = _ref41.theme.color;
+  return color.text_disabled;
 }, function (_ref42) {
   var color = _ref42.theme.color;
-  return color.blue_10;
+  return color.text_primary;
 }, function (_ref43) {
-  var color = _ref43.theme.color;
-  return color.blue_10;
+  var font_weight = _ref43.theme.font_weight;
+  return font_weight.semibold;
 }, function (_ref44) {
   var color = _ref44.theme.color;
-  return color.white;
+  return color.bg_fill_primary_hover;
 }, function (_ref45) {
   var color = _ref45.theme.color;
-  return color.blue_3;
+  return color.bg_fill_primary_hover;
 }, function (_ref46) {
   var color = _ref46.theme.color;
-  return color.blue_3;
+  return color.text_white;
 }, function (_ref47) {
   var color = _ref47.theme.color;
-  return color.gray_11_50;
+  return color.bg_fill_primary_hover;
 }, function (_ref48) {
   var color = _ref48.theme.color;
-  return color.blue_11;
+  return color.bg_fill_primary_hover;
+}, function (_ref49) {
+  var color = _ref49.theme.color;
+  return color.text_secondary;
+}, function (_ref50) {
+  var color = _ref50.theme.color;
+  return color.text_primary;
 });
 var getDateText = function getDateText(props) {
   var value = props.value,
@@ -34695,7 +34713,7 @@ var ClearIndicator = function ClearIndicator(_ref) {
     height: "18px",
     viewBox: ic.viewBox,
     style: {
-      color: color.gray_9,
+      color: color.icon,
       cursor: 'pointer'
     }
   }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
@@ -34945,7 +34963,7 @@ var DropdownIndicator = function DropdownIndicator(_ref) {
     height: "18px",
     viewBox: ic.viewBox,
     style: {
-      color: color.gray_9,
+      color: isDisabled ? color.icon_disabled : color.icon,
       cursor: isDisabled ? 'default' : 'pointer'
     }
   }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
@@ -35128,8 +35146,8 @@ var StyledItem = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_menu_
   var selected = _ref.selected,
     $focused = _ref.$focused,
     color = _ref.theme.color;
-  if (selected) return color.blue_3;
-  if ($focused) return color.gray_2;
+  if (selected) return color.bg_fill_primary_secondary;
+  if ($focused) return color.bg_fill_secondary;
 });
 
 /***/ }),
@@ -35180,7 +35198,14 @@ var useStyles = function useStyles(_ref) {
     font_size = _useTheme.font_size,
     font_weight = _useTheme.font_weight,
     font_family = _useTheme.font_family,
-    box_shadow = _useTheme.box_shadow;
+    shadow = _useTheme.shadow;
+  var labelSm = {
+    fontFamily: font_family.sans,
+    fontStyle: 'normal',
+    fontWeight: font_weight.regular,
+    fontSize: font_size.sm,
+    lineHeight: line_height.none
+  };
   return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return (0,_util_with_user_styles__WEBPACK_IMPORTED_MODULE_5__.withUserStyles)(styles, {
       control: function control(baseStyles, _ref2) {
@@ -35192,29 +35217,26 @@ var useStyles = function useStyles(_ref) {
           md: 40,
           lg: 48
         };
-        var borderColor = color.gray_7;
+        var borderColor = color.border;
         var boxShadow = 'none';
-        var foreColor = color.gray_11_50;
-        var backgroundColor = color.white;
+        var foreColor = color.text_teritary;
+        var backgroundColor = color.bg;
         var cursor = 'text';
         if (isDisabled) {
-          foreColor = color.gray_9;
-          borderColor = color.gray_6;
-          backgroundColor = color.gray_2;
+          foreColor = color.text_disabled;
+          borderColor = color.border_disabled;
+          backgroundColor = color.bg_fill_teritary;
           cursor = 'default';
-        } else if (selectProps['aria-invalid']) borderColor = color.red_11;else if (isFocused) {
-          borderColor = color.blue_11;
-          boxShadow = "0px 0px 0px 2px rgba(0, 106, 220, 0.4)";
+        } else if (selectProps['aria-invalid']) borderColor = color.border_error;else if (isFocused) {
+          borderColor = color.border_primary;
+          boxShadow = shadow.primary;
         }
-        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
+          '&:hover': _objectSpread(_objectSpread({}, baseStyles['&:hover']), {}, {
+            borderColor: color.border_accent
+          }),
           minHeight: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(height[size] || height.sm),
           padding: "".concat(_shared__WEBPACK_IMPORTED_MODULE_4__.inputVerticalPadding, "px ").concat(_shared__WEBPACK_IMPORTED_MODULE_4__.inputHorizontalPadding, "px"),
-          /* Label/sm */
-          fontFamily: font_family.sans,
-          fontStyle: 'normal',
-          fontWeight: font_weight.regular,
-          fontSize: font_size.sm,
-          lineHeight: line_height.none,
           color: foreColor,
           backgroundColor: backgroundColor,
           borderColor: borderColor,
@@ -35229,7 +35251,7 @@ var useStyles = function useStyles(_ref) {
       },
       placeholder: function placeholder(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          color: color.gray_11
+          color: color.text_quaternary
         });
       },
       indicatorsContainer: function indicatorsContainer(baseStyles) {
@@ -35245,9 +35267,9 @@ var useStyles = function useStyles(_ref) {
           minWidth: 'fit-content',
           maxWidth: '540px',
           width: '100%',
-          backgroundColor: color.white,
+          backgroundColor: color.bg_elevated,
           borderRadius: spacing['02'],
-          boxShadow: box_shadow.md,
+          boxShadow: shadow.medium,
           zIndex: menuPortalTarget ? baseStyles.zIndex : _constants__WEBPACK_IMPORTED_MODULE_3__.Z_INDEX.dropdown
         });
       },
@@ -35256,45 +35278,49 @@ var useStyles = function useStyles(_ref) {
           zIndex: _constants__WEBPACK_IMPORTED_MODULE_3__.Z_INDEX.dropdown
         });
       },
+      singleValue: function singleValue(baseStyles) {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
+          color: color.text
+        });
+      },
       multiValue: function multiValue(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          backgroundColor: color.gray_3,
-          borderRadius: spacing['02']
+          backgroundColor: color.bg,
+          border: "1px solid ".concat(color.border),
+          borderRadius: '4px'
         });
       },
       multiValueLabel: function multiValueLabel(baseStyles) {
-        return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          /* Label/sm */
-          fontFamily: font_family.sans,
-          fontStyle: 'normal',
-          fontWeight: font_weight.regular,
-          fontSize: font_size.sm,
-          lineHeight: line_height.none,
-          color: color.gray_11_25,
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), labelSm), {}, {
+          color: color.text,
           paddingLeft: spacing['02'],
           paddingRight: spacing['00']
         });
       },
       multiValueRemove: function multiValueRemove(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          borderRadius: spacing['02'],
-          color: color.gray_11,
+          borderRadius: '16px',
           cursor: 'pointer',
+          backgroundColor: color.icon_button_bg,
+          color: color.icon_button_icon_default,
+          ':active': {
+            color: color.icon_button_icon_active,
+            backgroundColor: color.icon_button_bg_active
+          },
           ':hover': {
-            backgroundColor: color.gray_3,
-            color: color.gray_11_50
+            color: color.icon_button_icon_hover,
+            backgroundColor: color.icon_button_bg_hover
           }
         });
       },
-      option: function option(baseStyles, state) {
-        var backgroundColor = baseStyles.backgroundColor;
-        if (state.selected) backgroundColor = color.blue_3;
+      option: function option(baseStyles, _ref3) {
+        var selected = _ref3.selected;
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          backgroundColor: backgroundColor
+          backgroundColor: selected ? color.bg_fill_primary_secondary : baseStyles.backgroundColor
         });
       }
     });
-  }, [styles, size, menuPortalTarget, color, spacing, line_height, font_size, font_weight, font_family, box_shadow]);
+  }, [styles, size, menuPortalTarget, color, spacing, line_height, font_size, font_weight, font_family, shadow]);
 };
 
 /***/ }),
@@ -35449,7 +35475,6 @@ var isValueChild = function isValueChild(child) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   ERROR_COLOR: () => (/* binding */ ERROR_COLOR),
 /* harmony export */   FILE_STATUS: () => (/* binding */ FILE_STATUS)
 /* harmony export */ });
 // LICENSE_CODE ZON
@@ -35462,7 +35487,6 @@ var FILE_STATUS = {
   SUCCESS: 'success',
   ERROR: 'error'
 };
-var ERROR_COLOR = 'red_10';
 
 /***/ }),
 
@@ -35627,11 +35651,16 @@ var border = function border(color) {
 var UploadBaseContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
   displayName: "UploadBaseContainer",
   componentId: "sc-1e3miai-0"
-})(["background-image:", ";&:hover{cursor:pointer;}border-radius:4px;"], function (_ref) {
+})(["background-image:", ";background-color:", ";&:hover{cursor:pointer;}border-radius:4px;"], function (_ref) {
   var $isHovered = _ref.$isHovered,
     $invalid = _ref.$invalid,
     color = _ref.theme.color;
-  return border($invalid ? color.red_11 : $isHovered ? color.blue_11 : color.gray_6);
+  return border($invalid ? color.border_error : $isHovered ? color.border_primary : color.border);
+}, function (_ref2) {
+  var $isHovered = _ref2.$isHovered,
+    $invalid = _ref2.$invalid,
+    color = _ref2.theme.color;
+  return $invalid ? color.bg : $isHovered ? color.bg_fill_primary_secondary : color.bg;
 });
 var UploadBase = function UploadBase(props) {
   var label = props.label,
@@ -35704,14 +35733,14 @@ var UploadBase = function UploadBase(props) {
     gap: "02"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_5__.Icon, {
     name: "Upload",
-    color: "blue_11",
+    color: "link_primary",
     size: "xs"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
-    color: "blue_11"
+    color: "link_primary"
   }, "Upload file")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
-    color: "gray_11"
+    color: "text_quaternary"
   }, "or drag and drop")), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
-    color: "gray_9"
+    color: "text_disabled"
   }, label)));
 };
 UploadBase.displayName = 'UploadBase';
@@ -35776,7 +35805,7 @@ var UploadItemContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default
 })(["border:1px solid ", ";border-radius:4px;"], function (_ref) {
   var $error = _ref.$error,
     color = _ref.theme.color;
-  return $error ? color[_constants__WEBPACK_IMPORTED_MODULE_8__.ERROR_COLOR] : color.gray_4;
+  return $error ? color.border_error : color.border_secondary;
 });
 var InfoContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_layout__WEBPACK_IMPORTED_MODULE_3__.Flex).attrs({
   flex_direction: 'column',
@@ -35812,7 +35841,7 @@ var UploadItem = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().memo(
     status: status
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(InfoContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
     variant: "sm_medium",
-    color: "black_1"
+    color: "text"
   }, fileInfoFormatter(props)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_upload_item_state__WEBPACK_IMPORTED_MODULE_7__.UploadItemState, {
     status: status,
     antiVirusScanText: antiVirusScanText,
@@ -35821,8 +35850,7 @@ var UploadItem = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().memo(
     error: error
   }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_5__.IconButton, {
     icon: "Trash",
-    variant: "icon",
-    size: "md",
+    size: "xs",
     onClick: onDelete
   }));
 });
@@ -35876,14 +35904,14 @@ var UploadItemIcon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().m
   if (icon) return icon;
   var iconProps = {
     size: 'sm',
-    color: 'blue_11'
+    color: 'icon_primary'
   };
   if (status == _constants__WEBPACK_IMPORTED_MODULE_3__.FILE_STATUS.UPLOADING) iconProps.name = 'Spinner2';else if (status == _constants__WEBPACK_IMPORTED_MODULE_3__.FILE_STATUS.SCANNING) iconProps.name = 'Spinner';else if (status == _constants__WEBPACK_IMPORTED_MODULE_3__.FILE_STATUS.SUCCESS) {
     iconProps.name = 'Document';
-    iconProps.color = 'gray_9';
+    iconProps.color = 'icon';
   } else if (status == _constants__WEBPACK_IMPORTED_MODULE_3__.FILE_STATUS.ERROR) {
     iconProps.name = 'Warning';
-    iconProps.color = _constants__WEBPACK_IMPORTED_MODULE_3__.ERROR_COLOR;
+    iconProps.color = 'icon_error';
   }
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_2__.Icon, iconProps);
 });
@@ -35938,18 +35966,22 @@ var UploadItemState = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().
   if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.UPLOADING) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_progress__WEBPACK_IMPORTED_MODULE_3__.ProgressBar, {
     progress: progress
   });
-  if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.SUCCESS) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
-    variant: "xs",
-    color: "gray_10"
-  }, formatBytes(size));
+  if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.SUCCESS) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
+      variant: "xs",
+      color: "text_quaternary"
+    }, formatBytes(size));
+  }
   if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.ERROR) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Paragraph, {
     variant: "xs",
-    color: _constants__WEBPACK_IMPORTED_MODULE_4__.ERROR_COLOR
+    color: "text_error"
   }, error);
-  if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.SCANNING) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
-    variant: "xs",
-    color: "gray_11"
-  }, antiVirusScanText);
+  if (status == _constants__WEBPACK_IMPORTED_MODULE_4__.FILE_STATUS.SCANNING) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
+      variant: "xs",
+      color: "text_quaternary"
+    }, antiVirusScanText);
+  }
   return null;
 });
 UploadItemState.displayName = 'UploadItemState';
@@ -36188,7 +36220,7 @@ var NumberField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forw
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
     name: "ChevronUp",
     size: "xxs",
-    color: "gray_9"
+    color: "icon"
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "down",
     onClick: stepDown,
@@ -36198,7 +36230,7 @@ var NumberField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forw
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
     name: "ChevronDown",
     size: "xxs",
-    color: "gray_9"
+    color: "icon"
   }))));
 });
 NumberField.displayName = 'NumberField';
@@ -36218,19 +36250,19 @@ var Buttons = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withC
   componentId: "sc-13mfzjc-2"
 })(["position:absolute;top:0;right:0;display:flex;flex-direction:column;border-top-right-radius:4px;border-bottom-right-radius:4px;height:100%;div[role=\"button\"]{box-sizing:border-box;min-height:0;height:50%;background:", ";border-left:1px solid ", ";padding:2px 4px;display:flex;align-items:center;cursor:pointer;&.up{border-top-right-radius:4px;}&.down{border-bottom-right-radius:4px;border-top:1px solid ", ";}&:hover{background:", ";svg{color:", ";}}}"], function (_ref2) {
   var color = _ref2.theme.color;
-  return color.white;
+  return color.bg;
 }, function (_ref3) {
   var color = _ref3.theme.color;
-  return color.gray_6;
+  return color.border;
 }, function (_ref4) {
   var color = _ref4.theme.color;
-  return color.gray_6;
+  return color.border;
 }, function (_ref5) {
   var color = _ref5.theme.color;
-  return color.gray_3;
+  return color.bg_fill_secondary;
 }, function (_ref6) {
   var color = _ref6.theme.color;
-  return color.gray_11_25;
+  return color.icon_accent;
 });
 
 /***/ }),
@@ -36337,11 +36369,11 @@ var CountrySelect = function CountrySelect(_ref) {
     var countryCallingCode = _getCountryCallingCode(opt);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option, null, _getCountryFlag(opt), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
       variant: "sm",
-      color: "gray_11_25",
+      color: "text",
       no_wrap: true
     }, _getCountryLabel(opt)), !!countryCallingCode && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
       variant: "sm",
-      color: "gray_9"
+      color: "text_teritary"
     }, "+", countryCallingCode));
   }, [_getCountryLabel, _getCountryCallingCode, _getCountryFlag]);
   var filterOption = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref3, inputValue) {
@@ -36442,7 +36474,7 @@ var DropdownIndicator = function DropdownIndicator(_ref6) {
     height: "12px",
     viewBox: ic.viewBox,
     style: {
-      color: color.gray_9,
+      color: color.icon,
       cursor: isDisabled ? 'default' : 'pointer'
     }
   }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
@@ -36505,13 +36537,13 @@ var SearchInput = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forw
   var SearchIcon = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_6__.Icon, {
       name: "Search",
-      color: "gray_9",
+      color: "icon",
       size: size == 'lg' ? 'sm' : 'xs'
     });
   }, [size]);
   var ClearButton = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
     return !!val && !disabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_7__.IconButton, {
-      variant: "ghost",
+      size: "xs",
       icon: "Close",
       onClick: reset
     });
@@ -36549,7 +36581,7 @@ var useStyles = function useStyles(size) {
     font_size = _useTheme2.font_size,
     line_height = _useTheme2.line_height,
     color = _useTheme2.color,
-    box_shadow = _useTheme2.box_shadow;
+    shadow = _useTheme2.shadow;
   return (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
     return {
       control: function control(baseStyles, _ref10) {
@@ -36564,9 +36596,9 @@ var useStyles = function useStyles(size) {
           fontWeight: font_weight.regular,
           fontSize: font_size.sm,
           lineHeight: line_height.none,
-          color: isDisabled ? color.gray_9 : color.gray_11_50,
-          backgroundColor: color.gray_2,
-          borderColor: isDisabled ? color.gray_6 : color.gray_7,
+          color: isDisabled ? color.text_disabled : color.text_teritary,
+          backgroundColor: isDisabled ? color.bg_fill_teritary : color.bg,
+          borderColor: isDisabled ? color.border_disabled : color.border,
           cursor: isDisabled ? 'default' : 'text',
           borderRight: '0 none',
           borderTopRightRadius: '0',
@@ -36587,9 +36619,27 @@ var useStyles = function useStyles(size) {
           minWidth: '240px',
           width: 'fit-content',
           maxWidth: '540px',
-          backgroundColor: color.white,
+          backgroundColor: color.bg_elevated,
           borderRadius: '4px',
-          boxShadow: box_shadow.md
+          boxShadow: shadow.medium
+        });
+      },
+      menuList: function menuList(baseStyles) {
+        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+          overflowX: 'hidden',
+          scrollbarColor: '#FFFFFF #DFE3E6',
+          scrollbarWidth: 'thin',
+          '&::-webkit-scrollbar': {
+            width: '4px',
+            height: '4px'
+          },
+          '&::-webkit-scrollbar-track': {
+            backgroundColor: '#FFFFFF'
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#DFE3E6',
+            borderRadius: '2px'
+          }
         });
       },
       menuPortal: function menuPortal(baseStyles) {
@@ -36598,13 +36648,18 @@ var useStyles = function useStyles(size) {
         });
       },
       option: function option(baseStyles, _ref11) {
-        var selected = _ref11.selected;
+        var isFocused = _ref11.isFocused,
+          isDisabled = _ref11.isDisabled;
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          backgroundColor: selected ? color.blue_3 : baseStyles.backgroundColor
+          backgroundColor: isFocused ? color.bg_fill_secondary : undefined,
+          color: isDisabled ? color.text_disabled : color.text_teritary,
+          '&:hover': {
+            backgroundColor: color.bg_fill_secondary
+          }
         });
       }
     };
-  }, [size, font_family, font_weight, font_size, line_height, color, box_shadow]);
+  }, [size, font_family, font_weight, font_size, line_height, color, shadow]);
 };
 var getHeight = function getHeight(size) {
   var height = {
@@ -37499,10 +37554,10 @@ var Field = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input.withC
   return line_height.none;
 }, function (_ref5) {
   var color = _ref5.theme.color;
-  return color.gray_11_50;
+  return color.text;
 }, function (_ref6) {
   var color = _ref6.theme.color;
-  return color.gray_8;
+  return color.text_quaternary;
 });
 var InputLabel = function InputLabel(_ref7) {
   var className = _ref7.className,
@@ -37529,7 +37584,7 @@ var InputLabel = function InputLabel(_ref7) {
     id: id,
     "data-role": "label",
     variant: variant,
-    color: "gray-11-50"
+    color: "text_secondary"
   }, t(label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(NecessityIndicator, {
     required: required,
     indicator: necessityIndicator
@@ -37542,7 +37597,7 @@ var InputLabel = function InputLabel(_ref7) {
     }),
     name: labelIcon,
     size: "xs",
-    color: "gray_9"
+    color: "icon"
   })));
 };
 InputLabel.propTypes = {
@@ -37572,7 +37627,7 @@ var Indicator = styled_components__WEBPACK_IMPORTED_MODULE_2___default().span.wi
   componentId: "sc-r60v1b-2"
 })(["color:", ";margin-left:", ";"], function (_ref9) {
   var color = _ref9.theme.color;
-  return color.gray_9;
+  return color.text_disabled;
 }, function (_ref10) {
   var spacing = _ref10.theme.spacing;
   return spacing['02'];
@@ -37580,7 +37635,7 @@ var Indicator = styled_components__WEBPACK_IMPORTED_MODULE_2___default().span.wi
 var Asterisk = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_typography__WEBPACK_IMPORTED_MODULE_8__.Label).attrs({
   tag: 'span',
   variant: 'xs',
-  color: 'red_11',
+  color: 'border_error',
   children: '*'
 }).withConfig({
   displayName: "Asterisk",
@@ -37609,9 +37664,9 @@ var InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.
 })(["position:relative;width:100%;border:1px solid;border-radius:4px;box-sizing:border-box;font-family:", ";padding:", "px ", "px;overflow:auto;display:flex;gap:8px;align-items:", ";border-left-width:1px;border-right-width:1px;border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";", " ", ""], function (_ref12) {
   var font_family = _ref12.theme.font_family;
   return font_family.sans;
-}, inputVerticalPadding, inputHorizontalPadding, function (props) {
-  var _props$$verticalAlign;
-  return (_props$$verticalAlign = props.$verticalAlign) !== null && _props$$verticalAlign !== void 0 ? _props$$verticalAlign : 'normal';
+}, inputVerticalPadding, inputHorizontalPadding, function (_ref13) {
+  var $verticalAlign = _ref13.$verticalAlign;
+  return $verticalAlign !== null && $verticalAlign !== void 0 ? $verticalAlign : 'normal';
 }, function (props) {
   return props.$leftOuterContent ? '0' : '4px';
 }, function (props) {
@@ -37623,28 +37678,34 @@ var InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.
 }, function (props) {
   var _props$$heightCalcula;
   return (_props$$heightCalcula = props.$heightCalculationCallback) === null || _props$$heightCalcula === void 0 ? void 0 : _props$$heightCalcula.call(props);
-}, function (props) {
-  var borderColor = props.theme.color.gray_7;
+}, function (_ref14) {
+  var $disabled = _ref14.$disabled,
+    $invalid = _ref14.$invalid,
+    $active = _ref14.$active,
+    _ref14$theme = _ref14.theme,
+    color = _ref14$theme.color,
+    shadow = _ref14$theme.shadow;
+  var borderColor = color.border;
   var boxShadow = 'none';
-  var color = props.theme.color.gray_11_50;
-  var backgroundColor = props.theme.color.white;
+  var foreColor = color.text;
+  var backgroundColor = color.bg;
   var cursor = 'text';
-  if (props.$disabled) {
-    color = props.theme.color.gray_9;
-    borderColor = props.theme.color.gray_6;
-    backgroundColor = props.theme.color.gray_2;
+  if ($disabled) {
+    foreColor = color.text_disabled;
+    borderColor = color.border_disabled;
+    backgroundColor = color.bg_fill_teritary;
     cursor = 'default';
-  } else if (props.$invalid) borderColor = props.theme.color.red_11;else if (props.$active) {
-    borderColor = props.theme.color.blue_11;
-    boxShadow = "0px 0px 0px 2px rgba(0, 106, 220, 0.4)";
+  } else if ($invalid) borderColor = color.border_error;else if ($active) {
+    borderColor = color.border_primary;
+    boxShadow = shadow.primary;
   }
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["cursor:", ";background-color:", ";border-color:", ";color:", ";box-shadow:", ";"], cursor, backgroundColor, borderColor, color, boxShadow);
+  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["cursor:", ";background-color:", ";border-color:", ";color:", ";box-shadow:", ";"], cursor, backgroundColor, borderColor, foreColor, boxShadow);
 });
 var HelperText = function HelperText(props) {
   var children = props.children,
     invalid = props.invalid;
   if (!children) return null;
-  var color = invalid ? 'red_11' : 'gray_11_50';
+  var color = invalid ? 'text_error' : 'text_quaternary';
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_8__.Label, {
     "data-role": "description",
     variant: "xs",
@@ -38096,7 +38157,7 @@ var DefaultItemRenderer = function DefaultItemRenderer(props) {
     "data-action": "remove",
     title: "Remove",
     onClick: onRemove,
-    variant: "xxs",
+    size: "xs",
     icon: "CloseSmall"
   }));
 };
@@ -40906,7 +40967,7 @@ var Search = function Search(_ref2) {
   var _useTheme = (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.useTheme)(),
     spacing = _useTheme.spacing;
   var clearButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_5__.IconButton, {
-    variant: "ghost",
+    size: "xs",
     icon: "Close",
     style: {
       visibility: search ? 'visible' : 'hidden'
@@ -41457,7 +41518,7 @@ var TableFooterRow = styled_components__WEBPACK_IMPORTED_MODULE_1___default().di
   componentId: "sc-12b7s5j-0"
 })(["border-top:1px solid ", ";"], function (_ref) {
   var color = _ref.theme.color;
-  return color.gray_3;
+  return color.border_teritary;
 });
 var FooterCell = function FooterCell(props) {
   var className = props.className,
@@ -41499,7 +41560,7 @@ var FooterCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default()
 }, function (_ref3) {
   var $isLastPinned = _ref3.$isLastPinned,
     color = _ref3.theme.color;
-  return $isLastPinned ? "2px solid ".concat(color.gray_3) : 'none';
+  return $isLastPinned ? "2px solid ".concat(color.border_teritary) : 'none';
 });
 
 /***/ }),
@@ -41687,7 +41748,7 @@ var TableHeaderRow = styled_components__WEBPACK_IMPORTED_MODULE_2___default().di
 })(["border-bottom:", ";"], function (_ref) {
   var $isLast = _ref.$isLast,
     color = _ref.theme.color;
-  return $isLast ? 'none' : "1px solid ".concat(color.gray_3);
+  return $isLast ? 'none' : "1px solid ".concat(color.border_teritary);
 });
 var HeaderCellContent = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "HeaderCellContent",
@@ -41701,7 +41762,7 @@ var HeaderCellContent = styled_components__WEBPACK_IMPORTED_MODULE_2___default()
 }, function (_ref4) {
   var $isLastPinned = _ref4.$isLastPinned,
     color = _ref4.theme.color;
-  return $isLastPinned ? "2px solid ".concat(color.gray_3) : 'none';
+  return $isLastPinned ? "2px solid ".concat(color.border_teritary) : 'none';
 });
 var HeaderCellWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "HeaderCellWrapper",
@@ -41867,7 +41928,7 @@ var MenuButton = function MenuButton(props) {
   var popover = props.popover,
     visible = props.visible;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledButton, {
-    variant: "ghost",
+    size: "xs",
     icon: "DotsHorizontal",
     tooltip: "Functions",
     tooltipPlacement: "top",
@@ -42266,7 +42327,7 @@ var Pagination = function Pagination(_ref) {
     icon: "Download",
     onClick: onDownload,
     tooltip: downloadTooltip,
-    variant: "icon"
+    size: "xs"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginationControls, childProps)));
 };
 Pagination.propTypes = {
@@ -42780,7 +42841,7 @@ var TableRow = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.with
 }, function (_ref2) {
   var $isLast = _ref2.$isLast,
     color = _ref2.theme.color;
-  return $isLast ? 'none' : "1px solid ".concat(color.gray_3);
+  return $isLast ? 'none' : "1px solid ".concat(color.border_teritary);
 }, _table_cell__WEBPACK_IMPORTED_MODULE_3__.CellContent, function (_ref3) {
   var $rowDensity = _ref3.$rowDensity;
   return {
@@ -42882,11 +42943,11 @@ var RowHoverActions = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forward
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       key: p.icon
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_2__.IconButton, _extends({}, p, {
-      variant: "icon"
+      size: "xs"
     })));
   }), draggableRows && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_2__.IconButton, _extends({
     disabled: !(draggable !== null && draggable !== void 0 ? draggable : true),
-    variant: "icon",
+    size: "xs",
     icon: "DragAndDrop"
   }, dragHandleProps))));
 });
@@ -43055,7 +43116,7 @@ var RowMenuCellPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_2__.withPopover)(funct
     "data-testid": "row-actions-toggle",
     onClick: p.popover.toggle,
     icon: "DotsHorizontal",
-    variant: "ghost",
+    size: "xs",
     className: _render_row__WEBPACK_IMPORTED_MODULE_6__.preventOnClickClass
   });
 }, function (p) {
@@ -43120,9 +43181,9 @@ var rowMenuColumn = {
   disableResizing: true,
   disablePinning: true,
   canEdit: false,
-  width: 56,
-  minWidth: 56,
-  maxWidth: 56,
+  width: 48,
+  minWidth: 48,
+  maxWidth: 48,
   internalActions: {}
 };
 var useRowMenu = function useRowMenu(hooks) {
@@ -43738,7 +43799,7 @@ var TableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.
   componentId: "sc-ebeoik-0"
 })(["width:100%;border:1px solid ", ";border-radius:4px;overflow-x:", ";", ""], function (_ref) {
   var color = _ref.theme.color;
-  return color.gray_3;
+  return color.border_teritary;
 }, function (_ref2) {
   var $virtualized = _ref2.$virtualized;
   return $virtualized ? 'unset' : 'auto';
@@ -43969,7 +44030,7 @@ var TableCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default().
 }, function (_ref2) {
   var $isLastPinned = _ref2.$isLastPinned,
     color = _ref2.theme.color;
-  return $isLastPinned ? "2px solid ".concat(color.gray_3) : 'none';
+  return $isLastPinned ? "2px solid ".concat(color.border_teritary) : 'none';
 });
 var ExpandedTableCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(TableCellContent).withConfig({
   displayName: "ExpandedTableCellContent",