@aivenio/aquarium 1.41.0 → 1.43.0

package/dist/src/charts/LineChart/LineChart.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Line as _Line, LineChart as _LineChart } from 'recharts';
+import { Axis, renderXAxis, renderXTimeAxis, renderYAxis } from '../../../src/charts/Axis/Axis';
+import { ResponsiveContainer } from '../../../src/charts/Container/Container';
+import { CartesianGrid } from '../../../src/charts/Grid/Grid';
+import { getDisplayName } from '../../../src/charts/lib/utils';
+const renderChildren = (props) => {
+    return React.Children.map(props.children, (child) => {
+        switch (getDisplayName(child.type)) {
+            case Axis.XAxis.displayName: {
+                return renderXAxis(child, props);
+            }
+            case Axis.XAxis.Time.displayName: {
+                return renderXTimeAxis(child, props);
+            }
+            case Axis.YAxis.displayName: {
+                return renderYAxis(child, props);
+            }
+            default: {
+                return child;
+            }
+        }
+    });
+};
+export const LineChart = (props) => {
+    const { data } = props;
+    return (React.createElement(ResponsiveContainer, null,
+        React.createElement(_LineChart, { width: 500, height: 500, data: data, style: { stroke: '#fff', strokeWidth: 1 }, margin: {
+                top: 20,
+                right: 30,
+                left: 20,
+                bottom: 5,
+            } },
+            React.createElement(CartesianGrid, null),
+            renderChildren(props))));
+};
+export const Line = Object.assign((props) => (React.createElement(_Line, Object.assign({ type: "monotone" }, props, { strokeWidth: 2, isAnimationActive: false, dot: false }))), _Line);
+LineChart.Line = Line;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGluZUNoYXJ0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NoYXJ0cy9MaW5lQ2hhcnQvTGluZUNoYXJ0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLElBQUksSUFBSSxLQUFLLEVBQUUsU0FBUyxJQUFJLFVBQVUsRUFBa0IsTUFBTSxVQUFVLENBQUM7QUFFbEYsT0FBTyxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUUsZUFBZSxFQUFFLFdBQVcsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNyRCxPQUFPLEVBQW1CLGNBQWMsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBV3ZFLE1BQU0sY0FBYyxHQUFHLENBQUMsS0FBcUIsRUFBRSxFQUFFO0lBQy9DLE9BQU8sS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDLEtBQUssRUFBRSxFQUFFO1FBQ2xELFFBQVEsY0FBYyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUNsQyxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLENBQUM7Z0JBQzNCLE9BQU8sV0FBVyxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQzthQUNsQztZQUVELEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7Z0JBQ2hDLE9BQU8sZUFBZSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQzthQUN0QztZQUVELEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsQ0FBQztnQkFDM0IsT0FBTyxXQUFXLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO2FBQ2xDO1lBRUQsT0FBTyxDQUFDLENBQUM7Z0JBQ1AsT0FBTyxLQUFLLENBQUM7YUFDZDtTQUNGO0lBQ0gsQ0FBQyxDQUFDLENBQUM7QUFDTCxDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQWlELENBQUMsS0FBSyxFQUFFLEVBQUU7SUFDL0UsTUFBTSxFQUFFLElBQUksRUFBRSxHQUFHLEtBQUssQ0FBQztJQUN2QixPQUFPLENBQ0wsb0JBQUMsbUJBQW1CO1FBQ2xCLG9CQUFDLFVBQVUsSUFDVCxLQUFLLEVBQUUsR0FBRyxFQUNWLE1BQU0sRUFBRSxHQUFHLEVBQ1gsSUFBSSxFQUFFLElBQUksRUFDVixLQUFLLEVBQUUsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRSxDQUFDLEVBQUUsRUFDekMsTUFBTSxFQUFFO2dCQUNOLEdBQUcsRUFBRSxFQUFFO2dCQUNQLEtBQUssRUFBRSxFQUFFO2dCQUNULElBQUksRUFBRSxFQUFFO2dCQUNSLE1BQU0sRUFBRSxDQUFDO2FBQ1Y7WUFFRCxvQkFBQyxhQUFhLE9BQUc7WUFDaEIsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUNYLENBQ08sQ0FDdkIsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLElBQUksR0FBRyxNQUFNLENBQUMsTUFBTSxDQUMvQixDQUFDLEtBQTZCLEVBQUUsRUFBRSxDQUFDLENBQ2pDLG9CQUFDLEtBQUssa0JBQUMsSUFBSSxFQUFDLFVBQVUsSUFBSyxLQUFLLElBQUUsV0FBVyxFQUFFLENBQUMsRUFBRSxpQkFBaUIsRUFBRSxLQUFLLEVBQUUsR0FBRyxFQUFFLEtBQUssSUFBSSxDQUMzRixFQUNELEtBQUssQ0FDTixDQUFDO0FBQ0YsU0FBUyxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMifQ==

package/dist/src/charts/Reference/Reference.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type ReferenceAreaProps, ReferenceLine as _ReferenceLine, type ReferenceLineProps } from 'recharts';
+declare type ComposedReference = {
+    Area: typeof ReferenceArea;
+    Line: typeof ReferenceLine;
+};
+declare const ReferenceLine: ((props: Omit<ReferenceLineProps, 'ref'>) => React.JSX.Element) & typeof _ReferenceLine;
+declare const ReferenceArea: ((props: Omit<ReferenceAreaProps, 'ref'>) => React.JSX.Element) & typeof _ReferenceLine;
+export declare const Reference: ComposedReference;
+export {};

