@aivenio/aquarium 1.3.0 → 1.4.1

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 26 Jan 2023 11:53:40 GMT
+// Generated on Tue, 31 Jan 2023 14:01:16 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;
@@ -105,6 +105,7 @@ $box-shadow-16dp: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 5
 $box-shadow-8dp: 0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16) !default;
 $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;
 $screens-default: 0px !default;
 $screens-xs: 320px !default;
 $screens-sm: 672px !default;

package/dist/_variables_timescale.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 26 Jan 2023 11:53:40 GMT
+// Generated on Tue, 31 Jan 2023 14:01:17 GMT
 
 $border-radius-none: 0px;
 $border-radius-sm: 0.125rem;
@@ -105,6 +105,7 @@ $box-shadow-16dp: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 5
 $box-shadow-8dp: 0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16);
 $box-shadow-4dp: 0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20);
 $box-shadow-2dp: 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24);
+$box-shadow-white-inset: inset 0 0 0 3px rgba(255,255,255,1);
 $screens-default: 0px;
 $screens-xs: 320px;
 $screens-sm: 672px;

package/dist/atoms.cjs

@@ -1392,6 +1392,7 @@ __export(common_exports, {
   PopoverDialog: () => PopoverDialog,
   RadioButton: () => RadioButton,
   Select: () => Select,
+  Stepper: () => Stepper,
   Switch: () => Switch,
   Table: () => Table,
   cellClassNames: () => cellClassNames,
@@ -2817,27 +2818,36 @@ var Checkbox = import_react13.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_react13.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_react13.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_react13.default.createElement(Icon, {
       icon: indeterminate ? import_minus.default : import_tick.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
         }
       )
     }));
@@ -3334,33 +3344,26 @@ var import_react22 = __toESM(require("react"));
 var RadioButton = import_react22.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ import_react22.default.createElement("span", {
-      className: classNames(tw("inline-flex justify-center items-center relative self-center"))
-    }, /* @__PURE__ */ import_react22.default.createElement("input", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react22.default.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "radio",
       name
     }, props), {
-      className: tw("opacity-0 peer/radio w-0 h-0"),
+      className: classNames(
+        tw(
+          "inline-flex justify-center items-center self-center appearance-none",
+          "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-grey-20",
+          "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
+          }
+        )
+      ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ import_react22.default.createElement("span", {
-      className: tw(
-        "rounded-full w-5 h-5 p-[3px] border cursor-pointer",
-        "border-grey-20 peer-focus/radio:border-info-70",
-        "peer-checked/radio:[&>*]:block",
-        {
-          "peer-checked/radio:border-navyBlue-100 peer-hover/radio:border-grey-50": !disabled,
-          "border-grey-5 peer-checked/radio:[&>*]:opacity-40": disabled
-        }
-      )
-    }, /* @__PURE__ */ import_react22.default.createElement("span", {
-      style: { backgroundColor: "currentcolor" },
-      className: tw("w-3 h-3 rounded-full hidden bg-navyBlue-100 pointer-events-none", {
-        "peer-checked/radio:opacity-40": disabled
-      })
-    })));
+    }));
   }
 );
 
@@ -3536,34 +3539,116 @@ var Select = {
   Toggle
 };
 
-// src/common/Switch/Switch.tsx
+// src/common/Stepper/Stepper.tsx
 var import_react24 = __toESM(require("react"));
