@aivenio/aquarium 2.3.1 → 2.4.0

package/dist/system.cjs

@@ -6093,6 +6093,61 @@ var tokens_default = {
       intense: "rgba(197,0,1,1)"
     }
   },
+  chartColors: {
+    default: "rgba(180, 180, 187, 1)",
+    primaryCategorical: {
+      "0": "rgba(88, 101, 205, 1)",
+      "1": "rgba(255, 53, 84, 1)",
+      "2": "rgba(40, 180, 244, 1)",
+      "3": "rgba(249, 106, 2, 1)",
+      "4": "rgba(0, 179, 0, 1)",
+      "5": "rgba(255, 193, 7, 1)"
+    },
+    secondaryCategorical: {
+      "0": "rgba(53, 69, 190, 1)",
+      "1": "rgba(253, 159, 0, 1)",
+      "2": "rgba(255, 53, 84, 1)",
+      "3": "rgba(0, 179, 0, 1)",
+      "4": "rgba(243, 88, 13, 1)",
+      "5": "rgba(3, 153, 227, 1)",
+      "6": "rgba(231, 0, 0, 1)",
+      "7": "rgba(34, 47, 149, 1)",
+      "8": "rgba(255, 144, 3, 1)",
+      "9": "rgba(228, 26, 74, 1)",
+      "10": "rgba(0, 159, 0, 1)",
+      "11": "rgba(235, 70, 16, 1)",
+      "12": "rgba(1, 116, 186, 1)",
+      "13": "rgba(197, 0, 1, 1)",
+      "14": "rgba(225, 29, 22, 1)",
+      "15": "rgba(170, 0, 0, 1)",
+      "16": "rgba(2, 86, 154, 1)",
+      "17": "rgba(167, 0, 69, 1)",
+      "18": "rgba(0, 111, 0, 1)",
+      "19": "rgba(254, 109, 0, 1)",
+      "20": "rgba(14, 22, 82, 1)",
+      "21": "rgba(88, 101, 205, 1)",
+      "22": "rgba(255, 179, 0, 1)",
+      "23": "rgba(255, 82, 117, 1)",
+      "24": "rgba(0, 195, 0, 1)",
+      "25": "rgba(249, 106, 2, 1)",
+      "26": "rgba(40, 180, 244, 1)",
+      "27": "rgba(230, 39, 40, 1)",
+      "28": "rgba(129, 142, 236, 1)",
+      "29": "rgba(255, 193, 7, 1)",
+      "30": "rgba(255, 111, 148, 1)",
+      "31": "rgba(96, 219, 87, 1)",
+      "32": "rgba(252, 135, 26, 1)",
+      "33": "rgba(127, 209, 247, 1)",
+      "34": "rgba(224, 80, 79, 1)",
+      "35": "rgba(185, 197, 239, 1)",
+      "36": "rgba(253, 212, 77, 1)",
+      "37": "rgba(255, 169, 201, 1)",
+      "38": "rgba(137, 235, 128, 1)",
+      "39": "rgba(250, 178, 110, 1)",
+      "40": "rgba(180, 229, 251, 1)",
+      "41": "rgba(255, 173, 179, 1)"
+    }
+  },
   colors: {
     white: "white",
     black: "black",
@@ -13363,7 +13418,19 @@ var Popover2 = (_a) => {
 
 // src/molecules/DatePicker/DatePicker.tsx
 var createDatePickerBase = (variant) => (_a) => {
-  var _b = _a, { disabled, valid, granularity, shouldCloseOnSelect } = _b, props = __objRest(_b, ["disabled", "valid", "granularity", "shouldCloseOnSelect"]);
+  var _b = _a, {
+    disabled,
+    valid,
+    granularity,
+    shouldCloseOnSelect,
+    errorMessage
+  } = _b, props = __objRest(_b, [
+    "disabled",
+    "valid",
+    "granularity",
+    "shouldCloseOnSelect",
+    "errorMessage"
+  ]);
   var _a2, _b2;
   const hasSomeValue = (_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : props.placeholderValue;
   return /* @__PURE__ */ import_react91.default.createElement(import_react_aria_components8.DatePicker, __spreadProps(__spreadValues({}, props), {
@@ -13378,12 +13445,15 @@ var createDatePickerBase = (variant) => (_a) => {
   }), /* @__PURE__ */ import_react91.default.createElement(Button2, null, /* @__PURE__ */ import_react91.default.createElement(Icon, {
     icon: import_calendar2.default
   }))), /* @__PURE__ */ import_react91.default.createElement(Popover2, {
-    offset: 1
+    offset: 0
   }, /* @__PURE__ */ import_react91.default.createElement(Dialog, null, /* @__PURE__ */ import_react91.default.createElement(Spacing, {
-    gap: "6"
+    gap: "3"
   }, /* @__PURE__ */ import_react91.default.createElement(Calendar, null), variant === "datetime" && /* @__PURE__ */ import_react91.default.createElement(PickerTimeField, {
     granularity
-  })))));
+  }), errorMessage && /* @__PURE__ */ import_react91.default.createElement(import_react_aria_components8.Text, {
+    slot: "errorMessage",
+    className: tw("typography-caption text-danger-default max-w-[300px]")
+  }, errorMessage)))));
 };
 var DatePickerBase = createDatePickerBase("date");
 var DateTimePickerBase = createDatePickerBase("datetime");
