@veracity/vui 2.30.0-beta.0 → 2.30.0

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

@@ -742,6 +742,17 @@ declare const defaultTheme: {
             };
             parts: string[];
             sizes: {
+                xxs: {
+                    container: {
+                        borderRadius: string;
+                        fontSize: string;
+                        h: number;
+                        spaceX: number;
+                    };
+                    icon: {
+                        size: string;
+                    };
+                };
                 xs: {
                     container: {
                         borderRadius: string;
@@ -2673,6 +2684,115 @@ declare const defaultTheme: {
                 };
             };
         };
+        SidemenuV2: {
+            baseStyle: {
+                container: {
+                    display: string;
+                    flexDirection: string;
+                    overflow: string;
+                    transition: string;
+                };
+                content: {
+                    flex: number;
+                    overflowY: string;
+                    overflowX: string;
+                };
+                bottom: {
+                    flexShrink: number;
+                    borderTop: string;
+                    display: string;
+                    alignItems: string;
+                };
+                item: {
+                    display: string;
+                    alignItems: string;
+                    justifyContent: string;
+                    flexDirection: string;
+                    w: string;
+                    border: string;
+                    cursor: string;
+                    transition: string;
+                    textDecoration: string;
+                    outline: string;
+                    px: number;
+                    borderLeft: string;
+                };
+                sidemenuTop: {
+                    display: string;
+                    alignItems: string;
+                    justifyContent: string;
+                    padding: string;
+                    minHeight: string;
+                };
+                toggleButton: {
+                    baseHeight: number;
+                    basePadding: number;
+                    expandedPaddingMultiplier: number;
+                    collapsedWidth: string;
+                    expandedWidth: string;
+                    transition: string;
+                };
+            };
+            defaultProps: {
+                size: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {
+                sm: {
+                    toggleButton: {
+                        baseHeight: number;
+                        basePadding: number;
+                    };
+                };
+                md: {
+                    toggleButton: {
+                        baseHeight: number;
+                        basePadding: number;
+                    };
+                };
+                lg: {
+                    toggleButton: {
+                        baseHeight: number;
+                        basePadding: number;
+                    };
+                };
+            };
+            variants: {
+                light: {
+                    container: {
+                        bg: string;
+                    };
+                    toggleButton: {
+                        variant: string;
+                        hoverBg: string;
+                    };
+                    item: {
+                        color: string;
+                    };
+                };
+                dark: {
+                    container: {
+                        bg: string;
+                        color: string;
+                        boxShadow: string;
+                    };
+                    bottom: {
+                        borderTopColor: string;
+                    };
+                    sidemenuTop: {
+                        borderBottom: string;
+                        bg: string;
+                    };
+                    toggleButton: {
+                        variant: string;
+                    };
+                    item: {
+                        color: string;
+                    };
+                };
+            };
+        };
         Switch: {
             baseStyle: {
                 button: {

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/cjs/tutorial/tutorialCard.js

@@ -24,7 +24,7 @@ function TutorialCard({ actionLabel = 'Action', className, title, readMoreLink,
     }, [title, propsSteps]);
     const isStartStep = activeStep === 0;
     const isFinalStep = activeStep === propsSteps.length;
-    return ((0, jsx_runtime_1.jsxs)(index_1.Card, { bg: consts_1.tutorialColors.bg, className: className, color: consts_1.tutorialColors.color, column: true, justifyContent: "space-between", minH: 400, p: 2, pt: 1, w: 580, children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { alignContent: "center", alignItems: "center", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", minH: 48, row: true, style: { WebkitFlexGrow: '0' }, children: [(0, jsx_runtime_1.jsx)(index_1.H4, { color: consts_1.tutorialColors.color, children: title }), !isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "close", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "tertiaryLight" }))] }), (0, jsx_runtime_1.jsx)(index_1.Box, { flex: 5, row: true, children: (_a = steps === null || steps === void 0 ? void 0 : steps.map) === null || _a === void 0 ? void 0 : _a.call(steps, s => ((0, jsx_runtime_1.jsx)(tutorialStep_1.TutorialStep, { active: s.key === activeStep, content: s.step.content, readMoreLink: s.step.readMoreLink, title: s.step.title }, s.step.title))) }), (0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", mt: 0, children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", w: "-webkit-fill-available", children: [(0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "previous", color: consts_1.tutorialColors.buttonColor, disabled: isStartStep, icon: "falArrowLeft", onClick: () => setActiveStep(activeStep - 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" }), (0, jsx_runtime_1.jsx)(index_1.Box, { className: "vuiTutorialStepDots", children: (_b = steps === null || steps === void 0 ? void 0 : steps.map) === null || _b === void 0 ? void 0 : _b.call(steps, s => ((0, jsx_runtime_1.jsx)(index_1.Icon, { color: s.key === activeStep ? consts_1.tutorialColors.color : 'darkBlue.30', cursor: "pointer", hoverColor: consts_1.tutorialColors.buttonColor, name: "cusDotFull", onClick: () => setActiveStep(s.key) }, s.key))) }), (0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "next", color: consts_1.tutorialColors.buttonColor, disabled: isFinalStep, icon: "falArrowRight", onClick: () => setActiveStep(activeStep + 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" })] }), (showSkipButton || isFinalStep || !!onAction) && ((0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", children: [showSkipButton && !isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { mr: 2, onClick: onDismiss, variant: "primaryLight", children: "Skip" })), isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { mr: 2, onClick: onFinish, variant: "primaryLight", children: "Finish" })), !!onAction && ((0, jsx_runtime_1.jsx)(index_1.Button, { mr: 9, onClick: onAction, variant: "primaryLight", children: actionLabel }))] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(index_1.Card, { bg: consts_1.tutorialColors.bg, className: className, color: consts_1.tutorialColors.color, column: true, justifyContent: "space-between", minH: 400, p: 2, pt: 1, w: 580, children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { alignContent: "center", alignItems: "center", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", minH: 48, row: true, style: { WebkitFlexGrow: '0' }, children: [(0, jsx_runtime_1.jsx)(index_1.H4, { color: consts_1.tutorialColors.color, children: title }), !isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "close", icon: "uiTimes", onClick: onDismiss, scale: 2, variant: "tertiaryLight" }))] }), (0, jsx_runtime_1.jsx)(index_1.Box, { flex: 5, row: true, children: (_a = steps === null || steps === void 0 ? void 0 : steps.map) === null || _a === void 0 ? void 0 : _a.call(steps, s => ((0, jsx_runtime_1.jsx)(tutorialStep_1.TutorialStep, { active: s.key === activeStep, content: s.step.content, readMoreLink: s.step.readMoreLink, title: s.step.title }, s.step.title))) }), (0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", mt: 0, children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", w: "-webkit-fill-available", children: [(0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "previous", color: consts_1.tutorialColors.buttonColor, disabled: isStartStep, icon: "uiArrowLeft", onClick: () => setActiveStep(activeStep - 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" }), (0, jsx_runtime_1.jsx)(index_1.Box, { className: "vuiTutorialStepDots", children: (_b = steps === null || steps === void 0 ? void 0 : steps.map) === null || _b === void 0 ? void 0 : _b.call(steps, s => ((0, jsx_runtime_1.jsx)(index_1.Icon, { color: s.key === activeStep ? consts_1.tutorialColors.color : 'darkBlue.30', cursor: "pointer", hoverColor: consts_1.tutorialColors.buttonColor, name: "uiDotFull", onClick: () => setActiveStep(s.key) }, s.key))) }), (0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "next", color: consts_1.tutorialColors.buttonColor, disabled: isFinalStep, icon: "uiArrowRight", onClick: () => setActiveStep(activeStep + 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" })] }), (showSkipButton || isFinalStep || !!onAction) && ((0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", children: [showSkipButton && !isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { mr: 2, onClick: onDismiss, variant: "primaryLight", children: "Skip" })), isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { mr: 2, onClick: onFinish, variant: "primaryLight", children: "Finish" })), !!onAction && ((0, jsx_runtime_1.jsx)(index_1.Button, { mr: 9, onClick: onAction, variant: "primaryLight", children: actionLabel }))] }))] })] }));
 }
 TutorialCard.displayName = 'TutorialCard';
 //# sourceMappingURL=tutorialCard.js.map

