@veracity/vui 1.9.0-beta.0 → 1.9.0-beta.1

package/dist/cjs/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/cjs/breadcrumbs/breadcrumbs.js

@@ -51,20 +51,15 @@ exports.BreadcrumbsBase = core_1.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. */
 exports.Breadcrumbs = (0, core_1.vui)((props, ref) => {
-    var _a;
-    const { children, className, items, size } = props, rest = __rest(props, ["children", "className", "items", "size"]);
+    const { children, className, size } = props, rest = __rest(props, ["children", "className", "size"]);
     const styles = (0, core_1.useStyleConfig)('Breadcrumbs', props);
     const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size }), [size]);
     const aliasedProps = (0, utils_1.filterUndefined)({});
     const arrayChildren = react_1.Children.toArray(children);
     return (react_1.default.createElement(context_1.BreadcrumbsProvider, { value: context },
-        react_1.default.createElement(exports.BreadcrumbsBase, Object.assign({ className: (0, utils_1.cs)('vui-breadcrumbs', className), ref: ref }, styles, aliasedProps, rest), 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(react_1.Fragment, { key: key },
-                react_1.default.createElement(breadcrumbsItem_1.default, Object.assign({ key: key }, item)),
-                key !== items.length - 1 && react_1.default.createElement(breadcrumbsSeparator_1.default, null))))
-            : react_1.Children.map(arrayChildren, (child, key) => (react_1.default.createElement(react_1.Fragment, { key: key },
-                child,
-                key !== arrayChildren.length - 1 && react_1.default.createElement(breadcrumbsSeparator_1.default, null)))))));
+        react_1.default.createElement(exports.BreadcrumbsBase, Object.assign({ className: (0, utils_1.cs)('vui-breadcrumbs', className), ref: ref }, styles, aliasedProps, rest), react_1.Children.map(arrayChildren, (child, key) => (react_1.default.createElement(react_1.Fragment, { key: key },
+            child,
+            key !== arrayChildren.length - 1 && react_1.default.createElement(breadcrumbsSeparator_1.default, null)))))));
 });
 exports.Breadcrumbs.Item = breadcrumbsItem_1.default;
 exports.default = exports.Breadcrumbs;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/breadcrumbs/breadcrumbsItem.js

@@ -16,21 +16,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BreadcrumbsItem = void 0;
 const react_1 = __importDefault(require("react"));
-const react_router_dom_1 = require("react-router-dom");
 const box_1 = require("../box");
 const core_1 = require("../core");
 const icon_1 = require("../icon");
-const link_1 = require("../link");
 const utils_1 = require("../utils");
 const context_1 = require("./context");
-/** A Breadcrumbs item. */
-const BreadcrumbsItem = (props) => {
-    const _a = (0, core_1.omitThemingProps)(props), { className, children, content, icon, path } = _a, rest = __rest(_a, ["className", "children", "content", "icon", "path"]);
+/** A Breadcrumb item. */
+exports.BreadcrumbsItem = (0, core_1.vui)(props => {
+    const _a = (0, core_1.omitThemingProps)(props), { className, children, icon } = _a, rest = __rest(_a, ["className", "children", "icon"]);
     const styles = (0, core_1.useStyleConfig)('Breadcrumbs', (0, context_1.useBreadcrumbsContext)());
-    const innerContent = (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(box_1.Box, Object.assign({ alignItems: "center", className: (0, utils_1.cs)('vui-breadcrumbs-item', className), p: 0 }, rest, styles.item),
         !!icon && react_1.default.createElement(icon_1.Icon, { name: icon, size: "sm" }),
-        content || children));
-    return (react_1.default.createElement(box_1.Box, Object.assign({ alignItems: "center", className: (0, utils_1.cs)('vui-breadcrumbs-item', className), p: 0 }, rest, styles.item), path ? (react_1.default.createElement(link_1.Link, { as: react_router_dom_1.Link, to: path }, innerContent)) : (innerContent)));
-};
-exports.BreadcrumbsItem = BreadcrumbsItem;
+        children));
+});
 exports.default = exports.BreadcrumbsItem;

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