@@ -13398,10 +13468,11 @@ var PickerTimeField = ({ granularity }) => {
   });
 };
 var createDatePicker = (variant) => (props) => {
+  var _a;
   const { labelProps, fieldProps } = (0, import_label2.useLabel)({ label: props.labelText });
   const errorMessageId = (0, import_utils24.useId)();
-  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
-  const _a = getLabelControlProps(props), { "data-testid": dataTestId } = _a, labelControlProps = __objRest(_a, ["data-testid"]);
+  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": (_a = props.helperText) != null ? _a : props.error } : {};
+  const _b = getLabelControlProps(props), { "data-testid": dataTestId } = _b, labelControlProps = __objRest(_b, ["data-testid"]);
   const baseProps = (0, import_omit9.default)(props, Object.keys(labelControlProps));
   const allProps = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, baseProps), fieldProps), errorProps), { disabled: props.disabled, valid: props.valid });
   return /* @__PURE__ */ import_react91.default.createElement(LabelControl, __spreadProps(__spreadValues(__spreadValues({}, labelProps), labelControlProps), {
@@ -13474,12 +13545,14 @@ var createDateRangePickerBase = (variant) => (_a) => {
     disabled,
     valid,
     granularity,
-    shouldCloseOnSelect
+    shouldCloseOnSelect,
+    errorMessage
   } = _b, props = __objRest(_b, [
     "disabled",
     "valid",
     "granularity",
-    "shouldCloseOnSelect"
+    "shouldCloseOnSelect",
+    "errorMessage"
   ]);
   var _a2, _b2;
   const hasSomeValue = (_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : props.placeholderValue;
@@ -13502,8 +13575,10 @@ var createDateRangePickerBase = (variant) => (_a) => {
     className: tw("flex-1 px-2 py-1")
   }), /* @__PURE__ */ import_react93.default.createElement(Button2, null, /* @__PURE__ */ import_react93.default.createElement(Icon, {
     icon: import_calendar3.default
-  }))), /* @__PURE__ */ import_react93.default.createElement(Popover2, null, /* @__PURE__ */ import_react93.default.createElement(Dialog, null, /* @__PURE__ */ import_react93.default.createElement(Spacing, {
-    gap: "6"
+  }))), /* @__PURE__ */ import_react93.default.createElement(Popover2, {
+    offset: 0
+  }, /* @__PURE__ */ import_react93.default.createElement(Dialog, null, /* @__PURE__ */ import_react93.default.createElement(Spacing, {
+    gap: "3"
   }, /* @__PURE__ */ import_react93.default.createElement(RangeCalendar, null), variant === "datetime" && /* @__PURE__ */ import_react93.default.createElement(Spacing, {
     gap: "6",
     row: true
@@ -13513,7 +13588,10 @@ var createDateRangePickerBase = (variant) => (_a) => {
   }), /* @__PURE__ */ import_react93.default.createElement(PickerTimeField2, {
     granularity,
     part: "end"
-  }))))));
+  })), errorMessage && /* @__PURE__ */ import_react93.default.createElement(import_react_aria_components10.Text, {
+    slot: "errorMessage",
+    className: tw("typography-caption text-danger-default max-w-[300px]")
+  }, errorMessage)))));
 };
 var PickerTimeField2 = ({ granularity, part }) => {
   var _a;
@@ -13529,10 +13607,11 @@ var PickerTimeField2 = ({ granularity, part }) => {
 var DateRangePickerBase = createDateRangePickerBase("date");
 var DateTimeRangePickerBase = createDateRangePickerBase("datetime");
 var createDateRangePicker = (variant) => (props) => {
+  var _a;
   const { labelProps, fieldProps } = (0, import_label3.useLabel)({ label: props.labelText });
   const errorMessageId = (0, import_utils26.useId)();
-  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
-  const _a = getLabelControlProps(props), { "data-testid": dataTestId } = _a, labelControlProps = __objRest(_a, ["data-testid"]);
+  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": (_a = props.helperText) != null ? _a : props.error } : {};
+  const _b = getLabelControlProps(props), { "data-testid": dataTestId } = _b, labelControlProps = __objRest(_b, ["data-testid"]);
   const baseProps = (0, import_omit10.default)(props, Object.keys(labelControlProps));
   const allProps = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, baseProps), fieldProps), errorProps), { disabled: props.disabled, valid: props.valid });
   return /* @__PURE__ */ import_react93.default.createElement(LabelControl, __spreadProps(__spreadValues(__spreadValues({}, labelProps), labelControlProps), {

package/dist/system.mjs

@@ -5930,6 +5930,61 @@ var tokens_default = {
       intense: "rgba(197,0,1,1)"
     }
   },
+  chartColors: {
+    default: "rgba(180, 180, 187, 1)",
+    primaryCategorical: {
+      "0": "rgba(88, 101, 205, 1)",
+      "1": "rgba(255, 53, 84, 1)",
+      "2": "rgba(40, 180, 244, 1)",
+      "3": "rgba(249, 106, 2, 1)",
+      "4": "rgba(0, 179, 0, 1)",
+      "5": "rgba(255, 193, 7, 1)"
+    },
+    secondaryCategorical: {
+      "0": "rgba(53, 69, 190, 1)",
+      "1": "rgba(253, 159, 0, 1)",
+      "2": "rgba(255, 53, 84, 1)",
+      "3": "rgba(0, 179, 0, 1)",
+      "4": "rgba(243, 88, 13, 1)",
+      "5": "rgba(3, 153, 227, 1)",
+      "6": "rgba(231, 0, 0, 1)",
+      "7": "rgba(34, 47, 149, 1)",
+      "8": "rgba(255, 144, 3, 1)",
+      "9": "rgba(228, 26, 74, 1)",
+      "10": "rgba(0, 159, 0, 1)",
+      "11": "rgba(235, 70, 16, 1)",
+      "12": "rgba(1, 116, 186, 1)",
+      "13": "rgba(197, 0, 1, 1)",
+      "14": "rgba(225, 29, 22, 1)",
+      "15": "rgba(170, 0, 0, 1)",
+      "16": "rgba(2, 86, 154, 1)",
+      "17": "rgba(167, 0, 69, 1)",
+      "18": "rgba(0, 111, 0, 1)",
+      "19": "rgba(254, 109, 0, 1)",
+      "20": "rgba(14, 22, 82, 1)",
+      "21": "rgba(88, 101, 205, 1)",
+      "22": "rgba(255, 179, 0, 1)",
+      "23": "rgba(255, 82, 117, 1)",
+      "24": "rgba(0, 195, 0, 1)",
+      "25": "rgba(249, 106, 2, 1)",
+      "26": "rgba(40, 180, 244, 1)",
+      "27": "rgba(230, 39, 40, 1)",
+      "28": "rgba(129, 142, 236, 1)",
+      "29": "rgba(255, 193, 7, 1)",
+      "30": "rgba(255, 111, 148, 1)",
+      "31": "rgba(96, 219, 87, 1)",
+      "32": "rgba(252, 135, 26, 1)",
+      "33": "rgba(127, 209, 247, 1)",
+      "34": "rgba(224, 80, 79, 1)",
+      "35": "rgba(185, 197, 239, 1)",
+      "36": "rgba(253, 212, 77, 1)",
+      "37": "rgba(255, 169, 201, 1)",
+      "38": "rgba(137, 235, 128, 1)",
+      "39": "rgba(250, 178, 110, 1)",
+      "40": "rgba(180, 229, 251, 1)",
+      "41": "rgba(255, 173, 179, 1)"
+    }
+  },
   colors: {
     white: "white",
     black: "black",
@@ -12988,7 +13043,8 @@ DataTable.Skeleton = DataListSkeleton;
 import React83 from "react";
 import {
   DatePicker as AriaDatePicker,
-  DatePickerStateContext
+  DatePickerStateContext,
+  Text
 } from "react-aria-components";
 import { useLabel as useLabel2 } from "@react-aria/label";
 import { useId as useId10 } from "@react-aria/utils";
@@ -13218,7 +13274,19 @@ var Popover2 = (_a) => {
 
 // src/molecules/DatePicker/DatePicker.tsx
 var createDatePickerBase = (variant) => (_a) => {
-  var _b = _a, { disabled, valid, granularity, shouldCloseOnSelect } = _b, props = __objRest(_b, ["disabled", "valid", "granularity", "shouldCloseOnSelect"]);
+  var _b = _a, {
+    disabled,
+    valid,
+    granularity,
+    shouldCloseOnSelect,
+    errorMessage
+  } = _b, props = __objRest(_b, [
+    "disabled",
+    "valid",
+    "granularity",
+    "shouldCloseOnSelect",
+    "errorMessage"
+  ]);
   var _a2, _b2;
   const hasSomeValue = (_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : props.placeholderValue;
   return /* @__PURE__ */ React83.createElement(AriaDatePicker, __spreadProps(__spreadValues({}, props), {
@@ -13233,12 +13301,15 @@ var createDatePickerBase = (variant) => (_a) => {
   }), /* @__PURE__ */ React83.createElement(Button2, null, /* @__PURE__ */ React83.createElement(Icon, {
     icon: import_calendar2.default
   }))), /* @__PURE__ */ React83.createElement(Popover2, {
-    offset: 1
+    offset: 0
   }, /* @__PURE__ */ React83.createElement(Dialog, null, /* @__PURE__ */ React83.createElement(Spacing, {
-    gap: "6"
+    gap: "3"
   }, /* @__PURE__ */ React83.createElement(Calendar, null), variant === "datetime" && /* @__PURE__ */ React83.createElement(PickerTimeField, {
     granularity
-  })))));
+  }), errorMessage && /* @__PURE__ */ React83.createElement(Text, {
+    slot: "errorMessage",
+    className: tw("typography-caption text-danger-default max-w-[300px]")
+  }, errorMessage)))));
 };
 var DatePickerBase = createDatePickerBase("date");
 var DateTimePickerBase = createDatePickerBase("datetime");
