@aivenio/aquarium 6.0.1 → 6.0.2

package/dist/styles.css

@@ -842,6 +842,66 @@ video {
 .icon-stroke-2 svg path {
   stroke-width: 2;
 }
+.alert-action-information.text-primary-default{
+  --tw-text-opacity: 1;
+  color: rgba(14, 71, 118, 1);
+  color: rgb(14 71 118 / var(--tw-text-opacity, 1));
+}
+.alert-action-information.text-primary-default:where([data-rac])[data-hovered]{
+  --tw-text-opacity: 1;
+  color: rgba(31, 133, 217, 1);
+  color: rgb(31 133 217 / var(--tw-text-opacity, 1));
+}
+.alert-action-information.text-primary-default:where(:not([data-rac])):hover{
+  --tw-text-opacity: 1;
+  color: rgba(31, 133, 217, 1);
+  color: rgb(31 133 217 / var(--tw-text-opacity, 1));
+}
+.alert-action-warning.text-primary-default{
+  --tw-text-opacity: 1;
+  color: rgba(72, 49, 5, 1);
+  color: rgb(72 49 5 / var(--tw-text-opacity, 1));
+}
+.alert-action-warning.text-primary-default:where([data-rac])[data-hovered]{
+  --tw-text-opacity: 1;
+  color: rgba(202, 141, 21, 1);
+  color: rgb(202 141 21 / var(--tw-text-opacity, 1));
+}
+.alert-action-warning.text-primary-default:where(:not([data-rac])):hover{
+  --tw-text-opacity: 1;
+  color: rgba(202, 141, 21, 1);
+  color: rgb(202 141 21 / var(--tw-text-opacity, 1));
+}
+.alert-action-error.text-primary-default{
+  --tw-text-opacity: 1;
+  color: rgba(100, 12, 12, 1);
+  color: rgb(100 12 12 / var(--tw-text-opacity, 1));
+}
+.alert-action-error.text-primary-default:where([data-rac])[data-hovered]{
+  --tw-text-opacity: 1;
+  color: rgba(213, 28, 28, 1);
+  color: rgb(213 28 28 / var(--tw-text-opacity, 1));
+}
+.alert-action-error.text-primary-default:where(:not([data-rac])):hover{
+  --tw-text-opacity: 1;
+  color: rgba(213, 28, 28, 1);
+  color: rgb(213 28 28 / var(--tw-text-opacity, 1));
+}
+.alert-action-success.text-primary-default{
+  --tw-text-opacity: 1;
+  color: rgba(7, 103, 51, 1);
+  color: rgb(7 103 51 / var(--tw-text-opacity, 1));
+}
+.alert-action-success.text-primary-default:where([data-rac])[data-hovered]{
+  --tw-text-opacity: 1;
+  color: rgba(10, 178, 86, 1);
+  color: rgb(10 178 86 / var(--tw-text-opacity, 1));
+}
+.alert-action-success.text-primary-default:where(:not([data-rac])):hover{
+  --tw-text-opacity: 1;
+  color: rgba(10, 178, 86, 1);
+  color: rgb(10 178 86 / var(--tw-text-opacity, 1));
+}
 /* https://tailwindcss.com/docs/using-with-preprocessors */
 /* @import statements must come first*/
 .\!container{
@@ -1805,6 +1865,12 @@ video {
   border-top-right-radius: 4px;
   border-top-right-radius: var(--aquarium-border-radius-default);
 }
+.rounded-t-lg{
+  border-top-left-radius: 6px;
+  border-top-left-radius: var(--aquarium-border-radius-lg);
+  border-top-right-radius: 6px;
+  border-top-right-radius: var(--aquarium-border-radius-lg);
+}
 .border{
   border-width: 1px;
   border-width: var(--aquarium-border-width-default);
@@ -3805,6 +3871,30 @@ code{
 .aquarium-theme-dark .Aquarium-Alert\.Banner svg .fill-error-10 {
         --aquarium-colors-error-10: rgba(105, 25, 30, 1);
       }
+.aquarium-theme-dark .alert-action-information {
+    color: rgba(89, 210, 244, 1);
+  }
+.aquarium-theme-dark .alert-action-information:hover {
+      color: rgba(130, 224, 250, 1);
+    }
+.aquarium-theme-dark .alert-action-success.text-primary-default {
+    color: rgba(95, 250, 116, 1);
+  }
+.aquarium-theme-dark .alert-action-success.text-primary-default:hover {
+      color: rgba(147, 252, 162, 1);
+    }
+.aquarium-theme-dark .alert-action-warning.text-primary-default {
+    color: rgba(255, 229, 94, 1);
+  }
+.aquarium-theme-dark .alert-action-warning.text-primary-default:hover {
+      color: rgba(255, 241, 168, 1);
+    }
+.aquarium-theme-dark .alert-action-error.text-primary-default {
+    color: rgba(255, 99, 91, 1);
+  }
+.aquarium-theme-dark .alert-action-error.text-primary-default:hover {
+      color: rgba(255, 172, 168, 1);
+    }
 .aquarium-theme-dark .Aquarium-Dropdown\.Item.bg-muted,
     .aquarium-theme-dark .Aquarium-Dropdown\.Item.hover\:bg-muted:hover,
     .aquarium-theme-dark .Aquarium-DropdownMenu\.Item.bg-muted,

package/dist/system.cjs

@@ -2705,11 +2705,11 @@ var import_tailwind_variants3 = require("tailwind-variants");
 // src/utils/constants.ts
 var import_tailwind_variants2 = require("tailwind-variants");
 var inputStyles = (0, import_tailwind_variants2.tv)({
-  base: "block w-full rounded-sm typography-default text-default disabled:cursor-not-allowed disabled:border-default disabled:bg-medium disabled:text-inactive placeholder:text-inactive focus:outline-none",
+  base: "block w-full rounded typography-default text-default disabled:cursor-not-allowed disabled:border-default disabled:bg-medium disabled:text-inactive placeholder:text-inactive focus:outline-none",
   variants: {
     readOnly: {
       true: "border-none resize-none cursor-default bg-transparent",
-      false: "px-3 py-3 bg-transparent"
+      false: "px-3 py-3 bg-layer"
     },
     valid: {
       true: "",
@@ -2726,7 +2726,7 @@ var inputStyles = (0, import_tailwind_variants2.tv)({
   }
 });
 var focusRingStyle = (0, import_tailwind_variants2.tv)({
-  base: "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-action-focus focus-visible:ring-offset-body rounded-sm"
+  base: "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-action-focus focus-visible:ring-offset-body rounded"
 });
 var interactiveTextStyles = (0, import_tailwind_variants2.tv)({
   base: "text-primary-default active:text-primary-active focus-visible:text-primary-active hover:text-primary-graphic disabled:text-inactive visited:text-primary-intense"
@@ -3718,7 +3718,7 @@ Banner.Dismiss = ({ type, ...rest }) => {
 Banner.Dismiss.displayName = "Alert.Banner.Dismiss";
 
 // src/molecules/Alert/Alert.tsx
-var renderActions = (action, dense = false) => action && /* @__PURE__ */ import_react30.default.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ import_react30.default.createElement(Button2.Ghost, { dense, ...(0, import_lodash_es8.omit)(action, "text") }, action.text), isLink(action) && /* @__PURE__ */ import_react30.default.createElement(Link2.Button.Ghost, { dense, ...(0, import_lodash_es8.omit)(action, "text") }, action.text));
+var renderActions = (action, type, dense = false) => action && /* @__PURE__ */ import_react30.default.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ import_react30.default.createElement(Button2.Ghost, { dense, ...(0, import_lodash_es8.omit)(action, "text"), UNSAFE_className: `alert-action-${type}` }, action.text), isLink(action) && /* @__PURE__ */ import_react30.default.createElement(Link2.Button.Ghost, { dense, ...(0, import_lodash_es8.omit)(action, "text"), className: `alert-action-${type}` }, action.text));
 var Alert2 = ({
   type,
   title,
@@ -3741,7 +3741,7 @@ var Alert2 = ({
     /* @__PURE__ */ import_react30.default.createElement(Alert.Icon, { type, dense: Boolean(title) }),
     title && /* @__PURE__ */ import_react30.default.createElement(Alert.Title, { id: titleID }, title),
     /* @__PURE__ */ import_react30.default.createElement(Alert.Description, { id: descriptionID }, children),
-    renderActions(action, true),
+    renderActions(action, type, true),
     onDismiss && /* @__PURE__ */ import_react30.default.createElement(Alert.Dismiss, { onClick: onDismiss })
   );
 };
@@ -3756,7 +3756,7 @@ var Banner2 = ({ type, title, children, action, onDismiss }) => {
       "aria-describedby": descriptionID,
       "aria-labelledby": title ? titleID : void 0
     },
-    /* @__PURE__ */ import_react30.default.createElement(Alert.Banner.Content, null, /* @__PURE__ */ import_react30.default.createElement(Typography2.Default, null, /* @__PURE__ */ import_react30.default.createElement(Typography2.DefaultStrong, { htmlTag: "span" }, title), children && " ", children), renderActions(action)),
+    /* @__PURE__ */ import_react30.default.createElement(Alert.Banner.Content, null, /* @__PURE__ */ import_react30.default.createElement(Typography2.Default, null, /* @__PURE__ */ import_react30.default.createElement(Typography2.DefaultStrong, { htmlTag: "span" }, title), children && " ", children), renderActions(action, type)),
     onDismiss && /* @__PURE__ */ import_react30.default.createElement(Alert.Banner.Dismiss, { onClick: onDismiss })
   );
 };
@@ -4004,7 +4004,7 @@ var Breadcrumbs = (props) => {
   })));
 };
 var asCrumb = (Component, displayName, options = { isActive: false }) => {
-  const Crumb2 = import_react36.default.forwardRef(({ icon, children, ...rest }, ref) => /* @__PURE__ */ import_react36.default.createElement(Component, { ref, ...rest, role: "link" }, /* @__PURE__ */ import_react36.default.createElement(
+  const Crumb2 = import_react36.default.forwardRef(({ icon, children, ...rest }, ref) => /* @__PURE__ */ import_react36.default.createElement(Component, { ref, ...rest, role: "link", className: focusRingStyle() }, /* @__PURE__ */ import_react36.default.createElement(
     "span",
     {
       className: (0, import_clsx10.clsx)("flex flex-row flex-nowrap items-center gap-x-3 whitespace-nowrap", {
@@ -5479,6 +5479,7 @@ var ChoiceChip = ({
   name,
   value,
   disabled,
+  "aria-label": ariaLabel,
   ...rest
 }) => {
   const [selected, setSelected] = (0, import_utils7.useControlledState)(checked, defaultChecked, onChange);
@@ -5486,7 +5487,7 @@ var ChoiceChip = ({
   const handleChange = () => {
     setSelected(!selected);
   };
-  return /* @__PURE__ */ import_react60.default.createElement("label", { className: label(), ...rest }, /* @__PURE__ */ import_react60.default.createElement(
+  return /* @__PURE__ */ import_react60.default.createElement("label", { className: label(), "aria-label": ariaLabel, ...rest }, /* @__PURE__ */ import_react60.default.createElement(
     "input",
     {
       type: selectionMode,
@@ -11176,7 +11177,7 @@ var modalStyles = (0, import_tailwind_variants24.tv)({
     subtitle: "max-w-[700px]",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
     body: [
-      "grow overflow-y-auto text-default flex flex-col",
+      "grow overflow-y-auto text-default flex flex-col outline-none",
       bodyMaskClasses({ position: "before" }),
       bodyMaskClasses({ position: "after" })
     ],
@@ -11880,7 +11881,7 @@ var EmptyStateLayout = /* @__PURE__ */ ((EmptyStateLayout2) => {
 })(EmptyStateLayout || {});
 var isVerticalLayout = (layout) => layout === "vertical" /* Vertical */;
 var emptyStateClasses = (0, import_tailwind_variants25.tv)({
-  base: "Aquarium-EmptyState rounded flex bg-transparent border-default py-l6 max-h-[800px] w-full",
+  base: "Aquarium-EmptyState rounded flex bg-transparent border-default py-l6 w-full",
   variants: {
     layout: {
       vertical: "flex-col justify-center items-center gap-7 text-center px-9",
@@ -11893,7 +11894,7 @@ var emptyStateClasses = (0, import_tailwind_variants25.tv)({
     },
     fullHeight: {
       true: "h-full",
-      false: ""
+      false: "max-h-[800px]"
     }
   },
   defaultVariants: {
@@ -12184,7 +12185,7 @@ var Modal2 = ({
       className: styles.overlay({ className: "Aquarium-Modal" })
     },
     size !== "screen" && /* @__PURE__ */ import_react111.default.createElement(Modal.BackDrop, { className: styles.backdrop() }),
-    /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components19.Modal, { className: styles.dialog() }, /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components19.Dialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => /* @__PURE__ */ import_react111.default.createElement(import_react111.default.Fragment, null, /* @__PURE__ */ import_react111.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react111.default.createElement(Button2.Icon, { "aria-label": "Close", icon: cross_default, onClick: close })), headerImage !== void 0 && /* @__PURE__ */ import_react111.default.createElement(Modal.HeaderImage, { backgroundImage: headerImage }), /* @__PURE__ */ import_react111.default.createElement(
+    /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components19.Modal, { className: styles.dialog() }, /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components19.Dialog, { className: "flex flex-col grow overflow-y-auto outline-none" }, ({ close }) => /* @__PURE__ */ import_react111.default.createElement(import_react111.default.Fragment, null, /* @__PURE__ */ import_react111.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react111.default.createElement(Button2.Icon, { "aria-label": "Close", icon: cross_default, onClick: close })), headerImage !== void 0 && /* @__PURE__ */ import_react111.default.createElement(Modal.HeaderImage, { backgroundImage: headerImage }), /* @__PURE__ */ import_react111.default.createElement(
       Modal.Header,
       {
         kind: "dialog",
@@ -13300,7 +13301,7 @@ var import_tailwind_variants31 = require("tailwind-variants");
 var sectionStyles = (0, import_tailwind_variants31.tv)({
   slots: {
     base: "border border-muted rounded-lg",
-    header: "px-5 py-3 flex gap-5 justify-between items-center",
+    header: "px-5 py-3 flex gap-5 justify-between items-center rounded-t-lg",
     titleContainer: "grow grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 items-center min-h-[38px]",
     actions: "flex gap-4 justify-end",
     body: "p-5 rounded-lg"

package/dist/system.mjs

@@ -2533,11 +2533,11 @@ import { tv as tv3 } from "tailwind-variants";
 // src/utils/constants.ts
 import { tv as tv2 } from "tailwind-variants";
 var inputStyles = tv2({
-  base: "block w-full rounded-sm typography-default text-default disabled:cursor-not-allowed disabled:border-default disabled:bg-medium disabled:text-inactive placeholder:text-inactive focus:outline-none",
+  base: "block w-full rounded typography-default text-default disabled:cursor-not-allowed disabled:border-default disabled:bg-medium disabled:text-inactive placeholder:text-inactive focus:outline-none",
   variants: {
     readOnly: {
       true: "border-none resize-none cursor-default bg-transparent",
-      false: "px-3 py-3 bg-transparent"
+      false: "px-3 py-3 bg-layer"
     },
     valid: {
       true: "",
@@ -2554,7 +2554,7 @@ var inputStyles = tv2({
   }
 });
 var focusRingStyle = tv2({
-  base: "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-action-focus focus-visible:ring-offset-body rounded-sm"
+  base: "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-action-focus focus-visible:ring-offset-body rounded"
 });
 var interactiveTextStyles = tv2({
   base: "text-primary-default active:text-primary-active focus-visible:text-primary-active hover:text-primary-graphic disabled:text-inactive visited:text-primary-intense"
@@ -3546,7 +3546,7 @@ Banner.Dismiss = ({ type, ...rest }) => {
 Banner.Dismiss.displayName = "Alert.Banner.Dismiss";
 
 // src/molecules/Alert/Alert.tsx
-var renderActions = (action, dense = false) => action && /* @__PURE__ */ React24.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ React24.createElement(Button2.Ghost, { dense, ...omit2(action, "text") }, action.text), isLink(action) && /* @__PURE__ */ React24.createElement(Link2.Button.Ghost, { dense, ...omit2(action, "text") }, action.text));
+var renderActions = (action, type, dense = false) => action && /* @__PURE__ */ React24.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ React24.createElement(Button2.Ghost, { dense, ...omit2(action, "text"), UNSAFE_className: `alert-action-${type}` }, action.text), isLink(action) && /* @__PURE__ */ React24.createElement(Link2.Button.Ghost, { dense, ...omit2(action, "text"), className: `alert-action-${type}` }, action.text));
 var Alert2 = ({
   type,
   title,
@@ -3569,7 +3569,7 @@ var Alert2 = ({
     /* @__PURE__ */ React24.createElement(Alert.Icon, { type, dense: Boolean(title) }),
     title && /* @__PURE__ */ React24.createElement(Alert.Title, { id: titleID }, title),
     /* @__PURE__ */ React24.createElement(Alert.Description, { id: descriptionID }, children),
-    renderActions(action, true),
+    renderActions(action, type, true),
     onDismiss && /* @__PURE__ */ React24.createElement(Alert.Dismiss, { onClick: onDismiss })
   );
 };
@@ -3584,7 +3584,7 @@ var Banner2 = ({ type, title, children, action, onDismiss }) => {
       "aria-describedby": descriptionID,
       "aria-labelledby": title ? titleID : void 0
     },
-    /* @__PURE__ */ React24.createElement(Alert.Banner.Content, null, /* @__PURE__ */ React24.createElement(Typography2.Default, null, /* @__PURE__ */ React24.createElement(Typography2.DefaultStrong, { htmlTag: "span" }, title), children && " ", children), renderActions(action)),
+    /* @__PURE__ */ React24.createElement(Alert.Banner.Content, null, /* @__PURE__ */ React24.createElement(Typography2.Default, null, /* @__PURE__ */ React24.createElement(Typography2.DefaultStrong, { htmlTag: "span" }, title), children && " ", children), renderActions(action, type)),
     onDismiss && /* @__PURE__ */ React24.createElement(Alert.Banner.Dismiss, { onClick: onDismiss })
   );
 };
@@ -3832,7 +3832,7 @@ var Breadcrumbs = (props) => {
   })));
 };
 var asCrumb = (Component, displayName, options = { isActive: false }) => {
-  const Crumb2 = React30.forwardRef(({ icon, children, ...rest }, ref) => /* @__PURE__ */ React30.createElement(Component, { ref, ...rest, role: "link" }, /* @__PURE__ */ React30.createElement(
+  const Crumb2 = React30.forwardRef(({ icon, children, ...rest }, ref) => /* @__PURE__ */ React30.createElement(Component, { ref, ...rest, role: "link", className: focusRingStyle() }, /* @__PURE__ */ React30.createElement(
     "span",
     {
       className: clsx10("flex flex-row flex-nowrap items-center gap-x-3 whitespace-nowrap", {
@@ -5307,6 +5307,7 @@ var ChoiceChip = ({
   name,
   value,
   disabled,
+  "aria-label": ariaLabel,
   ...rest
 }) => {
   const [selected, setSelected] = useControlledState(checked, defaultChecked, onChange);
@@ -5314,7 +5315,7 @@ var ChoiceChip = ({
   const handleChange = () => {
     setSelected(!selected);
   };
-  return /* @__PURE__ */ React53.createElement("label", { className: label(), ...rest }, /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React53.createElement("label", { className: label(), "aria-label": ariaLabel, ...rest }, /* @__PURE__ */ React53.createElement(
     "input",
     {
       type: selectionMode,
@@ -11053,7 +11054,7 @@ var modalStyles = tv24({
     subtitle: "max-w-[700px]",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
     body: [
-      "grow overflow-y-auto text-default flex flex-col",
+      "grow overflow-y-auto text-default flex flex-col outline-none",
       bodyMaskClasses({ position: "before" }),
       bodyMaskClasses({ position: "after" })
     ],
@@ -11757,7 +11758,7 @@ var EmptyStateLayout = /* @__PURE__ */ ((EmptyStateLayout2) => {
 })(EmptyStateLayout || {});
 var isVerticalLayout = (layout) => layout === "vertical" /* Vertical */;
 var emptyStateClasses = tv25({
-  base: "Aquarium-EmptyState rounded flex bg-transparent border-default py-l6 max-h-[800px] w-full",
+  base: "Aquarium-EmptyState rounded flex bg-transparent border-default py-l6 w-full",
   variants: {
     layout: {
       vertical: "flex-col justify-center items-center gap-7 text-center px-9",
@@ -11770,7 +11771,7 @@ var emptyStateClasses = tv25({
     },
     fullHeight: {
       true: "h-full",
-      false: ""
+      false: "max-h-[800px]"
     }
   },
   defaultVariants: {
@@ -12066,7 +12067,7 @@ var Modal2 = ({
       className: styles.overlay({ className: "Aquarium-Modal" })
     },
     size !== "screen" && /* @__PURE__ */ React102.createElement(Modal.BackDrop, { className: styles.backdrop() }),
-    /* @__PURE__ */ React102.createElement(AriaModal2, { className: styles.dialog() }, /* @__PURE__ */ React102.createElement(AriaDialog3, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => /* @__PURE__ */ React102.createElement(React102.Fragment, null, /* @__PURE__ */ React102.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ React102.createElement(Button2.Icon, { "aria-label": "Close", icon: cross_default, onClick: close })), headerImage !== void 0 && /* @__PURE__ */ React102.createElement(Modal.HeaderImage, { backgroundImage: headerImage }), /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React102.createElement(AriaModal2, { className: styles.dialog() }, /* @__PURE__ */ React102.createElement(AriaDialog3, { className: "flex flex-col grow overflow-y-auto outline-none" }, ({ close }) => /* @__PURE__ */ React102.createElement(React102.Fragment, null, /* @__PURE__ */ React102.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ React102.createElement(Button2.Icon, { "aria-label": "Close", icon: cross_default, onClick: close })), headerImage !== void 0 && /* @__PURE__ */ React102.createElement(Modal.HeaderImage, { backgroundImage: headerImage }), /* @__PURE__ */ React102.createElement(
       Modal.Header,
       {
         kind: "dialog",
@@ -13182,7 +13183,7 @@ import { tv as tv31 } from "tailwind-variants";
 var sectionStyles = tv31({
   slots: {
     base: "border border-muted rounded-lg",
-    header: "px-5 py-3 flex gap-5 justify-between items-center",
+    header: "px-5 py-3 flex gap-5 justify-between items-center rounded-t-lg",
     titleContainer: "grow grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 items-center min-h-[38px]",
     actions: "flex gap-4 justify-end",
     body: "p-5 rounded-lg"