@@ -0,0 +1,7 @@
+export declare const border = "1px solid lightgray";
+export declare const expandedWidth = 64;
+export declare const right: {
+    expanded: number;
+    collapsed: number;
+};
+//# sourceMappingURL=consts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,eAAO,MAAM,aAAa,KAAK,CAAA;AAE/B,eAAO,MAAM,KAAK;;;CAGjB,CAAA"}

package/dist/cjs/sidemenu/consts.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.right = exports.expandedWidth = exports.border = void 0;
+exports.border = '1px solid lightgray';
+exports.expandedWidth = 64;
+exports.right = {
+    expanded: 16,
+    collapsed: 34
+};

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAInE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,QAAQ;SAqCd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAKnE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,QAAQ;SAqCd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}

package/dist/cjs/sidemenu/sidemenu.js

@@ -44,6 +44,7 @@ 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"));
@@ -68,15 +69,15 @@ exports.Sidemenu = (0, core_1.vui)((props, ref) => {
     const toggle = () => {
         setIsExpandedInternal(!isExpandedInternal);
     };
-    const w = isExpandedInternal ? width : 64;
+    const w = isExpandedInternal ? width : consts_1.expandedWidth;
     const icon = isExpandedInternal ? 'falArrowLeft' : 'falArrowRight';
-    const iconRight = isExpandedInternal ? 16 : 34;
+    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, w: "100%" }, items
+            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: "1px solid lightgray", className: "vui-sidemenu-bottom", mt: 2, w: "100%" },
+            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 }))))));
 });

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

@@ -23,8 +23,6 @@ export declare type SidemenuItemProps = BoxProps & {
     iconSize?: 'md' | 'sm';
     /** Whether the item is active */
     isActive?: boolean;
-    /** Path */
-    path?: string;
     /** On click callback */
     onClick?: () => void;
     /** Title */

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

@@ -1 +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,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,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"}
+{"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/sidemenuItem.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAiEpD,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"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

@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidemenuItem = void 0;
 const react_1 = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
 const box_1 = __importDefault(require("../box"));
 const button_1 = __importDefault(require("../button"));
 const core_1 = require("../core");
@@ -48,20 +47,23 @@ const t_1 = __importDefault(require("../t"));
 const utils_1 = require("../utils");
 const context_1 = require("./context");
 /** A menu item. */
-const SidemenuItem = (props) => {
-    const _a = (0, core_1.omitThemingProps)(props), { className, children, icon, iconSize = 'md', isActive, onClick, path, title } = _a, rest = __rest(_a, ["className", "children", "icon", "iconSize", "isActive", "onClick", "path", "title"]);
+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, { px: 2, py: 1, w: "100%", whiteSpace: "pre" },
+    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, { ml: 2 }, title))) : (react_1.default.createElement(box_1.default, { px: 2, py: 1, w: "100%" },
+        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 pathProps = path ? { as: react_router_dom_1.Link, to: path } : {};
+    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({ 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%" }, pathProps, rest),
+        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, { icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: () => setDisplayChildren(!displayChildren), size: "xs", variant: "text" }))),
+            !!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.SidemenuItem = SidemenuItem;
+});
 exports.default = exports.SidemenuItem;

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

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

