@aivenio/aquarium 1.18.0 → 1.20.0

package/dist/system.cjs

@@ -5294,6 +5294,7 @@ var import_omit = __toESM(require("lodash/omit"));
 
 // src/molecules/Button/Button.tsx
 var import_react19 = __toESM(require("react"));
+var import_camelCase = __toESM(require("lodash/camelCase"));
 
 // src/molecules/Flexbox/Flexbox.tsx
 var import_react16 = __toESM(require("react"));
@@ -5582,94 +5583,94 @@ var tailwind_theme_default = {
   flexGrow: { "0": "0", DEFAULT: "1" },
   flexShrink: { "0": "0", DEFAULT: "1" },
   backgroundColor: {
-    "error-100": "#aa0000",
-    "error-90": "#b90000",
-    "error-80": "#c50001",
-    "error-70": "#d80005",
-    "error-60": "#e70000",
-    "error-50": "#e62728",
-    "error-40": "#e0504f",
-    "error-30": "#ed7975",
-    "error-20": "#ffadb3",
-    "error-10": "#ffcbd2",
-    "error-5": "#fee8e7",
-    "error-0": "#fef2f1",
-    "warning-100": "#fe6d00",
-    "warning-90": "#ff9003",
-    "warning-80": "#fd9f00",
-    "warning-70": "#ffb300",
-    "warning-60": "#ffc107",
-    "warning-50": "#fdc926",
-    "warning-40": "#fdd44d",
-    "warning-30": "#fddf81",
-    "warning-20": "#feebb2",
-    "warning-10": "#fff2cd",
-    "warning-5": "#fff8ea",
-    "warning-0": "#fffdf9",
-    "success-100": "#006f00",
-    "success-90": "#008e00",
-    "success-80": "#009f00",
-    "success-70": "#00b300",
-    "success-60": "#00c300",
-    "success-50": "#40ce37",
-    "success-40": "#60db57",
-    "success-30": "#89eb80",
-    "success-20": "#afffa7",
-    "success-10": "#cbffc9",
-    "success-5": "#ecf7ed",
-    "success-0": "#f5faf5",
-    "info-100": "#02569a",
-    "info-90": "#0174ba",
-    "info-80": "#0788d1",
-    "info-70": "#0399e3",
-    "info-60": "#02a8f3",
-    "info-50": "#28b4f4",
-    "info-40": "#4cc2f7",
-    "info-30": "#7fd1f7",
-    "info-20": "#b4e5fb",
-    "info-10": "#e0f5fe",
-    "info-5": "#effaff",
-    "info-0": "#f9fdff",
-    "grey-100": "#19191d",
-    "grey-90": "#292a31",
-    "grey-80": "#3a3a44",
-    "grey-70": "#4a4b57",
-    "grey-60": "#5a5b6a",
-    "grey-50": "#787885",
-    "grey-40": "#9696a0",
-    "grey-30": "#b4b4bb",
-    "grey-10": "#e1e1e3",
-    "grey-5": "#ededf0",
-    "grey-0": "#f7f7fa",
-    "secondary-100": "#e11d16",
-    "secondary-90": "#eb4610",
-    "secondary-80": "#f3580d",
-    "secondary-70": "#f96a02",
-    "secondary-60": "#ff7700",
-    "secondary-50": "#fc871a",
-    "secondary-40": "#fb9a3e",
-    "secondary-30": "#fab26e",
-    "secondary-20": "#f8c99c",
-    "secondary-10": "#fee8d0",
-    "secondary-5": "#fff3e8",
-    "secondary-0": "#fffbf8",
-    "primary-100": "#a70045",
-    "primary-90": "#c60443",
-    "primary-80": "#e41a4a",
-    "primary-70": "#ff3554",
-    "primary-60": "#ff5275",
-    "primary-50": "#ff6f94",
-    "primary-40": "#ff8db0",
-    "primary-30": "#ffa9c9",
-    "primary-20": "#ffc4de",
-    "primary-10": "#ffdeef",
-    "primary-5": "#ffe8f4",
-    "primary-0": "#fff9fc",
-    "grey-20": "#d2d2d6",
-    transparent: "transparent",
-    white: "white",
-    black: "black",
-    current: "currentColor",
+    "error-100": "var(--aquarium-colors-error-100, #aa0000)",
+    "error-90": "var(--aquarium-colors-error-90, #b90000)",
+    "error-80": "var(--aquarium-colors-error-80, #c50001)",
+    "error-70": "var(--aquarium-colors-error-70, #d80005)",
+    "error-60": "var(--aquarium-colors-error-60, #e70000)",
+    "error-50": "var(--aquarium-colors-error-50, #e62728)",
+    "error-40": "var(--aquarium-colors-error-40, #e0504f)",
+    "error-30": "var(--aquarium-colors-error-30, #ed7975)",
+    "error-20": "var(--aquarium-colors-error-20, #ffadb3)",
+    "error-10": "var(--aquarium-colors-error-10, #ffcbd2)",
+    "error-5": "var(--aquarium-colors-error-5, #fee8e7)",
+    "error-0": "var(--aquarium-colors-error-0, #fef2f1)",
+    "warning-100": "var(--aquarium-colors-warning-100, #fe6d00)",
+    "warning-90": "var(--aquarium-colors-warning-90, #ff9003)",
+    "warning-80": "var(--aquarium-colors-warning-80, #fd9f00)",
+    "warning-70": "var(--aquarium-colors-warning-70, #ffb300)",
+    "warning-60": "var(--aquarium-colors-warning-60, #ffc107)",
+    "warning-50": "var(--aquarium-colors-warning-50, #fdc926)",
+    "warning-40": "var(--aquarium-colors-warning-40, #fdd44d)",
+    "warning-30": "var(--aquarium-colors-warning-30, #fddf81)",
+    "warning-20": "var(--aquarium-colors-warning-20, #feebb2)",
+    "warning-10": "var(--aquarium-colors-warning-10, #fff2cd)",
+    "warning-5": "var(--aquarium-colors-warning-5, #fff8ea)",
+    "warning-0": "var(--aquarium-colors-warning-0, #fffdf9)",
+    "success-100": "var(--aquarium-colors-success-100, #006f00)",
+    "success-90": "var(--aquarium-colors-success-90, #008e00)",
+    "success-80": "var(--aquarium-colors-success-80, #009f00)",
+    "success-70": "var(--aquarium-colors-success-70, #00b300)",
+    "success-60": "var(--aquarium-colors-success-60, #00c300)",
+    "success-50": "var(--aquarium-colors-success-50, #40ce37)",
+    "success-40": "var(--aquarium-colors-success-40, #60db57)",
+    "success-30": "var(--aquarium-colors-success-30, #89eb80)",
+    "success-20": "var(--aquarium-colors-success-20, #afffa7)",
+    "success-10": "var(--aquarium-colors-success-10, #cbffc9)",
+    "success-5": "var(--aquarium-colors-success-5, #ecf7ed)",
+    "success-0": "var(--aquarium-colors-success-0, #f5faf5)",
+    "info-100": "var(--aquarium-colors-info-100, #02569a)",
+    "info-90": "var(--aquarium-colors-info-90, #0174ba)",
+    "info-80": "var(--aquarium-colors-info-80, #0788d1)",
+    "info-70": "var(--aquarium-colors-info-70, #0399e3)",
+    "info-60": "var(--aquarium-colors-info-60, #02a8f3)",
+    "info-50": "var(--aquarium-colors-info-50, #28b4f4)",
+    "info-40": "var(--aquarium-colors-info-40, #4cc2f7)",
+    "info-30": "var(--aquarium-colors-info-30, #7fd1f7)",
+    "info-20": "var(--aquarium-colors-info-20, #b4e5fb)",
+    "info-10": "var(--aquarium-colors-info-10, #e0f5fe)",
+    "info-5": "var(--aquarium-colors-info-5, #effaff)",
+    "info-0": "var(--aquarium-colors-info-0, #f9fdff)",
+    "grey-100": "var(--aquarium-colors-grey-100, #19191d)",
+    "grey-90": "var(--aquarium-colors-grey-90, #292a31)",
+    "grey-80": "var(--aquarium-colors-grey-80, #3a3a44)",
+    "grey-70": "var(--aquarium-colors-grey-70, #4a4b57)",
+    "grey-60": "var(--aquarium-colors-grey-60, #5a5b6a)",
+    "grey-50": "var(--aquarium-colors-grey-50, #787885)",
+    "grey-40": "var(--aquarium-colors-grey-40, #9696a0)",
+    "grey-30": "var(--aquarium-colors-grey-30, #b4b4bb)",
+    "grey-10": "var(--aquarium-colors-grey-10, #e1e1e3)",
+    "grey-5": "var(--aquarium-colors-grey-5, #ededf0)",
+    "grey-0": "var(--aquarium-colors-grey-0, #f7f7fa)",
+    "secondary-100": "var(--aquarium-colors-secondary-100, #e11d16)",
+    "secondary-90": "var(--aquarium-colors-secondary-90, #eb4610)",
+    "secondary-80": "var(--aquarium-colors-secondary-80, #f3580d)",
+    "secondary-70": "var(--aquarium-colors-secondary-70, #f96a02)",
+    "secondary-60": "var(--aquarium-colors-secondary-60, #ff7700)",
+    "secondary-50": "var(--aquarium-colors-secondary-50, #fc871a)",
+    "secondary-40": "var(--aquarium-colors-secondary-40, #fb9a3e)",
+    "secondary-30": "var(--aquarium-colors-secondary-30, #fab26e)",
+    "secondary-20": "var(--aquarium-colors-secondary-20, #f8c99c)",
+    "secondary-10": "var(--aquarium-colors-secondary-10, #fee8d0)",
+    "secondary-5": "var(--aquarium-colors-secondary-5, #fff3e8)",
+    "secondary-0": "var(--aquarium-colors-secondary-0, #fffbf8)",
+    "primary-100": "var(--aquarium-colors-primary-100, #a70045)",
+    "primary-90": "var(--aquarium-colors-primary-90, #c60443)",
+    "primary-80": "var(--aquarium-colors-primary-80, #e41a4a)",
+    "primary-70": "var(--aquarium-colors-primary-70, #ff3554)",
+    "primary-60": "var(--aquarium-colors-primary-60, #ff5275)",
+    "primary-50": "var(--aquarium-colors-primary-50, #ff6f94)",
+    "primary-40": "var(--aquarium-colors-primary-40, #ff8db0)",
+    "primary-30": "var(--aquarium-colors-primary-30, #ffa9c9)",
+    "primary-20": "var(--aquarium-colors-primary-20, #ffc4de)",
+    "primary-10": "var(--aquarium-colors-primary-10, #ffdeef)",
+    "primary-5": "var(--aquarium-colors-primary-5, #ffe8f4)",
+    "primary-0": "var(--aquarium-colors-primary-0, #fff9fc)",
+    "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
+    transparent: "var(--aquarium-colors-transparent, transparent)",
+    white: "var(--aquarium-colors-white, white)",
+    black: "var(--aquarium-colors-black, black)",
+    current: "var(--aquarium-colors-current, currentColor)",
     "navyBlue-100": "#30375E"
   },
   gap: {
@@ -6150,7 +6151,7 @@ var Dismiss = (_a) => {
   var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
   return /* @__PURE__ */ import_react10.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: (0, import_classnames2.default)(
-      tw("[&>button]:p-0 flex", {
+      tw("self-start [&>button]:p-0 flex", {
         "[&>button]:text-grey-50": variant === "default",
         "[&>button]:text-error-20": variant === "danger"
       }),
@@ -6982,6 +6983,9 @@ var ghostButtonStyle = tw(
 );
 var linkStyle = classNames(ghostButtonStyle, tw("visited:text-primary-80 focusable"));
 
+// src/utils/string.ts
+var capitalize = (a) => a.charAt(0).toUpperCase() + a.slice(1);
+
 // src/molecules/Button/Button.tsx
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_loading2 = __toESM(require_loading());
@@ -7092,6 +7096,12 @@ var asButton = (Component, isDropdownButton) => {
       }, props), {
         className: classNames(
           "Aquarium-Button",
+          {
+            [`Aquarium-Button.${capitalize((0, import_camelCase.default)(kind))}`]: !isIconOnlyButton,
+            "Aquarium-Button.Icon": isIconOnlyButton,
+            "Aquarium-Dense": dense,
+            "Aquarium-Busy": loading2
+          },
           UNSAFE_className,
           !isIconOnlyButton && COLOR_CLASSNAMES[kind],
           tw(

package/dist/system.mjs

@@ -5152,6 +5152,7 @@ import omit from "lodash/omit";
 
 // src/molecules/Button/Button.tsx
 import React15 from "react";
+import camelCase from "lodash/camelCase";
 
 // src/molecules/Flexbox/Flexbox.tsx
 import React13 from "react";
@@ -5440,94 +5441,94 @@ var tailwind_theme_default = {
   flexGrow: { "0": "0", DEFAULT: "1" },
   flexShrink: { "0": "0", DEFAULT: "1" },
   backgroundColor: {
-    "error-100": "#aa0000",
-    "error-90": "#b90000",
-    "error-80": "#c50001",
-    "error-70": "#d80005",
-    "error-60": "#e70000",
-    "error-50": "#e62728",
-    "error-40": "#e0504f",
-    "error-30": "#ed7975",
-    "error-20": "#ffadb3",
-    "error-10": "#ffcbd2",
-    "error-5": "#fee8e7",
-    "error-0": "#fef2f1",
-    "warning-100": "#fe6d00",
-    "warning-90": "#ff9003",
-    "warning-80": "#fd9f00",
-    "warning-70": "#ffb300",
-    "warning-60": "#ffc107",
-    "warning-50": "#fdc926",
-    "warning-40": "#fdd44d",
-    "warning-30": "#fddf81",
-    "warning-20": "#feebb2",
-    "warning-10": "#fff2cd",
-    "warning-5": "#fff8ea",
-    "warning-0": "#fffdf9",
-    "success-100": "#006f00",
-    "success-90": "#008e00",
-    "success-80": "#009f00",
-    "success-70": "#00b300",
-    "success-60": "#00c300",
-    "success-50": "#40ce37",
-    "success-40": "#60db57",
-    "success-30": "#89eb80",
-    "success-20": "#afffa7",
-    "success-10": "#cbffc9",
-    "success-5": "#ecf7ed",
-    "success-0": "#f5faf5",
-    "info-100": "#02569a",
-    "info-90": "#0174ba",
-    "info-80": "#0788d1",
-    "info-70": "#0399e3",
-    "info-60": "#02a8f3",
-    "info-50": "#28b4f4",
-    "info-40": "#4cc2f7",
-    "info-30": "#7fd1f7",
-    "info-20": "#b4e5fb",
-    "info-10": "#e0f5fe",
-    "info-5": "#effaff",
-    "info-0": "#f9fdff",
-    "grey-100": "#19191d",
-    "grey-90": "#292a31",
-    "grey-80": "#3a3a44",
-    "grey-70": "#4a4b57",
-    "grey-60": "#5a5b6a",
-    "grey-50": "#787885",
-    "grey-40": "#9696a0",
-    "grey-30": "#b4b4bb",
-    "grey-10": "#e1e1e3",
-    "grey-5": "#ededf0",
-    "grey-0": "#f7f7fa",
-    "secondary-100": "#e11d16",
-    "secondary-90": "#eb4610",
-    "secondary-80": "#f3580d",
-    "secondary-70": "#f96a02",
-    "secondary-60": "#ff7700",
-    "secondary-50": "#fc871a",
-    "secondary-40": "#fb9a3e",
-    "secondary-30": "#fab26e",
-    "secondary-20": "#f8c99c",
-    "secondary-10": "#fee8d0",
-    "secondary-5": "#fff3e8",
-    "secondary-0": "#fffbf8",
-    "primary-100": "#a70045",
-    "primary-90": "#c60443",
-    "primary-80": "#e41a4a",
-    "primary-70": "#ff3554",
-    "primary-60": "#ff5275",
-    "primary-50": "#ff6f94",
-    "primary-40": "#ff8db0",
-    "primary-30": "#ffa9c9",
-    "primary-20": "#ffc4de",
-    "primary-10": "#ffdeef",
-    "primary-5": "#ffe8f4",
-    "primary-0": "#fff9fc",
-    "grey-20": "#d2d2d6",
-    transparent: "transparent",
-    white: "white",
-    black: "black",
-    current: "currentColor",
+    "error-100": "var(--aquarium-colors-error-100, #aa0000)",
+    "error-90": "var(--aquarium-colors-error-90, #b90000)",
+    "error-80": "var(--aquarium-colors-error-80, #c50001)",
+    "error-70": "var(--aquarium-colors-error-70, #d80005)",
+    "error-60": "var(--aquarium-colors-error-60, #e70000)",
+    "error-50": "var(--aquarium-colors-error-50, #e62728)",
+    "error-40": "var(--aquarium-colors-error-40, #e0504f)",
+    "error-30": "var(--aquarium-colors-error-30, #ed7975)",
+    "error-20": "var(--aquarium-colors-error-20, #ffadb3)",
+    "error-10": "var(--aquarium-colors-error-10, #ffcbd2)",
+    "error-5": "var(--aquarium-colors-error-5, #fee8e7)",
+    "error-0": "var(--aquarium-colors-error-0, #fef2f1)",
+    "warning-100": "var(--aquarium-colors-warning-100, #fe6d00)",
+    "warning-90": "var(--aquarium-colors-warning-90, #ff9003)",
+    "warning-80": "var(--aquarium-colors-warning-80, #fd9f00)",
+    "warning-70": "var(--aquarium-colors-warning-70, #ffb300)",
+    "warning-60": "var(--aquarium-colors-warning-60, #ffc107)",
+    "warning-50": "var(--aquarium-colors-warning-50, #fdc926)",
+    "warning-40": "var(--aquarium-colors-warning-40, #fdd44d)",
+    "warning-30": "var(--aquarium-colors-warning-30, #fddf81)",
+    "warning-20": "var(--aquarium-colors-warning-20, #feebb2)",
+    "warning-10": "var(--aquarium-colors-warning-10, #fff2cd)",
+    "warning-5": "var(--aquarium-colors-warning-5, #fff8ea)",
+    "warning-0": "var(--aquarium-colors-warning-0, #fffdf9)",
+    "success-100": "var(--aquarium-colors-success-100, #006f00)",
+    "success-90": "var(--aquarium-colors-success-90, #008e00)",
+    "success-80": "var(--aquarium-colors-success-80, #009f00)",
+    "success-70": "var(--aquarium-colors-success-70, #00b300)",
+    "success-60": "var(--aquarium-colors-success-60, #00c300)",
+    "success-50": "var(--aquarium-colors-success-50, #40ce37)",
+    "success-40": "var(--aquarium-colors-success-40, #60db57)",
+    "success-30": "var(--aquarium-colors-success-30, #89eb80)",
+    "success-20": "var(--aquarium-colors-success-20, #afffa7)",
+    "success-10": "var(--aquarium-colors-success-10, #cbffc9)",
+    "success-5": "var(--aquarium-colors-success-5, #ecf7ed)",
+    "success-0": "var(--aquarium-colors-success-0, #f5faf5)",
+    "info-100": "var(--aquarium-colors-info-100, #02569a)",
+    "info-90": "var(--aquarium-colors-info-90, #0174ba)",
+    "info-80": "var(--aquarium-colors-info-80, #0788d1)",
+    "info-70": "var(--aquarium-colors-info-70, #0399e3)",
+    "info-60": "var(--aquarium-colors-info-60, #02a8f3)",
+    "info-50": "var(--aquarium-colors-info-50, #28b4f4)",
+    "info-40": "var(--aquarium-colors-info-40, #4cc2f7)",
+    "info-30": "var(--aquarium-colors-info-30, #7fd1f7)",
+    "info-20": "var(--aquarium-colors-info-20, #b4e5fb)",
+    "info-10": "var(--aquarium-colors-info-10, #e0f5fe)",
+    "info-5": "var(--aquarium-colors-info-5, #effaff)",
+    "info-0": "var(--aquarium-colors-info-0, #f9fdff)",
+    "grey-100": "var(--aquarium-colors-grey-100, #19191d)",
+    "grey-90": "var(--aquarium-colors-grey-90, #292a31)",
+    "grey-80": "var(--aquarium-colors-grey-80, #3a3a44)",
+    "grey-70": "var(--aquarium-colors-grey-70, #4a4b57)",
+    "grey-60": "var(--aquarium-colors-grey-60, #5a5b6a)",
+    "grey-50": "var(--aquarium-colors-grey-50, #787885)",
+    "grey-40": "var(--aquarium-colors-grey-40, #9696a0)",
+    "grey-30": "var(--aquarium-colors-grey-30, #b4b4bb)",
+    "grey-10": "var(--aquarium-colors-grey-10, #e1e1e3)",
+    "grey-5": "var(--aquarium-colors-grey-5, #ededf0)",
+    "grey-0": "var(--aquarium-colors-grey-0, #f7f7fa)",
+    "secondary-100": "var(--aquarium-colors-secondary-100, #e11d16)",
+    "secondary-90": "var(--aquarium-colors-secondary-90, #eb4610)",
+    "secondary-80": "var(--aquarium-colors-secondary-80, #f3580d)",
+    "secondary-70": "var(--aquarium-colors-secondary-70, #f96a02)",
+    "secondary-60": "var(--aquarium-colors-secondary-60, #ff7700)",
+    "secondary-50": "var(--aquarium-colors-secondary-50, #fc871a)",
+    "secondary-40": "var(--aquarium-colors-secondary-40, #fb9a3e)",
+    "secondary-30": "var(--aquarium-colors-secondary-30, #fab26e)",
+    "secondary-20": "var(--aquarium-colors-secondary-20, #f8c99c)",
+    "secondary-10": "var(--aquarium-colors-secondary-10, #fee8d0)",
+    "secondary-5": "var(--aquarium-colors-secondary-5, #fff3e8)",
+    "secondary-0": "var(--aquarium-colors-secondary-0, #fffbf8)",
+    "primary-100": "var(--aquarium-colors-primary-100, #a70045)",
+    "primary-90": "var(--aquarium-colors-primary-90, #c60443)",
+    "primary-80": "var(--aquarium-colors-primary-80, #e41a4a)",
+    "primary-70": "var(--aquarium-colors-primary-70, #ff3554)",
+    "primary-60": "var(--aquarium-colors-primary-60, #ff5275)",
+    "primary-50": "var(--aquarium-colors-primary-50, #ff6f94)",
+    "primary-40": "var(--aquarium-colors-primary-40, #ff8db0)",
+    "primary-30": "var(--aquarium-colors-primary-30, #ffa9c9)",
+    "primary-20": "var(--aquarium-colors-primary-20, #ffc4de)",
+    "primary-10": "var(--aquarium-colors-primary-10, #ffdeef)",
+    "primary-5": "var(--aquarium-colors-primary-5, #ffe8f4)",
+    "primary-0": "var(--aquarium-colors-primary-0, #fff9fc)",
+    "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
+    transparent: "var(--aquarium-colors-transparent, transparent)",
+    white: "var(--aquarium-colors-white, white)",
+    black: "var(--aquarium-colors-black, black)",
+    current: "var(--aquarium-colors-current, currentColor)",
     "navyBlue-100": "#30375E"
   },
   gap: {
@@ -6008,7 +6009,7 @@ var Dismiss = (_a) => {
   var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
   return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames2(
-      tw("[&>button]:p-0 flex", {
+      tw("self-start [&>button]:p-0 flex", {
         "[&>button]:text-grey-50": variant === "default",
         "[&>button]:text-error-20": variant === "danger"
       }),
@@ -6840,6 +6841,9 @@ var ghostButtonStyle = tw(
 );
 var linkStyle = classNames(ghostButtonStyle, tw("visited:text-primary-80 focusable"));
 
+// src/utils/string.ts
+var capitalize = (a) => a.charAt(0).toUpperCase() + a.slice(1);
+
 // src/molecules/Button/Button.tsx
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_loading2 = __toESM(require_loading());
@@ -6950,6 +6954,12 @@ var asButton = (Component, isDropdownButton) => {
       }, props), {
         className: classNames(
           "Aquarium-Button",
+          {
+            [`Aquarium-Button.${capitalize(camelCase(kind))}`]: !isIconOnlyButton,
+            "Aquarium-Button.Icon": isIconOnlyButton,
+            "Aquarium-Dense": dense,
+            "Aquarium-Busy": loading2
+          },
           UNSAFE_className,
           !isIconOnlyButton && COLOR_CLASSNAMES[kind],
           tw(

package/dist/tailwind.config.js

@@ -3,7 +3,7 @@ const plugin = require('tailwindcss/plugin');
 const defaultTheme = require('tailwindcss/defaultTheme');
 const _ = require('lodash');
 const { theme } = require('./src/js/resolveTheme');
-
+const { themeTransformer } = require('./themeTransformer');
 /*
  * Shortens a given spacing key to a minimal differentiable string
  * example for resulting classnames with/without the shortening:
@@ -16,53 +16,55 @@ const spacing = _.reduce(theme.spacing, (acc, { px }, key) => ({ ...acc, [shorte
   '1px': '1px',
 });
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        'navyBlue-100': '#30375E',
-      },
-      zIndex: {
-        modal: '100',
-      },
-    },
-    borderRadius: {
-      ...defaultTheme.borderRadius,
-      DEFAULT: '4px',
-    },
-    colors: { ...theme.colors, transparent: 'transparent', white: 'white', black: 'black', current: 'currentColor' },
-    spacing,
-    margin: {
-      ...spacing,
-      auto: 'auto',
-      ..._.reduce(spacing, (acc, value, key) => ({ ...acc, [`-${key}`]: `-${value}` })),
-    },
-    boxShadow: {
-      ...theme.elevations,
-      whiteInset: 'inset 0 0 0 3px rgba(255,255,255,1)',
-    },
-    screens: {
-      // "default" here means the width from 0px to "xs"
-      default: '0px',
-      xs: '320px',
-      sm: '672px',
-      md: '1056px',
-      lg: '1312px',
-      xl: '1536px',
+const resolvedTheme = themeTransformer({
+  extend: {
+    colors: {
+      'navyBlue-100': '#30375E',
     },
-    animation: {
-      ...defaultTheme.animation,
-      'positioner-fade-in': 'positioner-fade-in 300ms ease-in-out',
+    zIndex: {
+      modal: '100',
     },
-    keyframes: {
-      ...defaultTheme.keyframes,
-      'positioner-fade-in': {
-        from: { opacity: '0' },
-        to: { opacity: '1' },
-      },
+  },
+  borderRadius: {
+    ...defaultTheme.borderRadius,
+    DEFAULT: '4px',
+  },
+  colors: { ...theme.colors, transparent: 'transparent', white: 'white', black: 'black', current: 'currentColor' },
+  spacing,
+  margin: {
+    ...spacing,
+    auto: 'auto',
+    ..._.reduce(spacing, (acc, value, key) => ({ ...acc, [`-${key}`]: `-${value}` })),
+  },
+  boxShadow: {
+    ...theme.elevations,
+    whiteInset: 'inset 0 0 0 3px rgba(255,255,255,1)',
+  },
+  screens: {
+    // "default" here means the width from 0px to "xs"
+    default: '0px',
+    xs: '320px',
+    sm: '672px',
+    md: '1056px',
+    lg: '1312px',
+    xl: '1536px',
+  },
+  animation: {
+    ...defaultTheme.animation,
+    'positioner-fade-in': 'positioner-fade-in 300ms ease-in-out',
+  },
+  keyframes: {
+    ...defaultTheme.keyframes,
+    'positioner-fade-in': {
+      from: { opacity: '0' },
+      to: { opacity: '1' },
     },
   },
+});
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: resolvedTheme,
   // https://tailwindcss.com/docs/configuring-variants#ordering-variants
   variants: {
     backgroundColor: ['odd', 'even', 'hover', 'group-hover', 'active', 'disabled', 'focus'],