@aivenio/aquarium 1.35.0 → 1.36.1

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 11 Aug 2023 13:22:26 GMT
+// Generated on Thu, 24 Aug 2023 11:17:49 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;

package/dist/_variables_timescale.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 11 Aug 2023 13:22:26 GMT
+// Generated on Thu, 24 Aug 2023 11:17:50 GMT
 
 $border-radius-none: 0px;
 $border-radius-sm: 0.125rem;

package/dist/atoms.cjs

@@ -7025,7 +7025,7 @@ var Container = import_react23.default.forwardRef(
       ref,
       className: classNames(
         tw("inline-flex items-center rounded-sm transition whitespace-nowrap", {
-          "typography-small py-2 px-3 gap-x-3": !dense,
+          "typography-small py-2 px-3 gap-x-3 leading-tight": !dense,
           "typography-caption py-1 px-2 gap-x-2": dense
         }),
         className

package/dist/atoms.mjs

@@ -6987,7 +6987,7 @@ var Container = React19.forwardRef(
       ref,
       className: classNames(
         tw("inline-flex items-center rounded-sm transition whitespace-nowrap", {
-          "typography-small py-2 px-3 gap-x-3": !dense,
+          "typography-small py-2 px-3 gap-x-3 leading-tight": !dense,
           "typography-caption py-1 px-2 gap-x-2": dense
         }),
         className

package/dist/src/atoms/Chip/Chip.js

@@ -14,11 +14,11 @@ import { classNames, tw } from '../../../src/utils/tailwind';
 const Container = React.forwardRef((_a, ref) => {
     var { dense = false, className, children } = _a, rest = __rest(_a, ["dense", "className", "children"]);
     return (React.createElement("span", Object.assign({ ref: ref, className: classNames(tw('inline-flex items-center rounded-sm transition whitespace-nowrap', {
-            'typography-small py-2 px-3 gap-x-3': !dense,
+            'typography-small py-2 px-3 gap-x-3 leading-tight': !dense,
             'typography-caption py-1 px-2 gap-x-2': dense,
         }), className) }, rest), children));
 });
 export const Chip = {
     Container,
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9DaGlwL0NoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFTcEQsTUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDaEMsQ0FBQyxFQUErQyxFQUFFLEdBQUcsRUFBRSxFQUFFO1FBQXhELEVBQUUsS0FBSyxHQUFHLEtBQUssRUFBRSxTQUFTLEVBQUUsUUFBUSxPQUFXLEVBQU4sSUFBSSxjQUE3QyxrQ0FBK0MsQ0FBRjtJQUFZLE9BQUEsQ0FDeEQsNENBQ0UsR0FBRyxFQUFFLEdBQUcsRUFDUixTQUFTLEVBQUUsVUFBVSxDQUNuQixFQUFFLENBQUMsa0VBQWtFLEVBQUU7WUFDckUsb0NBQW9DLEVBQUUsQ0FBQyxLQUFLO1lBQzVDLHNDQUFzQyxFQUFFLEtBQUs7U0FDOUMsQ0FBQyxFQUNGLFNBQVMsQ0FDVixJQUNHLElBQUksR0FFUCxRQUFRLENBQ0osQ0FDUixDQUFBO0NBQUEsQ0FDRixDQUFDO0FBTUYsTUFBTSxDQUFDLE1BQU0sSUFBSSxHQUFzQjtJQUNyQyxTQUFTO0NBQ1YsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9DaGlwL0NoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFTcEQsTUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDaEMsQ0FBQyxFQUErQyxFQUFFLEdBQUcsRUFBRSxFQUFFO1FBQXhELEVBQUUsS0FBSyxHQUFHLEtBQUssRUFBRSxTQUFTLEVBQUUsUUFBUSxPQUFXLEVBQU4sSUFBSSxjQUE3QyxrQ0FBK0MsQ0FBRjtJQUFZLE9BQUEsQ0FDeEQsNENBQ0UsR0FBRyxFQUFFLEdBQUcsRUFDUixTQUFTLEVBQUUsVUFBVSxDQUNuQixFQUFFLENBQUMsa0VBQWtFLEVBQUU7WUFDckUsa0RBQWtELEVBQUUsQ0FBQyxLQUFLO1lBQzFELHNDQUFzQyxFQUFFLEtBQUs7U0FDOUMsQ0FBQyxFQUNGLFNBQVMsQ0FDVixJQUNHLElBQUksR0FFUCxRQUFRLENBQ0osQ0FDUixDQUFBO0NBQUEsQ0FDRixDQUFDO0FBTUYsTUFBTSxDQUFDLE1BQU0sSUFBSSxHQUFzQjtJQUNyQyxTQUFTO0NBQ1YsQ0FBQyJ9

package/dist/src/atoms/Section/Section.d.ts

@@ -1,12 +1,18 @@
 import React from 'react';
 import { Box } from '../../../src/molecules/Box/Box';
+import { Icon } from '../../../src/molecules/Icon/Icon';
 import { Typography } from '../../../src/molecules/Typography/Typography';
 declare type DivProps = React.HTMLProps<HTMLDivElement>;
 declare type ComposedSectionProps = {
-    Header: React.FC<DivProps>;
-    TitleContainer: React.FC<DivProps>;
+    Header: React.FC<DivProps & {
+        collapsible: boolean;
+    }>;
+    TitleContainer: React.FC<DivProps & {
+        collapsible: boolean;
+    }>;
+    Toggle: React.FC<Omit<React.ComponentProps<typeof Icon>, 'icon'>>;
     Title: React.FC<React.ComponentProps<typeof Typography.Subheading>>;
-    Subtitle: React.FC<React.ComponentProps<typeof Typography.SmallText>>;
+    Subtitle: React.FC<React.ComponentProps<typeof Typography.Small>>;
     Actions: React.FC<DivProps>;
     Body: React.FC<DivProps>;
 };

package/dist/src/atoms/Section/Section.js

@@ -11,28 +11,31 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { Box } from '../../../src/molecules/Box/Box';
+import { Icon } from '../../../src/molecules/Icon/Icon';
 import { Typography } from '../../../src/molecules/Typography/Typography';
 import { Typography as BaseTypography } from '../../../src/atoms/Typography/Typography';
 import { classNames, tw } from '../../../src/utils/tailwind';
+import caretUp from '../../../src/icons/caretUp';
 export const Section = (_a) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
     return (React.createElement(Box, Object.assign({ borderColor: "grey-5", borderWidth: "1px" }, rest), children));
 };
 Section.Header = (_a) => {
-    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('px-6 py-5 flex gap-5 justify-between items-center'), className) }), children));
+    var { children, className, collapsible } = _a, rest = __rest(_a, ["children", "className", "collapsible"]);
+    return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('px-6 py-5 flex gap-5 justify-between items-center', { 'bg-grey-0': collapsible }), className) }), children));
 };
 Section.TitleContainer = (_a) => {
-    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('flex flex-col grow gap-2'), className) }), children));
+    var { children, className, collapsible } = _a, rest = __rest(_a, ["children", "className", "collapsible"]);
+    return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('grow grid grid-cols-[auto_1fr] gap-y-2 gap-x-3 items-center', { 'cursor-pointer': collapsible }), className) }), children));
 };
