@aivenio/aquarium 0.0.1

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { AsyncActionType } from '../../../types/ActionType';
+export declare enum EmptyStateLayout {
+    CenterVertical = "center-vertical",
+    LeftVertical = "left-vertical",
+    CenterHorizontal = "center-horizontal",
+    LeftHorizontal = "left-horizontal"
+}
+export declare type EmptyStateProps = {
+    /**
+     * Provide a short and concise explanation.
+     */
+    title: string;
+    /**
+     * Provide a non-interactive image that relates to the situation.
+     */
+    image?: string;
+    /**
+     * Pass useful alternative text when it is an informative image.
+     * If an image is just a decorative one, do not pass any value for imageAlt prop.
+     * This helps with image's accessibility.
+     */
+    imageAlt?: string;
+    /**
+     * Provide a fixed width number for an image if needed.
+     */
+    imageWidth?: number;
+    /**
+     * Provide a sentence that explain clearly about the next action to populate the space or why the space is empty and include the benefit of taking the next step.'
+     * This prop supports only 1 paragraph and can't include any link in it at the moment.
+     */
+    description?: string;
+    /**
+     * Provide a primary action referenced in the description.
+     */
+    primaryAction?: AsyncActionType;
+    /**
+     * Provide referencing documentation for future reading if needed.
+     */
+    secondaryAction?: AsyncActionType;
+    /**
+     * Use Typography component if possible. By default, this is wrapped by typography 'body-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.
+     */
+    borderStyle?: 'dashed' | 'solid' | 'none';
+};
+/**
+ * ## 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 declare const EmptyState: React.FC<EmptyStateProps>;

package/dist/src/components/EmptyState/EmptyState.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { tw, classNames } from '../../../src/utils/tailwind';
+import { Box } from '../../../src/components/Box/Box';
+import { PrimaryButton, SecondaryButton } from '../../../src/components/Button/Button';
+import { Flexbox } from '../../../src/components/Flexbox/Flexbox';
+import { FlexboxItem } from '../../../src/components/Flexbox/FlexboxItem';
+import { Typography } from '../../../src/components/Typography/Typography';
+import omit from 'lodash/omit';
+export var EmptyStateLayout;
+(function (EmptyStateLayout) {
+    EmptyStateLayout["CenterVertical"] = "center-vertical";
+    EmptyStateLayout["LeftVertical"] = "left-vertical";
+    EmptyStateLayout["CenterHorizontal"] = "center-horizontal";
+    EmptyStateLayout["LeftHorizontal"] = "left-horizontal";
+})(EmptyStateLayout || (EmptyStateLayout = {}));
+const layoutStyle = (layout) => {
+    switch (layout) {
+        case EmptyStateLayout.LeftVertical:
+            return {
+                layout: 'column',
+                justifyContent: 'flex-start',
+                alignItems: 'flex-start',
+            };
+        case EmptyStateLayout.LeftHorizontal:
+            return {
+                layout: 'row',
+                justifyContent: 'flex-start',
+                alignItems: 'flex-start',
+            };
+        case EmptyStateLayout.CenterHorizontal:
+            return {
+                layout: 'row',
+                justifyContent: 'center',
+                alignItems: 'flex-start',
+            };
+        case EmptyStateLayout.CenterVertical:
+        default:
+            return {
+                layout: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+            };
+    }
+};
+/**
+ * ## 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, primaryAction, secondaryAction, footer, layout = EmptyStateLayout.CenterVertical, borderStyle = 'dashed', }) => {
+    const template = layoutStyle(layout);
+    return (React.createElement(Box, { className: classNames(tw('rounded', {
+            '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, 
+            // 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-xl', htmlTag: 'h2' }, title),
+                description && (React.createElement(Box, { marginTop: '5' },
+                    React.createElement(Typography, { variant: 'body-default', color: 'grey-60' }, description))),
+                (secondaryAction || primaryAction) && (React.createElement(Flexbox, { marginTop: '7', gap: '4', justifyContent: 'center', alignItems: 'center', wrap: 'wrap' },
+                    primaryAction && React.createElement(PrimaryButton, Object.assign({}, omit(primaryAction, 'text')), primaryAction.text),
+                    secondaryAction && (React.createElement(SecondaryButton, Object.assign({}, omit(secondaryAction, 'text')), secondaryAction.text)))),
+                footer && (React.createElement(Box, { marginTop: '7' },
+                    React.createElement(Typography, { htmlTag: 'div', variant: 'body-small', color: 'grey-60' }, footer)))))));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRW1wdHlTdGF0ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0VtcHR5U3RhdGUvRW1wdHlTdGF0ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDcEQsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQzdDLE9BQU8sRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDOUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3pELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNqRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFFbEUsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBRS9CLE1BQU0sQ0FBTixJQUFZLGdCQUtYO0FBTEQsV0FBWSxnQkFBZ0I7SUFDMUIsc0RBQWtDLENBQUE7SUFDbEMsa0RBQThCLENBQUE7SUFDOUIsMERBQXNDLENBQUE7SUFDdEMsc0RBQWtDLENBQUE7QUFDcEMsQ0FBQyxFQUxXLGdCQUFnQixLQUFoQixnQkFBZ0IsUUFLM0I7QUFpRUQsTUFBTSxXQUFXLEdBQUcsQ0FBQyxNQUF3QixFQUFvQixFQUFFO0lBQ2pFLFFBQVEsTUFBTSxFQUFFO1FBQ2QsS0FBSyxnQkFBZ0IsQ0FBQyxZQUFZO1lBQ2hDLE9BQU87Z0JBQ0wsTUFBTSxFQUFFLFFBQVE7Z0JBQ2hCLGNBQWMsRUFBRSxZQUFZO2dCQUM1QixVQUFVLEVBQUUsWUFBWTthQUN6QixDQUFDO1FBQ0osS0FBSyxnQkFBZ0IsQ0FBQyxjQUFjO1lBQ2xDLE9BQU87Z0JBQ0wsTUFBTSxFQUFFLEtBQUs7Z0JBQ2IsY0FBYyxFQUFFLFlBQVk7Z0JB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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ObjectBreakpointable } from '../../../types/tailwind';
+import twTheme from '../../../tailwind.theme.json';
+export declare type FlexboxProps = {
+    children: React.ReactNode;
+    htmlTag?: keyof JSX.IntrinsicElements;
+    style?: React.CSSProperties;
+    className?: string;
+} & ObjectBreakpointable<{
+    display?: React.CSSProperties['display'];
+    justifyContent?: React.CSSProperties['justifyContent'];
+    alignContent?: React.CSSProperties['alignContent'];
+    alignItems?: React.CSSProperties['alignItems'];
+    direction?: React.CSSProperties['flexDirection'];
+    wrap?: React.CSSProperties['flexWrap'];
+    gap?: keyof typeof twTheme['gap'];
+    colGap?: keyof typeof twTheme['gap'];
+    rowGap?: keyof typeof twTheme['gap'];
+}>;
+export declare const Flexbox: (props: import("../../../src/components/Tailwindify/Tailwindify").TailwindifyProps<FlexboxProps>) => JSX.Element;

package/dist/src/components/Flexbox/Flexbox.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Tailwindify } from '../../../src/components/Tailwindify/Tailwindify';
+import { useStyle } from '../../../src/utils/useStyle';
+export const Flexbox = Tailwindify(({ htmlTag = 'div', className, style, children, display = 'flex', justifyContent, alignContent, alignItems, direction, wrap, gap, colGap, rowGap, }) => {
+    const hookStyle = useStyle({
+        display,
+        justifyContent,
+        alignContent,
+        alignItems,
+        flexDirection: direction,
+        flexWrap: wrap,
+        gap,
+        columnGap: colGap,
+        rowGap,
+    });
+    const HtmlElement = htmlTag;
+    return (React.createElement(HtmlElement, { style: Object.assign(Object.assign({}, hookStyle), style), className: className }, children));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleGJveC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ZsZXhib3gvRmxleGJveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUNyRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFvQjlDLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBRyxXQUFXLENBQ2hDLENBQUMsRUFDQyxPQUFPLEdBQUcsS0FBSyxFQUNmLFNBQVMsRUFDVCxLQUFLLEVBQ0wsUUFBUSxFQUNSLE9BQU8sR0FBRyxNQUFNLEVBQ2hCLGNBQWMsRUFDZCxZQUFZLEVBQ1osVUFBVSxFQUNWLFNBQVMsRUFDVCxJQUFJLEVBQ0osR0FBRyxFQUNILE1BQU0sRUFDTixNQUFNLEdBQ1AsRUFBRSxFQUFFO0lBQ0gsTUFBTSxTQUFTLEdBQUcsUUFBUSxDQUFDO1FBQ3pCLE9BQU87UUFDUCxjQUFjO1FBQ2QsWUFBWTtRQUNaLFVBQVU7UUFDVixhQUFhLEVBQUUsU0FBUztRQUN4QixRQUFRLEVBQUUsSUFBSTtRQUNkLEdBQUc7UUFDSCxTQUFTLEVBQUUsTUFBTTtRQUNqQixNQUFNO0tBQ1AsQ0FBQyxDQUFDO0lBRUgsTUFBTSxXQUFXLEdBQUcsT0FBTyxDQUFDO0lBRTVCLE9BQU8sQ0FDTCxvQkFBQyxXQUFXLElBQUMsS0FBSyxrQ0FBTyxTQUFTLEdBQUssS0FBSyxHQUFJLFNBQVMsRUFBRSxTQUFTLElBQ2pFLFFBQVEsQ0FDRyxDQUNmLENBQUM7QUFDSixDQUFDLENBQ0YsQ0FBQyJ9

package/dist/src/components/Flexbox/FlexboxItem.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ObjectBreakpointable } from '../../../types/tailwind';
+import twTheme from '../../../tailwind.theme.json';
+export declare type FlexboxItemProps = {
+    children?: React.ReactNode;
+    htmlTag?: keyof JSX.IntrinsicElements;
+    style?: React.CSSProperties;
+    className?: string;
+} & ObjectBreakpointable<{
+    display?: React.CSSProperties['display'];
+    flex?: keyof typeof twTheme['flex'];
+    grow?: React.CSSProperties['flexGrow'];
+    shrink?: React.CSSProperties['flexShrink'];
+    order?: keyof typeof twTheme['order'];
+    alignSelf?: React.CSSProperties['alignSelf'];
+}>;
+export declare const FlexboxItem: (props: import("../../../src/components/Tailwindify/Tailwindify").TailwindifyProps<FlexboxItemProps>) => JSX.Element;

package/dist/src/components/Flexbox/FlexboxItem.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Tailwindify } from '../../../src/components/Tailwindify/Tailwindify';
+import { useStyle } from '../../../src/utils/useStyle';
+export const FlexboxItem = Tailwindify(({ htmlTag = 'div', className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
+    const hookStyle = useStyle({
+        display,
+        flex,
+        flexGrow: grow,
+        flexShrink: shrink,
+        order,
+        alignSelf,
+    });
+    const HtmlElement = htmlTag;
+    return (React.createElement(HtmlElement, { style: Object.assign(Object.assign({}, hookStyle), style), className: className }, children));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleGJveEl0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9GbGV4Ym94L0ZsZXhib3hJdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBRXJFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQWdCOUMsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLFdBQVcsQ0FDcEMsQ0FBQyxFQUFFLE9BQU8sR0FBRyxLQUFLLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFO0lBQ2pHLE1BQU0sU0FBUyxHQUFHLFFBQVEsQ0FBQztRQUN6QixPQUFPO1FBQ1AsSUFBSTtRQUNKLFFBQVEsRUFBRSxJQUFJO1FBQ2QsVUFBVSxFQUFFLE1BQU07UUFDbEIsS0FBSztRQUNMLFNBQVM7S0FDVixDQUFDLENBQUM7SUFFSCxNQUFNLFdBQVcsR0FBRyxPQUFPLENBQUM7SUFFNUIsT0FBTyxDQUNMLG9CQUFDLFdBQVcsSUFBQyxLQUFLLGtDQUFPLFNBQVMsR0FBSyxLQUFLLEdBQUksU0FBUyxFQUFFLFNBQVMsSUFDakUsUUFBUSxDQUNHLENBQ2YsQ0FBQztBQUNKLENBQUMsQ0FDRixDQUFDIn0=

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ObjectBreakpointable } from '../../../types/tailwind';
+import twTheme from '../../../tailwind.theme.json';
+export declare type GridProps = {
+    children: React.ReactNode;
+    htmlTag?: keyof JSX.IntrinsicElements;
+    style?: React.CSSProperties;
+    className?: string;
+} & ObjectBreakpointable<{
+    display?: React.CSSProperties['display'];
+    cols?: keyof typeof twTheme['gridTemplateColumns'];
+    rows?: keyof typeof twTheme['gridTemplateRows'];
+    autoFlow?: React.CSSProperties['gridAutoFlow'];
+    autoCols?: keyof typeof twTheme['gridAutoColumns'];
+    autoRows?: keyof typeof twTheme['gridAutoRows'];
+    gap?: keyof typeof twTheme['gap'];
+    colGap?: keyof typeof twTheme['gap'];
+    rowGap?: keyof typeof twTheme['gap'];
+    justifyContent?: React.CSSProperties['justifyContent'];
+    alignContent?: React.CSSProperties['alignContent'];
+    alignItems?: React.CSSProperties['alignItems'];
+    justifyItems?: React.CSSProperties['justifyItems'];
+    placeContent?: React.CSSProperties['placeContent'];
+    placeItems?: React.CSSProperties['placeItems'];
+    colSpan?: keyof typeof twTheme['gridColumn'];
+    colStart?: keyof typeof twTheme['gridColumnStart'];
+    colEnd?: keyof typeof twTheme['gridColumnEnd'];
+    rowSpan?: keyof typeof twTheme['gridRow'];
+    rowStart?: keyof typeof twTheme['gridRowStart'];
+    rowEnd?: keyof typeof twTheme['gridRowEnd'];
+}>;
+export declare const Grid: (props: import("../../../src/components/Tailwindify/Tailwindify").TailwindifyProps<GridProps>) => JSX.Element;

package/dist/src/components/Grid/Grid.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Tailwindify } from '../../../src/components/Tailwindify/Tailwindify';
+import { useStyle } from '../../../src/utils/useStyle';
+export const Grid = Tailwindify(({ htmlTag = 'div', className, style, children, display = 'grid', justifyContent, alignContent, alignItems, justifyItems, placeContent, placeItems, cols = '12', rows, autoFlow, autoCols, autoRows, gap, colGap, rowGap, colSpan, colStart, colEnd, rowSpan, rowStart, rowEnd, }) => {
+    const hookStyle = useStyle({
+        display,
+        justifyContent,
+        alignContent,
+        alignItems,
+        justifyItems,
+        placeContent,
+        placeItems,
+        gridTemplateColumns: cols,
+        gridTemplateRows: rows,
+        gridAutoFlow: autoFlow,
+        gridAutoColumns: autoCols,
+        gridAutoRows: autoRows,
+        gap,
+        columnGap: colGap,
+        rowGap,
+        gridColumn: colSpan,
+        gridColumnStart: colStart,
+        gridColumnEnd: colEnd,
+        gridRow: rowSpan,
+        gridRowStart: rowStart,
+        gridRowEnd: rowEnd,
+    });
+    const HtmlElement = htmlTag;
+    return (React.createElement(HtmlElement, { style: Object.assign(Object.assign({}, hookStyle), style), className: className }, children));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiR3JpZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0dyaWQvR3JpZC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUVyRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFnQzlDLE1BQU0sQ0FBQyxNQUFNLElBQUksR0FBRyxXQUFXLENBQzdCLENBQUMsRUFDQyxPQUFPLEdBQUcsS0FBSyxFQUNmLFNBQVMsRUFDVCxLQUFLLEVBQ0wsUUFBUSxFQUNSLE9BQU8sR0FBRyxNQUFNLEVBQ2hCLGNBQWMsRUFDZCxZQUFZLEVBQ1osVUFBVSxFQUNWLFlBQVksRUFDWixZQUFZLEVBQ1osVUFBVSxFQUNWLElBQUksR0FBRyxJQUFJLEVBQ1gsSUFBSSxFQUNKLFFBQVEsRUFDUixRQUFRLEVBQ1IsUUFBUSxFQUNSLEdBQUcsRUFDSCxNQUFNLEVBQ04sTUFBTSxFQUNOLE9BQU8sRUFDUCxRQUFRLEVBQ1IsTUFBTSxFQUNOLE9BQU8sRUFDUCxRQUFRLEVBQ1IsTUFBTSxHQUNJLEVBQUUsRUFBRTtJQUNkLE1BQU0sU0FBUyxHQUFHLFFBQVEsQ0FBQztRQUN6QixPQUFPO1FBQ1AsY0FBYztRQUNkLFlBQVk7UUFDWixVQUFVO1FBQ1YsWUFBWTtRQUNaLFlBQVk7UUFDWixVQUFVO1FBQ1YsbUJBQW1CLEVBQUUsSUFBSTtRQUN6QixnQkFBZ0IsRUFBRSxJQUFJO1FBQ3RCLFlBQVksRUFBRSxRQUFRO1FBQ3RCLGVBQWUsRUFBRSxRQUFRO1FBQ3pCLFlBQVksRUFBRSxRQUFRO1FBQ3RCLEdBQUc7UUFDSCxTQUFTLEVBQUUsTUFBTTtRQUNqQixNQUFNO1FBQ04sVUFBVSxFQUFFLE9BQU87UUFDbkIsZUFBZSxFQUFFLFFBQVE7UUFDekIsYUFBYSxFQUFFLE1BQU07UUFDckIsT0FBTyxFQUFFLE9BQU87UUFDaEIsWUFBWSxFQUFFLFFBQVE7UUFDdEIsVUFBVSxFQUFFLE1BQU07S0FDbkIsQ0FBQyxDQUFDO0lBRUgsTUFBTSxXQUFXLEdBQUcsT0FBTyxDQUFDO0lBRTVCLE9BQU8sQ0FDTCxvQkFBQyxXQUFXLElBQUMsS0FBSyxrQ0FBTyxTQUFTLEdBQUssS0FBSyxHQUFJLFNBQVMsRUFBRSxTQUFTLElBQ2pFLFFBQVEsQ0FDRyxDQUNmLENBQUM7QUFDSixDQUFDLENBQ0YsQ0FBQyJ9

package/dist/src/components/Grid/GridItem.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ObjectBreakpointable } from '../../../types/tailwind';
+import twTheme from '../../../tailwind.theme.json';
+export declare type GridItemProps = {
+    children?: React.ReactNode;
+    htmlTag?: keyof JSX.IntrinsicElements;
+    style?: React.CSSProperties;
+    className?: string;
+} & ObjectBreakpointable<{
+    display?: React.CSSProperties['display'];
+    colSpan?: keyof typeof twTheme['gridColumn'];
+    colStart?: keyof typeof twTheme['gridColumnStart'];
+    colEnd?: keyof typeof twTheme['gridColumnEnd'];
+    rowSpan?: keyof typeof twTheme['gridRow'];
+    rowStart?: keyof typeof twTheme['gridRowStart'];
+    rowEnd?: keyof typeof twTheme['gridRowEnd'];
+    justifySelf?: React.CSSProperties['justifySelf'];
+    alignSelf?: React.CSSProperties['alignSelf'];
+    placeSelf?: React.CSSProperties['placeSelf'];
+}>;
+export declare const GridItem: (props: import("../../../src/components/Tailwindify/Tailwindify").TailwindifyProps<GridItemProps>) => JSX.Element;

package/dist/src/components/Grid/GridItem.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useStyle } from '../../../src/utils/useStyle';
+import { Tailwindify } from '../../../src/components/Tailwindify/Tailwindify';
+export const GridItem = Tailwindify(({ htmlTag = 'div', className, style, children, display, justifySelf, alignSelf, placeSelf, colSpan, colStart, colEnd, rowSpan, rowStart, rowEnd, }) => {
+    const hookStyle = useStyle({
+        display,
+        justifySelf,
+        alignSelf,
+        placeSelf,
+        gridColumn: colSpan,
+        gridColumnStart: colStart,
+        gridColumnEnd: colEnd,
+        gridRow: rowSpan,
+        gridRowStart: rowStart,
+        gridRowEnd: rowEnd,
+    });
+    const HtmlElement = htmlTag;
+    return (React.createElement(HtmlElement, { style: Object.assign(Object.assign({}, hookStyle), style), className: className }, children));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiR3JpZEl0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9HcmlkL0dyaWRJdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQzlDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQXFCckUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLFdBQVcsQ0FDakMsQ0FBQyxFQUNDLE9BQU8sR0FBRyxLQUFLLEVBQ2YsU0FBUyxFQUNULEtBQUssRUFDTCxRQUFRLEVBQ1IsT0FBTyxFQUNQLFdBQVcsRUFDWCxTQUFTLEVBQ1QsU0FBUyxFQUNULE9BQU8sRUFDUCxRQUFRLEVBQ1IsTUFBTSxFQUNOLE9BQU8sRUFDUCxRQUFRLEVBQ1IsTUFBTSxHQUNRLEVBQUUsRUFBRTtJQUNsQixNQUFNLFNBQVMsR0FBRyxRQUFRLENBQUM7UUFDekIsT0FBTztRQUNQLFdBQVc7UUFDWCxTQUFTO1FBQ1QsU0FBUztRQUNULFVBQVUsRUFBRSxPQUFPO1FBQ25CLGVBQWUsRUFBRSxRQUFRO1FBQ3pCLGFBQWEsRUFBRSxNQUFNO1FBQ3JCLE9BQU8sRUFBRSxPQUFPO1FBQ2hCLFlBQVksRUFBRSxRQUFRO1FBQ3RCLFVBQVUsRUFBRSxNQUFNO0tBQ25CLENBQUMsQ0FBQztJQUVILE1BQU0sV0FBVyxHQUFHLE9BQU8sQ0FBQztJQUU1QixPQUFPLENBQ0wsb0JBQUMsV0FBVyxJQUFDLEtBQUssa0NBQU8sU0FBUyxHQUFLLEtBQUssR0FBSSxTQUFTLEVBQUUsU0FBUyxJQUNqRSxRQUFRLENBQ0csQ0FDZixDQUFDO0FBQ0osQ0FBQyxDQUNGLENBQUMifQ==

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IconProps as IconifyProps } from '@iconify/react';
+import { ColorName } from '../../../types/designTokens';
+export declare type IconProps = Omit<IconifyProps, 'color'> & {
+    color?: ColorName;
+    className?: string;
+};
+export declare const Icon: React.ForwardRefExoticComponent<Pick<IconProps, "string" | "end" | "local" | "color" | "clip" | "slice" | "style" | "inline" | "flip" | "fill" | "stroke" | "x" | "y" | "icon" | "clipPath" | "cursor" | "direction" | "display" | "filter" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "mask" | "offset" | "overflow" | "textDecoration" | "azimuth" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "additive" | "unicodeRange" | "orientation" | "values" | "path" | "children" | "key" | "crossOrigin" | "href" | "max" | "media" | "method" | "min" | "name" | "className" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "target" | "type" | "accentHeight" | "accumulate" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "hFlip" | "vFlip" | "hAlign" | "vAlign"> & React.RefAttributes<SVGSVGElement>>;
+export declare const InlineIcon: React.ForwardRefExoticComponent<Pick<IconProps, "string" | "end" | "local" | "color" | "clip" | "slice" | "style" | "inline" | "flip" | "fill" | "stroke" | "x" | "y" | "icon" | "clipPath" | "cursor" | "direction" | "display" | "filter" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "mask" | "offset" | "overflow" | "textDecoration" | "azimuth" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "additive" | "unicodeRange" | "orientation" | "values" | "path" | "children" | "key" | "crossOrigin" | "href" | "max" | "media" | "method" | "min" | "name" | "className" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "target" | "type" | "accentHeight" | "accumulate" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "hFlip" | "vFlip" | "hAlign" | "vAlign"> & React.RefAttributes<SVGSVGElement>>;

package/dist/src/components/Icon/Icon.js

@@ -0,0 +1,26 @@
+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 { Icon as IconifyIconComponent, InlineIcon as IconifyInlineIconComponent, } from '@iconify/react';
+import { classNames, tw } from '../../../src/utils/tailwind';
+export const Icon = React.forwardRef((_a, ref) => {
+    var { color, className } = _a, rest = __rest(_a, ["color", "className"]);
+    const classes = classNames(className, color && `text-${color}`);
+    return React.createElement(IconifyIconComponent, Object.assign({ ref: ref !== null && ref !== void 0 ? ref : undefined, className: classes !== '' ? classes : undefined }, rest));
+});
+export const InlineIcon = React.forwardRef((_a, ref) => {
+    var { color, className } = _a, rest = __rest(_a, ["color", "className"]);
+    const classes = classNames(color && `text-${color}`);
+    return (React.createElement("span", { className: classNames(tw('children:inline-block inline-flex justify-center items-center'), className) },
+        React.createElement(IconifyInlineIconComponent, Object.assign({ ref: ref !== null && ref !== void 0 ? ref : undefined, className: classes !== '' ? classes : undefined }, rest))));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ljb24vSWNvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNMLElBQUksSUFBSSxvQkFBb0IsRUFDNUIsVUFBVSxJQUFJLDBCQUEwQixHQUV6QyxNQUFNLGdCQUFnQixDQUFDO0FBQ3hCLE9BQU8sRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFRcEQsTUFBTSxDQUFDLE1BQU0sSUFBSSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQTJCLENBQUMsRUFBNkIsRUFBRSxHQUFHLEVBQUUsRUFBRTtRQUF0QyxFQUFFLEtBQUssRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQTNCLHNCQUE2QixDQUFGO0lBQ3pGLE1BQU0sT0FBTyxHQUFHLFVBQVUsQ0FBQyxTQUFTLEVBQUUsS0FBSyxJQUFJLFFBQVEsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUNoRSxPQUFPLG9CQUFDLG9CQUFvQixrQkFBQyxHQUFHLEVBQUUsR0FBRyxhQUFILEdBQUcsY0FBSCxHQUFHLEdBQUksU0FBUyxFQUFFLFNBQVMsRUFBRSxPQUFPLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFNBQVMsSUFBTSxJQUFJLEVBQUksQ0FBQztBQUNwSCxDQUFDLENBQUMsQ0FBQztBQUVILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUEyQixDQUFDLEVBQTZCLEVBQUUsR0FBRyxFQUFFLEVBQUU7UUFBdEMsRUFBRSxLQUFLLEVBQUUsU0FBUyxPQUFXLEVBQU4sSUFBSSxjQUEzQixzQkFBNkIsQ0FBRjtJQUMvRixNQUFNLE9BQU8sR0FBRyxVQUFVLENBQUMsS0FBSyxJQUFJLFFBQVEsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUNyRCxPQUFPLENBQ0wsOEJBQU0sU0FBUyxFQUFFLFVBQVUsQ0FBQyxFQUFFLENBQUMsK0RBQStELENBQUMsRUFBRSxTQUFTLENBQUM7UUFDekcsb0JBQUMsMEJBQTBCLGtCQUFDLEdBQUcsRUFBRSxHQUFHLGFBQUgsR0FBRyxjQUFILEdBQUcsR0FBSSxTQUFTLEVBQUUsU0FBUyxFQUFFLE9BQU8sS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsU0FBUyxJQUFNLElBQUksRUFBSSxDQUMzRyxDQUNSLENBQUM7QUFDSixDQUFDLENBQUMsQ0FBQyJ9

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LabelControlProps } from '../../../src/utils/form/Label/Label';
+export declare type InputBaseProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    /**
+     * Indicator if the input value is valid.
+     *
+     * If no value is given, no validation status is displayed (defaults to `undefined`).
+     * If either true or false are given, an icon is shown within the input.
+     * In the case of an invalid value (_false_), an error message is shown that
+     * can be customized with the `helperText` property.
+     */
+    valid?: boolean;
+    /**
+     * Optional adornment that will be added as suffix to input.
+     */
+    endAdornment?: React.ReactElement;
+};
+declare type InputBaseComponent = React.ForwardRefExoticComponent<InputBaseProps & React.RefAttributes<HTMLInputElement>> & {
+    Skeleton: React.FC;
+};
+declare const InputBase: InputBaseComponent;
+declare const SearchInput: InputBaseComponent;
+export declare type InputProps = InputBaseProps & Omit<LabelControlProps, 'length'>;
+declare type InputComponent = React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>> & {
+    Skeleton: React.FC;
+};
+declare const Input: InputComponent;
+export { Input, InputBase, SearchInput };

