@veracity/vui 4.1.0 → 5.0.0-alpha.0

package/dist/theme/foundations/index.d.ts

@@ -420,7 +420,7 @@ declare const _default: {
   };
   fonts: {
     readonly dnvDisplay: "'DNV Display'";
-    readonly gantari: "Gantari, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'";
+    readonly gantari: "Gantari, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Arial, Helvetica, sans-serif;";
     readonly mono: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;";
   };
   fontSizes: {
@@ -501,7 +501,30 @@ declare const _default: {
     none: string;
   };
   sizes: {};
-  spaces: {};
+  spaces: {
+    0: number;
+    0.5: string;
+    0.75: string;
+    1: string;
+    1.5: string;
+    2: string;
+    2.5: string;
+    3: string;
+    3.5: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+  };
   transformers: {
     border: (value: number | string, {
       props
@@ -516,6 +539,7 @@ declare const _default: {
     modal: number;
     toast: number;
     tooltip: number;
+    popover: number;
   };
 };
 //#endregion

package/dist/theme/foundations/index.js

@@ -45,5 +45,5 @@ var foundations_default = {
 
 //#endregion
 export { foundations_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=index.js.map

package/dist/theme/foundations/radii.js

@@ -10,5 +10,5 @@ var radii_default = {
 
 //#endregion
 export { radii_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=radii.js.map

package/dist/theme/foundations/ringWidths.js

@@ -3,5 +3,5 @@ var ringWidths_default = {};
 
 //#endregion
 export { ringWidths_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=ringWidths.js.map

package/dist/theme/foundations/screens.js

@@ -11,5 +11,5 @@ var screens_default = {
 
 //#endregion
 export { screens_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=screens.js.map

package/dist/theme/foundations/shadows.js

@@ -39,5 +39,5 @@ var shadows_default = {
 
 //#endregion
 export { shadows_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=shadows.js.map

package/dist/theme/foundations/sizes.js

@@ -3,5 +3,5 @@ var sizes_default = {};
 
 //#endregion
 export { sizes_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=sizes.js.map

package/dist/theme/foundations/spaces.d.ts

@@ -1,5 +1,33 @@
 //#region src/theme/foundations/spaces.d.ts
-declare const _default: {};
+/**
+ * Spacing scale — 4px base unit.
+ * Numeric prop values (e.g. mb={2}) resolve to the corresponding entry.
+ * Positional / sizing props (top, left, w, h) are unaffected — they use the `sizes` scale.
+ */
+declare const _default: {
+  0: number;
+  0.5: string;
+  0.75: string;
+  1: string;
+  1.5: string;
+  2: string;
+  2.5: string;
+  3: string;
+  3.5: string;
+  4: string;
+  5: string;
+  6: string;
+  7: string;
+  8: string;
+  9: string;
+  10: string;
+  11: string;
+  12: string;
+  14: string;
+  16: string;
+  20: string;
+  24: string;
+};
 //#endregion
 export { _default };
 

package/dist/theme/foundations/spaces.js

@@ -1,7 +1,35 @@
 //#region src/theme/foundations/spaces.ts
-var spaces_default = {};
+/**
+* Spacing scale — 4px base unit.
+* Numeric prop values (e.g. mb={2}) resolve to the corresponding entry.
+* Positional / sizing props (top, left, w, h) are unaffected — they use the `sizes` scale.
+*/
+var spaces_default = {
+	0: 0,
+	.5: "2px",
+	.75: "3px",
+	1: "4px",
+	1.5: "6px",
+	2: "8px",
+	2.5: "10px",
+	3: "12px",
+	3.5: "14px",
+	4: "16px",
+	5: "20px",
+	6: "24px",
+	7: "28px",
+	8: "32px",
+	9: "36px",
+	10: "40px",
+	11: "44px",
+	12: "48px",
+	14: "56px",
+	16: "64px",
+	20: "80px",
+	24: "96px"
+};
 
 //#endregion
 export { spaces_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=spaces.js.map

package/dist/theme/foundations/spaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"spaces.js","names":[],"sources":["../../../src/theme/foundations/spaces.ts"],"sourcesContent":["export default {}\n"],"mappings":";AAAA,qBAAe,EAAE"}
+{"version":3,"file":"spaces.js","names":[],"sources":["../../../src/theme/foundations/spaces.ts"],"sourcesContent":["/**\n * Spacing scale — 4px base unit.\n * Numeric prop values (e.g. mb={2}) resolve to the corresponding entry.\n * Positional / sizing props (top, left, w, h) are unaffected — they use the `sizes` scale.\n */\nexport default {\n  0: 0,\n  0.5: '2px',\n  0.75: '3px',\n  1: '4px',\n  1.5: '6px',\n  2: '8px',\n  2.5: '10px',\n  3: '12px',\n  3.5: '14px',\n  4: '16px',\n  5: '20px',\n  6: '24px',\n  7: '28px',\n  8: '32px',\n  9: '36px',\n  10: '40px',\n  11: '44px',\n  12: '48px',\n  14: '56px',\n  16: '64px',\n  20: '80px',\n  24: '96px',\n}\n"],"mappings":";;;;;;AAKA,qBAAe;CACb,GAAG;CACH,IAAK;CACL,KAAM;CACN,GAAG;CACH,KAAK;CACL,GAAG;CACH,KAAK;CACL,GAAG;CACH,KAAK;CACL,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL"}

package/dist/theme/foundations/timingFunctions.js

@@ -3,5 +3,5 @@ var timingFunctions_default = {};
 
 //#endregion
 export { timingFunctions_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=timingFunctions.js.map

package/dist/theme/foundations/transformers.js

@@ -14,5 +14,5 @@ var transformers_default = {
 
 //#endregion
 export { transformers_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=transformers.js.map

package/dist/theme/foundations/transforms.js

@@ -3,5 +3,5 @@ var transforms_default = {};
 
 //#endregion
 export { transforms_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=transforms.js.map

package/dist/theme/foundations/transitions.js

@@ -3,5 +3,5 @@ var transitions_default = {};
 
 //#endregion
 export { transitions_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=transitions.js.map

package/dist/theme/foundations/zIndices.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
   modal: number;
   toast: number;
   tooltip: number;
+  popover: number;
 };
 //#endregion
 export { _default };

package/dist/theme/foundations/zIndices.js

@@ -3,10 +3,11 @@ var zIndices_default = {
 	drawer: 1300,
 	modal: 1400,
 	toast: 1500,
-	tooltip: 1600
+	tooltip: 1600,
+	popover: 1700
 };
 
 //#endregion
 export { zIndices_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=zIndices.js.map

package/dist/theme/foundations/zIndices.js.map

@@ -1 +1 @@
-{"version":3,"file":"zIndices.js","names":[],"sources":["../../../src/theme/foundations/zIndices.ts"],"sourcesContent":["export default {\n  drawer: 1300,\n  modal: 1400,\n  toast: 1500,\n  tooltip: 1600,\n}\n"],"mappings":";AAAA,uBAAe;CACb,QAAQ;CACR,OAAO;CACP,OAAO;CACP,SAAS;CACV"}
+{"version":3,"file":"zIndices.js","names":[],"sources":["../../../src/theme/foundations/zIndices.ts"],"sourcesContent":["export default {\n  drawer: 1300,\n  modal: 1400,\n  toast: 1500,\n  tooltip: 1600,\n  popover: 1700,\n}\n"],"mappings":";AAAA,uBAAe;CACb,QAAQ;CACR,OAAO;CACP,OAAO;CACP,SAAS;CACT,SAAS;CACV"}

package/dist/theme/index.d.ts

@@ -0,0 +1,21 @@
+import { _default } from "./components.js";
+import { defaultTheme } from "./defaultTheme.js";
+import { Animation, Border, Color, Component, Elevation, Font, FontSize, FontWeight, GridTemplateColumn, GridTemplateRow, Radius, RingWidth, Screen, Shadow, Size, Space, ThemingProps, Transform, TransitionDuration, VuiTheme, VuiThemeDefaults, VuiThemeExtensions, ZIndex } from "./types.js";
+import { extendTheme } from "./extendTheme.js";
+import { _default as _default$1 } from "./foundations/index.js";
+import { _default as _default$2 } from "./foundations/animations.js";
+import { _default as _default$3 } from "./foundations/borders.js";
+import { _default as _default$4 } from "./foundations/colors.js";
+import { _default as _default$5 } from "./foundations/durations.js";
+import { _default as _default$6 } from "./foundations/fonts.js";
+import { _default as _default$7 } from "./foundations/fontSizes.js";
+import { _default as _default$8 } from "./foundations/fontWeights.js";
+import { _default as _default$9 } from "./foundations/radii.js";
+import { _default as _default$10 } from "./foundations/ringWidths.js";
+import { _default as _default$11 } from "./foundations/screens.js";
+import { _default as _default$12 } from "./foundations/shadows.js";
+import { _default as _default$13 } from "./foundations/sizes.js";
+import { _default as _default$14 } from "./foundations/spaces.js";
+import { _default as _default$15 } from "./foundations/transforms.js";
+import { _default as _default$16 } from "./foundations/transitions.js";
+import { _default as _default$17 } from "./foundations/zIndices.js";

package/dist/theme/themePlaceholder.js

@@ -14,5 +14,5 @@ var themePlaceholder_default = {
 
 //#endregion
 export { themePlaceholder_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=themePlaceholder.js.map

package/dist/toast/toast.js

@@ -44,5 +44,5 @@ var toast_default = memo(Toaster);
 
 //#endregion
 export { toast_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=toast.js.map

package/dist/toast/useToast.js

@@ -73,5 +73,5 @@ const useToast = () => {
 
 //#endregion
 export { defaultDuration, fastToastDuration, slowToastDuration, useToast };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=useToast.js.map

package/dist/tooltip/consts.js

@@ -8,5 +8,5 @@ const boxShadow = 2;
 
 //#endregion
 export { bg, borderRadius, boxShadow };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=consts.js.map

package/dist/tooltip/tooltip.js

@@ -99,5 +99,5 @@ Tooltip.displayName = "Tooltip";
 
 //#endregion
 export { Tooltip as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=tooltip.js.map

package/dist/tooltip/tooltipContent.js

@@ -23,5 +23,5 @@ TooltipContent.displayName = "TooltipContent";
 
 //#endregion
 export { TooltipContent };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=tooltipContent.js.map

package/dist/tree/context.js

@@ -5,5 +5,5 @@ const [TreeProvider, useTreeContext] = createContext({ isOptional: true });
 
 //#endregion
 export { TreeProvider, useTreeContext };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=context.js.map

package/dist/tree/theme.js

@@ -76,5 +76,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=theme.js.map

package/dist/tree/tree.js

@@ -99,5 +99,5 @@ Tree.displayName = "Tree";
 
 //#endregion
 export { TreeBase, Tree as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=tree.js.map

package/dist/tree/tree.types.d.ts

@@ -1,6 +1,7 @@
 import { PropsOf } from "../utils/types.js";
 import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
+import "../theme/index.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";

package/dist/tree/tree.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.types.d.ts","names":[],"sources":["../../src/tree/tree.types.ts"],"mappings":";;;;;;;;;;;;;;KASY,SAAA,GAAY,WAAA,GACtB,YAAA;kCAEE,YAAA,GAAe,UAAA;EAEf,YAAA,GAAe,QAAA;EAEf,UAAA,GAAa,QAAA,EAPL;EASR,KAAA,GAAQ,OAAA,OAAc,aAAA,MAAmB,GAAA,CAAI,OAAA;EAE7C,WAAA,IAAe,EAAA,EAAI,UAAA;AAAA;AAAA,KAGX,iBAAA,GAAoB,OAAA,MAAa,SAAA;AAAA,KAEjC,UAAA;AAAA,KAEA,iBAAA;EACV,EAAA,EAAI,UAAA;EACJ,SAAA;AAAA;AAAA,KAGU,aAAA,GAAgB,aAAA,GAC1B,YAAA;EACE,YAAA,GAAe,UAAA,EAdc;EAgB7B,eAAA,GAAkB,UAAA,EA1BpB;EA4BE,EAAA,EAAI,UAAA,EA1BW;EA4Bf,MAAA,YA1Be;EA4Bf,OAAA,YA1Ba;EA4Bb,OAAA,YA1BQ;EA4BR,YAAA,GAAe,QAAA,EA5B0B;EA8BzC,UAAA,GAAa,QAAA,EA5Bb;EA8BA,KAAA,GAAQ,OAAA,OAAc,aAAA;EACtB,QAAA,GAAW,SAAA,EA/BkB;EAiC7B,WAAA,YA9BQ;EAgCR,YAAA;EAEA,QAAA,YAlCkD;EAoClD,QAAA,YAlCkB;EAoClB,SAAA,GAAY,iBAAA,EApCM;EAsClB,YAAA,WApCQ;EAsCR,MAAA;EAEA,IAAA,EAAM,SAAA,EAvCR;EAyCE,QAAA,IAAY,KAAA,EAAO,iBAAA;EACnB,eAAA,IAAmB,EAAA,EAAI,UAAA;AAAA"}
+{"version":3,"file":"tree.types.d.ts","names":[],"sources":["../../src/tree/tree.types.ts"],"mappings":";;;;;;;;;;;;;;;KASY,SAAA,GAAY,WAAA,GACtB,YAAA;kCAEE,YAAA,GAAe,UAAA;EAEf,YAAA,GAAe,QAAA;EAEf,UAAA,GAAa,QAAA;EAEb,KAAA,GAAQ,OAAA,OAAc,aAAA,MAAmB,GAAA,CAAI,OAAA,EAT5B;EAWjB,WAAA,IAAe,EAAA,EAAI,UAAA;AAAA;AAAA,KAGX,iBAAA,GAAoB,OAAA,MAAa,SAAA;AAAA,KAEjC,UAAA;AAAA,KAEA,iBAAA;EACV,EAAA,EAAI,UAAA;EACJ,SAAA;AAAA;AAAA,KAGU,aAAA,GAAgB,aAAA,GAC1B,YAAA;EACE,YAAA,GAAe,UAAA,EAdc;EAgB7B,eAAA,GAAkB,UAAA,EA3BE;EA6BpB,EAAA,EAAI,UAAA,EA1BJ;EA4BA,MAAA,YA1BA;EA4BA,OAAA,YA1BA;EA4BA,OAAA,YA1BA;EA4BA,YAAA,GAAe,QAAA,EA5BO;EA8BtB,UAAA,GAAa,QAAA,EA9BgC;EAgC7C,KAAA,GAAQ,OAAA,OAAc,aAAA;EACtB,QAAA,GAAW,SAAA,EA/BI;EAiCf,WAAA,YAjC6B;EAmC7B,YAAA,YAhCyB;EAkCzB,QAAA,YAlC4B;EAoC5B,QAAA,YAlCQ;EAoCR,SAAA,GAAY,iBAAA;EAEZ,YAAA,WAtCkB;EAwClB,MAAA,WAtCyB;EAwCzB,IAAA,EAAM,SAAA,EAvCM;EAyCZ,QAAA,IAAY,KAAA,EAAO,iBAAA;EACnB,eAAA,IAAmB,EAAA,EAAI,UAAA;AAAA"}

package/dist/tree/treeIcon.js

@@ -22,5 +22,5 @@ TreeIcon.displayName = "TreeIcon";
 
 //#endregion
 export { TreeIcon as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=treeIcon.js.map

package/dist/tree/treeItem.js

@@ -126,5 +126,5 @@ TreeItem.displayName = "TreeItem";
 
 //#endregion
 export { TreeItemBase, TreeItem as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=treeItem.js.map

package/dist/tree/treeText.js

@@ -24,5 +24,5 @@ TreeText.displayName = "TreeText";
 
 //#endregion
 export { TreeText as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=treeText.js.map

package/dist/tree/useTreeState.js

@@ -14,5 +14,5 @@ const useTreeState = (activeItemId) => {
 
 //#endregion
 export { useTreeState };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=useTreeState.js.map

package/dist/tutorial/consts.js

@@ -7,5 +7,5 @@ const tutorialColors = {
 
 //#endregion
 export { tutorialColors };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=consts.js.map

package/dist/tutorial/tutorial.js

@@ -6,7 +6,7 @@ import { FloatingPortal, autoUpdate, offset, shift, useFloating } from "@floatin
 
 //#region src/tutorial/tutorial.tsx
 /** Popover Tutorial is used to display information about a new, or existing feature. */
-function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, placement = "right", showSkipButton, isVisible = true, includeFinalPage = true, useContentTitle = false }) {
+function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, placement = "right", showSkipButton, isVisible = false, includeFinalPage = true, useContentTitle = false }) {
 	const onClose = (e) => {
 		if (e === "dismissed") onDismiss?.();
 		if (e === "finished") onFinish?.();
@@ -41,5 +41,5 @@ Tutorial.displayName = "Tutorial";
 
 //#endregion
 export { Tutorial };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=tutorial.js.map

package/dist/tutorial/tutorial.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorial.js","names":[],"sources":["../../src/tutorial/tutorial.tsx"],"sourcesContent":["import { autoUpdate, FloatingPortal, offset, shift, useFloating } from '@floating-ui/react'\nimport { cloneElement, isValidElement } from 'react'\n\nimport { cs } from '../utils'\nimport type { CloseEvent, TutorialProps } from './tutorial.types'\nimport { TutorialCard } from './tutorialCard'\n\n/** Popover Tutorial is used to display information about a new, or existing feature. */\nexport function Tutorial({\n  actionLabel,\n  children,\n  className,\n  onAction,\n  onDismiss,\n  onFinish,\n  steps,\n  title,\n  placement = 'right',\n  showSkipButton,\n  isVisible = true,\n  includeFinalPage = true,\n  useContentTitle = false,\n}: TutorialProps) {\n  const onClose = (e: CloseEvent) => {\n    if (e === 'dismissed') onDismiss?.()\n    if (e === 'finished') onFinish?.()\n  }\n\n  const { refs, floatingStyles } = useFloating({\n    open: isVisible,\n    placement,\n    middleware: [\n      offset({ mainAxis: 2, crossAxis: 0 }),\n      shift({ padding: 5 }),\n      // No flip - disabled in original\n    ],\n    whileElementsMounted: isVisible ? autoUpdate : undefined,\n  })\n\n  // Clone the child element to add ref\n  const childElement = isValidElement(children)\n    ? // eslint-disable-next-line react-hooks/refs\n      cloneElement(children as React.ReactElement<any>, {\n        // eslint-disable-next-line react-hooks/refs\n        ref: refs.setReference,\n      })\n    : children\n\n  return (\n    <>\n      {childElement}\n      {isVisible && (\n        <FloatingPortal>\n          {/* eslint-disable-next-line react-hooks/refs */}\n          <div ref={refs.setFloating} style={floatingStyles}>\n            <TutorialCard\n              actionLabel={actionLabel}\n              className={cs('vui-tutorial', className)}\n              onAction={onAction}\n              onDismiss={() => onClose('dismissed')}\n              onFinish={() => onClose('finished')}\n              showSkipButton={showSkipButton}\n              steps={steps}\n              title={title}\n              includeFinalPage={includeFinalPage}\n              useContentTitle={useContentTitle}\n            />\n          </div>\n        </FloatingPortal>\n      )}\n    </>\n  )\n}\n\nTutorial.displayName = 'Tutorial'\n"],"mappings":";;;;;;;;AAQA,SAAgB,SAAS,EACvB,aACA,UACA,WACA,UACA,WACA,UACA,OACA,OACA,YAAY,SACZ,gBACA,YAAY,MACZ,mBAAmB,MACnB,kBAAkB,SACF;CAChB,MAAM,WAAW,MAAkB;AACjC,MAAI,MAAM,YAAa,cAAa;AACpC,MAAI,MAAM,WAAY,aAAY;;CAGpC,MAAM,EAAE,MAAM,mBAAmB,YAAY;EAC3C,MAAM;EACN;EACA,YAAY,CACV,OAAO;GAAE,UAAU;GAAG,WAAW;GAAG,CAAC,EACrC,MAAM,EAAE,SAAS,GAAG,CAAC,CAEtB;EACD,sBAAsB,YAAY,aAAa;EAChD,CAAC;AAWF,QACE,8CATmB,eAAe,SAAS,GAEzC,aAAa,UAAqC,EAEhD,KAAK,KAAK,cACX,CAAC,GACF,UAKC,aACC,oBAAC,4BAEC,oBAAC;EAAI,KAAK,KAAK;EAAa,OAAO;YACjC,oBAAC;GACc;GACb,WAAW,GAAG,gBAAgB,UAAU;GAC9B;GACV,iBAAiB,QAAQ,YAAY;GACrC,gBAAgB,QAAQ,WAAW;GACnB;GACT;GACA;GACW;GACD;IACjB;GACE,GACS,IAElB;;AAIP,SAAS,cAAc"}
+{"version":3,"file":"tutorial.js","names":[],"sources":["../../src/tutorial/tutorial.tsx"],"sourcesContent":["import { autoUpdate, FloatingPortal, offset, shift, useFloating } from '@floating-ui/react'\nimport { cloneElement, isValidElement } from 'react'\n\nimport { cs } from '../utils'\nimport type { CloseEvent, TutorialProps } from './tutorial.types'\nimport { TutorialCard } from './tutorialCard'\n\n/** Popover Tutorial is used to display information about a new, or existing feature. */\nexport function Tutorial({\n  actionLabel,\n  children,\n  className,\n  onAction,\n  onDismiss,\n  onFinish,\n  steps,\n  title,\n  placement = 'right',\n  showSkipButton,\n  isVisible = false,\n  includeFinalPage = true,\n  useContentTitle = false,\n}: TutorialProps) {\n  const onClose = (e: CloseEvent) => {\n    if (e === 'dismissed') onDismiss?.()\n    if (e === 'finished') onFinish?.()\n  }\n\n  const { refs, floatingStyles } = useFloating({\n    open: isVisible,\n    placement,\n    middleware: [\n      offset({ mainAxis: 2, crossAxis: 0 }),\n      shift({ padding: 5 }),\n      // No flip - disabled in original\n    ],\n    whileElementsMounted: isVisible ? autoUpdate : undefined,\n  })\n\n  // Clone the child element to add ref\n  const childElement = isValidElement(children)\n    ? // eslint-disable-next-line react-hooks/refs\n      cloneElement(children as React.ReactElement<any>, {\n        // eslint-disable-next-line react-hooks/refs\n        ref: refs.setReference,\n      })\n    : children\n\n  return (\n    <>\n      {childElement}\n      {isVisible && (\n        <FloatingPortal>\n          {/* eslint-disable-next-line react-hooks/refs */}\n          <div ref={refs.setFloating} style={floatingStyles}>\n            <TutorialCard\n              actionLabel={actionLabel}\n              className={cs('vui-tutorial', className)}\n              onAction={onAction}\n              onDismiss={() => onClose('dismissed')}\n              onFinish={() => onClose('finished')}\n              showSkipButton={showSkipButton}\n              steps={steps}\n              title={title}\n              includeFinalPage={includeFinalPage}\n              useContentTitle={useContentTitle}\n            />\n          </div>\n        </FloatingPortal>\n      )}\n    </>\n  )\n}\n\nTutorial.displayName = 'Tutorial'\n"],"mappings":";;;;;;;;AAQA,SAAgB,SAAS,EACvB,aACA,UACA,WACA,UACA,WACA,UACA,OACA,OACA,YAAY,SACZ,gBACA,YAAY,OACZ,mBAAmB,MACnB,kBAAkB,SACF;CAChB,MAAM,WAAW,MAAkB;AACjC,MAAI,MAAM,YAAa,cAAa;AACpC,MAAI,MAAM,WAAY,aAAY;;CAGpC,MAAM,EAAE,MAAM,mBAAmB,YAAY;EAC3C,MAAM;EACN;EACA,YAAY,CACV,OAAO;GAAE,UAAU;GAAG,WAAW;GAAG,CAAC,EACrC,MAAM,EAAE,SAAS,GAAG,CAAC,CAEtB;EACD,sBAAsB,YAAY,aAAa;EAChD,CAAC;AAWF,QACE,8CATmB,eAAe,SAAS,GAEzC,aAAa,UAAqC,EAEhD,KAAK,KAAK,cACX,CAAC,GACF,UAKC,aACC,oBAAC,4BAEC,oBAAC;EAAI,KAAK,KAAK;EAAa,OAAO;YACjC,oBAAC;GACc;GACb,WAAW,GAAG,gBAAgB,UAAU;GAC9B;GACV,iBAAiB,QAAQ,YAAY;GACrC,gBAAgB,QAAQ,WAAW;GACnB;GACT;GACA;GACW;GACD;IACjB;GACE,GACS,IAElB;;AAIP,SAAS,cAAc"}

package/dist/tutorial/tutorialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.d.ts","names":[],"sources":["../../src/tutorial/tutorialCard.tsx"],"mappings":";;;;iBAOgB,YAAA,CAAA;EACd,WAAA;EACA,SAAA;EACA,KAAA;EACA,YAAA;EACA,KAAA,EAAO,UAAA;EACP,cAAA;EACA,QAAA;EACA,SAAA;EACA,QAAA;EACA,gBAAA;EACA;AAAA,GACC,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBAZJ,YAAA;EAAA,IAAY,WAAA;AAAA"}
+{"version":3,"file":"tutorialCard.d.ts","names":[],"sources":["../../src/tutorial/tutorialCard.tsx"],"mappings":";;;;iBAqBgB,YAAA,CAAA;EACd,WAAA;EACA,SAAA;EACA,KAAA;EACA,YAAA;EACA,KAAA,EAAO,UAAA;EACP,cAAA;EACA,QAAA;EACA,SAAA;EACA,QAAA;EACA,gBAAA;EACA;AAAA,GACC,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBAZJ,YAAA;EAAA,IAAY,WAAA;AAAA"}

package/dist/tutorial/tutorialCard.js

@@ -1,6 +1,8 @@
+import styled from "../core/styled.js";
 import Box from "../box/box.js";
 import Icon from "../icon/icon.js";
 import Button from "../button/button.js";
+import { DismissButton, IconButton } from "../button/buttons.js";
 import Card from "../card/card.js";
 import { H4 } from "../heading/headings.js";
 import { tutorialColors } from "./consts.js";
@@ -9,6 +11,18 @@ import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/tutorial/tutorialCard.tsx
+const TutorialHeader = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  flex: 0;
+  flex-grow: 0;
+  -webkit-flex-grow: 0;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  --vui-dismiss-fg: var(--vui-action-contrast-solid);
+`;
 function TutorialCard({ actionLabel = "Action", className, title, readMoreLink, steps: propsSteps = [], showSkipButton, onAction, onDismiss, onFinish, includeFinalPage, useContentTitle }) {
 	const [steps, setSteps] = useState([]);
 	const [activeStep, setActiveStep] = useState(0);
@@ -43,25 +57,16 @@ function TutorialCard({ actionLabel = "Action", className, title, readMoreLink,
 		py: 2,
 		w: 580,
 		children: [
-			/* @__PURE__ */ jsxs(Box, {
-				alignContent: "center",
-				alignItems: "center",
-				flex: 0,
-				flexDirection: "row",
-				flexGrow: 0,
-				justifyContent: "space-between",
-				minH: 48,
-				row: true,
-				style: { WebkitFlexGrow: "0" },
+			/* @__PURE__ */ jsxs(TutorialHeader, {
+				className: className + "__header",
 				children: [/* @__PURE__ */ jsx(H4, {
 					color: tutorialColors.color,
 					children: useContentTitle ? steps[activeStep]?.step?.title : title
-				}), !isFinalStep && /* @__PURE__ */ jsx(Button, {
+				}), !isFinalStep && /* @__PURE__ */ jsx(DismissButton, {
 					"aria-label": "close",
 					icon: "uiTimes",
 					onClick: onDismiss,
-					scale: 2,
-					variant: "tertiaryLight"
+					scale: 2
 				})]
 			}),
 			/* @__PURE__ */ jsx(Box, {
@@ -84,7 +89,7 @@ function TutorialCard({ actionLabel = "Action", className, title, readMoreLink,
 					justifyContent: "space-between",
 					w: "-webkit-fill-available",
 					children: [
-						/* @__PURE__ */ jsx(Button, {
+						/* @__PURE__ */ jsx(IconButton, {
 							"aria-label": "previous",
 							color: tutorialColors.buttonColor,
 							disabled: isStartStep,
@@ -92,8 +97,7 @@ function TutorialCard({ actionLabel = "Action", className, title, readMoreLink,
 							onClick: () => setActiveStep(activeStep - 1),
 							scale: 2,
 							transition: "none",
-							variant: "tertiaryLight",
-							w: "34"
+							variant: "tertiary"
 						}),
 						/* @__PURE__ */ jsx(Box, {
 							className: "vuiTutorialStepDots",
@@ -105,7 +109,7 @@ function TutorialCard({ actionLabel = "Action", className, title, readMoreLink,
 								onClick: () => setActiveStep(s.key)
 							}, s.key))
 						}),
-						/* @__PURE__ */ jsx(Button, {
+						/* @__PURE__ */ jsx(IconButton, {
 							"aria-label": "next",
 							color: tutorialColors.buttonColor,
 							disabled: isFinalStep,
@@ -113,8 +117,7 @@ function TutorialCard({ actionLabel = "Action", className, title, readMoreLink,
 							onClick: () => setActiveStep(activeStep + 1),
 							scale: 2,
 							transition: "none",
-							variant: "tertiaryLight",
-							w: "34"
+							variant: "tertiary"
 						})
 					]
 				}), (showSkipButton || isFinalStep || !!onAction) && /* @__PURE__ */ jsxs(Box, {
@@ -124,20 +127,24 @@ function TutorialCard({ actionLabel = "Action", className, title, readMoreLink,
 						showSkipButton && !isFinalStep && /* @__PURE__ */ jsx(Button, {
 							mx: 1,
 							onClick: onDismiss,
-							variant: "secondaryLight",
+							variant: "secondary",
+							intent: "contrast",
 							children: "Skip"
 						}),
 						isFinalStep && /* @__PURE__ */ jsx(Button, {
 							mx: 1,
 							onClick: onFinish,
-							variant: "primaryLight",
+							variant: "primary",
+							intent: "contrast",
+							minW: "82px",
 							children: "I got it"
 						}),
 						!!onAction && /* @__PURE__ */ jsx(Button, {
 							ml: 1,
 							mr: showSkipButton || isFinalStep ? 12 : 2,
 							onClick: onAction,
-							variant: "primaryLight",
+							variant: "primary",
+							intent: "contrast",
 							children: actionLabel
 						})
 					]
@@ -150,5 +157,5 @@ TutorialCard.displayName = "TutorialCard";
 
 //#endregion
 export { TutorialCard };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=tutorialCard.js.map

package/dist/tutorial/tutorialCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.js","names":[],"sources":["../../src/tutorial/tutorialCard.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { Box, Button, Card, H4, Icon } from '../index'\nimport { tutorialColors } from './consts'\nimport type { TutorialCardProps, TutorialDataStep, TutorialStepWrapper } from './tutorial.types'\nimport { TutorialStep } from './tutorialStep'\n\nexport function TutorialCard({\n  actionLabel = 'Action',\n  className,\n  title,\n  readMoreLink,\n  steps: propsSteps = [],\n  showSkipButton,\n  onAction,\n  onDismiss,\n  onFinish,\n  includeFinalPage,\n  useContentTitle,\n}: TutorialCardProps) {\n  const [steps, setSteps] = useState<TutorialStepWrapper[]>([])\n  const [activeStep, setActiveStep] = useState<number>(0)\n\n  useEffect(() => {\n    if (title && propsSteps.length) {\n      const s = propsSteps.map((step, key) => ({ active: false, step, key }))\n\n      const finalStep: TutorialDataStep = {\n        title: `Completed!`,\n        content: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`,\n      }\n\n      if (readMoreLink) finalStep.readMoreLink = readMoreLink\n\n      includeFinalPage ? setSteps([...s, { step: finalStep, key: propsSteps.length }]) : setSteps([...s])\n    }\n  }, [title, propsSteps])\n\n  const isStartStep = activeStep === 0\n  const isFinalStep = includeFinalPage ? activeStep === propsSteps.length : activeStep === propsSteps.length - 1\n\n  return (\n    <Card\n      bg={tutorialColors.bg}\n      className={className}\n      color={tutorialColors.color}\n      column\n      justifyContent=\"space-between\"\n      minH={400}\n      px={3}\n      py={2}\n      w={580}\n    >\n      <Box\n        alignContent=\"center\"\n        alignItems=\"center\"\n        flex={0}\n        flexDirection=\"row\"\n        flexGrow={0}\n        justifyContent=\"space-between\"\n        minH={48}\n        row\n        style={{ WebkitFlexGrow: '0' }}\n      >\n        <H4 color={tutorialColors.color}>{useContentTitle ? steps[activeStep]?.step?.title : title}</H4>\n        {!isFinalStep && (\n          <Button aria-label=\"close\" icon=\"uiTimes\" onClick={onDismiss} scale={2} variant=\"tertiaryLight\" />\n        )}\n      </Box>\n      <Box flex={5} row>\n        {steps?.map?.(s => (\n          <TutorialStep\n            active={s.key === activeStep}\n            content={s.step.content}\n            key={s.step.title}\n            readMoreLink={s.step.readMoreLink}\n            title={s.step.title}\n            useContentTitle={useContentTitle}\n          />\n        ))}\n      </Box>\n      <Box alignItems=\"center\" justifyContent=\"space-between\" mt={0}>\n        <Box alignItems=\"center\" justifyContent=\"space-between\" w=\"-webkit-fill-available\">\n          <Button\n            aria-label=\"previous\"\n            color={tutorialColors.buttonColor}\n            disabled={isStartStep}\n            icon=\"uiArrowLeft\"\n            onClick={() => setActiveStep(activeStep - 1)}\n            scale={2}\n            transition=\"none\"\n            variant=\"tertiaryLight\"\n            w=\"34\"\n          />\n          <Box className=\"vuiTutorialStepDots\">\n            {steps?.map?.(s => (\n              <Icon\n                color={s.key === activeStep ? tutorialColors.color : 'darkBlue.30'}\n                cursor=\"pointer\"\n                hoverColor={tutorialColors.buttonColor}\n                key={s.key}\n                name=\"uiDotFull\"\n                onClick={() => setActiveStep(s.key)}\n              />\n            ))}\n          </Box>\n          <Button\n            aria-label=\"next\"\n            color={tutorialColors.buttonColor}\n            disabled={isFinalStep}\n            icon=\"uiArrowRight\"\n            onClick={() => setActiveStep(activeStep + 1)}\n            scale={2}\n            transition=\"none\"\n            variant=\"tertiaryLight\"\n            w=\"34\"\n          />\n        </Box>\n        {(showSkipButton || isFinalStep || !!onAction) && (\n          <Box alignItems=\"center\" justifyContent=\"space-between\">\n            {showSkipButton && !isFinalStep && (\n              <Button mx={1} onClick={onDismiss} variant=\"secondaryLight\">\n                Skip\n              </Button>\n            )}\n            {isFinalStep && (\n              <Button mx={1} onClick={onFinish} variant=\"primaryLight\">\n                I got it\n              </Button>\n            )}\n            {!!onAction && (\n              <Button ml={1} mr={showSkipButton || isFinalStep ? 12 : 2} onClick={onAction} variant=\"primaryLight\">\n                {actionLabel}\n              </Button>\n            )}\n          </Box>\n        )}\n      </Box>\n    </Card>\n  )\n}\n\nTutorialCard.displayName = 'TutorialCard'\n"],"mappings":";;;;;;;;;;;AAOA,SAAgB,aAAa,EAC3B,cAAc,UACd,WACA,OACA,cACA,OAAO,aAAa,EAAE,EACtB,gBACA,UACA,WACA,UACA,kBACA,mBACoB;CACpB,MAAM,CAAC,OAAO,YAAY,SAAgC,EAAE,CAAC;CAC7D,MAAM,CAAC,YAAY,iBAAiB,SAAiB,EAAE;AAEvD,iBAAgB;AACd,MAAI,SAAS,WAAW,QAAQ;GAC9B,MAAM,IAAI,WAAW,KAAK,MAAM,SAAS;IAAE,QAAQ;IAAO;IAAM;IAAK,EAAE;GAEvE,MAAM,YAA8B;IAClC,OAAO;IACP,SAAS,GAAG,eAAe,iCAAiC;IAC7D;AAED,OAAI,aAAc,WAAU,eAAe;AAE3C,sBAAmB,SAAS,CAAC,GAAG,GAAG;IAAE,MAAM;IAAW,KAAK,WAAW;IAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,EAAE,CAAC;;IAEpG,CAAC,OAAO,WAAW,CAAC;CAEvB,MAAM,cAAc,eAAe;CACnC,MAAM,cAAc,mBAAmB,eAAe,WAAW,SAAS,eAAe,WAAW,SAAS;AAE7G,QACE,qBAAC;EACC,IAAI,eAAe;EACR;EACX,OAAO,eAAe;EACtB;EACA,gBAAe;EACf,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,GAAG;;GAEH,qBAAC;IACC,cAAa;IACb,YAAW;IACX,MAAM;IACN,eAAc;IACd,UAAU;IACV,gBAAe;IACf,MAAM;IACN;IACA,OAAO,EAAE,gBAAgB,KAAK;eAE9B,oBAAC;KAAG,OAAO,eAAe;eAAQ,kBAAkB,MAAM,aAAa,MAAM,QAAQ;MAAW,EAC/F,CAAC,eACA,oBAAC;KAAO,cAAW;KAAQ,MAAK;KAAU,SAAS;KAAW,OAAO;KAAG,SAAQ;MAAkB;KAEhG;GACN,oBAAC;IAAI,MAAM;IAAG;cACX,OAAO,OAAM,MACZ,oBAAC;KACC,QAAQ,EAAE,QAAQ;KAClB,SAAS,EAAE,KAAK;KAEhB,cAAc,EAAE,KAAK;KACrB,OAAO,EAAE,KAAK;KACG;OAHZ,EAAE,KAAK,MAIZ,CACF;KACE;GACN,qBAAC;IAAI,YAAW;IAAS,gBAAe;IAAgB,IAAI;eAC1D,qBAAC;KAAI,YAAW;KAAS,gBAAe;KAAgB,GAAE;;MACxD,oBAAC;OACC,cAAW;OACX,OAAO,eAAe;OACtB,UAAU;OACV,MAAK;OACL,eAAe,cAAc,aAAa,EAAE;OAC5C,OAAO;OACP,YAAW;OACX,SAAQ;OACR,GAAE;QACF;MACF,oBAAC;OAAI,WAAU;iBACZ,OAAO,OAAM,MACZ,oBAAC;QACC,OAAO,EAAE,QAAQ,aAAa,eAAe,QAAQ;QACrD,QAAO;QACP,YAAY,eAAe;QAE3B,MAAK;QACL,eAAe,cAAc,EAAE,IAAI;UAF9B,EAAE,IAGP,CACF;QACE;MACN,oBAAC;OACC,cAAW;OACX,OAAO,eAAe;OACtB,UAAU;OACV,MAAK;OACL,eAAe,cAAc,aAAa,EAAE;OAC5C,OAAO;OACP,YAAW;OACX,SAAQ;OACR,GAAE;QACF;;MACE,GACJ,kBAAkB,eAAe,CAAC,CAAC,aACnC,qBAAC;KAAI,YAAW;KAAS,gBAAe;;MACrC,kBAAkB,CAAC,eAClB,oBAAC;OAAO,IAAI;OAAG,SAAS;OAAW,SAAQ;iBAAiB;QAEnD;MAEV,eACC,oBAAC;OAAO,IAAI;OAAG,SAAS;OAAU,SAAQ;iBAAe;QAEhD;MAEV,CAAC,CAAC,YACD,oBAAC;OAAO,IAAI;OAAG,IAAI,kBAAkB,cAAc,KAAK;OAAG,SAAS;OAAU,SAAQ;iBACnF;QACM;;MAEP;KAEJ;;GACD;;AAIX,aAAa,cAAc"}
+{"version":3,"file":"tutorialCard.js","names":[],"sources":["../../src/tutorial/tutorialCard.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { styled } from '../core'\nimport { Box, Button, Card, DismissButton, H4, Icon, IconButton } from '../index'\nimport { tutorialColors } from './consts'\n\nconst TutorialHeader = styled(Box)`\n  display: flex;\n  flex-direction: row;\n  flex: 0;\n  flex-grow: 0;\n  -webkit-flex-grow: 0;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 48px;\n  --vui-dismiss-fg: var(--vui-action-contrast-solid);\n`\nimport type { TutorialCardProps, TutorialDataStep, TutorialStepWrapper } from './tutorial.types'\nimport { TutorialStep } from './tutorialStep'\n\nexport function TutorialCard({\n  actionLabel = 'Action',\n  className,\n  title,\n  readMoreLink,\n  steps: propsSteps = [],\n  showSkipButton,\n  onAction,\n  onDismiss,\n  onFinish,\n  includeFinalPage,\n  useContentTitle,\n}: TutorialCardProps) {\n  const [steps, setSteps] = useState<TutorialStepWrapper[]>([])\n  const [activeStep, setActiveStep] = useState<number>(0)\n\n  useEffect(() => {\n    if (title && propsSteps.length) {\n      const s = propsSteps.map((step, key) => ({ active: false, step, key }))\n\n      const finalStep: TutorialDataStep = {\n        title: `Completed!`,\n        content: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`,\n      }\n\n      if (readMoreLink) finalStep.readMoreLink = readMoreLink\n\n      includeFinalPage ? setSteps([...s, { step: finalStep, key: propsSteps.length }]) : setSteps([...s])\n    }\n  }, [title, propsSteps])\n\n  const isStartStep = activeStep === 0\n  const isFinalStep = includeFinalPage ? activeStep === propsSteps.length : activeStep === propsSteps.length - 1\n\n  return (\n    <Card\n      bg={tutorialColors.bg}\n      className={className}\n      color={tutorialColors.color}\n      column\n      justifyContent=\"space-between\"\n      minH={400}\n      px={3}\n      py={2}\n      w={580}\n    >\n      <TutorialHeader className={className + '__header'}>\n        <H4 color={tutorialColors.color}>{useContentTitle ? steps[activeStep]?.step?.title : title}</H4>\n        {!isFinalStep && <DismissButton aria-label=\"close\" icon=\"uiTimes\" onClick={onDismiss} scale={2} />}\n      </TutorialHeader>\n      <Box flex={5} row>\n        {steps?.map?.(s => (\n          <TutorialStep\n            active={s.key === activeStep}\n            content={s.step.content}\n            key={s.step.title}\n            readMoreLink={s.step.readMoreLink}\n            title={s.step.title}\n            useContentTitle={useContentTitle}\n          />\n        ))}\n      </Box>\n      <Box alignItems=\"center\" justifyContent=\"space-between\" mt={0}>\n        <Box alignItems=\"center\" justifyContent=\"space-between\" w=\"-webkit-fill-available\">\n          <IconButton\n            aria-label=\"previous\"\n            color={tutorialColors.buttonColor}\n            disabled={isStartStep}\n            icon=\"uiArrowLeft\"\n            onClick={() => setActiveStep(activeStep - 1)}\n            scale={2}\n            transition=\"none\"\n            variant=\"tertiary\"\n          />\n          <Box className=\"vuiTutorialStepDots\">\n            {steps?.map?.(s => (\n              <Icon\n                color={s.key === activeStep ? tutorialColors.color : 'darkBlue.30'}\n                cursor=\"pointer\"\n                hoverColor={tutorialColors.buttonColor}\n                key={s.key}\n                name=\"uiDotFull\"\n                onClick={() => setActiveStep(s.key)}\n              />\n            ))}\n          </Box>\n          <IconButton\n            aria-label=\"next\"\n            color={tutorialColors.buttonColor}\n            disabled={isFinalStep}\n            icon=\"uiArrowRight\"\n            onClick={() => setActiveStep(activeStep + 1)}\n            scale={2}\n            transition=\"none\"\n            variant=\"tertiary\"\n          />\n        </Box>\n        {(showSkipButton || isFinalStep || !!onAction) && (\n          <Box alignItems=\"center\" justifyContent=\"space-between\">\n            {showSkipButton && !isFinalStep && (\n              <Button mx={1} onClick={onDismiss} variant=\"secondary\" intent=\"contrast\">\n                Skip\n              </Button>\n            )}\n            {isFinalStep && (\n              <Button mx={1} onClick={onFinish} variant=\"primary\" intent=\"contrast\" minW=\"82px\">\n                I got it\n              </Button>\n            )}\n            {!!onAction && (\n              <Button\n                ml={1}\n                mr={showSkipButton || isFinalStep ? 12 : 2}\n                onClick={onAction}\n                variant=\"primary\"\n                intent=\"contrast\"\n              >\n                {actionLabel}\n              </Button>\n            )}\n          </Box>\n        )}\n      </Box>\n    </Card>\n  )\n}\n\nTutorialCard.displayName = 'TutorialCard'\n"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,iBAAiB,OAAO,IAAI;;;;;;;;;;;;AAelC,SAAgB,aAAa,EAC3B,cAAc,UACd,WACA,OACA,cACA,OAAO,aAAa,EAAE,EACtB,gBACA,UACA,WACA,UACA,kBACA,mBACoB;CACpB,MAAM,CAAC,OAAO,YAAY,SAAgC,EAAE,CAAC;CAC7D,MAAM,CAAC,YAAY,iBAAiB,SAAiB,EAAE;AAEvD,iBAAgB;AACd,MAAI,SAAS,WAAW,QAAQ;GAC9B,MAAM,IAAI,WAAW,KAAK,MAAM,SAAS;IAAE,QAAQ;IAAO;IAAM;IAAK,EAAE;GAEvE,MAAM,YAA8B;IAClC,OAAO;IACP,SAAS,GAAG,eAAe,iCAAiC;IAC7D;AAED,OAAI,aAAc,WAAU,eAAe;AAE3C,sBAAmB,SAAS,CAAC,GAAG,GAAG;IAAE,MAAM;IAAW,KAAK,WAAW;IAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,EAAE,CAAC;;IAEpG,CAAC,OAAO,WAAW,CAAC;CAEvB,MAAM,cAAc,eAAe;CACnC,MAAM,cAAc,mBAAmB,eAAe,WAAW,SAAS,eAAe,WAAW,SAAS;AAE7G,QACE,qBAAC;EACC,IAAI,eAAe;EACR;EACX,OAAO,eAAe;EACtB;EACA,gBAAe;EACf,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,GAAG;;GAEH,qBAAC;IAAe,WAAW,YAAY;eACrC,oBAAC;KAAG,OAAO,eAAe;eAAQ,kBAAkB,MAAM,aAAa,MAAM,QAAQ;MAAW,EAC/F,CAAC,eAAe,oBAAC;KAAc,cAAW;KAAQ,MAAK;KAAU,SAAS;KAAW,OAAO;MAAK;KACnF;GACjB,oBAAC;IAAI,MAAM;IAAG;cACX,OAAO,OAAM,MACZ,oBAAC;KACC,QAAQ,EAAE,QAAQ;KAClB,SAAS,EAAE,KAAK;KAEhB,cAAc,EAAE,KAAK;KACrB,OAAO,EAAE,KAAK;KACG;OAHZ,EAAE,KAAK,MAIZ,CACF;KACE;GACN,qBAAC;IAAI,YAAW;IAAS,gBAAe;IAAgB,IAAI;eAC1D,qBAAC;KAAI,YAAW;KAAS,gBAAe;KAAgB,GAAE;;MACxD,oBAAC;OACC,cAAW;OACX,OAAO,eAAe;OACtB,UAAU;OACV,MAAK;OACL,eAAe,cAAc,aAAa,EAAE;OAC5C,OAAO;OACP,YAAW;OACX,SAAQ;QACR;MACF,oBAAC;OAAI,WAAU;iBACZ,OAAO,OAAM,MACZ,oBAAC;QACC,OAAO,EAAE,QAAQ,aAAa,eAAe,QAAQ;QACrD,QAAO;QACP,YAAY,eAAe;QAE3B,MAAK;QACL,eAAe,cAAc,EAAE,IAAI;UAF9B,EAAE,IAGP,CACF;QACE;MACN,oBAAC;OACC,cAAW;OACX,OAAO,eAAe;OACtB,UAAU;OACV,MAAK;OACL,eAAe,cAAc,aAAa,EAAE;OAC5C,OAAO;OACP,YAAW;OACX,SAAQ;QACR;;MACE,GACJ,kBAAkB,eAAe,CAAC,CAAC,aACnC,qBAAC;KAAI,YAAW;KAAS,gBAAe;;MACrC,kBAAkB,CAAC,eAClB,oBAAC;OAAO,IAAI;OAAG,SAAS;OAAW,SAAQ;OAAY,QAAO;iBAAW;QAEhE;MAEV,eACC,oBAAC;OAAO,IAAI;OAAG,SAAS;OAAU,SAAQ;OAAU,QAAO;OAAW,MAAK;iBAAO;QAEzE;MAEV,CAAC,CAAC,YACD,oBAAC;OACC,IAAI;OACJ,IAAI,kBAAkB,cAAc,KAAK;OACzC,SAAS;OACT,SAAQ;OACR,QAAO;iBAEN;QACM;;MAEP;KAEJ;;GACD;;AAIX,aAAa,cAAc"}

package/dist/tutorial/tutorialStep.js

@@ -20,5 +20,5 @@ TutorialStep.displayName = "TutorialStep";
 
 //#endregion
 export { TutorialStep };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=tutorialStep.js.map

package/dist/utils/array.js

@@ -18,5 +18,5 @@ function toggleItem(array, item) {
 
 //#endregion
 export { compareBy, toggleItem };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=array.js.map

package/dist/utils/assertion.js

@@ -32,5 +32,5 @@ function isString(value) {
 
 //#endregion
 export { isArray, isFunction, isJsx, isNumber, isObject, isReactText, isString };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=assertion.js.map