@aivenio/aquarium 1.38.2 → 1.40.0

package/README.md

@@ -30,6 +30,7 @@ Implementation of Aiven Aquarium design system, released as an npm package. Quic
       )
     )
   ```
+
 - If you encounter problems resolving EcmaScript modules disable "fullySpecified" mode using this Webpack config:
   ```module.exports = {
     webpack: {
@@ -130,7 +131,7 @@ Storybook is deployed to Cloudflare Pages everytime new code is merged to main.
 
 #### How to build Aquarium package locally
 
-- run `npm run build:ds`
+- run `npm run build`
 - see `dist` for the built code
 
 #### How to create a release

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 14 Sep 2023 11:11:21 GMT
+// Generated on Wed, 27 Sep 2023 12:00:12 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;

package/dist/atoms.cjs

@@ -3836,566 +3836,6 @@ var require_tokens = __commonJS({
   "tokens.json"(exports, module2) {
     module2.exports = {
       themes: {
-        timescale: {
-          colors: {
-            "error-100": "#aa0000",
-            "error-90": "#b90000",
-            "error-80": "#c50001",
-            "error-70": "#d80005",
-            "error-60": "#e70000",
-            "error-50": "#e62728",
-            "error-40": "#e0504f",
-            "error-30": "#ed7975",
-            "error-20": "#ffadb3",
-            "error-10": "#ffcbd2",
-            "error-5": "#fee8e7",
-            "error-0": "#fef2f1",
-            "warning-100": "#fe6d00",
-            "warning-90": "#ff9003",
-            "warning-80": "#fd9f00",
-            "warning-70": "#ffb300",
-            "warning-60": "#ffc107",
-            "warning-50": "#fdc926",
-            "warning-40": "#fdd44d",
-            "warning-30": "#fddf81",
-            "warning-20": "#feebb2",
-            "warning-10": "#fff2cd",
-            "warning-5": "#fff8ea",
-            "warning-0": "#fffdf9",
-            "success-100": "#006f00",
-            "success-90": "#008e00",
-            "success-80": "#009f00",
-            "success-70": "#00b300",
-            "success-60": "#00c300",
-            "success-50": "#40ce37",
-            "success-40": "#60db57",
-            "success-30": "#89eb80",
-            "success-20": "#afffa7",
-            "success-10": "#cbffc9",
-            "success-5": "#ecf7ed",
-            "success-0": "#f5faf5",
-            "info-100": "#02569a",
-            "info-90": "#0174ba",
-            "info-80": "#0788d1",
-            "info-70": "#0399e3",
-            "info-60": "#02a8f3",
-            "info-50": "#28b4f4",
-            "info-40": "#4cc2f7",
-            "info-30": "#7fd1f7",
-            "info-20": "#b4e5fb",
-            "info-10": "#e0f5fe",
-            "info-5": "#effaff",
-            "info-0": "#f9fdff",
-            "grey-100": "#19191d",
-            "grey-90": "#292a31",
-            "grey-80": "#3a3a44",
-            "grey-70": "#4a4b57",
-            "grey-60": "#5a5b6a",
-            "grey-50": "#787885",
-            "grey-40": "#9696a0",
-            "grey-30": "#b4b4bb",
-            "grey-20": "#d2d2d6",
-            "grey-10": "#e1e1e3",
-            "grey-5": "#ededf0",
-            "grey-0": "#f7f7fa",
-            "secondary-100": "#e11d16",
-            "secondary-90": "#eb4610",
-            "secondary-80": "#f3580d",
-            "secondary-70": "#f96a02",
-            "secondary-60": "#ff7700",
-            "secondary-50": "#fc871a",
-            "secondary-40": "#fb9a3e",
-            "secondary-30": "#fab26e",
-            "secondary-20": "#f8c99c",
-            "secondary-10": "#fee8d0",
-            "secondary-5": "#fff3e8",
-            "secondary-0": "#fffbf8",
-            "primary-100": "#02569a",
-            "primary-90": "#0174ba",
-            "primary-80": "#0788d1",
-            "primary-70": "#0399e3",
-            "primary-60": "#02a8f3",
-            "primary-50": "#28b4f4",
-            "primary-40": "#4cc2f7",
-            "primary-30": "#7fd1f7",
-            "primary-20": "#b4e5fb",
-            "primary-10": "#e0f5fe",
-            "primary-5": "#effaff",
-            "primary-0": "#f9fdff"
-          },
-          typography: {
-            sizes: [
-              {
-                name: "large-heading",
-                className: "typography-large-heading",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "32px",
-                  fontWeight: 700,
-                  fontStyle: "normal",
-                  lineHeight: 1.375,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Bold"
-              },
-              {
-                name: "heading",
-                className: "typography-heading",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "24px",
-                  fontWeight: 700,
-                  fontStyle: "normal",
-                  lineHeight: 1.375,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Bold"
-              },
-              {
-                name: "subheading",
-                className: "typography-subheading",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "20px",
-                  fontWeight: 600,
-                  fontStyle: "normal",
-                  lineHeight: 1.375,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Bold"
-              },
-              {
-                name: "large-strong",
-                className: "typography-large-strong",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "20px",
-                  fontWeight: 600,
-                  fontStyle: "normal",
-                  lineHeight: 1.58,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-SemiBold"
-              },
-              {
-                name: "large",
-                className: "typography-large",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "20px",
-                  fontWeight: 500,
-                  fontStyle: "normal",
-                  lineHeight: 1.58,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-SemiBold"
-              },
-              {
-                name: "default-strong",
-                className: "typography-default-strong",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "16px",
-                  fontWeight: 500,
-                  fontStyle: "normal",
-                  lineHeight: 1.5,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-SemiBold"
-              },
-              {
-                name: "default",
-                className: "typography-default",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "16px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1.5,
-                  textTransform: "none"
-                },
-                fontPostScriptName: null
-              },
-              {
-                name: "small-strong",
-                className: "typography-small-strong",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "14px",
-                  fontWeight: 500,
-                  fontStyle: "normal",
-                  lineHeight: 1.42,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-SemiBold"
-              },
-              {
-                name: "small",
-                className: "typography-small",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "14px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1.42,
-                  textTransform: "none"
-                },
-                fontPostScriptName: null
-              },
-              {
-                name: "caption",
-                className: "typography-caption",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "12px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1.26,
-                  textTransform: "none"
-                },
-                fontPostScriptName: null
-              },
-              {
-                name: "caption-small",
-                className: "typography-caption-small",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "10px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1.2,
-                  textTransform: "none"
-                },
-                fontPostScriptName: null
-              },
-              {
-                name: "caption-default",
-                className: "typography-caption-default",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "12px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1.26,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: null
-              },
-              {
-                name: "overline-small",
-                className: "typography-overline-small",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "10px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1,
-                  letterSpacing: 0,
-                  textTransform: "uppercase"
-                },
-                fontPostScriptName: null
-              },
-              {
-                name: "overline-default",
-                className: "typography-overline-default",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "12px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1,
-                  letterSpacing: 0,
-                  textTransform: "uppercase"
-                },
-                fontPostScriptName: null
-              },
-              {
-                name: "button-small",
-                className: "typography-button-small",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "12px",
-                  fontWeight: 500,
-                  fontStyle: "normal",
-                  lineHeight: 1,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Medium"
-              },
-              {
-                name: "button-medium",
-                className: "typography-button-medium",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "14px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-SemiBold"
-              },
-              {
-                name: "button-large",
-                className: "typography-button-large",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "16px",
-                  fontWeight: 500,
-                  fontStyle: "normal",
-                  lineHeight: 1.5,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Medium"
-              },
-              {
-                name: "body-small",
-                className: "typography-body-small",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "14px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1.43,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: null
-              },
-              {
-                name: "body-small-medium",
-                className: "typography-body-small-medium",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "14px",
-                  fontWeight: 500,
-                  fontStyle: "normal",
-                  lineHeight: 1.43,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-SemiBold"
-              },
-              {
-                name: "body-default",
-                className: "typography-body-default",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "16px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1.5,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: null
-              },
-              {
-                name: "body-default-medium",
-                className: "typography-body-default-medium",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "16px",
-                  fontWeight: 500,
-                  fontStyle: "normal",
-                  lineHeight: 1.5,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-SemiBold"
-              },
-              {
-                name: "body-large",
-                className: "typography-body-large",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "20px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1.58,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: null
-              },
-              {
-                name: "body-large-medium",
-                className: "typography-body-large-medium",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "20px",
-                  fontWeight: 400,
-                  fontStyle: "normal",
-                  lineHeight: 1.2,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-SemiBold"
-              },
-              {
-                name: "heading-large",
-                className: "typography-heading-large",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "20px",
-                  fontWeight: 700,
-                  fontStyle: "normal",
-                  lineHeight: 1.5,
-                  letterSpacing: 0.15,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Bold"
-              },
-              {
-                name: "heading-xl",
-                className: "typography-heading-xl",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "24px",
-                  fontWeight: 700,
-                  fontStyle: "normal",
-                  lineHeight: 1.5,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Bold"
-              },
-              {
-                name: "heading-2xl",
-                className: "typography-heading-2xl",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "34px",
-                  fontWeight: 700,
-                  fontStyle: "normal",
-                  lineHeight: 1.28,
-                  letterSpacing: 0,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Bold"
-              },
-              {
-                name: "heading-3xl",
-                className: "typography-heading-3xl",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "48px",
-                  fontWeight: 700,
-                  fontStyle: "normal",
-                  lineHeight: 1.24,
-                  letterSpacing: -0.48,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Bold"
-              },
-              {
-                name: "heading-4xl",
-                className: "typography-heading-4xl",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "60px",
-                  fontWeight: 700,
-                  fontStyle: "normal",
-                  lineHeight: 1.2,
-                  letterSpacing: -1.5,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Bold"
-              },
-              {
-                name: "heading-5xl",
-                className: "typography-heading-5xl",
-                style: {
-                  fontFamily: "Inter",
-                  fontSize: "76px",
-                  fontWeight: 700,
-                  fontStyle: "normal",
-                  lineHeight: 1.2,
-                  letterSpacing: -1.98,
-                  textTransform: "none"
-                },
-                fontPostScriptName: "Inter-Bold"
-              }
-            ]
-          },
-          elevations: {
-            "24dp": "0px 24px 48px rgba(90, 91, 106, 0.08), 0px 12px 24px rgba(58, 58, 68, 0.08)",
-            "16dp": "0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12)",
-            "8dp": "0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16)",
-            "4dp": "0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20)",
-            "2dp": "0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24)"
-          },
-          spacing: {
-            layout01: {
-              px: 16,
-              rem: 1
-            },
-            layout02: {
-              px: 24,
-              rem: 1.5
-            },
-            layout03: {
-              px: 32,
-              rem: 2
-            },
-            layout04: {
-              px: 48,
-              rem: 3
-            },
-            layout05: {
-              px: 64,
-              rem: 4
-            },
-            layout06: {
-              px: 96,
-              rem: 6
-            },
-            layout07: {
-              px: 160,
-              rem: 10
-            },
-            spacing01: {
-              px: 2,
-              rem: 0.125
-            },
-            spacing02: {
-              px: 4,
-              rem: 0.25
-            },
-            spacing03: {
-              px: 8,
-              rem: 0.5
-            },
-            spacing04: {
-              px: 12,
-              rem: 0.75
-            },
-            spacing05: {
-              px: 16,
-              rem: 1
-            },
-            spacing06: {
-              px: 24,
-              rem: 1.5
-            },
-            spacing07: {
-              px: 32,
-              rem: 2
-            },
-            spacing08: {
-              px: 40,
-              rem: 2.5
-            },
-            spacing09: {
-              px: 48,
-              rem: 3
-            }
-          }
-        },
         aiven: {
           colors: {
             "error-100": "#aa0000",
@@ -7078,7 +6518,6 @@ var import_react27 = __toESM(require("react"));
 
 // src/molecules/Badge/Badge.tsx
 var import_react25 = __toESM(require("react"));
-var import_omit = __toESM(require("lodash/omit"));
 
 // src/molecules/Skeleton/Skeleton.tsx
 var import_react24 = __toESM(require("react"));
@@ -7113,14 +6552,11 @@ var Skeleton = ({
 };
 
 // src/molecules/Badge/Badge.tsx
-var isChipBadgeProps = (props) => "dense" in props;
 var createBadge = (type, displayName) => {
   const Component = (props) => {
-    var _b;
-    const _a = props, { kind = "filled", value, textClassname } = _a, rest = __objRest(_a, ["kind", "value", "textClassname"]);
+    const _a = props, { kind = "filled", value, textClassname, dense = false } = _a, rest = __objRest(_a, ["kind", "value", "textClassname", "dense"]);
     const valueStr = value.toString();
-    const dense = isChipBadgeProps(props) ? (_b = props.dense) != null ? _b : false : false;
-    return /* @__PURE__ */ import_react25.default.createElement("span", __spreadProps(__spreadValues({}, (0, import_omit.default)(rest, "dense")), {
+    return /* @__PURE__ */ import_react25.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
       className: classNames(
         tw("inline-block text-center", {
           "rounded-full": type === "default" || type === "chip",
@@ -7167,9 +6603,19 @@ var NotificationBadge = ({
     className: tw("absolute rounded-full w-[6px] h-[6px] bg-error-70")
   }));
 };
+var DotBadge = ({ dense = false }) => {
+  return /* @__PURE__ */ import_react25.default.createElement("span", {
+    className: tw("rounded-full bg-current", {
+      "w-[6px] h-[6px]": dense,
+      "w-[9px] h-[9px]": !dense
+    })
+  });
+};
 var Badge = createBadge("default", "Badge");
 Badge.Notification = NotificationBadge;
 Badge.Notification.displayName = "Badge.Notification";
+Badge.Dot = DotBadge;
+Badge.Dot.displayName = "Badge.Dot";
 var TabBadge = createBadge("tab", "TabBadge");
 var ChipBadge = createBadge("chip", "ChipBadge");
 
@@ -7493,6 +6939,7 @@ var GridComponent = Tailwindify(
   }
 );
 Grid.Item = GridItem;
+Grid.Item.displayName = "Grid.Item";
 
 // src/atoms/InputGroup/InputGroup.tsx
 var gridColumnStyles = {