+Section.Toggle = (props) => React.createElement(Icon, Object.assign({}, props, { icon: caretUp, height: 22, width: 22 }));
 Section.Title = (_a) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
-    return (React.createElement(Typography.Subheading, Object.assign({}, rest, { color: "black" }), children));
+    return (React.createElement(Typography.Large, Object.assign({}, rest, { htmlTag: "h2", color: "black", className: "flex gap-3 items-center" }), children));
 };
 Section.Subtitle = (_a) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
-    return (React.createElement(Typography.SmallText, Object.assign({}, rest, { color: "grey-70" }), children));
+    return (React.createElement(Typography.Small, Object.assign({}, rest, { color: "grey-70" }), children));
 };
 Section.Actions = (_a) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
@@ -43,4 +46,4 @@ Section.Body = (_a) => {
     return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('p-6'), className) }),
         React.createElement(BaseTypography, { htmlTag: "div", color: "grey-70" }, children)));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9TZWN0aW9uL1NlY3Rpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFFakUsT0FBTyxFQUFFLFVBQVUsSUFBSSxjQUFjLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUUvRSxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBYXBELE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBc0UsQ0FBQyxFQUFxQixFQUFFLEVBQUU7UUFBekIsRUFBRSxRQUFRLE9BQVcsRUFBTixJQUFJLGNBQW5CLFlBQXFCLENBQUY7SUFBTyxPQUFBLENBQ25ILG9CQUFDLEdBQUcsa0JBQUMsV0FBVyxFQUFDLFFBQVEsRUFBQyxXQUFXLEVBQUMsS0FBSyxJQUFLLElBQUksR0FDakQsUUFBUSxDQUNMLENBQ1AsQ0FBQTtDQUFBLENBQUM7QUFFRixPQUFPLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBZ0MsRUFBRSxFQUFFO1FBQXBDLEVBQUUsUUFBUSxFQUFFLFNBQVMsT0FBVyxFQUFOLElBQUksY0FBOUIseUJBQWdDLENBQUY7SUFBTyxPQUFBLENBQ3JELDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyxtREFBbUQsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxLQUNyRyxRQUFRLENBQ0wsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLE9BQU8sQ0FBQyxjQUFjLEdBQUcsQ0FBQyxFQUFnQyxFQUFFLEVBQUU7UUFBcEMsRUFBRSxRQUFRLEVBQUUsU0FBUyxPQUFXLEVBQU4sSUFBSSxjQUE5Qix5QkFBZ0MsQ0FBRjtJQUFPLE9BQUEsQ0FDN0QsNkNBQVMsSUFBSSxJQUFFLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLDBCQUEwQixDQUFDLEVBQUUsU0FBUyxDQUFDLEtBQzVFLFFBQVEsQ0FDTCxDQUNQLENBQUE7Q0FBQSxDQUFDO0FBRUYsT0FBTyxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQXFCLEVBQUUsRUFBRTtRQUF6QixFQUFFLFFBQVEsT0FBVyxFQUFOLElBQUksY0FBbkIsWUFBcUIsQ0FBRjtJQUFPLE9BQUEsQ0FDekMsb0JBQUMsVUFBVSxDQUFDLFVBQVUsb0JBQUssSUFBSSxJQUFFLEtBQUssRUFBQyxPQUFPLEtBQzNDLFFBQVEsQ0FDYSxDQUN6QixDQUFBO0NBQUEsQ0FBQztBQUVGLE9BQU8sQ0FBQyxRQUFRLEdBQUcsQ0FBQyxFQUFxQixFQUFFLEVBQUU7UUFBekIsRUFBRSxRQUFRLE9BQVcsRUFBTixJQUFJLGNBQW5CLFlBQXFCLENBQUY7SUFBTyxPQUFBLENBQzVDLG9CQUFDLFVBQVUsQ0FBQyxTQUFTLG9CQUFLLElBQUksSUFBRSxLQUFLLEVBQUMsU0FBUyxLQUM1QyxRQUFRLENBQ1ksQ0FDeEIsQ0FBQTtDQUFBLENBQUM7QUFFRixPQUFPLENBQUMsT0FBTyxHQUFHLENBQUMsRUFBZ0MsRUFBRSxFQUFFO1FBQXBDLEVBQUUsUUFBUSxFQUFFLFNBQVMsT0FBVyxFQUFOLElBQUksY0FBOUIseUJBQWdDLENBQUY7SUFBTyxPQUFBLENBQ3RELDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxLQUMxRSxRQUFRLENBQ0wsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLE9BQU8sQ0FBQyxJQUFJLEdBQUcsQ0FBQyxFQUFnQyxFQUFFLEVBQUU7UUFBcEMsRUFBRSxRQUFRLEVBQUUsU0FBUyxPQUFXLEVBQU4sSUFBSSxjQUE5Qix5QkFBZ0MsQ0FBRjtJQUFPLE9BQUEsQ0FDbkQsNkNBQVMsSUFBSSxJQUFFLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxFQUFFLFNBQVMsQ0FBQztRQUN4RCxvQkFBQyxjQUFjLElBQUMsT0FBTyxFQUFDLEtBQUssRUFBQyxLQUFLLEVBQUMsU0FBUyxJQUMxQyxRQUFRLENBQ00sQ0FDYixDQUNQLENBQUE7Q0FBQSxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9TZWN0aW9uL1NlY3Rpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRWpFLE9BQU8sRUFBRSxVQUFVLElBQUksY0FBYyxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFFL0UsT0FBTyxFQUFFLFVBQVUsRUFBRSxFQUFFLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUVwRCxPQUFPLE9BQU8sTUFBTSxtQkFBbUIsQ0FBQztBQWN4QyxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQXNFLENBQUMsRUFBcUIsRUFBRSxFQUFFO1FBQXpCLEVBQUUsUUFBUSxPQUFXLEVBQU4sSUFBSSxjQUFuQixZQUFxQixDQUFGO0lBQU8sT0FBQSxDQUNuSCxvQkFBQyxHQUFHLGtCQUFDLFdBQVcsRUFBQyxRQUFRLEVBQUMsV0FBVyxFQUFDLEtBQUssSUFBSyxJQUFJLEdBQ2pELFFBQVEsQ0FDTCxDQUNQLENBQUE7Q0FBQSxDQUFDO0FBRUYsT0FBTyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQTZDLEVBQUUsRUFBRTtRQUFqRCxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsV0FBVyxPQUFXLEVBQU4sSUFBSSxjQUEzQyx3Q0FBNkMsQ0FBRjtJQUFPLE9BQUEsQ0FDbEUsNkNBQ00sSUFBSSxJQUNSLFNBQVMsRUFBRSxVQUFVLENBQ25CLEVBQUUsQ0FBQyxtREFBbUQsRUFBRSxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsQ0FBQyxFQUNyRixTQUFTLENBQ1YsS0FFQSxRQUFRLENBQ0wsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLE9BQU8sQ0FBQyxjQUFjLEdBQUcsQ0FBQyxFQUE2QyxFQUFFLEVBQUU7UUFBakQsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLFdBQVcsT0FBVyxFQUFOLElBQUksY0FBM0Msd0NBQTZDLENBQUY7SUFBTyxPQUFBLENBQzFFLDZDQUNNLElBQUksSUFDUixTQUFTLEVBQUUsVUFBVSxDQUNuQixFQUFFLENBQUMsNkRBQTZELEVBQUUsRUFBRSxnQkFBZ0IsRUFBRSxXQUFXLEVBQUUsQ0FBQyxFQUNwRyxTQUFTLENBQ1YsS0FFQSxRQUFRLENBQ0wsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLE9BQU8sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLG9CQUFDLElBQUksb0JBQUssS0FBSyxJQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxJQUFJLENBQUM7QUFFdEYsT0FBTyxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQXFCLEVBQUUsRUFBRTtRQUF6QixFQUFFLFFBQVEsT0FBVyxFQUFOLElBQUksY0FBbkIsWUFBcUIsQ0FBRjtJQUFPLE9BQUEsQ0FDekMsb0JBQUMsVUFBVSxDQUFDLEtBQUssb0JBQUssSUFBSSxJQUFFLE9BQU8sRUFBQyxJQUFJLEVBQUMsS0FBSyxFQUFDLE9BQU8sRUFBQyxTQUFTLEVBQUMseUJBQXlCLEtBQ3ZGLFFBQVEsQ0FDUSxDQUNwQixDQUFBO0NBQUEsQ0FBQztBQUVGLE9BQU8sQ0FBQyxRQUFRLEdBQUcsQ0FBQyxFQUFxQixFQUFFLEVBQUU7UUFBekIsRUFBRSxRQUFRLE9BQVcsRUFBTixJQUFJLGNBQW5CLFlBQXFCLENBQUY7SUFBTyxPQUFBLENBQzVDLG9CQUFDLFVBQVUsQ0FBQyxLQUFLLG9CQUFLLElBQUksSUFBRSxLQUFLLEVBQUMsU0FBUyxLQUN4QyxRQUFRLENBQ1EsQ0FDcEIsQ0FBQTtDQUFBLENBQUM7QUFFRixPQUFPLENBQUMsT0FBTyxHQUFHLENBQUMsRUFBZ0MsRUFBRSxFQUFFO1FBQXBDLEVBQUUsUUFBUSxFQUFFLFNBQVMsT0FBVyxFQUFOLElBQUksY0FBOUIseUJBQWdDLENBQUY7SUFBTyxPQUFBLENBQ3RELDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxLQUMxRSxRQUFRLENBQ0wsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLE9BQU8sQ0FBQyxJQUFJLEdBQUcsQ0FBQyxFQUFnQyxFQUFFLEVBQUU7UUFBcEMsRUFBRSxRQUFRLEVBQUUsU0FBUyxPQUFXLEVBQU4sSUFBSSxjQUE5Qix5QkFBZ0MsQ0FBRjtJQUFPLE9BQUEsQ0FDbkQsNkNBQVMsSUFBSSxJQUFFLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxFQUFFLFNBQVMsQ0FBQztRQUN4RCxvQkFBQyxjQUFjLElBQUMsT0FBTyxFQUFDLEtBQUssRUFBQyxLQUFLLEVBQUMsU0FBUyxJQUMxQyxRQUFRLENBQ00sQ0FDYixDQUNQLENBQUE7Q0FBQSxDQUFDIn0=

