@aivenio/aquarium 1.60.0 → 1.61.0

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 28 Feb 2024 10:58:11 GMT
+// Generated on Wed, 13 Mar 2024 08:54:07 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;
@@ -111,6 +111,9 @@ $screens-sm: 672px !default;
 $screens-md: 1056px !default;
 $screens-lg: 1312px !default;
 $screens-xl: 1536px !default;
+$border-color-muted: var(--aquarium-colors-grey-5) !default;
+$border-color-default: var(--aquarium-colors-grey-20) !default;
+$border-color-intense: var(--aquarium-colors-grey-50) !default;
 $border-width-0: 0px !default;
 $border-width-2: 2px !default;
 $border-width-4: 4px !default;

package/dist/atoms.cjs

@@ -2039,6 +2039,22 @@ var require_googleLogo = __commonJS({
   }
 });
 
+// src/icons/grid.js
+var require_grid = __commonJS({
+  "src/icons/grid.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.7 2.75H4.217c-.514 0-.77 0-.966.1a.917.917 0 00-.401.4c-.1.197-.1.453-.1.967V7.7c0 .513 0 .77.1.966a.917.917 0 00.4.4c.197.1.453.1.967.1H7.7c.513 0 .77 0 .966-.1a.917.917 0 00.4-.4c.1-.196.1-.453.1-.966V4.217c0-.514 0-.77-.1-.966a.917.917 0 00-.4-.401c-.196-.1-.453-.1-.966-.1Zm10.083 0H14.3c-.513 0-.77 0-.966.1a.917.917 0 00-.4.4c-.1.197-.1.453-.1.967V7.7c0 .513 0 .77.1.966a.917.917 0 00.4.4c.196.1.453.1.966.1h3.483c.514 0 .77 0 .966-.1a.917.917 0 00.401-.4c.1-.196.1-.453.1-.966V4.217c0-.514 0-.77-.1-.966a.917.917 0 00-.4-.401c-.197-.1-.453-.1-.967-.1Zm0 10.083H14.3c-.513 0-.77 0-.966.1a.918.918 0 00-.4.4c-.1.197-.1.454-.1.967v3.483c0 .514 0 .77.1.966a.917.917 0 00.4.401c.196.1.453.1.966.1h3.483c.514 0 .77 0 .966-.1a.917.917 0 00.401-.4c.1-.197.1-.453.1-.967V14.3c0-.513 0-.77-.1-.966a.917.917 0 00-.4-.4c-.197-.1-.453-.1-.967-.1Zm-10.083 0H4.217c-.514 0-.77 0-.966.1a.917.917 0 00-.401.4c-.1.197-.1.454-.1.967v3.483c0 .514 0 .77.1.966a.917.917 0 00.4.401c.197.1.453.1.967.1H7.7c.513 0 .77 0 .966-.1a.917.917 0 00.4-.4c.1-.197.1-.453.1-.967V14.3c0-.513 0-.77-.1-.966a.917.917 0 00-.4-.4c-.196-.1-.453-.1-.966-.1Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/groupedBarChart.js
 var require_groupedBarChart = __commonJS({
   "src/icons/groupedBarChart.js"(exports) {
@@ -3735,6 +3751,22 @@ var require_swapVertical = __commonJS({
   }
 });
 
+// src/icons/table.js
+var require_table = __commonJS({
+  "src/icons/table.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.75 8.25h16.5m-11-5.5v16.5m-1.1-16.5h7.7c1.54 0 2.31 0 2.899.3a2.75 2.75 0 011.201 1.202c.3.588.3 1.358.3 2.898v7.7c0 1.54 0 2.31-.3 2.899a2.751 2.751 0 01-1.201 1.201c-.589.3-1.359.3-2.899.3h-7.7c-1.54 0-2.31 0-2.898-.3a2.75 2.75 0 01-1.202-1.2c-.3-.589-.3-1.359-.3-2.899v-7.7c0-1.54 0-2.31.3-2.898A2.75 2.75 0 014.252 3.05c.588-.3 1.358-.3 2.898-.3Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/tag.js
 var require_tag = __commonJS({
   "src/icons/tag.js"(exports) {
@@ -5647,6 +5679,7 @@ var import_githubLogo = __toESM(require_githubLogo());
 var import_globeNetwork = __toESM(require_globeNetwork());
 var import_globe = __toESM(require_globe());
 var import_googleLogo = __toESM(require_googleLogo());
+var import_grid = __toESM(require_grid());
 var import_groupedBarChart = __toESM(require_groupedBarChart());
 var import_heart = __toESM(require_heart());
 var import_help = __toESM(require_help());
@@ -5753,6 +5786,7 @@ var import_stopwatch = __toESM(require_stopwatch());
 var import_superadmin = __toESM(require_superadmin());
 var import_swapHorizontal = __toESM(require_swapHorizontal());
 var import_swapVertical = __toESM(require_swapVertical());
+var import_table = __toESM(require_table());
 var import_tag = __toESM(require_tag());
 var import_terraform = __toESM(require_terraform());
 var import_thumbsDown = __toESM(require_thumbsDown());
@@ -6516,12 +6550,17 @@ var Typography = (_a) => {
 };
 
 // src/atoms/Alert/Alert.tsx
+var import_announcement2 = __toESM(require_announcement());
 var import_cross2 = __toESM(require_cross());
 var import_error2 = __toESM(require_error());
 var import_infoSign2 = __toESM(require_infoSign());
 var import_tickCircle2 = __toESM(require_tickCircle());
 var import_warningSign2 = __toESM(require_warningSign());
 var alertTypes = {
+  announcement: {
+    icon: import_announcement2.default,
+    color: "primary-80"
+  },
   information: {
     icon: import_infoSign2.default,
     color: "info-70"
@@ -6559,6 +6598,7 @@ var Alert = (_a) => {
         "bg-info-10": type === "information",
         "bg-success-5": type === "success",
         "bg-warning-5": type === "warning",
+        "bg-primary-10": type === "announcement",
         "p-4": Boolean(dense),
         "p-5": !dense
       }),
@@ -6877,7 +6917,7 @@ var getCommonCardStyles = ({
   fullWidth = false,
   enableMinWidth = true,
   disabled = false
-}) => tw("border-[2px] border-grey-5 rounded-[2px] relative p-5 flex flex-col gap-5 bg-white outline-none transition-all", {
+}) => tw("border-[2px] border-muted rounded-[2px] relative p-5 flex flex-col gap-5 bg-white outline-none transition-all", {
   "w-[280px]": !fullWidth,
   "w-full": fullWidth,
   "min-w-[280px]": fullWidth && enableMinWidth,
@@ -7019,8 +7059,8 @@ var Checkbox = import_react24.default.forwardRef(
     var _b = _a, { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
     return /* @__PURE__ */ import_react24.default.createElement("span", {
       className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
-        "hover:border-grey-50 peer-checked:border-primary-80": !disabled,
-        "border-grey-5": disabled
+        "hover:border-intense peer-checked:border-primary-80": !disabled,
+        "border-muted": disabled
       })
     }, /* @__PURE__ */ import_react24.default.createElement("input", __spreadProps(__spreadValues({
       id,
@@ -7044,11 +7084,11 @@ var Checkbox = import_react24.default.forwardRef(
           "absolute top-0 right-0",
           "pointer-events-none p-[2px] w-5 h-5",
           "text-transparent [&>path]:stroke-transparent [&>path]:stroke-2",
-          "rounded-sm border border-grey-20 peer-focus:border-info-70"
+          "rounded-sm border border-default peer-focus:border-info-70"
         ),
         {
-          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
-          "border-grey-5 peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
+          "peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
+          "border-muted peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
         }
       )
     }));
@@ -7291,7 +7331,7 @@ DropdownMenu.Separator = Separator;
 var EmptyStateContainer = (_a) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ import_react28.default.createElement("div", __spreadValues({
-    className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
+    className: classNames(tw("border border-dashed border-default p-3"), className)
   }, props), children);
 };
 DropdownMenu.EmptyStateContainer = EmptyStateContainer;
@@ -7614,7 +7654,7 @@ var Divider = (_a) => {
   return /* @__PURE__ */ import_react33.default.createElement("li", __spreadProps(__spreadValues({
     role: "separator"
   }, rest), {
-    className: classNames(tw("border-t-2 border-grey-5"), className)
+    className: classNames(tw("border-t-2 border-muted"), className)
   }));
 };
 var Item2 = (_a) => {
@@ -7646,7 +7686,7 @@ var PopoverPanel = import_react34.default.forwardRef((_a, ref) => {
     ref,
     className: classNames(
       className,
-      tw("rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col border border-grey-20 outline-none")
+      tw("rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col border border-default outline-none")
     )
   }, props), children);
 });
@@ -7719,11 +7759,11 @@ var RadioButton = import_react36.default.forwardRef(
       className: classNames(
         tw(
           "inline-flex justify-center items-center self-center appearance-none",
-          "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-grey-20",
+          "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-default",
           "outline-none focus:border-info-70 checked:bg-primary-80 checked:shadow-whiteInset",
           {
-            "hover:border-grey-50 checked:border-primary-80": !disabled,
-            "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
+            "hover:border-intense checked:border-primary-80": !disabled,
+            "cursor-not-allowed border-muted bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
           }
         )
       ),
@@ -7771,12 +7811,12 @@ var InputContainer = import_react37.default.forwardRef(
         {
           "border px-3 py-[6px]": variant !== "readOnly",
           "cursor-default": variant === "readOnly",
-          "border-grey-20": variant !== "error" && variant !== "readOnly",
+          "border-default": variant !== "error" && variant !== "readOnly",
           "border-error-50": variant === "error",
-          "hover:border-grey-50": variant !== "error" && variant !== "disabled" && variant !== "focused",
+          "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
           "border-info-70": variant === "focused",
           "bg-white": variant !== "disabled",
-          "cursor-not-allowed border-grey-20 bg-grey-5": variant === "disabled"
+          "cursor-not-allowed border-default bg-grey-5": variant === "disabled"
         }
       )
     }, props));
@@ -7822,11 +7862,11 @@ var EmptyStateContainer2 = import_react37.default.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ import_react37.default.createElement("li", __spreadValues({
     ref,
-    className: tw("border border-dashed border-grey-10 m-4 p-6")
+    className: tw("border border-dashed border-default m-4 p-6")
   }, props), children);
 });
 var Divider2 = (props) => /* @__PURE__ */ import_react37.default.createElement("div", __spreadValues({
-  className: tw("border-b-[1px] border-grey-5 mx-3 my-4")
+  className: tw("border-b-[1px] border-muted mx-3 my-4")
 }, props));
 var Group2 = import_react37.default.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
@@ -7960,7 +8000,7 @@ var Step = (_a) => {
 };
 var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
   "border-grey-90 bg-white": state === "active",
-  "border-grey-20 bg-white": state === "inactive",
+  "border-default bg-white": state === "inactive",
   "text-white bg-success-70 border-success-70": state === "completed"
 });
 var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
@@ -8051,7 +8091,7 @@ var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ import_react40.default.createElement("tbody", __spreadValues({}, rest), children);
 };
-var rowClassNames = tw("children:border-grey-10 group children:last:border-b-0 hover:bg-grey-0");
+var rowClassNames = tw("children:border-default group children:last:border-b-0 hover:bg-grey-0");
 var TableRow = (_a) => {
   var _b = _a, { children, className, disabled } = _b, rest = __objRest(_b, ["children", "className", "disabled"]);
   return /* @__PURE__ */ import_react40.default.createElement("tr", __spreadProps(__spreadValues(__spreadValues({}, rest), { inert: disabled ? "" : void 0 }), {
@@ -8070,7 +8110,7 @@ var getBodyCellClassNames = (table = true, stickyColumn) => tw("text-default py-
 });
 var getAlignClassNames = (align) => tw({ "text-right": align === "right", "text-center": align === "center" });
 var getHeadCellClassNames = (sticky = true, stickyColumn) => {
-  const common = tw("py-[14px] text-left bg-white border-grey-40 text-grey-50 font-semibold whitespace-nowrap");
+  const common = tw("py-[14px] text-left bg-white border-intense text-grey-50 font-semibold whitespace-nowrap");
   return sticky ? classNames(
     common,
     tw("sticky top-0", {

package/dist/atoms.mjs

@@ -2033,6 +2033,22 @@ var require_googleLogo = __commonJS({
   }
 });
 
+// src/icons/grid.js
+var require_grid = __commonJS({
+  "src/icons/grid.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.7 2.75H4.217c-.514 0-.77 0-.966.1a.917.917 0 00-.401.4c-.1.197-.1.453-.1.967V7.7c0 .513 0 .77.1.966a.917.917 0 00.4.4c.197.1.453.1.967.1H7.7c.513 0 .77 0 .966-.1a.917.917 0 00.4-.4c.1-.196.1-.453.1-.966V4.217c0-.514 0-.77-.1-.966a.917.917 0 00-.4-.401c-.196-.1-.453-.1-.966-.1Zm10.083 0H14.3c-.513 0-.77 0-.966.1a.917.917 0 00-.4.4c-.1.197-.1.453-.1.967V7.7c0 .513 0 .77.1.966a.917.917 0 00.4.4c.196.1.453.1.966.1h3.483c.514 0 .77 0 .966-.1a.917.917 0 00.401-.4c.1-.196.1-.453.1-.966V4.217c0-.514 0-.77-.1-.966a.917.917 0 00-.4-.401c-.197-.1-.453-.1-.967-.1Zm0 10.083H14.3c-.513 0-.77 0-.966.1a.918.918 0 00-.4.4c-.1.197-.1.454-.1.967v3.483c0 .514 0 .77.1.966a.917.917 0 00.4.401c.196.1.453.1.966.1h3.483c.514 0 .77 0 .966-.1a.917.917 0 00.401-.4c.1-.197.1-.453.1-.967V14.3c0-.513 0-.77-.1-.966a.917.917 0 00-.4-.4c-.197-.1-.453-.1-.967-.1Zm-10.083 0H4.217c-.514 0-.77 0-.966.1a.917.917 0 00-.401.4c-.1.197-.1.454-.1.967v3.483c0 .514 0 .77.1.966a.917.917 0 00.4.401c.197.1.453.1.967.1H7.7c.513 0 .77 0 .966-.1a.917.917 0 00.4-.4c.1-.197.1-.453.1-.967V14.3c0-.513 0-.77-.1-.966a.917.917 0 00-.4-.4c-.196-.1-.453-.1-.966-.1Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/groupedBarChart.js
 var require_groupedBarChart = __commonJS({
   "src/icons/groupedBarChart.js"(exports) {
@@ -3729,6 +3745,22 @@ var require_swapVertical = __commonJS({
   }
 });
 
+// src/icons/table.js
+var require_table = __commonJS({
+  "src/icons/table.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.75 8.25h16.5m-11-5.5v16.5m-1.1-16.5h7.7c1.54 0 2.31 0 2.899.3a2.75 2.75 0 011.201 1.202c.3.588.3 1.358.3 2.898v7.7c0 1.54 0 2.31-.3 2.899a2.751 2.751 0 01-1.201 1.201c-.589.3-1.359.3-2.899.3h-7.7c-1.54 0-2.31 0-2.898-.3a2.75 2.75 0 01-1.202-1.2c-.3-.589-.3-1.359-.3-2.899v-7.7c0-1.54 0-2.31.3-2.898A2.75 2.75 0 014.252 3.05c.588-.3 1.358-.3 2.898-.3Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/tag.js
 var require_tag = __commonJS({
   "src/icons/tag.js"(exports) {
@@ -5603,6 +5635,7 @@ var import_githubLogo = __toESM(require_githubLogo());
 var import_globeNetwork = __toESM(require_globeNetwork());
 var import_globe = __toESM(require_globe());
 var import_googleLogo = __toESM(require_googleLogo());
+var import_grid = __toESM(require_grid());
 var import_groupedBarChart = __toESM(require_groupedBarChart());
 var import_heart = __toESM(require_heart());
 var import_help = __toESM(require_help());
@@ -5709,6 +5742,7 @@ var import_stopwatch = __toESM(require_stopwatch());
 var import_superadmin = __toESM(require_superadmin());
 var import_swapHorizontal = __toESM(require_swapHorizontal());
 var import_swapVertical = __toESM(require_swapVertical());
+var import_table = __toESM(require_table());
 var import_tag = __toESM(require_tag());
 var import_terraform = __toESM(require_terraform());
 var import_thumbsDown = __toESM(require_thumbsDown());
@@ -6475,12 +6509,17 @@ var Typography = (_a) => {
 };
 
 // src/atoms/Alert/Alert.tsx
+var import_announcement2 = __toESM(require_announcement());
 var import_cross2 = __toESM(require_cross());
 var import_error2 = __toESM(require_error());
 var import_infoSign2 = __toESM(require_infoSign());
 var import_tickCircle2 = __toESM(require_tickCircle());
 var import_warningSign2 = __toESM(require_warningSign());
 var alertTypes = {
+  announcement: {
+    icon: import_announcement2.default,
+    color: "primary-80"
+  },
   information: {
     icon: import_infoSign2.default,
     color: "info-70"
@@ -6518,6 +6557,7 @@ var Alert = (_a) => {
         "bg-info-10": type === "information",
         "bg-success-5": type === "success",
         "bg-warning-5": type === "warning",
+        "bg-primary-10": type === "announcement",
         "p-4": Boolean(dense),
         "p-5": !dense
       }),
@@ -6836,7 +6876,7 @@ var getCommonCardStyles = ({
   fullWidth = false,
   enableMinWidth = true,
   disabled = false
-}) => tw("border-[2px] border-grey-5 rounded-[2px] relative p-5 flex flex-col gap-5 bg-white outline-none transition-all", {
+}) => tw("border-[2px] border-muted rounded-[2px] relative p-5 flex flex-col gap-5 bg-white outline-none transition-all", {
   "w-[280px]": !fullWidth,
   "w-full": fullWidth,
   "min-w-[280px]": fullWidth && enableMinWidth,
@@ -6978,8 +7018,8 @@ var Checkbox = React20.forwardRef(
     var _b = _a, { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
     return /* @__PURE__ */ React20.createElement("span", {
       className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
-        "hover:border-grey-50 peer-checked:border-primary-80": !disabled,
-        "border-grey-5": disabled
+        "hover:border-intense peer-checked:border-primary-80": !disabled,
+        "border-muted": disabled
       })
     }, /* @__PURE__ */ React20.createElement("input", __spreadProps(__spreadValues({
       id,
@@ -7003,11 +7043,11 @@ var Checkbox = React20.forwardRef(
           "absolute top-0 right-0",
           "pointer-events-none p-[2px] w-5 h-5",
           "text-transparent [&>path]:stroke-transparent [&>path]:stroke-2",
-          "rounded-sm border border-grey-20 peer-focus:border-info-70"
+          "rounded-sm border border-default peer-focus:border-info-70"
         ),
         {
-          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
-          "border-grey-5 peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
+          "peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
+          "border-muted peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
         }
       )
     }));
@@ -7250,7 +7290,7 @@ DropdownMenu.Separator = Separator;
 var EmptyStateContainer = (_a) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ React24.createElement("div", __spreadValues({
-    className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
+    className: classNames(tw("border border-dashed border-default p-3"), className)
   }, props), children);
 };
 DropdownMenu.EmptyStateContainer = EmptyStateContainer;
@@ -7573,7 +7613,7 @@ var Divider = (_a) => {
   return /* @__PURE__ */ React29.createElement("li", __spreadProps(__spreadValues({
     role: "separator"
   }, rest), {
-    className: classNames(tw("border-t-2 border-grey-5"), className)
+    className: classNames(tw("border-t-2 border-muted"), className)
   }));
 };
 var Item2 = (_a) => {
@@ -7605,7 +7645,7 @@ var PopoverPanel = React30.forwardRef((_a, ref) => {
     ref,
     className: classNames(
       className,
-      tw("rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col border border-grey-20 outline-none")
+      tw("rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col border border-default outline-none")
     )
   }, props), children);
 });
@@ -7678,11 +7718,11 @@ var RadioButton = React32.forwardRef(
       className: classNames(
         tw(
           "inline-flex justify-center items-center self-center appearance-none",
-          "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-grey-20",
+          "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-default",
           "outline-none focus:border-info-70 checked:bg-primary-80 checked:shadow-whiteInset",
           {
-            "hover:border-grey-50 checked:border-primary-80": !disabled,
-            "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
+            "hover:border-intense checked:border-primary-80": !disabled,
+            "cursor-not-allowed border-muted bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
           }
         )
       ),
@@ -7730,12 +7770,12 @@ var InputContainer = React33.forwardRef(
         {
           "border px-3 py-[6px]": variant !== "readOnly",
           "cursor-default": variant === "readOnly",
-          "border-grey-20": variant !== "error" && variant !== "readOnly",
+          "border-default": variant !== "error" && variant !== "readOnly",
           "border-error-50": variant === "error",
-          "hover:border-grey-50": variant !== "error" && variant !== "disabled" && variant !== "focused",
+          "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
           "border-info-70": variant === "focused",
           "bg-white": variant !== "disabled",
-          "cursor-not-allowed border-grey-20 bg-grey-5": variant === "disabled"
+          "cursor-not-allowed border-default bg-grey-5": variant === "disabled"
         }
       )
     }, props));
@@ -7781,11 +7821,11 @@ var EmptyStateContainer2 = React33.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ React33.createElement("li", __spreadValues({
     ref,
-    className: tw("border border-dashed border-grey-10 m-4 p-6")
+    className: tw("border border-dashed border-default m-4 p-6")
   }, props), children);
 });
 var Divider2 = (props) => /* @__PURE__ */ React33.createElement("div", __spreadValues({
-  className: tw("border-b-[1px] border-grey-5 mx-3 my-4")
+  className: tw("border-b-[1px] border-muted mx-3 my-4")
 }, props));
 var Group2 = React33.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
@@ -7919,7 +7959,7 @@ var Step = (_a) => {
 };
 var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
   "border-grey-90 bg-white": state === "active",
-  "border-grey-20 bg-white": state === "inactive",
+  "border-default bg-white": state === "inactive",
   "text-white bg-success-70 border-success-70": state === "completed"
 });
 var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
@@ -8010,7 +8050,7 @@ var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React36.createElement("tbody", __spreadValues({}, rest), children);
 };
-var rowClassNames = tw("children:border-grey-10 group children:last:border-b-0 hover:bg-grey-0");
+var rowClassNames = tw("children:border-default group children:last:border-b-0 hover:bg-grey-0");
 var TableRow = (_a) => {
   var _b = _a, { children, className, disabled } = _b, rest = __objRest(_b, ["children", "className", "disabled"]);
   return /* @__PURE__ */ React36.createElement("tr", __spreadProps(__spreadValues(__spreadValues({}, rest), { inert: disabled ? "" : void 0 }), {
@@ -8029,7 +8069,7 @@ var getBodyCellClassNames = (table = true, stickyColumn) => tw("text-default py-
 });
 var getAlignClassNames = (align) => tw({ "text-right": align === "right", "text-center": align === "center" });
 var getHeadCellClassNames = (sticky = true, stickyColumn) => {
-  const common = tw("py-[14px] text-left bg-white border-grey-40 text-grey-50 font-semibold whitespace-nowrap");
+  const common = tw("py-[14px] text-left bg-white border-intense text-grey-50 font-semibold whitespace-nowrap");
   return sticky ? classNames(
     common,
     tw("sticky top-0", {

package/dist/charts.cjs

@@ -60,8 +60,12 @@ __export(charts_exports, {
   Axis: () => Axis,
   Bar: () => Bar,
   BarChart: () => BarChart,
+  CHART_MARGIN_BOTTOM: () => CHART_MARGIN_BOTTOM,
+  CHART_XLABEL_DEFAULT_OFFSET: () => CHART_XLABEL_DEFAULT_OFFSET,
+  CHART_YLABEL_DEFAULT_OFFSET: () => CHART_YLABEL_DEFAULT_OFFSET,
   CartesianGrid: () => CartesianGrid,
   Cell: () => import_recharts7.Cell,
+  DEFAULT_MARGINS: () => DEFAULT_MARGINS,
   Doughnut: () => Doughnut,
   DoughnutChart: () => DoughnutChart,
   Label: () => Label,
@@ -1977,6 +1981,15 @@ function time() {
 // src/charts/lib/utils.ts
 var import_isArray = __toESM(require("lodash/isArray"));
 var import_isDate = __toESM(require("lodash/isDate"));
+var CHART_MARGIN_BOTTOM = 15;
+var CHART_YLABEL_DEFAULT_OFFSET = 10;
+var CHART_XLABEL_DEFAULT_OFFSET = CHART_YLABEL_DEFAULT_OFFSET * -1;
+var DEFAULT_MARGINS = {
+  top: 20,
+  right: 30,
+  left: 20,
+  bottom: CHART_MARGIN_BOTTOM
+};
 var getDisplayName = (Comp) => {
   if (typeof Comp === "string") {
     return Comp;
@@ -2182,7 +2195,15 @@ var renderChildren = (props) => {
   });
 };
 var AreaChart = (_a) => {
-  var _b = _a, { isBusy, busyLabel } = _b, props = __objRest(_b, ["isBusy", "busyLabel"]);
+  var _b = _a, {
+    isBusy,
+    busyLabel,
+    margin = DEFAULT_MARGINS
+  } = _b, props = __objRest(_b, [
+    "isBusy",
+    "busyLabel",
+    "margin"
+  ]);
   const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
   return /* @__PURE__ */ import_react4.default.createElement(ResponsiveContainer, {
     width: props.width,
@@ -2193,19 +2214,14 @@ var AreaChart = (_a) => {
     accessibilityLayer: tooltip !== void 0,
     data: props.data,
     style: { stroke: "#fff", strokeWidth: 1 },
-    margin: {
-      top: 20,
-      right: 30,
-      left: 20,
-      bottom: 5
-    }
+    margin
   }, /* @__PURE__ */ import_react4.default.createElement(CartesianGrid, null), renderChildren(props)));
 };
 var Area = Object.assign(
   (props) => {
     var _a;
     return /* @__PURE__ */ import_react4.default.createElement(import_recharts5.Area, __spreadProps(__spreadValues({
-      type: "monotone",
+      type: "linear",
       strokeWidth: 2,
       dot: false
     }, props), {
@@ -2225,14 +2241,16 @@ AreaChart.Area = Area;
 // src/charts/BarChart/BarChart.tsx
 var import_react5 = __toESM(require("react"));
 var import_recharts6 = require("recharts");
-var margin = {
-  top: 20,
-  right: 30,
-  left: 20,
-  bottom: 5
-};
 var BarChart = (_a) => {
-  var _b = _a, { isBusy, busyLabel } = _b, props = __objRest(_b, ["isBusy", "busyLabel"]);
+  var _b = _a, {
+    isBusy,
+    busyLabel,
+    margin = DEFAULT_MARGINS
+  } = _b, props = __objRest(_b, [
+    "isBusy",
+    "busyLabel",
+    "margin"
+  ]);
   const [activeIndex, setActiveIndex] = import_react5.default.useState(void 0);
   const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
   const renderChildren3 = (props2) => {
@@ -2295,15 +2313,18 @@ var import_recharts8 = require("recharts");
 // src/charts/Label/Label.tsx
 var import_react6 = __toESM(require("react"));
 var import_recharts9 = require("recharts");
-var XLabel = Object.assign((props) => /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Label, __spreadValues({
-  position: "insideBottom",
-  offset: -3
-}, props)), import_recharts9.Label);
+var XLabel = Object.assign(
+  (props) => /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Label, __spreadValues({
+    position: "insideBottom",
+    offset: CHART_XLABEL_DEFAULT_OFFSET
+  }, props)),
+  import_recharts9.Label
+);
 var YLabel = Object.assign(
   (props) => /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Label, __spreadValues({
     position: "insideLeft",
     angle: -90,
-    offset: 10
+    offset: CHART_YLABEL_DEFAULT_OFFSET
   }, props)),
   import_recharts9.Label
 );
@@ -2356,7 +2377,15 @@ var renderChildren2 = (props) => {
   });
 };
 var LineChart = (_a) => {
-  var _b = _a, { isBusy, busyLabel } = _b, props = __objRest(_b, ["isBusy", "busyLabel"]);
+  var _b = _a, {
+    isBusy,
+    busyLabel,
+    margin = DEFAULT_MARGINS
+  } = _b, props = __objRest(_b, [
+    "isBusy",
+    "busyLabel",
+    "margin"
+  ]);
   const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
   return /* @__PURE__ */ import_react8.default.createElement(ResponsiveContainer, {
     width: props.width,
@@ -2366,18 +2395,13 @@ var LineChart = (_a) => {
   }, /* @__PURE__ */ import_react8.default.createElement(import_recharts11.LineChart, {
     data: props.data,
     style: { stroke: "#fff", strokeWidth: 1 },
-    margin: {
-      top: 20,
-      right: 30,
-      left: 20,
-      bottom: 5
-    },
+    margin,
     accessibilityLayer: tooltip !== void 0
   }, /* @__PURE__ */ import_react8.default.createElement(CartesianGrid, null), renderChildren2(props)));
 };
 var Line = Object.assign(
   (props) => /* @__PURE__ */ import_react8.default.createElement(import_recharts11.Line, __spreadProps(__spreadValues({
-    type: "monotone"
+    type: "linear"
   }, props), {
     strokeWidth: 2,
     isAnimationActive: false,
@@ -2581,8 +2605,12 @@ var Reference = {
   Axis,
   Bar,
   BarChart,
+  CHART_MARGIN_BOTTOM,
+  CHART_XLABEL_DEFAULT_OFFSET,
+  CHART_YLABEL_DEFAULT_OFFSET,
   CartesianGrid,
   Cell,
+  DEFAULT_MARGINS,
   Doughnut,
   DoughnutChart,
   Label,