@@ -19,6 +19,7 @@ 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) => {
@@ -26,7 +27,7 @@ const SidemenuTop = (props) => {
     const { isExpandedInternal } = (0, context_1.useSidemenuContext)();
     if (!leftSlot && !rightSlot)
         return null;
-    return (react_1.default.createElement(box_1.Box, Object.assign({ borderBottom: "1px solid lightgray", className: (0, utils_1.cs)('vui-sidemenu-top', className), mb: 1, w: "100%" }, rest),
+    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));
 };

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;

package/dist/esm/sidemenu/consts.d.ts

@@ -0,0 +1,7 @@
+export declare const border = "1px solid lightgray";
+export declare const expandedWidth = 64;
+export declare const right: {
+    expanded: number;
+    collapsed: number;
+};
+//# sourceMappingURL=consts.d.ts.map

package/dist/esm/sidemenu/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,eAAO,MAAM,aAAa,KAAK,CAAA;AAE/B,eAAO,MAAM,KAAK;;;CAGjB,CAAA"}

package/dist/esm/sidemenu/consts.js

@@ -0,0 +1,6 @@
+export const border = '1px solid lightgray';
+export const expandedWidth = 64;
+export const right = {
+    expanded: 16,
+    collapsed: 34
+};

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAInE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,QAAQ;SAqCd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAKnE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,QAAQ;SAqCd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}

package/dist/esm/sidemenu/sidemenu.js

@@ -4,6 +4,7 @@ import Button from '../button';
 import { styled, useStyleConfig, vui } from '../core';
 import Icon from '../icon';
 import { cs, filterUndefined } from '../utils';
+import { border, expandedWidth, right } from './consts';
 import { SidemenuProvider } from './context';
 import SidemenuItem from './sidemenuItem';
 import SidemenuTop from './sidemenuTop';
