@aivenio/aquarium 1.4.0 → 1.4.1

package/dist/styles_timescaledb.css

@@ -697,6 +697,12 @@ input[type='number'].no-arrows {
   top: 0 !important;
   bottom: 0 !important;
 }
+.top-0 {
+  top: 0 !important;
+}
+.right-0 {
+  right: 0 !important;
+}
 .top-\[20px\] {
   top: 20px !important;
 }
@@ -715,18 +721,12 @@ input[type='number'].no-arrows {
 .left-2 {
   left: 4px !important;
 }
-.top-0 {
-  top: 0 !important;
-}
 .left-1\/2 {
   left: 50% !important;
 }
 .bottom-0 {
   bottom: 0 !important;
 }
-.right-0 {
-  right: 0 !important;
-}
 .left-0 {
   left: 0 !important;
 }
@@ -884,9 +884,6 @@ input[type='number'].no-arrows {
 .h-\[20px\] {
   height: 20px !important;
 }
-.h-0 {
-  height: 0 !important;
-}
 .h-5 {
   height: 16px !important;
 }
@@ -959,9 +956,6 @@ input[type='number'].no-arrows {
 .w-full {
   width: 100% !important;
 }
-.w-0 {
-  width: 0 !important;
-}
 .w-5 {
   width: 16px !important;
 }
@@ -1295,6 +1289,9 @@ input[type='number'].no-arrows {
   --tw-border-opacity: 1 !important;
   border-color: rgb(237 237 240 / var(--tw-border-opacity)) !important;
 }
+.border-transparent {
+  border-color: transparent !important;
+}
 .border-grey-10 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(225 225 227 / var(--tw-border-opacity)) !important;
@@ -1322,9 +1319,6 @@ input[type='number'].no-arrows {
 .border-current {
   border-color: currentColor !important;
 }
-.border-transparent {
-  border-color: transparent !important;
-}
 .border-grey-100 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(25 25 29 / var(--tw-border-opacity)) !important;
@@ -1361,14 +1355,14 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
 }
-.bg-grey-5 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(237 237 240 / var(--tw-bg-opacity)) !important;
-}
 .bg-navyBlue-100 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
 }
+.bg-grey-5 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(237 237 240 / var(--tw-bg-opacity)) !important;
+}
 .bg-info-50 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(40 180 244 / var(--tw-bg-opacity)) !important;
@@ -1456,12 +1450,15 @@ input[type='number'].no-arrows {
 .p-6 {
   padding: 24px !important;
 }
-.p-\[3px\] {
-  padding: 3px !important;
+.p-\[2px\] {
+  padding: 2px !important;
 }
 .p-3 {
   padding: 8px !important;
 }
+.p-\[3px\] {
+  padding: 3px !important;
+}
 .p-2 {
   padding: 4px !important;
 }
@@ -1957,12 +1954,12 @@ input[type='number'].no-arrows {
 .underline-offset-2 {
   text-underline-offset: 2px !important;
 }
-.opacity-0 {
-  opacity: 0 !important;
-}
 .opacity-70 {
   opacity: 0.7 !important;
 }
+.opacity-40 {
+  opacity: 0.4 !important;
+}
 .shadow-16dp {
   --tw-shadow: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12) !important;
   --tw-shadow-colored: 0px 16px 32px var(--tw-shadow-color), 0px 8px 16px var(--tw-shadow-color) !important;
@@ -2064,6 +2061,9 @@ input[type='number'].no-arrows {
 .checked\:bg-opacity-40:checked {
   --tw-bg-opacity: 0.4 !important;
 }
+.checked\:opacity-40:checked {
+  opacity: 0.4 !important;
+}
 .checked\:shadow-whiteInset:checked {
   --tw-shadow: inset 0 0 0 3px rgba(255,255,255,1) !important;
   --tw-shadow-colored: inset 0 0 0 3px var(--tw-shadow-color) !important;
@@ -2085,6 +2085,10 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
 }
+.hover\:bg-grey-30:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;
+}
 .hover\:bg-primary-70:hover {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(3 153 227 / var(--tw-bg-opacity)) !important;
@@ -2117,6 +2121,13 @@ input[type='number'].no-arrows {
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(120 120 133 / var(--tw-ring-opacity)) !important;
 }
+.hover\:checked\:bg-navyBlue-100:checked:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
+}
+.focus\:border:focus {
+  border-width: 1px !important;
+}
 .focus\:border-info-70:focus {
   --tw-border-opacity: 1 !important;
   border-color: rgb(3 153 227 / var(--tw-border-opacity)) !important;
@@ -2342,10 +2353,6 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
 }
-.group:hover .group-hover\:bg-grey-30 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;
-}
 .peer\/switch:checked~.peer-checked\/switch\:left-1 {
   left: 2px !important;
 }
@@ -2357,14 +2364,6 @@ input[type='number'].no-arrows {
   --tw-border-opacity: 1 !important;
   border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
 }
-.peer:checked~.peer-checked\:bg-navyBlue-100 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
-}
-.peer\/switch:checked~.peer-checked\/switch\:bg-navyBlue-100 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
-}
 .peer:checked~.peer-checked\:text-white {
   --tw-text-opacity: 1 !important;
   color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
@@ -2373,27 +2372,14 @@ input[type='number'].no-arrows {
   --tw-text-opacity: 1 !important;
   color: rgb(180 180 187 / var(--tw-text-opacity)) !important;
 }
-.peer\/switch:checked~.peer-checked\/switch\:opacity-40 {
-  opacity: 0.4 !important;
-}
 .peer:hover~.peer-hover\:border-grey-50 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(120 120 133 / var(--tw-border-opacity)) !important;
 }
