@aivenio/aquarium 6.0.0-rc3 → 6.0.0-rc5

package/dist/_variables.scss

@@ -215,6 +215,7 @@ $border-color-info-default: $colors-info-20;
 $border-color-info-intense: $colors-info-50;
 $border-color-success-muted: $colors-success-10;
 $border-color-success-default: $colors-success-30;
+$border-color-success-graphic: $colors-success-40;
 $border-color-success-intense: $colors-success-70;
 $border-color-warning-default: $colors-warning-20;
 $border-color-warning-muted: $colors-warning-20;

package/dist/atoms.cjs

@@ -90,7 +90,7 @@ module.exports = __toCommonJS(atoms_exports);
 
 // src/atoms/Alert/Alert.tsx
 var import_react142 = __toESM(require("react"));
-var import_tailwind_variants32 = require("tailwind-variants");
+var import_tailwind_variants33 = require("tailwind-variants");
 
 // src/molecules/Button/Button.tsx
 var import_react5 = __toESM(require("react"));
@@ -678,11 +678,13 @@ var buttonStateClasses = (0, import_tailwind_variants2.tv)({
   variants: {
     kind: {
       primary: [
+        "min-w-[52px]",
         "active:text-opposite-default active:bg-action-primary-button-active",
         "hover:bg-action-primary-button-hover",
         "disabled:bg-action-primary-button-disabled"
       ],
       secondary: [
+        "min-w-[52px]",
         "active:bg-primary-active active:text-primary-active active:text-primary-active active:before:border-action-secondary-button-active",
         "hover:bg-primary-active hover:text-primary-graphic hover:before:border-action-secondary-button-hover",
         "before:disabled:border-default disabled:bg-transparent disabled:text-inactive"
@@ -695,7 +697,7 @@ var buttonStateClasses = (0, import_tailwind_variants2.tv)({
       true: "cursor-not-allowed"
     },
     loading: {
-      true: "cursor-wait py-3 w-[44px]"
+      true: "cursor-wait py-3"
     }
   }
 });
@@ -839,7 +841,7 @@ var InlineIcon2 = import_react6.default.forwardRef(({ color, className, ...rest
 
 // src/atoms/Typography/Typography.tsx
 var import_react141 = __toESM(require("react"));
-var import_clsx42 = require("clsx");
+var import_clsx41 = require("clsx");
 
 // src/tokens/tokens.json
 var tokens_default = {
@@ -950,6 +952,7 @@ var tokens_default = {
     success: {
       muted: "rgba(178,255,210,1)",
       default: "rgba(95,250,160,1)",
+      graphic: "rgba(61,235,134,1)",
       intense: "rgba(9,128,63,1)"
     },
     warning: {
@@ -2057,6 +2060,7 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-success-100)",
       muted: "var(--aquarium-border-color-success-muted)",
       default: "var(--aquarium-border-color-success-default)",
+      graphic: "var(--aquarium-border-color-success-graphic)",
       intense: "var(--aquarium-border-color-success-intense)"
     },
     info: {
@@ -2607,13 +2611,13 @@ var getValues = (children) => {
   return values?.filter((v) => v !== void 0 && v !== null) ?? [];
 };
 var inputContainerClasses = (0, import_tailwind_variants4.tv)({
-  base: "relative rounded typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default group",
+  base: "relative rounded typography-default-strong w-full flex flex-row items-center bg-body focus-visible:outline-0 focus-visible:border-info-default group",
   variants: {
     variant: {
-      default: "border px-3 py-[6px] border-default hover:border-intense bg-transparent",
+      default: "border px-3 py-[6px] border-default hover:border-intense",
       disabled: "border px-3 py-[6px] cursor-not-allowed border-default bg-medium",
-      error: "border px-3 py-[6px] border-danger-default bg-transparent",
-      focused: "border px-3 py-[6px] border-info-default bg-transparent",
+      error: "border px-3 py-[6px] border-danger-default",
+      focused: "border px-3 py-[6px] border-info-default",
       readOnly: "cursor-default border-default bg-transparent"
     }
   }
@@ -7436,7 +7440,7 @@ var cellStyles = (0, import_tailwind_variants20.tv)({
   variants: {
     isSelected: {
       false: "text-default hover:bg-medium pressed:bg-intense",
-      true: "bg-primary-graphic invalid:bg-danger-default text-white"
+      true: "bg-primary-inverse invalid:bg-danger-default text-white"
     },
     isUnavailable: {
       true: "text-inactive"
@@ -10119,8 +10123,8 @@ var import_tailwind_variants22 = require("tailwind-variants");
 var cellContainer = (0, import_tailwind_variants22.tv)({
   base: [
     "group w-8 h-8 typography-default outline outline-0 cursor-default",
-    "outside-month:hidden selected:bg-primary-default",
-    "invalid:selected:bg-danger-default",
+    "outside-month:hidden selected:bg-primary-inverse",
+    "invalid:selected:bg-danger-inverse",
     "selection-start:rounded-s-md selection-end:rounded-e-md"
   ]
 });
@@ -10132,12 +10136,12 @@ var cell = (0, import_tailwind_variants22.tv)({
       none: "group-hover:bg-medium group-pressed:bg-intense",
       middle: [
         "text-white",
-        "group-hover:bg-primary-graphic",
-        "group-invalid:group-hover:bg-danger-default",
+        "group-hover:bg-primary-inverse",
+        "group-invalid:group-hover:bg-danger-inverse",
         "group-pressed:bg-primary-inverse",
-        "group-invalid:group-pressed:bg-danger-graphic"
+        "group-invalid:group-pressed:bg-danger-inverse"
       ],
-      cap: "text-white bg-primary-graphic group-invalid:bg-danger-default"
+      cap: "text-white bg-primary-inverse group-invalid:bg-danger-inverse"
     },
     isUnavailable: {
       true: "text-inactive"
@@ -10270,10 +10274,10 @@ var bodyMaskClasses = (0, import_tailwind_variants23.tv)({
         "before:sticky",
         "before:top-0",
         "before:left-0",
-        "before:h-4",
+        "before:h-5",
         "before:flex-shrink-0",
         "before:bg-gradient-to-b",
-        "before:from-white",
+        "before:from-overlay",
         "before:to-transparent",
         "before:z-10"
       ],
@@ -10283,10 +10287,10 @@ var bodyMaskClasses = (0, import_tailwind_variants23.tv)({
         "after:sticky",
         "after:bottom-0",
         "after:left-0",
-        "after:h-4",
+        "after:h-5",
         "after:flex-shrink-0",
         "after:bg-gradient-to-t",
-        "after:from-white",
+        "after:from-overlay",
         "after:to-transparent",
         "after:z-10"
       ]
@@ -10310,7 +10314,7 @@ var modalStyles = (0, import_tailwind_variants23.tv)({
     ],
     bodyContent: "px-7 grow",
     footer: "px-7 pt-4 pb-6",
-    actions: "flex gap-4 justify-end"
+    actions: "flex gap-3 justify-end"
   },
   variants: {
     kind: {
@@ -10895,7 +10899,7 @@ Dropdown.Item = DropdownItem;
 var import_react99 = __toESM(require("react"));
 var import_tailwind_variants24 = require("tailwind-variants");
 var emptyStateClasses = (0, import_tailwind_variants24.tv)({
-  base: "Aquarium-EmptyState rounded flex bg-transparent border-default py-l6 max-h-[800px]",
+  base: "Aquarium-EmptyState rounded flex bg-transparent border-default py-l6 max-h-[800px] w-full",
   variants: {
     layout: {
       vertical: "flex-col justify-center items-center gap-7 text-center px-9",
@@ -10997,7 +11001,7 @@ var FilterTrigger = ({
           "px-4": !showClearButton
         })
       },
-      /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-3 divide-x divide-grey-20" }, /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react100.default.createElement(InlineIcon2, { icon }), /* @__PURE__ */ import_react100.default.createElement(Typography2.Default, null, labelText)), badge && /* @__PURE__ */ import_react100.default.createElement(Typography2, { color: "primary-active", className: "flex items-center" }, /* @__PURE__ */ import_react100.default.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ import_react100.default.createElement("div", { className: "pl-3" }, /* @__PURE__ */ import_react100.default.createElement(
+      /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-3 divide-x divide-grey-20" }, /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react100.default.createElement(InlineIcon2, { icon }), /* @__PURE__ */ import_react100.default.createElement(Typography2.Default, null, labelText)), badge && /* @__PURE__ */ import_react100.default.createElement(Typography2, { color: "primary-default", className: "flex items-center" }, /* @__PURE__ */ import_react100.default.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ import_react100.default.createElement("div", { className: "pl-3" }, /* @__PURE__ */ import_react100.default.createElement(
         Typography2.Default,
         {
           className: (0, import_clsx31.clsx)("truncate", {
@@ -11005,7 +11009,7 @@ var FilterTrigger = ({
             "max-w-[233px]": !isUsedInsideDateRangePicker
             // Set to 233px to keep the total width of the filter pill within approximately 360px.
           }),
-          color: error ? "danger-intense" : "primary-active"
+          color: error ? "danger-default" : "primary-default"
         },
         value,
         isUsedInsideDatePicker && /* @__PURE__ */ import_react100.default.createElement(DateDisplay, { state: ariaDatePickerState }),
@@ -12209,7 +12213,7 @@ Section2.Toggle = (props) => /* @__PURE__ */ import_react123.default.createEleme
     })
   }
 );
-Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ import_react123.default.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-2 items-center" }, children);
+Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ import_react123.default.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
 Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react123.default.createElement(Typography2.Default, { ...rest, color: "default" }, children);
 Section2.Actions = ({ children, className, ...rest }) => {
   const { actions: actions2 } = sectionStyles();
@@ -12227,15 +12231,44 @@ var SectionTabs = createTabsComponent(ModalTab, TabItem, "SectionTabs", (childre
 
 // src/molecules/SegmentedControl/SegmentedControl.tsx
 var import_react125 = __toESM(require("react"));
-var import_clsx39 = require("clsx");
+var import_tailwind_variants31 = require("tailwind-variants");
+var segmentedControlStyles = (0, import_tailwind_variants31.tv)({
+  slots: {
+    wrapper: [
+      "transition border-l border-grey-20 overflow-hidden hover:bg-primary-hover",
+      "first:border-l-0 first:rounded-l last:rounded-r",
+      "focus-within:border-l-transparent focus-within:relative focus-within:z-50 focus-within:ring-1 focus-within:ring-offset-0 focus-within:ring-primary-default"
+    ],
+    button: [
+      "typography-default",
+      "whitespace-nowrap px-4 py-[10px] bg-transparent focus-visible:outline-none",
+      "disabled:cursor-not-allowed disabled:text-inactive disabled:bg-muted"
+    ]
+  },
+  variants: {
+    selected: {
+      true: {
+        wrapper: "border-l-transparent relative z-40 ring-1 ring-offset-0 ring-primary-default bg-primary-default",
+        button: "text-primary-intense"
+      },
+      false: { button: "text-default" }
+    }
+  },
+  defaultVariants: {
+    selected: false
+  }
+});
+var segmentedControlGroupStyles = (0, import_tailwind_variants31.tv)({
+  base: "Aquarium-SegmentedControl flex border border-default rounded"
+});
 
 // src/molecules/Stepper/Stepper.tsx
 var import_react127 = __toESM(require("react"));
 
 // src/atoms/Stepper/Stepper.tsx
 var import_react126 = __toESM(require("react"));
-var import_tailwind_variants31 = require("tailwind-variants");
-var connectorStyles = (0, import_tailwind_variants31.tv)({
+var import_tailwind_variants32 = require("tailwind-variants");
+var connectorStyles = (0, import_tailwind_variants32.tv)({
   slots: {
     container: "absolute w-full -left-1/2",
     connector: "w-full"
@@ -12257,7 +12290,7 @@ var connectorStyles = (0, import_tailwind_variants31.tv)({
     }
   }
 });
-var stepStyles = (0, import_tailwind_variants31.tv)({
+var stepStyles = (0, import_tailwind_variants32.tv)({
   slots: {
     step: "flex flex-col items-center relative text-center",
     indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center mx-2 mb-3"
@@ -12291,7 +12324,7 @@ var stepStyles = (0, import_tailwind_variants31.tv)({
       slots: ["indicator"],
       dense: false,
       state: "completed",
-      class: "border-2 text-white bg-success-graphic border-success-intense"
+      class: "border-2 text-default bg-success-graphic border-success-graphic"
     },
     // Dense variants
     {
@@ -12407,7 +12440,7 @@ SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 // src/molecules/Textarea/Textarea.tsx
 var import_react129 = __toESM(require("react"));
 var import_utils42 = require("@react-aria/utils");
-var import_clsx40 = require("clsx");
+var import_clsx39 = require("clsx");
 var import_lodash_es44 = require("lodash-es");
 var TextareaBase = import_react129.default.forwardRef(
   ({ readOnly = false, valid = true, ...props }, ref) => /* @__PURE__ */ import_react129.default.createElement(
@@ -12416,7 +12449,7 @@ var TextareaBase = import_react129.default.forwardRef(
       ref,
       ...props,
       readOnly,
-      className: (0, import_clsx40.clsx)("Aquarium-TextareaBase", getCommonInputStyles({ readOnly, valid }), props.className)
+      className: (0, import_clsx39.clsx)("Aquarium-TextareaBase", getCommonInputStyles({ readOnly, valid }), props.className)
     }
   )
 );
@@ -12469,13 +12502,13 @@ var import_react131 = __toESM(require("react"));
 
 // src/atoms/Timeline/Timeline.tsx
 var import_react130 = __toESM(require("react"));
-var import_clsx41 = require("clsx");
-var Timeline = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("grid grid-cols-[16px_1fr] gap-x-4", className) });
-var Content2 = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("pb-6", className) });
-var Separator = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("flex items-center justify-center h-5 w-5", className) });
-var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("flex justify-center py-1", className) });
-var Line = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("w-1 bg-medium h-full justify-self-center", className) });
-var Dot = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("bg-intense h-[6px] w-[6px] rounded", className) });
+var import_clsx40 = require("clsx");
+var Timeline = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("grid grid-cols-[16px_1fr] gap-x-4", className) });
+var Content2 = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("pb-6", className) });
+var Separator = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("flex items-center justify-center h-5 w-5", className) });
+var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("flex justify-center py-1", className) });
+var Line = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("w-1 bg-medium h-full justify-self-center", className) });
+var Dot = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("bg-intense h-[6px] w-[6px] rounded", className) });
 Separator.Dot = Dot;
 LineContainer.Line = Line;
 Timeline.Separator = Separator;
@@ -12603,7 +12636,7 @@ var Typography = ({
   return /* @__PURE__ */ import_react141.default.createElement(
     HtmlElement,
     {
-      className: (0, import_clsx42.clsx)(
+      className: (0, import_clsx41.clsx)(
         typographies[variant],
         // eslint-disable-next-line better-tailwindcss/no-unregistered-classes
         `text-${resolvedColorName}`,
@@ -12645,7 +12678,7 @@ var alertTypes = {
     textColor: "success-default"
   }
 };
-var alertStyles = (0, import_tailwind_variants32.tv)({
+var alertStyles = (0, import_tailwind_variants33.tv)({
   slots: {
     base: "px-4 py-3 rounded-lg grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2",
     title: "col-start-2",
@@ -12669,7 +12702,7 @@ var alertStyles = (0, import_tailwind_variants32.tv)({
     }
   }
 });
-var bannerStyles2 = (0, import_tailwind_variants32.tv)({
+var bannerStyles2 = (0, import_tailwind_variants33.tv)({
   slots: {
     base: "relative flex px-[60px] justify-center",
     content: "flex flex-row flex-wrap gap-x-3 items-center justify-center py-4 text-center z-10",

package/dist/atoms.mjs

@@ -1,6 +1,6 @@
 // src/atoms/Alert/Alert.tsx
 import React132 from "react";
-import { tv as tv32 } from "tailwind-variants";
+import { tv as tv33 } from "tailwind-variants";
 
 // src/molecules/Button/Button.tsx
 import React3 from "react";
@@ -588,11 +588,13 @@ var buttonStateClasses = tv2({
   variants: {
     kind: {
       primary: [
+        "min-w-[52px]",
         "active:text-opposite-default active:bg-action-primary-button-active",
         "hover:bg-action-primary-button-hover",
         "disabled:bg-action-primary-button-disabled"
       ],
       secondary: [
+        "min-w-[52px]",
         "active:bg-primary-active active:text-primary-active active:text-primary-active active:before:border-action-secondary-button-active",
         "hover:bg-primary-active hover:text-primary-graphic hover:before:border-action-secondary-button-hover",
         "before:disabled:border-default disabled:bg-transparent disabled:text-inactive"
@@ -605,7 +607,7 @@ var buttonStateClasses = tv2({
       true: "cursor-not-allowed"
     },
     loading: {
-      true: "cursor-wait py-3 w-[44px]"
+      true: "cursor-wait py-3"
     }
   }
 });
@@ -752,7 +754,7 @@ var InlineIcon2 = React4.forwardRef(({ color, className, ...rest }, ref) => {
 
 // src/atoms/Typography/Typography.tsx
 import React131 from "react";
-import { clsx as clsx42 } from "clsx";
+import { clsx as clsx41 } from "clsx";
 
 // src/tokens/tokens.json
 var tokens_default = {
@@ -863,6 +865,7 @@ var tokens_default = {
     success: {
       muted: "rgba(178,255,210,1)",
       default: "rgba(95,250,160,1)",
+      graphic: "rgba(61,235,134,1)",
       intense: "rgba(9,128,63,1)"
     },
     warning: {
@@ -1970,6 +1973,7 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-success-100)",
       muted: "var(--aquarium-border-color-success-muted)",
       default: "var(--aquarium-border-color-success-default)",
+      graphic: "var(--aquarium-border-color-success-graphic)",
       intense: "var(--aquarium-border-color-success-intense)"
     },
     info: {
@@ -2520,13 +2524,13 @@ var getValues = (children) => {
   return values?.filter((v) => v !== void 0 && v !== null) ?? [];
 };
 var inputContainerClasses = tv4({
-  base: "relative rounded typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default group",
+  base: "relative rounded typography-default-strong w-full flex flex-row items-center bg-body focus-visible:outline-0 focus-visible:border-info-default group",
   variants: {
     variant: {
-      default: "border px-3 py-[6px] border-default hover:border-intense bg-transparent",
+      default: "border px-3 py-[6px] border-default hover:border-intense",
       disabled: "border px-3 py-[6px] cursor-not-allowed border-default bg-medium",
-      error: "border px-3 py-[6px] border-danger-default bg-transparent",
-      focused: "border px-3 py-[6px] border-info-default bg-transparent",
+      error: "border px-3 py-[6px] border-danger-default",
+      focused: "border px-3 py-[6px] border-info-default",
       readOnly: "cursor-default border-default bg-transparent"
     }
   }
@@ -7384,7 +7388,7 @@ var cellStyles = tv20({
   variants: {
     isSelected: {
       false: "text-default hover:bg-medium pressed:bg-intense",
-      true: "bg-primary-graphic invalid:bg-danger-default text-white"
+      true: "bg-primary-inverse invalid:bg-danger-default text-white"
     },
     isUnavailable: {
       true: "text-inactive"
@@ -10081,8 +10085,8 @@ import { tv as tv22 } from "tailwind-variants";
 var cellContainer = tv22({
   base: [
     "group w-8 h-8 typography-default outline outline-0 cursor-default",
-    "outside-month:hidden selected:bg-primary-default",
-    "invalid:selected:bg-danger-default",
+    "outside-month:hidden selected:bg-primary-inverse",
+    "invalid:selected:bg-danger-inverse",
     "selection-start:rounded-s-md selection-end:rounded-e-md"
   ]
 });
@@ -10094,12 +10098,12 @@ var cell = tv22({
       none: "group-hover:bg-medium group-pressed:bg-intense",
       middle: [
         "text-white",
-        "group-hover:bg-primary-graphic",
-        "group-invalid:group-hover:bg-danger-default",
+        "group-hover:bg-primary-inverse",
+        "group-invalid:group-hover:bg-danger-inverse",
         "group-pressed:bg-primary-inverse",
-        "group-invalid:group-pressed:bg-danger-graphic"
+        "group-invalid:group-pressed:bg-danger-inverse"
       ],
-      cap: "text-white bg-primary-graphic group-invalid:bg-danger-default"
+      cap: "text-white bg-primary-inverse group-invalid:bg-danger-inverse"
     },
     isUnavailable: {
       true: "text-inactive"
@@ -10232,10 +10236,10 @@ var bodyMaskClasses = tv23({
         "before:sticky",
         "before:top-0",
         "before:left-0",
-        "before:h-4",
+        "before:h-5",
         "before:flex-shrink-0",
         "before:bg-gradient-to-b",
-        "before:from-white",
+        "before:from-overlay",
         "before:to-transparent",
         "before:z-10"
       ],
@@ -10245,10 +10249,10 @@ var bodyMaskClasses = tv23({
         "after:sticky",
         "after:bottom-0",
         "after:left-0",
-        "after:h-4",
+        "after:h-5",
         "after:flex-shrink-0",
         "after:bg-gradient-to-t",
-        "after:from-white",
+        "after:from-overlay",
         "after:to-transparent",
         "after:z-10"
       ]
@@ -10272,7 +10276,7 @@ var modalStyles = tv23({
     ],
     bodyContent: "px-7 grow",
     footer: "px-7 pt-4 pb-6",
-    actions: "flex gap-4 justify-end"
+    actions: "flex gap-3 justify-end"
   },
   variants: {
     kind: {
@@ -10857,7 +10861,7 @@ Dropdown.Item = DropdownItem;
 import React91 from "react";
 import { tv as tv24 } from "tailwind-variants";
 var emptyStateClasses = tv24({
-  base: "Aquarium-EmptyState rounded flex bg-transparent border-default py-l6 max-h-[800px]",
+  base: "Aquarium-EmptyState rounded flex bg-transparent border-default py-l6 max-h-[800px] w-full",
   variants: {
     layout: {
       vertical: "flex-col justify-center items-center gap-7 text-center px-9",
@@ -10964,7 +10968,7 @@ var FilterTrigger = ({
           "px-4": !showClearButton
         })
       },
-      /* @__PURE__ */ React92.createElement("div", { className: "flex items-center gap-3 divide-x divide-grey-20" }, /* @__PURE__ */ React92.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React92.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React92.createElement(InlineIcon2, { icon }), /* @__PURE__ */ React92.createElement(Typography2.Default, null, labelText)), badge && /* @__PURE__ */ React92.createElement(Typography2, { color: "primary-active", className: "flex items-center" }, /* @__PURE__ */ React92.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ React92.createElement("div", { className: "pl-3" }, /* @__PURE__ */ React92.createElement(
+      /* @__PURE__ */ React92.createElement("div", { className: "flex items-center gap-3 divide-x divide-grey-20" }, /* @__PURE__ */ React92.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React92.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React92.createElement(InlineIcon2, { icon }), /* @__PURE__ */ React92.createElement(Typography2.Default, null, labelText)), badge && /* @__PURE__ */ React92.createElement(Typography2, { color: "primary-default", className: "flex items-center" }, /* @__PURE__ */ React92.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ React92.createElement("div", { className: "pl-3" }, /* @__PURE__ */ React92.createElement(
         Typography2.Default,
         {
           className: clsx31("truncate", {
@@ -10972,7 +10976,7 @@ var FilterTrigger = ({
             "max-w-[233px]": !isUsedInsideDateRangePicker
             // Set to 233px to keep the total width of the filter pill within approximately 360px.
           }),
-          color: error ? "danger-intense" : "primary-active"
+          color: error ? "danger-default" : "primary-default"
         },
         value,
         isUsedInsideDatePicker && /* @__PURE__ */ React92.createElement(DateDisplay, { state: ariaDatePickerState }),
@@ -12176,7 +12180,7 @@ Section2.Toggle = (props) => /* @__PURE__ */ React114.createElement(
     })
   }
 );
-Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ React114.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-2 items-center" }, children);
+Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ React114.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
 Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React114.createElement(Typography2.Default, { ...rest, color: "default" }, children);
 Section2.Actions = ({ children, className, ...rest }) => {
   const { actions: actions2 } = sectionStyles();
@@ -12194,15 +12198,44 @@ var SectionTabs = createTabsComponent(ModalTab, TabItem, "SectionTabs", (childre
 
 // src/molecules/SegmentedControl/SegmentedControl.tsx
 import React116 from "react";
-import { clsx as clsx39 } from "clsx";
+import { tv as tv31 } from "tailwind-variants";
+var segmentedControlStyles = tv31({
+  slots: {
+    wrapper: [
+      "transition border-l border-grey-20 overflow-hidden hover:bg-primary-hover",
+      "first:border-l-0 first:rounded-l last:rounded-r",
+      "focus-within:border-l-transparent focus-within:relative focus-within:z-50 focus-within:ring-1 focus-within:ring-offset-0 focus-within:ring-primary-default"
+    ],
+    button: [
+      "typography-default",
+      "whitespace-nowrap px-4 py-[10px] bg-transparent focus-visible:outline-none",
+      "disabled:cursor-not-allowed disabled:text-inactive disabled:bg-muted"
+    ]
+  },
+  variants: {
+    selected: {
+      true: {
+        wrapper: "border-l-transparent relative z-40 ring-1 ring-offset-0 ring-primary-default bg-primary-default",
+        button: "text-primary-intense"
+      },
+      false: { button: "text-default" }
+    }
+  },
+  defaultVariants: {
+    selected: false
+  }
+});
+var segmentedControlGroupStyles = tv31({
+  base: "Aquarium-SegmentedControl flex border border-default rounded"
+});
 
 // src/molecules/Stepper/Stepper.tsx
 import React118 from "react";
 
 // src/atoms/Stepper/Stepper.tsx
 import React117 from "react";
-import { tv as tv31 } from "tailwind-variants";
-var connectorStyles = tv31({
+import { tv as tv32 } from "tailwind-variants";
+var connectorStyles = tv32({
   slots: {
     container: "absolute w-full -left-1/2",
     connector: "w-full"
@@ -12224,7 +12257,7 @@ var connectorStyles = tv31({
     }
   }
 });
-var stepStyles = tv31({
+var stepStyles = tv32({
   slots: {
     step: "flex flex-col items-center relative text-center",
     indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center mx-2 mb-3"
@@ -12258,7 +12291,7 @@ var stepStyles = tv31({
       slots: ["indicator"],
       dense: false,
       state: "completed",
-      class: "border-2 text-white bg-success-graphic border-success-intense"
+      class: "border-2 text-default bg-success-graphic border-success-graphic"
     },
     // Dense variants
     {
@@ -12374,7 +12407,7 @@ SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 // src/molecules/Textarea/Textarea.tsx
 import React120, { useState as useState14 } from "react";
 import { useId as useId18 } from "@react-aria/utils";
-import { clsx as clsx40 } from "clsx";
+import { clsx as clsx39 } from "clsx";
 import { omit as omit16, toString as toString2 } from "lodash-es";
 var TextareaBase = React120.forwardRef(
   ({ readOnly = false, valid = true, ...props }, ref) => /* @__PURE__ */ React120.createElement(
@@ -12383,7 +12416,7 @@ var TextareaBase = React120.forwardRef(
       ref,
       ...props,
       readOnly,
-      className: clsx40("Aquarium-TextareaBase", getCommonInputStyles({ readOnly, valid }), props.className)
+      className: clsx39("Aquarium-TextareaBase", getCommonInputStyles({ readOnly, valid }), props.className)
     }
   )
 );
@@ -12436,13 +12469,13 @@ import React122 from "react";
 
 // src/atoms/Timeline/Timeline.tsx
 import React121 from "react";
-import { clsx as clsx41 } from "clsx";
-var Timeline = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx41("grid grid-cols-[16px_1fr] gap-x-4", className) });
-var Content2 = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx41("pb-6", className) });
-var Separator = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx41("flex items-center justify-center h-5 w-5", className) });
-var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx41("flex justify-center py-1", className) });
-var Line = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx41("w-1 bg-medium h-full justify-self-center", className) });
-var Dot = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx41("bg-intense h-[6px] w-[6px] rounded", className) });
+import { clsx as clsx40 } from "clsx";
+var Timeline = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx40("grid grid-cols-[16px_1fr] gap-x-4", className) });
+var Content2 = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx40("pb-6", className) });
+var Separator = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx40("flex items-center justify-center h-5 w-5", className) });
+var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx40("flex justify-center py-1", className) });
+var Line = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx40("w-1 bg-medium h-full justify-self-center", className) });
+var Dot = ({ className, ...rest }) => /* @__PURE__ */ React121.createElement("div", { ...rest, className: clsx40("bg-intense h-[6px] w-[6px] rounded", className) });
 Separator.Dot = Dot;
 LineContainer.Line = Line;
 Timeline.Separator = Separator;
@@ -12570,7 +12603,7 @@ var Typography = ({
   return /* @__PURE__ */ React131.createElement(
     HtmlElement,
     {
-      className: clsx42(
+      className: clsx41(
         typographies[variant],
         // eslint-disable-next-line better-tailwindcss/no-unregistered-classes
         `text-${resolvedColorName}`,
@@ -12612,7 +12645,7 @@ var alertTypes = {
     textColor: "success-default"
   }
 };
-var alertStyles = tv32({
+var alertStyles = tv33({
   slots: {
     base: "px-4 py-3 rounded-lg grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2",
     title: "col-start-2",
@@ -12636,7 +12669,7 @@ var alertStyles = tv32({
     }
   }
 });
-var bannerStyles2 = tv32({
+var bannerStyles2 = tv33({
   slots: {
     base: "relative flex px-[60px] justify-center",
     content: "flex flex-row flex-wrap gap-x-3 items-center justify-center py-4 text-center z-10",

package/dist/charts.cjs

@@ -300,6 +300,7 @@ var tokens_default = {
     success: {
       muted: "rgba(178,255,210,1)",
       default: "rgba(95,250,160,1)",
+      graphic: "rgba(61,235,134,1)",
       intense: "rgba(9,128,63,1)"
     },
     warning: {

package/dist/charts.mjs

@@ -160,6 +160,7 @@ var tokens_default = {
     success: {
       muted: "rgba(178,255,210,1)",
       default: "rgba(95,250,160,1)",
+      graphic: "rgba(61,235,134,1)",
       intense: "rgba(9,128,63,1)"
     },
     warning: {