@veracity/vui 2.10.0 → 2.12.0-beta.0

package/dist/esm/onedesign-tokens/dist/js/rem/button.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Mar 2023 12:31:05 GMT
+ */
+export const buttonSizeLargeFontSize: "1.125rem";
+export const buttonSizeLargeLineHeight: "1.75rem";
+export const buttonSizeLargePadding: "0.5rem 1rem";
+export const buttonSizeMediumFontSize: "1rem";
+export const buttonSizeMediumLineHeight: "1.5rem";
+export const buttonSizeMediumPadding: "0.25rem calc(0.25rem * 3)";
+export const buttonSizeSmallFontSize: "0.875rem";
+export const buttonSizeSmallLineHeight: "1.25rem";
+export const buttonSizeSmallPadding: "calc(0.25rem / 2) 0.5rem";
+export const buttonSizeDefaultFontSize: "1rem";
+export const buttonSizeDefaultLineHeight: "1.5rem";
+export const buttonSizeDefaultPadding: "0.25rem calc(0.25rem * 3)";
+export const buttonTypePrimaryDefaultBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBackgroundColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypePrimaryDefaultBackgroundColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypePrimaryDefaultTextColorDark: "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryDefaultTextColorLight: "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryHoverBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBackgroundColorDark: "hsla(218, 100%, 20%, 1)";
+export const buttonTypePrimaryHoverBackgroundColorLight: "hsla(139, 100%, 70%, 1)";
+export const buttonTypePrimaryHoverTextColorDark: "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryHoverTextColorLight: "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryActiveBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBackgroundColorDark: "hsla(218, 100%, 35%, 1)";
+export const buttonTypePrimaryActiveBackgroundColorLight: "hsla(139, 100%, 85%, 1)";
+export const buttonTypePrimaryActiveTextColorDark: "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryActiveTextColorLight: "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryFocusOutline: "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryDefaultBackgroundColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultBackgroundColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBorderColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverBorderColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorDark: "hsla(196, 74%, 80%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorLight: "hsla(218, 100%, 25%, 1)";
+export const buttonTypeSecondaryHoverTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBorderColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveBorderColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorDark: "hsla(196, 74%, 85%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorLight: "hsla(218, 100%, 35%, 1)";
+export const buttonTypeSecondaryActiveTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryFocusOutline: "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeTertiaryDefaultBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryDefaultTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryHoverBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBackgroundColorDark: "hsla(196, 74%, 80%, 1)";
+export const buttonTypeTertiaryHoverBackgroundColorLight: "hsla(218, 100%, 25%, 1)";
+export const buttonTypeTertiaryHoverTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryHoverTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryActiveBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBackgroundColorDark: "hsla(196, 74%, 85%, 1)";
+export const buttonTypeTertiaryActiveBackgroundColorLight: "hsla(218, 100%, 35%, 1)";
+export const buttonTypeTertiaryActiveTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryActiveTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryFocusOutline: "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonDisabledCursor: "default";
+export const buttonDisabledOpacity: "0.5";
+export const buttonBorderStyle: "solid";
+export const buttonBorderWidth: "calc(0.125rem / 2)";
+export const buttonFontFamily: "'Avenir Next', Arial, sans-serif";
+export const buttonFontSize: "1rem";
+export const buttonLineHeight: "1.5rem";
+export const buttonFontWeight: "500";
+export const buttonPadding: "calc(0.25rem * 1.5) calc(0.25rem * 3)";
+export const buttonTransition: "all 0.15s ease-in-out";
+export const buttonCursor: "pointer";
+//# sourceMappingURL=button.d.ts.map

package/dist/esm/onedesign-tokens/dist/js/rem/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../../src/onedesign-tokens/dist/js/rem/button.js"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,iDAAkD;AAClD,kDAAmD;AACnD,mDAAoD;AACpD,8CAA+C;AAC/C,kDAAmD;AACnD,kEAAmE;AACnE,iDAAkD;AAClD,kDAAmD;AACnD,gEAAiE;AACjE,+CAAgD;AAChD,mDAAoD;AACpD,mEAAoE;AACpE,2EAA4E;AAC5E,4EAA6E;AAC7E,oFAAqF;AACrF,qFAAsF;AACtF,4EAA6E;AAC7E,8EAA+E;AAC/E,yEAA0E;AAC1E,0EAA2E;AAC3E,kFAAmF;AACnF,mFAAoF;AACpF,0EAA2E;AAC3E,4EAA6E;AAC7E,0EAA2E;AAC3E,2EAA4E;AAC5E,mFAAoF;AACpF,oFAAqF;AACrF,2EAA4E;AAC5E,6EAA8E;AAC9E,oFAAqF;AACrF,kFAAmF;AACnF,mFAAoF;AACpF,iFAAkF;AAClF,kFAAmF;AACnF,gFAAiF;AACjF,iFAAkF;AAClF,gFAAiF;AACjF,iFAAkF;AAClF,mFAAoF;AACpF,qFAAsF;AACtF,8EAA+E;AAC/E,+EAAgF;AAChF,iFAAkF;AAClF,kFAAmF;AACnF,oFAAqF;AACrF,sFAAuF;AACvF,+EAAgF;AAChF,gFAAiF;AACjF,sFAAuF;AACvF,4EAA6E;AAC7E,6EAA8E;AAC9E,gFAAiF;AACjF,iFAAkF;AAClF,+EAAgF;AAChF,gFAAiF;AACjF,0EAA2E;AAC3E,2EAA4E;AAC5E,kFAAmF;AACnF,oFAAqF;AACrF,6EAA8E;AAC9E,8EAA+E;AAC/E,2EAA4E;AAC5E,4EAA6E;AAC7E,mFAAoF;AACpF,qFAAsF;AACtF,8EAA+E;AAC/E,+EAAgF;AAChF,qFAAsF;AACtF,6CAA8C;AAC9C,0CAA2C;AAC3C,wCAAyC;AACzC,qDAAsD;AACtD,kEAAmE;AACnE,oCAAqC;AACrC,wCAAyC;AACzC,qCAAsC;AACtC,oEAAqE;AACrE,uDAAwD;AACxD,qCAAsC"}

