@aivenio/aquarium 0.0.1

package/dist/src/common/index.js

@@ -0,0 +1,13 @@
+export * from './Alert/Alert';
+export * from './Checkbox/Checkbox';
+export * from './Chip/Chip';
+export * from './Dialog/Dialog';
+export * from './DropdownMenu/DropdownMenu';
+export * from './InputGroup/InputGroup';
+export * from './Modal/Modal';
+export * from './PopoverDialog/PopoverDialog';
+export * from './Popover/Popover';
+export * from './RadioButton/RadioButton';
+export * from './Select/Select';
+export * from './Table/Table';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tbW9uL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGVBQWUsQ0FBQyJ9

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AlertType } from '../../../src/common/Alert/Alert';
+import type { ActionType } from '../../../types/ActionType';
+export declare type AlertProps = {
+    /** Optional title for alert. */
+    title?: string;
+    /** Alert description. */
+    description: string;
+    /** Alert type. */
+    type: AlertType;
+    /** Optional action for alert. */
+    action?: ActionType;
+    /** If `onDismiss()` callback is provided, alert will be rendered with close icon.
+     * Callback will be called, when user clicks the icon.
+     */
+    onDismiss?: () => void;
+};
+export declare const Alert: React.FC<AlertProps>;

package/dist/src/components/Alert/Alert.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Alert as AlertBase } from '../../../src/common/Alert/Alert';
+import { GhostButton } from '../../../src/components';
+import omit from 'lodash/omit';
+export const Alert = ({ description, type, title, action, onDismiss }) => (React.createElement(AlertBase, { type: type, dense: Boolean(title) },
+    React.createElement(AlertBase.Icon, { type: type }),
+    title && React.createElement(AlertBase.Title, null, title),
+    React.createElement(AlertBase.Description, null, description),
+    action && (React.createElement(AlertBase.Actions, null,
+        React.createElement(GhostButton, Object.assign({ dense: true }, omit(action, 'text')), action.text))),
+    onDismiss && React.createElement(AlertBase.Dismiss, { onClick: onDismiss })));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQWxlcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9BbGVydC9BbGVydC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxLQUFLLElBQUksU0FBUyxFQUFhLE1BQU0sd0JBQXdCLENBQUM7QUFFdkUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQXNCL0IsTUFBTSxDQUFDLE1BQU0sS0FBSyxHQUF5QixDQUFDLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUM5RixvQkFBQyxTQUFTLElBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsT0FBTyxDQUFDLEtBQUssQ0FBQztJQUMxQyxvQkFBQyxTQUFTLENBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxJQUFJLEdBQUk7SUFDN0IsS0FBSyxJQUFJLG9CQUFDLFNBQVMsQ0FBQyxLQUFLLFFBQUUsS0FBSyxDQUFtQjtJQUNwRCxvQkFBQyxTQUFTLENBQUMsV0FBVyxRQUFFLFdBQVcsQ0FBeUI7SUFDM0QsTUFBTSxJQUFJLENBQ1Qsb0JBQUMsU0FBUyxDQUFDLE9BQU87UUFDaEIsb0JBQUMsV0FBVyxrQkFBQyxLQUFLLFVBQUssSUFBSSxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUMsR0FDeEMsTUFBTSxDQUFDLElBQUksQ0FDQSxDQUNJLENBQ3JCO0lBQ0EsU0FBUyxJQUFJLG9CQUFDLFNBQVMsQ0FBQyxPQUFPLElBQUMsT0FBTyxFQUFFLFNBQVMsR0FBSSxDQUM3QyxDQUNiLENBQUMifQ==

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

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare type AvatarStackProps = {
+    /**
+     * Image src of avatars that will be displayed as stacked entity and set to 32px x 32px.
+     * If the value is "null", it will show as skeleton.
+     */
+    images: Array<string | null>;
+};
+export declare const AvatarStack: React.FC<AvatarStackProps>;
+export declare type AvatarProps = {
+    /**
+     * Image src of avatar that will be displayed as 32px x 32px.
+     */
+    image: string;
+};
+export declare const Avatar: React.FC<AvatarProps> & {
+    Skeleton: typeof AvatarSkeleton;
+};
+declare const AvatarSkeleton: React.FC;
+export {};