-var Switch = import_react24.default.forwardRef(
+var import_tick4 = __toESM(require_tick());
+var Stepper = (_a) => {
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(className)
+  }));
+};
+var ConnectorContainer = (_a) => {
+  var _b = _a, {
+    className,
+    completed,
+    dense
+  } = _b, rest = __objRest(_b, [
+    "className",
+    "completed",
+    "dense"
+  ]);
+  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("absolute w-full -left-1/2", {
+        "top-[3px] px-[14px]": Boolean(dense),
+        "top-[14px] px-[20px]": !dense
+      }),
+      className
+    )
+  }));
+};
+var Connector = (_a) => {
+  var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
+  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("w-full", {
+        "bg-grey-20": !completed,
+        "bg-success-70": Boolean(completed),
+        "h-[2px]": !dense,
+        "h-[3px]": Boolean(dense)
+      }),
+      className
+    )
+  }));
+};
+var Step = (_a) => {
+  var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
+  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("flex flex-col items-center text-grey-90 relative text-center", {
+        "text-grey-20": state === "inactive"
+      }),
+      className
+    )
+  }));
+};
+var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
+  "border-grey-90 bg-white": state === "active",
+  "border-grey-20 bg-white": state === "inactive",
+  "text-white bg-success-70 border-success-70": state === "completed"
+});
+var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
+  "bg-grey-90": state === "active",
+  "bg-grey-20": state === "inactive",
+  "text-success-70": state === "completed"
+});
+var Indicator = (_a) => {
+  var _b = _a, { children, className, state, dense } = _b, rest = __objRest(_b, ["children", "className", "state", "dense"]);
+  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("rounded-full flex justify-center items-center mx-2 mb-3"),
+      dense ? getDenseClassNames(state) : getClassNames(state),
+      className
+    )
+  }), state === "completed" ? /* @__PURE__ */ import_react24.default.createElement(InlineIcon, {
+    icon: import_tick4.default
+  }) : dense ? null : children);
+};
+Step.Indicator = Indicator;
+Stepper.Step = Step;
+ConnectorContainer.Connector = Connector;
+Stepper.ConnectorContainer = ConnectorContainer;
+
+// src/common/Switch/Switch.tsx
+var import_react25 = __toESM(require("react"));
+var Switch = import_react25.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ import_react24.default.createElement("span", {
+    return /* @__PURE__ */ import_react25.default.createElement("span", {
       className: tw("relative inline-flex justify-center items-center self-center group")
-    }, /* @__PURE__ */ import_react24.default.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ import_react25.default.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       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_react24.default.createElement("span", {
+    })), /* @__PURE__ */ import_react25.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_react24.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
@@ -3574,32 +3659,32 @@ var Switch = import_react24.default.forwardRef(
 );
 
 // src/common/Table/Table.tsx
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_chevronUp2 = __toESM(require_chevronUp());
-var HeadContext = import_react25.default.createContext(null);
+var HeadContext = import_react26.default.createContext(null);
 var tableClassNames = tw("w-full relative typography-default border-spacing-0");
 var Table = (_a) => {
   var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
-  return /* @__PURE__ */ import_react25.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react26.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tableClassNames, className),
     "aria-label": ariaLabel
   }), children);
 };
 var TableHead = (_a) => {
   var _b = _a, { children, sticky } = _b, rest = __objRest(_b, ["children", "sticky"]);
-  return /* @__PURE__ */ import_react25.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react25.default.createElement("tr", null, /* @__PURE__ */ import_react25.default.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ import_react26.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react26.default.createElement("tr", null, /* @__PURE__ */ import_react26.default.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react25.default.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ import_react26.default.createElement("tbody", __spreadValues({}, rest), children);
 };
 var rowClassNames = tw("children:border-grey-10 children:last:border-b-0 hover:bg-grey-0");
 var TableRow = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react25.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react26.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
     className: classNames(rowClassNames, className)
   }), children);
 };
@@ -3611,29 +3696,29 @@ var getBodyCellClassNames = (table = true) => tw("text-grey-70 py-3", {
 var getAlignClassNames = (align) => tw({ "text-right": align === "right", "text-center": align === "center" });
 var getHeadCellClassNames = (sticky = true) => {
   const common = tw("py-[14px] text-left bg-white border-grey-40 text-grey-50 font-normal");
-  return sticky ? classNames(common, tw("sticky top-0")) : common;
+  return sticky ? classNames(common, tw("sticky top-0 z-10")) : common;
 };
 var TableCell = (_a) => {
   var _b = _a, { children, className, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "align"]);
-  const headContext = import_react25.default.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ import_react25.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = import_react26.default.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ import_react26.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ import_react25.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ import_react26.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
     className: classNames(cellClassNames, getBodyCellClassNames(), getAlignClassNames(align), className)
   }), children);
 };
 var TableSelectCell = (_a) => {
   var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
-  return /* @__PURE__ */ import_react25.default.createElement(Table.Cell, {
+  return /* @__PURE__ */ import_react26.default.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ import_react25.default.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ import_react26.default.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ import_react25.default.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ import_react26.default.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
@@ -3643,39 +3728,39 @@ var getSortCellIconClassNames = (active) => {
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ import_react25.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react26.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ import_react25.default.createElement("span", {
+  }), /* @__PURE__ */ import_react26.default.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ import_react25.default.createElement("div", {
+  }, children, /* @__PURE__ */ import_react26.default.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ import_react25.default.createElement(InlineIcon, {
+  }, /* @__PURE__ */ import_react26.default.createElement(InlineIcon, {
     icon: import_chevronUp2.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ import_react25.default.createElement(InlineIcon, {
+  }), /* @__PURE__ */ import_react26.default.createElement(InlineIcon, {
     icon: import_chevronDown3.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
-var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react25.default.createElement("div", {
+var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react26.default.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ import_react25.default.createElement("img", {
+}, image && /* @__PURE__ */ import_react26.default.createElement("img", {
   src: image,
   alt: imageAlt,
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ import_react25.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react25.default.createElement(Typography2.Caption, null, caption)));
-Table.Head = import_react25.default.memo(TableHead);
-Table.Body = import_react25.default.memo(TableBody);
-Table.Row = import_react25.default.memo(TableRow);
-Table.Cell = import_react25.default.memo(TableCell);
-Table.SortCell = import_react25.default.memo(TableSortCell);
-Table.SelectCell = import_react25.default.memo(TableSelectCell);
+}), /* @__PURE__ */ import_react26.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react26.default.createElement(Typography2.Caption, null, caption)));
+Table.Head = import_react26.default.memo(TableHead);
+Table.Body = import_react26.default.memo(TableBody);
+Table.Row = import_react26.default.memo(TableRow);
+Table.Cell = import_react26.default.memo(TableCell);
+Table.SortCell = import_react26.default.memo(TableSortCell);
+Table.SelectCell = import_react26.default.memo(TableSelectCell);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -3690,6 +3775,7 @@ Table.SelectCell = import_react25.default.memo(TableSelectCell);
   PopoverDialog,
   RadioButton,
   Select,
+  Stepper,
   Switch,
   Table,
   cellClassNames,