@veracity/vui 1.8.1 → 1.9.0-beta.1

package/dist/cjs/sidemenu/sidemenu.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidemenu = exports.SidemenuBase = void 0;
+const react_1 = __importStar(require("react"));
+const box_1 = __importDefault(require("../box"));
+const button_1 = __importDefault(require("../button"));
+const core_1 = require("../core");
+const icon_1 = __importDefault(require("../icon"));
+const utils_1 = require("../utils");
+const consts_1 = require("./consts");
+const context_1 = require("./context");
+const sidemenuItem_1 = __importDefault(require("./sidemenuItem"));
+const sidemenuTop_1 = __importDefault(require("./sidemenuTop"));
+exports.SidemenuBase = core_1.styled.divBox `
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  transition-duration: normal;
+  overflow: hidden;
+`;
+/** [Beta] A collapsible side menu for navigation. */
+exports.Sidemenu = (0, core_1.vui)((props, ref) => {
+    var _a;
+    const { children, className, items, isExpanded = false, width = 280 } = props, rest = __rest(props, ["children", "className", "items", "isExpanded", "width"]);
+    const styles = (0, core_1.useStyleConfig)('Sidemenu', props);
+    const [isExpandedInternal, setIsExpandedInternal] = (0, react_1.useState)(isExpanded);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ isExpandedInternal }), [isExpandedInternal]);
+    const aliasedProps = (0, utils_1.filterUndefined)({});
+    (0, react_1.useEffect)(() => {
+        setIsExpandedInternal(isExpanded);
+    }, [isExpanded]);
+    const toggle = () => {
+        setIsExpandedInternal(!isExpandedInternal);
+    };
+    const w = isExpandedInternal ? width : consts_1.expandedWidth;
+    const icon = isExpandedInternal ? 'falArrowLeft' : 'falArrowRight';
+    const iconRight = isExpandedInternal ? consts_1.right.expanded : consts_1.right.collapsed;
+    return (react_1.default.createElement(context_1.SidemenuProvider, { value: context },
+        react_1.default.createElement(exports.SidemenuBase, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu', className), ref: ref, w: w }, styles, aliasedProps, rest),
+            react_1.default.createElement(box_1.default, { flexDirection: "column", flexGrow: 1, overflowX: "hidden", overflowY: "auto", w: "100%" }, items
+                ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => react_1.default.createElement(sidemenuItem_1.default, Object.assign({ key: key }, item)))
+                : children),
+            react_1.default.createElement(box_1.default, { borderTop: consts_1.border, className: "vui-sidemenu-bottom", w: "100%" },
+                react_1.default.createElement(button_1.default, { borderRadius: 0, onClick: toggle, variant: "text", w: "100%" },
+                    react_1.default.createElement(icon_1.default, { name: icon, position: "absolute", right: iconRight }))))));
+});
+exports.Sidemenu.Top = sidemenuTop_1.default;
+exports.Sidemenu.Item = sidemenuItem_1.default;
+exports.default = exports.Sidemenu;

package/dist/cjs/sidemenu/sidemenu.types.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '../box';
+import { IconProp } from '../icon';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type SidemenuOrientation = 'vertical' | 'horizontal';
+export declare type SidemenuProps = SystemProps & ThemingProps<'Sidemenu'> & {
+    /** Collection of menu items  */
+    items?: SidemenuItemProps[];
+    /** Whether the menu is expanded @default false  */
+    isExpanded?: boolean;
+    /** With of the container when the side menu is expanded @default 280  */
+    width?: number;
+};
+export declare type SidemenuItemProps = BoxProps & {
+    /** Custom class name */
+    className?: string;
+    /** Children */
+    children?: ReactNode;
+    /** Custom class name */
+    icon: IconProp;
+    /** Icon size @default md  */
+    iconSize?: 'md' | 'sm';
+    /** Whether the item is active */
+    isActive?: boolean;
+    /** On click callback */
+    onClick?: () => void;
+    /** Title */
+    title: string;
+};
+export declare type SidemenuTopProps = BoxProps & {
+    /** Custom class name */
+    className?: string;
+    /** Left slod (always visible) */
+    leftSlot?: ReactNode;
+    /** Right slod (hiden if the sidemenu is collapsed) */
+    rightSlot?: ReactNode;
+};
+//# sourceMappingURL=sidemenu.types.d.ts.map

package/dist/cjs/sidemenu/sidemenu.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidemenu.types.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.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,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE3D,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAEH,oBAAY,iBAAiB,GAAG,QAAQ,GAAG;IACzC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wBAAwB;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,oBAAY,gBAAgB,GAAG,QAAQ,GAAG;IACxC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA"}

package/dist/cjs/sidemenu/sidemenu.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/sidemenu/sidemenuItem.d.ts