package/dist/src/components/Avatar/Avatar.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Box } from '../../../src/components/Box/Box';
+import { classNames, tw } from '../../../src/utils/tailwind';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+export const AvatarStack = ({ images }) => (React.createElement(Box, { display: "flex", className: tw('[&>*:not(:first-child)]:-ml-3') }, images.map((image) => (image ? React.createElement(Avatar, { key: image, image: image }) : React.createElement(Avatar.Skeleton, { key: image })))));
+export const Avatar = ({ image }) => (React.createElement("img", { src: image, className: classNames(tw('w-[32px] h-[32px]')) }));
+const AvatarSkeleton = () => React.createElement(Skeleton, { height: 32, width: 32, className: tw('rounded-full') });
+Avatar.Skeleton = AvatarSkeleton;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXZhdGFyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3BELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQVU1RCxNQUFNLENBQUMsTUFBTSxXQUFXLEdBQStCLENBQUMsRUFBRSxNQUFNLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDckUsb0JBQUMsR0FBRyxJQUFDLE9BQU8sRUFBQyxNQUFNLEVBQUMsU0FBUyxFQUFFLEVBQUUsQ0FBQywrQkFBK0IsQ0FBQyxJQUMvRCxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsb0JBQUMsTUFBTSxJQUFDLEdBQUcsRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssR0FBSSxDQUFDLENBQUMsQ0FBQyxvQkFBQyxNQUFNLENBQUMsUUFBUSxJQUFDLEdBQUcsRUFBRSxLQUFLLEdBQUksQ0FBQyxDQUFDLENBQ3BHLENBQ1AsQ0FBQztBQVNGLE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBZ0UsQ0FBQyxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUNoRyw2QkFBSyxHQUFHLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLG1CQUFtQixDQUFDLENBQUMsR0FBSSxDQUNwRSxDQUFDO0FBRUYsTUFBTSxjQUFjLEdBQWEsR0FBRyxFQUFFLENBQUMsb0JBQUMsUUFBUSxJQUFDLE1BQU0sRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsRUFBRSxDQUFDLGNBQWMsQ0FBQyxHQUFJLENBQUM7QUFFMUcsTUFBTSxDQUFDLFFBQVEsR0FBRyxjQUFjLENBQUMifQ==

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

@@ -0,0 +1,36 @@
+import React from 'react';
+declare type BadgeType = 'outlined' | 'filled';
+export interface BadgeProps {
+    /**
+     * Badge value.
+     */
+    'value': string | number;
+    /**
+     * Badge kind. Can be either 'filled' or 'outlined'. Defaults to 'filled'.
+     */
+    'kind'?: BadgeType;
+    /**
+     * `data-testid` prop that will be added for containing element.
+     */
+    'data-testid'?: string;
+    /**
+     * Optional classname for text.
+     */
+    'textClassname'?: string;
+}
+export declare type ChipBadgeProps = BadgeProps & {
+    /**
+     * If true, display dense version of the badge.
+     */
+    dense?: boolean;
+};
+export declare const Badge: React.FC<BadgeProps> & {
+    Skeleton: React.FC;
+};
+export declare const TabBadge: React.FC<BadgeProps> & {
+    Skeleton: React.FC;
+};
+export declare const ChipBadge: React.FC<ChipBadgeProps> & {
+    Skeleton: React.FC;
+};
+export {};

package/dist/src/components/Badge/Badge.js