@@ -27,15 +28,15 @@ export const Sidemenu = vui((props, ref) => {
     const toggle = () => {
         setIsExpandedInternal(!isExpandedInternal);
     };
-    const w = isExpandedInternal ? width : 64;
+    const w = isExpandedInternal ? width : expandedWidth;
     const icon = isExpandedInternal ? 'falArrowLeft' : 'falArrowRight';
-    const iconRight = isExpandedInternal ? 16 : 34;
+    const iconRight = isExpandedInternal ? right.expanded : right.collapsed;
     return (React.createElement(SidemenuProvider, { value: context },
         React.createElement(SidemenuBase, { className: cs('vui-sidemenu', className), ref: ref, w: w, ...styles, ...aliasedProps, ...rest },
-            React.createElement(Box, { flexDirection: "column", flexGrow: 1, w: "100%" }, items
+            React.createElement(Box, { flexDirection: "column", flexGrow: 1, overflowX: "hidden", overflowY: "auto", w: "100%" }, items
                 ? items?.map?.((item, key) => React.createElement(SidemenuItem, { key: key, ...item }))
                 : children),
-            React.createElement(Box, { borderTop: "1px solid lightgray", className: "vui-sidemenu-bottom", mt: 2, w: "100%" },
+            React.createElement(Box, { borderTop: border, className: "vui-sidemenu-bottom", w: "100%" },
                 React.createElement(Button, { borderRadius: 0, onClick: toggle, variant: "text", w: "100%" },
                     React.createElement(Icon, { name: icon, position: "absolute", right: iconRight }))))));
 });

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

@@ -23,8 +23,6 @@ export declare type SidemenuItemProps = BoxProps & {
     iconSize?: 'md' | 'sm';
     /** Whether the item is active */
     isActive?: boolean;
-    /** Path */
-    path?: string;
     /** On click callback */
     onClick?: () => void;
     /** Title */

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

@@ -1 +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,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,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"}
+{"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/esm/sidemenu/sidemenuItem.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAiEpD,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"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/esm/sidemenu/sidemenuItem.js

@@ -1,26 +1,29 @@
 import React, { useState } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
 import Box from '../box';
 import Button from '../button';
-import { omitThemingProps } from '../core';
+import { omitThemingProps, vui } from '../core';
 import Icon from '../icon';
 import T from '../t';
 import { cs } from '../utils';
 import { useSidemenuContext } from './context';
 /** A menu item. */
-export const SidemenuItem = (props) => {
-    const { className, children, icon, iconSize = 'md', isActive, onClick, path, title, ...rest } = omitThemingProps(props);
+export const SidemenuItem = vui(props => {
+    const { className, children, icon, iconSize = 'md', isActive, onClick, title, ...rest } = omitThemingProps(props);
     const [displayChildren, setDisplayChildren] = useState(true);
     const { isExpandedInternal } = useSidemenuContext();
-    const innerContent = isExpandedInternal ? (React.createElement(Box, { px: 2, py: 1, w: "100%", whiteSpace: "pre" },
+    const innerContent = isExpandedInternal ? (React.createElement(Box, { centerV: true, px: 2, py: 1, w: "100%", whiteSpace: "pre" },
         React.createElement(Icon, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize }),
-        React.createElement(T, { ml: 2 }, title))) : (React.createElement(Box, { px: 2, py: 1, w: "100%" },
+        React.createElement(T, { isTruncated: true, ml: 2 }, title))) : (React.createElement(Box, { centerV: true, px: 2, py: 1, w: "100%" },
         React.createElement(Icon, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize })));
-    const pathProps = path ? { as: RouterLink, to: path } : {};
+    const toggle = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDisplayChildren(!displayChildren);
+    };
     return (React.createElement(Box, { flexDirection: "column", w: "100%" },
-        React.createElement(Button, { border: "none", borderLeft: "3px solid black", borderLeftColor: isActive ? 'blue.80' : 'transparent', borderRadius: 0, className: cs('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick?.(), p: 0, variant: "text", w: "100%", ...pathProps, ...rest },
+        React.createElement(Button, { alignItems: "center", border: "none", borderLeft: "3px solid black", borderLeftColor: isActive ? 'blue.80' : 'transparent', borderRadius: 0, className: cs('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick?.(), p: 0, variant: "text", w: "100%", ...rest },
             innerContent,
-            !!children && isExpandedInternal && (React.createElement(Button, { icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: () => setDisplayChildren(!displayChildren), size: "xs", variant: "text" }))),
+            !!children && isExpandedInternal && (React.createElement(Button, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "xs", variant: "text" }))),
         !!children && displayChildren && (React.createElement(Box, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
-};
+});
 export default SidemenuItem;

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenuTop.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuTop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,qBAAqB;AACrB,eAAO,MAAM,WAAW,UAAW,gBAAgB,uBAalD,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"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/esm/sidemenu/sidemenuTop.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Box } from '../box';
 import { omitThemingProps } from '../core';
 import { cs } from '../utils';
+import { border } from './consts';
 import { useSidemenuContext } from './context';
 /** Top container. */
 export const SidemenuTop = (props) => {
@@ -9,7 +10,7 @@ export const SidemenuTop = (props) => {
     const { isExpandedInternal } = useSidemenuContext();
     if (!leftSlot && !rightSlot)
         return null;
-    return (React.createElement(Box, { borderBottom: "1px solid lightgray", className: cs('vui-sidemenu-top', className), mb: 1, w: "100%", ...rest },
+    return (React.createElement(Box, { borderBottom: border, className: cs('vui-sidemenu-top', className), mb: 1, w: "100%", ...rest },
         !!leftSlot && leftSlot,
         !!rightSlot && isExpandedInternal && rightSlot));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.9.0-beta.0",
+  "version": "1.9.0-beta.1",
   "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",

package/src/breadcrumbs/breadcrumbs.tsx

@@ -2,7 +2,7 @@ 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 { BreadcrumbsProps } from './breadcrumbs.types'
 import BreadcrumbsItem from './breadcrumbsItem'
 import BreadcrumbsSeparator from './breadcrumbsSeparator'
 import { BreadcrumbsProvider } from './context'
@@ -15,7 +15,7 @@ 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<'div', BreadcrumbsProps>((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])
@@ -25,19 +25,12 @@ export const Breadcrumbs = vui<'div', BreadcrumbsProps>((props, ref) => {
   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>
-            ))}
+        {Children.map(arrayChildren, (child, key) => (
+          <Fragment key={key}>
+            {child}
+            {key !== arrayChildren.length - 1 && <BreadcrumbsSeparator />}
+          </Fragment>
+        ))}
       </BreadcrumbsBase>
     </BreadcrumbsProvider>
   )

package/src/breadcrumbs/breadcrumbs.types.ts

@@ -5,23 +5,15 @@ 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 BreadcrumbsProps = SystemProps & ThemingProps<'Breadcrumbs'>
 
 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 & {

package/src/breadcrumbs/breadcrumbsItem.tsx

@@ -1,38 +1,24 @@
 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, VuiComponent } from '../core'
 import { Icon } from '../icon'
-import { Link } from '../link'
 import { cs } from '../utils'
 import { BreadcrumbsItemProps } from './breadcrumbs.types'
 import { useBreadcrumbsContext } from './context'
 
-/** A Breadcrumbs item. */
-export const BreadcrumbsItem = (props: BreadcrumbsItemProps) => {
-  const { className, children, content, icon, path, ...rest } = omitThemingProps(props)
+/** A Breadcrumb item. */
+export const BreadcrumbsItem = vui<'div', BreadcrumbsItemProps>(props => {
+  const { className, children, icon, ...rest } = omitThemingProps(props)
 
   const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())
 
-  const innerContent = (
-    <>
-      {!!icon && <Icon name={icon} size="sm" />}
-      {content || children}
-    </>
-  )
-
   return (
     <Box alignItems="center" className={cs('vui-breadcrumbs-item', className)} p={0} {...rest} {...styles.item}>
-      {path ? (
-        <Link as={RouterLink} to={path}>
-          {innerContent}
-        </Link>
-      ) : (
-        innerContent
-      )}
+      {!!icon && <Icon name={icon} size="sm" />}
+      {children}
     </Box>
   )
-}
+}) as VuiComponent<'div', BreadcrumbsItemProps>
 
 export default BreadcrumbsItem

package/src/sidemenu/consts.ts

@@ -0,0 +1,8 @@
+export const border = '1px solid lightgray'
+
+export const expandedWidth = 64
+
+export const right = {
+  expanded: 16,
+  collapsed: 34
+}

package/src/sidemenu/sidemenu.tsx

@@ -5,6 +5,7 @@ import Button from '../button'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
 import { cs, filterUndefined } from '../utils'
+import { border, expandedWidth, right } from './consts'
 import { SidemenuProvider } from './context'
 import { SidemenuItemProps, SidemenuProps } from './sidemenu.types'
 import SidemenuItem from './sidemenuItem'
@@ -35,19 +36,19 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
     setIsExpandedInternal(!isExpandedInternal)
   }
 
-  const w = isExpandedInternal ? width : 64
+  const w = isExpandedInternal ? width : expandedWidth
   const icon = isExpandedInternal ? 'falArrowLeft' : 'falArrowRight'
-  const iconRight = isExpandedInternal ? 16 : 34
+  const iconRight = isExpandedInternal ? right.expanded : right.collapsed
 
   return (
     <SidemenuProvider value={context}>
       <SidemenuBase className={cs('vui-sidemenu', className)} ref={ref} w={w} {...styles} {...aliasedProps} {...rest}>
-        <Box flexDirection="column" flexGrow={1} w="100%">
+        <Box flexDirection="column" flexGrow={1} overflowX="hidden" overflowY="auto" w="100%">
           {items
             ? items?.map?.((item: SidemenuItemProps, key: number) => <SidemenuItem key={key} {...item} />)
             : children}
         </Box>
-        <Box borderTop="1px solid lightgray" className="vui-sidemenu-bottom" mt={2} w="100%">
+        <Box borderTop={border} className="vui-sidemenu-bottom" w="100%">
           <Button borderRadius={0} onClick={toggle} variant="text" w="100%">
             <Icon name={icon} position="absolute" right={iconRight} />
           </Button>

package/src/sidemenu/sidemenu.types.ts

@@ -28,8 +28,6 @@ export type SidemenuItemProps = BoxProps & {
   iconSize?: 'md' | 'sm'
   /** Whether the item is active */
   isActive?: boolean
-  /** Path */
-  path?: string
   /** On click callback */
   onClick?: () => void
   /** Title */

package/src/sidemenu/sidemenuItem.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from 'react'
-import { Link as RouterLink } from 'react-router-dom'
+import React, { MouseEvent, useState } from 'react'
 
 import Box from '../box'
 import Button from '../button'
-import { omitThemingProps } from '../core'
+import { omitThemingProps, vui, VuiComponent } from '../core'
 import Icon from '../icon'
 import T from '../t'
 import { cs } from '../utils'
@@ -11,39 +10,36 @@ import { useSidemenuContext } from './context'
 import { SidemenuItemProps } from './sidemenu.types'
 
 /** A menu item. */
-export const SidemenuItem = (props: SidemenuItemProps) => {
-  const {
-    className,
-    children,
-    icon,
-    iconSize = 'md',
-    isActive,
-    onClick,
-    path,
-    title,
-    ...rest
-  } = omitThemingProps(props)
+export const SidemenuItem = vui<'button', SidemenuItemProps>(props => {
+  const { className, children, icon, iconSize = 'md', isActive, onClick, title, ...rest } = omitThemingProps(props)
 
   const [displayChildren, setDisplayChildren] = useState(true)
 
   const { isExpandedInternal } = useSidemenuContext()
 
   const innerContent = isExpandedInternal ? (
-    <Box px={2} py={1} w="100%" whiteSpace="pre">
+    <Box centerV px={2} py={1} w="100%" whiteSpace="pre">
       <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />
-      <T ml={2}>{title}</T>
+      <T isTruncated ml={2}>
+        {title}
+      </T>
     </Box>
   ) : (
-    <Box px={2} py={1} w="100%">
+    <Box centerV px={2} py={1} w="100%">
       <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />
     </Box>
   )
 
-  const pathProps = path ? { as: RouterLink, to: path } : {}
+  const toggle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDisplayChildren(!displayChildren)
+  }
 
   return (
     <Box flexDirection="column" w="100%">
       <Button
+        alignItems="center"
         border="none"
         borderLeft="3px solid black"
         borderLeftColor={isActive ? 'blue.80' : 'transparent'}
@@ -55,15 +51,15 @@ export const SidemenuItem = (props: SidemenuItemProps) => {
         p={0}
         variant="text"
         w="100%"
-        {...pathProps}
         {...rest}
       >
         {innerContent}
         {!!children && isExpandedInternal && (
           <Button
+            className="vui-sidemenu-item-expand"
             icon={displayChildren ? 'falChevronUp' : 'falChevronDown'}
             mr={1}
-            onClick={() => setDisplayChildren(!displayChildren)}
+            onClick={toggle}
             size="xs"
             variant="text"
           />
@@ -76,6 +72,6 @@ export const SidemenuItem = (props: SidemenuItemProps) => {
       )}
     </Box>
   )
-}
+}) as VuiComponent<'div', SidemenuItemProps>
 
 export default SidemenuItem

package/src/sidemenu/sidemenuTop.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { Box } from '../box'
 import { omitThemingProps } from '../core'
 import { cs } from '../utils'
+import { border } from './consts'
 import { useSidemenuContext } from './context'
 import { SidemenuTopProps } from './sidemenu.types'
 
@@ -15,7 +16,7 @@ export const SidemenuTop = (props: SidemenuTopProps) => {
   if (!leftSlot && !rightSlot) return null
 
   return (
-    <Box borderBottom="1px solid lightgray" className={cs('vui-sidemenu-top', className)} mb={1} w="100%" {...rest}>
+    <Box borderBottom={border} className={cs('vui-sidemenu-top', className)} mb={1} w="100%" {...rest}>
       {!!leftSlot && leftSlot}
       {!!rightSlot && isExpandedInternal && rightSlot}
     </Box>