package/dist/esm/onedesign-tokens/dist/js/rem/button.js

@@ -0,0 +1,84 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Mar 2023 12:31:05 GMT
+ */
+export const buttonSizeLargeFontSize = "1.125rem";
+export const buttonSizeLargeLineHeight = "1.75rem";
+export const buttonSizeLargePadding = "0.5rem 1rem";
+export const buttonSizeMediumFontSize = "1rem";
+export const buttonSizeMediumLineHeight = "1.5rem";
+export const buttonSizeMediumPadding = "0.25rem calc(0.25rem * 3)";
+export const buttonSizeSmallFontSize = "0.875rem";
+export const buttonSizeSmallLineHeight = "1.25rem";
+export const buttonSizeSmallPadding = "calc(0.25rem / 2) 0.5rem";
+export const buttonSizeDefaultFontSize = "1rem";
+export const buttonSizeDefaultLineHeight = "1.5rem";
+export const buttonSizeDefaultPadding = "0.25rem calc(0.25rem * 3)";
+export const buttonTypePrimaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBackgroundColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypePrimaryDefaultBackgroundColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypePrimaryDefaultTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryDefaultTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBackgroundColorDark = "hsla(218, 100%, 20%, 1)";
+export const buttonTypePrimaryHoverBackgroundColorLight = "hsla(139, 100%, 70%, 1)";
+export const buttonTypePrimaryHoverTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryHoverTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBackgroundColorDark = "hsla(218, 100%, 35%, 1)";
+export const buttonTypePrimaryActiveBackgroundColorLight = "hsla(139, 100%, 85%, 1)";
+export const buttonTypePrimaryActiveTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryActiveTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorDark = "hsla(196, 74%, 80%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+export const buttonTypeSecondaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorDark = "hsla(196, 74%, 85%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+export const buttonTypeSecondaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeTertiaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBackgroundColorDark = "hsla(196, 74%, 80%, 1)";
+export const buttonTypeTertiaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+export const buttonTypeTertiaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBackgroundColorDark = "hsla(196, 74%, 85%, 1)";
+export const buttonTypeTertiaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+export const buttonTypeTertiaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonDisabledCursor = "default";
+export const buttonDisabledOpacity = "0.5";
+export const buttonBorderStyle = "solid";
+export const buttonBorderWidth = "calc(0.125rem / 2)";
+export const buttonFontFamily = "'Avenir Next', Arial, sans-serif";
+export const buttonFontSize = "1rem";
+export const buttonLineHeight = "1.5rem";
+export const buttonFontWeight = "500";
+export const buttonPadding = "calc(0.25rem * 1.5) calc(0.25rem * 3)";
+export const buttonTransition = "all 0.15s ease-in-out";
+export const buttonCursor = "pointer";

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

@@ -2,7 +2,6 @@ import { VuiComponent } from '../core';
 import { SidemenuProps } from './sidemenu.types';
 import SidemenuItem from './sidemenuItem';
 import SidemenuTop from './sidemenuTop';
-export declare const SidemenuBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
 /** A collapsible side menu for navigation. */
 export declare const Sidemenu: VuiComponent<"div", SidemenuProps> & {
     Top: typeof SidemenuTop;

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;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,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SA+Cd,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,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3D,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SAiEd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}

package/dist/esm/sidemenu/sidemenu.js

@@ -1,23 +1,16 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import Box from '../box';
 import Button from '../button';
-import { styled, useStyleConfig, vui } from '../core';
+import { useStyleConfig, vui } from '../core';
 import Icon from '../icon';
 import { cs, filterUndefined } from '../utils';
 import { expandedWidth } from './consts';
 import { SidemenuProvider } from './context';
 import SidemenuItem from './sidemenuItem';
 import SidemenuTop from './sidemenuTop';
-export const SidemenuBase = styled.divBox `
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  transition-duration: normal;
-  overflow: hidden;
-`;
 /** A collapsible side menu for navigation. */
 export const Sidemenu = vui((props, ref) => {
-    const { children, className, items, isExpanded = false, size, variant, width = 280, ...rest } = props;
+    const { children, className, items, isExpanded = false, size, variant, width = 280, onNavigate, ...rest } = props;
     const [isExpandedInternal, setIsExpandedInternal] = useState(isExpanded);
     const context = useMemo(() => filterUndefined({ size, variant, isExpandedInternal }), [size, variant, isExpandedInternal]);
     const styles = useStyleConfig('Sidemenu', props);
@@ -29,10 +22,15 @@ export const Sidemenu = vui((props, ref) => {
     const w = isExpandedInternal ? width : expandedWidth;
     const icon = `falArrow${isExpandedInternal ? 'Left' : 'Right'}`;
     const justifyContent = isExpandedInternal ? 'flex-end' : 'center';
+    function onItemClick(item) {
+        item?.onClick?.();
+        if (item?.path)
+            onNavigate?.(item.path);
+    }
     return (React.createElement(SidemenuProvider, { value: context },
-        React.createElement(SidemenuBase, { className: cs('vui-sidemenu', className), ref: ref, w: w, ...styles.container, ...rest },
+        React.createElement(Box, { className: cs('vui-sidemenu', className), elevation: "3", flexDirection: "column", minWidth: 0, overflowX: "hidden", ref: ref, transitionDuration: "normal", w: w, ...styles.container, ...rest },
             React.createElement(Box, { flexDirection: "column", flexGrow: 1, overflowX: "hidden", overflowY: "auto", w: "100%" }, items
-                ? items?.map?.((item, key) => React.createElement(SidemenuItem, { key: key, ...item }))
+                ? items?.map?.((item, key) => (React.createElement(SidemenuItem, { key: key, ...item, onClick: () => onItemClick(item) })))
                 : children),
             React.createElement(Box, { className: "vui-sidemenu-bottom", w: "100%", ...styles.bottom },
                 React.createElement(Button, { borderRadius: 0, justifyContent: justifyContent, minH: size === 'lg' ? '56px' : '40px', onClick: onToggle, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: "100%" },

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

@@ -9,6 +9,8 @@ export type SidemenuProps = SystemProps & ThemingProps<'Sidemenu'> & {
     items?: SidemenuItemProps[];
     /** Whether the menu is expanded @default false  */
     isExpanded?: boolean;
+    /** External callback for navigation to the item path, could be a custom function or React Router hook: https://reactrouter.com/en/main/hooks/use-navigate  */
+    onNavigate?: (to: string) => void;
     /** With of the container when the side menu is expanded @default 280  */
     width?: number;
 };
@@ -25,6 +27,8 @@ export type SidemenuItemProps = BoxProps & {
     isActive?: boolean;
     /** On click callback */
     onClick?: () => void;
+    /** Router path */
+    path?: string;
     /** Title */
     title: string;
 };

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,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE3D,MAAM,MAAM,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,MAAM,MAAM,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,MAAM,MAAM,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,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE3D,MAAM,MAAM,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,8JAA8J;IAC9J,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAEH,MAAM,MAAM,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,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,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.map

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

package/dist/esm/sidemenu/sidemenuItem.js

@@ -3,6 +3,7 @@ import Box from '../box';
 import Button from '../button';
 import { omitThemingProps, useStyleConfig, vui } from '../core';
 import Icon from '../icon';
+import { Popover } from '../popover';
 import T from '../t';
 import { cs } from '../utils';
 import { useSidemenuContext } from './context';
@@ -14,19 +15,41 @@ export const SidemenuItem = vui((props, ref) => {
     const styles = useStyleConfig('Sidemenu', useSidemenuContext);
     const isDark = variant === 'dark';
     const hasChildrenExpanded = !!children && isExpandedInternal;
-    const innerContent = isExpandedInternal ? (React.createElement(Box, { centerV: true, px: 2, py: 1, w: "100%", whiteSpace: "pre" },
+    const innerContent = (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, { 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 })));
+        React.createElement(T, { isTruncated: true, ml: 2 }, title)));
     const toggle = (e) => {
         e.preventDefault();
         e.stopPropagation();
         setDisplayChildren(!displayChildren);
     };
+    const buttonStyles = {
+        alignItems: 'center',
+        border: 'none',
+        borderRadius: 0,
+        borderLeft: '3px solid transparent',
+        borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined,
+        bg: isDark ? 'darkBlue.main' : isActive ? 'skyBlue.95' : 'white',
+        color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10',
+        h: 'auto',
+        justifyContent: 'space-between',
+        onClick: () => onClick?.(),
+        p: 0,
+        variant: isDark ? 'tertiaryLight' : 'tertiaryDark',
+        w: '100%',
+        ...styles.item,
+        minH: size === 'lg' ? '56px' : '40px',
+        hoverBg: isDark ? 'seaBlue.main' : 'skyBlue.90',
+        ...rest
+    };
     return (React.createElement(Box, { flexDirection: "column", ref: ref, w: "100%" },
-        React.createElement(Button, { alignItems: "center", border: "none", borderLeft: "3px solid transparent", borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined, borderRadius: 0, className: cs('vui-sidemenu-item', className), color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10', h: "auto", justifyContent: "space-between", onClick: () => onClick?.(), p: 0, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: "100%", ...styles.item, minH: size === 'lg' ? '56px' : '40px', ...rest },
+        !hasChildrenExpanded && children ? (React.createElement(Popover, { offset: [0, 0], placement: "right-start", trigger: "mouseenter" },
+            React.createElement(Popover.Trigger, { className: cs('vui-sidemenu-item-popover', className), ...buttonStyles },
+                React.createElement(Box, { borderLeft: `3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}` }, innerContent)),
+            React.createElement(Popover.Content, { shadow: 'none' },
+                React.createElement(Box, { flexDirection: "column", justifyContent: "start", w: "100%" }, children)))) : (React.createElement(Button, { className: cs('vui-sidemenu-item', className), ...buttonStyles },
             innerContent,
-            hasChildrenExpanded && (React.createElement(Button, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: isDark ? 'tertiaryLight' : 'tertiaryDark' }))),
-        !!children && displayChildren && (React.createElement(Box, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
+            hasChildrenExpanded && (React.createElement(Button, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: isDark ? 'tertiaryLight' : 'tertiaryDark' })))),
+        !!children && hasChildrenExpanded && displayChildren && (React.createElement(Box, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
 });
 export default SidemenuItem;

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/spinner/spinner.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,qDAiDlB,CAAA;AAEF,eAAe,OAAO,CAAA"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/spinner/spinner.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,qDAgDlB,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/dist/esm/spinner/spinner.js

@@ -26,8 +26,8 @@ export const Spinner = vui((props, ref) => {
         h: isCustomSize ? size : undefined,
         w: isCustomSize ? size : undefined
     });
-    return (React.createElement(Box, { center: true, className: cs('vui-spinner', className), gap: 1, ref: ref, transitionDuration: "fast", ...styles.container, ...positionProps.container, ...rest },
+    return (React.createElement(Box, { center: true, className: cs('vui-spinner', className), gap: 1, ref: ref, transitionDuration: "fast", ...positionProps.container, ...styles.container, ...rest },
         React.createElement(SpinnerCircle, { animation: `vui-spin ${speed} linear infinite`, className: "vui-spinnerCircle", ...styles.circle, ...circleProps }),
-        text && (React.createElement(T, { className: "vui-spinnerText", ...styles.text }, text))));
+        !!text && (React.createElement(T, { className: "vui-spinnerText", ...styles.text }, text))));
 });
 export default Spinner;

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { BoxProps } from '../box';
 import { ThemingProps } from '../theme';
 export type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProps<'Spinner'>, 'size'> & {
@@ -12,7 +13,7 @@ export type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProp
     /** Theme size or a number defining height and width. */
     size?: ThemingProps<'Spinner'>['size'] | number;
     /** Displays given text next to the spinner. */
-    text?: string;
+    text?: ReactNode;
     /** Text placement relative to the spinner. */
     textPosition?: 'bottom' | 'left' | 'right' | 'top';
     /** Thickness of the spinner circle in pixels. */

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.types.d.ts","sourceRoot":"","sources":["../../../src/spinner/spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAC3D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG;IACtC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;IAC1C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IACnC,qDAAqD;IACrD,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;IAClC,wDAAwD;IACxD,IAAI,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IAC/C,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;IAClD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}
+{"version":3,"file":"spinner.types.d.ts","sourceRoot":"","sources":["../../../src/spinner/spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAC3D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG;IACtC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;IAC1C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IACnC,qDAAqD;IACrD,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;IAClC,wDAAwD;IACxD,IAAI,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IAC/C,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;IAClD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}

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

@@ -1,5 +1,9 @@
 declare const _default: {
-    baseStyle: {};
+    baseStyle: {
+        container: {
+            padding: number;
+        };
+    };
     defaultProps: {
         size: string;
         variant: string;
@@ -34,14 +38,28 @@ declare const _default: {
                 w: number;
             };
         };
-        card: {
+        xl: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        xxl: {
             circle: {
                 borderWidth: number;
                 h: number;
                 w: number;
             };
         };
-        page: {
+        xxxl: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        xxxxl: {
             circle: {
                 borderWidth: number;
                 h: number;
@@ -50,7 +68,7 @@ declare const _default: {
         };
     };
     variants: {
-        lightBackground: {
+        light: {
             circle: {
                 borderColor: string;
                 borderTopColor: string;
@@ -59,7 +77,10 @@ declare const _default: {
                 color: string;
             };
         };
-        darkBackground: {
+        dark: {
+            container: {
+                bg: string;
+            };
             circle: {
                 borderColor: string;
                 borderTopColor: string;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/spinner/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/spinner/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,wBAMC"}

package/dist/esm/spinner/theme.js

@@ -1,15 +1,19 @@
-const baseStyle = {};
+const baseStyle = {
+    container: {
+        padding: 1
+    }
+};
 const defaultProps = {
-    size: 'page',
-    variant: 'lightBackground'
+    size: 'xxxl',
+    variant: 'light'
 };
 const parts = ['container', 'circle', 'text'];
 const sizes = {
     xs: {
         circle: {
-            borderWidth: 1,
-            h: 16,
-            w: 16
+            borderWidth: 2,
+            h: 20,
+            w: 20
         }
     },
     sm: {
@@ -33,23 +37,37 @@ const sizes = {
             w: 40
         }
     },
-    card: {
+    xl: {
+        circle: {
+            borderWidth: 3,
+            h: 48,
+            w: 48
+        }
+    },
+    xxl: {
         circle: {
             borderWidth: 4,
             h: 60,
             w: 60
         }
     },
-    page: {
+    xxxl: {
         circle: {
             borderWidth: 5,
             h: 80,
             w: 80
         }
+    },
+    xxxxl: {
+        circle: {
+            borderWidth: 5,
+            h: 120,
+            w: 120
+        }
     }
 };
 const variants = {
-    lightBackground: {
+    light: {
         circle: {
             borderColor: 'seaBlue.80',
             borderTopColor: 'seaBlue.main'
@@ -58,13 +76,16 @@ const variants = {
             color: 'seaBlue.main'
         }
     },
-    darkBackground: {
+    dark: {
+        container: {
+            bg: 'darkBlue.main'
+        },
         circle: {
-            borderColor: 'digiGreen.30',
-            borderTopColor: 'digiGreen.78'
+            borderColor: 'hsl(139, 100%, 78%, 0.4)',
+            borderTopColor: 'digiGreen.main'
         },
         text: {
-            color: 'digiGreen.78'
+            color: 'digiGreen.main'
         }
     }
 };