@@ -0,0 +1,46 @@
+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 omit from 'lodash/omit';
+import { tw, classNames } from '../../../src/utils/tailwind';
+import { Skeleton } from '../Skeleton/Skeleton';
+const isChipBadgeProps = (props) => 'dense' in props;
+const createBadge = (type, displayName) => {
+    const Component = (props) => {
+        var _a;
+        const { kind = 'filled', value, textClassname } = props, rest = __rest(props, ["kind", "value", "textClassname"]);
+        const valueStr = value.toString();
+        const dense = isChipBadgeProps(props) ? (_a = props.dense) !== null && _a !== void 0 ? _a : false : false;
+        return (React.createElement("span", Object.assign({}, omit(rest, 'dense'), { className: tw('inline-block text-center', {
+                'rounded-full': type === 'default' || type === 'chip',
+                'rounded': type === 'tab',
+                'border border-current': kind === 'outlined',
+                'bg-current': kind === 'filled' && type !== 'chip',
+                'bg-white': type === 'chip',
+                'typography-caption-small leading-none py-1 px-2': !dense,
+                'text-[8px]': dense,
+                'px-1': dense && valueStr.length > 1,
+                'px-[4px]': dense && valueStr.length === 1,
+            }) }),
+            React.createElement("span", { className: classNames(textClassname, tw('inline-block', {
+                    'text-white': !textClassname && kind === 'filled',
+                    'm-[1px]': kind === 'filled',
+                })) }, valueStr)));
+    };
+    Component.displayName = displayName;
+    Component.Skeleton = () => (React.createElement(Skeleton, { height: 16, width: 16, display: "inline-block", className: tw(type === 'tab' ? 'rounded' : 'rounded-full') }));
+    return Component;
+};
+export const Badge = createBadge('default', 'Badge');
+export const TabBadge = createBadge('tab', 'TabBadge');
+export const ChipBadge = createBadge('chip', 'ChipBadge');
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFkZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CYWRnZS9CYWRnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDcEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBaUNoRCxNQUFNLGdCQUFnQixHQUFHLENBQUMsS0FBa0MsRUFBMkIsRUFBRSxDQUFDLE9BQU8sSUFBSSxLQUFLLENBQUM7QUFFM0csTUFBTSxXQUFXLEdBQUcsQ0FDbEIsSUFBZ0MsRUFDaEMsV0FBbUIsRUFDbkIsRUFBRTtJQUNGLE1BQU0sU0FBUyxHQUE4QyxDQUFDLEtBQUssRUFBRSxFQUFFOztRQUNyRSxNQUFNLEVBQUUsSUFBSSxHQUFHLFFBQVEsRUFBRSxLQUFLLEVBQUUsYUFBYSxLQUFjLEtBQUssRUFBZCxJQUFJLFVBQUssS0FBSyxFQUExRCxrQ0FBa0QsQ0FBUSxDQUFDO1FBQ2pFLE1BQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNsQyxNQUFNLEtBQUssR0FBRyxnQkFBZ0IsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBQSxLQUFLLENBQUMsS0FBSyxtQ0FBSSxLQUFLLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUVyRSxPQUFPLENBQ0wsOENBQ00sSUFBSSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsSUFDdkIsU0FBUyxFQUFFLEVBQUUsQ0FBQywwQkFBMEIsRUFBRTtnQkFDeEMsY0FBYyxFQUFFLElBQUksS0FBSyxTQUFTLElBQUksSUFBSSxLQUFLLE1BQU07Z0JBQ3JELFNBQVMsRUFBRSxJQUFJLEtBQUssS0FBSztnQkFDekIsdUJBQXVCLEVBQUUsSUFBSSxLQUFLLFVBQVU7Z0JBQzVDLFlBQVksRUFBRSxJQUFJLEtBQUssUUFBUSxJQUFJLElBQUksS0FBSyxNQUFNO2dCQUNsRCxVQUFVLEVBQUUsSUFBSSxLQUFLLE1BQU07Z0JBQzNCLGlEQUFpRCxFQUFFLENBQUMsS0FBSztnQkFDekQsWUFBWSxFQUFFLEtBQUs7Z0JBQ25CLE1BQU0sRUFBRSxLQUFLLElBQUksUUFBUSxDQUFDLE1BQU0sR0FBRyxDQUFDO2dCQUNwQyxVQUFVLEVBQUUsS0FBSyxJQUFJLFFBQVEsQ0FBQyxNQUFNLEtBQUssQ0FBQzthQUMzQyxDQUFDO1lBRUYsOEJBQ0UsU0FBUyxFQUFFLFVBQVUsQ0FDbkIsYUFBYSxFQUNiLEVBQUUsQ0FBQyxjQUFjLEVBQUU7b0JBQ2pCLFlBQVksRUFBRSxDQUFDLGFBQWEsSUFBSSxJQUFJLEtBQUssUUFBUTtvQkFDakQsU0FBUyxFQUFFLElBQUksS0FBSyxRQUFRO2lCQUM3QixDQUFDLENBQ0gsSUFFQSxRQUFRLENBQ0osQ0FDRixDQUNSLENBQUM7SUFDSixDQUFDLENBQUM7SUFFRixTQUFTLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQztJQUNwQyxTQUFTLENBQUMsUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLENBQ3pCLG9CQUFDLFFBQVEsSUFDUCxNQUFNLEVBQUUsRUFBRSxFQUNWLEtBQUssRUFBRSxFQUFFLEVBQ1QsT0FBTyxFQUFDLGNBQWMsRUFDdEIsU0FBUyxFQUFFLEVBQUUsQ0FBQyxJQUFJLEtBQUssS0FBSyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLGNBQWMsQ0FBQyxHQUMxRCxDQUNILENBQUM7SUFDRixPQUFPLFNBQVMsQ0FBQztBQUNuQixDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxLQUFLLEdBQUcsV0FBVyxDQUFhLFNBQVMsRUFBRSxPQUFPLENBQUMsQ0FBQztBQUNqRSxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsV0FBVyxDQUFhLEtBQUssRUFBRSxVQUFVLENBQUMsQ0FBQztBQUNuRSxNQUFNLENBQUMsTUFBTSxTQUFTLEdBQUcsV0FBVyxDQUFpQixNQUFNLEVBQUUsV0FBVyxDQUFDLENBQUMifQ==

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { ActionType } from '../../../types/ActionType';
+import type { BannerLayoutType } from '../../../src/common/Banner/Banner';
+declare type ImageBanner = {
+    /**
+     * Optional image src that will be displayed on the right side of banner.
+     * If the value is "null", it will show as skeleton.
+     */
+    image?: string | null;
+    /**
+     * Optional `alt` attribute to image.
+     */
+    imageAlt?: string;
+};
+declare type BannerWithImage = ImageBanner & {
+    layout?: 'vertical';
+    imageHeight?: HTMLImageElement['height'];
+    imageWidth?: HTMLImageElement['width'];
+};
+declare type BannerWithoutImage = {
+    layout: 'horizontal';
+};
+export declare type BannerProps = {
+    /** Title for banner. */
+    title: string;
+    /** Alert description. */
+    description: string;
+    /** Banner layout. */
+    layout?: BannerLayoutType;
+    /** Optional action for banner. */
+    action?: ActionType;
+    /** If `onDismiss()` callback is provided, alert will be rendered with close icon.
+     * Callback will be called, when user clicks the icon.
+     */
+    onDismiss?: () => void;
+} & (BannerWithImage | BannerWithoutImage);
+/**
+ * ## A banner component to highlight some content
+ *
+ * There are 2 layouts available: vertical(default) and horizontal.
+ * Vertical layout is required an image.
+ * Horizontal layout doesn't support having an image at all.
+ *
+ * Note: a size of image prop will affect a size of a whole banner too.
+ *
+ * @param props BannerProps
+ * @returns React.ReactElement
+ */
+export declare const Banner: React.FC<BannerProps>;
+export declare const OneLineBanner: React.FC<Omit<React.PropsWithChildren<BannerProps>, "layout" | keyof ImageBanner | "imageHeight" | "imageWidth">>;
+export {};

