@veracity/vui 5.1.1 → 5.2.0-alpha.395258.2606090726

package/dist/theme/foundations/radii.js

@@ -14,5 +14,5 @@ var radii_default = {
 
 //#endregion
 export { radii_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=sizes.js.map

package/dist/theme/foundations/spaces.js

@@ -31,5 +31,5 @@ var spaces_default = {
 
 //#endregion
 export { spaces_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=spaces.js.map

package/dist/theme/foundations/timingFunctions.js

@@ -3,5 +3,5 @@ var timingFunctions_default = {};
 
 //#endregion
 export { timingFunctions_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=transformers.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"transformers.js","names":[],"sources":["../../../src/theme/foundations/transformers.ts"],"sourcesContent":["import { getColor } from '@xstyled/system'\n\nexport default {\n  border: (value: number | string, { props }: any) => {\n    if (typeof value === 'number') return `${value}px solid`\n\n    const values = value.split(' ')\n    const [width, style = '', color] = values\n    const colorValue = getColor(color)(props) ?? ''\n\n    return `${width} ${style} ${colorValue}`\n  },\n  space: (value: string | number) => {\n    return typeof value === 'string' ? value : `${value * 8}px`\n  },\n}\n"],"mappings":";;;AAEA,2BAAe;CACb,SAAS,OAAwB,EAAE,YAAiB;EAClD,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,MAAM;EAG/C,MAAM,CAAC,OAAO,QAAQ,IAAI,SADX,MAAM,MAAM,GACa;EAGxC,OAAO,GAAG,MAAM,GAAG,MAAM,GAFN,SAAS,KAAK,EAAE,KAAK,KAAK;CAG/C;CACA,QAAQ,UAA2B;EACjC,OAAO,OAAO,UAAU,WAAW,QAAQ,GAAG,QAAQ,EAAE;CAC1D;AACF"}
+{"version":3,"file":"transformers.js","names":[],"sources":["../../../src/theme/foundations/transformers.ts"],"sourcesContent":["import { getColor } from '@xstyled/system'\n\nexport default {\n  border: (value: number | string, { props }: any) => {\n    if (typeof value === 'number') return `${value}px solid`\n\n    const values = value.split(' ')\n    const [width, style = '', color] = values\n    const colorValue = getColor(color)(props) ?? ''\n\n    return `${width} ${style} ${colorValue}`\n  },\n  space: (value: string | number) => {\n    return typeof value === 'string' ? value : `${value * 8}px`\n  },\n}\n"],"mappings":";;;AAEA,2BAAe;CACb,SAAS,OAAwB,EAAE,YAAiB;EAClD,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,MAAM;EAG/C,MAAM,CAAC,OAAO,QAAQ,IAAI,SADX,MAAM,MAAM,GACa;EAGxC,OAAO,GAAG,MAAM,GAAG,MAAM,GAFN,SAAS,KAAK,CAAC,CAAC,KAAK,KAAK;CAG/C;CACA,QAAQ,UAA2B;EACjC,OAAO,OAAO,UAAU,WAAW,QAAQ,GAAG,QAAQ,EAAE;CAC1D;AACF"}

package/dist/theme/foundations/transforms.js

@@ -3,5 +3,5 @@ var transforms_default = {};
 
 //#endregion
 export { transforms_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=transitions.js.map

package/dist/theme/foundations/zIndices.js

@@ -9,5 +9,5 @@ var zIndices_default = {
 
 //#endregion
 export { zIndices_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=zIndices.js.map

package/dist/theme/themePlaceholder.js

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

package/dist/theme/types.d.ts

@@ -27,7 +27,9 @@ type VuiThemeExtensions = object;
 type ThemingProps<ThemeComponent extends string = string> = {
   intent?: string;
   variant?: ThemeComponent extends Component ? keyof VuiTheme['components'][ThemeComponent]['variants'] : string;
-  size?: ThemeComponent extends keyof VuiTheme['components'] ? keyof VuiTheme['components'][ThemeComponent]['sizes'] : string;
+  size?: ThemeComponent extends keyof VuiTheme['components'] ? VuiTheme['components'][ThemeComponent] extends {
+    sizes: infer S;
+  } ? keyof S : string : string;
 };
 /** VUI theme definition object, containing default values and extensions */
 type VuiTheme = VuiThemeDefaults & VuiThemeExtensions;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/theme/types.ts"],"mappings":";;;KAEY,SAAA,SAAkB,QAAQ;AAAA,KAC1B,MAAA,SAAe,QAAQ;AAAA,KACvB,KAAA,SAAc,QAAQ;AAAA,KACtB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,SAAA,SAAkB,QAAQ;AAAA,KAC1B,IAAA,SAAa,QAAQ;AAAA,KACrB,QAAA,SAAiB,QAAQ;AAAA,KACzB,UAAA,SAAmB,QAAQ;AAAA,KAC3B,kBAAA,SAA2B,QAAQ;AAAA,KACnC,eAAA,SAAwB,QAAQ;AAAA,KAChC,MAAA,SAAe,QAAQ;AAAA,KACvB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,MAAA,SAAe,QAAQ;AAAA,KACvB,MAAA,SAAe,QAAQ;AAAA,KACvB,IAAA,SAAa,QAAQ;AAAA,KACrB,KAAA,SAAc,QAAQ;AAAA,KACtB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,kBAAA,SAA2B,QAAQ;AAAA,KACnC,MAAA,SAAe,QAAQ;AAAA,KAEvB,gBAAA,UAA0B,YAAY;;KAGtC,kBAAA;AAnBZ;AAAA,KAsBY,YAAA;EACV,MAAA;EACA,OAAA,GAAU,cAAA,SAAuB,SAAA,SAAkB,QAAA,eAAuB,cAAA;EAC1E,IAAA,GAAO,cAAA,eAA6B,QAAA,uBAC1B,QAAA,eAAuB,cAAA;AAAA;;KAMvB,QAAA,GAAW,gBAAA,GAAmB,kBAAkB"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/theme/types.ts"],"mappings":";;;KAEY,SAAA,SAAkB,QAAQ;AAAA,KAC1B,MAAA,SAAe,QAAQ;AAAA,KACvB,KAAA,SAAc,QAAQ;AAAA,KACtB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,SAAA,SAAkB,QAAQ;AAAA,KAC1B,IAAA,SAAa,QAAQ;AAAA,KACrB,QAAA,SAAiB,QAAQ;AAAA,KACzB,UAAA,SAAmB,QAAQ;AAAA,KAC3B,kBAAA,SAA2B,QAAQ;AAAA,KACnC,eAAA,SAAwB,QAAQ;AAAA,KAChC,MAAA,SAAe,QAAQ;AAAA,KACvB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,MAAA,SAAe,QAAQ;AAAA,KACvB,MAAA,SAAe,QAAQ;AAAA,KACvB,IAAA,SAAa,QAAQ;AAAA,KACrB,KAAA,SAAc,QAAQ;AAAA,KACtB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,kBAAA,SAA2B,QAAQ;AAAA,KACnC,MAAA,SAAe,QAAQ;AAAA,KAEvB,gBAAA,UAA0B,YAAY;;KAGtC,kBAAA;AAnBZ;AAAA,KAsBY,YAAA;EACV,MAAA;EACA,OAAA,GAAU,cAAA,SAAuB,SAAA,SAAkB,QAAA,eAAuB,cAAA;EAC1E,IAAA,GAAO,cAAA,eAA6B,QAAA,iBAChC,QAAA,eAAuB,cAAA;IAA0B,KAAA;EAAA,UACzC,CAAA;AAAA;;KAOF,QAAA,GAAW,gBAAA,GAAmB,kBAAkB"}

package/dist/toast/toast.d.ts

@@ -1,5 +1,5 @@
 //#region src/toast/toast.d.ts
-declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<() => import("react").JSX.Element>;
 //#endregion
 export { _default };
 

package/dist/toast/toast.js

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

package/dist/toast/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","names":[],"sources":["../../src/toast/useToast.tsx"],"mappings":";;;;cAQa,eAAA;AAAA,cACA,iBAAA;AAAA,cACA,iBAAA;AAAA,cAWA,QAAA;wBAG8B,YAAA;;mBA+BhC,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;oBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;AAAA"}
+{"version":3,"file":"useToast.d.ts","names":[],"sources":["../../src/toast/useToast.tsx"],"mappings":";;;;cAQa,eAAA;AAAA,cACA,iBAAA;AAAA,cACA,iBAAA;AAAA,cAWA,QAAA;wBAG8B,YAAA;;mBAqChC,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;oBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;AAAA"}

package/dist/toast/useToast.js

@@ -35,6 +35,8 @@ const useToast = () => {
 				text,
 				title,
 				align: "center",
+				role: "status",
+				ariaLive: "polite",
 				w: 1
 			})
 		});
@@ -73,5 +75,5 @@ const useToast = () => {
 
 //#endregion
 export { defaultDuration, fastToastDuration, slowToastDuration, useToast };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=useToast.js.map

package/dist/toast/useToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.js","names":[],"sources":["../../src/toast/useToast.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback } from 'react'\n\nimport { useVuiContext } from '../core/vuiProvider/context'\nimport { Notification } from '../notification'\nimport { uid } from '../utils'\nimport type { ToastDuration, ToastOptions, ToastSetup } from './toast.types'\n\nexport const defaultDuration = 'fast'\nexport const fastToastDuration = 4000\nexport const slowToastDuration = 8000\n\nconst setup: ToastSetup = {\n  options: {\n    duration: defaultDuration,\n  },\n  componentList: [],\n}\n\nconst getDurationTime = (duration: ToastDuration) => (duration === 'fast' ? fastToastDuration : slowToastDuration)\n\nexport const useToast = () => {\n  const { addToast, removeToast } = useVuiContext()\n\n  const showToast = useCallback((options?: ToastOptions): void => {\n    const id = options?.id ? options.id : uid('toast')\n    const { duration = setup.options.duration, status = 'info', action, icon, text, title } = options || {}\n\n    const toast = {\n      id,\n      component: (\n        <Notification\n          action={action}\n          animation=\"fadeDown\"\n          elevation={3}\n          icon={icon}\n          mt={{ md: 1, sm: '4px', xs: '4px' }}\n          onClose={() => removeToast(id)}\n          status={status}\n          text={text}\n          title={title}\n          align=\"center\"\n          w={1}\n        />\n      ),\n    }\n\n    addToast(toast)\n\n    if (duration && duration !== 'sticky') {\n      window.setTimeout(() => removeToast(id), getDurationTime(duration))\n    }\n  }, [])\n\n  const showInfo = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'info', duration }),\n    [showToast],\n  )\n\n  const showSuccess = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'success', duration }),\n    [showToast],\n  )\n\n  const showWarning = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'warning', duration }),\n    [showToast],\n  )\n\n  const showError = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'error', duration }),\n    [showToast],\n  )\n\n  const showLoading = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'loading', duration }),\n    [showToast],\n  )\n\n  return {\n    showToast,\n    hideToast: removeToast,\n    showInfo,\n    showSuccess,\n    showWarning,\n    showError,\n    showLoading,\n  }\n}\n"],"mappings":";;;;;;;AAQA,MAAa,kBAAkB;AAC/B,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AAEjC,MAAM,QAAoB;CACxB,SAAS,EACP,UAAU,gBACZ;CACA,eAAe,CAAC;AAClB;AAEA,MAAM,mBAAmB,aAA6B,aAAa,SAAS,oBAAoB;AAEhG,MAAa,iBAAiB;CAC5B,MAAM,EAAE,UAAU,gBAAgB,cAAc;CAEhD,MAAM,YAAY,aAAa,YAAiC;EAC9D,MAAM,KAAK,SAAS,KAAK,QAAQ,KAAK,IAAI,OAAO;EACjD,MAAM,EAAE,WAAW,MAAM,QAAQ,UAAU,SAAS,QAAQ,QAAQ,MAAM,MAAM,UAAU,WAAW,CAAC;EAqBtG,SAAS;GAlBP;GACA,WACE,oBAAC,cAAD;IACU;IACR,WAAU;IACV,WAAW;IACL;IACN,IAAI;KAAE,IAAI;KAAG,IAAI;KAAO,IAAI;IAAM;IAClC,eAAe,YAAY,EAAE;IACrB;IACF;IACC;IACP,OAAM;IACN,GAAG;GACJ;EAIQ,CAAC;EAEd,IAAI,YAAY,aAAa,UAC3B,OAAO,iBAAiB,YAAY,EAAE,GAAG,gBAAgB,QAAQ,CAAC;CAEtE,GAAG,CAAC,CAAC;CA2BL,OAAO;EACL;EACA,WAAW;EACX,UA5Be,aACd,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAQ;EAAS,CAAC,GAC5G,CAAC,SAAS,CA0BH;EACP,aAxBkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAsBA;EACV,aApBkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAkBA;EACV,WAhBgB,aACf,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAS;EAAS,CAAC,GAC7G,CAAC,SAAS,CAcF;EACR,aAZkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAUA;CACZ;AACF"}
+{"version":3,"file":"useToast.js","names":[],"sources":["../../src/toast/useToast.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback } from 'react'\n\nimport { useVuiContext } from '../core/vuiProvider/context'\nimport { Notification } from '../notification'\nimport { uid } from '../utils'\nimport type { ToastDuration, ToastOptions, ToastSetup } from './toast.types'\n\nexport const defaultDuration = 'fast'\nexport const fastToastDuration = 4000\nexport const slowToastDuration = 8000\n\nconst setup: ToastSetup = {\n  options: {\n    duration: defaultDuration,\n  },\n  componentList: [],\n}\n\nconst getDurationTime = (duration: ToastDuration) => (duration === 'fast' ? fastToastDuration : slowToastDuration)\n\nexport const useToast = () => {\n  const { addToast, removeToast } = useVuiContext()\n\n  const showToast = useCallback((options?: ToastOptions): void => {\n    const id = options?.id ? options.id : uid('toast')\n    const { duration = setup.options.duration, status = 'info', action, icon, text, title } = options || {}\n\n    const toast = {\n      id,\n      component: (\n        <Notification\n          action={action}\n          animation=\"fadeDown\"\n          elevation={3}\n          icon={icon}\n          mt={{ md: 1, sm: '4px', xs: '4px' }}\n          onClose={() => removeToast(id)}\n          status={status}\n          text={text}\n          title={title}\n          align=\"center\"\n          // Q7: Toasts pin role=status / aria-live=polite regardless of intent to preserve\n          // current SR behavior (the auto-mapping in Notification would otherwise upgrade\n          // warning/danger intents to role=alert / assertive). Full toast migration is a\n          // follow-up; this override keeps the existing user-perceived behavior intact.\n          role=\"status\"\n          ariaLive=\"polite\"\n          w={1}\n        />\n      ),\n    }\n\n    addToast(toast)\n\n    if (duration && duration !== 'sticky') {\n      window.setTimeout(() => removeToast(id), getDurationTime(duration))\n    }\n  }, [])\n\n  const showInfo = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'info', duration }),\n    [showToast],\n  )\n\n  const showSuccess = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'success', duration }),\n    [showToast],\n  )\n\n  const showWarning = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'warning', duration }),\n    [showToast],\n  )\n\n  const showError = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'error', duration }),\n    [showToast],\n  )\n\n  const showLoading = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'loading', duration }),\n    [showToast],\n  )\n\n  return {\n    showToast,\n    hideToast: removeToast,\n    showInfo,\n    showSuccess,\n    showWarning,\n    showError,\n    showLoading,\n  }\n}\n"],"mappings":";;;;;;;AAQA,MAAa,kBAAkB;AAC/B,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AAEjC,MAAM,QAAoB;CACxB,SAAS,EACP,UAAU,gBACZ;CACA,eAAe,CAAC;AAClB;AAEA,MAAM,mBAAmB,aAA6B,aAAa,SAAS,oBAAoB;AAEhG,MAAa,iBAAiB;CAC5B,MAAM,EAAE,UAAU,gBAAgB,cAAc;CAEhD,MAAM,YAAY,aAAa,YAAiC;EAC9D,MAAM,KAAK,SAAS,KAAK,QAAQ,KAAK,IAAI,OAAO;EACjD,MAAM,EAAE,WAAW,MAAM,QAAQ,UAAU,SAAS,QAAQ,QAAQ,MAAM,MAAM,UAAU,WAAW,CAAC;EA2BtG,SAAS;GAxBP;GACA,WACE,oBAAC,cAAD;IACU;IACR,WAAU;IACV,WAAW;IACL;IACN,IAAI;KAAE,IAAI;KAAG,IAAI;KAAO,IAAI;IAAM;IAClC,eAAe,YAAY,EAAE;IACrB;IACF;IACC;IACP,OAAM;IAKN,MAAK;IACL,UAAS;IACT,GAAG;GACJ;EAIQ,CAAC;EAEd,IAAI,YAAY,aAAa,UAC3B,OAAO,iBAAiB,YAAY,EAAE,GAAG,gBAAgB,QAAQ,CAAC;CAEtE,GAAG,CAAC,CAAC;CA2BL,OAAO;EACL;EACA,WAAW;EACX,UA5Be,aACd,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAQ;EAAS,CAAC,GAC5G,CAAC,SAAS,CA0BH;EACP,aAxBkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAsBA;EACV,aApBkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAkBA;EACV,WAhBgB,aACf,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAS;EAAS,CAAC,GAC7G,CAAC,SAAS,CAcF;EACR,aAZkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAUA;CACZ;AACF"}

package/dist/tooltip/consts.js

@@ -6,5 +6,5 @@ const bg = {
 
 //#endregion
 export { bg };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=consts.js.map

package/dist/tooltip/tooltip.d.ts

@@ -8,7 +8,7 @@ import { TooltipProps } from "./tooltip.types.js";
  *
  * */
 declare const Tooltip: {
-  (props: TooltipProps): import("react/jsx-runtime").JSX.Element;
+  (props: TooltipProps): import("react").JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../src/tooltip/tooltip.tsx"],"mappings":";;;;;AAsCA;;;;cAAa,OAAA;EAAA,QAAkB,YAAY,+BAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../src/tooltip/tooltip.tsx"],"mappings":";;;;;AAsCA;;;;cAAa,OAAA;EAAA,QAAkB,YAAY,mBAAA,GAAA,CAAA,OAAA"}

package/dist/tooltip/tooltip.js

@@ -105,5 +105,5 @@ Tooltip.displayName = "Tooltip";
 
 //#endregion
 export { Tooltip as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=tooltip.js.map

package/dist/tooltip/tooltipContent.js

@@ -24,5 +24,5 @@ TooltipContent.displayName = "TooltipContent";
 
 //#endregion
 export { TooltipContent };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=tree.js.map

package/dist/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":[],"sources":["../../src/tree/tree.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { Children, useEffect, useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { List } from '../list'\nimport { cs, filterUndefined } from '../utils'\nimport { TreeProvider } from './context'\nimport type { TreeItemId, TreeItemProps, TreeProps } from './tree.types'\nimport TreeIcon from './treeIcon'\nimport TreeItem from './treeItem'\nimport TreeText from './treeText'\nimport { useTreeState } from './useTreeState'\n\nexport const TreeBase = styled.divBox`\n  display: flex;\n  height: auto;\n  align-content: flex-start;\n  flex-direction: column;\n`\n\n/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */\nexport const Tree = vui<'div', TreeProps>((props, ref) => {\n  const { activeItemId, children, className, iconCollapse, iconExpand, items, onClickItem, size, variant, ...rest } =\n    props\n  const styles = useStyleConfig('Tree', props)\n\n  const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId)\n\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n\n  const iconCollapseInternal = iconCollapse ? iconCollapse : variant === 'default' ? 'falAngleRight' : 'falMinus'\n  const iconExpandInternal = iconExpand ? iconExpand : variant === 'default' ? 'falAngleDown' : 'falPlus'\n\n  const transformChildrenToItems = (children: any) => {\n    const t: TreeItemProps[] = []\n\n    if (children) {\n      // @ts-expect-error no idea why failing now\n      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TreeItemProps>) => {\n        if (child?.props?.text) {\n          let items: TreeItemProps[] = []\n\n          if (child.props.children) {\n            items = transformChildrenToItems(child.props.children) as unknown as TreeItemProps[]\n          }\n\n          t.push({\n            id: child.props.id,\n            text: child.props.text,\n            isActive: child.props.isActive,\n            items: child.props.items || items,\n            isCollapsed: child.props.isCollapsed,\n            disabled: child.props.disabled,\n            onClickTreeItem: onClickTreeItem,\n          } as unknown as TreeItemProps)\n        }\n      })\n    }\n\n    return t\n  }\n\n  useEffect(() => {\n    if (items) {\n      setItemsInternal(items as TreeItemProps[])\n      return\n    }\n\n    const t: TreeItemProps[] = []\n    if (children) {\n      const transformed = transformChildrenToItems(children) as unknown as TreeItemProps[]\n      t.push(...transformed)\n    }\n    setItemsInternal(t)\n    if (activeItemId !== undefined && t?.find((i: TreeItemProps) => i.id === activeItemId)) {\n      setActiveItemIndex(activeItemId)\n    }\n  }, [children, activeItemId])\n\n  const onClickTreeItem = (id: TreeItemId) => {\n    setActiveItemIndex(id)\n    if (onClickItem) {\n      onClickItem(id)\n    }\n  }\n\n  return (\n    <TreeProvider value={context}>\n      <TreeBase className={cs('vui-tree', className)} ref={ref} {...styles.container} {...rest}>\n        <List role=\"tree\" w={1}>\n          {itemsInternal?.map(({ id, isActive, ...props }, index: number) => {\n            return (\n              <TreeItem\n                activeItemIndex={activeItemIndex}\n                iconCollapse={iconCollapseInternal}\n                iconExpand={iconExpandInternal}\n                id={id}\n                isActive={isActive ? isActive : activeItemIndex ? activeItemIndex === id : false}\n                isFirstLevel={true}\n                key={id ?? index}\n                onClickTreeItem={onClickTreeItem}\n                {...props}\n              />\n            )\n          })}\n        </List>\n      </TreeBase>\n    </TreeProvider>\n  )\n}) as VuiComponent<'div', TreeProps> & {\n  Icon: typeof TreeIcon\n  Item: typeof TreeItem\n  Text: typeof TreeText\n}\n\nTree.Icon = TreeIcon\nTree.Item = TreeItem\nTree.Text = TreeText\nTree.displayName = 'Tree'\n\nexport default Tree\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAa,WAAW,OAAO,MAAM;;;;;;;AAQrC,MAAa,OAAO,KAAuB,OAAO,QAAQ;CACxD,MAAM,EAAE,cAAc,UAAU,WAAW,cAAc,YAAY,OAAO,aAAa,MAAM,SAAS,GAAG,SACzG;CACF,MAAM,SAAS,eAAe,QAAQ,KAAK;CAE3C,MAAM,EAAE,eAAe,kBAAkB,iBAAiB,uBAAuB,aAAa,YAAY;CAE1G,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAM;CAAQ,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC;CAEjF,MAAM,uBAAuB,eAAe,eAAe,YAAY,YAAY,kBAAkB;CACrG,MAAM,qBAAqB,aAAa,aAAa,YAAY,YAAY,iBAAiB;CAE9F,MAAM,4BAA4B,aAAkB;EAClD,MAAM,IAAqB,CAAC;EAE5B,IAAI,UAED,AAAC,SAAS,QAAQ,QAAQ,EAAqB,SAAS,UAAuC;GAC9F,IAAI,OAAO,OAAO,MAAM;IACtB,IAAI,QAAyB,CAAC;IAE9B,IAAI,MAAM,MAAM,UACd,QAAQ,yBAAyB,MAAM,MAAM,QAAQ;IAGvD,EAAE,KAAK;KACL,IAAI,MAAM,MAAM;KAChB,MAAM,MAAM,MAAM;KAClB,UAAU,MAAM,MAAM;KACtB,OAAO,MAAM,MAAM,SAAS;KAC5B,aAAa,MAAM,MAAM;KACzB,UAAU,MAAM,MAAM;KACL;IACnB,CAA6B;GAC/B;EACF,CAAC;EAGH,OAAO;CACT;CAEA,gBAAgB;EACd,IAAI,OAAO;GACT,iBAAiB,KAAwB;GACzC;EACF;EAEA,MAAM,IAAqB,CAAC;EAC5B,IAAI,UAAU;GACZ,MAAM,cAAc,yBAAyB,QAAQ;GACrD,EAAE,KAAK,GAAG,WAAW;EACvB;EACA,iBAAiB,CAAC;EAClB,IAAI,iBAAiB,UAAa,GAAG,MAAM,MAAqB,EAAE,OAAO,YAAY,GACnF,mBAAmB,YAAY;CAEnC,GAAG,CAAC,UAAU,YAAY,CAAC;CAE3B,MAAM,mBAAmB,OAAmB;EAC1C,mBAAmB,EAAE;EACrB,IAAI,aACF,YAAY,EAAE;CAElB;CAEA,OACE,oBAAC,cAAD;EAAc,OAAO;YACnB,oBAAC,UAAD;GAAU,WAAW,GAAG,YAAY,SAAS;GAAQ;GAAK,GAAI,OAAO;GAAW,GAAI;aAClF,oBAAC,MAAD;IAAM,MAAK;IAAO,GAAG;cAClB,eAAe,KAAK,EAAE,IAAI,UAAU,GAAG,SAAS,UAAkB;KACjE,OACE,oBAAC,UAAD;MACmB;MACjB,cAAc;MACd,YAAY;MACR;MACJ,UAAU,WAAW,WAAW,kBAAkB,oBAAoB,KAAK;MAC3E,cAAc;MAEG;MACjB,GAAI;KACL,GAHM,MAAM,KAGZ;IAEL,CAAC;GACG;EACE;CACE;AAElB,CAAC;AAMD,KAAK,OAAO;AACZ,KAAK,OAAO;AACZ,KAAK,OAAO;AACZ,KAAK,cAAc"}
+{"version":3,"file":"tree.js","names":[],"sources":["../../src/tree/tree.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { Children, useEffect, useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { List } from '../list'\nimport { cs, filterUndefined } from '../utils'\nimport { TreeProvider } from './context'\nimport type { TreeItemId, TreeItemProps, TreeProps } from './tree.types'\nimport TreeIcon from './treeIcon'\nimport TreeItem from './treeItem'\nimport TreeText from './treeText'\nimport { useTreeState } from './useTreeState'\n\nexport const TreeBase = styled.divBox`\n  display: flex;\n  height: auto;\n  align-content: flex-start;\n  flex-direction: column;\n`\n\n/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */\nexport const Tree = vui<'div', TreeProps>((props, ref) => {\n  const { activeItemId, children, className, iconCollapse, iconExpand, items, onClickItem, size, variant, ...rest } =\n    props\n  const styles = useStyleConfig('Tree', props)\n\n  const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId)\n\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n\n  const iconCollapseInternal = iconCollapse ? iconCollapse : variant === 'default' ? 'falAngleRight' : 'falMinus'\n  const iconExpandInternal = iconExpand ? iconExpand : variant === 'default' ? 'falAngleDown' : 'falPlus'\n\n  const transformChildrenToItems = (children: any) => {\n    const t: TreeItemProps[] = []\n\n    if (children) {\n      // @ts-expect-error no idea why failing now\n      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TreeItemProps>) => {\n        if (child?.props?.text) {\n          let items: TreeItemProps[] = []\n\n          if (child.props.children) {\n            items = transformChildrenToItems(child.props.children) as unknown as TreeItemProps[]\n          }\n\n          t.push({\n            id: child.props.id,\n            text: child.props.text,\n            isActive: child.props.isActive,\n            items: child.props.items || items,\n            isCollapsed: child.props.isCollapsed,\n            disabled: child.props.disabled,\n            onClickTreeItem: onClickTreeItem,\n          } as unknown as TreeItemProps)\n        }\n      })\n    }\n\n    return t\n  }\n\n  useEffect(() => {\n    if (items) {\n      setItemsInternal(items as TreeItemProps[])\n      return\n    }\n\n    const t: TreeItemProps[] = []\n    if (children) {\n      const transformed = transformChildrenToItems(children) as unknown as TreeItemProps[]\n      t.push(...transformed)\n    }\n    setItemsInternal(t)\n    if (activeItemId !== undefined && t?.find((i: TreeItemProps) => i.id === activeItemId)) {\n      setActiveItemIndex(activeItemId)\n    }\n  }, [children, activeItemId])\n\n  const onClickTreeItem = (id: TreeItemId) => {\n    setActiveItemIndex(id)\n    if (onClickItem) {\n      onClickItem(id)\n    }\n  }\n\n  return (\n    <TreeProvider value={context}>\n      <TreeBase className={cs('vui-tree', className)} ref={ref} {...styles.container} {...rest}>\n        <List role=\"tree\" w={1}>\n          {itemsInternal?.map(({ id, isActive, ...props }, index: number) => {\n            return (\n              <TreeItem\n                activeItemIndex={activeItemIndex}\n                iconCollapse={iconCollapseInternal}\n                iconExpand={iconExpandInternal}\n                id={id}\n                isActive={isActive ? isActive : activeItemIndex ? activeItemIndex === id : false}\n                isFirstLevel={true}\n                key={id ?? index}\n                onClickTreeItem={onClickTreeItem}\n                {...props}\n              />\n            )\n          })}\n        </List>\n      </TreeBase>\n    </TreeProvider>\n  )\n}) as VuiComponent<'div', TreeProps> & {\n  Icon: typeof TreeIcon\n  Item: typeof TreeItem\n  Text: typeof TreeText\n}\n\nTree.Icon = TreeIcon\nTree.Item = TreeItem\nTree.Text = TreeText\nTree.displayName = 'Tree'\n\nexport default Tree\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAa,WAAW,OAAO,MAAM;;;;;;;AAQrC,MAAa,OAAO,KAAuB,OAAO,QAAQ;CACxD,MAAM,EAAE,cAAc,UAAU,WAAW,cAAc,YAAY,OAAO,aAAa,MAAM,SAAS,GAAG,SACzG;CACF,MAAM,SAAS,eAAe,QAAQ,KAAK;CAE3C,MAAM,EAAE,eAAe,kBAAkB,iBAAiB,uBAAuB,aAAa,YAAY;CAE1G,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAM;CAAQ,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC;CAEjF,MAAM,uBAAuB,eAAe,eAAe,YAAY,YAAY,kBAAkB;CACrG,MAAM,qBAAqB,aAAa,aAAa,YAAY,YAAY,iBAAiB;CAE9F,MAAM,4BAA4B,aAAkB;EAClD,MAAM,IAAqB,CAAC;EAE5B,IAAI,UAED,AAAC,SAAS,QAAQ,QAAQ,CAAC,CAAoB,SAAS,UAAuC;GAC9F,IAAI,OAAO,OAAO,MAAM;IACtB,IAAI,QAAyB,CAAC;IAE9B,IAAI,MAAM,MAAM,UACd,QAAQ,yBAAyB,MAAM,MAAM,QAAQ;IAGvD,EAAE,KAAK;KACL,IAAI,MAAM,MAAM;KAChB,MAAM,MAAM,MAAM;KAClB,UAAU,MAAM,MAAM;KACtB,OAAO,MAAM,MAAM,SAAS;KAC5B,aAAa,MAAM,MAAM;KACzB,UAAU,MAAM,MAAM;KACL;IACnB,CAA6B;GAC/B;EACF,CAAC;EAGH,OAAO;CACT;CAEA,gBAAgB;EACd,IAAI,OAAO;GACT,iBAAiB,KAAwB;GACzC;EACF;EAEA,MAAM,IAAqB,CAAC;EAC5B,IAAI,UAAU;GACZ,MAAM,cAAc,yBAAyB,QAAQ;GACrD,EAAE,KAAK,GAAG,WAAW;EACvB;EACA,iBAAiB,CAAC;EAClB,IAAI,iBAAiB,UAAa,GAAG,MAAM,MAAqB,EAAE,OAAO,YAAY,GACnF,mBAAmB,YAAY;CAEnC,GAAG,CAAC,UAAU,YAAY,CAAC;CAE3B,MAAM,mBAAmB,OAAmB;EAC1C,mBAAmB,EAAE;EACrB,IAAI,aACF,YAAY,EAAE;CAElB;CAEA,OACE,oBAAC,cAAD;EAAc,OAAO;YACnB,oBAAC,UAAD;GAAU,WAAW,GAAG,YAAY,SAAS;GAAQ;GAAK,GAAI,OAAO;GAAW,GAAI;aAClF,oBAAC,MAAD;IAAM,MAAK;IAAO,GAAG;cAClB,eAAe,KAAK,EAAE,IAAI,UAAU,GAAG,SAAS,UAAkB;KACjE,OACE,oBAAC,UAAD;MACmB;MACjB,cAAc;MACd,YAAY;MACR;MACJ,UAAU,WAAW,WAAW,kBAAkB,oBAAoB,KAAK;MAC3E,cAAc;MAEG;MACjB,GAAI;KACL,GAHM,MAAM,KAGZ;IAEL,CAAC;GACG;EACE;CACE;AAElB,CAAC;AAMD,KAAK,OAAO;AACZ,KAAK,OAAO;AACZ,KAAK,OAAO;AACZ,KAAK,cAAc"}

package/dist/tree/treeIcon.js

@@ -22,5 +22,5 @@ TreeIcon.displayName = "TreeIcon";
 
 //#endregion
 export { TreeIcon as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=treeItem.js.map

package/dist/tree/treeItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeItem.js","names":[],"sources":["../../src/tree/treeItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { List } from '../list'\nimport { cs, filterUndefined, isArray, isReactText, vuiColorToRGBA } from '../utils'\nimport { useTreeContext } from './context'\nimport type { TreeItemProps } from './tree.types'\nimport TreeIcon from './treeIcon'\nimport TreeText from './treeText'\n\nexport const TreeItemBase = styled.liBox`\n  display: flex;\n  flex-direction: column;\n  transition-duration: fast;\n  width: 100%;\n`\n\n/**\n * Displays a tree item with text and optional icons. Can be shown as selected.\n */\nexport const TreeItem = vui<'li', TreeItemProps>((props, ref) => {\n  const mergedProps = { ...useTreeContext(), ...props }\n\n  const {\n    activeItemId,\n    activeItemIndex,\n    children,\n    center,\n    centerH,\n    centerV = true,\n    className,\n    iconCollapse = 'falMinus',\n    isCollapsed,\n    disabled,\n    iconExpand = 'falPlus',\n    id,\n    items,\n    isActive,\n    isFirstLevel,\n    isTruncated,\n    key,\n    onClickTreeItem,\n    onToggle,\n    propagatedPL,\n    plUnit = 26,\n    text,\n    ...rest\n  } = mergedProps\n  const styles = useStyleConfig('Tree', useTreeContext())\n  const { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg, ...itemStyles } = styles.item\n\n  const [isCollapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)\n\n  const innerBoxPl = propagatedPL || 0\n  const innerListPl = innerBoxPl + (plUnit || 0)\n\n  useEffect(() => {\n    setIsCollapsedInternal(!!isCollapsed)\n  }, [isCollapsed])\n\n  const toggle = (e: Event) => {\n    if (!disabled) {\n      onToggle?.({ id, collapsed: !isCollapsedInternal })\n      setIsCollapsedInternal(!isCollapsedInternal)\n    }\n\n    const target = e.target as HTMLDivElement\n    const active = target?.closest('.vui-tree')?.getElementsByClassName('vui-treeItem-active')[0] as HTMLDivElement\n\n    active ? (active.style.backgroundColor = 'transparent') : null\n\n    onClickTreeItem?.(id)\n\n    // Avoids triggering parent's onClick\n    e.stopPropagation()\n  }\n\n  const hoverTreeItem = (e: Event, type: string) => {\n    const target = e.target as HTMLDivElement\n\n    // eslint-disable-next-line no-useless-assignment\n    let parentDiv: HTMLDivElement | undefined = undefined\n\n    if (target.classList.contains('vui-treeItem-permanent')) {\n      parentDiv = target\n    } else {\n      const parentLi = target.closest('.vui-treeItem')\n      parentDiv = parentLi?.getElementsByClassName('vui-treeItem-permanent')[0] as HTMLDivElement\n    }\n\n    const isDivActive = parentDiv?.classList.contains('vui-treeItem-active') ? true : false\n\n    // translate the list-item style over to the div\n    if (parentDiv?.classList.contains('vui-treeItem-permanent')) {\n      // is it a fist level item?\n      if (parentDiv?.classList.contains('vui-treeItem-firstLevel')) {\n        if (type === 'over') {\n          parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.firstLevelItem?.hoverBg || 'transparent')\n        }\n\n        if (type === 'out') {\n          parentDiv.style.backgroundColor = isDivActive\n            ? vuiColorToRGBA(styles?.firstLevelItem?.activeBg || 'transparent')\n            : vuiColorToRGBA(styles?.firstLevelItem?.bg || 'transparent')\n        }\n      } else {\n        // it is NOT first level\n        if (type === 'over') {\n          parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.item?.hoverBg || 'transparent')\n        }\n        if (type === 'out') {\n          parentDiv.style.backgroundColor = isDivActive\n            ? vuiColorToRGBA(styles?.item?.activeBg || 'transparent')\n            : vuiColorToRGBA(styles?.item?.bg || 'transparent')\n        }\n      }\n    } else {\n      e.preventDefault()\n    }\n\n    e.stopPropagation()\n  }\n\n  const isCollapsable = (isArray(children) && children.length > 0) || (isArray(items) && items.length > 0)\n  const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id\n\n  let textMl = items && items?.length > 0 ? 0 : 1.5\n  if (!isCollapsable) {\n    textMl += 3.8\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-expanded': isCollapsable ? !isCollapsedInternal : undefined,\n    role: 'treeitem',\n  })\n\n  // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation\n  return (\n    <TreeItemBase\n      className={cs('vui-treeItem', isFirstLevel ? 'vui-treeItem-firstLevel' : '', className)}\n      color={isFirstLevel ? styles?.firstLevelItem?.color : color}\n      h={isCollapsedInternal ? h : isCollapsable ? 'auto' : h}\n      id={id.toString()}\n      m={0}\n      onClick={!disabled ? (e: Event) => toggle(e) : undefined}\n      onMouseOut={!disabled ? (e: Event) => hoverTreeItem(e, 'out') : undefined}\n      onMouseOver={!disabled ? (e: Event) => hoverTreeItem(e, 'over') : undefined}\n      p={0}\n      propagatedPL={propagatedPL}\n      ref={ref}\n      w={1}\n      {...itemStyles}\n      bg={\n        isFirstLevel\n          ? isActiveInternal\n            ? styles?.firstLevelItem?.activeBg\n            : styles?.firstLevelItem?.bg\n          : isActiveInternal\n            ? styles?.item?.activeBg\n            : bg\n      }\n      hoverBg={undefined}\n      {...aliasedProps}\n      {...rest}\n    >\n      <>\n        <Box\n          centerV\n          className={cs(\n            'vui-treeItem-permanent',\n            isActiveInternal ? 'vui-treeItem-active' : '',\n            isFirstLevel ? 'vui-treeItem-firstLevel' : '',\n          )}\n          fontWeight={isActiveInternal ? '600' : '500'}\n          pl={`${innerBoxPl}px`}\n        >\n          {items && items?.length > 0 && (\n            <>\n              {isCollapsedInternal ? (\n                <TreeIcon mx={1.5} name={iconExpand} />\n              ) : (\n                <TreeIcon mx={1.5} name={iconCollapse} />\n              )}\n            </>\n          )}\n          {isReactText(text) ? <TreeText ml={textMl} {...{ isTruncated, text }} /> : text}\n        </Box>\n\n        {isCollapsable && !isCollapsedInternal && (\n          <List role=\"tree\" w={1}>\n            {children ??\n              (isArray<TreeItemProps>(items)\n                ? items.map(({ key, propagatedPL, ...props }, index) => {\n                    return (\n                      <TreeItem\n                        activeItemIndex={activeItemIndex}\n                        iconCollapse={iconCollapse}\n                        iconExpand={iconExpand}\n                        key={key ?? index}\n                        onClickTreeItem={onClickTreeItem}\n                        propagatedPL={innerListPl}\n                        {...props}\n                      />\n                    )\n                  })\n                : items)}\n          </List>\n        )}\n      </>\n    </TreeItemBase>\n  )\n})\n\nTreeItem.displayName = 'TreeItem'\n\nexport default TreeItem\n"],"mappings":"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"}
+{"version":3,"file":"treeItem.js","names":[],"sources":["../../src/tree/treeItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { List } from '../list'\nimport { cs, filterUndefined, isArray, isReactText, vuiColorToRGBA } from '../utils'\nimport { useTreeContext } from './context'\nimport type { TreeItemProps } from './tree.types'\nimport TreeIcon from './treeIcon'\nimport TreeText from './treeText'\n\nexport const TreeItemBase = styled.liBox`\n  display: flex;\n  flex-direction: column;\n  transition-duration: fast;\n  width: 100%;\n`\n\n/**\n * Displays a tree item with text and optional icons. Can be shown as selected.\n */\nexport const TreeItem = vui<'li', TreeItemProps>((props, ref) => {\n  const mergedProps = { ...useTreeContext(), ...props }\n\n  const {\n    activeItemId,\n    activeItemIndex,\n    children,\n    center,\n    centerH,\n    centerV = true,\n    className,\n    iconCollapse = 'falMinus',\n    isCollapsed,\n    disabled,\n    iconExpand = 'falPlus',\n    id,\n    items,\n    isActive,\n    isFirstLevel,\n    isTruncated,\n    key,\n    onClickTreeItem,\n    onToggle,\n    propagatedPL,\n    plUnit = 26,\n    text,\n    ...rest\n  } = mergedProps\n  const styles = useStyleConfig('Tree', useTreeContext())\n  const { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg, ...itemStyles } = styles.item\n\n  const [isCollapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)\n\n  const innerBoxPl = propagatedPL || 0\n  const innerListPl = innerBoxPl + (plUnit || 0)\n\n  useEffect(() => {\n    setIsCollapsedInternal(!!isCollapsed)\n  }, [isCollapsed])\n\n  const toggle = (e: Event) => {\n    if (!disabled) {\n      onToggle?.({ id, collapsed: !isCollapsedInternal })\n      setIsCollapsedInternal(!isCollapsedInternal)\n    }\n\n    const target = e.target as HTMLDivElement\n    const active = target?.closest('.vui-tree')?.getElementsByClassName('vui-treeItem-active')[0] as HTMLDivElement\n\n    active ? (active.style.backgroundColor = 'transparent') : null\n\n    onClickTreeItem?.(id)\n\n    // Avoids triggering parent's onClick\n    e.stopPropagation()\n  }\n\n  const hoverTreeItem = (e: Event, type: string) => {\n    const target = e.target as HTMLDivElement\n\n    // eslint-disable-next-line no-useless-assignment\n    let parentDiv: HTMLDivElement | undefined = undefined\n\n    if (target.classList.contains('vui-treeItem-permanent')) {\n      parentDiv = target\n    } else {\n      const parentLi = target.closest('.vui-treeItem')\n      parentDiv = parentLi?.getElementsByClassName('vui-treeItem-permanent')[0] as HTMLDivElement\n    }\n\n    const isDivActive = parentDiv?.classList.contains('vui-treeItem-active') ? true : false\n\n    // translate the list-item style over to the div\n    if (parentDiv?.classList.contains('vui-treeItem-permanent')) {\n      // is it a fist level item?\n      if (parentDiv?.classList.contains('vui-treeItem-firstLevel')) {\n        if (type === 'over') {\n          parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.firstLevelItem?.hoverBg || 'transparent')\n        }\n\n        if (type === 'out') {\n          parentDiv.style.backgroundColor = isDivActive\n            ? vuiColorToRGBA(styles?.firstLevelItem?.activeBg || 'transparent')\n            : vuiColorToRGBA(styles?.firstLevelItem?.bg || 'transparent')\n        }\n      } else {\n        // it is NOT first level\n        if (type === 'over') {\n          parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.item?.hoverBg || 'transparent')\n        }\n        if (type === 'out') {\n          parentDiv.style.backgroundColor = isDivActive\n            ? vuiColorToRGBA(styles?.item?.activeBg || 'transparent')\n            : vuiColorToRGBA(styles?.item?.bg || 'transparent')\n        }\n      }\n    } else {\n      e.preventDefault()\n    }\n\n    e.stopPropagation()\n  }\n\n  const isCollapsable = (isArray(children) && children.length > 0) || (isArray(items) && items.length > 0)\n  const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id\n\n  let textMl = items && items?.length > 0 ? 0 : 1.5\n  if (!isCollapsable) {\n    textMl += 3.8\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-expanded': isCollapsable ? !isCollapsedInternal : undefined,\n    role: 'treeitem',\n  })\n\n  // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation\n  return (\n    <TreeItemBase\n      className={cs('vui-treeItem', isFirstLevel ? 'vui-treeItem-firstLevel' : '', className)}\n      color={isFirstLevel ? styles?.firstLevelItem?.color : color}\n      h={isCollapsedInternal ? h : isCollapsable ? 'auto' : h}\n      id={id.toString()}\n      m={0}\n      onClick={!disabled ? (e: Event) => toggle(e) : undefined}\n      onMouseOut={!disabled ? (e: Event) => hoverTreeItem(e, 'out') : undefined}\n      onMouseOver={!disabled ? (e: Event) => hoverTreeItem(e, 'over') : undefined}\n      p={0}\n      propagatedPL={propagatedPL}\n      ref={ref}\n      w={1}\n      {...itemStyles}\n      bg={\n        isFirstLevel\n          ? isActiveInternal\n            ? styles?.firstLevelItem?.activeBg\n            : styles?.firstLevelItem?.bg\n          : isActiveInternal\n            ? styles?.item?.activeBg\n            : bg\n      }\n      hoverBg={undefined}\n      {...aliasedProps}\n      {...rest}\n    >\n      <>\n        <Box\n          centerV\n          className={cs(\n            'vui-treeItem-permanent',\n            isActiveInternal ? 'vui-treeItem-active' : '',\n            isFirstLevel ? 'vui-treeItem-firstLevel' : '',\n          )}\n          fontWeight={isActiveInternal ? '600' : '500'}\n          pl={`${innerBoxPl}px`}\n        >\n          {items && items?.length > 0 && (\n            <>\n              {isCollapsedInternal ? (\n                <TreeIcon mx={1.5} name={iconExpand} />\n              ) : (\n                <TreeIcon mx={1.5} name={iconCollapse} />\n              )}\n            </>\n          )}\n          {isReactText(text) ? <TreeText ml={textMl} {...{ isTruncated, text }} /> : text}\n        </Box>\n\n        {isCollapsable && !isCollapsedInternal && (\n          <List role=\"tree\" w={1}>\n            {children ??\n              (isArray<TreeItemProps>(items)\n                ? items.map(({ key, propagatedPL, ...props }, index) => {\n                    return (\n                      <TreeItem\n                        activeItemIndex={activeItemIndex}\n                        iconCollapse={iconCollapse}\n                        iconExpand={iconExpand}\n                        key={key ?? index}\n                        onClickTreeItem={onClickTreeItem}\n                        propagatedPL={innerListPl}\n                        {...props}\n                      />\n                    )\n                  })\n                : items)}\n          </List>\n        )}\n      </>\n    </TreeItemBase>\n  )\n})\n\nTreeItem.displayName = 'TreeItem'\n\nexport default TreeItem\n"],"mappings":"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"}

package/dist/tree/treeText.js

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

package/dist/tree/useTreeState.js

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

package/dist/tutorial/consts.js

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

package/dist/tutorial/tutorial.d.ts

@@ -16,7 +16,7 @@ declare function Tutorial({
   isVisible,
   includeFinalPage,
   useContentTitle
-}: TutorialProps): import("react/jsx-runtime").JSX.Element;
+}: TutorialProps): import("react").JSX.Element;
 declare namespace Tutorial {
   var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tutorial.d.ts","names":[],"sources":["../../src/tutorial/tutorial.tsx"],"mappings":";;;;iBAQgB,QAAA,CAAA;EACd,WAAA;EACA,QAAA;EACA,SAAA;EACA,QAAA;EACA,SAAA;EACA,QAAA;EACA,KAAA;EACA,KAAA;EACA,SAAA;EACA,cAAA;EACA,SAAA;EACA,gBAAA;EACA;AAAA,GACC,aAAA,+BAAa,GAAA,CAAA,OAAA;AAAA,kBAdA,QAAA;EAAA,IAAQ,WAAA;AAAA"}
+{"version":3,"file":"tutorial.d.ts","names":[],"sources":["../../src/tutorial/tutorial.tsx"],"mappings":";;;;iBAQgB,QAAA;EACd,WAAA;EACA,QAAA;EACA,SAAA;EACA,QAAA;EACA,SAAA;EACA,QAAA;EACA,KAAA;EACA,KAAA;EACA,SAAA;EACA,cAAA;EACA,SAAA;EACA,gBAAA;EACA;AAAA,GACC,aAAA,mBAAa,GAAA,CAAA,OAAA;AAAA,kBAdA,QAAA;EAAA,IAAQ,WAAA;AAAA"}

package/dist/tutorial/tutorial.js

@@ -41,5 +41,5 @@ Tutorial.displayName = "Tutorial";
 
 //#endregion
 export { Tutorial };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=tutorial.js.map

package/dist/tutorial/tutorialCard.d.ts

@@ -13,7 +13,7 @@ declare function TutorialCard({
   onFinish,
   includeFinalPage,
   useContentTitle
-}: TutorialCardProps): import("react/jsx-runtime").JSX.Element;
+}: TutorialCardProps): import("react").JSX.Element;
 declare namespace TutorialCard {
   var displayName: string;
 }

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

@@ -1 +1 @@
-{"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,+BAAiB,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;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,mBAAiB,GAAA,CAAA,OAAA;AAAA,kBAZJ,YAAA;EAAA,IAAY,WAAA;AAAA"}

package/dist/tutorial/tutorialCard.js

@@ -157,5 +157,5 @@ TutorialCard.displayName = "TutorialCard";
 
 //#endregion
 export { TutorialCard };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.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 { 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":"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"}
+{"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":"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"}

package/dist/tutorial/tutorialStep.d.ts

@@ -7,7 +7,7 @@ declare const TutorialStep: {
     content,
     title,
     useContentTitle
-  }: TutorialStepProps): import("react/jsx-runtime").JSX.Element;
+  }: TutorialStepProps): import("react").JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"tutorialStep.d.ts","names":[],"sources":["../../src/tutorial/tutorialStep.tsx"],"mappings":";;;cAIa,YAAA;EAAA;;;;;KAA6D,iBAAA,+BAAiB,GAAA,CAAA,OAAA"}
+{"version":3,"file":"tutorialStep.d.ts","names":[],"sources":["../../src/tutorial/tutorialStep.tsx"],"mappings":";;;cAIa,YAAA;EAAA;;;;;KAA6D,iBAAA,mBAAiB,GAAA,CAAA,OAAA"}

package/dist/tutorial/tutorialStep.js

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

package/dist/utils/array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"array.d.ts","names":[],"sources":["../../src/utils/array.ts"],"mappings":";;;;iBAIgB,SAAA,mCAA4C,CAAA,CAAA,CAAG,GAAA,EAAK,CAAA,EAAG,KAAA,GAAO,IAAA,aAGpE,KAAA,EAAO,CAAA,EAAG,KAAA,EAAO,CAAA;AAH3B;AAAA,iBAmBgB,UAAA,GAAA,CAAc,KAAA,EAAO,CAAA,IAAK,IAAA,EAAM,CAAA,GAAI,CAAA"}
+{"version":3,"file":"array.d.ts","names":[],"sources":["../../src/utils/array.ts"],"mappings":";;;;iBAIgB,SAAA,mCAA4C,CAAA,EAAG,GAAA,EAAK,CAAA,EAAG,KAAA,GAAO,IAAA,aAGpE,KAAA,EAAO,CAAA,EAAG,KAAA,EAAO,CAAA;AAH3B;AAAA,iBAmBgB,UAAA,IAAc,KAAA,EAAO,CAAA,IAAK,IAAA,EAAM,CAAA,GAAI,CAAA"}

package/dist/utils/array.js

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

package/dist/utils/assertion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"assertion.d.ts","names":[],"sources":["../../src/utils/assertion.ts"],"mappings":";;;;;iBAKgB,OAAA,GAAA,CAAW,KAAA,QAAa,KAAA,IAAS,CAAC;AAAlD;AAAA,iBAMgB,UAAA,WAAqB,QAAA,GAAW,QAAA,CAAA,CAAU,KAAA,QAAa,KAAA,IAAS,CAAA;;iBAKhE,KAAA,KAAU,GAAA,CAAI,OAAA,CAAA,CAAS,KAAA,QAAa,KAAA,IAAS,CAAC;;iBAK9C,QAAA,CAAS,KAAA,QAAa,KAAK;;iBAK3B,QAAA,KAAa,IAAA,CAAA,CAAM,KAAA,QAAa,KAAA,IAAS,CAAC;;iBAK1C,WAAA,CAAY,KAAA,QAAa,KAAK;AApB9C;AAAA,iBAyBgB,QAAA,CAAS,KAAA,QAAa,KAAK"}
+{"version":3,"file":"assertion.d.ts","names":[],"sources":["../../src/utils/assertion.ts"],"mappings":";;;;;iBAKgB,OAAA,IAAW,KAAA,QAAa,KAAA,IAAS,CAAC;AAAlD;AAAA,iBAMgB,UAAA,WAAqB,QAAA,GAAW,QAAA,EAAU,KAAA,QAAa,KAAA,IAAS,CAAA;;iBAKhE,KAAA,KAAU,GAAA,CAAI,OAAA,EAAS,KAAA,QAAa,KAAA,IAAS,CAAC;;iBAK9C,QAAA,CAAS,KAAA,QAAa,KAAK;;iBAK3B,QAAA,KAAa,IAAA,EAAM,KAAA,QAAa,KAAA,IAAS,CAAC;;iBAK1C,WAAA,CAAY,KAAA,QAAa,KAAK;AApB9C;AAAA,iBAyBgB,QAAA,CAAS,KAAA,QAAa,KAAK"}

package/dist/utils/assertion.js

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

package/dist/utils/consts.js

@@ -6,5 +6,5 @@ const dimmedBorderColor = "grey.40";
 
 //#endregion
 export { __DEV__, activeClassName, activeItemShade, dimmedBorderColor };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=consts.js.map

package/dist/utils/dates.js

@@ -55,5 +55,5 @@ const getCurrentYear = () => {
 
 //#endregion
 export { formatIsoDate, generateDateByUTCValue, getCurrentYear, getDateUTCValue, isValidDate, parseIsoDate, sameDate, sameYear, sameYearSameMonth, utcDateToLocale, validateDateFormat };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=dates.js.map

package/dist/utils/dates.js.map

@@ -1 +1 @@
-{"version":3,"file":"dates.js","names":[],"sources":["../../src/utils/dates.ts"],"sourcesContent":["/** Checks if the provided value is a valid date */\nexport function isValidDate(value: Date | string | number) {\n  return `${new Date(value)}` !== 'Invalid Date'\n}\n\n/** Formats the date to ISO format: 'yyyy-mm-dd' */\nexport function formatIsoDate(date: Date | string | number) {\n  const d = new Date(date)\n  if (!isValidDate(d)) return undefined\n  const yyyy = d?.getFullYear()\n  const mm = (d.getMonth() + 1).toString().padStart(2, '0')\n  const dd = d.getDate().toString().padStart(2, '0')\n  return `${yyyy}-${mm}-${dd}`\n}\n\n/**\n * Parses string date with the iso format of YYYY-mm-dd\n * @param input string\n * @returns Date | undefined\n */\nexport function parseIsoDate(input?: string) {\n  if (!input) return\n\n  const ticks = Date.parse(input)\n\n  return isNaN(ticks) ? undefined : new Date(ticks)\n}\n\n/**\n * Validation for 'YYYY-MM-DD' format\n */\nexport function validateDateFormat(dateString: string) {\n  const regEx = /^\\d{4}-\\d{2}-\\d{2}$/\n  return dateString.match(regEx)\n}\n\n// Get current time's UTC year, month, date\nexport const getDateUTCValue = (date: Date) => ({\n  utcYear: date.getUTCFullYear(),\n  utcMonth: date.getUTCMonth(),\n  utcDate: date.getUTCDate(),\n})\n\n// Generate a date by set its utc value\nexport const generateDateByUTCValue = (year: number, month: number, day?: number) => {\n  return day ? new Date(Date.UTC(year, month, day)) : new Date(Date.UTC(year, month))\n}\n\nexport const sameYearSameMonth = (a?: Date, b?: Date) => {\n  if (!a || !b) return false\n\n  return a.getUTCFullYear() === b.getUTCFullYear() && a.getUTCMonth() === b.getUTCMonth()\n}\n\nexport const sameYear = (a?: Date, b?: Date) => {\n  if (!a || !b) return false\n  return a.getUTCFullYear() === b.getUTCFullYear() ? true : false\n}\n\nexport const sameDate = (a?: Date, b?: Date) => {\n  if (!a || !b) return false\n\n  return (\n    a.getUTCFullYear() === b.getUTCFullYear() &&\n    a.getUTCMonth() === b.getUTCMonth() &&\n    a.getUTCDate() === b.getUTCDate()\n  )\n}\n\nexport const utcDateToLocale = (utcDate?: Date) => {\n  if (!utcDate) return undefined\n  const localDateSameDay = new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate())\n  return localDateSameDay.toLocaleDateString()\n}\n\nexport const getCurrentYear = () => {\n  const currentDate = new Date()\n  return currentDate.getFullYear()\n}\n"],"mappings":";;AACA,SAAgB,YAAY,OAA+B;CACzD,OAAO,GAAG,IAAI,KAAK,KAAK,QAAQ;AAClC;;AAGA,SAAgB,cAAc,MAA8B;CAC1D,MAAM,IAAI,IAAI,KAAK,IAAI;CACvB,IAAI,CAAC,YAAY,CAAC,GAAG,OAAO;CAI5B,OAAO,GAHM,GAAG,YAAY,EAGb,IAFH,EAAE,SAAS,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,GAElC,EAAE,GADV,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAG,GACrB;AAC3B;;;;;;AAOA,SAAgB,aAAa,OAAgB;CAC3C,IAAI,CAAC,OAAO;CAEZ,MAAM,QAAQ,KAAK,MAAM,KAAK;CAE9B,OAAO,MAAM,KAAK,IAAI,SAAY,IAAI,KAAK,KAAK;AAClD;;;;AAKA,SAAgB,mBAAmB,YAAoB;CAErD,OAAO,WAAW,MAAM,qBAAK;AAC/B;AAGA,MAAa,mBAAmB,UAAgB;CAC9C,SAAS,KAAK,eAAe;CAC7B,UAAU,KAAK,YAAY;CAC3B,SAAS,KAAK,WAAW;AAC3B;AAGA,MAAa,0BAA0B,MAAc,OAAe,QAAiB;CACnF,OAAO,MAAM,IAAI,KAAK,KAAK,IAAI,MAAM,OAAO,GAAG,CAAC,IAAI,IAAI,KAAK,KAAK,IAAI,MAAM,KAAK,CAAC;AACpF;AAEA,MAAa,qBAAqB,GAAU,MAAa;CACvD,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO;CAErB,OAAO,EAAE,eAAe,MAAM,EAAE,eAAe,KAAK,EAAE,YAAY,MAAM,EAAE,YAAY;AACxF;AAEA,MAAa,YAAY,GAAU,MAAa;CAC9C,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO;CACrB,OAAO,EAAE,eAAe,MAAM,EAAE,eAAe,IAAI,OAAO;AAC5D;AAEA,MAAa,YAAY,GAAU,MAAa;CAC9C,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO;CAErB,OACE,EAAE,eAAe,MAAM,EAAE,eAAe,KACxC,EAAE,YAAY,MAAM,EAAE,YAAY,KAClC,EAAE,WAAW,MAAM,EAAE,WAAW;AAEpC;AAEA,MAAa,mBAAmB,YAAmB;CACjD,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,IADsB,KAAK,QAAQ,eAAe,GAAG,QAAQ,YAAY,GAAG,QAAQ,WAAW,CAChF,EAAE,mBAAmB;AAC7C;AAEA,MAAa,uBAAuB;CAElC,wBAAO,IADiB,KACP,GAAE,YAAY;AACjC"}
+{"version":3,"file":"dates.js","names":[],"sources":["../../src/utils/dates.ts"],"sourcesContent":["/** Checks if the provided value is a valid date */\nexport function isValidDate(value: Date | string | number) {\n  return `${new Date(value)}` !== 'Invalid Date'\n}\n\n/** Formats the date to ISO format: 'yyyy-mm-dd' */\nexport function formatIsoDate(date: Date | string | number) {\n  const d = new Date(date)\n  if (!isValidDate(d)) return undefined\n  const yyyy = d?.getFullYear()\n  const mm = (d.getMonth() + 1).toString().padStart(2, '0')\n  const dd = d.getDate().toString().padStart(2, '0')\n  return `${yyyy}-${mm}-${dd}`\n}\n\n/**\n * Parses string date with the iso format of YYYY-mm-dd\n * @param input string\n * @returns Date | undefined\n */\nexport function parseIsoDate(input?: string) {\n  if (!input) return\n\n  const ticks = Date.parse(input)\n\n  return isNaN(ticks) ? undefined : new Date(ticks)\n}\n\n/**\n * Validation for 'YYYY-MM-DD' format\n */\nexport function validateDateFormat(dateString: string) {\n  const regEx = /^\\d{4}-\\d{2}-\\d{2}$/\n  return dateString.match(regEx)\n}\n\n// Get current time's UTC year, month, date\nexport const getDateUTCValue = (date: Date) => ({\n  utcYear: date.getUTCFullYear(),\n  utcMonth: date.getUTCMonth(),\n  utcDate: date.getUTCDate(),\n})\n\n// Generate a date by set its utc value\nexport const generateDateByUTCValue = (year: number, month: number, day?: number) => {\n  return day ? new Date(Date.UTC(year, month, day)) : new Date(Date.UTC(year, month))\n}\n\nexport const sameYearSameMonth = (a?: Date, b?: Date) => {\n  if (!a || !b) return false\n\n  return a.getUTCFullYear() === b.getUTCFullYear() && a.getUTCMonth() === b.getUTCMonth()\n}\n\nexport const sameYear = (a?: Date, b?: Date) => {\n  if (!a || !b) return false\n  return a.getUTCFullYear() === b.getUTCFullYear() ? true : false\n}\n\nexport const sameDate = (a?: Date, b?: Date) => {\n  if (!a || !b) return false\n\n  return (\n    a.getUTCFullYear() === b.getUTCFullYear() &&\n    a.getUTCMonth() === b.getUTCMonth() &&\n    a.getUTCDate() === b.getUTCDate()\n  )\n}\n\nexport const utcDateToLocale = (utcDate?: Date) => {\n  if (!utcDate) return undefined\n  const localDateSameDay = new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate())\n  return localDateSameDay.toLocaleDateString()\n}\n\nexport const getCurrentYear = () => {\n  const currentDate = new Date()\n  return currentDate.getFullYear()\n}\n"],"mappings":";;AACA,SAAgB,YAAY,OAA+B;CACzD,OAAO,GAAG,IAAI,KAAK,KAAK,QAAQ;AAClC;;AAGA,SAAgB,cAAc,MAA8B;CAC1D,MAAM,IAAI,IAAI,KAAK,IAAI;CACvB,IAAI,CAAC,YAAY,CAAC,GAAG,OAAO;CAI5B,OAAO,GAHM,GAAG,YAAY,EAGb,IAFH,EAAE,SAAS,IAAI,EAAC,CAAE,SAAS,CAAC,CAAC,SAAS,GAAG,GAElC,EAAE,GADV,EAAE,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,GAAG,GACrB;AAC3B;;;;;;AAOA,SAAgB,aAAa,OAAgB;CAC3C,IAAI,CAAC,OAAO;CAEZ,MAAM,QAAQ,KAAK,MAAM,KAAK;CAE9B,OAAO,MAAM,KAAK,IAAI,SAAY,IAAI,KAAK,KAAK;AAClD;;;;AAKA,SAAgB,mBAAmB,YAAoB;CAErD,OAAO,WAAW,MAAM,qBAAK;AAC/B;AAGA,MAAa,mBAAmB,UAAgB;CAC9C,SAAS,KAAK,eAAe;CAC7B,UAAU,KAAK,YAAY;CAC3B,SAAS,KAAK,WAAW;AAC3B;AAGA,MAAa,0BAA0B,MAAc,OAAe,QAAiB;CACnF,OAAO,MAAM,IAAI,KAAK,KAAK,IAAI,MAAM,OAAO,GAAG,CAAC,IAAI,IAAI,KAAK,KAAK,IAAI,MAAM,KAAK,CAAC;AACpF;AAEA,MAAa,qBAAqB,GAAU,MAAa;CACvD,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO;CAErB,OAAO,EAAE,eAAe,MAAM,EAAE,eAAe,KAAK,EAAE,YAAY,MAAM,EAAE,YAAY;AACxF;AAEA,MAAa,YAAY,GAAU,MAAa;CAC9C,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO;CACrB,OAAO,EAAE,eAAe,MAAM,EAAE,eAAe,IAAI,OAAO;AAC5D;AAEA,MAAa,YAAY,GAAU,MAAa;CAC9C,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO;CAErB,OACE,EAAE,eAAe,MAAM,EAAE,eAAe,KACxC,EAAE,YAAY,MAAM,EAAE,YAAY,KAClC,EAAE,WAAW,MAAM,EAAE,WAAW;AAEpC;AAEA,MAAa,mBAAmB,YAAmB;CACjD,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,IADsB,KAAK,QAAQ,eAAe,GAAG,QAAQ,YAAY,GAAG,QAAQ,WAAW,CAChF,CAAC,CAAC,mBAAmB;AAC7C;AAEA,MAAa,uBAAuB;CAElC,wBAAO,IADiB,KACP,EAAC,CAAC,YAAY;AACjC"}

package/dist/utils/dom.js

@@ -12,5 +12,5 @@ const removeBodyClass = (className) => document.body.classList.remove(className)
 
 //#endregion
 export { addBodyClass, addElement, removeBodyClass, removeElement };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=dom.js.map

package/dist/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","names":[],"sources":["../../src/utils/dom.ts"],"sourcesContent":["export const addElement = (id: string): HTMLElement => {\n  const element = document.createElement('div')\n  element.setAttribute('id', id)\n  return element\n}\n\nexport const removeElement = (id: string): void => {\n  const element = document.getElementById(id)\n  element?.remove?.()\n}\n\nexport const addBodyClass = (className: string): void => document.body.classList.add(className)\n\nexport const removeBodyClass = (className: string): void => document.body.classList.remove(className)\n"],"mappings":";AAAA,MAAa,cAAc,OAA4B;CACrD,MAAM,UAAU,SAAS,cAAc,KAAK;CAC5C,QAAQ,aAAa,MAAM,EAAE;CAC7B,OAAO;AACT;AAEA,MAAa,iBAAiB,OAAqB;CAEjD,AADgB,SAAS,eAAe,EAClC,GAAG,SAAS;AACpB;AAEA,MAAa,gBAAgB,cAA4B,SAAS,KAAK,UAAU,IAAI,SAAS;AAE9F,MAAa,mBAAmB,cAA4B,SAAS,KAAK,UAAU,OAAO,SAAS"}
+{"version":3,"file":"dom.js","names":[],"sources":["../../src/utils/dom.ts"],"sourcesContent":["export const addElement = (id: string): HTMLElement => {\n  const element = document.createElement('div')\n  element.setAttribute('id', id)\n  return element\n}\n\nexport const removeElement = (id: string): void => {\n  const element = document.getElementById(id)\n  element?.remove?.()\n}\n\nexport const addBodyClass = (className: string): void => document.body.classList.add(className)\n\nexport const removeBodyClass = (className: string): void => document.body.classList.remove(className)\n"],"mappings":";AAAA,MAAa,cAAc,OAA4B;CACrD,MAAM,UAAU,SAAS,cAAc,KAAK;CAC5C,QAAQ,aAAa,MAAM,EAAE;CAC7B,OAAO;AACT;AAEA,MAAa,iBAAiB,OAAqB;CAEjD,AADgB,SAAS,eAAe,EAClC,CAAC,EAAE,SAAS;AACpB;AAEA,MAAa,gBAAgB,cAA4B,SAAS,KAAK,UAAU,IAAI,SAAS;AAE9F,MAAa,mBAAmB,cAA4B,SAAS,KAAK,UAAU,OAAO,SAAS"}

package/dist/utils/formatDate.js

@@ -79,5 +79,5 @@ function formatDate(date, format = "DD MM YYYY", options) {
 
 //#endregion
 export { dateFormats, formatDate };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=formatDate.js.map