package/dist/src/molecules/Modal/Modal.d.ts

@@ -6,7 +6,7 @@ export declare type ModalProps = {
     /** Modal title */
     title: string;
     /** Optional Modal subtitle */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /**
      * Optional image source for modal header.
      */

package/dist/src/molecules/Section/Section.d.ts

@@ -1,6 +1,33 @@
 import React from 'react';
+import { type StatusChipProps } from '../../../src/molecules/Chip/Chip';
+import { type TagLabelProps } from '../../../src/molecules/TagLabel/TagLabel';
 import { type AsyncActionType, type LinkActionType } from '../../../types/ActionType';
+import { type AllOrNone } from '../../../types/utils';
+declare type CollapsibleProps = AllOrNone<{
+    /**
+     * When true, section content can be toggled to be collapsed or expanded.
+     */
+    collapsible: true;
+    /**
+     * Default value for expanded state for section.
+     * @default false.
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Controlled value for expanded state for section.
+     */
+    collapsed?: boolean;
+    /**
+     * Callback, that will get called whenever section is collapsed or expanded.
+     * @param collapsed True, if section was collapsed
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+}>;
 export declare type SectionProps = {
+    title?: never;
+    subtitle?: never;
+    actions?: never;
+} | (CollapsibleProps & {
     /** Section's title */
     title: string;
     /** Optional section's subtitle. */
@@ -10,9 +37,18 @@ export declare type SectionProps = {
      * This can either be a callback function or a link.
      */
     actions?: Array<AsyncActionType | LinkActionType> | AsyncActionType | LinkActionType;
-} | {
-    title?: never;
-    subtitle?: never;
-    actions?: never;
-};
+    /**
+     * Optional tag can have a "title"
+     */
+    tag?: Pick<TagLabelProps, 'title' | 'variant'>;
+    /**
+     * Optional badge as number | string
+     */
+    badge?: number | string;
+    /**
+     * Optional chip can have a "text" and a "status"
+     */
+    chip?: Pick<StatusChipProps, 'status' | 'text'>;
+});
 export declare const Section: React.FC<React.PropsWithChildren<SectionProps>>;