@@ -13253,10 +13324,11 @@ var PickerTimeField = ({ granularity }) => {
   });
 };
 var createDatePicker = (variant) => (props) => {
+  var _a;
   const { labelProps, fieldProps } = useLabel2({ label: props.labelText });
   const errorMessageId = useId10();
-  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
-  const _a = getLabelControlProps(props), { "data-testid": dataTestId } = _a, labelControlProps = __objRest(_a, ["data-testid"]);
+  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": (_a = props.helperText) != null ? _a : props.error } : {};
+  const _b = getLabelControlProps(props), { "data-testid": dataTestId } = _b, labelControlProps = __objRest(_b, ["data-testid"]);
   const baseProps = omit9(props, Object.keys(labelControlProps));
   const allProps = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, baseProps), fieldProps), errorProps), { disabled: props.disabled, valid: props.valid });
   return /* @__PURE__ */ React83.createElement(LabelControl, __spreadProps(__spreadValues(__spreadValues({}, labelProps), labelControlProps), {
@@ -13271,7 +13343,8 @@ var DateTimePicker = createDatePicker("datetime");
 import React85 from "react";
 import {
   DateRangePicker as AriaDateRangePicker,
-  DateRangePickerStateContext
+  DateRangePickerStateContext,
+  Text as Text2
 } from "react-aria-components";
 import { useLabel as useLabel3 } from "@react-aria/label";
 import { useId as useId11 } from "@react-aria/utils";
@@ -13337,12 +13410,14 @@ var createDateRangePickerBase = (variant) => (_a) => {
     disabled,
     valid,
     granularity,
-    shouldCloseOnSelect
+    shouldCloseOnSelect,
+    errorMessage
   } = _b, props = __objRest(_b, [
     "disabled",
     "valid",
     "granularity",
-    "shouldCloseOnSelect"
+    "shouldCloseOnSelect",
+    "errorMessage"
   ]);
   var _a2, _b2;
   const hasSomeValue = (_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : props.placeholderValue;
@@ -13365,8 +13440,10 @@ var createDateRangePickerBase = (variant) => (_a) => {
     className: tw("flex-1 px-2 py-1")
   }), /* @__PURE__ */ React85.createElement(Button2, null, /* @__PURE__ */ React85.createElement(Icon, {
     icon: import_calendar3.default
-  }))), /* @__PURE__ */ React85.createElement(Popover2, null, /* @__PURE__ */ React85.createElement(Dialog, null, /* @__PURE__ */ React85.createElement(Spacing, {
-    gap: "6"
+  }))), /* @__PURE__ */ React85.createElement(Popover2, {
+    offset: 0
+  }, /* @__PURE__ */ React85.createElement(Dialog, null, /* @__PURE__ */ React85.createElement(Spacing, {
+    gap: "3"
   }, /* @__PURE__ */ React85.createElement(RangeCalendar, null), variant === "datetime" && /* @__PURE__ */ React85.createElement(Spacing, {
     gap: "6",
     row: true
@@ -13376,7 +13453,10 @@ var createDateRangePickerBase = (variant) => (_a) => {
   }), /* @__PURE__ */ React85.createElement(PickerTimeField2, {
     granularity,
     part: "end"
-  }))))));
+  })), errorMessage && /* @__PURE__ */ React85.createElement(Text2, {
+    slot: "errorMessage",
+    className: tw("typography-caption text-danger-default max-w-[300px]")
+  }, errorMessage)))));
 };
 var PickerTimeField2 = ({ granularity, part }) => {
   var _a;
@@ -13392,10 +13472,11 @@ var PickerTimeField2 = ({ granularity, part }) => {
 var DateRangePickerBase = createDateRangePickerBase("date");
 var DateTimeRangePickerBase = createDateRangePickerBase("datetime");
 var createDateRangePicker = (variant) => (props) => {
+  var _a;
   const { labelProps, fieldProps } = useLabel3({ label: props.labelText });
   const errorMessageId = useId11();
-  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
-  const _a = getLabelControlProps(props), { "data-testid": dataTestId } = _a, labelControlProps = __objRest(_a, ["data-testid"]);
+  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": (_a = props.helperText) != null ? _a : props.error } : {};
+  const _b = getLabelControlProps(props), { "data-testid": dataTestId } = _b, labelControlProps = __objRest(_b, ["data-testid"]);
   const baseProps = omit10(props, Object.keys(labelControlProps));
   const allProps = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, baseProps), fieldProps), errorProps), { disabled: props.disabled, valid: props.valid });
   return /* @__PURE__ */ React85.createElement(LabelControl, __spreadProps(__spreadValues(__spreadValues({}, labelProps), labelControlProps), {

package/dist/tokens.json

@@ -93,6 +93,61 @@
       "intense": "rgba(197,0,1,1)"
     }
   },
+  "chartColors": {
+    "default": "rgba(180, 180, 187, 1)",
+    "primaryCategorical": {
+      "0": "rgba(88, 101, 205, 1)",
+      "1": "rgba(255, 53, 84, 1)",
+      "2": "rgba(40, 180, 244, 1)",
+      "3": "rgba(249, 106, 2, 1)",
+      "4": "rgba(0, 179, 0, 1)",
+      "5": "rgba(255, 193, 7, 1)"
+    },
+    "secondaryCategorical": {
+      "0": "rgba(53, 69, 190, 1)",
+      "1": "rgba(253, 159, 0, 1)",
+      "2": "rgba(255, 53, 84, 1)",
+      "3": "rgba(0, 179, 0, 1)",
+      "4": "rgba(243, 88, 13, 1)",
+      "5": "rgba(3, 153, 227, 1)",
+      "6": "rgba(231, 0, 0, 1)",
+      "7": "rgba(34, 47, 149, 1)",
+      "8": "rgba(255, 144, 3, 1)",
+      "9": "rgba(228, 26, 74, 1)",
+      "10": "rgba(0, 159, 0, 1)",
+      "11": "rgba(235, 70, 16, 1)",
+      "12": "rgba(1, 116, 186, 1)",
+      "13": "rgba(197, 0, 1, 1)",
+      "14": "rgba(225, 29, 22, 1)",
+      "15": "rgba(170, 0, 0, 1)",
+      "16": "rgba(2, 86, 154, 1)",
+      "17": "rgba(167, 0, 69, 1)",
+      "18": "rgba(0, 111, 0, 1)",
+      "19": "rgba(254, 109, 0, 1)",
+      "20": "rgba(14, 22, 82, 1)",
+      "21": "rgba(88, 101, 205, 1)",
+      "22": "rgba(255, 179, 0, 1)",
+      "23": "rgba(255, 82, 117, 1)",
+      "24": "rgba(0, 195, 0, 1)",
+      "25": "rgba(249, 106, 2, 1)",
+      "26": "rgba(40, 180, 244, 1)",
+      "27": "rgba(230, 39, 40, 1)",
+      "28": "rgba(129, 142, 236, 1)",
+      "29": "rgba(255, 193, 7, 1)",
+      "30": "rgba(255, 111, 148, 1)",
+      "31": "rgba(96, 219, 87, 1)",
+      "32": "rgba(252, 135, 26, 1)",
+      "33": "rgba(127, 209, 247, 1)",
+      "34": "rgba(224, 80, 79, 1)",
+      "35": "rgba(185, 197, 239, 1)",
+      "36": "rgba(253, 212, 77, 1)",
+      "37": "rgba(255, 169, 201, 1)",
+      "38": "rgba(137, 235, 128, 1)",
+      "39": "rgba(250, 178, 110, 1)",
+      "40": "rgba(180, 229, 251, 1)",
+      "41": "rgba(255, 173, 179, 1)"
+    }
+  },
   "colors": {
     "white": "white",
     "black": "black",