package/dist/cjs/tutorial/tutorialCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.js","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"tutorialCard.js","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/utils/index.d.ts

@@ -8,6 +8,7 @@ export * from './function';
 export * from './number';
 export * from './object';
 export * from './react';
+export * from './string';
 export * from './styles';
 export type * from './types';
 export * from './uid';

package/dist/cjs/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,mBAAmB,SAAS,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,mBAAmB,SAAS,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA"}

package/dist/cjs/utils/index.js

@@ -24,6 +24,7 @@ __exportStar(require("./function"), exports);
 __exportStar(require("./number"), exports);
 __exportStar(require("./object"), exports);
 __exportStar(require("./react"), exports);
+__exportStar(require("./string"), exports);
 __exportStar(require("./styles"), exports);
 __exportStar(require("./uid"), exports);
 __exportStar(require("./window"), exports);

package/dist/cjs/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAuB;AACvB,8CAA2B;AAC3B,2CAAwB;AACxB,0CAAuB;AACvB,wCAAqB;AACrB,+CAA4B;AAC5B,6CAA0B;AAC1B,2CAAwB;AACxB,2CAAwB;AACxB,0CAAuB;AACvB,2CAAwB;AAExB,wCAAqB;AACrB,2CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAuB;AACvB,8CAA2B;AAC3B,2CAAwB;AACxB,0CAAuB;AACvB,wCAAqB;AACrB,+CAA4B;AAC5B,6CAA0B;AAC1B,2CAAwB;AACxB,2CAAwB;AACxB,0CAAuB;AACvB,2CAAwB;AACxB,2CAAwB;AAExB,wCAAqB;AACrB,2CAAwB"}

