@veracity/vui 1.7.0 → 1.8.0-beta.0

package/dist/cjs/theme/defaultTheme.d.ts

@@ -277,6 +277,24 @@ declare const defaultTheme: {
             sizes: {};
             variants: {};
         };
+        Breadcrumbs: {
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+            };
+            sizes: {
+                sm: {
+                    item: {};
+                };
+                md: {
+                    item: {};
+                };
+                lg: {
+                    item: {};
+                };
+            };
+            variants: {};
+        };
         Button: {
             baseStyle: {};
             defaultProps: {

package/dist/cjs/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/accordion/accordion.types.d.ts

@@ -2,10 +2,10 @@ import { ReactNode } from 'react';
 import { ListItemProps } from '../list';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export declare type Orientation = 'vertical' | 'horizontal';
+export declare type AccordionOrientation = 'vertical' | 'horizontal';
 export declare type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
-    /** Items orientation @default 'vertical' */
-    orientation?: Orientation;
+    /** Items AccordionOrientation @default 'vertical' */
+    orientation?: AccordionOrientation;
     /** Hover color for the item title @default "blue.10" */
     itemTitleHoverBg?: string;
     items?: AccordionItemProps[];
@@ -24,6 +24,8 @@ export declare type AccordionItemProps = ListItemProps & {
     children?: ReactNode;
     /** Alternative way to provide content */
     content?: ReactNode;
+    /** Control the padding of the content */
+    contentPx?: string | number;
     /** Collapsed state */
     collapsed?: boolean;
     /** Hover color for the item title @default "blue.10" */
@@ -35,6 +37,6 @@ export declare type AccordionItemProps = ListItemProps & {
 };
 export declare type AccordionItemArrowProps = {
     collapsed?: boolean;
-    orientation?: Orientation;
+    orientation?: AccordionOrientation;
 };
 //# sourceMappingURL=accordion.types.d.ts.map

package/dist/esm/accordion/accordion.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAA;AAEnD,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE5D,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,oBAAoB,CAAA;CACnC,CAAA"}

package/dist/esm/accordion/accordionItemHorizontal.d.ts

@@ -1,5 +1,5 @@
 import { AccordionItemProps } from './accordion.types';
-/** An accordion item (horizontal orientation). */
+/** An accordion item (horizontal AccordionOrientation). */
 export declare const AccordionItemHorizontal: (props: AccordionItemProps) => JSX.Element;
 export default AccordionItemHorizontal;
 //# sourceMappingURL=accordionItemHorizontal.d.ts.map

package/dist/esm/accordion/accordionItemHorizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAmFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}
+{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,2DAA2D;AAC3D,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAsFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/esm/accordion/accordionItemHorizontal.js

@@ -4,9 +4,9 @@ import { omitThemingProps, useStyleConfig } from '../core';
 import { cs } from '../utils';
 import AccordionItemArrow from './accordionItemArrow';
 import { useAccordionContext } from './context';
-/** An accordion item (horizontal orientation). */
+/** An accordion item (horizontal AccordionOrientation). */
 export const AccordionItemHorizontal = (props) => {
-    const { className, children, collapsed, content, disabled, id, itemTitleHoverBg = 'blue.10', title, onToggle, ...rest } = omitThemingProps(props);
+    const { className, children, collapsed, content, disabled, id, contentPx, itemTitleHoverBg = 'blue.10', title, onToggle, ...rest } = omitThemingProps(props);
     const [collapsedInternal, setIsCollapsedInternal] = useState(false);
     const styles = useStyleConfig('Accordion', useAccordionContext());
     useEffect(() => {
@@ -20,10 +20,11 @@ export const AccordionItemHorizontal = (props) => {
     };
     const cursor = disabled ? 'not-allowed' : 'pointer';
     const fontWeight = typeof title === 'string' ? '500' : 'inherit';
+    const expandedContentPx = contentPx ? contentPx : styles.item.pt;
     return (React.createElement(Box, { alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: "1px solid grey.40", className: cs('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, p: 0, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined, ...rest },
         React.createElement(Box, { ...styles.item, cursor: cursor, hoverBg: itemTitleHoverBg, justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.item.pt, w: "100%" },
             !collapsedInternal && React.createElement(Box, { fontWeight: fontWeight }, title),
             React.createElement(AccordionItemArrow, { collapsed: collapsedInternal, orientation: "horizontal" })),
-        !collapsedInternal ? (React.createElement(Box, { p: styles.item.pt, pt: 0, transitionDuration: "0ms" }, children ?? content)) : (React.createElement(Box, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.item.pt, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap" }, title))));
+        !collapsedInternal ? (React.createElement(Box, { p: styles.item.pt, pt: 0, px: expandedContentPx, transitionDuration: "0ms", w: 1 }, children ?? content)) : (React.createElement(Box, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.item.pt, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap" }, title))));
 };
 export default AccordionItemHorizontal;

package/dist/esm/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,10 @@
+import { VuiComponent } from '../core';
+import { BreadcrumbsProps } from './breadcrumbs.types';
+import BreadcrumbsItem from './breadcrumbsItem';
+export declare const BreadcrumbsBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** [Beta] Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
+export declare const Breadcrumbs: VuiComponent<"div", BreadcrumbsProps> & {
+    Item: typeof BreadcrumbsItem;
+};
+export default Breadcrumbs;
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/esm/breadcrumbs/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAwB,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAC5E,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAI/C,eAAO,MAAM,eAAe,+HAI3B,CAAA;AAED,qLAAqL;AACrL,eAAO,MAAM,WAAW;UA4BhB,sBAAsB;CAC7B,CAAA;AAID,eAAe,WAAW,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,29 @@
+import React, { Children, Fragment, useMemo } from 'react';
+import { styled, useStyleConfig, vui } from '../core';
+import { cs, filterUndefined } from '../utils';
+import BreadcrumbsItem from './breadcrumbsItem';
+import BreadcrumbsSeparator from './breadcrumbsSeparator';
+import { BreadcrumbsProvider } from './context';
+export const BreadcrumbsBase = styled.divBox `
+  display: flex;
+  min-width: 0;
+  transition-duration: normal;
+`;
+/** [Beta] Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
+export const Breadcrumbs = vui((props, ref) => {
+    const { children, className, items, size, ...rest } = props;
+    const styles = useStyleConfig('Breadcrumbs', props);
+    const context = useMemo(() => filterUndefined({ size }), [size]);
+    const aliasedProps = filterUndefined({});
+    const arrayChildren = Children.toArray(children);
+    return (React.createElement(BreadcrumbsProvider, { value: context },
+        React.createElement(BreadcrumbsBase, { className: cs('vui-breadcrumbs', className), ref: ref, ...styles, ...aliasedProps, ...rest }, items
+            ? items?.map?.((item, key) => (React.createElement(Fragment, { key: key },
+                React.createElement(BreadcrumbsItem, { key: key, ...item }),
+                key !== items.length - 1 && React.createElement(BreadcrumbsSeparator, null))))
+            : Children.map(arrayChildren, (child, key) => (React.createElement(Fragment, { key: key },
+                child,
+                key !== arrayChildren.length - 1 && React.createElement(BreadcrumbsSeparator, null)))))));
+});
+Breadcrumbs.Item = BreadcrumbsItem;
+export default Breadcrumbs;

package/dist/esm/breadcrumbs/breadcrumbs.types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '../box';
+import { IconProp } from '../icon';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type BreadcrumbsProps = SystemProps & ThemingProps<'Breadcrumbs'> & {
+    /** Collection of items */
+    items?: BreadcrumbsItemProps[];
+};
+export declare type BreadcrumbsItemProps = BoxProps & {
+    /** Custom class name */
+    className?: string;
+    /** Content */
+    children?: ReactNode;
+    /** Alternative way to provide content */
+    content?: ReactNode;
+    /** Icon */
+    icon?: IconProp;
+    /** Path */
+    path?: string;
+};
+export declare type BreadcrumbsSeparatorProps = BoxProps & {
+    /** Custom class name */
+    className?: string;
+    /** Content */
+    children?: ReactNode;
+    /** Alternative way to provide content */
+    content?: ReactNode;
+};
+//# sourceMappingURL=breadcrumbs.types.d.ts.map

package/dist/esm/breadcrumbs/breadcrumbs.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GACxC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAA;CAC/B,CAAA;AAEH,oBAAY,oBAAoB,GAAG,QAAQ,GAAG;IAC5C,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,WAAW;IACX,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,oBAAY,yBAAyB,GAAG,QAAQ,GAAG;IACjD,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbs.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/breadcrumbs/breadcrumbsItem.d.ts

@@ -0,0 +1,5 @@
+import { BreadcrumbsItemProps } from './breadcrumbs.types';
+/** A Breadcrumbs item. */
+export declare const BreadcrumbsItem: (props: BreadcrumbsItemProps) => JSX.Element;
+export default BreadcrumbsItem;
+//# sourceMappingURL=breadcrumbsItem.d.ts.map

package/dist/esm/breadcrumbs/breadcrumbsItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAG1D,0BAA0B;AAC1B,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAuB1D,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbsItem.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Box } from '../box';
+import { omitThemingProps, useStyleConfig } from '../core';
+import { Icon } from '../icon';
+import { Link } from '../link';
+import { cs } from '../utils';
+import { useBreadcrumbsContext } from './context';
+/** A Breadcrumbs item. */
+export const BreadcrumbsItem = (props) => {
+    const { className, children, content, icon, path, ...rest } = omitThemingProps(props);
+    const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext());
+    const innerContent = (React.createElement(React.Fragment, null,
+        !!icon && React.createElement(Icon, { name: icon, size: "sm" }),
+        content || children));
+    return (React.createElement(Box, { alignItems: "center", className: cs('vui-breadcrumbs-item', className), p: 0, ...rest, ...styles.item }, path ? (React.createElement(Link, { as: RouterLink, to: path }, innerContent)) : (innerContent)));
+};
+export default BreadcrumbsItem;

package/dist/esm/breadcrumbs/breadcrumbsSeparator.d.ts

@@ -0,0 +1,5 @@
+import { BreadcrumbsSeparatorProps } from './breadcrumbs.types';
+/** Breadcrumbs separator. */
+export declare const BreadcrumbsSeparator: ({ className, children, content, ...rest }: BreadcrumbsSeparatorProps) => JSX.Element;
+export default BreadcrumbsSeparator;
+//# sourceMappingURL=breadcrumbsSeparator.d.ts.map

package/dist/esm/breadcrumbs/breadcrumbsSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbsSeparator.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsSeparator.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAA;AAE/D,6BAA6B;AAC7B,eAAO,MAAM,oBAAoB,8CAA+C,yBAAyB,gBAIxG,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbsSeparator.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Box } from '../box';
+import { Icon } from '../icon';
+import { cs } from '../utils';
+/** Breadcrumbs separator. */
+export const BreadcrumbsSeparator = ({ className, children, content, ...rest }) => (React.createElement(Box, { alignItems: "center", className: cs('vui-breadcrumbs-separator', className), p: 0, ...rest }, content || children || React.createElement(Icon, { name: "falAngleRight" })));
+export default BreadcrumbsSeparator;

package/dist/esm/breadcrumbs/context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const BreadcrumbsProvider: import("react").Provider<Dict<any>>, useBreadcrumbsContext: () => Dict<any>;
+export { BreadcrumbsProvider, useBreadcrumbsContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/esm/breadcrumbs/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,mBAAmB,uCAAE,qBAAqB,iBAA6C,CAAA;AAE9F,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/esm/breadcrumbs/context.js

@@ -0,0 +1,3 @@
+import { createContext } from '../utils';
+const [BreadcrumbsProvider, useBreadcrumbsContext] = createContext({ isOptional: true });
+export { BreadcrumbsProvider, useBreadcrumbsContext };

package/dist/esm/breadcrumbs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './breadcrumbs';
+export { default } from './breadcrumbs';
+export * from './breadcrumbs.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,cAAc,qBAAqB,CAAA"}

package/dist/esm/breadcrumbs/index.js

@@ -0,0 +1,3 @@
+export * from './breadcrumbs';
+export { default } from './breadcrumbs';
+export * from './breadcrumbs.types';

package/dist/esm/breadcrumbs/theme.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        size: string;
+    };
+    sizes: {
+        sm: {
+            item: {};
+        };
+        md: {
+            item: {};
+        };
+        lg: {
+            item: {};
+        };
+    };
+    variants: {};
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

package/dist/esm/breadcrumbs/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,wBAKC"}

package/dist/esm/breadcrumbs/theme.js

@@ -0,0 +1,22 @@
+const baseStyle = {};
+const defaultProps = {
+    size: 'md'
+};
+const sizes = {
+    sm: {
+        item: {}
+    },
+    md: {
+        item: {}
+    },
+    lg: {
+        item: {}
+    }
+};
+const variants = {};
+export default {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/dist/esm/index.d.ts

@@ -1,6 +1,7 @@
 export * from './accordion';
 export * from './avatar';
 export * from './box';
+export * from './breadcrumbs';
 export * from './button';
 export * from './buttonGroup';
 export * from './buttonToggleGroup';

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/esm/index.js

@@ -1,6 +1,7 @@
 export * from './accordion';
 export * from './avatar';
 export * from './box';
+export * from './breadcrumbs';
 export * from './button';
 export * from './buttonGroup';
 export * from './buttonToggleGroup';

package/dist/esm/theme/components.d.ts

@@ -81,6 +81,24 @@ declare const _default: {
         sizes: {};
         variants: {};
     };
+    Breadcrumbs: {
+        baseStyle: {};
+        defaultProps: {
+            size: string;
+        };
+        sizes: {
+            sm: {
+                item: {};
+            };
+            md: {
+                item: {};
+            };
+            lg: {
+                item: {};
+            };
+        };
+        variants: {};
+    };
     Button: {
         baseStyle: {};
         defaultProps: {

package/dist/esm/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,wBAqCC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,wBAsCC"}

package/dist/esm/theme/components.js

@@ -1,6 +1,7 @@
 import Accordion from '../accordion/theme';
 import Avatar from '../avatar/theme';
 import Box from '../box/theme';
+import Breadcrumbs from '../breadcrumbs/theme';
 import Button from '../button/theme';
 import Card from '../card/theme';
 import Checkbox from '../checkbox/theme';
@@ -38,6 +39,7 @@ export default {
     Accordion,
     Avatar,
     Box,
+    Breadcrumbs,
     Button,
     Card,
     Checkbox,

package/dist/esm/theme/defaultTheme.d.ts

@@ -277,6 +277,24 @@ declare const defaultTheme: {
             sizes: {};
             variants: {};
         };
+        Breadcrumbs: {
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+            };
+            sizes: {
+                sm: {
+                    item: {};
+                };
+                md: {
+                    item: {};
+                };
+                lg: {
+                    item: {};
+                };
+            };
+            variants: {};
+        };
         Button: {
             baseStyle: {};
             defaultProps: {

package/dist/esm/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.7.0",
+  "version": "1.8.0-beta.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
@@ -34,4 +34,4 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   }
-}
+}

package/src/accordion/accordion.types.ts

@@ -4,12 +4,12 @@ import { ListItemProps } from '../list'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
-export type Orientation = 'vertical' | 'horizontal'
+export type AccordionOrientation = 'vertical' | 'horizontal'
 
 export type AccordionProps = SystemProps &
   ThemingProps<'Accordion'> & {
-    /** Items orientation @default 'vertical' */
-    orientation?: Orientation
+    /** Items AccordionOrientation @default 'vertical' */
+    orientation?: AccordionOrientation
     /** Hover color for the item title @default "blue.10" */
     itemTitleHoverBg?: string
     items?: AccordionItemProps[]
@@ -31,6 +31,8 @@ export type AccordionItemProps = ListItemProps & {
   children?: ReactNode
   /** Alternative way to provide content */
   content?: ReactNode
+  /** Control the padding of the content */
+  contentPx?: string | number
   /** Collapsed state */
   collapsed?: boolean
   /** Hover color for the item title @default "blue.10" */
@@ -43,5 +45,5 @@ export type AccordionItemProps = ListItemProps & {
 
 export type AccordionItemArrowProps = {
   collapsed?: boolean
-  orientation?: Orientation
+  orientation?: AccordionOrientation
 }

package/src/accordion/accordionItemHorizontal.tsx

@@ -7,7 +7,7 @@ import { AccordionItemProps } from './accordion.types'
 import AccordionItemArrow from './accordionItemArrow'
 import { useAccordionContext } from './context'
 
-/** An accordion item (horizontal orientation). */
+/** An accordion item (horizontal AccordionOrientation). */
 export const AccordionItemHorizontal = (props: AccordionItemProps) => {
   const {
     className,
@@ -16,6 +16,7 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
     content,
     disabled,
     id,
+    contentPx,
     itemTitleHoverBg = 'blue.10',
     title,
     onToggle,
@@ -39,6 +40,8 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
   const cursor = disabled ? 'not-allowed' : 'pointer'
   const fontWeight = typeof title === 'string' ? '500' : 'inherit'
 
+  const expandedContentPx = contentPx ? contentPx : styles.item.pt
+
   return (
     <Box
       alignItems={collapsedInternal ? 'normal' : 'baseline'}
@@ -71,7 +74,7 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
       </Box>
 
       {!collapsedInternal ? (
-        <Box p={styles.item.pt} pt={0} transitionDuration="0ms">
+        <Box p={styles.item.pt} pt={0} px={expandedContentPx} transitionDuration="0ms" w={1}>
           {children ?? content}
         </Box>
       ) : (

package/src/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,50 @@
+import React, { Children, Fragment, useMemo } from 'react'
+
+import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import { cs, filterUndefined } from '../utils'
+import { BreadcrumbsItemProps, BreadcrumbsProps } from './breadcrumbs.types'
+import BreadcrumbsItem from './breadcrumbsItem'
+import BreadcrumbsSeparator from './breadcrumbsSeparator'
+import { BreadcrumbsProvider } from './context'
+
+export const BreadcrumbsBase = styled.divBox`
+  display: flex;
+  min-width: 0;
+  transition-duration: normal;
+`
+
+/** [Beta] Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
+export const Breadcrumbs = vui<'div', BreadcrumbsProps>((props, ref) => {
+  const { children, className, items, size, ...rest } = props
+  const styles = useStyleConfig('Breadcrumbs', props)
+
+  const context = useMemo(() => filterUndefined({ size }), [size])
+
+  const aliasedProps = filterUndefined<BreadcrumbsProps>({})
+  const arrayChildren = Children.toArray(children)
+  return (
+    <BreadcrumbsProvider value={context}>
+      <BreadcrumbsBase className={cs('vui-breadcrumbs', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
+        {items
+          ? items?.map?.((item: BreadcrumbsItemProps, key: number) => (
+              <Fragment key={key}>
+                <BreadcrumbsItem key={key} {...item} />
+                {key !== items.length - 1 && <BreadcrumbsSeparator />}
+              </Fragment>
+            ))
+          : Children.map(arrayChildren, (child, key) => (
+              <Fragment key={key}>
+                {child}
+                {key !== arrayChildren.length - 1 && <BreadcrumbsSeparator />}
+              </Fragment>
+            ))}
+      </BreadcrumbsBase>
+    </BreadcrumbsProvider>
+  )
+}) as VuiComponent<'div', BreadcrumbsProps> & {
+  Item: typeof BreadcrumbsItem
+}
+
+Breadcrumbs.Item = BreadcrumbsItem
+
+export default Breadcrumbs

package/src/breadcrumbs/breadcrumbs.types.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react'
+
+import { BoxProps } from '../box'
+import { IconProp } from '../icon'
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type BreadcrumbsProps = SystemProps &
+  ThemingProps<'Breadcrumbs'> & {
+    /** Collection of items */
+    items?: BreadcrumbsItemProps[]
+  }
+
+export type BreadcrumbsItemProps = BoxProps & {
+  /** Custom class name */
+  className?: string
+  /** Content */
+  children?: ReactNode
+  /** Alternative way to provide content */
+  content?: ReactNode
+  /** Icon */
+  icon?: IconProp
+  /** Path */
+  path?: string
+}
+
+export type BreadcrumbsSeparatorProps = BoxProps & {
+  /** Custom class name */
+  className?: string
+  /** Content */
+  children?: ReactNode
+  /** Alternative way to provide content */
+  content?: ReactNode
+}