package/dist/src/components/Input/Input.js

@@ -0,0 +1,79 @@
+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 uniqueId from 'lodash/uniqueId';
+import toString from 'lodash/toString';
+import omit from 'lodash/omit';
+import React, { forwardRef, useState, useImperativeHandle, useRef } from 'react';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+import { classNames, tw } from '../../../src/utils/tailwind';
+import { getCommonInputStyles } from '../../../src/utils/constants';
+import { InputAdornment, SearchIcon, ResetIcon } from '../../../src/utils/form/InputAdornment/InputAdornment';
+const createInput = (displayName, opts = {}) => {
+    const InputComponent = forwardRef((_a, ref) => {
+        var _b;
+        var { type = 'text', maxLength, valid = true, required = false, endAdornment, disabled = false, readOnly = false } = _a, props = __rest(_a, ["type", "maxLength", "valid", "required", "endAdornment", "disabled", "readOnly"]);
+        const inputRef = React.useRef(null);
+        useImperativeHandle(ref, () => inputRef.current);
+        const handleReset = () => {
+            var _a;
+            const el = inputRef.current;
+            if (el) {
+                // Could not find a better way to reset input value
+                // and trigger onChange() for then input that this.
+                // `dispatchEvent()` does not seem to work unless previous
+                // value is explicitly set using `_valueTracker`.
+                const lastValue = el.value;
+                el.value = '';
+                (_a = el._valueTracker) === null || _a === void 0 ? void 0 : _a.setValue(lastValue);
+                el.dispatchEvent(new Event('change', { bubbles: true }));
+                el.focus();
+            }
+        };
+        return (React.createElement("span", { className: tw('relative block') },
+            opts.adornment && React.createElement(InputAdornment, { placement: "left" }, opts.adornment),
+            React.createElement("input", Object.assign({ ref: inputRef, type: type }, props, { disabled: disabled, maxLength: maxLength, required: required, readOnly: readOnly, className: classNames({
+                    'pl-7': opts.adornment,
+                }, getCommonInputStyles({ readOnly, valid }), props.className) })),
+            opts.canReset && (props.value || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value)) && (React.createElement(InputAdornment, null,
+                React.createElement(ResetIcon, { onClick: handleReset }))),
+            !opts.canReset && endAdornment && React.createElement(InputAdornment, null, endAdornment)));
+    });
+    InputComponent.displayName = displayName;
+    InputComponent.Skeleton = () => React.createElement(Skeleton, { height: 38 });
+    return InputComponent;
+};
+const InputBase = createInput('InputBase');
+const SearchInput = createInput('SearchInput', { adornment: React.createElement(SearchIcon, null), canReset: true });
+const Input = React.forwardRef((_a, ref) => {
+    var _b, _c, _d;
+    var { readOnly = false } = _a, props = __rest(_a, ["readOnly"]);
+    const [value, setValue] = useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : '');
+    // we need a unique ID to be used for an accessible connection between the input and its error message
+    const id = useRef((_d = props.id) !== null && _d !== void 0 ? _d : `input-${uniqueId()}`);
+    const errorMessageId = uniqueId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const _e = getLabelControlProps(props), { 'data-testid': dataTestId } = _e, labelControlProps = __rest(_e, ['data-testid']);
+    const baseProps = omit(props, Object.keys(labelControlProps));
+    return (React.createElement(LabelControl, Object.assign({ id: `${id.current}-label`, htmlFor: id.current, messageId: errorMessageId, length: value !== undefined ? toString(value).length : undefined }, labelControlProps),
+        React.createElement(InputBase, Object.assign({ ref: ref }, baseProps, errorProps, { id: id.current, "data-testid": dataTestId, onChange: (e) => {
+                var _a;
+                setValue(e.currentTarget.value);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, disabled: props.disabled, maxLength: props.maxLength, required: props.required, valid: props.valid, readOnly: readOnly }))));
+});
+Input.displayName = 'Input'; // this will affect the Doc code preview in storybook to not show it as <No Display Name/> or <[object Object]/>.
+Input.Skeleton = () => (React.createElement(LabelControl.Skeleton, null,
+    React.createElement(InputBase.Skeleton, null)));
+Input.Skeleton.displayName = 'Input.Skeleton'; // this will affect the Doc code preview in storybook to not show it as <No Display Name/> or <[object Object]/>.
+export { Input, InputBase, SearchInput };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9JbnB1dC9JbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLFFBQVEsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLFFBQVEsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLElBQUksTUFBTSxhQUFhLENBQUM7QUFDL0IsT0FBTyxLQUFLLEVBQUUsRUFBRSxVQUFVLEVBQUUsUUFBUSxFQUFFLG1CQUFtQixFQUFFLE1BQU0sRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNqRixPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDNUQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFlBQVksRUFBcUIsTUFBTSw0QkFBNEIsQ0FBQztBQUNuRyxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3BELE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQzNELE9BQU8sRUFBRSxjQUFjLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBNEJyRyxNQUFNLFdBQVcsR0FBRyxDQUFDLFdBQW1CLEVBQUUsT0FBcUIsRUFBRSxFQUFzQixFQUFFO0lBQ3ZGLE1BQU0sY0FBYyxHQUFHLFVBQVUsQ0FDL0IsQ0FDRSxFQVNDLEVBQ0QsR0FBRyxFQUNILEVBQUU7O1lBWEYsRUFDRSxJQUFJLEdBQUcsTUFBTSxFQUNiLFNBQVMsRUFDVCxLQUFLLEdBQUcsSUFBSSxFQUNaLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLFlBQVksRUFDWixRQUFRLEdBQUcsS0FBSyxFQUNoQixRQUFRLEdBQUcsS0FBSyxPQUVqQixFQURJLEtBQUssY0FSVixrRkFTQyxDQURTO1FBSVYsTUFBTSxRQUFRLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBbUIs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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+declare type Item = unknown;
+declare type ListProps<I extends Item> = {
+    /**
+     * Collection of items you want to render
+     */
+    items: I[];
+    /**
+     * Render callback function for each of your items
+     */
+    renderItem: (item: I) => JSX.Element | null;
+    /**
+     * Optional container element.
+     * @default React.Fragment
+     */
+    container?: React.ElementType;
+};
+export declare const List: <I extends unknown>({ items, renderItem, container }: ListProps<I>) => JSX.Element;
+export {};