-.peer\/switch:focus~.peer-focus\/switch\:border {
-  border-width: 1px !important;
-}
 .peer:focus~.peer-focus\:border-info-70 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(3 153 227 / var(--tw-border-opacity)) !important;
 }
-.peer:disabled~.peer-disabled\:cursor-not-allowed {
-  cursor: not-allowed !important;
-}
-.peer:disabled~.peer-disabled\:border-grey-5 {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(237 237 240 / var(--tw-border-opacity)) !important;
-}
 .peer\/switch:disabled~.peer-disabled\/switch\:bg-grey-0 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
@@ -2408,15 +2394,15 @@ input[type='number'].no-arrows {
 .children\:last\:border-b-0:last-child>* {
   border-bottom-width: 0px !important;
 }
+.\[\&\>path\]\:stroke-transparent>path {
+  stroke: transparent !important;
+}
 .peer:checked~.peer-checked\:\[\&\>path\]\:stroke-white>path {
   stroke: white !important;
 }
 .peer:checked~.peer-checked\:\[\&\>path\]\:stroke-grey-30>path {
   stroke: #b4b4bb !important;
 }
-.peer:checked~.peer-checked\:\[\&\>path\]\:stroke-2>path {
-  stroke-width: 2 !important;
-}
 .\[\&\>\*\:not\(\:first-child\)\]\:-ml-3>*:not(:first-child) {
   margin-left: -8px !important;
 }

package/dist/system.cjs

@@ -3584,6 +3584,7 @@ var BorderBox = createSimpleComponent(
 // src/components/Skeleton/Skeleton.tsx
 var import_react18 = __toESM(require("react"));
 var import_isNumber = __toESM(require("lodash/isNumber"));
+var import_isUndefined7 = __toESM(require("lodash/isUndefined"));
 var Skeleton = ({
   width,
   height,
@@ -3594,7 +3595,7 @@ var Skeleton = ({
 }) => {
   const styles = {
     width: (0, import_isNumber.default)(width) ? `${width}px` : width,
-    height: (0, import_isNumber.default)(height) ? `${height}px` : height
+    height: (0, import_isUndefined7.default)(height) ? "1em" : (0, import_isNumber.default)(height) ? `${height}px` : height
   };
   return /* @__PURE__ */ import_react18.default.createElement("div", {
     style: styles,
@@ -4386,27 +4387,36 @@ var Checkbox = import_react31.default.forwardRef(
   (_a, ref) => {
     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_react31.default.createElement("span", {
-      className: tw("inline-flex justify-center items-center self-center")
+      className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
+        "hover:border-grey-50 peer-checked:border-navyBlue-100": !disabled,
+        "border-grey-5": disabled
+      })
     }, /* @__PURE__ */ import_react31.default.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
       name
     }, props), {
-      className: tw("opacity-0 peer w-0 h-0"),
+      className: classNames(
+        tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
+          "cursor-pointer checked:bg-navyBlue-100": !disabled,
+          "cursor-not-allowed bg-grey-0": disabled
+        })
+      ),
       readOnly,
       disabled
     })), /* @__PURE__ */ import_react31.default.createElement(Icon, {
       icon: indeterminate ? import_minus.default : import_tick2.default,
       className: classNames(
         tw(
-          "rounded-sm border peer w-5 h-5 p-[3px] pointer-events-none cursor-pointer peer-disabled:cursor-not-allowed",
-          "border-grey-20 peer-focus:border-info-70 peer-disabled:border-grey-5 peer-checked:border-navyBlue-100",
-          "text-transparent peer-checked:[&>path]:stroke-2 peer-checked:text-white peer-checked:[&>path]:stroke-white"
+          "absolute top-0 right-0",
+          "pointer-events-none p-[2px] w-5 h-5",
+          "text-transparent [&>path]:stroke-transparent",
+          "rounded-sm border border-grey-20 peer-focus:border-info-70"
         ),
         {
-          "peer-checked:bg-navyBlue-100 peer-hover:border-grey-50": !disabled,
-          "peer-checked:bg-gray-0 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
+          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-navyBlue-100": !disabled,
+          "border-grey-5 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
         }
       )
     }));
@@ -5150,9 +5160,9 @@ var RadioButton = import_react46.default.forwardRef(
     }, props), {
       className: classNames(
         tw(
-          "inline-flex justify-center items-center self-center appearance-none ",
+          "inline-flex justify-center items-center self-center appearance-none",
           "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-grey-20",
-          "focus:border-info-70 checked:bg-navyBlue-100 checked:shadow-whiteInset",
+          "outline-none focus:border-info-70 checked:bg-navyBlue-100 checked:shadow-whiteInset",
           {
             "hover:border-grey-50 checked:border-navyBlue-100": !disabled,
             "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40": disabled
@@ -8427,21 +8437,22 @@ var Switch = import_react89.default.forwardRef(
       type: "checkbox",
       name
     }, props), {
-      className: tw("opacity-0 peer/switch w-0 h-0"),
+      className: classNames(
+        tw(
+          "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300",
+          "outline-none focus:border border-info-70 bg-grey-20",
+          "cursor-pointer disabled:cursor-not-allowed",
+          {
+            "hover:bg-grey-30 checked:bg-navyBlue-100 hover:checked:bg-navyBlue-100": !disabled,
+            "bg-grey-5 checked:opacity-40": disabled
+          }
+        )
+      ),
       readOnly,
       disabled
     })), /* @__PURE__ */ import_react89.default.createElement("span", {
       className: tw(
-        "rounded-full inline-block w-[34px] h-[20px] transition duration-300",
-        "peer-focus/switch:border border-info-70 bg-grey-20",
-        {
-          "group-hover:bg-grey-30 peer-checked/switch:bg-navyBlue-100": !disabled,
-          "bg-grey-5 peer-checked/switch:opacity-40": disabled
-        }
-      )
-    }), /* @__PURE__ */ import_react89.default.createElement("span", {
-      className: tw(
-        "rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
+        "pointer-events-none rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
         "bg-white peer-disabled/switch:bg-grey-0 left-2 peer-checked/switch:left-1",
         {
           "shadow-4dp": !disabled
@@ -8693,7 +8704,8 @@ var TimelineItemSkeleton = () => /* @__PURE__ */ import_react95.default.createEl
   height: 12,
   width: 120
 }), /* @__PURE__ */ import_react95.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react95.default.createElement(Skeleton, {
-  width: 2
+  width: 2,
+  height: "100%"
 })), /* @__PURE__ */ import_react95.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react95.default.createElement(Box, {
   display: "flex",
   flexDirection: "column",

package/dist/system.mjs

@@ -3450,6 +3450,7 @@ var BorderBox = createSimpleComponent(
 // src/components/Skeleton/Skeleton.tsx
 import React14 from "react";
 import isNumber from "lodash/isNumber";
+import isUndefined7 from "lodash/isUndefined";
 var Skeleton = ({
   width,
   height,
@@ -3460,7 +3461,7 @@ var Skeleton = ({
 }) => {
   const styles = {
     width: isNumber(width) ? `${width}px` : width,
-    height: isNumber(height) ? `${height}px` : height
+    height: isUndefined7(height) ? "1em" : isNumber(height) ? `${height}px` : height
   };
   return /* @__PURE__ */ React14.createElement("div", {
     style: styles,
@@ -4252,27 +4253,36 @@ var Checkbox = React26.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
     return /* @__PURE__ */ React26.createElement("span", {
-      className: tw("inline-flex justify-center items-center self-center")
+      className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
+        "hover:border-grey-50 peer-checked:border-navyBlue-100": !disabled,
+        "border-grey-5": disabled
+      })
     }, /* @__PURE__ */ React26.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
       name
     }, props), {
-      className: tw("opacity-0 peer w-0 h-0"),
+      className: classNames(
+        tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
+          "cursor-pointer checked:bg-navyBlue-100": !disabled,
+          "cursor-not-allowed bg-grey-0": disabled
+        })
+      ),
       readOnly,
       disabled
     })), /* @__PURE__ */ React26.createElement(Icon, {
       icon: indeterminate ? import_minus.default : import_tick2.default,
       className: classNames(
         tw(
-          "rounded-sm border peer w-5 h-5 p-[3px] pointer-events-none cursor-pointer peer-disabled:cursor-not-allowed",
-          "border-grey-20 peer-focus:border-info-70 peer-disabled:border-grey-5 peer-checked:border-navyBlue-100",
-          "text-transparent peer-checked:[&>path]:stroke-2 peer-checked:text-white peer-checked:[&>path]:stroke-white"
+          "absolute top-0 right-0",
+          "pointer-events-none p-[2px] w-5 h-5",
+          "text-transparent [&>path]:stroke-transparent",
+          "rounded-sm border border-grey-20 peer-focus:border-info-70"
         ),
         {
-          "peer-checked:bg-navyBlue-100 peer-hover:border-grey-50": !disabled,
-          "peer-checked:bg-gray-0 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
+          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-navyBlue-100": !disabled,
+          "border-grey-5 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
         }
       )
     }));
@@ -5016,9 +5026,9 @@ var RadioButton = React41.forwardRef(
     }, props), {
       className: classNames(
         tw(
-          "inline-flex justify-center items-center self-center appearance-none ",
+          "inline-flex justify-center items-center self-center appearance-none",
           "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-grey-20",
-          "focus:border-info-70 checked:bg-navyBlue-100 checked:shadow-whiteInset",
+          "outline-none focus:border-info-70 checked:bg-navyBlue-100 checked:shadow-whiteInset",
           {
             "hover:border-grey-50 checked:border-navyBlue-100": !disabled,
             "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40": disabled
@@ -8293,21 +8303,22 @@ var Switch = React83.forwardRef(
       type: "checkbox",
       name
     }, props), {
-      className: tw("opacity-0 peer/switch w-0 h-0"),
+      className: classNames(
+        tw(
+          "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300",
+          "outline-none focus:border border-info-70 bg-grey-20",
+          "cursor-pointer disabled:cursor-not-allowed",
+          {
+            "hover:bg-grey-30 checked:bg-navyBlue-100 hover:checked:bg-navyBlue-100": !disabled,
+            "bg-grey-5 checked:opacity-40": disabled
+          }
+        )
+      ),
       readOnly,
       disabled
     })), /* @__PURE__ */ React83.createElement("span", {
       className: tw(
-        "rounded-full inline-block w-[34px] h-[20px] transition duration-300",
-        "peer-focus/switch:border border-info-70 bg-grey-20",
-        {
-          "group-hover:bg-grey-30 peer-checked/switch:bg-navyBlue-100": !disabled,
-          "bg-grey-5 peer-checked/switch:opacity-40": disabled
-        }
-      )
-    }), /* @__PURE__ */ React83.createElement("span", {
-      className: tw(
-        "rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
+        "pointer-events-none rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
         "bg-white peer-disabled/switch:bg-grey-0 left-2 peer-checked/switch:left-1",
         {
           "shadow-4dp": !disabled
@@ -8559,7 +8570,8 @@ var TimelineItemSkeleton = () => /* @__PURE__ */ React89.createElement(Timeline,
   height: 12,
   width: 120
 }), /* @__PURE__ */ React89.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React89.createElement(Skeleton, {
-  width: 2
+  width: 2,
+  height: "100%"
 })), /* @__PURE__ */ React89.createElement(Timeline.Content, null, /* @__PURE__ */ React89.createElement(Box, {
   display: "flex",
   flexDirection: "column",