package/dist/cjs/utils/string.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Normalizes a string to be used as an identifier
+ * - Converts to lowercase
+ * - Replaces spaces and special characters with hyphens
+ * - Removes consecutive hyphens
+ * - Trims leading/trailing hyphens
+ */
+export declare const normalizeToId: (str: string) => string;
+/**
+ * Generates a menu item ID from title and level
+ */
+export declare const generateMenuItemId: (title: string, level?: number) => string;
+//# sourceMappingURL=string.d.ts.map

package/dist/cjs/utils/string.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../../src/utils/string.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,MAO3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,EAAE,QAAO,MAAU,KAAG,MAGrE,CAAA"}

package/dist/cjs/utils/string.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateMenuItemId = exports.normalizeToId = void 0;
+/**
+ * Normalizes a string to be used as an identifier
+ * - Converts to lowercase
+ * - Replaces spaces and special characters with hyphens
+ * - Removes consecutive hyphens
+ * - Trims leading/trailing hyphens
+ */
+const normalizeToId = (str) => {
+    return str
+        .toLowerCase()
+        .replace(/\s+/g, '-') // Replace spaces with hyphens
+        .replace(/[^a-z0-9-]/g, '-') // Replace special characters with hyphens
+        .replace(/-+/g, '-') // Replace consecutive hyphens with single hyphen
+        .replace(/^-+|-+$/g, ''); // Remove leading and trailing hyphens
+};
+exports.normalizeToId = normalizeToId;
+/**
+ * Generates a menu item ID from title and level
+ */
+const generateMenuItemId = (title, level = 0) => {
+    const normalizedTitle = (0, exports.normalizeToId)(title);
+    return normalizedTitle ? `${normalizedTitle}-${level}` : `item-${level}`;
+};
+exports.generateMenuItemId = generateMenuItemId;
+//# sourceMappingURL=string.js.map