package/dist/src/components/List/List.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export const List = ({ items, renderItem, container = React.Fragment }) => {
+    const Component = container;
+    return React.createElement(Component, null, items.map(renderItem));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGlzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBb0IxQixNQUFNLENBQUMsTUFBTSxJQUFJLEdBQUcsQ0FBaUIsRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFNBQVMsR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFnQixFQUFlLEVBQUU7SUFDbkgsTUFBTSxTQUFTLEdBQUcsU0FBUyxDQUFDO0lBQzVCLE9BQU8sb0JBQUMsU0FBUyxRQUFFLEtBQUssQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQWEsQ0FBQztBQUN4RCxDQUFDLENBQUMifQ==

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type ListItemProps = {
+    name: string;
+    icon: string;
+    active?: boolean;
+};
+export declare const ListItem: (props: ListItemProps) => JSX.Element;

package/dist/src/components/ListItem/ListItem.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Flexbox } from '../../../src/components/Flexbox/Flexbox';
+import { Typography } from '../../../src/components/Typography/Typography';
+export const ListItem = ({ name, icon, active = false }) => {
+    return (React.createElement(Flexbox, { alignItems: 'center' },
+        React.createElement(Typography, { variant: active ? 'body-small-medium' : 'body-small', color: 'grey-70', htmlTag: 'span', className: `px-4 py-2 rounded-full ${active ? 'bg-grey-5' : 'hover:bg-grey-0'}` },
+            React.createElement("img", { src: icon, alt: name, className: 'inline mr-4', height: 28, width: 28 }),
+            name)));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGlzdEl0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MaXN0SXRlbS9MaXN0SXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN6RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFRbEUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUEwQyxDQUFDLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxNQUFNLEdBQUcsS0FBSyxFQUFFLEVBQUUsRUFBRTtJQUNoRyxPQUFPLENBQ0wsb0JBQUMsT0FBTyxJQUFDLFVBQVUsRUFBRSxRQUFRO1FBQzNCLG9CQUFDLFVBQVUsSUFDVCxPQUFPLEVBQUUsTUFBTSxDQUFDLENBQUMsQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLENBQUMsWUFBWSxFQUNwRCxLQUFLLEVBQUUsU0FBUyxFQUNoQixPQUFPLEVBQUUsTUFBTSxFQUNmLFNBQVMsRUFBRSwwQkFBMEIsTUFBTSxDQUFDLENBQUMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLGlCQUFpQixFQUFFO1lBRS9FLDZCQUFLLEdBQUcsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsYUFBYSxFQUFFLE1BQU0sRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLEVBQUUsR0FBSTtZQUM3RSxJQUFJLENBQ00sQ0FDTCxDQUNYLENBQUM7QUFDSixDQUFDLENBQUMifQ==