@aivenio/aquarium 0.0.1 → 1.1.0

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { AsyncActionType } from '../../../types/ActionType';
+export declare type SectionProps = {
+    /** Section's title */
+    title: string;
+    /** Optional section's subtitle. */
+    subtitle?: string;
+    /**
+     * Optional actions. There can be 1-2 secondary actions only in a section.
+     */
+    actions?: AsyncActionType | AsyncActionType[];
+} | {
+    title?: never;
+    subtitle?: never;
+    actions?: never;
+};
+export declare const Section: React.FC<SectionProps>;

package/dist/src/components/Section/Section.js

@@ -0,0 +1,32 @@
+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 { Section as BaseSection } from '../../../src/common/Section/Section';
+import { SecondaryButton } from '../../../src/components/Button/Button';
+import { Divider } from '../../../src/components/Divider/Divider';
+import castArray from 'lodash/castArray';
+export const Section = ({ title, subtitle, actions, children }) => (React.createElement(BaseSection, null,
+    title && (React.createElement(React.Fragment, null,
+        React.createElement(BaseSection.Header, null,
+            React.createElement(BaseSection.TitleContainer, null,
+                React.createElement(BaseSection.Title, null, title),
+                React.createElement(BaseSection.Subtitle, null, subtitle)),
+            React.createElement(BaseSection.Actions, null, actions &&
+                castArray(actions)
+                    .filter(Boolean)
+                    .map((_a) => {
+                    var { text } = _a, action = __rest(_a, ["text"]);
+                    return (React.createElement(SecondaryButton, Object.assign({ key: text }, action), text));
+                }))),
+        React.createElement(Divider, null))),
+    React.createElement(BaseSection.Body, null, children)));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NlY3Rpb24vU2VjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE9BQU8sSUFBSSxXQUFXLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNwRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDL0QsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBRXpELE9BQU8sU0FBUyxNQUFNLGtCQUFrQixDQUFDO0FBcUJ6QyxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQTJCLENBQUMsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDekYsb0JBQUMsV0FBVztJQUNULEtBQUssSUFBSSxDQUNSO1FBQ0Usb0JBQUMsV0FBVyxDQUFDLE1BQU07WUFDakIsb0JBQUMsV0FBVyxDQUFDLGNBQWM7Z0JBQ3pCLG9CQUFDLFdBQVcsQ0FBQyxLQUFLLFFBQUUsS0FBSyxDQUFxQjtnQkFDOUMsb0JBQUMsV0FBVyxDQUFDLFFBQVEsUUFBRSxRQUFRLENBQXdCLENBQzVCO1lBQzdCLG9CQUFDLFdBQVcsQ0FBQyxPQUFPLFFBQ2pCLE9BQU87Z0JBQ04sU0FBUyxDQUFDLE9BQU8sQ0FBQztxQkFDZixNQUFNLENBQUMsT0FBTyxDQUFDO3FCQUNmLEdBQUcsQ0FBQyxDQUFDLEVBQW1CLEVBQUUsRUFBRTt3QkFBdkIsRUFBRSxJQUFJLE9BQWEsRUFBUixNQUFNLGNBQWpCLFFBQW1CLENBQUY7b0JBQU8sT0FBQSxDQUM1QixvQkFBQyxlQUFlLGtCQUFDLEdBQUcsRUFBRSxJQUFJLElBQU0sTUFBTSxHQUNuQyxJQUFJLENBQ1csQ0FDbkIsQ0FBQTtpQkFBQSxDQUFDLENBQ2MsQ0FDSDtRQUNyQixvQkFBQyxPQUFPLE9BQUcsQ0FDVixDQUNKO0lBQ0Qsb0JBQUMsV0FBVyxDQUFDLElBQUksUUFBRSxRQUFRLENBQW9CLENBQ25DLENBQ2YsQ0FBQyJ9