package/dist/src/components/Banner/Banner.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Banner as BannerBase } from '../../../src/common/Banner/Banner';
+import { GhostButton, IconButton } from '../../../src/components/Button/Button';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+import { tw } from '../../../src/utils/tailwind';
+import omit from 'lodash/omit';
+import cross from '../../../src/icons/cross';
+const BannerImageSkeleton = () => React.createElement(Skeleton, { width: 225, className: tw('h-full') });
+const createBanner = (displayName, opts = {}) => {
+    const BannerComponent = (props) => {
+        const { title, description, layout: layoutProp, action, onDismiss } = props;
+        const layout = opts.isOneLineBanner ? 'horizontal' : layoutProp || 'vertical';
+        const isDismissable = onDismiss !== undefined;
+        return (React.createElement(BannerBase, { layout: layout },
+            React.createElement(BannerBase.ContentContainer, { layout: layout },
+                React.createElement(BannerBase.Title, { layout: layout, titleVariant: opts.isOneLineBanner ? 'secondary' : 'primary' }, title),
+                React.createElement(BannerBase.Description, { flexGrow: isDismissable ? false : true }, description),
+                action && (React.createElement(BannerBase.Actions, { layout: layout },
+                    React.createElement(GhostButton, Object.assign({ dense: true }, omit(action, 'text')), action.text)))),
+            (props.layout === 'vertical' || props.layout === undefined) && props.image !== undefined && (React.createElement(BannerBase.ImageContainer, null, props.image ? (React.createElement("img", { src: props.image, alt: props.imageAlt, className: tw('w-full bg-cover object-cover'), style: { width: props.imageWidth, height: props.imageHeight } })) : (React.createElement(BannerImageSkeleton, null)))),
+            isDismissable && (React.createElement(BannerBase.DismissContainer, { layout: layout },
+                React.createElement(IconButton, { type: "button", tooltip: "Dismiss", icon: cross, onClick: onDismiss })))));
+    };
+    BannerComponent.displayName = displayName;
+    return BannerComponent;
+};
+/**
+ * ## A banner component to highlight some content
+ *
+ * There are 2 layouts available: vertical(default) and horizontal.
+ * Vertical layout is required an image.
+ * Horizontal layout doesn't support having an image at all.
+ *
+ * Note: a size of image prop will affect a size of a whole banner too.
+ *
+ * @param props BannerProps
+ * @returns React.ReactElement
+ */
+export const Banner = createBanner('Banner');
+const OneLineBannerBase = createBanner('OneLineBanner', {
+    isOneLineBanner: true,
+});
+// type test = React.ComponentProps<typeof OneLineBannerBase>;
+export const OneLineBanner = OneLineBannerBase;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFubmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQmFubmVyL0Jhbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxNQUFNLElBQUksVUFBVSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFFaEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxVQUFVLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUN2RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDNUQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUMvQixPQUFPLEtBQUssTUFBTSxpQkFBaUIsQ0FBQztBQThDcEMsTUFBTSxtQkFBbUIsR0FBYSxHQUFHLEVBQUUsQ0FBQyxvQkFBQyxRQUFRLElBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsRUFBRSxDQUFDLFFBQVEsQ0FBQyxHQUFJLENBQUM7QUFFOUYsTUFBTSxZQUFZLEdBQUcsQ0FBQyxXQUFtQixFQUFFLE9BQXNCLEVBQUUsRUFBRSxFQUFFO0lBQ3JFLE1BQU0sZUFBZSxHQUEwQixDQUFDLEtBQUssRUFBRSxFQUFFO1FBQ3ZELE1BQU0sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxHQUFHLEtBQUssQ0FBQztRQUM1RSxNQUFNLE1BQU0sR0FBcUIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxVQUFVLElBQUksVUFBVSxDQUFDO1FBQ2hHLE1BQU0sYUFBYSxHQUFHLFNBQVMsS0FBSyxTQUFTLENBQUM7UUFFOUMsT0FBTyxDQUNMLG9CQUFDLFVBQVUsSUFBQyxNQUFNLEVBQUUsTUFBTTtZQUN4QixvQkFBQyxVQUFVLENBQUMsZ0JBQWdCLElBQUMsTUFBTSxFQUFFLE1BQU07Z0JBQ3pDLG9CQUFDLFVBQVUsQ0FBQyxLQUFLLElBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxTQUFTLElBQzNGLEtBQUssQ0FDVztnQkFDbkIsb0JBQUMsVUFBVSxDQUFDLFdBQVcsSUFBQyxRQUFRLEVBQUUsYUFBYSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksSUFBRyxXQUFXLENBQTBCO2dCQUNyRyxNQUFNLElBQUksQ0FDVCxvQkFBQyxVQUFVLENBQUMsT0FBTyxJQUFDLE1BQU0sRUFBRSxNQUFNO29CQUNoQyxvQkFBQyxXQUFXLGtCQUFDLEtBQUssVUFBSyxJQUFJLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQyxHQUN4QyxNQUFNLENBQUMsSUFBSSxDQUNBLENBQ0ssQ0FDdEIsQ0FDMkI7WUFDN0IsQ0FBQyxLQUFLLENBQUMsTUFBTSxLQUFLLFVBQVUsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLFNBQVMsQ0FBQyxJQUFJLEtBQUssQ0FBQyxLQUFLLEtBQUssU0FBUyxJQUFJLENBQzNGLG9CQUFDLFVBQVUsQ0FBQyxjQUFjLFFBQ3ZCLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQ2IsNkJBQ0UsR0FBRyxFQUFFLEtBQUssQ0FBQyxLQUFLLEVBQ2hCLEdBQUcsRUFBRSxLQUFLLENBQUMsUUFBUSxFQUNuQixTQUFTLEVBQUUsRUFBRSxDQUFDLDhCQUE4QixDQUFDLEVBQzdDLEtBQUssRUFBRSxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUMsVUFBVSxFQUFFLE1BQU0sRUFBRSxLQUFLLENBQUMsV0FBVyxFQUFFLEdBQzdELENBQ0gsQ0FBQyxDQUFDLENBQUMsQ0FDRixvQkFBQyxtQkFBbUIsT0FBRyxDQUN4QixDQUN5QixDQUM3QjtZQUNBLGFBQWEsSUFBSSxDQUNoQixvQkFBQyxVQUFVLENBQUMsZ0JBQWdCLElBQUMsTUFBTSxFQUFFLE1BQU07Z0JBQ3pDLG9CQUFDLFVBQVUsSUFBQyxJQUFJLEVBQUMsUUFBUSxFQUFDLE9BQU8sRUFBQyxTQUFTLEVBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsU0FBUyxHQUFJLENBQ25ELENBQy9CLENBQ1UsQ0FDZCxDQUFDO0lBQ0osQ0FBQyxDQUFDO0lBQ0YsZUFBZSxDQUFDLFdBQVcsR0FBRyxXQUFXLENBQUM7SUFDMUMsT0FBTyxlQUFlLENBQUM7QUFDekIsQ0FBQyxDQUFDO0FBRUY7Ozs7Ozs7Ozs7O0dBV0c7QUFDSCxNQUFNLENBQUMsTUFBTSxNQUFNLEdBQUcsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0FBRTdDLE1BQU0saUJBQWlCLEdBQUcsWUFBWSxDQUFDLGVBQWUsRUFBRTtJQUN0RCxlQUFlLEVBQUUsSUFBSTtDQUN0QixDQUFDLENBQUM7QUFFSCw4REFBOEQ7QUFDOUQsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLGlCQUU1QixDQUFDIn0=

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Element, ElementProps } from '../../../src/components/Element/Element';
+import { TailwindifyProps } from '../../../src/components/Tailwindify/Tailwindify';
+import twTheme from '../../../tailwind.theme.json';
+declare type Props = {
+    style?: React.CSSProperties;
+    display?: React.CSSProperties['display'];
+    borderRadius?: React.CSSProperties['borderRadius'];
+    borderWidth?: React.CSSProperties['borderWidth'];
+    borderColor?: keyof typeof twTheme['backgroundColor'];
+    justifyContent?: React.CSSProperties['justifyContent'];
+    alignContent?: React.CSSProperties['alignContent'];
+    alignItems?: React.CSSProperties['alignItems'];
+    flexDirection?: React.CSSProperties['flexDirection'];
+    flexWrap?: React.CSSProperties['flexWrap'];
+    gap?: keyof typeof twTheme['gap'];
+    colGap?: keyof typeof twTheme['gap'];
+    rowGap?: keyof typeof twTheme['gap'];
+};
+export declare type BoxProps<C extends React.ElementType> = TailwindifyProps<Props> & ElementProps<C> & Props;
+export declare const Box: <C extends React.ElementType<any>>({ style, color, borderColor, borderRadius, borderWidth, justifyContent, alignContent, alignItems, flexDirection, flexWrap, display, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, backgroundColor, width, height, maxWidth, maxHeight, minWidth, minHeight, gap, colGap, rowGap, ...rest }: BoxProps<C>) => JSX.Element;
+export declare const BorderBox: React.ComponentType<{
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+} & import("../../../types/tailwind").ObjectBreakpointable<{
+    padding?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
+    paddingX?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
+    paddingY?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
+    paddingTop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
+    paddingRight?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
+    paddingBottom?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
+    paddingLeft?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
+    margin?: "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "-1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-l1" | "-l2" | "-l3" | "-l4" | "-l5" | "-l6" | "-l7" | undefined;
+    marginX?: "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "-1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-l1" | "-l2" | "-l3" | "-l4" | "-l5" | "-l6" | "-l7" | undefined;
+    marginY?: "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "-1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-l1" | "-l2" | "-l3" | "-l4" | "-l5" | "-l6" | "-l7" | undefined;
+    marginTop?: "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "-1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-l1" | "-l2" | "-l3" | "-l4" | "-l5" | "-l6" | "-l7" | undefined;
+    marginRight?: "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "-1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-l1" | "-l2" | "-l3" | "-l4" | "-l5" | "-l6" | "-l7" | undefined;
+    marginBottom?: "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "-1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-l1" | "-l2" | "-l3" | "-l4" | "-l5" | "-l6" | "-l7" | undefined;
+    marginLeft?: "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "-1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-l1" | "-l2" | "-l3" | "-l4" | "-l5" | "-l6" | "-l7" | undefined;
+    space?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "1px" | "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | undefined;
+    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?: "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" | "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" | "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" | "error-0" | "error-100" | "error-5" | "error-10" | "error-20" | "error-30" | "error-40" | "error-50" | "error-60" | "error-70" | "error-80" | "error-90" | "transparent" | "white" | "current" | "navyBlue-100" | 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;
+    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;
+    minWidth?: "max" | "min" | "0" | "full" | "fit" | undefined;
+    minHeight?: "screen" | "max" | "min" | "0" | "full" | "fit" | undefined;
+}> & Props & {
+    component?: React.ElementType<any> | undefined;
+} & Omit<Pick<any, string | number | symbol>, "component">>;
+export {};

