@aivenio/aquarium 1.77.1 → 1.79.0

package/README.md

@@ -85,9 +85,9 @@ This project requires certain environment variables to be set before commands su
 To develop Aquarium components in the context of an application, it is easier to run a locally modified version of Aquarium in your application (e.g. Console).
 There are two ways to do this: [npm link](https://docs.npmjs.com/cli/v7/commands/npm-link), or copying the module into your app. This allows you to make changes to components and instantly see the change in the context of the app.
 
-#### npm link
+#### `npm link`
 
-> ⚠️ TODO: This doesn't currently work out of the box. Revise the instructions
+> ❌ TODO: This doesn't currently work out of the box. Revise the instructions
 
 1. In design-system directory, run `npm link`
 2. In design-system directory, run `npm link <path to your app>/node_modules/react` to avoid running into conflict of having two react instances. This will otherwise break the rules of hooks and crash the app. More info on the issue [here](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react). If the command fails with errors about peer dependencies, re-run the command, adding `--force` at the end.
@@ -99,6 +99,8 @@ There are two ways to do this: [npm link](https://docs.npmjs.com/cli/v7/commands
 
 #### Copy module
 
+> ⚠️ If you've installed new dependencies on the DS side, this doesn't work. See <a href="#copy-module">instructions for npm pack</a> instead.
+
 npm link can be tricky to get working. A simpler approach is to build a production build of the DS and copy it into your application's `node-modules` directory. Remember to restart the build process of your app once DS has been built and copied over. Here's a snippet to do all that:
 
 ```sh
@@ -109,6 +111,21 @@ cd <path to ds> \
   && cp -R <path to ds>/dist ./node_modules/@aivenio/aquarium # && <the dev/build command of your app>
 ```
 
+#### `npm pack`
+
+Copy module is a hack which doesn't work when the dependencies have changed on the DS side since the last install in your app side. You can instead use `npm pack` to create a tarball (like what's published to the real npm) and install that to your app. Here's a snippet to do all that:
+
+```sh
+cd <path to ds> \
+  && npm run build \
+  && jq --arg file_name $(npm pack 2>&1 | tail -1) '.dependencies["@aivenio/aquarium"] = "file:<path to ds>/\($file_name)"' <path to your app>/package.json > <path to your app>/package-json-new.tmp \
+  && cd <path to your app> \
+  && mv package-json-new.tmp package.json \
+  && npm install # && <the dev/build command of your app>
+```
+
+Make sure you replace all `<path to ds>` and `<path to your app>` strings with the exact absolute paths.
+
 ### Running tests
 
 Remember that `source .env` is needed before NPM commands.

package/dist/atoms.cjs

@@ -4386,6 +4386,9 @@ var tailwind_theme_default = {
     "11/12": "91.666667%",
     full: "100%",
     screen: "100vw",
+    svw: "100svw",
+    lvw: "100lvw",
+    dvw: "100dvw",
     min: "min-content",
     max: "max-content",
     fit: "fit-content"
@@ -4427,12 +4430,32 @@ var tailwind_theme_default = {
     "5/6": "83.333333%",
     full: "100%",
     screen: "100vh",
+    svh: "100svh",
+    lvh: "100lvh",
+    dvh: "100dvh",
     min: "min-content",
     max: "max-content",
     fit: "fit-content"
   },
   maxWidth: {
-    "0": "0rem",
+    "0": "0px",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    l1: "16px",
+    l2: "24px",
+    l3: "32px",
+    l4: "48px",
+    l5: "64px",
+    l6: "96px",
+    l7: "160px",
     none: "none",
     xs: "20rem",
     sm: "24rem",
@@ -4476,14 +4499,35 @@ var tailwind_theme_default = {
     l5: "64px",
     l6: "96px",
     l7: "160px",
+    none: "none",
     full: "100%",
     screen: "100vh",
+    svh: "100svh",
+    lvh: "100lvh",
+    dvh: "100dvh",
     min: "min-content",
     max: "max-content",
     fit: "fit-content"
   },
   minWidth: {
     "0": "0px",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    l1: "16px",
+    l2: "24px",
+    l3: "32px",
+    l4: "48px",
+    l5: "64px",
+    l6: "96px",
+    l7: "160px",
     full: "100%",
     min: "min-content",
     max: "max-content",
@@ -4491,8 +4535,28 @@ var tailwind_theme_default = {
   },
   minHeight: {
     "0": "0px",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    l1: "16px",
+    l2: "24px",
+    l3: "32px",
+    l4: "48px",
+    l5: "64px",
+    l6: "96px",
+    l7: "160px",
     full: "100%",
     screen: "100vh",
+    svh: "100svh",
+    lvh: "100lvh",
+    dvh: "100dvh",
     min: "min-content",
     max: "max-content",
     fit: "fit-content"
@@ -4989,6 +5053,12 @@ var tailwind_theme_default = {
     "span-4": "span 4 / span 4",
     "span-5": "span 5 / span 5",
     "span-6": "span 6 / span 6",
+    "span-7": "span 7 / span 7",
+    "span-8": "span 8 / span 8",
+    "span-9": "span 9 / span 9",
+    "span-10": "span 10 / span 10",
+    "span-11": "span 11 / span 11",
+    "span-12": "span 12 / span 12",
     "span-full": "1 / -1"
   },
   gridRowStart: {
@@ -4999,6 +5069,12 @@ var tailwind_theme_default = {
     "5": "5",
     "6": "6",
     "7": "7",
+    "8": "8",
+    "9": "9",
+    "10": "10",
+    "11": "11",
+    "12": "12",
+    "13": "13",
     auto: "auto"
   },
   gridRowEnd: {
@@ -5009,6 +5085,12 @@ var tailwind_theme_default = {
     "5": "5",
     "6": "6",
     "7": "7",
+    "8": "8",
+    "9": "9",
+    "10": "10",
+    "11": "11",
+    "12": "12",
+    "13": "13",
     auto: "auto"
   },
   gridTemplateColumns: {
@@ -5024,7 +5106,8 @@ var tailwind_theme_default = {
     "10": "repeat(10, minmax(0, 1fr))",
     "11": "repeat(11, minmax(0, 1fr))",
     "12": "repeat(12, minmax(0, 1fr))",
-    none: "none"
+    none: "none",
+    subgrid: "subgrid"
   },
   gridTemplateRows: {
     "1": "repeat(1, minmax(0, 1fr))",
@@ -5033,7 +5116,14 @@ var tailwind_theme_default = {
     "4": "repeat(4, minmax(0, 1fr))",
     "5": "repeat(5, minmax(0, 1fr))",
     "6": "repeat(6, minmax(0, 1fr))",
-    none: "none"
+    "7": "repeat(7, minmax(0, 1fr))",
+    "8": "repeat(8, minmax(0, 1fr))",
+    "9": "repeat(9, minmax(0, 1fr))",
+    "10": "repeat(10, minmax(0, 1fr))",
+    "11": "repeat(11, minmax(0, 1fr))",
+    "12": "repeat(12, minmax(0, 1fr))",
+    none: "none",
+    subgrid: "subgrid"
   },
   keyframes: {
     spin: { to: { transform: "rotate(360deg)" } },
@@ -5063,6 +5153,7 @@ var tailwind_theme_default = {
 
 // src/molecules/Context/Context.tsx
 var import_react10 = __toESM(require("react"));
+var import_i18n = require("@react-aria/i18n");
 var import_overlays = require("@react-aria/overlays");
 
 // src/utils/breakpoints.ts
@@ -5533,6 +5624,26 @@ var tokens_default = {
       lineHeight: 1.5,
       textTransform: "none"
     },
+    "code-small": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "14px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
+    "code-small-strong": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "14px",
+      fontWeight: 600,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
     "caption-small": {
       fontFamily: [
         "Inter"
@@ -5818,6 +5929,7 @@ var Element = (_a) => {
 var import_react3 = __toESM(require("react"));
 
 // src/utils/tailwind.ts
+var import_react_aria_components = require("react-aria-components");
 var import_classnames = __toESM(require("classnames"));
 function cleanClassNames(classNames5) {
   const tokens = classNames5.split(/\s+/);
@@ -7454,6 +7566,22 @@ Typography2.CodeStrong = (_a) => {
   }));
 };
 Typography2.CodeStrong.displayName = "Typography.CodeStrong";
+Typography2.CodeSmall = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react22.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "code-small"
+  }));
+};
+Typography2.CodeSmall.displayName = "Typography.Code";
+Typography2.CodeSmallStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react22.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "code-small-strong"
+  }));
+};
+Typography2.CodeSmallStrong.displayName = "Typography.CodeSmallStrong";
 Typography2.LargeText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react22.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {

package/dist/atoms.mjs

@@ -4336,6 +4336,9 @@ var tailwind_theme_default = {
     "11/12": "91.666667%",
     full: "100%",
     screen: "100vw",
+    svw: "100svw",
+    lvw: "100lvw",
+    dvw: "100dvw",
     min: "min-content",
     max: "max-content",
     fit: "fit-content"
@@ -4377,12 +4380,32 @@ var tailwind_theme_default = {
     "5/6": "83.333333%",
     full: "100%",
     screen: "100vh",
+    svh: "100svh",
+    lvh: "100lvh",
+    dvh: "100dvh",
     min: "min-content",
     max: "max-content",
     fit: "fit-content"
   },
   maxWidth: {
-    "0": "0rem",
+    "0": "0px",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    l1: "16px",
+    l2: "24px",
+    l3: "32px",
+    l4: "48px",
+    l5: "64px",
+    l6: "96px",
+    l7: "160px",
     none: "none",
     xs: "20rem",
     sm: "24rem",
@@ -4426,14 +4449,35 @@ var tailwind_theme_default = {
     l5: "64px",
     l6: "96px",
     l7: "160px",
+    none: "none",
     full: "100%",
     screen: "100vh",
+    svh: "100svh",
+    lvh: "100lvh",
+    dvh: "100dvh",
     min: "min-content",
     max: "max-content",
     fit: "fit-content"
   },
   minWidth: {
     "0": "0px",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    l1: "16px",
+    l2: "24px",
+    l3: "32px",
+    l4: "48px",
+    l5: "64px",
+    l6: "96px",
+    l7: "160px",
     full: "100%",
     min: "min-content",
     max: "max-content",
@@ -4441,8 +4485,28 @@ var tailwind_theme_default = {
   },
   minHeight: {
     "0": "0px",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    l1: "16px",
+    l2: "24px",
+    l3: "32px",
+    l4: "48px",
+    l5: "64px",
+    l6: "96px",
+    l7: "160px",
     full: "100%",
     screen: "100vh",
+    svh: "100svh",
+    lvh: "100lvh",
+    dvh: "100dvh",
     min: "min-content",
     max: "max-content",
     fit: "fit-content"
@@ -4939,6 +5003,12 @@ var tailwind_theme_default = {
     "span-4": "span 4 / span 4",
     "span-5": "span 5 / span 5",
     "span-6": "span 6 / span 6",
+    "span-7": "span 7 / span 7",
+    "span-8": "span 8 / span 8",
+    "span-9": "span 9 / span 9",
+    "span-10": "span 10 / span 10",
+    "span-11": "span 11 / span 11",
+    "span-12": "span 12 / span 12",
     "span-full": "1 / -1"
   },
   gridRowStart: {
@@ -4949,6 +5019,12 @@ var tailwind_theme_default = {
     "5": "5",
     "6": "6",
     "7": "7",
+    "8": "8",
+    "9": "9",
+    "10": "10",
+    "11": "11",
+    "12": "12",
+    "13": "13",
     auto: "auto"
   },
   gridRowEnd: {
@@ -4959,6 +5035,12 @@ var tailwind_theme_default = {
     "5": "5",
     "6": "6",
     "7": "7",
+    "8": "8",
+    "9": "9",
+    "10": "10",
+    "11": "11",
+    "12": "12",
+    "13": "13",
     auto: "auto"
   },
   gridTemplateColumns: {
@@ -4974,7 +5056,8 @@ var tailwind_theme_default = {
     "10": "repeat(10, minmax(0, 1fr))",
     "11": "repeat(11, minmax(0, 1fr))",
     "12": "repeat(12, minmax(0, 1fr))",
-    none: "none"
+    none: "none",
+    subgrid: "subgrid"
   },
   gridTemplateRows: {
     "1": "repeat(1, minmax(0, 1fr))",
@@ -4983,7 +5066,14 @@ var tailwind_theme_default = {
     "4": "repeat(4, minmax(0, 1fr))",
     "5": "repeat(5, minmax(0, 1fr))",
     "6": "repeat(6, minmax(0, 1fr))",
-    none: "none"
+    "7": "repeat(7, minmax(0, 1fr))",
+    "8": "repeat(8, minmax(0, 1fr))",
+    "9": "repeat(9, minmax(0, 1fr))",
+    "10": "repeat(10, minmax(0, 1fr))",
+    "11": "repeat(11, minmax(0, 1fr))",
+    "12": "repeat(12, minmax(0, 1fr))",
+    none: "none",
+    subgrid: "subgrid"
   },
   keyframes: {
     spin: { to: { transform: "rotate(360deg)" } },
@@ -5013,6 +5103,7 @@ var tailwind_theme_default = {
 
 // src/molecules/Context/Context.tsx
 import React9 from "react";
+import { I18nProvider } from "@react-aria/i18n";
 import { ModalProvider } from "@react-aria/overlays";
 
 // src/utils/breakpoints.ts
@@ -5483,6 +5574,26 @@ var tokens_default = {
       lineHeight: 1.5,
       textTransform: "none"
     },
+    "code-small": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "14px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
+    "code-small-strong": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "14px",
+      fontWeight: 600,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
     "caption-small": {
       fontFamily: [
         "Inter"
@@ -5768,6 +5879,7 @@ var Element = (_a) => {
 import React2 from "react";
 
 // src/utils/tailwind.ts
+import { composeRenderProps } from "react-aria-components";
 import originalClassNames from "classnames";
 function cleanClassNames(classNames5) {
   const tokens = classNames5.split(/\s+/);
@@ -7407,6 +7519,22 @@ Typography2.CodeStrong = (_a) => {
   }));
 };
 Typography2.CodeStrong.displayName = "Typography.CodeStrong";
+Typography2.CodeSmall = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "code-small"
+  }));
+};
+Typography2.CodeSmall.displayName = "Typography.Code";
+Typography2.CodeSmallStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "code-small-strong"
+  }));
+};
+Typography2.CodeSmallStrong.displayName = "Typography.CodeSmallStrong";
 Typography2.LargeText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {

package/dist/charts.cjs

@@ -2070,6 +2070,7 @@ var import_react2 = __toESM(require("react"));
 var import_recharts2 = require("recharts");
 
 // src/utils/tailwind.ts
+var import_react_aria_components = require("react-aria-components");
 var import_classnames = __toESM(require("classnames"));
 function cleanClassNames(classNames2) {
   const tokens = classNames2.split(/\s+/);

package/dist/charts.mjs

@@ -1946,6 +1946,7 @@ import React2 from "react";
 import { ResponsiveContainer as _ResponsiveContainer } from "recharts";
 
 // src/utils/tailwind.ts
+import { composeRenderProps } from "react-aria-components";
 import originalClassNames from "classnames";
 function cleanClassNames(classNames2) {
   const tokens = classNames2.split(/\s+/);