@aivenio/aquarium 6.0.0 → 6.0.2

package/dist/system.mjs

@@ -1709,8 +1709,8 @@ var tokens_default = {
     }
   },
   borderColor: {
-    muted: "rgba(235,235,235,1)",
-    default: "rgba(214,214,214,1)",
+    muted: "rgba(225,225,225,1)",
+    default: "rgba(181,181,183,1)",
     intense: "rgba(45,46,48,1)",
     primary: {
       muted: "rgba(183,242,241,1)",
@@ -1723,7 +1723,7 @@ var tokens_default = {
         default: "rgba(0,128,124,1)",
         active: "rgba(46,208,205,1)",
         hover: "rgba(27,178,176,1)",
-        disabled: "rgba(214,214,214,1)"
+        disabled: "rgba(225,225,225,1)"
       }
     },
     info: {
@@ -1884,7 +1884,7 @@ var tokens_default = {
       "0": "rgba(250,250,250,1)",
       "5": "rgba(244,244,244,1)",
       "10": "rgba(235,235,235,1)",
-      "20": "rgba(214,214,214,1)",
+      "20": "rgba(225,225,225,1)",
       "30": "rgba(181,181,183,1)",
       "40": "rgba(145,146,148,1)",
       "50": "rgba(104,105,107,1)",
@@ -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"
@@ -3465,7 +3465,7 @@ var alertStyles = tv6({
         base: "pt-3 pb-2"
       },
       false: {
-        base: "py-3"
+        base: "py-4"
       }
     }
   }
@@ -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",
@@ -13107,10 +13108,11 @@ var switchStyles = tv30({
   variants: {
     disabled: {
       true: {
-        input: "bg-medium checked:opacity-50 checked:bg-primary-muted"
+        input: "bg-medium checked:opacity-50 checked:bg-intense",
+        thumb: "peer-checked/switch:text-inactive"
       },
       false: {
-        input: "bg-intense hover:bg-intense checked:bg-primary-graphic hover:checked:bg-primary-inverse",
+        input: "bg-medium hover:bg-intense checked:bg-primary-graphic hover:checked:bg-primary-inverse",
         thumb: "shadow-4dp"
       }
     }
@@ -13181,8 +13183,8 @@ import { tv as tv31 } from "tailwind-variants";
 var sectionStyles = tv31({
   slots: {
     base: "border border-muted rounded-lg",
-    header: "px-5 py-4 flex gap-5 justify-between items-center",
-    titleContainer: "grow grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 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/tokens.json

@@ -85,8 +85,8 @@
     }
   },
   "borderColor": {
-    "muted": "rgba(235,235,235,1)",
-    "default": "rgba(214,214,214,1)",
+    "muted": "rgba(225,225,225,1)",
+    "default": "rgba(181,181,183,1)",
     "intense": "rgba(45,46,48,1)",
     "primary": {
       "muted": "rgba(183,242,241,1)",
@@ -99,7 +99,7 @@
         "default": "rgba(0,128,124,1)",
         "active": "rgba(46,208,205,1)",
         "hover": "rgba(27,178,176,1)",
-        "disabled": "rgba(214,214,214,1)"
+        "disabled": "rgba(225,225,225,1)"
       }
     },
     "info": {
@@ -260,7 +260,7 @@
       "0": "rgba(250,250,250,1)",
       "5": "rgba(244,244,244,1)",
       "10": "rgba(235,235,235,1)",
-      "20": "rgba(214,214,214,1)",
+      "20": "rgba(225,225,225,1)",
       "30": "rgba(181,181,183,1)",
       "40": "rgba(145,146,148,1)",
       "50": "rgba(104,105,107,1)",