@aivenio/aquarium 1.34.0 → 1.36.0

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 07 Aug 2023 09:26:50 GMT
+// Generated on Thu, 24 Aug 2023 08:02:46 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 Mon, 07 Aug 2023 09:26:50 GMT
+// Generated on Thu, 24 Aug 2023 08:02:47 GMT
 
 $border-radius-none: 0px;
 $border-radius-sm: 0.125rem;

package/dist/atoms.cjs

@@ -2364,7 +2364,7 @@ var require_loading = __commonJS({
   "src/icons/loading.js"(exports) {
     "use strict";
     var data = {
-      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
+      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
       "left": 0,
       "top": 0,
       "width": 38,
@@ -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

@@ -2358,7 +2358,7 @@ var require_loading = __commonJS({
   "src/icons/loading.js"(exports) {
     "use strict";
     var data = {
-      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
+      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
       "left": 0,
       "top": 0,
       "width": 38,
@@ -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, { 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9TZWN0aW9uL1NlY3Rpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRWpFLE9BQU8sRUFBRSxVQUFVLElBQUksY0FBYyxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFFL0UsT0FBTyxFQUFFLFVBQVUsRUFBRSxFQUFFLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUVwRCxPQUFPLE9BQU8sTUFBTSxtQkFBbUIsQ0FBQztBQWN4QyxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQXNFLENBQUMsRUFBcUIsRUFBRSxFQUFFO1FBQXpCLEVBQUUsUUFBUSxPQUFXLEVBQU4sSUFBSSxjQUFuQixZQUFxQixDQUFGO0lBQU8sT0FBQSxDQUNuSCxvQkFBQyxHQUFHLGtCQUFDLFdBQVcsRUFBQyxRQUFRLEVBQUMsV0FBVyxFQUFDLEtBQUssSUFBSyxJQUFJLEdBQ2pELFFBQVEsQ0FDTCxDQUNQLENBQUE7Q0FBQSxDQUFDO0FBRUYsT0FBTyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQTZDLEVBQUUsRUFBRTtRQUFqRCxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsV0FBVyxPQUFXLEVBQU4sSUFBSSxjQUEzQyx3Q0FBNkMsQ0FBRjtJQUFPLE9BQUEsQ0FDbEUsNkNBQ00sSUFBSSxJQUNSLFNBQVMsRUFBRSxVQUFVLENBQ25CLEVBQUUsQ0FBQyxtREFBbUQsRUFBRSxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsQ0FBQyxFQUNyRixTQUFTLENBQ1YsS0FFQSxRQUFRLENBQ0wsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLE9BQU8sQ0FBQyxjQUFjLEdBQUcsQ0FBQyxFQUE2QyxFQUFFLEVBQUU7UUFBakQsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLFdBQVcsT0FBVyxFQUFOLElBQUksY0FBM0Msd0NBQTZDLENBQUY7SUFBTyxPQUFBLENBQzFFLDZDQUNNLElBQUksSUFDUixTQUFTLEVBQUUsVUFBVSxDQUNuQixFQUFFLENBQUMsNkRBQTZELEVBQUUsRUFBRSxnQkFBZ0IsRUFBRSxXQUFXLEVBQUUsQ0FBQyxFQUNwRyxTQUFTLENBQ1YsS0FFQSxRQUFRLENBQ0wsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLE9BQU8sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLG9CQUFDLElBQUksb0JBQUssS0FBSyxJQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxJQUFJLENBQUM7QUFFdEYsT0FBTyxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQXFCLEVBQUUsRUFBRTtRQUF6QixFQUFFLFFBQVEsT0FBVyxFQUFOLElBQUksY0FBbkIsWUFBcUIsQ0FBRjtJQUFPLE9BQUEsQ0FDekMsb0JBQUMsVUFBVSxDQUFDLEtBQUssb0JBQUssSUFBSSxJQUFFLEtBQUssRUFBQyxPQUFPLEVBQUMsU0FBUyxFQUFDLHlCQUF5QixLQUMxRSxRQUFRLENBQ1EsQ0FDcEIsQ0FBQTtDQUFBLENBQUM7QUFFRixPQUFPLENBQUMsUUFBUSxHQUFHLENBQUMsRUFBcUIsRUFBRSxFQUFFO1FBQXpCLEVBQUUsUUFBUSxPQUFXLEVBQU4sSUFBSSxjQUFuQixZQUFxQixDQUFGO0lBQU8sT0FBQSxDQUM1QyxvQkFBQyxVQUFVLENBQUMsS0FBSyxvQkFBSyxJQUFJLElBQUUsS0FBSyxFQUFDLFNBQVMsS0FDeEMsUUFBUSxDQUNRLENBQ3BCLENBQUE7Q0FBQSxDQUFDO0FBRUYsT0FBTyxDQUFDLE9BQU8sR0FBRyxDQUFDLEVBQWdDLEVBQUUsRUFBRTtRQUFwQyxFQUFFLFFBQVEsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQTlCLHlCQUFnQyxDQUFGO0lBQU8sT0FBQSxDQUN0RCw2Q0FBUyxJQUFJLElBQUUsU0FBUyxFQUFFLFVBQVUsQ0FBQyxFQUFFLENBQUMsd0JBQXdCLENBQUMsRUFBRSxTQUFTLENBQUMsS0FDMUUsUUFBUSxDQUNMLENBQ1AsQ0FBQTtDQUFBLENBQUM7QUFFRixPQUFPLENBQUMsSUFBSSxHQUFHLENBQUMsRUFBZ0MsRUFBRSxFQUFFO1FBQXBDLEVBQUUsUUFBUSxFQUFFLFNBQVMsT0FBVyxFQUFOLElBQUksY0FBOUIseUJBQWdDLENBQUY7SUFBTyxPQUFBLENBQ25ELDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxTQUFTLENBQUM7UUFDeEQsb0JBQUMsY0FBYyxJQUFDLE9BQU8sRUFBQyxLQUFLLEVBQUMsS0FBSyxFQUFDLFNBQVMsSUFDMUMsUUFBUSxDQUNNLENBQ2IsQ0FDUCxDQUFBO0NBQUEsQ0FBQyJ9

package/dist/src/icons/loading.js

@@ -1,6 +1,6 @@
 "use strict";
 const data = {
-    "body": "<g fill=\"none\" fill-rule=\"evenodd\" stroke=\"currentColor\" stroke-width=\"2\" transform=\"translate(1 1)\"><circle cx=\"18\" cy=\"18\" r=\"18\" stroke-opacity=\".5\"/><path d=\"M36 18c0-9.94-8.06-18-18-18\"><animateTransform attributeName=\"transform\" dur=\"1s\" from=\"0 18 18\" repeatCount=\"indefinite\" to=\"360 18 18\" type=\"rotate\"/></path></g>",
+    "body": "<g fill=\"none\" fill-rule=\"evenodd\" stroke=\"currentColor\" stroke-width=\"3\" transform=\"translate(1 1)\"><circle cx=\"18\" cy=\"18\" r=\"18\" stroke-opacity=\".5\"/><path d=\"M36 18c0-9.94-8.06-18-18-18\"><animateTransform attributeName=\"transform\" dur=\"1s\" from=\"0 18 18\" repeatCount=\"indefinite\" to=\"360 18 18\" type=\"rotate\"/></path></g>",
     "left": 0,
     "top": 0,
     "width": 38,

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

@@ -1,12 +1,47 @@
 import React from 'react';
 import { type AsyncActionType, type LinkActionType } from '../../../types/ActionType';
 export declare enum EmptyStateLayout {
+    Vertical = "vertical",
+    Horizontal = "horizontal",
+    /**
+     * @deprecated in favor of "Vertical" layout
+     */
     CenterVertical = "center-vertical",
+    /**
+     * @deprecated in favor of "Vertical" layout
+     */
     LeftVertical = "left-vertical",
+    /**
+     * @deprecated in favor of "Horizontal" layout
+     */
     CenterHorizontal = "center-horizontal",
+    /**
+     * @deprecated in favor of "Horizontal" layout
+     */
     LeftHorizontal = "left-horizontal"
 }
-export declare type EmptyStateProps = {
+declare type Vertical = {
+    /**
+     * Define horizontal/vertical layout of the whole component, item alignment inside the component, and text alignment based on variant of layout. Other values than `vertical` or `horizontal` are currently deprecated.
+     * @default 'vertical'.
+     */
+    layout?: EmptyStateLayout.CenterVertical | EmptyStateLayout.Vertical;
+    /**
+     * Optional prop for controlling whether the component will occupy all the available height.
+     * @default true
+     */
+    fullHeight?: boolean;
+};
+declare type Horizontal = {
+    /**
+     * Define horizontal/vertical layout of the whole component, item alignment inside the component, and text alignment based on variant of layout. Other values than `vertical` or `horizontal` are currently deprecated.
+     * @default 'vertical'
+     */
+    layout?: Exclude<EmptyStateLayout, EmptyStateLayout.CenterVertical | EmptyStateLayout.Vertical>;
+    fullHeight?: never;
+};
+declare type LayoutProps = Horizontal | Vertical;
+export declare type EmptyStateProps = LayoutProps & {
     /**
      * Provide a short and concise explanation.
      */
@@ -45,11 +80,6 @@ export declare type EmptyStateProps = {
      * Use Typography component if possible. By default, this is wrapped by typography 'small' size.
      */
     footer?: React.ReactNode;
-    /**
-     * Define horizontal/vertical layout of the whole component, item alignment inside the component, and text alignment based on variant of layout.
-     * Default value is 'center-vertical'.
-     */
-    layout?: EmptyStateLayout;
     /**
      * Define a style of the border of the component.
      * Default value is 'dashed' style.
@@ -63,3 +93,4 @@ export declare type EmptyStateProps = {
  * @returns React.ReactElement
  */
 export declare const EmptyState: React.FC<EmptyStateProps>;
+export {};

package/dist/src/molecules/EmptyState/EmptyState.js

@@ -2,16 +2,28 @@ import React from 'react';
 import omit from 'lodash/omit';
 import { Box } from '../../../src/molecules/Box/Box';
 import { Button } from '../../../src/molecules/Button/Button';
-import { Flexbox } from '../../../src/molecules/Flexbox/Flexbox';
-import { FlexboxItem } from '../../../src/molecules/Flexbox/FlexboxItem';
 import { Typography } from '../../../src/molecules/Typography/Typography';
 import { isLink } from '../../../src/utils/link';
 import { classNames, tw } from '../../../src/utils/tailwind';
 export var EmptyStateLayout;
 (function (EmptyStateLayout) {
+    EmptyStateLayout["Vertical"] = "vertical";
+    EmptyStateLayout["Horizontal"] = "horizontal";
+    /**
+     * @deprecated in favor of "Vertical" layout
+     */
     EmptyStateLayout["CenterVertical"] = "center-vertical";
+    /**
+     * @deprecated in favor of "Vertical" layout
+     */
     EmptyStateLayout["LeftVertical"] = "left-vertical";
+    /**
+     * @deprecated in favor of "Horizontal" layout
+     */
     EmptyStateLayout["CenterHorizontal"] = "center-horizontal";
+    /**
+     * @deprecated in favor of "Horizontal" layout
+     */
     EmptyStateLayout["LeftHorizontal"] = "left-horizontal";
 })(EmptyStateLayout || (EmptyStateLayout = {}));
 const layoutStyle = (layout) => {
@@ -23,6 +35,7 @@ const layoutStyle = (layout) => {
                 alignItems: 'flex-start',
             };
         case EmptyStateLayout.LeftHorizontal:
+        case EmptyStateLayout.Horizontal:
             return {
                 layout: 'row',
                 justifyContent: 'flex-start',
@@ -35,6 +48,7 @@ const layoutStyle = (layout) => {
                 alignItems: 'flex-start',
             };
         case EmptyStateLayout.CenterVertical:
+        case EmptyStateLayout.Vertical:
         default:
             return {
                 layout: 'column',
@@ -43,37 +57,38 @@ const layoutStyle = (layout) => {
             };
     }
 };
+const isVerticalLayout = (layout) => layout === EmptyStateLayout.Vertical || layout === EmptyStateLayout.CenterVertical;
 /**
  * ## A EmptyState component to call extra attention to featured content or information, for example, an empty stage of a feature.
  *
  * @param props EmptyStateProps
  * @returns React.ReactElement
  */
-export const EmptyState = ({ title, image, imageAlt = '', imageWidth, description, children, primaryAction, secondaryAction, footer, layout = EmptyStateLayout.CenterVertical, borderStyle = 'dashed', }) => {
+export const EmptyState = ({ title, image, imageAlt = '', imageWidth, description, children, primaryAction, secondaryAction, footer, layout = EmptyStateLayout.Vertical, borderStyle = 'dashed', fullHeight = isVerticalLayout(layout) ? true : false, }) => {
     const template = layoutStyle(layout);
-    return (React.createElement(Box, { className: classNames('Aquarium-EmptyState', tw('rounded', {
+    return (React.createElement(Box, { className: classNames('Aquarium-EmptyState', tw('rounded p-[56px]', {
             'border border-dashed': borderStyle === 'dashed',
             'border border-solid': borderStyle === 'solid',
-            'text-left': layout !== EmptyStateLayout.CenterVertical,
-            'text-center': layout === EmptyStateLayout.CenterVertical,
-        })), backgroundColor: "transparent", borderColor: "grey-10", padding: "9" },
-        React.createElement(Flexbox, { direction: template.layout, justifyContent: template.justifyContent, 
+            'text-left': !isVerticalLayout(layout),
+            'text-center': isVerticalLayout(layout),
+            'h-full': fullHeight,
+        })), backgroundColor: "transparent", borderColor: "grey-10" },
+        React.createElement(Box.Flex, { style: { gap: '56px' }, flexDirection: template.layout, justifyContent: template.justifyContent, 
             // in case of horizontal layouts, the content inside the 2nd col should align center with image.
-            alignItems: template.layout === 'row' ? 'center' : template.alignItems, colGap: "l5", rowGap: "8" },
-            image && (React.createElement(FlexboxItem, null,
-                React.createElement("img", { src: image, alt: imageAlt, style: { width: imageWidth ? `${imageWidth}px` : undefined, height: 'auto' } }))),
-            React.createElement(Flexbox, { style: { maxWidth: '610px' }, direction: "column", justifyContent: template.justifyContent, alignItems: template.alignItems },
-                React.createElement(Typography, { variant: "heading", htmlTag: "h2" }, title),
+            alignItems: template.layout === 'row' ? 'center' : template.alignItems, height: fullHeight ? 'full' : undefined },
+            image && (React.createElement("img", { src: image, alt: imageAlt, style: { width: imageWidth ? `${imageWidth}px` : undefined, height: 'auto' } })),
+            React.createElement(Box.Flex, { flexDirection: "column", justifyContent: template.justifyContent, alignItems: template.alignItems },
+                React.createElement(Typography.Heading, { htmlTag: "h2" }, title),
                 (description || children) && (React.createElement(Box, { marginTop: "5" },
-                    React.createElement(Typography, { variant: "default", color: "grey-60" }, children || description))),
-                (secondaryAction || primaryAction) && (React.createElement(Flexbox, { marginTop: "7", gap: "4", justifyContent: "center", alignItems: "center", wrap: "wrap" },
+                    React.createElement(Typography.Default, { color: "grey-60" }, children || description))),
+                (secondaryAction || primaryAction) && (React.createElement(Box.Flex, { marginTop: "7", gap: "4", justifyContent: "center", alignItems: "center", wrap: "wrap" },
                     primaryAction && (React.createElement(React.Fragment, null,
                         !isLink(primaryAction) && (React.createElement(Button.Primary, Object.assign({}, omit(primaryAction, 'text')), primaryAction.text)),
                         isLink(primaryAction) && (React.createElement(Button.ExternalLink, Object.assign({ kind: "primary" }, omit(primaryAction, 'text')), primaryAction.text)))),
                     secondaryAction && (React.createElement(React.Fragment, null,
                         !isLink(secondaryAction) && (React.createElement(Button.Secondary, Object.assign({}, omit(secondaryAction, 'text')), secondaryAction.text)),
                         isLink(secondaryAction) && (React.createElement(Button.ExternalLink, Object.assign({ kind: "secondary" }, omit(secondaryAction, 'text')), secondaryAction.text)))))),
-                footer && (React.createElement(Box, { marginTop: "7" },
-                    React.createElement(Typography, { htmlTag: "div", variant: "small", color: "grey-60" }, footer)))))));
+                footer && (React.createElement(Box, { marginTop: "5" },
+                    React.createElement(Typography.Small, { color: "grey-60" }, footer)))))));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRW1wdHlTdGF0ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvRW1wdHlTdGF0ZS9FbXB0eVN0YXRlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBRS9CLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDckQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNoRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFFakUsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFHcEQsTUFBTSxDQUFOLElBQVksZ0JBS1g7QUFMRCxXQUFZLGdCQUFnQjtJQUMxQixzREFBa0MsQ0FBQTtJQUNsQyxrREFBOEIsQ0FBQTtJQUM5QiwwREFBc0MsQ0FBQTtJQUN0QyxzREFBa0MsQ0FBQTtBQUNwQyxDQUFDLEVBTFcsZ0JBQWdCLEtBQWhCLGdCQUFnQixRQUszQjtBQW9FRCxNQUFNLFdBQVcsR0FBRyxDQUFDLE1BQXdCLEVBQW9CLEVBQUU7SUFDakUsUUFBUSxNQUFNLEVBQUU7UUFDZCxLQUFLLGdCQUFnQixDQUFDLFlBQVk7WUFDaEMsT0FBTztnQkFDTCxNQUFNLEVBQUUsUUFBUTtnQkFDaEIsY0FBYyxFQUFFLFlBQVk7Z0JBQzVCLFVBQVUsRUFBRSxZQUFZO2FBQ3pCLENBQUM7UUFDSixLQUFLLGdCQUFnQixDQUFDLGNBQWM7WUFDbEMsT0FBTztnQkFDTCxNQUFNLEVB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRW1wdHlTdGF0ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvRW1wdHlTdGF0ZS9FbXB0eVN0YXRlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBRS9CLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDckQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRWpFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN4QyxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBR3BELE1BQU0sQ0FBTixJQUFZLGdCQW1CWDtBQW5CRCxXQUFZLGdCQUFnQjtJQUMxQix5Q0FBcUIsQ0FBQTtJQUNyQiw2Q0FBeUIsQ0FBQTtJQUN6Qjs7T0FFRztJQUNILHNEQUFrQyxDQUFBO0lBQ2xDOztPQUVHO0lBQ0gsa0RBQThCLENBQUE7SUFDOUI7O09BRUc7SUFDSCwwREFBc0MsQ0FBQTtJQUN0Qzs7T0FFRztJQUNILHNEQUFrQyxDQUFBO0FBQ3BDLENBQUMsRUFuQlcsZ0JBQWdCLEtBQWhCLGdCQUFnQixRQW1CM0I7QUF3RkQsTUFBTSxXQUFXLEdBQUcsQ0FBQyxNQUF3QixFQUFvQixFQUFFO0lBQ2pFLFFBQVEsTUFBTSxFQUFFO1FBQ2QsS0FBSyxnQkFBZ0IsQ0FBQyxZQUFZO1lBQ2hDLE9BQU87Z0JBQ0wsTUFBTSxFQUFFLFFBQVE7Z0JBQ2hCLGNBQWMsRUFBRSxZQUFZO2dCQUM1QixVQUFVLEVBQUUsWUFBWTthQUN6QixDQUFDO1FBQ0osS0FBSyxnQkFBZ0IsQ0FBQyxjQUFjLENBQUM7UUFDckMsS0FBSyxnQkFBZ0IsQ0FB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

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=