package/dist/src/components/Box/Box.js

@@ -0,0 +1,55 @@
+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 { Element } from '../../../src/components/Element/Element';
+import { useStyle } from '../../../src/utils/useStyle';
+import isUndefined from 'lodash/isUndefined';
+import twTheme from '../../../tailwind.theme.json';
+import { createSimpleComponent } from '../../../src/utils/createComponent';
+export const Box = (_a) => {
+    var { style, color, borderColor, borderRadius, borderWidth, justifyContent, alignContent, alignItems, flexDirection, flexWrap, display, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, backgroundColor, width, height, maxWidth, maxHeight, minWidth, minHeight, gap, colGap, rowGap } = _a, rest = __rest(_a, ["style", "color", "borderColor", "borderRadius", "borderWidth", "justifyContent", "alignContent", "alignItems", "flexDirection", "flexWrap", "display", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "backgroundColor", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "gap", "colGap", "rowGap"]);
+    const styles = useStyle({
+        padding,
+        display,
+        color,
+        borderColor: borderColor ? twTheme.backgroundColor[borderColor] : '',
+        borderRadius,
+        borderWidth,
+        justifyContent,
+        alignContent,
+        alignItems,
+        flexDirection,
+        flexWrap,
+        paddingTop: isUndefined(paddingY) ? paddingTop : paddingY,
+        paddingRight: isUndefined(paddingX) ? paddingRight : paddingX,
+        paddingBottom: isUndefined(paddingY) ? paddingBottom : paddingY,
+        paddingLeft: isUndefined(paddingX) ? paddingLeft : paddingX,
+        margin,
+        marginTop: isUndefined(marginY) ? marginTop : marginY,
+        marginRight: isUndefined(marginX) ? marginRight : marginX,
+        marginBottom: isUndefined(marginY) ? marginBottom : marginY,
+        marginLeft: isUndefined(marginX) ? marginLeft : marginX,
+        backgroundColor,
+        width,
+        height,
+        maxWidth,
+        maxHeight,
+        minWidth,
+        minHeight,
+        gap,
+        columnGap: colGap,
+        rowGap,
+    });
+    return React.createElement(Element, Object.assign({ style: Object.assign(Object.assign({}, styles), style) }, rest));
+};
+export const BorderBox = createSimpleComponent(Box, { className: 'rounded border', borderColor: 'grey-10' }, 'BorderBox');
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQm94L0JveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE9BQU8sRUFBZ0IsTUFBTSxnQ0FBZ0MsQ0FBQztBQUV2RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDOUMsT0FBTyxXQUFXLE1BQU0sb0JBQW9CLENBQUM7QUFDN0MsT0FBTyxPQUFPLE1BQU0scUJBQXFCLENBQUM7QUFDMUMsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFvQmxFLE1BQU0sQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUE4QixFQXFDbkMsRUFBZSxFQUFFO1FBckNrQixFQUMvQyxLQUFLLEVBQ0wsS0FBSyxFQUNMLFdBQVcsRUFDWCxZQUFZLEVBQ1osV0FBVyxFQUNYLGNBQWMsRUFDZCxZQUFZLEVBQ1osVUFBVSxFQUNWLGFBQWEsRUFDYixRQUFRLEVBQ1IsT0FBTyxFQUNQLE9BQU8sRUFDUCxRQUFRLEVBQ1IsUUFBUSxFQUNSLFVBQVUsRUFDVixZQUFZLEVBQ1osYUFBYSxFQUNiLFdBQVcsRUFDWCxNQUFNLEVBQ04sT0FBTyxFQUNQLE9BQU8sRUFDUCxTQUFTLEVBQ1QsV0FBVyxFQUNYLFlBQVksRUFDWixVQUFVLEVBQ1YsZUFBZSxFQUNmLEtBQUssRUFDTCxNQUFNLEVBQ04sUUFBUSxFQUNSLFNBQVMsRUFDVCxRQUFRLEVBQ1IsU0FBUyxFQUNULEdBQUcsRUFDSCxNQUFNLEVBQ04sTUFBTSxPQUVNLEVBRFQsSUFBSSxjQXBDd0Msc2NBcUNoRCxDQURRO0lBRVAsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDO1FBQ3RCLE9BQU87UUFDUCxPQUFPO1FBQ1AsS0FBSztRQUNMLFdBQVcsRUFBRSxXQUFXLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxlQUFlLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUU7UUFDcEUsWUFBWTtRQUNaLFdBQVc7UUFDWCxjQUFjO1FBQ2QsWUFBWTtRQUNaLFVBQVU7UUFDVixhQUFhO1FBQ2IsUUFBUTtRQUNSLFVBQVUsRUFBRSxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsUUFBUTtRQUN6RCxZQUFZLEVBQUUsV0FBVyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLFFBQVE7UUFDN0QsYUFBYSxFQUFFLFdBQVcsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxRQUFRO1FBQy9ELFdBQVcsRUFBRSxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsUUFBUTtRQUMzRCxNQUFNO1FBQ04sU0FBUyxFQUFFLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxPQUFPO1FBQ3JELFdBQVcsRUFBRSxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsT0FBTztRQUN6RCxZQUFZLEVBQUUsV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLE9BQU87UUFDM0QsVUFBVSxFQUFFLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxPQUFPO1FBQ3ZELGVBQWU7UUFDZixLQUFLO1FBQ0wsTUFBTTtRQUNOLFFBQVE7UUFDUixTQUFTO1FBQ1QsUUFBUTtRQUNSLFNBQVM7UUFDVCxHQUFHO1FBQ0gsU0FBUyxFQUFFLE1BQU07UUFDakIsTUFBTTtLQUNQLENBQUMsQ0FBQztJQUVILE9BQU8sb0JBQUMsT0FBTyxrQkFBQyxLQUFLLGtDQUFPLE1BQU0sR0FBSyxLQUFLLEtBQVEsSUFBSSxFQUFJLENBQUM7QUFDL0QsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLHFCQUFxQixDQUM1QyxHQUFHLEVBQ0gsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxFQUN2RCxXQUFXLENBQ1osQ0FBQyJ9

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { IconifyIcon } from '@iconify/react';
+export declare type BreadcrumbsProps = {
+    className?: string;
+    children: React.ReactElement<CrumbProps> | Array<React.ReactElement<CrumbProps> | undefined | null>;
+};
+/**
+ * Allows for visualizing the user's location within a hierarchical set of webpages.
+ *
+ * To be used with `Breadcrumbs.Crumb` component; using another
+ * type of component (such as `React.Fragment`) as a child will not work.
+ *
+ * @see {@link Crumb}
+ *
+ * @example
+ * <Breadcrumbs>
+ *   <Breadcrumbs.Crumb>
+ *     Services
+ *   </Breadcrumbs.Crumb>
+ *   <Breadcrumbs.Crumb>
+ *     Example service
+ *   </Breadcrumbs.Crumb>
+ * </Breadcrumbs>
+ */
+declare const Breadcrumbs: {
+    (props: BreadcrumbsProps): React.ReactElement<BreadcrumbsProps>;
+    Crumb: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "onClick"> & CrumbProps & React.RefAttributes<HTMLAnchorElement>>;
+};
+export declare type CrumbProps = {
+    icon?: IconifyIcon;
+    children?: React.ReactNode;
+};
+declare const asCrumb: <ElementType extends HTMLElement, Props = unknown>(Component: string | React.ComponentType<Props>, displayName: string, options?: {
+    isActive: boolean;
+}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & CrumbProps> & React.RefAttributes<ElementType>>;
+export { Breadcrumbs, asCrumb };

package/dist/src/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,86 @@
+// https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html
+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 } from '../../../src/components';
+import slash from '../../../src/icons/slash';
+import { tw } from '../../../src/utils/tailwind';
+import classNames from 'classnames';
+/**
+ * Allows for visualizing the user's location within a hierarchical set of webpages.
+ *
+ * To be used with `Breadcrumbs.Crumb` component; using another
+ * type of component (such as `React.Fragment`) as a child will not work.
+ *
+ * @see {@link Crumb}
+ *
+ * @example
+ * <Breadcrumbs>
+ *   <Breadcrumbs.Crumb>
+ *     Services
+ *   </Breadcrumbs.Crumb>
+ *   <Breadcrumbs.Crumb>
+ *     Example service
+ *   </Breadcrumbs.Crumb>
+ * </Breadcrumbs>
+ */
+const Breadcrumbs = (props) => {
+    const { children, className } = props;
+    const crumbs = React.Children.toArray(children).filter((c) => Boolean(c));
+    return (React.createElement("nav", { className: className, "aria-label": 'Breadcrumbs' },
+        React.createElement("ol", { className: tw('flex flex-row flex-nowrap items-center typography-caption-default') }, crumbs.map((crumb, index) => {
+            const isLast = index === crumbs.length - 1;
+            return (
+            // Using index as key here is not good, but there isn't too many other options to choose from either.
+            React.createElement("li", { key: index, className: tw('flex flex-row items-center') },
+                !!index && React.createElement(Icon, { "aria-hidden": true, className: tw('mx-2 text-grey-30'), icon: slash }),
+                !isLast && crumb,
+                isLast && (React.createElement(ActiveCrumb, { "aria-disabled": true, "aria-current": "page", icon: crumb.props.icon }, crumb.props.children))));
+        }))));
+};
+const asCrumb = (Component, displayName, options = { isActive: false }) => {
+    const Crumb = React.forwardRef((_a, ref) => {
+        var { icon, children } = _a, rest = __rest(_a, ["icon", "children"]);
+        return (React.createElement(Component, Object.assign({ ref: ref }, rest, { role: "link" }),
+            React.createElement("span", { className: classNames(tw('flex flex-row flex-nowrap items-center gap-x-3 ', {
+                    'text-primary-80 underline underline-offset-2 hover:no-underline hover:text-primary-70': !options.isActive,
+                    'text-grey-90': options.isActive,
+                })) },
+                icon && React.createElement(Icon, { icon: icon }),
+                children)));
+    });
+    Crumb.displayName = displayName;
+    return Crumb;
+};
+/**
+ * Represents a part within a set of breadcrumbs.
+ *
+ * This is intended to be used with the `Breadcrumbs` component as
+ * the child component/children components.
+ *
+ * @see {@link Breadcrumbs}
+ *
+ * @example
+ * <Breadcrumbs>
+ *   <Breadcrumbs.Crumb href="/a">
+ *     Services
+ *   </Breadcrumbs.Crumb>
+ *   <Breadcrumbs.Crumb href="/a/b">
+ *     Example service
+ *   </Breadcrumbs.Crumb href="/a/b/c">
+ * </Breadcrumbs>
+ */
+const Crumb = asCrumb('a', 'Crumb');
+const ActiveCrumb = asCrumb('span', 'ActiveCrumb', { isActive: true });
+Breadcrumbs.Crumb = Crumb;
+export { Breadcrumbs, asCrumb };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnJlYWRjcnVtYnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CcmVhZGNydW1icy9CcmVhZGNydW1icy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsOEVBQThFOzs7Ozs7Ozs7Ozs7QUFFOUUsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN0QyxPQUFPLEtBQUssTUFBTSxpQkFBaUIsQ0FBQztBQUNwQyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFeEMsT0FBTyxVQUFVLE1BQU0sWUFBWSxDQUFDO0FBT3BDOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCRztBQUNILE1BQU0sV0FBVyxHQUFHLENBQUMsS0FBdUIsRUFBd0MsRUFBRTtJQUNwRixNQUFNLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxHQUFHLEtBQUssQ0FBQztJQUN0QyxNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQyxNQUFNLENBQ3BELENBQUMsQ0FBQyxFQUF1QyxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUN2RCxDQUFDO0lBRUYsT0FBTyxDQUNMLDZCQUFLLFNBQVMsRUFBRSxTQUFTLGdCQUFjLGFBQWE7UUFDbEQsNEJBQUksU0FBUyxFQUFFLEVBQUUsQ0FBQyxtRUFBbUUsQ0FBQyxJQUNuRixNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLEtBQWEsRUFBRSxFQUFFO1lBQ25DLE1BQU0sTUFBTSxHQUFHLEtBQUssS0FBSyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztZQUMzQyxPQUFPO1lBQ0wscUdBQXFHO1lBQ3JHLDRCQUFJLEdBQUcsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLEVBQUUsQ0FBQyw0QkFBNEIsQ0FBQztnQkFDeEQsQ0FBQyxDQUFDLEtBQUssSUFBSSxvQkFBQyxJQUFJLG1CQUFjLElBQUksRUFBRSxTQUFTLEVBQUUsRUFBRSxDQUFDLG1CQUFtQixDQUFDLEVBQUUsSUFBSSxFQUFFLEtBQUssR0FBSTtnQkFDdkYsQ0FBQyxNQUFNLElBQUksS0FBSztnQkFDaEIsTUFBTSxJQUFJLENBQ1Qsb0JBQUMsV0FBVyxxQkFBZ0IsSUFBSSxrQkFBZSxNQUFNLEVBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsSUFBSSxJQUN6RSxLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FDVCxDQUNmLENBQ0UsQ0FDTixDQUFDO1FBQ0osQ0FBQyxDQUFDLENBQ0MsQ0FDRCxDQUNQLENBQUM7QUFDSixDQUFDLENBQUM7QUFPRixNQUFNLE9BQU8sR0FBRyxDQUNkLFNBQThDLEVBQzlDLFdBQW1CLEVBQ25CLFVBQWlDLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxFQUMyRCxFQUFFO0lBQ2pILE1BQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQWtDLENBQUMsRUFBMkIsRUFBRSxHQUFHLEVBQUUsRUFBRTtZQUFwQyxFQUFFLElBQUksRUFBRSxRQUFRLE9BQVcsRUFBTixJQUFJLGNBQXpCLG9CQUEyQixDQUFGO1FBQVksT0FBQSxDQUNwRyxvQkFBQyxTQUFTLGtCQUFDLEdBQUcsRUFBRSxHQUFHLElBQU8sSUFBYyxJQUFFLElBQUksRUFBQyxNQUFNO1lBQ25ELDhCQUNFLFNBQVMsRUFBRSxVQUFVLENBQ25CLEVBQUUsQ0FBQyxpREFBaUQsRUFBRTtvQkFDcEQsdUZBQXVGLEVBQUUsQ0FBQyxPQUFPLENBQUMsUUFBUTtvQkFDMUcsY0FBYyxFQUFFLE9BQU8sQ0FBQyxRQUFRO2lCQUNqQyxDQUFDLENBQ0g7Z0JBRUEsSUFBSSxJQUFJLG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsSUFBSSxHQUFJO2dCQUM1QixRQUFRLENBQ0osQ0FDRyxDQUNiLENBQUE7S0FBQSxDQUFDLENBQUM7SUFDSCxLQUFLLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQztJQUNoQyxPQUFPLEtBQUssQ0FBQztBQUNmLENBQUMsQ0FBQztBQUVGOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCRztBQUNILE1BQU0sS0FBSyxHQUFHLE9BQU8sQ0FHbkIsR0FBRyxFQUFFLE9BQU8sQ0FBQyxDQUFDO0FBRWhCLE1BQU0sV0FBVyxHQUFHLE9BQU8sQ0FBa0IsTUFBTSxFQUFFLGFBQWEsRUFBRSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDO0FBRXhGLFdBQVcsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxXQUFXLEVBQUUsT0FBTyxFQUFFLENBQUMifQ==