@@ -0,0 +1,6 @@
+import { VuiComponent } from '../core';
+import { SidemenuItemProps } from './sidemenu.types';
+/** A menu item. */
+export declare const SidemenuItem: VuiComponent<"div", SidemenuItemProps>;
+export default SidemenuItem;
+//# sourceMappingURL=sidemenuItem.d.ts.map

package/dist/cjs/sidemenu/sidemenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyB,YAAY,EAAE,MAAM,SAAS,CAAA;AAK7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCA8DmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}

package/dist/cjs/sidemenu/sidemenuItem.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidemenuItem = void 0;
+const react_1 = __importStar(require("react"));
+const box_1 = __importDefault(require("../box"));
+const button_1 = __importDefault(require("../button"));
+const core_1 = require("../core");
+const icon_1 = __importDefault(require("../icon"));
+const t_1 = __importDefault(require("../t"));
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+/** A menu item. */
+exports.SidemenuItem = (0, core_1.vui)(props => {
+    const _a = (0, core_1.omitThemingProps)(props), { className, children, icon, iconSize = 'md', isActive, onClick, title } = _a, rest = __rest(_a, ["className", "children", "icon", "iconSize", "isActive", "onClick", "title"]);
+    const [displayChildren, setDisplayChildren] = (0, react_1.useState)(true);
+    const { isExpandedInternal } = (0, context_1.useSidemenuContext)();
+    const innerContent = isExpandedInternal ? (react_1.default.createElement(box_1.default, { centerV: true, px: 2, py: 1, w: "100%", whiteSpace: "pre" },
+        react_1.default.createElement(icon_1.default, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize }),
+        react_1.default.createElement(t_1.default, { isTruncated: true, ml: 2 }, title))) : (react_1.default.createElement(box_1.default, { centerV: true, px: 2, py: 1, w: "100%" },
+        react_1.default.createElement(icon_1.default, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize })));
+    const toggle = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDisplayChildren(!displayChildren);
+    };
+    return (react_1.default.createElement(box_1.default, { flexDirection: "column", w: "100%" },
+        react_1.default.createElement(button_1.default, Object.assign({ alignItems: "center", border: "none", borderLeft: "3px solid black", borderLeftColor: isActive ? 'blue.80' : 'transparent', borderRadius: 0, className: (0, utils_1.cs)('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: "text", w: "100%" }, rest),
+            innerContent,
+            !!children && isExpandedInternal && (react_1.default.createElement(button_1.default, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "xs", variant: "text" }))),
+        !!children && displayChildren && (react_1.default.createElement(box_1.default, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
+});
+exports.default = exports.SidemenuItem;

package/dist/cjs/sidemenu/sidemenuTop.d.ts

@@ -0,0 +1,5 @@
+import { SidemenuTopProps } from './sidemenu.types';
+/** Top container. */
+export declare const SidemenuTop: (props: SidemenuTopProps) => JSX.Element | null;
+export default SidemenuTop;
+//# sourceMappingURL=sidemenuTop.d.ts.map

package/dist/cjs/sidemenu/sidemenuTop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidemenuTop.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuTop.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,qBAAqB;AACrB,eAAO,MAAM,WAAW,UAAW,gBAAgB,uBAalD,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/cjs/sidemenu/sidemenuTop.js

@@ -0,0 +1,35 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidemenuTop = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = require("../box");
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const consts_1 = require("./consts");
+const context_1 = require("./context");
+/** Top container. */
+const SidemenuTop = (props) => {
+    const _a = (0, core_1.omitThemingProps)(props), { className, leftSlot, rightSlot } = _a, rest = __rest(_a, ["className", "leftSlot", "rightSlot"]);
+    const { isExpandedInternal } = (0, context_1.useSidemenuContext)();
+    if (!leftSlot && !rightSlot)
+        return null;
+    return (react_1.default.createElement(box_1.Box, Object.assign({ borderBottom: consts_1.border, className: (0, utils_1.cs)('vui-sidemenu-top', className), mb: 1, w: "100%" }, rest),
+        !!leftSlot && leftSlot,
+        !!rightSlot && isExpandedInternal && rightSlot));
+};
+exports.SidemenuTop = SidemenuTop;
+exports.default = exports.SidemenuTop;

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

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

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

package/dist/cjs/sidemenu/theme.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const baseStyle = {};
+const defaultProps = {};
+const sizes = {};
+const variants = {};
+exports.default = {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

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

@@ -274,6 +274,12 @@ declare const _default: {
         sizes: {};
         variants: {};
     };
+    DragAndDrop: {
+        baseStyle: {};
+        defaultProps: {};
+        sizes: {};
+        variants: {};
+    };
     Footer: {
         baseStyle: {};
         defaultProps: {};
@@ -906,6 +912,12 @@ declare const _default: {
             };
         };
     };
+    Sidemenu: {
+        baseStyle: {};
+        defaultProps: {};
+        sizes: {};
+        variants: {};
+    };
     Skeleton: {
         baseStyle: {};
         defaultProps: {

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

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

package/dist/cjs/theme/components.js

@@ -12,34 +12,36 @@ const theme_6 = __importDefault(require("../card/theme"));
 const theme_7 = __importDefault(require("../checkbox/theme"));
 const theme_8 = __importDefault(require("../dialog/theme"));
 const theme_9 = __importDefault(require("../divider/theme"));
-const theme_10 = __importDefault(require("../footer/theme"));
-const theme_11 = __importDefault(require("../grid/theme"));
-const theme_12 = __importDefault(require("../header/theme"));
-const theme_13 = __importDefault(require("../heading/theme"));
-const theme_14 = __importDefault(require("../icon/theme"));
-const theme_15 = __importDefault(require("../image/theme"));
-const theme_16 = __importDefault(require("../input/theme"));
-const theme_17 = __importDefault(require("../link/theme"));
-const theme_18 = __importDefault(require("../list/theme"));
-const theme_19 = __importDefault(require("../menu/theme"));
-const theme_20 = __importDefault(require("../message/theme"));
-const theme_21 = __importDefault(require("../modal/theme"));
-const theme_22 = __importDefault(require("../notification/theme"));
-const theme_23 = __importDefault(require("../p/theme"));
-const theme_24 = __importDefault(require("../pagination/theme"));
-const theme_25 = __importDefault(require("../panel/theme"));
-const theme_26 = __importDefault(require("../popover/theme"));
-const theme_27 = __importDefault(require("../progress/theme"));
-const theme_28 = __importDefault(require("../radio/theme"));
-const theme_29 = __importDefault(require("../select/theme"));
-const theme_30 = __importDefault(require("../skeleton/theme"));
-const theme_31 = __importDefault(require("../spinner/theme"));
-const theme_32 = __importDefault(require("../switch/theme"));
-const theme_33 = __importDefault(require("../t/theme"));
-const theme_34 = __importDefault(require("../table/theme"));
-const theme_35 = __importDefault(require("../tabs/theme"));
-const theme_36 = __importDefault(require("../tag/theme"));
-const theme_37 = __importDefault(require("../textarea/theme"));
+const theme_10 = __importDefault(require("../dragAndDrop/theme"));
+const theme_11 = __importDefault(require("../footer/theme"));
+const theme_12 = __importDefault(require("../grid/theme"));
+const theme_13 = __importDefault(require("../header/theme"));
+const theme_14 = __importDefault(require("../heading/theme"));
+const theme_15 = __importDefault(require("../icon/theme"));
+const theme_16 = __importDefault(require("../image/theme"));
+const theme_17 = __importDefault(require("../input/theme"));
+const theme_18 = __importDefault(require("../link/theme"));
+const theme_19 = __importDefault(require("../list/theme"));
+const theme_20 = __importDefault(require("../menu/theme"));
+const theme_21 = __importDefault(require("../message/theme"));
+const theme_22 = __importDefault(require("../modal/theme"));
+const theme_23 = __importDefault(require("../notification/theme"));
+const theme_24 = __importDefault(require("../p/theme"));
+const theme_25 = __importDefault(require("../pagination/theme"));
+const theme_26 = __importDefault(require("../panel/theme"));
+const theme_27 = __importDefault(require("../popover/theme"));
+const theme_28 = __importDefault(require("../progress/theme"));
+const theme_29 = __importDefault(require("../radio/theme"));
+const theme_30 = __importDefault(require("../select/theme"));
+const theme_31 = __importDefault(require("../sidemenu/theme"));
+const theme_32 = __importDefault(require("../skeleton/theme"));
+const theme_33 = __importDefault(require("../spinner/theme"));
+const theme_34 = __importDefault(require("../switch/theme"));
+const theme_35 = __importDefault(require("../t/theme"));
+const theme_36 = __importDefault(require("../table/theme"));
+const theme_37 = __importDefault(require("../tabs/theme"));
+const theme_38 = __importDefault(require("../tag/theme"));
+const theme_39 = __importDefault(require("../textarea/theme"));
 exports.default = {
     Accordion: theme_1.default,
     Avatar: theme_2.default,
@@ -50,32 +52,34 @@ exports.default = {
     Checkbox: theme_7.default,
     Dialog: theme_8.default,
     Divider: theme_9.default,
-    Footer: theme_10.default,
-    Grid: theme_11.default,
-    Header: theme_12.default,
-    Heading: theme_13.default,
-    Icon: theme_14.default,
-    Image: theme_15.default,
-    Input: theme_16.default,
-    Link: theme_17.default,
-    List: theme_18.default,
-    Menu: theme_19.default,
-    Message: theme_20.default,
-    Modal: theme_21.default,
-    Notification: theme_22.default,
-    P: theme_23.default,
-    Pagination: theme_24.default,
-    Panel: theme_25.default,
-    Progress: theme_27.default,
-    Popover: theme_26.default,
-    Radio: theme_28.default,
-    Select: theme_29.default,
-    Skeleton: theme_30.default,
-    Spinner: theme_31.default,
-    Switch: theme_32.default,
-    T: theme_33.default,
-    Table: theme_34.default,
-    Tabs: theme_35.default,
-    Tag: theme_36.default,
-    Textarea: theme_37.default
+    DragAndDrop: theme_10.default,
+    Footer: theme_11.default,
+    Grid: theme_12.default,
+    Header: theme_13.default,
+    Heading: theme_14.default,
+    Icon: theme_15.default,
+    Image: theme_16.default,
+    Input: theme_17.default,
+    Link: theme_18.default,
+    List: theme_19.default,
+    Menu: theme_20.default,
+    Message: theme_21.default,
+    Modal: theme_22.default,
+    Notification: theme_23.default,
+    P: theme_24.default,
+    Pagination: theme_25.default,
+    Panel: theme_26.default,
+    Progress: theme_28.default,
+    Popover: theme_27.default,
+    Radio: theme_29.default,
+    Select: theme_30.default,
+    Sidemenu: theme_31.default,
+    Skeleton: theme_32.default,
+    Spinner: theme_33.default,
+    Switch: theme_34.default,
+    T: theme_35.default,
+    Table: theme_36.default,
+    Tabs: theme_37.default,
+    Tag: theme_38.default,
+    Textarea: theme_39.default
 };

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

@@ -471,6 +471,12 @@ declare const defaultTheme: {
             sizes: {};
             variants: {};
         };
+        DragAndDrop: {
+            baseStyle: {};
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
         Footer: {
             baseStyle: {};
             defaultProps: {};
@@ -1103,6 +1109,12 @@ declare const defaultTheme: {
                 };
             };
         };
+        Sidemenu: {
+            baseStyle: {};
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
         Skeleton: {
             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

@@ -8,6 +8,7 @@ export declare type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
     orientation?: AccordionOrientation;
     /** Hover color for the item title @default "blue.10" */
     itemTitleHoverBg?: string;
+    /** Collection of Accordion items */
     items?: AccordionItemProps[];
 };
 export declare type AccordionItemId = string | number;

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,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"}
+{"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,oCAAoC;IACpC,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/breadcrumbs/breadcrumbs.d.ts.map

@@ -1 +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"}
+{"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,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAI/C,eAAO,MAAM,eAAe,+HAI3B,CAAA;AAED,qLAAqL;AACrL,eAAO,MAAM,WAAW;UAqBhB,sBAAsB;CAC7B,CAAA;AAID,eAAe,WAAW,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbs.js

@@ -11,19 +11,15 @@ export const BreadcrumbsBase = styled.divBox `
 `;
 /** [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 { children, className, 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)))))));
+        React.createElement(BreadcrumbsBase, { className: cs('vui-breadcrumbs', className), ref: ref, ...styles, ...aliasedProps, ...rest }, 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

@@ -3,21 +3,14 @@ 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 BreadcrumbsProps = SystemProps & ThemingProps<'Breadcrumbs'>;
 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 */

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

@@ -1 +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"}
+{"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,GAAG,YAAY,CAAC,aAAa,CAAC,CAAA;AAExE,oBAAY,oBAAoB,GAAG,QAAQ,GAAG;IAC5C,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,WAAW;IACX,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,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/breadcrumbsItem.d.ts

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

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

@@ -1 +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"}
+{"version":3,"file":"breadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAG1D,yBAAyB;AACzB,eAAO,MAAM,eAAe,2CAWmB,CAAA;AAE/C,eAAe,eAAe,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbsItem.js

@@ -1,18 +1,15 @@
 import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
 import { Box } from '../box';
-import { omitThemingProps, useStyleConfig } from '../core';
+import { omitThemingProps, useStyleConfig, vui } 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);
+/** A Breadcrumb item. */
+export const BreadcrumbsItem = vui(props => {
+    const { className, children, icon, ...rest } = omitThemingProps(props);
     const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext());
-    const innerContent = (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { alignItems: "center", className: cs('vui-breadcrumbs-item', className), p: 0, ...rest, ...styles.item },
         !!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)));
-};
+        children));
+});
 export default BreadcrumbsItem;