@aivenio/aquarium 1.52.2 → 1.54.0

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 24 Jan 2024 07:29:53 GMT
+// Generated on Fri, 02 Feb 2024 13:07:02 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;
@@ -105,6 +105,10 @@ $box-shadow-8dp: 0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58,
 $box-shadow-4dp: 0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20) !default;
 $box-shadow-2dp: 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24) !default;
 $box-shadow-white-inset: inset 0 0 0 3px rgba(255,255,255,1) !default;
+$box-shadow-card-default: 0px 3px 3px rgba(0, 0, 0, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.05) !default;
+$box-shadow-card-hover: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05) !default;
+$box-shadow-card-active: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05) !default;
+$box-shadow-card-checked: 0px -1px 1px 0px rgba(53, 69, 190, 0.05), 0px 3px 3px 0px rgba(53, 69, 190, 0.20) !default;
 $screens-default: 0px !default;
 $screens-xs: 320px !default;
 $screens-sm: 672px !default;

package/dist/atoms.cjs

@@ -5320,6 +5320,7 @@ var Box = (_a) => {
     borderRadius,
     borderWidth,
     justifyContent,
+    justifySelf,
     alignContent,
     alignItems,
     alignSelf,
@@ -5360,6 +5361,7 @@ var Box = (_a) => {
     "borderRadius",
     "borderWidth",
     "justifyContent",
+    "justifySelf",
     "alignContent",
     "alignItems",
     "alignSelf",
@@ -5402,6 +5404,7 @@ var Box = (_a) => {
     borderRadius,
     borderWidth,
     justifyContent,
+    justifySelf,
     alignContent,
     alignItems,
     alignSelf,
@@ -6837,16 +6840,43 @@ var LineClamp = import_react22.default.forwardRef(
 // src/atoms/Card/Card.tsx
 var Card = import_react23.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { disabled, fullWidth, enableMinWidth = true, clickable, className, children } = _b, rest = __objRest(_b, ["disabled", "fullWidth", "enableMinWidth", "clickable", "className", "children"]);
+    var _b = _a, {
+      disabled,
+      clickable: _clickable,
+      fullWidth,
+      enableMinWidth = true,
+      checked = false,
+      className,
+      children,
+      role = _clickable ? "button" : void 0,
+      modality
+    } = _b, rest = __objRest(_b, [
+      "disabled",
+      "clickable",
+      "fullWidth",
+      "enableMinWidth",
+      "checked",
+      "className",
+      "children",
+      "role",
+      "modality"
+    ]);
+    const clickable = Boolean(role !== void 0 && !disabled);
+    const checkable = role === "checkbox" || role === "radio";
     return /* @__PURE__ */ import_react23.default.createElement("div", __spreadProps(__spreadValues({
-      ref
+      ref,
+      role,
+      "aria-checked": checkable ? checked : void 0
     }, rest), {
       className: classNames(
-        tw("border-grey-5 border-[1px] rounded-[2px] relative p-5 flex flex-col gap-5", {
+        tw("border-[1px] rounded-[2px] relative p-5 flex flex-col gap-5 bg-white outline-none shadow-card-default", {
           "w-[280px]": !fullWidth,
           "w-full": Boolean(fullWidth),
+          "border-grey-5": !checked,
+          "border-primary-80 shadow-card-checked": checked,
           "min-w-[280px]": Boolean(fullWidth) && Boolean(enableMinWidth),
-          "active:bg-grey-5 cursor-pointer hover:border-grey-50 focusable": Boolean(clickable && !disabled),
+          "cursor-pointer hover:bg-primary-5 hover:shadow-card-hover active:bg-white active:shadow-card-active": clickable,
+          "focusable": clickable && modality === "keyboard",
           "bg-grey-0 cursor-not-allowed focus:border-transparent": Boolean(disabled)
         }),
         className
@@ -7140,10 +7170,10 @@ var ChipBadge = createBadge("chip", "ChipBadge");
 var import_tick3 = __toESM(require_tick());
 var DropdownMenu = import_react28.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
+    var _b = _a, { minHeight, maxHeight = "100%", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["minHeight", "maxHeight", "minWidth", "maxWidth", "className", "children"]);
     return /* @__PURE__ */ import_react28.default.createElement("div", __spreadValues({
       ref,
-      style: { maxHeight, minWidth, maxWidth },
+      style: { minHeight, maxHeight, minWidth, maxWidth },
       className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-grey-70")
     }, props), children);
   }

package/dist/atoms.mjs

@@ -5277,6 +5277,7 @@ var Box = (_a) => {
     borderRadius,
     borderWidth,
     justifyContent,
+    justifySelf,
     alignContent,
     alignItems,
     alignSelf,
@@ -5317,6 +5318,7 @@ var Box = (_a) => {
     "borderRadius",
     "borderWidth",
     "justifyContent",
+    "justifySelf",
     "alignContent",
     "alignItems",
     "alignSelf",
@@ -5359,6 +5361,7 @@ var Box = (_a) => {
     borderRadius,
     borderWidth,
     justifyContent,
+    justifySelf,
     alignContent,
     alignItems,
     alignSelf,
@@ -6797,16 +6800,43 @@ var LineClamp = React18.forwardRef(
 // src/atoms/Card/Card.tsx
 var Card = React19.forwardRef(
   (_a, ref) => {
-    var _b = _a, { disabled, fullWidth, enableMinWidth = true, clickable, className, children } = _b, rest = __objRest(_b, ["disabled", "fullWidth", "enableMinWidth", "clickable", "className", "children"]);
+    var _b = _a, {
+      disabled,
+      clickable: _clickable,
+      fullWidth,
+      enableMinWidth = true,
+      checked = false,
+      className,
+      children,
+      role = _clickable ? "button" : void 0,
+      modality
+    } = _b, rest = __objRest(_b, [
+      "disabled",
+      "clickable",
+      "fullWidth",
+      "enableMinWidth",
+      "checked",
+      "className",
+      "children",
+      "role",
+      "modality"
+    ]);
+    const clickable = Boolean(role !== void 0 && !disabled);
+    const checkable = role === "checkbox" || role === "radio";
     return /* @__PURE__ */ React19.createElement("div", __spreadProps(__spreadValues({
-      ref
+      ref,
+      role,
+      "aria-checked": checkable ? checked : void 0
     }, rest), {
       className: classNames(
-        tw("border-grey-5 border-[1px] rounded-[2px] relative p-5 flex flex-col gap-5", {
+        tw("border-[1px] rounded-[2px] relative p-5 flex flex-col gap-5 bg-white outline-none shadow-card-default", {
           "w-[280px]": !fullWidth,
           "w-full": Boolean(fullWidth),
+          "border-grey-5": !checked,
+          "border-primary-80 shadow-card-checked": checked,
           "min-w-[280px]": Boolean(fullWidth) && Boolean(enableMinWidth),
-          "active:bg-grey-5 cursor-pointer hover:border-grey-50 focusable": Boolean(clickable && !disabled),
+          "cursor-pointer hover:bg-primary-5 hover:shadow-card-hover active:bg-white active:shadow-card-active": clickable,
+          "focusable": clickable && modality === "keyboard",
           "bg-grey-0 cursor-not-allowed focus:border-transparent": Boolean(disabled)
         }),
         className
@@ -7100,10 +7130,10 @@ var ChipBadge = createBadge("chip", "ChipBadge");
 var import_tick3 = __toESM(require_tick());
 var DropdownMenu = React24.forwardRef(
   (_a, ref) => {
-    var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
+    var _b = _a, { minHeight, maxHeight = "100%", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["minHeight", "maxHeight", "minWidth", "maxWidth", "className", "children"]);
     return /* @__PURE__ */ React24.createElement("div", __spreadValues({
       ref,
-      style: { maxHeight, minWidth, maxWidth },
+      style: { minHeight, maxHeight, minWidth, maxWidth },
       className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-grey-70")
     }, props), children);
   }

package/dist/charts.cjs

@@ -64,6 +64,8 @@ __export(charts_exports, {
   Cell: () => import_recharts7.Cell,
   Doughnut: () => Doughnut,
   DoughnutChart: () => DoughnutChart,
+  Label: () => Label,
+  LabelList: () => LabelList,
   Legend: () => Legend,
   Line: () => Line,
   LineChart: () => LineChart,
@@ -2213,11 +2215,32 @@ BarChart.Tooltip = Tooltip;
 var import_recharts7 = require("recharts");
 var import_recharts8 = require("recharts");
 
-// src/charts/Legend/Legend.tsx
+// src/charts/Label/Label.tsx
 var import_react6 = __toESM(require("react"));
 var import_recharts9 = require("recharts");
-var Legend = import_react6.default.forwardRef((props, _ref) => {
-  return /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Legend, __spreadProps(__spreadValues({}, props), {
+var XLabel = Object.assign((props) => /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Label, __spreadValues({
+  position: "insideBottom",
+  offset: -3
+}, props)), import_recharts9.Label);
+var YLabel = Object.assign(
+  (props) => /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Label, __spreadValues({
+    position: "insideLeft",
+    angle: -90,
+    offset: 10
+  }, props)),
+  import_recharts9.Label
+);
+var Label = {
+  XLabel,
+  YLabel
+};
+var LabelList = import_recharts9.LabelList;
+
+// src/charts/Legend/Legend.tsx
+var import_react7 = __toESM(require("react"));
+var import_recharts10 = require("recharts");
+var Legend = import_react7.default.forwardRef((props, _ref) => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_recharts10.Legend, __spreadProps(__spreadValues({}, props), {
     margin: __spreadProps(__spreadValues({}, props.margin), { top: 0 })
   }));
 });
@@ -2232,10 +2255,10 @@ Legend.defaultProps = {
 };
 
 // src/charts/LineChart/LineChart.tsx
-var import_react7 = __toESM(require("react"));
-var import_recharts10 = require("recharts");
+var import_react8 = __toESM(require("react"));
+var import_recharts11 = require("recharts");
 var renderChildren2 = (props) => {
-  return import_react7.default.Children.map(props.children, (child) => {
+  return import_react8.default.Children.map(props.children, (child) => {
     switch (getDisplayName(child.type)) {
       case Axis.XAxis.displayName: {
         return renderXAxis(child, props);
@@ -2254,10 +2277,10 @@ var renderChildren2 = (props) => {
 };
 var LineChart = (props) => {
   const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
-  return /* @__PURE__ */ import_react7.default.createElement(ResponsiveContainer, {
+  return /* @__PURE__ */ import_react8.default.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react7.default.createElement(import_recharts10.LineChart, {
+  }, /* @__PURE__ */ import_react8.default.createElement(import_recharts11.LineChart, {
     data: props.data,
     style: { stroke: "#fff", strokeWidth: 1 },
     margin: {
@@ -2267,27 +2290,27 @@ var LineChart = (props) => {
       bottom: 5
     },
     accessibilityLayer: tooltip !== void 0
-  }, /* @__PURE__ */ import_react7.default.createElement(CartesianGrid, null), renderChildren2(props)));
+  }, /* @__PURE__ */ import_react8.default.createElement(CartesianGrid, null), renderChildren2(props)));
 };
 var Line = Object.assign(
-  (props) => /* @__PURE__ */ import_react7.default.createElement(import_recharts10.Line, __spreadProps(__spreadValues({
+  (props) => /* @__PURE__ */ import_react8.default.createElement(import_recharts11.Line, __spreadProps(__spreadValues({
     type: "monotone"
   }, props), {
     strokeWidth: 2,
     isAnimationActive: false,
     dot: false
   })),
-  import_recharts10.Line
+  import_recharts11.Line
 );
 LineChart.Line = Line;
 
 // src/charts/PieChart/DoughnutChart.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_isNil = __toESM(require("lodash/isNil"));
-var import_recharts12 = require("recharts");
+var import_recharts13 = require("recharts");
 
 // src/charts/PieChart/ChartValue.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 
 // src/utils/tailwind.ts
 var import_classnames = __toESM(require("classnames"));
@@ -2314,21 +2337,21 @@ function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, class
 // src/charts/PieChart/ChartValue.tsx
 var ChartValue = (props) => {
   const { value, unit: unit2, caption } = props;
-  return /* @__PURE__ */ import_react8.default.createElement("p", {
+  return /* @__PURE__ */ import_react9.default.createElement("p", {
     className: tw(
       "typography-large-heading text-grey-90 text-center leading-tight absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
     )
-  }, value, unit2, caption && /* @__PURE__ */ import_react8.default.createElement("span", {
+  }, value, unit2, caption && /* @__PURE__ */ import_react9.default.createElement("span", {
     className: tw("block", "typography-small text-grey-60")
   }, caption));
 };
 
 // src/charts/PieChart/renderPieChildren.tsx
-var import_react10 = __toESM(require("react"));
-var import_recharts11 = require("recharts");
+var import_react11 = __toESM(require("react"));
+var import_recharts12 = require("recharts");
 
 // src/charts/PieChart/TooltipContentWrapper.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_isFunction = __toESM(require("lodash/isFunction"));
 var TooltipContentWrapper = (_a) => {
   var _b = _a, {
@@ -2344,28 +2367,28 @@ var TooltipContentWrapper = (_a) => {
     });
   });
   const propsWithPayload = __spreadProps(__spreadValues({}, props), { payload });
-  if (import_react9.default.isValidElement(content)) {
-    return import_react9.default.cloneElement(content, propsWithPayload);
+  if (import_react10.default.isValidElement(content)) {
+    return import_react10.default.cloneElement(content, propsWithPayload);
   }
   if ((0, import_isFunction.default)(content)) {
-    return import_react9.default.createElement(content, propsWithPayload);
+    return import_react10.default.createElement(content, propsWithPayload);
   }
-  return /* @__PURE__ */ import_react9.default.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react10.default.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
     payload
   }));
 };
 
 // src/charts/PieChart/renderPieChildren.tsx
 var renderPieChildren = (children) => {
-  return import_react10.default.Children.map(children, (child) => {
+  return import_react11.default.Children.map(children, (child) => {
     switch (getDisplayName(child.type)) {
       case Tooltip.displayName: {
-        return import_react10.default.cloneElement(child, { content: /* @__PURE__ */ import_react10.default.createElement(TooltipContentWrapper, {
+        return import_react11.default.cloneElement(child, { content: /* @__PURE__ */ import_react11.default.createElement(TooltipContentWrapper, {
           content: child.props.content
         }) });
       }
-      case import_recharts11.Legend.displayName: {
-        return import_react10.default.cloneElement(child, { verticalAlign: "top", align: "center" });
+      case import_recharts12.Legend.displayName: {
+        return import_react11.default.cloneElement(child, { verticalAlign: "top", align: "center" });
       }
       default: {
         return child;
@@ -2377,9 +2400,9 @@ var renderPieChildren = (children) => {
 // src/charts/PieChart/DoughnutChart.tsx
 var refSize = 300;
 var DoughnutChart = (props) => {
-  const [containerWidth, setContainerWidth] = import_react11.default.useState(0);
-  const [containerHeight, setContainerHeight] = import_react11.default.useState(0);
-  const [activeIndex, setActiveIndex] = import_react11.default.useState(null);
+  const [containerWidth, setContainerWidth] = import_react12.default.useState(0);
+  const [containerHeight, setContainerHeight] = import_react12.default.useState(0);
+  const [activeIndex, setActiveIndex] = import_react12.default.useState(null);
   const [chartValue, _children] = extractChildByDisplayName(props.children, ChartValue.displayName);
   const [pie, children] = extractChildByDisplayName(_children, DoughnutChart.Doughnut.displayName);
   const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
@@ -2402,7 +2425,7 @@ var DoughnutChart = (props) => {
     const yMargin = (containerHeight - refSize * scale) / 2;
     const x = cx - refSize / 2 * scale;
     const y = (yOffset + yMargin) / scale;
-    return /* @__PURE__ */ import_react11.default.createElement("foreignObject", {
+    return /* @__PURE__ */ import_react12.default.createElement("foreignObject", {
       width: refSize,
       height: refSize,
       x,
@@ -2411,13 +2434,13 @@ var DoughnutChart = (props) => {
     }, chartValue);
   };
   const highlightActive = activeIndex !== null && tooltip;
-  return /* @__PURE__ */ import_react11.default.createElement(ResponsiveContainer, {
+  return /* @__PURE__ */ import_react12.default.createElement(ResponsiveContainer, {
     onResize,
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react11.default.createElement(import_recharts12.PieChart, null, chartValue && /* @__PURE__ */ import_react11.default.createElement(import_recharts12.Customized, {
+  }, /* @__PURE__ */ import_react12.default.createElement(import_recharts13.PieChart, null, chartValue && /* @__PURE__ */ import_react12.default.createElement(import_recharts13.Customized, {
     component: renderChartValue
-  }), pie && /* @__PURE__ */ import_react11.default.createElement(import_recharts12.Pie, __spreadProps(__spreadValues({}, pie.props), {
+  }), pie && /* @__PURE__ */ import_react12.default.createElement(import_recharts13.Pie, __spreadProps(__spreadValues({}, pie.props), {
     onMouseEnter: (_, index) => setActiveIndex(index),
     onMouseLeave: () => setActiveIndex(null),
     activeIndex,
@@ -2425,53 +2448,53 @@ var DoughnutChart = (props) => {
     activeShape: { className: highlightActive ? "active" : void 0 }
   })), renderPieChildren(children)));
 };
-var Doughnut = Object.assign((props) => /* @__PURE__ */ import_react11.default.createElement(import_recharts12.Pie, __spreadValues({}, props)), import_recharts12.Pie);
-Doughnut.defaultProps = Object.assign({}, import_recharts12.Pie.defaultProps, {
+var Doughnut = Object.assign((props) => /* @__PURE__ */ import_react12.default.createElement(import_recharts13.Pie, __spreadValues({}, props)), import_recharts13.Pie);
+Doughnut.defaultProps = Object.assign({}, import_recharts13.Pie.defaultProps, {
   isAnimationActive: false,
   innerRadius: "60%",
   outerRadius: "80%"
 });
 DoughnutChart.Doughnut = Doughnut;
 DoughnutChart.ChartValue = ChartValue;
-DoughnutChart.Cell = import_recharts12.Cell;
+DoughnutChart.Cell = import_recharts13.Cell;
 
 // src/charts/PieChart/PieChart.tsx
-var import_react12 = __toESM(require("react"));
-var import_recharts13 = require("recharts");
+var import_react13 = __toESM(require("react"));
+var import_recharts14 = require("recharts");
 var PieChart = (props) => {
-  return /* @__PURE__ */ import_react12.default.createElement(ResponsiveContainer, {
+  return /* @__PURE__ */ import_react13.default.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react12.default.createElement(import_recharts13.PieChart, {
+  }, /* @__PURE__ */ import_react13.default.createElement(import_recharts14.PieChart, {
     width: 500,
     height: 500
   }, renderPieChildren(props.children)));
 };
-var Pie = Object.assign((props) => /* @__PURE__ */ import_react12.default.createElement(import_recharts13.Pie, __spreadValues({}, props)), import_recharts13.Pie);
-Pie.defaultProps = Object.assign({}, import_recharts13.Pie.defaultProps, {
+var Pie = Object.assign((props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts14.Pie, __spreadValues({}, props)), import_recharts14.Pie);
+Pie.defaultProps = Object.assign({}, import_recharts14.Pie.defaultProps, {
   isAnimationActive: false,
   innerRadius: 0,
   outerRadius: "80%"
 });
 PieChart.Pie = Pie;
-PieChart.Cell = import_recharts13.Cell;
+PieChart.Cell = import_recharts14.Cell;
 
 // src/charts/Reference/Reference.tsx
-var import_react13 = __toESM(require("react"));
-var import_recharts14 = require("recharts");
+var import_react14 = __toESM(require("react"));
+var import_recharts15 = require("recharts");
 var ReferenceLine = Object.assign(
-  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts14.ReferenceLine, __spreadProps(__spreadValues({}, props), {
+  (props) => /* @__PURE__ */ import_react14.default.createElement(import_recharts15.ReferenceLine, __spreadProps(__spreadValues({}, props), {
     strokeDasharray: "9 3",
     strokeWidth: 2
   })),
-  import_recharts14.ReferenceLine
+  import_recharts15.ReferenceLine
 );
 var ReferenceArea = Object.assign(
-  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts14.ReferenceArea, __spreadProps(__spreadValues({}, props), {
+  (props) => /* @__PURE__ */ import_react14.default.createElement(import_recharts15.ReferenceArea, __spreadProps(__spreadValues({}, props), {
     strokeWidth: 0,
     fillOpacity: 0.1
   })),
-  import_recharts14.ReferenceLine
+  import_recharts15.ReferenceLine
 );
 var Reference = {
   Line: ReferenceLine,
@@ -2488,6 +2511,8 @@ var Reference = {
   Cell,
   Doughnut,
   DoughnutChart,
+  Label,
+  LabelList,
   Legend,
   Line,
   LineChart,