package/dist/src/components/Skeleton/Skeleton.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
+declare type RelativeSize = `${number}%`;
 declare type SkeletonProps = {
     /**
      * Width of the skeleton in pixels.
      */
-    width?: number;
+    width?: number | RelativeSize;
     /**
      * Height of the skeleton in pixels.
      */
-    height?: number;
+    height?: number | RelativeSize;
     /**
      * Display style for skeleton.
      */
@@ -20,6 +21,10 @@ declare type SkeletonProps = {
      * If false, there won't be any animation for the skeleton component.
      */
     animate?: boolean;
+    /**
+     * When true, Skeleton takes the shape of a circle.
+     */
+    rounded?: boolean;
 };
 export declare const Skeleton: React.FC<SkeletonProps>;
 export {};

package/dist/src/components/Skeleton/Skeleton.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import isNumber from 'lodash/isNumber';
 import { tw, classNames } from '../../utils/tailwind';
-export const Skeleton = ({ width, height, display = 'block', className, animate = true }) => {
+export const Skeleton = ({ width, height, display = 'block', className, animate = true, rounded = false, }) => {
     const styles = {
-        width: isNumber(width) ? `${width}px` : undefined,
-        height: isNumber(height) ? `${height}px` : undefined,
+        width: isNumber(width) ? `${width}px` : width,
+        height: isNumber(height) ? `${height}px` : height,
     };
     return (React.createElement("div", { style: styles, className: classNames(tw('bg-grey-5', {
+            'rounded-full': rounded,
             'block': display === 'block',
             'inline-block': display === 'inline-block',
             'animate-pulse': animate,
         }), className) }));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2tlbGV0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Ta2VsZXRvbi9Ta2VsZXRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sUUFBUSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUE2QnRELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBNEIsQ0FBQyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsT0FBTyxHQUFHLE9BQU8sRUFBRSxTQUFTLEVBQUUsT0FBTyxHQUFHLElBQUksRUFBRSxFQUFFLEVBQUU7SUFDbkgsTUFBTSxNQUFNLEdBQUc7UUFDYixLQUFLLEVBQUUsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxTQUFTO1FBQ2pELE1BQU0sRUFBRSxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQyxDQUFDLFNBQVM7S0FDckQsQ0FBQztJQUVGLE9BQU8sQ0FDTCw2QkFDRSxLQUFLLEVBQUUsTUFBTSxFQUNiLFNBQVMsRUFBRSxVQUFVLENBQ25CLEVBQUUsQ0FBQyxXQUFXLEVBQUU7WUFDZCxPQUFPLEVBQUUsT0FBTyxLQUFLLE9BQU87WUFDNUIsY0FBYyxFQUFFLE9BQU8sS0FBSyxjQUFjO1lBQzFDLGVBQWUsRUFBRSxPQUFPO1NBQ3pCLENBQUMsRUFDRixTQUFTLENBQ1YsR0FDRCxDQUNILENBQUM7QUFDSixDQUFDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2tlbGV0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Ta2VsZXRvbi9Ta2VsZXRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sUUFBUSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFvQ3RELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBNEIsQ0FBQyxFQUNoRCxLQUFLLEVBQ0wsTUFBTSxFQUNOLE9BQU8sR0FBRyxPQUFPLEVBQ2pCLFNBQVMsRUFDVCxPQUFPLEdBQUcsSUFBSSxFQUNkLE9BQU8sR0FBRyxLQUFLLEdBQ2hCLEVBQUUsRUFBRTtJQUNILE1BQU0sTUFBTSxHQUFHO1FBQ2IsS0FBSyxFQUFFLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxLQUFLLElBQUksQ0FBQyxDQUFDLENBQUMsS0FBSztRQUM3QyxNQUFNLEVBQUUsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLE1BQU0sSUFBSSxDQUFDLENBQUMsQ0FBQyxNQUFNO0tBQ2xELENBQUM7SUFFRixPQUFPLENBQ0wsNkJBQ0UsS0FBSyxFQUFFLE1BQU0sRUFDYixTQUFTLEVBQUUsVUFBVSxDQUNuQixFQUFFLENBQUMsV0FBVyxFQUFFO1lBQ2QsY0FBYyxFQUFFLE9BQU87WUFDdkIsT0FBTyxFQUFFLE9BQU8sS0FBSyxPQUFPO1lBQzVCLGNBQWMsRUFBRSxPQUFPLEtBQUssY0FBYztZQUMxQyxlQUFlLEVBQUUsT0FBTztTQUN6QixDQUFDLEVBQ0YsU0FBUyxDQUNWLEdBQ0QsQ0FDSCxDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=

package/dist/src/components/Template/Template.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import twTheme from '../../../tailwind.theme.json';
+declare type Weight = `${number}` | 'auto';
+declare type TemplateProps = {
+    /**
+     * Provide a number for amount of columns. Columns created this way have equal weight.
+     *
+     * Provide array of Weights or numbers to customize weights between columns.
+     * Array value of number is considered fixed pixel value.
+     * Array value of Weight is considered as a weight in relation to other columns.
+     */
+    columns: Array<Weight | number> | number;
+    gap?: keyof typeof twTheme['gap'];
+    columnGap?: keyof typeof twTheme['gap'];
+    rowGap?: keyof typeof twTheme['gap'];
+};
+export declare const Template: React.FC<TemplateProps>;
+export {};

package/dist/src/components/Template/Template.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useStyle } from '../../../src/utils/useStyle';
+export const Template = ({ children, columns, gap, columnGap, rowGap }) => {
+    const gridTemplateColumns = typeof columns === 'number'
+        ? '1fr '.repeat(columns)
+        : columns
+            .map((column) => (typeof column === 'number' ? `${column}px` : column === 'auto' ? column : `${column}fr`))
+            .join(' ');
+    const styles = useStyle({
+        display: 'grid',
+        gridTemplateColumns,
+        gap,
+        rowGap,
+        columnGap,
+    });
+    return React.createElement("div", { style: Object.assign({}, styles) }, children);
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGVtcGxhdGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9UZW1wbGF0ZS9UZW1wbGF0ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQW9COUMsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUE0QixDQUFDLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxHQUFHLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxFQUFFLEVBQUU7SUFDakcsTUFBTSxtQkFBbUIsR0FDdkIsT0FBTyxPQUFPLEtBQUssUUFBUTtRQUN6QixDQUFDLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUM7UUFDeEIsQ0FBQyxDQUFDLE9BQU87YUFDSixHQUFHLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDLENBQUMsT0FBTyxNQUFNLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxHQUFHLE1BQU0sSUFBSSxDQUFDLENBQUMsQ0FBQyxNQUFNLEtBQUssTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQzthQUMxRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFFbkIsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDO1FBQ3RCLE9BQU8sRUFBRSxNQUFNO1FBQ2YsbUJBQW1CO1FBQ25CLEdBQUc7UUFDSCxNQUFNO1FBQ04sU0FBUztLQUNWLENBQUMsQ0FBQztJQUNILE9BQU8sNkJBQUssS0FBSyxvQkFBTyxNQUFNLEtBQUssUUFBUSxDQUFPLENBQUM7QUFDckQsQ0FBQyxDQUFDIn0=

package/dist/src/components/Timeline/Timeline.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export declare type TimelineItemProps = {
+    /**
+     * Mandatory title prop for each section.
+     * Typically a formatted date is used.
+     * */
+    title: string;
+    /**
+     * Determines the separator dot look.
+     * @default 'default'
+     * */
+    variant?: 'default' | 'info' | 'warning' | 'error';
+    children: React.ReactNode;
+};
+declare const TimelineItem: React.FC<TimelineItemProps>;
+declare type TimelineProps = {
+    children: Array<React.ReactElement<TimelineItemProps>> | React.ReactElement<TimelineItemProps>;
+};
+declare type ComposedTimelineProps = React.FC<TimelineProps> & {
+    Item: typeof TimelineItem;
+    Skeleton: typeof TimelineSkeleton;
+};
+export declare const Timeline: ComposedTimelineProps;
+declare const TimelineSkeleton: React.FC<{
+    items?: number;
+}>;
+export {};

package/dist/src/components/Timeline/Timeline.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Timeline as BaseTimeline } from '../../../src/common/Timeline/Timeline';
+import { isComponentType } from '../../../types/utils';
+import { Typography } from '../../../src/components/Typography/Typography';
+import { Icon } from '../../../src/components/Icon/Icon';
+import time from '../../../src/icons/time';
+import warning from '../../../src/icons/warningSign';
+import danger from '../../../src/icons/error';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+import { Box } from '../../../src/components/Box/Box';
+const TimelineItem = () => null;
+export const Timeline = ({ children }) => (React.createElement("div", null, React.Children.map(children, (item) => {
+    if (!isComponentType(item, TimelineItem)) {
+        throw new Error('<Timeline> can only have <Timeline.Item> components as children');
+    }
+    else {
+        const { props, key } = item;
+        return (React.createElement(BaseTimeline, { key: key !== null && key !== void 0 ? key : props.title },
+            React.createElement(BaseTimeline.Separator, null, props.variant === 'error' ? (React.createElement(Icon, { icon: danger, color: "error-30" })) : props.variant === 'warning' ? (React.createElement(Icon, { icon: warning, color: "warning-30" })) : props.variant === 'info' ? (React.createElement(Icon, { icon: time, color: "info-30" })) : (React.createElement(BaseTimeline.Separator.Dot, null))),
+            React.createElement(Typography.Caption, { fontWeight: 600 }, props.title),
+            React.createElement(BaseTimeline.LineContainer, null,
+                React.createElement(BaseTimeline.LineContainer.Line, null)),
+            React.createElement(BaseTimeline.Content, null,
+                React.createElement(Typography, null, props.children))));
+    }
+})));
+const TimelineItemSkeleton = () => (React.createElement(BaseTimeline, null,
+    React.createElement(BaseTimeline.Separator, null,
+        React.createElement(Skeleton, { width: 6, height: 6, rounded: true })),
+    React.createElement(Skeleton, { height: 12, width: 120 }),
+    React.createElement(BaseTimeline.LineContainer, null,
+        React.createElement(Skeleton, { width: 2 })),
+    React.createElement(BaseTimeline.Content, null,
+        React.createElement(Box, { display: "flex", flexDirection: "column", gap: "3" },
+            React.createElement(Skeleton, { height: 32, width: "100%" }),
+            React.createElement(Skeleton, { height: 32, width: "73%" }),
+            React.createElement(Skeleton, { height: 32, width: "80%" })))));
+const TimelineSkeleton = ({ items = 3 }) => (React.createElement("div", null, Array.from({ length: items }).map((_, key) => (React.createElement(TimelineItemSkeleton, { key: key })))));
+Timeline.Item = TimelineItem;
+Timeline.Skeleton = TimelineSkeleton;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9UaW1lbGluZS9UaW1lbGluZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxRQUFRLElBQUksWUFBWSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDeEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUM5QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDbEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ2hELE9BQU8sSUFBSSxNQUFNLGdCQUFnQixDQUFDO0FBQ2xDLE9BQU8sT0FBTyxNQUFNLHVCQUF1QixDQUFDO0FBQzVDLE9BQU8sTUFBTSxNQUFNLGlCQUFpQixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUM1RCxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFpQjdDLE1BQU0sWUFBWSxHQUFnQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUM7QUFRN0QsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUEwQixDQUFDLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQy9ELGlDQUNHLEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxDQUFDLElBQUksRUFBRSxFQUFFO0lBQ3JDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxFQUFFLFlBQVksQ0FBQyxFQUFFO1FBQ3hDLE1BQU0sSUFBSSxLQUFLLENBQUMsaUVBQWlFLENBQUMsQ0FBQztLQUNwRjtTQUFNO1FBQ0wsTUFBTSxFQUFFLEtBQUssRUFBRSxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUM7UUFDNUIsT0FBTyxDQUNMLG9CQUFDLFlBQVks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

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

@@ -39,10 +39,10 @@ export * from './Popover/Popover';
 export * from './PopoverDialog/PopoverDialog';
 export { usePopoverContext } from './Popover/PopoverContext';
 export * from './Portal/Portal';
-export * from './Positioner/Positioner';
 export * from './ProgressBar/ProgressBar';
 export * from './RadioButton/RadioButton';
 export * from './RadioButtonGroup/RadioButtonGroup';
+export * from './Section/Section';
 export * from './SegmentedControl/SegmentedControl';
 export * from './Select/Select';
 export * from './Skeleton/Skeleton';
@@ -52,10 +52,13 @@ export * from './Table/Table';
 export * from './Tabs/Tabs';
 export * from './TagLabel/TagLabel';
 export * from './Tailwindify/Tailwindify';
+export * from './Template/Template';
 export * from './Textarea/Textarea';
+export * from './Timeline/Timeline';
 export * from './Tooltip/Tooltip';
 export * from './Typography/Typography';
 export * from '../common/Table/Table.utils';
+export * from './Pagination/usePagination';
 export declare const SelectItem: import("react").ForwardRefExoticComponent<{
     key: string;
     value: string;

package/dist/src/components/index.js

@@ -40,10 +40,10 @@ export * from './Popover/Popover';
 export * from './PopoverDialog/PopoverDialog';
 export { usePopoverContext } from './Popover/PopoverContext';
 export * from './Portal/Portal';
-export * from './Positioner/Positioner';
 export * from './ProgressBar/ProgressBar';
 export * from './RadioButton/RadioButton';
 export * from './RadioButtonGroup/RadioButtonGroup';
+export * from './Section/Section';
 export * from './SegmentedControl/SegmentedControl';
 export * from './Select/Select';
 export * from './Skeleton/Skeleton';
@@ -53,10 +53,13 @@ export * from './Table/Table';
 export * from './Tabs/Tabs';
 export * from './TagLabel/TagLabel';
 export * from './Tailwindify/Tailwindify';
+export * from './Template/Template';
 export * from './Textarea/Textarea';
+export * from './Timeline/Timeline';
 export * from './Tooltip/Tooltip';
 export * from './Typography/Typography';
 // Exported atoms and utility functions
 export * from '../common/Table/Table.utils';
+export * from './Pagination/usePagination';
 export const SelectItem = Select.Item;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFakQsc0RBQXNEO0FBQ3RELE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEMsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsV0FBVyxDQUFDO0FBQzFCLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUM3RCxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMscUNBQXFDLENBQUM7QUFDcEQsY0FBYyxxQ0FBcUMsQ0FBQztBQUNwRCxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyx5QkFBeUIsQ0FBQztBQUV4Qyx1Q0FBdUM7QUFDdkMsY0FBYyw2QkFBNkIsQ0FBQztBQUU1QyxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFakQsc0RBQXNEO0FBQ3RELE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEMsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsV0FBVyxDQUFDO0FBQzFCLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUM3RCxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHFDQUFxQyxDQUFDO0FBQ3BELGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxxQ0FBcUMsQ0FBQztBQUNwRCxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMseUJBQXlCLENBQUM7QUFFeEMsdUNBQXVDO0FBQ3ZDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyw0QkFBNEIsQ0FBQztBQUUzQyxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyJ9

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Blueprint: React.FC;

package/dist/src/utils/Blueprint.js

@@ -0,0 +1,29 @@
+import React, { useState, useLayoutEffect } from 'react';
+export const Blueprint = () => {
+    const [width, setWidth] = useState();
+    const [height, setHeight] = useState();
+    const ref = React.useRef(null);
+    useLayoutEffect(() => {
+        const updateSize = () => {
+            var _a, _b;
+            setHeight((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
+            setWidth((_b = ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth);
+        };
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    return (React.createElement("div", { ref: ref, style: {
+            color: 'white',
+            padding: 16,
+            textAlign: 'center',
+            backgroundColor: 'rgb(3, 153, 227)',
+            backgroundImage: 'linear-gradient(rgba(255,255,255,0.2) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,0.2) 2px, transparent 1px), linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)',
+            backgroundSize: '100px 100px, 100px 100px, 20px 20px, 20px 20px',
+            backgroundPosition: '-2px -2px, -2px -2px, -1px -1px, -1px -1px',
+        } },
+        width,
+        " x ",
+        height));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmx1ZXByaW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3V0aWxzL0JsdWVwcmludC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsZUFBZSxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBRXpELE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBYSxHQUFHLEVBQUU7SUFDdEMsTUFBTSxDQUFDLEtBQUssRUFBRSxRQUFRLENBQUMsR0FBRyxRQUFRLEVBQXNCLENBQUM7SUFDekQsTUFBTSxDQUFDLE1BQU0sRUFBRSxTQUFTLENBQUMsR0FBRyxRQUFRLEVBQXNCLENBQUM7SUFDM0QsTUFBTSxHQUFHLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUM7SUFFL0MsZUFBZSxDQUFDLEdBQUcsRUFBRTtRQUNuQixNQUFNLFVBQVUsR0FBRyxHQUFHLEVBQUU7O1lBQ3RCLFNBQVMsQ0FBQyxNQUFBLEdBQUcsQ0FBQyxPQUFPLDBDQUFFLFlBQVksQ0FBQyxDQUFDO1lBQ3JDLFFBQVEsQ0FBQyxNQUFBLEdBQUcsQ0FBQyxPQUFPLDBDQUFFLFdBQVcsQ0FBQyxDQUFDO1FBQ3JDLENBQUMsQ0FBQztRQUNGLFVBQVUsRUFBRSxDQUFDO1FBQ2IsTUFBTSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUM5QyxPQUFPLEdBQUcsRUFBRSxDQUFDLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxRQUFRLEVBQUUsVUFBVSxDQUFDLENBQUM7SUFDaEUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRVAsT0FBTyxDQUNMLDZCQUNFLEdBQUcsRUFBRSxHQUFHLEVBQ1IsS0FBSyxFQUFFO1lBQ0wsS0FBSyxFQUFFLE9BQU87WUFDZCxPQUFPLEVBQUUsRUFBRTtZQUNYLFNBQVMsRUFBRSxRQUFRO1lBQ25CLGVBQWUsRUFBRSxrQkFBa0I7WUFDbkMsZUFBZSxFQUNiLGlRQUFpUTtZQUNuUSxjQUFjLEVBQUUsZ0RBQWdEO1lBQ2hFLGtCQUFrQixFQUFFLDRDQUE0QztTQUNqRTtRQUVBLEtBQUs7O1FBQUssTUFBTSxDQUNiLENBQ1AsQ0FBQztBQUNKLENBQUMsQ0FBQyJ9

package/dist/styles.css

@@ -718,6 +718,9 @@ input[type='number'].no-arrows {
 .ml-4 {
   margin-left: 12px !important;
 }
+.mb-5 {
+  margin-bottom: 16px !important;
+}
 .mr-4 {
   margin-right: 12px !important;
 }
@@ -796,12 +799,18 @@ input[type='number'].no-arrows {
 .h-\[50px\] {
   height: 50px !important;
 }
-.h-\[32px\] {
-  height: 32px !important;
+.h-5 {
+  height: 16px !important;
 }
 .h-full {
   height: 100% !important;
 }
+.h-\[6px\] {
+  height: 6px !important;
+}
+.h-\[32px\] {
+  height: 32px !important;
+}
 .h-\[174px\] {
   height: 174px !important;
 }
@@ -811,9 +820,6 @@ input[type='number'].no-arrows {
 .h-1px {
   height: 1px !important;
 }
-.h-5 {
-  height: 16px !important;
-}
 .h-6 {
   height: 24px !important;
 }
@@ -838,6 +844,15 @@ input[type='number'].no-arrows {
 .w-3 {
   width: 8px !important;
 }
+.w-5 {
+  width: 16px !important;
+}
+.w-1 {
+  width: 2px !important;
+}
+.w-\[6px\] {
+  width: 6px !important;
+}
 .w-\[32px\] {
   width: 32px !important;
 }
@@ -847,15 +862,9 @@ input[type='number'].no-arrows {
 .w-1px {
   width: 1px !important;
 }
-.w-1 {
-  width: 2px !important;
-}
 .w-2 {
   width: 4px !important;
 }
-.w-5 {
-  width: 16px !important;
-}
 .w-6 {
   width: 24px !important;
 }
@@ -926,17 +935,6 @@ input[type='number'].no-arrows {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
 }
-@keyframes positioner-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.animate-positioner-fade-in {
-  animation: positioner-fade-in 300ms ease-in-out !important;
-}
 @keyframes pulse {
   50% {
     opacity: .5;
@@ -980,6 +978,9 @@ input[type='number'].no-arrows {
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 }
+.grid-cols-\[16px_1fr\] {
+  grid-template-columns: 16px 1fr !important;
+}
 .grid-cols-\[auto_1fr\] {
   grid-template-columns: auto 1fr !important;
 }
@@ -1026,6 +1027,10 @@ input[type='number'].no-arrows {
   grid-gap: 4px !important;
   gap: 4px !important;
 }
+.gap-5 {
+  grid-gap: 16px !important;
+  gap: 16px !important;
+}
 .gap-8 {
   grid-gap: 40px !important;
   gap: 40px !important;
@@ -1055,6 +1060,9 @@ input[type='number'].no-arrows {
 .self-center {
   align-self: center !important;
 }
+.justify-self-center {
+  justify-self: center !important;
+}
 .overflow-hidden {
   overflow: hidden !important;
 }
@@ -1115,22 +1123,22 @@ input[type='number'].no-arrows {
   --tw-border-opacity: 1 !important;
   border-color: rgb(3 153 227 / var(--tw-border-opacity)) !important;
 }
-.border-navyBlue-100 {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
-}
 .border-grey-5 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(237 237 240 / var(--tw-border-opacity)) !important;
 }
-.border-grey-50 {
+.border-navyBlue-100 {
   --tw-border-opacity: 1 !important;
-  border-color: rgb(120 120 133 / var(--tw-border-opacity)) !important;
+  border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
 }
 .border-grey-10 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(225 225 227 / var(--tw-border-opacity)) !important;
 }
+.border-grey-50 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(120 120 133 / var(--tw-border-opacity)) !important;
+}
 .border-grey-40 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(150 150 160 / var(--tw-border-opacity)) !important;
@@ -1173,14 +1181,14 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
 }
-.bg-navyBlue-100 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
-}
 .bg-white {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
 }
+.bg-navyBlue-100 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
+}
 .bg-grey-5 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(237 237 240 / var(--tw-bg-opacity)) !important;
@@ -1201,6 +1209,10 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(216 0 5 / var(--tw-bg-opacity)) !important;
 }
+.bg-grey-30 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;
+}
 .bg-current {
   background-color: currentColor !important;
 }
@@ -1310,6 +1322,14 @@ input[type='number'].no-arrows {
   padding-left: 16px !important;
   padding-right: 16px !important;
 }
+.px-6 {
+  padding-left: 24px !important;
+  padding-right: 24px !important;
+}
+.py-5 {
+  padding-top: 16px !important;
+  padding-bottom: 16px !important;
+}
 .py-\[6px\] {
   padding-top: 6px !important;
   padding-bottom: 6px !important;