package/dist/src/charts/Reference/Reference.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ReferenceArea as _ReferenceArea, ReferenceLine as _ReferenceLine, } from 'recharts';
+const ReferenceLine = Object.assign((props) => React.createElement(_ReferenceLine, Object.assign({}, props, { strokeDasharray: "9 3", strokeWidth: 2 })), _ReferenceLine);
+const ReferenceArea = Object.assign((props) => React.createElement(_ReferenceArea, Object.assign({}, props, { strokeWidth: 0, fillOpacity: 0.1 })), _ReferenceLine);
+export const Reference = {
+    Line: ReferenceLine,
+    Area: ReferenceArea,
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVmZXJlbmNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NoYXJ0cy9SZWZlcmVuY2UvUmVmZXJlbmNlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNMLGFBQWEsSUFBSSxjQUFjLEVBRS9CLGFBQWEsSUFBSSxjQUFjLEdBRWhDLE1BQU0sVUFBVSxDQUFDO0FBT2xCLE1BQU0sYUFBYSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQ2pDLENBQUMsS0FBc0MsRUFBRSxFQUFFLENBQUMsb0JBQUMsY0FBYyxvQkFBSyxLQUFLLElBQUUsZUFBZSxFQUFDLEtBQUssRUFBQyxXQUFXLEVBQUUsQ0FBQyxJQUFJLEVBQy9HLGNBQWMsQ0FDZixDQUFDO0FBRUYsTUFBTSxhQUFhLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FDakMsQ0FBQyxLQUFzQyxFQUFFLEVBQUUsQ0FBQyxvQkFBQyxjQUFjLG9CQUFLLEtBQUssSUFBRSxXQUFXLEVBQUUsQ0FBQyxFQUFFLFdBQVcsRUFBRSxHQUFHLElBQUksRUFDM0csY0FBYyxDQUNmLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQXNCO0lBQzFDLElBQUksRUFBRSxhQUFhO0lBQ25CLElBQUksRUFBRSxhQUFhO0NBQ3BCLENBQUMifQ==

package/dist/src/charts/Tooltip/Tooltip.d.ts

@@ -1,4 +1,7 @@
-import { Tooltip as _Tooltip } from 'recharts';
+import { DefaultTooltipContent, Tooltip as _Tooltip } from 'recharts';
+export type { TooltipProps } from 'recharts';
+declare type ComposedTooltip = {
+    DefaultContent: typeof DefaultTooltipContent;
+};
 declare type TooltipComponent = typeof _Tooltip;
-export declare const Tooltip: TooltipComponent;
-export {};
+export declare const Tooltip: ComposedTooltip & TooltipComponent;

package/dist/src/charts/Tooltip/Tooltip.js

@@ -1,9 +1,21 @@
-import { Tooltip as _Tooltip } from 'recharts';
-export const Tooltip = Object.assign(_Tooltip, {});
-Tooltip.defaultProps = Object.assign(_Tooltip.defaultProps, {
+import { DefaultTooltipContent, Tooltip as _Tooltip } from 'recharts';
+const contentStyle = {
+    boxShadow: 'var(--aquarium-box-shadow-8dp)',
+    background: '#fff',
+};
+const itemStyle = {
+    display: 'flex',
+    paddingTop: '2px',
+    paddingBottom: '2px',
+};
+export const Tooltip = Object.assign(_Tooltip, {
+    DefaultContent: DefaultTooltipContent,
+});
+Tooltip.defaultProps = Object.assign({}, _Tooltip.defaultProps, {
+    separator: '',
     isAnimationActive: false,
-    contentStyle: { border: '1px solid rgb(0, 0, 0)', borderRadius: '1px', background: '#000' },
-    itemStyle: { display: 'flex', paddingTop: '2px', paddingBottom: '2px' },
-    cursor: false,
+    contentStyle,
+    itemStyle,
+    cursor: { stroke: 'var(--aquarium-colors-grey-70)', strokeDasharray: '5' },
 });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVG9vbHRpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jaGFydHMvVG9vbHRpcC9Ub29sdGlwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxJQUFJLFFBQVEsRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUkvQyxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQXFCLE1BQU0sQ0FBQyxNQUFNLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0FBQ3JFLE9BQU8sQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsWUFBWSxFQUFFO0lBQzFELGlCQUFpQixFQUFFLEtBQUs7SUFDeEIsWUFBWSxFQUFFLEVBQUUsTUFBTSxFQUFFLHdCQUF3QixFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRTtJQUMzRixTQUFTLEVBQUUsRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFLEtBQUssRUFBRTtJQUN2RSxNQUFNLEVBQUUsS0FBSztDQUNkLENBQUMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVG9vbHRpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jaGFydHMvVG9vbHRpcC9Ub29sdGlwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsT0FBTyxJQUFJLFFBQVEsRUFBRSxNQUFNLFVBQVUsQ0FBQztBQVV0RSxNQUFNLFlBQVksR0FBd0I7SUFDeEMsU0FBUyxFQUFFLGdDQUFnQztJQUMzQyxVQUFVLEVBQUUsTUFBTTtDQUNuQixDQUFDO0FBRUYsTUFBTSxTQUFTLEdBQXdCO0lBQ3JDLE9BQU8sRUFBRSxNQUFNO0lBQ2YsVUFBVSxFQUFFLEtBQUs7SUFDakIsYUFBYSxFQUFFLEtBQUs7Q0FDckIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBdUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxRQUFRLEVBQUU7SUFDakYsY0FBYyxFQUFFLHFCQUFxQjtDQUN0QyxDQUFDLENBQUM7QUFFSCxPQUFPLENBQUMsWUFBWSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLFFBQVEsQ0FBQyxZQUFZLEVBQUU7SUFDOUQsU0FBUyxFQUFFLEVBQUU7SUFDYixpQkFBaUIsRUFBRSxLQUFLO0lBQ3hCLFlBQVk7SUFDWixTQUFTO0lBQ1QsTUFBTSxFQUFFLEVBQUUsTUFBTSxFQUFFLGdDQUFnQyxFQUFFLGVBQWUsRUFBRSxHQUFHLEVBQUU7Q0FDM0UsQ0FBQyxDQUFDIn0=

package/dist/src/charts/index.d.ts

@@ -1,7 +1,10 @@
+export * from './AreaChart/AreaChart';
 export * from './Axis/Axis';
 export * from './BarChart/BarChart';
 export * from './Container/Container';
 export * from './Grid/Grid';
 export * from './lib/timeIntervals';
 export * from './lib/utils';
+export * from './LineChart/LineChart';
+export * from './Reference/Reference';
 export * from './Tooltip/Tooltip';

package/dist/src/charts/index.js

@@ -1,8 +1,11 @@
+export * from './AreaChart/AreaChart';
 export * from './Axis/Axis';
 export * from './BarChart/BarChart';
 export * from './Container/Container';
 export * from './Grid/Grid';
 export * from './lib/timeIntervals';
 export * from './lib/utils';
+export * from './LineChart/LineChart';
+export * from './Reference/Reference';
 export * from './Tooltip/Tooltip';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY2hhcnRzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMsbUJBQW1CLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY2hhcnRzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsbUJBQW1CLENBQUMifQ==

package/dist/src/charts/lib/utils.d.ts

@@ -1,6 +1,6 @@
 import { type XAxisProps } from '../../../src/charts/Axis/Axis';
 export declare type ChartProps = {
-    data: Array<Record<string, unknown>>;
+    data?: Array<Record<string, unknown>>;
 };
 export declare const getDisplayName: (Comp: React.ComponentType | string) => string;
 export declare const getXAxisTicks: ({ dataKey, ticks }: XAxisProps, chartProps: ChartProps) => Array<number | string> | undefined;

package/dist/src/charts/lib/utils.js

@@ -13,12 +13,13 @@ export const getDisplayName = (Comp) => {
 };
 const isDateArray = (arr) => arr.every(isDate);
 export const getXAxisTicks = ({ dataKey, ticks }, chartProps) => {
+    var _a;
     // Either ticks are not provided or we don't have to process them.
     if (!ticks || isArray(ticks)) {
         return ticks !== null && ticks !== void 0 ? ticks : undefined;
     }
     // Extract x-axis values and interpolate tick values from them if they all are dates.
-    const xValues = chartProps.data.map((datum) => typeof dataKey === 'function' ? dataKey(datum) : dataKey ? datum[dataKey] : undefined);
+    const xValues = ((_a = chartProps.data) !== null && _a !== void 0 ? _a : []).map((datum) => typeof dataKey === 'function' ? dataKey(datum) : dataKey ? datum[dataKey] : undefined);
     if (!isDateArray(xValues)) {
         // eslint-disable-next-line no-console
         console.warn('Time intervals can only be used with date values. Please make sure that `dataKey` prop refers to a prop type of `Date`.');
@@ -30,4 +31,4 @@ export const getXAxisTicks = ({ dataKey, ticks }, chartProps) => {
         .ticks(ticks)
         .map((v) => v.valueOf());
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY2hhcnRzL2xpYi91dGlscy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2xDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDckMsT0FBTyxPQUFPLE1BQU0sZ0JBQWdCLENBQUM7QUFDckMsT0FBTyxNQUFNLE1BQU0sZUFBZSxDQUFDO0FBUW5DLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxDQUFDLElBQWtDLEVBQUUsRUFBRTtJQUNuRSxJQUFJLE9BQU8sSUFBSSxLQUFLLFFBQVEsRUFBRTtRQUM1QixPQUFPLElBQUksQ0FBQztLQUNiO0lBRUQsSUFBSSxDQUFDLElBQUksRUFBRTtRQUNULE9BQU8sRUFBRSxDQUFDO0tBQ1g7SUFFRCxPQUFPLElBQUksQ0FBQyxXQUFXLElBQUksSUFBSSxDQUFDLElBQUksSUFBSSxXQUFXLENBQUM7QUFDdEQsQ0FBQyxDQUFDO0FBRUYsTUFBTSxXQUFXLEdBQUcsQ0FBQyxHQUFVLEVBQWlCLEVBQUUsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0FBRXJFLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxDQUMzQixFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQWMsRUFDOUIsVUFBc0IsRUFDYyxFQUFFO0lBQ3RDLGtFQUFrRTtJQUNsRSxJQUFJLENBQUMsS0FBSyxJQUFJLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRTtRQUM1QixPQUFPLEtBQUssYUFBTCxLQUFLLGNBQUwsS0FBSyxHQUFJLFNBQVMsQ0FBQztLQUMzQjtJQUVELHFGQUFxRjtJQUNyRixNQUFNLE9BQU8sR0FBRyxVQUFVLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQzVDLE9BQU8sT0FBTyxLQUFLLFVBQVUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUN0RixDQUFDO0lBRUYsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsRUFBRTtRQUN6QixzQ0FBc0M7UUFDdEMsT0FBTyxDQUFDLElBQUksQ0FDVix5SEFBeUgsQ0FDMUgsQ0FBQztRQUNGLE9BQU8sU0FBUyxDQUFDO0tBQ2xCO0lBRUQsTUFBTSxDQUFDLEdBQUcsR0FBRyxJQUFJLElBQUksRUFBRSxFQUFFLEdBQUcsR0FBRyxJQUFJLElBQUksRUFBRSxDQUFDLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzdELE9BQU8sU0FBUyxFQUFFO1NBQ2YsTUFBTSxDQUFDLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1NBQ2xCLEtBQUssQ0FBQyxLQUFLLENBQUM7U0FDWixHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDO0FBQzdCLENBQUMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY2hhcnRzL2xpYi91dGlscy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2xDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDckMsT0FBTyxPQUFPLE1BQU0sZ0JBQWdCLENBQUM7QUFDckMsT0FBTyxNQUFNLE1BQU0sZUFBZSxDQUFDO0FBUW5DLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxDQUFDLElBQWtDLEVBQUUsRUFBRTtJQUNuRSxJQUFJLE9BQU8sSUFBSSxLQUFLLFFBQVEsRUFBRTtRQUM1QixPQUFPLElBQUksQ0FBQztLQUNiO0lBRUQsSUFBSSxDQUFDLElBQUksRUFBRTtRQUNULE9BQU8sRUFBRSxDQUFDO0tBQ1g7SUFFRCxPQUFPLElBQUksQ0FBQyxXQUFXLElBQUksSUFBSSxDQUFDLElBQUksSUFBSSxXQUFXLENBQUM7QUFDdEQsQ0FBQyxDQUFDO0FBRUYsTUFBTSxXQUFXLEdBQUcsQ0FBQyxHQUFVLEVBQWlCLEVBQUUsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0FBRXJFLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxDQUMzQixFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQWMsRUFDOUIsVUFBc0IsRUFDYyxFQUFFOztJQUN0QyxrRUFBa0U7SUFDbEUsSUFBSSxDQUFDLEtBQUssSUFBSSxPQUFPLENBQUMsS0FBSyxDQUFDLEVBQUU7UUFDNUIsT0FBTyxLQUFLLGFBQUwsS0FBSyxjQUFMLEtBQUssR0FBSSxTQUFTLENBQUM7S0FDM0I7SUFFRCxxRkFBcUY7SUFDckYsTUFBTSxPQUFPLEdBQUcsQ0FBQyxNQUFBLFVBQVUsQ0FBQyxJQUFJLG1DQUFJLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQ3BELE9BQU8sT0FBTyxLQUFLLFVBQVUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUN0RixDQUFDO0lBRUYsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsRUFBRTtRQUN6QixzQ0FBc0M7UUFDdEMsT0FBTyxDQUFDLElBQUksQ0FDVix5SEFBeUgsQ0FDMUgsQ0FBQztRQUNGLE9BQU8sU0FBUyxDQUFDO0tBQ2xCO0lBRUQsTUFBTSxDQUFDLEdBQUcsR0FBRyxJQUFJLElBQUksRUFBRSxFQUFFLEdBQUcsR0FBRyxJQUFJLElBQUksRUFBRSxDQUFDLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzdELE9BQU8sU0FBUyxFQUFFO1NBQ2YsTUFBTSxDQUFDLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1NBQ2xCLEtBQUssQ0FBQyxLQUFLLENBQUM7U0FDWixHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDO0FBQzdCLENBQUMsQ0FBQyJ9

package/dist/src/molecules/Alert/Alert.js

@@ -1,14 +1,19 @@
 import React from 'react';
+import { useId } from 'react-aria';
 import omit from 'lodash/omit';
 import { Button } from '../../../src/molecules/Button/Button';
 import { Alert as AlertBase } from '../../../src/atoms/Alert/Alert';
 import { isLink } from '../../../src/utils/link';
-export const Alert = ({ description, type, title, onDismiss, children, action }) => (React.createElement(AlertBase, { className: "Aquarium-Alert", type: type, dense: Boolean(title) },
-    React.createElement(AlertBase.Icon, { type: type, dense: Boolean(title) }),
-    title && React.createElement(AlertBase.Title, null, title),
-    React.createElement(AlertBase.Description, null, children || description),
-    action && (React.createElement(AlertBase.Actions, null,
-        !isLink(action) && (React.createElement(Button.Ghost, Object.assign({ dense: true }, omit(action, 'text')), action.text)),
-        isLink(action) && (React.createElement(Button.ExternalLink, Object.assign({ dense: true, kind: "ghost" }, omit(action, 'text')), action.text)))),
-    onDismiss && React.createElement(AlertBase.Dismiss, { onClick: onDismiss })));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQWxlcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL0FsZXJ0L0FsZXJ0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBRS9CLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUVyRCxPQUFPLEVBQUUsS0FBSyxJQUFJLFNBQVMsRUFBa0IsTUFBTSx1QkFBdUIsQ0FBQztBQUUzRSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUEwQnhDLE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBeUIsQ0FBQyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQ3hHLG9CQUFDLFNBQVMsSUFBQyxTQUFTLEVBQUMsZ0JBQWdCLEVBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsT0FBTyxDQUFDLEtBQUssQ0FBQztJQUNyRSxvQkFBQyxTQUFTLENBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLE9BQU8sQ0FBQyxLQUFLLENBQUMsR0FBSTtJQUNwRCxLQUFLLElBQUksb0JBQUMsU0FBUyxDQUFDLEtBQUssUUFBRSxLQUFLLENBQW1CO0lBQ3BELG9CQUFDLFNBQVMsQ0FBQyxXQUFXLFFBQUUsUUFBUSxJQUFJLFdBQVcsQ0FBeUI7SUFDdkUsTUFBTSxJQUFJLENBQ1Qsb0JBQUMsU0FBUyxDQUFDLE9BQU87UUFDZixDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUNsQixvQkFBQyxNQUFNLENBQUMsS0FBSyxrQkFBQyxLQUFLLFVBQUssSUFBSSxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUMsR0FDekMsTUFBTSxDQUFDLElBQUksQ0FDQyxDQUNoQjtRQUNBLE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUNqQixvQkFBQyxNQUFNLENBQUMsWUFBWSxrQkFBQyxLQUFLLFFBQUMsSUFBSSxFQUFDLE9BQU8sSUFBSyxJQUFJLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQyxHQUM3RCxNQUFNLENBQUMsSUFBSSxDQUNRLENBQ3ZCLENBQ2lCLENBQ3JCO0lBQ0EsU0FBUyxJQUFJLG9CQUFDLFNBQVMsQ0FBQyxPQUFPLElBQUMsT0FBTyxFQUFFLFNBQVMsR0FBSSxDQUM3QyxDQUNiLENBQUMifQ==
+export const Alert = ({ description, type, title, onDismiss, children, action }) => {
+    const descriptionID = useId();
+    const titleID = useId();
+    return (React.createElement(AlertBase, { className: "Aquarium-Alert", type: type, dense: Boolean(title), "aria-describedby": descriptionID, "aria-labelledby": title ? titleID : undefined },
+        React.createElement(AlertBase.Icon, { type: type, dense: Boolean(title) }),
+        title && React.createElement(AlertBase.Title, { id: titleID }, title),
+        React.createElement(AlertBase.Description, { id: descriptionID }, children || description),
+        action && (React.createElement(AlertBase.Actions, null,
+            !isLink(action) && (React.createElement(Button.Ghost, Object.assign({ dense: true }, omit(action, 'text')), action.text)),
+            isLink(action) && (React.createElement(Button.ExternalLink, Object.assign({ dense: true, kind: "ghost" }, omit(action, 'text')), action.text)))),
+        onDismiss && React.createElement(AlertBase.Dismiss, { onClick: onDismiss })));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQWxlcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL0FsZXJ0L0FsZXJ0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLFlBQVksQ0FBQztBQUNuQyxPQUFPLElBQUksTUFBTSxhQUFhLENBQUM7QUFFL0IsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRXJELE9BQU8sRUFBRSxLQUFLLElBQUksU0FBUyxFQUFrQixNQUFNLHVCQUF1QixDQUFDO0FBRTNFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQTBCeEMsTUFBTSxDQUFDLE1BQU0sS0FBSyxHQUF5QixDQUFDLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsRUFBRSxFQUFFO0lBQ3ZHLE1BQU0sYUFBYSxHQUFHLEtBQUssRUFBRSxDQUFDO0lBQzlCLE1BQU0sT0FBTyxHQUFHLEtBQUssRUFBRSxDQUFDO0lBQ3hCLE9BQU8sQ0FDTCxvQkFBQyxTQUFTLElBQ1IsU0FBUyxFQUFDLGdCQUFnQixFQUMxQixJQUFJLEVBQUUsSUFBSSxFQUNWLEtBQUssRUFBRSxPQUFPLENBQUMsS0FBSyxDQUFDLHNCQUNILGFBQWEscUJBQ2QsS0FBSyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFNBQVM7UUFFNUMsb0JBQUMsU0FBUyxDQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxPQUFPLENBQUMsS0FBSyxDQUFDLEdBQUk7UUFDcEQsS0FBSyxJQUFJLG9CQUFDLFNBQVMsQ0FBQyxLQUFLLElBQUMsRUFBRSxFQUFFLE9BQU8sSUFBRyxLQUFLLENBQW1CO1FBQ2pFLG9CQUFDLFNBQVMsQ0FBQyxXQUFXLElBQUMsRUFBRSxFQUFFLGFBQWEsSUFBRyxRQUFRLElBQUksV0FBVyxDQUF5QjtRQUMxRixNQUFNLElBQUksQ0FDVCxvQkFBQyxTQUFTLENBQUMsT0FBTztZQUNmLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQ2xCLG9CQUFDLE1BQU0sQ0FBQyxLQUFLLGtCQUFDLEtBQUssVUFBSyxJQUFJLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQyxHQUN6QyxNQUFNLENBQUMsSUFBSSxDQUNDLENBQ2hCO1lBQ0EsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQ2pCLG9CQUFDLE1BQU0sQ0FBQyxZQUFZLGtCQUFDLEtBQUssUUFBQyxJQUFJLEVBQUMsT0FBTyxJQUFLLElBQUksQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDLEdBQzdELE1BQU0sQ0FBQyxJQUFJLENBQ1EsQ0FDdkIsQ0FDaUIsQ0FDckI7UUFDQSxTQUFTLElBQUksb0JBQUMsU0FBUyxDQUFDLE9BQU8sSUFBQyxPQUFPLEVBQUUsU0FBUyxHQUFJLENBQzdDLENBQ2IsQ0FBQztBQUNKLENBQUMsQ0FBQyJ9

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

@@ -45,10 +45,10 @@ export declare const Box: {
         spaceX?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
         spaceY?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
         backgroundColor?: "error-0" | "error-100" | "error-5" | "error-10" | "error-20" | "error-30" | "error-40" | "error-50" | "error-60" | "error-70" | "error-80" | "error-90" | "grey-0" | "grey-100" | "grey-5" | "grey-10" | "grey-20" | "grey-30" | "grey-40" | "grey-50" | "grey-60" | "grey-70" | "grey-80" | "grey-90" | "info-0" | "info-100" | "info-5" | "info-10" | "info-20" | "info-30" | "info-40" | "info-50" | "info-60" | "info-70" | "info-80" | "info-90" | "primary-0" | "primary-100" | "primary-5" | "primary-10" | "primary-20" | "primary-30" | "primary-40" | "primary-50" | "primary-60" | "primary-70" | "primary-80" | "primary-90" | "secondary-0" | "secondary-100" | "secondary-5" | "secondary-10" | "secondary-20" | "secondary-30" | "secondary-40" | "secondary-50" | "secondary-60" | "secondary-70" | "secondary-80" | "secondary-90" | "success-0" | "success-100" | "success-5" | "success-10" | "success-20" | "success-30" | "success-40" | "success-50" | "success-60" | "success-70" | "success-80" | "success-90" | "warning-0" | "warning-100" | "warning-5" | "warning-10" | "warning-20" | "warning-30" | "warning-40" | "warning-50" | "warning-60" | "warning-70" | "warning-80" | "warning-90" | "black" | "transparent" | "white" | "current" | undefined;
-        width?: "auto" | "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full" | "fit" | undefined;
-        height?: "auto" | "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "full" | "fit" | undefined;
+        width?: "auto" | "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "full" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "fit" | undefined;
+        height?: "auto" | "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "full" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "fit" | undefined;
         maxWidth?: "none" | "max" | "min" | "0" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "fit" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "prose" | "screen-default" | "screen-xs" | "screen-sm" | "screen-md" | "screen-lg" | "screen-xl" | undefined;
-        maxHeight?: "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "full" | "fit" | undefined;
+        maxHeight?: "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "full" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "fit" | undefined;
         minWidth?: "max" | "min" | "0" | "full" | "fit" | undefined;
         minHeight?: "screen" | "max" | "min" | "0" | "full" | "fit" | undefined;
     }> & {
@@ -77,10 +77,10 @@ export declare const BorderBox: React.ComponentType<Omit<Pick<any, string | numb
     spaceX?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
     spaceY?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
     backgroundColor?: "error-0" | "error-100" | "error-5" | "error-10" | "error-20" | "error-30" | "error-40" | "error-50" | "error-60" | "error-70" | "error-80" | "error-90" | "grey-0" | "grey-100" | "grey-5" | "grey-10" | "grey-20" | "grey-30" | "grey-40" | "grey-50" | "grey-60" | "grey-70" | "grey-80" | "grey-90" | "info-0" | "info-100" | "info-5" | "info-10" | "info-20" | "info-30" | "info-40" | "info-50" | "info-60" | "info-70" | "info-80" | "info-90" | "primary-0" | "primary-100" | "primary-5" | "primary-10" | "primary-20" | "primary-30" | "primary-40" | "primary-50" | "primary-60" | "primary-70" | "primary-80" | "primary-90" | "secondary-0" | "secondary-100" | "secondary-5" | "secondary-10" | "secondary-20" | "secondary-30" | "secondary-40" | "secondary-50" | "secondary-60" | "secondary-70" | "secondary-80" | "secondary-90" | "success-0" | "success-100" | "success-5" | "success-10" | "success-20" | "success-30" | "success-40" | "success-50" | "success-60" | "success-70" | "success-80" | "success-90" | "warning-0" | "warning-100" | "warning-5" | "warning-10" | "warning-20" | "warning-30" | "warning-40" | "warning-50" | "warning-60" | "warning-70" | "warning-80" | "warning-90" | "black" | "transparent" | "white" | "current" | undefined;
-    width?: "auto" | "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full" | "fit" | undefined;
-    height?: "auto" | "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "full" | "fit" | undefined;
+    width?: "auto" | "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "full" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "fit" | undefined;
+    height?: "auto" | "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "full" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "fit" | undefined;
     maxWidth?: "none" | "max" | "min" | "0" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "fit" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "prose" | "screen-default" | "screen-xs" | "screen-sm" | "screen-md" | "screen-lg" | "screen-xl" | undefined;
-    maxHeight?: "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "full" | "fit" | undefined;
+    maxHeight?: "screen" | "max" | "min" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "full" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "fit" | undefined;
     minWidth?: "max" | "min" | "0" | "full" | "fit" | undefined;
     minHeight?: "screen" | "max" | "min" | "0" | "full" | "fit" | undefined;
 }> & {

package/dist/src/molecules/Popover/PopoverOverlay.d.ts

@@ -3,7 +3,7 @@ import { type AriaOverlayProps } from '@react-aria/overlays';
 import { type OverlayTriggerState } from '@react-stately/overlays';
 import { type PositionProps } from '@react-types/overlays';
 import { type PopoverPlacement } from './Popover';
-export declare const PopoverOverlay: React.ForwardRefExoticComponent<AriaOverlayProps & Pick<PositionProps, "offset" | "crossOffset" | "shouldFlip"> & {
+export declare const PopoverOverlay: React.ForwardRefExoticComponent<AriaOverlayProps & Pick<PositionProps, "offset" | "shouldFlip" | "crossOffset"> & {
     id?: string | undefined;
     role?: React.AriaRole | undefined;
     triggerRef: React.RefObject<Element>;

package/dist/styles.css

@@ -553,30 +553,63 @@ input[type='number'].no-arrows {
 }
 .recharts-tooltip-wrapper{
   font-family: Inter;
-  font-size: 12px;
+  font-size: 16px;
   font-weight: 400;
   font-style: normal;
-  line-height: 1.26;
+  line-height: 1.5;
   text-transform: none;
-  color: white;
-  color: var(--aquarium-colors-white, white);
+  color: #4a4b57;
+  color: var(--aquarium-colors-grey-70, #4a4b57);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.recharts-tooltip-label{
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 1.5;
+  text-transform: none;
+  padding-bottom: 4px;
 }
-.recharts-tooltip-item {
+.recharts-tooltip-item{
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.5;
+  text-transform: none;
   align-items: center;
 }
-.recharts-tooltip-item::before {
+.recharts-tooltip-item::before{
   display: inline-block;
+  background-color: currentColor;
+  background-color: var(--aquarium-colors-current, currentColor);
+  margin-right: 8px;
+  border-radius: 9999px;
+  border-radius: var(--aquarium-border-radius-full, 9999px);
   content: ' ';
-  width: 10px;
-  height: 10px;
-  margin-right: 4px;
-  background: currentColor;
+  width: 14px;
+  height: 14px;
 }
-.recharts-tooltip-item>span {
-  color: white;
+.recharts-tooltip-item>span{
+  color: #4a4b57;
+  color: var(--aquarium-colors-grey-70, #4a4b57);
 }
-.recharts-tooltip-item-separator {
-  margin-right: 2px;
+.recharts-tooltip-item-name{
+  flex-grow: 1;
+  margin-right: 24px;
+}
+.recharts-tooltip-item-separator{
+  display: none;
+}
+.recharts-tooltip-item-value{
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 1.5;
+  text-transform: none;
 }
 .focusable.focus-visible{
   outline: 2px solid transparent;

package/dist/system.cjs

@@ -4926,6 +4926,7 @@ var Select = {
 
 // src/molecules/Alert/Alert.tsx
 var import_react22 = __toESM(require("react"));
+var import_react_aria = require("react-aria");
 var import_omit = __toESM(require("lodash/omit"));
 
 // src/molecules/Button/Button.tsx
@@ -7010,21 +7011,31 @@ Alert.Dismiss = (_a) => {
 var isLink = (action) => action.href !== void 0;
 
 // src/molecules/Alert/Alert.tsx
-var Alert2 = ({ description, type, title, onDismiss, children, action }) => /* @__PURE__ */ import_react22.default.createElement(Alert, {
-  className: "Aquarium-Alert",
-  type,
-  dense: Boolean(title)
-}, /* @__PURE__ */ import_react22.default.createElement(Alert.Icon, {
-  type,
-  dense: Boolean(title)
-}), title && /* @__PURE__ */ import_react22.default.createElement(Alert.Title, null, title), /* @__PURE__ */ import_react22.default.createElement(Alert.Description, null, children || description), action && /* @__PURE__ */ import_react22.default.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ import_react22.default.createElement(Button.Ghost, __spreadValues({
-  dense: true
-}, (0, import_omit.default)(action, "text")), action.text), isLink(action) && /* @__PURE__ */ import_react22.default.createElement(Button.ExternalLink, __spreadValues({
-  dense: true,
-  kind: "ghost"
-}, (0, import_omit.default)(action, "text")), action.text)), onDismiss && /* @__PURE__ */ import_react22.default.createElement(Alert.Dismiss, {
-  onClick: onDismiss
-}));
+var Alert2 = ({ description, type, title, onDismiss, children, action }) => {
+  const descriptionID = (0, import_react_aria.useId)();
+  const titleID = (0, import_react_aria.useId)();
+  return /* @__PURE__ */ import_react22.default.createElement(Alert, {
+    className: "Aquarium-Alert",
+    type,
+    dense: Boolean(title),
+    "aria-describedby": descriptionID,
+    "aria-labelledby": title ? titleID : void 0
+  }, /* @__PURE__ */ import_react22.default.createElement(Alert.Icon, {
+    type,
+    dense: Boolean(title)
+  }), title && /* @__PURE__ */ import_react22.default.createElement(Alert.Title, {
+    id: titleID
+  }, title), /* @__PURE__ */ import_react22.default.createElement(Alert.Description, {
+    id: descriptionID
+  }, children || description), action && /* @__PURE__ */ import_react22.default.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ import_react22.default.createElement(Button.Ghost, __spreadValues({
+    dense: true
+  }, (0, import_omit.default)(action, "text")), action.text), isLink(action) && /* @__PURE__ */ import_react22.default.createElement(Button.ExternalLink, __spreadValues({
+    dense: true,
+    kind: "ghost"
+  }, (0, import_omit.default)(action, "text")), action.text)), onDismiss && /* @__PURE__ */ import_react22.default.createElement(Alert.Dismiss, {
+    onClick: onDismiss
+  }));
+};
 
 // src/molecules/Avatar/Avatar.tsx
 var import_react24 = __toESM(require("react"));

package/dist/system.mjs

@@ -4782,6 +4782,7 @@ var Select = {
 
 // src/molecules/Alert/Alert.tsx
 import React18 from "react";
+import { useId } from "react-aria";
 import omit from "lodash/omit";
 
 // src/molecules/Button/Button.tsx
@@ -6866,21 +6867,31 @@ Alert.Dismiss = (_a) => {
 var isLink = (action) => action.href !== void 0;
 
 // src/molecules/Alert/Alert.tsx
-var Alert2 = ({ description, type, title, onDismiss, children, action }) => /* @__PURE__ */ React18.createElement(Alert, {
-  className: "Aquarium-Alert",
-  type,
-  dense: Boolean(title)
-}, /* @__PURE__ */ React18.createElement(Alert.Icon, {
-  type,
-  dense: Boolean(title)
-}), title && /* @__PURE__ */ React18.createElement(Alert.Title, null, title), /* @__PURE__ */ React18.createElement(Alert.Description, null, children || description), action && /* @__PURE__ */ React18.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ React18.createElement(Button.Ghost, __spreadValues({
-  dense: true
-}, omit(action, "text")), action.text), isLink(action) && /* @__PURE__ */ React18.createElement(Button.ExternalLink, __spreadValues({
-  dense: true,
-  kind: "ghost"
-}, omit(action, "text")), action.text)), onDismiss && /* @__PURE__ */ React18.createElement(Alert.Dismiss, {
-  onClick: onDismiss
-}));
+var Alert2 = ({ description, type, title, onDismiss, children, action }) => {
+  const descriptionID = useId();
+  const titleID = useId();
+  return /* @__PURE__ */ React18.createElement(Alert, {
+    className: "Aquarium-Alert",
+    type,
+    dense: Boolean(title),
+    "aria-describedby": descriptionID,
+    "aria-labelledby": title ? titleID : void 0
+  }, /* @__PURE__ */ React18.createElement(Alert.Icon, {
+    type,
+    dense: Boolean(title)
+  }), title && /* @__PURE__ */ React18.createElement(Alert.Title, {
+    id: titleID
+  }, title), /* @__PURE__ */ React18.createElement(Alert.Description, {
+    id: descriptionID
+  }, children || description), action && /* @__PURE__ */ React18.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ React18.createElement(Button.Ghost, __spreadValues({
+    dense: true
+  }, omit(action, "text")), action.text), isLink(action) && /* @__PURE__ */ React18.createElement(Button.ExternalLink, __spreadValues({
+    dense: true,
+    kind: "ghost"
+  }, omit(action, "text")), action.text)), onDismiss && /* @__PURE__ */ React18.createElement(Alert.Dismiss, {
+    onClick: onDismiss
+  }));
+};
 
 // src/molecules/Avatar/Avatar.tsx
 import React20 from "react";
@@ -10539,7 +10550,7 @@ DataTable.Skeleton = DataListSkeleton;
 import React69 from "react";
 import { useDialog } from "@react-aria/dialog";
 import { Overlay as Overlay2, useModalOverlay } from "@react-aria/overlays";
-import { useId } from "@react-aria/utils";
+import { useId as useId2 } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
 import omit8 from "lodash/omit";
 
@@ -10688,8 +10699,8 @@ var DialogWrapper = ({
   secondaryAction
 }) => {
   const ref = React69.useRef(null);
-  const labelledBy = useId();
-  const describedBy = useId();
+  const labelledBy = useId2();
+  const describedBy = useId2();
   const { dialogProps } = useDialog(
     { "role": "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
     ref
@@ -11206,7 +11217,7 @@ var ListItem = ({ name, icon, active = false }) => {
 import React82 from "react";
 import { useDialog as useDialog3 } from "@react-aria/dialog";
 import { Overlay as Overlay3, useModalOverlay as useModalOverlay2 } from "@react-aria/overlays";
-import { useId as useId2 } from "@react-aria/utils";
+import { useId as useId3 } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState4 } from "@react-stately/overlays";
 import castArray from "lodash/castArray";
 import omit10 from "lodash/omit";
@@ -11536,8 +11547,8 @@ var Modal2 = (_a) => {
 var ModalWrapper = React82.forwardRef(
   (_a, ref) => {
     var _b = _a, { title, subtitle, headerImage, primaryAction, secondaryActions, children, onClose } = _b, props = __objRest(_b, ["title", "subtitle", "headerImage", "primaryAction", "secondaryActions", "children", "onClose"]);
-    const labelledBy = useId2();
-    const describedBy = useId2();
+    const labelledBy = useId3();
+    const describedBy = useId3();
     const { dialogProps } = useDialog3(
       { "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
       ref
@@ -12694,7 +12705,7 @@ RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
 import React101 from "react";
-import { useId as useId3 } from "@react-aria/utils";
+import { useId as useId4 } from "@react-aria/utils";
 import { animated as animated4, useSpring as useSpring3 } from "@react-spring/web";
 import castArray4 from "lodash/castArray";
 import isUndefined8 from "lodash/isUndefined";
@@ -12932,8 +12943,8 @@ var Section4 = (props) => {
     },
     immediate: !_collapsible
   }), { transform, backgroundColor } = _f, spring = __objRest(_f, ["transform", "backgroundColor"]);
-  const toggleId = useId3();
-  const regionId = useId3();
+  const toggleId = useId4();
+  const regionId = useId4();
   return /* @__PURE__ */ React101.createElement(Section3, {
     "aria-label": title,
     className: "Aquarium-Section"