+export {};

package/dist/src/molecules/Section/Section.js

@@ -1,20 +1,78 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
+import { useId } from '@react-aria/utils';
+import { animated, useSpring } from '@react-spring/web';
 import castArray from 'lodash/castArray';
+import isUndefined from 'lodash/isUndefined';
+import noop from 'lodash/noop';
 import omit from 'lodash/omit';
+import partialTheme from '../../../tailwind.theme.json';
 import { Button } from '../../../src/molecules/Button/Button';
-import { Divider } from '../../../src/molecules/Divider/Divider';
+import { Chip, StatusChip } from '../../../src/molecules/Chip/Chip';
+import { TagLabel } from '../../../src/molecules/TagLabel/TagLabel';
 import { Section as BaseSection } from '../../../src/atoms/Section/Section';
 import { isLink } from '../../../src/utils/link';
-export const Section = ({ title, subtitle, actions, children }) => (React.createElement(BaseSection, { className: "Aquarium-Section" },
-    title && (React.createElement(React.Fragment, null,
-        React.createElement(BaseSection.Header, null,
-            React.createElement(BaseSection.TitleContainer, null,
-                React.createElement(BaseSection.Title, null, title),
-                subtitle && React.createElement(BaseSection.Subtitle, null, subtitle)),
-            React.createElement(BaseSection.Actions, null, actions &&
-                castArray(actions)
-                    .filter(Boolean)
-                    .map((action) => !isLink(action) ? (React.createElement(Button.Secondary, Object.assign({ key: action.text }, omit(action, 'text')), action.text)) : (React.createElement(Button.ExternalLink, Object.assign({ key: action.text, kind: "secondary" }, omit(action, 'text')), action.text))))),
-        React.createElement(Divider, null))),
-    React.createElement(BaseSection.Body, null, children)));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxTQUFTLE1BQU0sa0JBQWtCLENBQUM7QUFDekMsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBRS9CLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFFeEQsT0FBTyxFQUFFLE9BQU8sSUFBSSxXQUFXLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUVuRSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUF1QnhDLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBb0QsQ0FBQyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUNsSCxvQkFBQyxXQUFXLElBQUMsU0FBUyxFQUFDLGtCQUFrQjtJQUN0QyxLQUFLLElBQUksQ0FDUjtRQUNFLG9CQUFDLFdBQVcsQ0FBQyxNQUFNO1lBQ2pCLG9CQUFDLFdBQVcsQ0FBQyxjQUFjO2dCQUN6QixvQkFBQyxXQUFXLENBQUMsS0FBSyxRQUFFLEtBQUssQ0FBcUI7Z0JBQzdDLFFBQVEsSUFBSSxvQkFBQyxXQUFXLENBQUMsUUFBUSxRQUFFLFFBQVEsQ0FBd0IsQ0FDekM7WUFDN0Isb0JBQUMsV0FBVyxDQUFDLE9BQU8sUUFDakIsT0FBTztnQkFDTixTQUFTLENBQUMsT0FBTyxDQUFDO3FCQUNmLE1BQU0sQ0FBQyxPQUFPLENBQUM7cUJBQ2YsR0FBRyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FDZCxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FDaEIsb0JBQUMsTUFBTSxDQUFDLFNBQVMsa0JBQUMsR0FBRyxFQUFFLE1BQU0sQ0FBQyxJQUFJLElBQU0sSUFBSSxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUMsR0FDekQsTUFBTSxDQUFDLElBQUksQ0FDSyxDQUNwQixDQUFDLENBQUMsQ0FBQyxDQUNGLG9CQUFDLE1BQU0sQ0FBQyxZQUFZLGtCQUFDLEdBQUcsRUFBRSxNQUFNLENBQUMsSUFBSSxFQUFFLElBQUksRUFBQyxXQUFXLElBQUssSUFBSSxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUMsR0FDN0UsTUFBTSxDQUFDLElBQUksQ0FDUSxDQUN2QixDQUNGLENBQ2UsQ0FDSDtRQUNyQixvQkFBQyxPQUFPLE9BQUcsQ0FDVixDQUNKO0lBQ0Qsb0JBQUMsV0FBVyxDQUFDLElBQUksUUFBRSxRQUFRLENBQW9CLENBQ25DLENBQ2YsQ0FBQyJ9
+import { tw } from '../../../src/utils/tailwind';
+import { useMeasure } from '../../../src/utils/useMeasure';
+export const Section = (props) => {
+    var _a, _b, _c;
+    const { title, subtitle, actions, children } = props;
+    const _collapsible = title ? (_a = props.collapsible) !== null && _a !== void 0 ? _a : false : false;
+    const _collapsed = title ? props.collapsed : undefined;
+    // By default, section is always expanded
+    const _defaultCollapsed = title ? (_b = props.defaultCollapsed) !== null && _b !== void 0 ? _b : false : false;
+    const [isCollapsed, setCollapsed] = React.useState(_collapsed !== null && _collapsed !== void 0 ? _collapsed : _defaultCollapsed);
+    const [ref, { height }] = useMeasure();
+    // Figure out the correct callback for managing collapsed state.
+    const _onCollapsedChanged = title && props.collapsible ? (_c = props.onCollapsedChange) !== null && _c !== void 0 ? _c : setCollapsed : noop;
+    if (title && !isUndefined(props.collapsed) && props.collapsed !== isCollapsed) {
+        setCollapsed(props.collapsed);
+    }
+    const handleTitleClick = () => {
+        _onCollapsedChanged(!isCollapsed);
+    };
+    const targetHeight = isCollapsed ? '0px' : `${height !== null && height !== void 0 ? height : 0}px`;
+    const _d = useSpring({
+        height: height !== null ? targetHeight : undefined,
+        opacity: isCollapsed ? 0 : 1,
+        transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
+        backgroundColor: isCollapsed ? partialTheme.backgroundColor['grey-0'] : partialTheme.backgroundColor['grey-5'],
+        config: {
+            duration: 150,
+        },
+        immediate: !_collapsible,
+    }), { transform, backgroundColor } = _d, spring = __rest(_d, ["transform", "backgroundColor"]);
+    const toggleId = useId();
+    const regionId = useId();
+    return (React.createElement(BaseSection, { className: "Aquarium-Section" },
+        title && (React.createElement(React.Fragment, null,
+            React.createElement(BaseSection.Header, { collapsible: _collapsible },
+                React.createElement(BaseSection.TitleContainer, { role: _collapsible ? 'button' : undefined, id: toggleId, collapsible: _collapsible, onClick: handleTitleClick, "aria-expanded": !isCollapsed, "aria-controls": regionId },
+                    _collapsible && (React.createElement(animated.div, { style: { transform } },
+                        React.createElement(BaseSection.Toggle, null))),
+                    React.createElement(BaseSection.Title, null,
+                        title,
+                        props.tag && React.createElement(TagLabel, Object.assign({}, props.tag)),
+                        props.badge && React.createElement(Chip, { text: props.badge }),
+                        props.chip && React.createElement(StatusChip, Object.assign({}, props.chip))),
+                    subtitle && (React.createElement(BaseSection.Subtitle, { className: tw('row-start-2', { 'col-start-2': _collapsible }) }, subtitle))),
+                React.createElement(BaseSection.Actions, null, actions &&
+                    castArray(actions)
+                        .filter(Boolean)
+                        .map((action) => !isLink(action) ? (React.createElement(Button.Secondary, Object.assign({ key: action.text }, omit(action, 'text')), action.text)) : (React.createElement(Button.ExternalLink, Object.assign({ key: action.text, kind: "secondary" }, omit(action, 'text')), action.text))))),
+            React.createElement(animated.div, { className: tw(`h-[1px]`), style: { backgroundColor } }))),
+        React.createElement(animated.div, { id: regionId, role: "region", "aria-hidden": isCollapsed ? true : undefined, style: spring, className: tw({ 'overflow-hidden': _collapsible }) },
+            React.createElement("div", { ref: ref },
+                React.createElement(BaseSection.Body, null, children)))));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDMUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUN4RCxPQUFPLFNBQVMsTUFBTSxrQkFBa0IsQ0FBQztBQUN6QyxPQUFPLFdBQVcsTUFBTSxvQkFBb0IsQ0FBQztBQUM3QyxPQUFPLElBQUksTUFBTSxhQUFhLENBQUM7QUFDL0IsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBQy9CLE9BQU8sWUFBWSxNQUFNLHFCQUFxQixDQUFDO0FBRS9DLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBd0IsTUFBTSx5QkFBeUIsQ0FBQztBQUNqRixPQUFPLEVBQUUsUUFBUSxFQUFzQixNQUFNLGlDQUFpQyxDQUFDO0FBRS9FLE9BQU8sRUFBRSxPQUFPLElBQUksV0FBVyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFbkUsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUN4QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUErRGxELE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBb0QsQ0FBQyxLQUFLLEVBQUUsRUFBRTs7SUFDaEYsTUFBTSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxHQUFHLEtBQUssQ0FBQztJQUNyRCxNQUFNLFlBQVksR0FBRyxL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

package/dist/src/molecules/TagLabel/TagLabel.d.ts

@@ -1,9 +1,15 @@
 import React from 'react';
+export declare type TagLabelVariant = 'danger' | 'primary' | 'success';
 export interface TagLabelProps {
     /**
      * Tag label textual content.
      */
     'title': number | string;
+    /**
+     * Variant of the tag label. Defaults to 'primary'.
+     * @default 'primary'
+     */
+    'variant'?: TagLabelVariant;
     /**
      * If true, display dense version of the tag label.
      */

package/dist/src/molecules/TagLabel/TagLabel.js

@@ -11,11 +11,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { classNames, tw } from '../../../src/utils/tailwind';
+const getVariantClassNames = (variant = 'primary') => {
+    switch (variant) {
+        case 'danger':
+            return tw('bg-secondary-90');
+        case 'success':
+            return tw('bg-success-90');
+        case 'primary':
+        default:
+            return tw('bg-primary-90');
+    }
+};
 export const TagLabel = (_a) => {
-    var { title, dense = false } = _a, rest = __rest(_a, ["title", "dense"]);
-    return (React.createElement("span", Object.assign({}, rest, { className: classNames('Aquarium-TagLabel', tw('rounded-full text-white bg-primary-70', {
+    var { title, dense = false, variant } = _a, rest = __rest(_a, ["title", "dense", "variant"]);
+    return (React.createElement("span", Object.assign({}, rest, { className: classNames('Aquarium-TagLabel', getVariantClassNames(variant), tw('rounded-full text-white', {
             'py-2 px-4 typography-caption': !dense,
             'py-2 px-3 typography-caption-small': dense,
         })) }), title));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFnTGFiZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL1RhZ0xhYmVsL1RhZ0xhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBbUJwRCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQTRCLENBQUMsRUFBaUMsRUFBRSxFQUFFO1FBQXJDLEVBQUUsS0FBSyxFQUFFLEtBQUssR0FBRyxLQUFLLE9BQVcsRUFBTixJQUFJLGNBQS9CLGtCQUFpQyxDQUFGO0lBQU8sT0FBQSxDQUN0Riw4Q0FDTSxJQUFJLElBQ1IsU0FBUyxFQUFFLFVBQVUsQ0FDbkIsbUJBQW1CLEVBQ25CLEVBQUUsQ0FBQyx1Q0FBdUMsRUFBRTtZQUMxQyw4QkFBOEIsRUFBRSxDQUFDLEtBQUs7WUFDdEMsb0NBQW9DLEVBQUUsS0FBSztTQUM1QyxDQUFDLENBQ0gsS0FFQSxLQUFLLENBQ0QsQ0FDUixDQUFBO0NBQUEsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFnTGFiZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL1RhZ0xhYmVsL1RhZ0xhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBMEJwRCxNQUFNLG9CQUFvQixHQUFHLENBQUMsVUFBMkIsU0FBUyxFQUFVLEVBQUU7SUFDNUUsUUFBUSxPQUFPLEVBQUU7UUFDZixLQUFLLFFBQVE7WUFDWCxPQUFPLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBRS9CLEtBQUssU0FBUztZQUNaLE9BQU8sRUFBRSxDQUFDLGVBQWUsQ0FBQyxDQUFDO1FBRTdCLEtBQUssU0FBUyxDQUFDO1FBQ2Y7WUFDRSxPQUFPLEVBQUUsQ0FBQyxlQUFlLENBQUMsQ0FBQztLQUM5QjtBQUNILENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBNEIsQ0FBQyxFQUEwQyxFQUFFLEVBQUU7UUFBOUMsRUFBRSxLQUFLLEVBQUUsS0FBSyxHQUFHLEtBQUssRUFBRSxPQUFPLE9BQVcsRUFBTixJQUFJLGNBQXhDLDZCQUEwQyxDQUFGO0lBQU8sT0FBQSxDQUMvRiw4Q0FDTSxJQUFJLElBQ1IsU0FBUyxFQUFFLFVBQVUsQ0FDbkIsbUJBQW1CLEVBQ25CLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxFQUM3QixFQUFFLENBQUMseUJBQXlCLEVBQUU7WUFDNUIsOEJBQThCLEVBQUUsQ0FBQyxLQUFLO1lBQ3RDLG9DQUFvQyxFQUFFLEtBQUs7U0FDNUMsQ0FBQyxDQUNILEtBRUEsS0FBSyxDQUNELENBQ1IsQ0FBQTtDQUFBLENBQUMifQ==

package/dist/src/utils/useMeasure.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Rect = {
+    width: number | null;
+    height: number | null;
+};
+export declare function useMeasure<T extends HTMLElement>(): readonly [React.RefObject<T>, Rect];
+export {};

package/dist/src/utils/useMeasure.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export function useMeasure() {
+    const ref = React.useRef(null);
+    const [rect, setRect] = React.useState({
+        width: null,
+        height: null,
+    });
+    React.useLayoutEffect(() => {
+        if (!ref.current || !window.ResizeObserver) {
+            return;
+        }
+        const observer = new window.ResizeObserver(([entry]) => {
+            if (entry === null || entry === void 0 ? void 0 : entry.contentRect) {
+                setRect({
+                    width: entry.contentRect.width,
+                    height: entry.contentRect.height,
+                });
+            }
+        });
+        observer.observe(ref.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return [ref, rect];
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlTWVhc3VyZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy91c2VNZWFzdXJlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQU8xQixNQUFNLFVBQVUsVUFBVTtJQUN4QixNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFJLElBQUksQ0FBQyxDQUFDO0lBQ2xDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsT0FBTyxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBTztRQUMzQyxLQUFLLEVBQUUsSUFBSTtRQUNYLE1BQU0sRUFBRSxJQUFJO0tBQ2IsQ0FBQyxDQUFDO0lBRUgsS0FBSyxDQUFDLGVBQWUsQ0FBQyxHQUFHLEVBQUU7UUFDekIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsY0FBYyxFQUFFO1lBQzFDLE9BQU87U0FDUjtRQUVELE1BQU0sUUFBUSxHQUFHLElBQUksTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLEVBQUUsRUFBRTtZQUNyRCxJQUFJLEtBQUssYUFBTCxLQUFLLHVCQUFMLEtBQUssQ0FBRSxXQUFXLEVBQUU7Z0JBQ3RCLE9BQU8sQ0FBQztvQkFDTixLQUFLLEVBQUUsS0FBSyxDQUFDLFdBQVcsQ0FBQyxLQUFLO29CQUM5QixNQUFNLEVBQUUsS0FBSyxDQUFDLFdBQVcsQ0FBQyxNQUFNO2lCQUNqQyxDQUFDLENBQUM7YUFDSjtRQUNILENBQUMsQ0FBQyxDQUFDO1FBRUgsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDOUIsT0FBTyxHQUFHLEVBQUU7WUFDVixRQUFRLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDeEIsQ0FBQyxDQUFDO0lBQ0osQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRVAsT0FBTyxDQUFDLEdBQUcsRUFBRSxJQUFJLENBQVUsQ0FBQztBQUM5QixDQUFDIn0=

package/dist/styles.css

@@ -1006,6 +1006,9 @@ input[type='number'].no-arrows {
 .row-start-1{
   grid-row-start: 1;
 }
+.row-start-2{
+  grid-row-start: 2;
+}
 .-m-2{
   margin: -4px;
 }
@@ -1389,15 +1392,15 @@ input[type='number'].no-arrows {
 .grid-cols-3{
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+.grid-cols-\[auto_1fr\]{
+  grid-template-columns: auto 1fr;
+}
 .grid-cols-\[16px_1fr\]{
   grid-template-columns: 16px 1fr;
 }
 .grid-cols-\[1fr_auto\]{
   grid-template-columns: 1fr auto;
 }
-.grid-cols-\[auto_1fr\]{
-  grid-template-columns: auto 1fr;
-}
 .grid-cols-\[200px_1fr_200px\]{
   grid-template-columns: 200px 1fr 200px;
 }
@@ -1726,9 +1729,17 @@ input[type='number'].no-arrows {
   background-color: #ffadb3;
   background-color: var(--aquarium-colors-error-20, #ffadb3);
 }
-.bg-primary-70{
-  background-color: #5865cd;
-  background-color: var(--aquarium-colors-primary-70, #5865cd);
+.bg-secondary-90{
+  background-color: #eb4610;
+  background-color: var(--aquarium-colors-secondary-90, #eb4610);
+}
+.bg-success-90{
+  background-color: #008e00;
+  background-color: var(--aquarium-colors-success-90, #008e00);
+}
+.bg-primary-90{
+  background-color: #222f95;
+  background-color: var(--aquarium-colors-primary-90, #222f95);
 }
 .bg-gradient-to-r{
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -1911,6 +1922,9 @@ input[type='number'].no-arrows {
 .italic{
   font-style: italic;
 }
+.leading-tight{
+  line-height: 1.25;
+}
 .leading-none{
   line-height: 1;
 }

package/dist/styles_timescaledb.css

@@ -1005,6 +1005,9 @@ input[type='number'].no-arrows {
 .row-start-1{
   grid-row-start: 1;
 }
+.row-start-2{
+  grid-row-start: 2;
+}
 .-m-2{
   margin: -4px;
 }
@@ -1388,15 +1391,15 @@ input[type='number'].no-arrows {
 .grid-cols-3{
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+.grid-cols-\[auto_1fr\]{
+  grid-template-columns: auto 1fr;
+}
 .grid-cols-\[16px_1fr\]{
   grid-template-columns: 16px 1fr;
 }
 .grid-cols-\[1fr_auto\]{
   grid-template-columns: 1fr auto;
 }
-.grid-cols-\[auto_1fr\]{
-  grid-template-columns: auto 1fr;
-}
 .grid-cols-\[200px_1fr_200px\]{
   grid-template-columns: 200px 1fr 200px;
 }
@@ -1725,9 +1728,17 @@ input[type='number'].no-arrows {
   background-color: #ffadb3;
   background-color: var(--aquarium-colors-error-20, #ffadb3);
 }
-.bg-primary-70{
-  background-color: #5865cd;
-  background-color: var(--aquarium-colors-primary-70, #0399e3);
+.bg-secondary-90{
+  background-color: #eb4610;
+  background-color: var(--aquarium-colors-secondary-90, #eb4610);
+}
+.bg-success-90{
+  background-color: #008e00;
+  background-color: var(--aquarium-colors-success-90, #008e00);
+}
+.bg-primary-90{
+  background-color: #222f95;
+  background-color: var(--aquarium-colors-primary-90, #0174ba);
 }
 .bg-gradient-to-r{
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -1910,6 +1921,9 @@ input[type='number'].no-arrows {
 .italic{
   font-style: italic;
 }
+.leading-tight{
+  line-height: 1.25;
+}
 .leading-none{
   line-height: 1;
 }