package/dist/cjs/utils/string.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.js","sourceRoot":"","sources":["../../../src/utils/string.ts"],"names":[],"mappings":";;;AAAA;;;;;;GAMG;AACI,MAAM,aAAa,GAAG,CAAC,GAAW,EAAU,EAAE;IACnD,OAAO,GAAG;SACP,WAAW,EAAE;SACb,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,8BAA8B;SACnD,OAAO,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,0CAA0C;SACtE,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,iDAAiD;SACrE,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA,CAAC,sCAAsC;AACnE,CAAC,CAAA;AAPY,QAAA,aAAa,iBAOzB;AAED;;GAEG;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,QAAgB,CAAC,EAAU,EAAE;IAC7E,MAAM,eAAe,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAA;IAC5C,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,EAAE,CAAA;AAC1E,CAAC,CAAA;AAHY,QAAA,kBAAkB,sBAG9B"}

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

@@ -7,6 +7,17 @@ declare const _default: {
     };
     parts: string[];
     sizes: {
+        xxs: {
+            container: {
+                borderRadius: string;
+                fontSize: string;
+                h: number;
+                spaceX: number;
+            };
+            icon: {
+                size: string;
+            };
+        };
         xs: {
             container: {
                 borderRadius: string;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/badge/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAmGE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCpB,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/badge/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA8GE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCpB,wBAMC"}

package/dist/esm/badge/theme.js

@@ -6,6 +6,17 @@ const defaultProps = {
 };
 const parts = ['container', 'icon', 'text'];
 const sizes = {
+    xxs: {
+        container: {
+            borderRadius: 'lg',
+            fontSize: 'sm',
+            h: 16,
+            spaceX: 2,
+        },
+        icon: {
+            size: 'xs',
+        },
+    },
     xs: {
         container: {
             borderRadius: 'lg',

package/dist/esm/badge/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/badge/theme.ts"],"names":[],"mappings":"AAAA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,iBAAiB;IAC1B,UAAU,EAAE,QAAQ;CACrB,CAAA;AAED,MAAM,KAAK,GAAG,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAE3C,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE;QACF,SAAS,EAAE;YACT,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI;YACd,CAAC,EAAE,EAAE;YACL,MAAM,EAAE,CAAC;SACV;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,EAAE,EAAE;QACF,SAAS,EAAE;YACT,QAAQ,EAAE,IAAI;YACd,CAAC,EAAE,EAAE;YACL,MAAM,EAAE,CAAC;SACV;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,EAAE,EAAE;QACF,SAAS,EAAE;YACT,QAAQ,EAAE,IAAI;YACd,CAAC,EAAE,EAAE;YACL,MAAM,EAAE,CAAC;SACV;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,EAAE,EAAE;QACF,SAAS,EAAE;YACT,QAAQ,EAAE,IAAI;YACd,CAAC,EAAE,EAAE;YACL,MAAM,EAAE,CAAC;SACV;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;CACF,CAAA;AAED,MAAM,QAAQ,GAAG;IACf,eAAe,EAAE;QACf,SAAS,EAAE;YACT,EAAE,EAAE,cAAc;YAClB,KAAK,EAAE,cAAc;YACrB,WAAW,EAAE,aAAa;SAC3B;KACF;IACD,WAAW,EAAE;QACX,SAAS,EAAE;YACT,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,UAAU;SAClB;KACF;IACD,UAAU,EAAE;QACV,SAAS,EAAE;YACT,EAAE,EAAE,YAAY;YAChB,KAAK,EAAE,cAAc;SACtB;KACF;IACD,WAAW,EAAE;QACX,SAAS,EAAE;YACT,EAAE,EAAE,YAAY;YAChB,KAAK,EAAE,YAAY;SACpB;KACF;IACD,SAAS,EAAE;QACT,SAAS,EAAE;YACT,EAAE,EAAE,cAAc;YAClB,KAAK,EAAE,cAAc;SACtB;KACF;IACD,YAAY,EAAE;QACZ,SAAS,EAAE;YACT,EAAE,EAAE,cAAc;YAClB,KAAK,EAAE,cAAc;SACtB;KACF;IACD,WAAW,EAAE;QACX,SAAS,EAAE;YACT,EAAE,EAAE,cAAc;YAClB,KAAK,EAAE,cAAc;SACtB;KACF;IAED,kBAAkB;IAClB,SAAS,EAAE;QACT,SAAS,EAAE;YACT,EAAE,EAAE,YAAY;YAChB,KAAK,EAAE,YAAY;SACpB;KACF;IAED,aAAa,EAAE;QACb,SAAS,EAAE;YACT,EAAE,EAAE,aAAa;YACjB,WAAW,EAAE,aAAa;YAC1B,KAAK,EAAE,OAAO;SACf;KACF;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,EAAE,EAAE,cAAc;YAClB,KAAK,EAAE,OAAO;SACf;KACF;IACD,WAAW,EAAE;QACX,SAAS,EAAE;YACT,EAAE,EAAE,cAAc;YAClB,KAAK,EAAE,cAAc;SACtB;KACF;IACD,UAAU,EAAE;QACV,SAAS,EAAE;YACT,EAAE,EAAE,cAAc;YAClB,KAAK,EAAE,OAAO;SACf;KACF;CACF,CAAA;AAED,eAAe;IACb,SAAS;IACT,YAAY;IACZ,KAAK;IACL,KAAK;IACL,QAAQ;CACT,CAAA"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/badge/theme.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAYtB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAmJb,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG;IAC1C,IAAI,EAAE,OAAO,UAAU,CAAA;IACvB,IAAI,EAAE,OAAO,UAAU,CAAA;CACxB,CAAA;AAMD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAyBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAuBtB,CAAA;AAoJD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EA6Jb,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG;IAC1C,IAAI,EAAE,OAAO,UAAU,CAAA;IACvB,IAAI,EAAE,OAAO,UAAU,CAAA;CACxB,CAAA;AAMD,eAAe,MAAM,CAAA"}

package/dist/esm/button/button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useMemo } from 'react';
+import { Fragment, useMemo, useCallback } from 'react';
 import { useButtonGroupContext } from '../buttonGroup/context';
 import { styled, useStyleConfig, vui } from '../core';
 import { activeClassName, cs, filterUndefined, isReactText, isString } from '../utils';
@@ -7,6 +7,13 @@ import ButtonIcon from './buttonIcon';
 import ButtonText from './buttonText';
 import { buttonStateMapping, loadingIconProps } from './consts';
 import { ButtonProvider } from './context';
+// Constants
+const DEFAULT_BORDER_WIDTH = 1;
+const DEFAULT_BOX_SHADOW = '2';
+const DEFAULT_DISABLED_OPACITY = 0.5;
+const BUTTON_TYPE = 'button';
+const FOCUS_RING_SIZE = 3;
+// Memoized styled components
 const ContentWrapper = styled.span `
   visibility: hidden;
 `;
@@ -30,7 +37,95 @@ export const ButtonBase = styled.buttonBox `
   transition-duration: fast;
   user-select: none;
   width: fit-content;
+
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight.vui-active:hover {
+    background-color: #d3eef8;
+    color: #003591;
+    border-color-left: #003591;
+  }
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark.vui-active:hover {
+    background-color: #003591;
+    color: #91ffba;
+    border-color-left: #91ffba;
+  }
 `;
+const useButtonStyles = (mergedProps, variant) => {
+    const styles = useStyleConfig('Button', { ...mergedProps, ...variant }) || {};
+    return useMemo(() => {
+        const container = styles.container || {};
+        const { borderWidth = DEFAULT_BORDER_WIDTH, h = 32, spaceX = 0, ...buttonStyles } = container;
+        return { styles, borderWidth, h, spaceX, buttonStyles };
+    }, [mergedProps, variant]);
+};
+// Utility function to extract numeric value from responsive or themed props
+const extractNumericValue = (value) => {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string') {
+        const parsed = parseInt(value, 10);
+        return isNaN(parsed) ? DEFAULT_BORDER_WIDTH : parsed;
+    }
+    return DEFAULT_BORDER_WIDTH;
+};
+const useSpacingProps = (borderWidthProp, borderWidth, spaceX, icon, iconLeft, iconRight, isLoading, isSplit) => {
+    return useMemo(() => {
+        const border = extractNumericValue(borderWidthProp) || borderWidth || DEFAULT_BORDER_WIDTH;
+        const spaceXItem = spaceX - border;
+        const spaceXText = spaceX * 2 - border;
+        return {
+            border,
+            iconLeftMr: `${spaceXItem + 1}px`,
+            iconRightMl: isSplit ? 'auto' : `${spaceXItem + 1}px`,
+            pl: `${icon || iconLeft || isLoading ? spaceXItem : spaceXText}px`,
+            pr: `${icon || iconRight ? spaceXItem : spaceXText}px`,
+        };
+    }, [borderWidthProp, borderWidth, spaceX, icon, iconLeft, iconRight, isLoading, isSplit]);
+};
+const useDisabledProps = (disabled, styles) => {
+    return useMemo(() => disabled
+        ? {
+            'aria-disabled': disabled,
+            disabledBg: styles?.container?.disabledBg ?? 'bg',
+            disabledBorderColor: styles?.container?.disabledBorderColor ?? 'borderColor',
+            disabledColor: styles?.container?.disabledColor ?? 'color',
+            hoverBg: styles?.container?.disabledBg ?? 'bg',
+            hoverBorderColor: styles?.container?.disabledBorderColor ?? 'borderColor',
+            hoverColor: styles?.container?.disabledColor ?? 'color',
+            activeBg: styles?.container?.disabledBg ?? 'bg',
+            cursor: 'not-allowed',
+            opacity: styles?.container?.disabledOpacity ?? DEFAULT_DISABLED_OPACITY,
+        }
+        : {}, [disabled, styles?.container]);
+};
+const useActiveProps = (isActive, styles) => {
+    return useMemo(() => isActive
+        ? filterUndefined({
+            bg: styles?.container?.activeBg,
+            borderBg: styles?.container?.activeBorderBg,
+            color: styles?.container?.activeColor,
+        })
+        : {}, [isActive, styles?.container]);
+};
+const useAliasedProps = (isRound, h, styles, isElevated, icon, hasState, isFullWidth) => {
+    return useMemo(() => filterUndefined({
+        borderRadius: isRound ? h / 2 : styles?.container?.borderRadius || 0,
+        boxShadow: isElevated ? DEFAULT_BOX_SHADOW : undefined,
+        minW: icon ? 0 : undefined,
+        pointerEvents: hasState ? 'none' : undefined,
+        w: isFullWidth ? '100%' : undefined,
+    }), [isRound, h, styles?.container?.borderRadius, isElevated, icon, hasState, isFullWidth]);
+};
+const useButtonClassName = (className, isActive, variantProp) => {
+    return useMemo(() => cs('vui-button', className, isActive && activeClassName, variantProp ? `vui-button-variant-${variantProp}` : undefined), [className, isActive, variantProp]);
+};
+const useIconRenderer = (icon, iconLeft, iconRight, isLoading, spacingProps, children, text, isTruncated) => {
+    return useMemo(() => ({
+        main: isString(icon) ? _jsx(ButtonIcon, { name: icon }) : icon,
+        left: isLoading ? (_jsx(ButtonIcon, { mr: spacingProps.iconLeftMr, ...loadingIconProps })) : isString(iconLeft) ? (_jsx(ButtonIcon, { mr: spacingProps.iconLeftMr, name: iconLeft })) : (iconLeft),
+        right: isString(iconRight) ? (_jsx(ButtonIcon, { ml: !children && !text ? 0 : spacingProps.iconRightMl, name: iconRight })) : (iconRight),
+        content: children ?? (isReactText(text) ? _jsx(ButtonText, { isTruncated, text }) : text),
+    }), [icon, iconLeft, iconRight, isLoading, spacingProps, children, text, isTruncated]);
+};
 /**
  * Triggers given actions on click. Supports multiple states, sizes and variants.
  *
@@ -42,57 +137,67 @@ export const Button = vui((props, ref) => {
     const buttonGroupProps = useButtonGroupContext();
     const mergedProps = { ...buttonGroupProps, ...props };
     const { borderWidth: borderWidthProp, children, className, colorScheme, disabled, dropDownIcon = 'falAngleDown', icon, iconLeft, iconRight: iconRightProp, isActive, isDropDown, isElevated, isFullWidth, isLoading, isRound, isSplit, isTruncated, size, state = '', stateMapping, text, title, variant: variantProp, ...rest } = mergedProps;
-    const hasState = Boolean(state) && state !== 'idle';
-    const states = { ...buttonStateMapping, ...stateMapping };
-    const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {};
-    const iconRight = isDropDown ? 'falAngleDown' : iconRightProp;
-    const variant = filterUndefined({
-        variant: states[state]?.variant ?? variantProp,
-    });
-    const styles = useStyleConfig('Button', { ...mergedProps, ...variant });
-    const { borderWidth, h, spaceX = 0, ...buttonStyles } = styles.container;
-    const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);
-    const Content = hasState ? ContentWrapper : Fragment;
-    // Apply more space for text and less space for icons
-    const border = borderWidthProp ?? borderWidth ?? 1;
-    const spaceXItem = spaceX - border;
-    const spaceXText = spaceX * 2 - border;
-    const iconLeftMr = spaceXItem + 1 + 'px';
-    const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
-    const pl = (icon || iconLeft || isLoading ? spaceXItem : spaceXText) + 'px';
-    const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
-    let ariaLabel = '';
-    if (title)
-        ariaLabel = title;
-    const isActiveProps = isActive
-        ? filterUndefined({
-            bg: styles?.container?.activeBg,
-            borderBg: styles?.container?.activeBorderBg,
-            color: styles?.container?.activeColor,
-        })
-        : {};
-    const disabledProps = disabled
-        ? {
-            'aria-disabled': disabled,
-            disabledBg: 'bg',
-            disabledBorderColor: 'borderColor',
-            disabledColor: 'color',
-            hoverBg: 'bg',
-            hoverBorderColor: 'borderColor',
-            hoverColor: 'color',
-            activeBg: 'bg',
-            cursor: 'not-allowed',
-            opacity: 0.5,
-        }
-        : {};
-    const aliasedProps = filterUndefined({
-        borderRadius: isRound ? h / 2 : styles?.container?.borderRadius || 0,
-        boxShadow: isElevated ? '2' : undefined,
-        minW: icon ? 0 : undefined,
-        pointerEvents: hasState ? 'none' : undefined,
-        w: isFullWidth ? '100%' : undefined,
-    });
-    return (_jsx(ButtonProvider, { value: context, children: _jsxs(ButtonBase, { borderWidth: border, className: cs('vui-button', className, isActive && activeClassName, variantProp ? `vui-button-variant-${variantProp}` : undefined), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: pr, ref: ref, title: title || ariaLabel, type: "button", variant: variant, ...buttonStyles, ...isActiveProps, ...disabledProps, ...aliasedProps, ...rest, children: [hasState && (_jsx(StateWrapper, { onClick: (e) => e.stopPropagation(), ...stateProps, children: _jsx(ButtonIcon, { m: "auto", ...stateIconProps }) })), _jsxs(Content, { children: [isString(icon) ? _jsx(ButtonIcon, { name: icon }) : icon, !icon && (_jsxs(_Fragment, { children: [isLoading ? (_jsx(ButtonIcon, { mr: iconLeftMr, ...loadingIconProps })) : isString(iconLeft) ? (_jsx(ButtonIcon, { mr: iconLeftMr, name: iconLeft })) : (iconLeft), children ?? (isReactText(text) ? _jsx(ButtonText, { isTruncated, text }) : text), isString(iconRight) ? (_jsx(ButtonIcon, { ml: !children && !text ? 0 : iconRightMl, name: iconRight })) : (iconRight)] }))] })] }) }));
+    // Memoized calculations
+    const hasState = useMemo(() => Boolean(state) && state !== 'idle', [state]);
+    const states = useMemo(() => ({ ...buttonStateMapping, ...stateMapping }), [stateMapping]);
+    const stateData = useMemo(() => states[state] ?? {}, [states, state]);
+    const { iconProps: stateIconProps, ...stateProps } = stateData;
+    const iconRight = useMemo(() => (isDropDown ? 'falAngleDown' : iconRightProp), [isDropDown, iconRightProp]);
+    const variant = useMemo(() => filterUndefined({
+        variant: stateData?.variant ?? variantProp,
+    }), [stateData?.variant, variantProp]);
+    // Custom hooks for optimization
+    const { styles, borderWidth, h, spaceX, buttonStyles } = useButtonStyles(mergedProps, variant);
+    const spacingProps = useSpacingProps(borderWidthProp, borderWidth, spaceX, icon, iconLeft, iconRight, isLoading ?? false, isSplit ?? false);
+    const disabledProps = useDisabledProps(disabled ?? false, styles);
+    const isActiveProps = useActiveProps(isActive ?? false, styles);
+    const aliasedProps = useAliasedProps(isRound ?? false, h, styles, isElevated ?? false, icon, hasState, isFullWidth ?? false);
+    const buttonClassName = useButtonClassName(className, isActive ?? false, variantProp);
+    const IconRenderer = useIconRenderer(icon, iconLeft, iconRight, isLoading ?? false, spacingProps, children, text, isTruncated ?? false);
+    // Memoized context value
+    const contextValue = useMemo(() => filterUndefined({ disabled, size, variant: variant.variant }), [disabled, size, variant.variant]);
+    // Memoized content wrapper
+    const Content = useMemo(() => (hasState ? ContentWrapper : Fragment), [hasState]);
+    // Memoized aria label
+    const ariaLabel = useMemo(() => title || '', [title]);
+    // Optimized event handler
+    const handleStateClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    // Memoized final props
+    const finalProps = useMemo(() => ({
+        borderWidth: spacingProps.border,
+        className: buttonClassName,
+        disabled,
+        focusRing: FOCUS_RING_SIZE,
+        h,
+        pl: spacingProps.pl,
+        pr: spacingProps.pr,
+        ref,
+        title: title || ariaLabel,
+        type: BUTTON_TYPE,
+        variant,
+        ...buttonStyles,
+        ...isActiveProps,
+        ...disabledProps,
+        ...aliasedProps,
+        ...rest,
+    }), [
+        spacingProps,
+        buttonClassName,
+        disabled,
+        h,
+        ref,
+        title,
+        ariaLabel,
+        variant,
+        buttonStyles,
+        isActiveProps,
+        disabledProps,
+        aliasedProps,
+        rest,
+    ]);
+    return (_jsx(ButtonProvider, { value: contextValue, children: _jsxs(ButtonBase, { ...finalProps, children: [hasState && (_jsx(StateWrapper, { onClick: handleStateClick, ...stateProps, children: _jsx(ButtonIcon, { m: "auto", ...stateIconProps }) })), _jsxs(Content, { children: [IconRenderer.main, !icon && (_jsxs(_Fragment, { children: [IconRenderer.left, IconRenderer.content, IconRenderer.right] }))] })] }) }));
 });
 Button.Icon = ButtonIcon;
 Button.Text = ButtonText;