@veracity/vui 3.2.0 → 4.0.0-alpha.366771.2601090922

package/dist/tree/context.js

@@ -1,9 +1,10 @@
 import { createContext } from "../utils/react.js";
+import "../utils/index.js";
 
 //#region src/tree/context.ts
 const [TreeProvider, useTreeContext] = createContext({ isOptional: true });
 
 //#endregion
 export { TreeProvider, useTreeContext };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/tree/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/tree/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [TreeProvider, useTreeContext] = createContext<Dict>({ isOptional: true })\n\nexport { TreeProvider, useTreeContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,cAAc,kBAAkB,cAAoB,EAAE,YAAY,MAAM,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/tree/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [TreeProvider, useTreeContext] = createContext<Dict>({ isOptional: true })\n\nexport { TreeProvider, useTreeContext }\n"],"mappings":";;;;AAGA,MAAM,CAAC,cAAc,kBAAkB,cAAoB,EAAE,YAAY,MAAM,CAAC"}

package/dist/tree/index.d.ts

@@ -3,4 +3,4 @@ import { TreeItemId, TreeItemLinkProps, TreeItemProps, TreeOnToggleEvent, TreePr
 import { TreeIcon } from "./treeIcon.js";
 import { TreeItem, TreeItemBase } from "./treeItem.js";
 import { TreeText } from "./treeText.js";
-import { Tree, TreeBase } from "./tree.js";
+import { Tree, TreeBase } from "./tree.js";

package/dist/tree/index.js

@@ -0,0 +1,7 @@
+import { TreeProvider, useTreeContext } from "./context.js";
+import { TreeIcon } from "./treeIcon.js";
+import { TreeText } from "./treeText.js";
+import { TreeItem, TreeItemBase } from "./treeItem.js";
+import { Tree, TreeBase } from "./tree.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/tree/theme.js

@@ -76,5 +76,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/tree/tree.d.ts

@@ -18,4 +18,5 @@ declare const Tree: VuiComponent<"div", TreeProps> & {
 };
 //#endregion
 export { Tree, TreeBase };
+
 //# sourceMappingURL=tree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","names":[],"sources":["../../src/tree/tree.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cAca,UAAQ,oBAAA,CAAA,uBAKpB,oBAAA,CALoB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAQR,MAuFP,oBAAoB;eACX;eACA;eACA;AAlGf,CAAA"}
+{"version":3,"file":"tree.d.ts","names":[],"sources":["../../src/tree/tree.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cAca,UAAQ,oBAAA,CAAA,uBAKpB,oBAAA,CALoB,YAAA,EAAA,WAAA;;cAQR,MAwFP,oBAAoB;eACX;eACA;eACA;AAnGf,CAAA"}

package/dist/tree/tree.js

@@ -1,9 +1,12 @@
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { styled } from "../core/styled.js";
 import { vui } from "../core/vui.js";
+import "../core/index.js";
 import { List } from "../list/list.js";
+import "../list/index.js";
 import { TreeProvider } from "./context.js";
 import treeIcon_default from "./treeIcon.js";
 import treeText_default from "./treeText.js";
@@ -21,7 +24,7 @@ const TreeBase = styled.divBox`
 `;
 /** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
 const Tree = vui((props, ref) => {
-	const { activeItemId, children, className, iconCollapse, iconExpand, items, onClickItem, size, variant,...rest } = props;
+	const { activeItemId, children, className, iconCollapse, iconExpand, items, onClickItem, size, variant, ...rest } = props;
 	const styles = useStyleConfig("Tree", props);
 	const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId);
 	const context = useMemo(() => filterUndefined({
@@ -32,7 +35,7 @@ const Tree = vui((props, ref) => {
 	const iconExpandInternal = iconExpand ? iconExpand : variant === "default" ? "falAngleDown" : "falPlus";
 	const transformChildrenToItems = (children$1) => {
 		const t = [];
-		if (children$1) Children.toArray(children$1).forEach((child, index) => {
+		if (children$1) Children.toArray(children$1).forEach((child) => {
 			if (child?.props?.text) {
 				let items$1 = [];
 				if (child.props.children) items$1 = transformChildrenToItems(child.props.children);
@@ -76,7 +79,7 @@ const Tree = vui((props, ref) => {
 			children: /* @__PURE__ */ jsx(List, {
 				role: "tree",
 				w: 1,
-				children: itemsInternal?.map(({ id, isActive,...props$1 }, index) => {
+				children: itemsInternal?.map(({ id, isActive, ...props$1 }, index) => {
 					return /* @__PURE__ */ jsx(treeItem_default, {
 						activeItemIndex,
 						iconCollapse: iconCollapseInternal,
@@ -99,5 +102,5 @@ Tree.displayName = "Tree";
 
 //#endregion
 export { Tree, TreeBase };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=tree.js.map

package/dist/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":["t: TreeItemProps[]","children","items: TreeItemProps[]","items","props","TreeItem","TreeIcon","TreeText"],"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      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TreeItemProps>, index: number) => {\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,QAAS,GAAG,SACzG;CACF,MAAM,SAAS,eAAe,QAAQ,MAAM;CAE5C,MAAM,EAAE,eAAe,kBAAkB,iBAAiB,uBAAuB,aAAa,aAAa;CAE3G,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAM;EAAS,CAAC,EAAE,CAAC,MAAM,QAAQ,CAAC;CAElF,MAAM,uBAAuB,eAAe,eAAe,YAAY,YAAY,kBAAkB;CACrG,MAAM,qBAAqB,aAAa,aAAa,YAAY,YAAY,iBAAiB;CAE9F,MAAM,4BAA4B,eAAkB;EAClD,MAAMA,IAAqB,EAAE;AAE7B,MAAIC,WACD,CAAC,SAAS,QAAQA,WAAS,CAAoB,SAAS,OAAoC,UAAkB;AAC7G,OAAI,OAAO,OAAO,MAAM;IACtB,IAAIC,UAAyB,EAAE;AAE/B,QAAI,MAAM,MAAM,SACd,WAAQ,yBAAyB,MAAM,MAAM,SAAS;AAGxD,MAAE,KAAK;KACL,IAAI,MAAM,MAAM;KAChB,MAAM,MAAM,MAAM;KAClB,UAAU,MAAM,MAAM;KACtB,OAAO,MAAM,MAAM,SAASC;KAC5B,aAAa,MAAM,MAAM;KACzB,UAAU,MAAM,MAAM;KACL;KAClB,CAA6B;;IAEhC;AAGJ,SAAO;;AAGT,iBAAgB;AACd,MAAI,OAAO;AACT,oBAAiB,MAAyB;AAC1C;;EAGF,MAAMH,IAAqB,EAAE;AAC7B,MAAI,UAAU;GACZ,MAAM,cAAc,yBAAyB,SAAS;AACtD,KAAE,KAAK,GAAG,YAAY;;AAExB,mBAAiB,EAAE;AACnB,MAAI,iBAAiB,UAAa,GAAG,MAAM,MAAqB,EAAE,OAAO,aAAa,CACpF,oBAAmB,aAAa;IAEjC,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,mBAAmB,OAAmB;AAC1C,qBAAmB,GAAG;AACtB,MAAI,YACF,aAAY,GAAG;;AAInB,QACE,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAS,WAAW,GAAG,YAAY,UAAU;GAAO;GAAK,GAAI,OAAO;GAAW,GAAI;aAClF,oBAAC;IAAK,MAAK;IAAO,GAAG;cAClB,eAAe,KAAK,EAAE,IAAI,SAAU,GAAGI,WAAS,UAAkB;AACjE,YACE,oBAACC;MACkB;MACjB,cAAc;MACd,YAAY;MACR;MACJ,UAAU,WAAW,WAAW,kBAAkB,oBAAoB,KAAK;MAC3E,cAAc;MAEG;MACjB,GAAID;QAFC,MAAM,MAGX;MAEJ;KACG;IACE;GACE;EAEjB;AAMF,KAAK,OAAOE;AACZ,KAAK,OAAOD;AACZ,KAAK,OAAOE;AACZ,KAAK,cAAc"}
+{"version":3,"file":"tree.js","names":["t: TreeItemProps[]","children","items: TreeItemProps[]","items","props","TreeItem","TreeIcon","TreeText"],"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,MAAM;CAE5C,MAAM,EAAE,eAAe,kBAAkB,iBAAiB,uBAAuB,aAAa,aAAa;CAE3G,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAM;EAAS,CAAC,EAAE,CAAC,MAAM,QAAQ,CAAC;CAElF,MAAM,uBAAuB,eAAe,eAAe,YAAY,YAAY,kBAAkB;CACrG,MAAM,qBAAqB,aAAa,aAAa,YAAY,YAAY,iBAAiB;CAE9F,MAAM,4BAA4B,eAAkB;EAClD,MAAMA,IAAqB,EAAE;AAE7B,MAAIC,WAED,CAAC,SAAS,QAAQA,WAAS,CAAoB,SAAS,UAAuC;AAC9F,OAAI,OAAO,OAAO,MAAM;IACtB,IAAIC,UAAyB,EAAE;AAE/B,QAAI,MAAM,MAAM,SACd,WAAQ,yBAAyB,MAAM,MAAM,SAAS;AAGxD,MAAE,KAAK;KACL,IAAI,MAAM,MAAM;KAChB,MAAM,MAAM,MAAM;KAClB,UAAU,MAAM,MAAM;KACtB,OAAO,MAAM,MAAM,SAASC;KAC5B,aAAa,MAAM,MAAM;KACzB,UAAU,MAAM,MAAM;KACL;KAClB,CAA6B;;IAEhC;AAGJ,SAAO;;AAGT,iBAAgB;AACd,MAAI,OAAO;AACT,oBAAiB,MAAyB;AAC1C;;EAGF,MAAMH,IAAqB,EAAE;AAC7B,MAAI,UAAU;GACZ,MAAM,cAAc,yBAAyB,SAAS;AACtD,KAAE,KAAK,GAAG,YAAY;;AAExB,mBAAiB,EAAE;AACnB,MAAI,iBAAiB,UAAa,GAAG,MAAM,MAAqB,EAAE,OAAO,aAAa,CACpF,oBAAmB,aAAa;IAEjC,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,mBAAmB,OAAmB;AAC1C,qBAAmB,GAAG;AACtB,MAAI,YACF,aAAY,GAAG;;AAInB,QACE,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAS,WAAW,GAAG,YAAY,UAAU;GAAO;GAAK,GAAI,OAAO;GAAW,GAAI;aAClF,oBAAC;IAAK,MAAK;IAAO,GAAG;cAClB,eAAe,KAAK,EAAE,IAAI,UAAU,GAAGI,WAAS,UAAkB;AACjE,YACE,oBAACC;MACkB;MACjB,cAAc;MACd,YAAY;MACR;MACJ,UAAU,WAAW,WAAW,kBAAkB,oBAAoB,KAAK;MAC3E,cAAc;MAEG;MACjB,GAAID;QAFC,MAAM,MAGX;MAEJ;KACG;IACE;GACE;EAEjB;AAMF,KAAK,OAAOE;AACZ,KAAK,OAAOD;AACZ,KAAK,OAAOE;AACZ,KAAK,cAAc"}

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

@@ -9,7 +9,7 @@ import { LinkProps } from "../link/link.types.js";
 import "../link/index.js";
 import { ListItemProps } from "../list/list.types.js";
 import "../list/index.js";
-import { ReactNode, ReactText } from "react";
+import { JSX, ReactNode } from "react";
 
 //#region src/tree/tree.types.d.ts
 type TreeProps = SystemProps & ThemingProps<'Tree'> & {
@@ -64,11 +64,12 @@ type TreeItemProps = ListItemProps & ThemingProps<'Tree'> & {
   /** Socket defining the size of the padding increment. */
   plUnit?: number;
   /** Socket displaying text within the item. */
-  text: ReactText | JSX.Element;
+  text: ReactNode;
   /** Collapse change state */
   onToggle?: (event: TreeOnToggleEvent) => void;
   onClickTreeItem?: (id: TreeItemId) => void;
 };
 //#endregion
 export { TreeItemId, TreeItemLinkProps, TreeItemProps, TreeOnToggleEvent, TreeProps };
+
 //# sourceMappingURL=tree.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tree.types.d.ts","names":[],"sources":["../../src/tree/tree.types.ts"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"tree.types.d.ts","names":[],"sources":["../../src/tree/tree.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;KASY,SAAA,GAAY,cACtB;;iBAEiB;;iBAEA;;eAEF;EAPL;EAAY,KAAA,CAAA,EASZ,OATY,CAAA,IAAA,EASE,aATF,CAAA,EAAA,GASqB,GAAA,CAAI,OATzB;EACtB;EAEiB,WAAA,CAAA,EAAA,CAAA,EAAA,EAQI,UARJ,EAAA,GAAA,IAAA;CAEA;AAEF,KAOL,iBAAA,GAAoB,OAPf,CAAA,GAAA,EAO4B,SAP5B,CAAA,GAAA,MAAA;AAES,KAOd,UAAA,GAPc,MAAA,GAAA,MAAA;AAAd,KASA,iBAAA,GATA;EAAiC,EAAI,EAU3C,UAV2C;EAE1B,SAAA,EAAA,OAAA;CAAU;AAGrB,KASA,aAAA,GAAgB,aATiB,GAU3C,YAVqC,CAAA,MAAA,CAAA,GAAA;EAE3B,YAAA,CAAU,EASH,UATG;EAEV;EAKA,eAAA,CAAa,EAIH,UAJG;EAAG;EAC1B,EAAA,EAKM,UALN;EACiB;EAEG,MAAA,CAAA,EAAA,OAAA;EAEd;EAQW,OAAA,CAAA,EAAA,OAAA;EAEF;EAES,OAAA,CAAA,EAAA,OAAA;EAAd;EACG,YAAA,CAAA,EALI,QAKJ;EAUC;EAMN,UAAA,CAAA,EAnBO,QAmBP;EAEa;EACI,KAAA,CAAA,EApBf,OAoBe,CAAA,IAAA,EApBD,aAoBC,CAAA,EAAA;EAAU,QAAA,CAAA,EAnBtB,SAmBsB;;;;;;;;;;cATrB;;;;;;QAMN;;qBAEa;yBACI"}

package/dist/tree/treeIcon.d.ts

@@ -1,6 +1,6 @@
+import { VuiComponent } from "../core/vui.js";
 import { IconProps } from "../icon/icon.types.js";
 import "../icon/index.js";
-import { VuiComponent } from "../core/vui.js";
 import "../index.js";
 
 //#region src/tree/treeIcon.d.ts
@@ -8,4 +8,5 @@ import "../index.js";
 declare const TreeIcon: VuiComponent<"svg", IconProps>;
 //#endregion
 export { TreeIcon };
+
 //# sourceMappingURL=treeIcon.d.ts.map

package/dist/tree/treeIcon.js

@@ -1,14 +1,17 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import icon_default from "../icon/icon.js";
+import "../icon/index.js";
+import "../core/index.js";
 import { useTreeContext } from "./context.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/tree/treeIcon.tsx
 /** Displays an icon on the side of the TreeItem. */
 const TreeIcon = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const styles = useStyleConfig("Tree", useTreeContext());
 	return /* @__PURE__ */ jsx(icon_default, {
 		className: cs("vui-treeIcon", className),
@@ -23,5 +26,5 @@ var treeIcon_default = TreeIcon;
 
 //#endregion
 export { TreeIcon, treeIcon_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=treeIcon.js.map

package/dist/tree/treeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeIcon.js","names":["Icon"],"sources":["../../src/tree/treeIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useTreeContext } from './context'\n\n/** Displays an icon on the side of the TreeItem. */\nexport const TreeIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Tree', useTreeContext())\n\n  return <Icon className={cs('vui-treeIcon', className)} ref={ref} size=\"xs\" {...styles.icon} {...rest} />\n})\n\nTreeIcon.displayName = 'TreeIcon'\n\nexport default TreeIcon\n"],"mappings":";;;;;;;;;AAOA,MAAa,WAAW,KAAuB,OAAO,QAAQ;CAC5D,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QAAO,oBAACA;EAAK,WAAW,GAAG,gBAAgB,UAAU;EAAO;EAAK,MAAK;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EACxG;AAEF,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"treeIcon.js","names":["Icon"],"sources":["../../src/tree/treeIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useTreeContext } from './context'\n\n/** Displays an icon on the side of the TreeItem. */\nexport const TreeIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Tree', useTreeContext())\n\n  return <Icon className={cs('vui-treeIcon', className)} ref={ref} size=\"xs\" {...styles.icon} {...rest} />\n})\n\nTreeIcon.displayName = 'TreeIcon'\n\nexport default TreeIcon\n"],"mappings":";;;;;;;;;;;;AAOA,MAAa,WAAW,KAAuB,OAAO,QAAQ;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QAAO,oBAACA;EAAK,WAAW,GAAG,gBAAgB,UAAU;EAAO;EAAK,MAAK;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EACxG;AAEF,SAAS,cAAc;AAEvB,uBAAe"}

package/dist/tree/treeItem.d.ts

@@ -12,4 +12,5 @@ declare const TreeItemBase: styled_components443.StyledComponent<"li", styled_co
 declare const TreeItem: VuiComponent<"li", TreeItemProps>;
 //#endregion
 export { TreeItem, TreeItemBase };
+
 //# sourceMappingURL=treeItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"treeItem.d.ts","names":[],"sources":["../../src/tree/treeItem.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAWa,cAAY,oBAAA,CAAA,sBAKxB,oBAAA,CALwB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;cAUZ,UAAQ,mBAAA"}
+{"version":3,"file":"treeItem.d.ts","names":[],"sources":["../../src/tree/treeItem.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAWa,cAAY,oBAAA,CAAA,sBAKxB,oBAAA,CALwB,YAAA,EAAA,WAAA;;;;cAUZ,UAAQ,mBAAA"}

package/dist/tree/treeItem.js

@@ -1,11 +1,15 @@
 import { isArray, isReactText } from "../utils/assertion.js";
 import { filterUndefined } from "../utils/object.js";
 import { cs, vuiColorToRGBA } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { styled } from "../core/styled.js";
 import { vui } from "../core/vui.js";
 import { Box } from "../box/box.js";
+import "../box/index.js";
+import "../core/index.js";
 import { List } from "../list/list.js";
+import "../list/index.js";
 import { useTreeContext } from "./context.js";
 import treeIcon_default from "./treeIcon.js";
 import treeText_default from "./treeText.js";
@@ -23,12 +27,12 @@ const TreeItemBase = styled.liBox`
 * Displays a tree item with text and optional icons. Can be shown as selected.
 */
 const TreeItem = vui((props, ref) => {
-	const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = "falMinus", isCollapsed, disabled, iconExpand = "falPlus", id, items, isActive, isFirstLevel, isTruncated, key, onClickTreeItem, onToggle, propagatedPL, plUnit = 26, text,...rest } = {
+	const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = "falMinus", isCollapsed, disabled, iconExpand = "falPlus", id, items, isActive, isFirstLevel, isTruncated, key, onClickTreeItem, onToggle, propagatedPL, plUnit = 26, text, ...rest } = {
 		...useTreeContext(),
 		...props
 	};
 	const styles = useStyleConfig("Tree", useTreeContext());
-	const { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg,...itemStyles } = styles.item;
+	const { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg, ...itemStyles } = styles.item;
 	const [collapsedInternal, setIsCollapsedInternal] = useState(false);
 	const innerBoxPl = propagatedPL || 0;
 	const innerListPl = innerBoxPl + (plUnit || 0);
@@ -109,7 +113,7 @@ const TreeItem = vui((props, ref) => {
 		}), isCollapsable && !collapsedInternal && /* @__PURE__ */ jsx(List, {
 			role: "tree",
 			w: 1,
-			children: children ?? (isArray(items) ? items.map(({ key: key$1, propagatedPL: propagatedPL$1,...props$1 }, index) => {
+			children: children ?? (isArray(items) ? items.map(({ key: key$1, propagatedPL: propagatedPL$1, ...props$1 }, index) => {
 				return /* @__PURE__ */ jsx(TreeItem, {
 					activeItemIndex,
 					iconCollapse,
@@ -127,5 +131,5 @@ var treeItem_default = TreeItem;
 
 //#endregion
 export { TreeItem, TreeItemBase, treeItem_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=treeItem.js.map

package/dist/tree/treeItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeItem.js","names":["parentDiv: HTMLDivElement | undefined","TreeIcon","TreeText","props","key"],"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 [collapsedInternal, 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: !collapsedInternal })\n      setIsCollapsedInternal(!collapsedInternal)\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    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 ? !collapsedInternal : 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={collapsedInternal ? 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              {collapsedInternal ? <TreeIcon mx={1.5} name={iconExpand} /> : <TreeIcon mx={1.5} name={iconCollapse} />}\n            </>\n          )}\n          {isReactText(text) ? <TreeText ml={textMl} {...{ isTruncated, text }} /> : text}\n        </Box>\n\n        {isCollapsable && !collapsedInternal && (\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":["parentDiv: HTMLDivElement | undefined","TreeIcon","TreeText","props","key"],"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 [collapsedInternal, 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: !collapsedInternal })\n      setIsCollapsedInternal(!collapsedInternal)\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    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 ? !collapsedInternal : 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={collapsedInternal ? 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              {collapsedInternal ? <TreeIcon mx={1.5} name={iconExpand} /> : <TreeIcon mx={1.5} name={iconCollapse} />}\n            </>\n          )}\n          {isReactText(text) ? <TreeText ml={textMl} {...{ isTruncated, text }} /> : text}\n        </Box>\n\n        {isCollapsable && !collapsedInternal && (\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.d.ts

@@ -1,6 +1,6 @@
+import { VuiComponent } from "../core/vui.js";
 import { TProps } from "../t/t.types.js";
 import "../t/index.js";
-import { VuiComponent } from "../core/vui.js";
 import "../index.js";
 
 //#region src/tree/treeText.d.ts
@@ -8,4 +8,5 @@ import "../index.js";
 declare const TreeText: VuiComponent<"span", TProps>;
 //#endregion
 export { TreeText };
+
 //# sourceMappingURL=treeText.d.ts.map

package/dist/tree/treeText.js

@@ -1,14 +1,17 @@
 import { cs, ellipsisOverflow } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import t_default from "../t/t.js";
+import "../t/index.js";
+import "../core/index.js";
 import { useTreeContext } from "./context.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/tree/treeText.tsx
 /** Displays text within the TreeItem. */
 const TreeText = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const styles = useStyleConfig("Tree", useTreeContext());
 	return /* @__PURE__ */ jsx(t_default, {
 		className: cs("vui-treeText", className),
@@ -25,5 +28,5 @@ var treeText_default = TreeText;
 
 //#endregion
 export { TreeText, treeText_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=treeText.js.map

package/dist/tree/treeText.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeText.js","names":["T"],"sources":["../../src/tree/treeText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs, ellipsisOverflow } from '../utils'\nimport { useTreeContext } from './context'\n\n/** Displays text within the TreeItem. */\nexport const TreeText = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Tree', useTreeContext())\n\n  return (\n    <T\n      className={cs('vui-treeText', className)}\n      fontSize=\"inherit\"\n      py={styles.item.py}\n      ref={ref}\n      {...ellipsisOverflow}\n      {...styles.text}\n      {...rest}\n    />\n  )\n})\n\nTreeText.displayName = 'TreeText'\nexport default TreeText\n"],"mappings":";;;;;;;;;AAOA,MAAa,WAAW,KAAqB,OAAO,QAAQ;CAC1D,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QACE,oBAACA;EACC,WAAW,GAAG,gBAAgB,UAAU;EACxC,UAAS;EACT,IAAI,OAAO,KAAK;EACX;EACL,GAAI;EACJ,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,SAAS,cAAc;AACvB,uBAAe"}
+{"version":3,"file":"treeText.js","names":["T"],"sources":["../../src/tree/treeText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs, ellipsisOverflow } from '../utils'\nimport { useTreeContext } from './context'\n\n/** Displays text within the TreeItem. */\nexport const TreeText = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Tree', useTreeContext())\n\n  return (\n    <T\n      className={cs('vui-treeText', className)}\n      fontSize=\"inherit\"\n      py={styles.item.py}\n      ref={ref}\n      {...ellipsisOverflow}\n      {...styles.text}\n      {...rest}\n    />\n  )\n})\n\nTreeText.displayName = 'TreeText'\nexport default TreeText\n"],"mappings":";;;;;;;;;;;;AAOA,MAAa,WAAW,KAAqB,OAAO,QAAQ;CAC1D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QACE,oBAACA;EACC,WAAW,GAAG,gBAAgB,UAAU;EACxC,UAAS;EACT,IAAI,OAAO,KAAK;EACX;EACL,GAAI;EACJ,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,SAAS,cAAc;AACvB,uBAAe"}

package/dist/tree/useTreeState.js

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

package/dist/tutorial/consts.js

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

package/dist/tutorial/index.d.ts

@@ -1,4 +1,4 @@
 import { CloseEvent, TutorialCardProps, TutorialDataStep, TutorialProps, TutorialStepProps, TutorialStepWrapper } from "./tutorial.types.js";
 import { Tutorial } from "./tutorial.js";
 import { TutorialCard } from "./tutorialCard.js";
-import { TutorialStep } from "./tutorialStep.js";
+import { TutorialStep } from "./tutorialStep.js";

package/dist/tutorial/index.js

@@ -0,0 +1,5 @@
+import { TutorialStep } from "./tutorialStep.js";
+import { TutorialCard } from "./tutorialCard.js";
+import { Tutorial } from "./tutorial.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/tutorial/tutorial.d.ts

@@ -1,5 +1,5 @@
 import { TutorialProps } from "./tutorial.types.js";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/tutorial/tutorial.d.ts
 /** Popover Tutorial is used to display information about a new, or existing feature. */
@@ -17,10 +17,11 @@ declare function Tutorial({
   isVisible,
   includeFinalPage,
   useContentTitle
-}: TutorialProps): react_jsx_runtime11.JSX.Element;
+}: TutorialProps): react_jsx_runtime12.JSX.Element;
 declare namespace Tutorial {
   var displayName: string;
 }
 //#endregion
 export { Tutorial };
+
 //# sourceMappingURL=tutorial.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tutorial.d.ts","names":[],"sources":["../../src/tutorial/tutorial.tsx"],"sourcesContent":[],"mappings":";;;;;iBAQgB,QAAA;;;;;;;;;;;;;;GAcb,gBAAa,mBAAA,CAAA,GAAA,CAAA;kBAdA,QAAA;EAAA,GAAA,CAAA,WAAQ,CAAA,CAAA,MAAA"}
+{"version":3,"file":"tutorial.d.ts","names":[],"sources":["../../src/tutorial/tutorial.tsx"],"sourcesContent":[],"mappings":";;;;;iBAQgB,QAAA;;;;;;;;;;;;;;GAcb,gBAAa,mBAAA,CAAA,GAAA,CAAA;kBAdA,QAAA;EAAA,IAAA,WAAQ,EAAA,MAAA"}

package/dist/tutorial/tutorial.js

@@ -1,7 +1,9 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { TutorialCard } from "./tutorialCard.js";
-import { jsx } from "react/jsx-runtime";
-import Tippy from "@tippyjs/react";
+import { cloneElement, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingPortal, autoUpdate, offset, shift, useFloating } from "@floating-ui/react";
 
 //#region src/tutorial/tutorial.tsx
 /** Popover Tutorial is used to display information about a new, or existing feature. */
@@ -10,8 +12,19 @@ function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFin
 		if (e === "dismissed") onDismiss?.();
 		if (e === "finished") onFinish?.();
 	};
-	return /* @__PURE__ */ jsx(Tippy, {
-		content: /* @__PURE__ */ jsx(TutorialCard, {
+	const { refs, floatingStyles } = useFloating({
+		open: isVisible,
+		placement,
+		middleware: [offset({
+			mainAxis: 2,
+			crossAxis: 0
+		}), shift({ padding: 5 })],
+		whileElementsMounted: isVisible ? autoUpdate : void 0
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isValidElement(children) ? cloneElement(children, { ref: refs.setReference }) : children, isVisible && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx("div", {
+		ref: refs.setFloating,
+		style: floatingStyles,
+		children: /* @__PURE__ */ jsx(TutorialCard, {
 			actionLabel,
 			className: cs("vui-tutorial", className),
 			onAction,
@@ -22,21 +35,12 @@ function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFin
 			title,
 			includeFinalPage,
 			useContentTitle
-		}),
-		interactive: true,
-		offset: [0, 2],
-		placement,
-		popperOptions: { modifiers: [{
-			name: "flip",
-			enabled: false
-		}] },
-		visible: isVisible,
-		children
-	});
+		})
+	}) })] });
 }
 Tutorial.displayName = "Tutorial";
 
 //#endregion
 export { Tutorial };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# 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 Tippy from '@tippyjs/react'\nimport type { JSXElementConstructor, ReactElement } 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  return (\n    <Tippy\n      content={\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      }\n      interactive\n      offset={[0, 2]}\n      placement={placement}\n      popperOptions={{\n        modifiers: [\n          {\n            name: 'flip',\n            enabled: false,\n          },\n        ],\n      }}\n      visible={isVisible}\n    >\n      {children as ReactElement<any, string | JSXElementConstructor<any>> | undefined}\n    </Tippy>\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;;AAGpC,QACE,oBAAC;EACC,SACE,oBAAC;GACc;GACb,WAAW,GAAG,gBAAgB,UAAU;GAC9B;GACV,iBAAiB,QAAQ,YAAY;GACrC,gBAAgB,QAAQ,WAAW;GACnB;GACT;GACA;GACW;GACD;IACjB;EAEJ;EACA,QAAQ,CAAC,GAAG,EAAE;EACH;EACX,eAAe,EACb,WAAW,CACT;GACE,MAAM;GACN,SAAS;GACV,CACF,EACF;EACD,SAAS;EAER;GACK;;AAIZ,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 = 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"}

package/dist/tutorial/tutorial.types.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Placement } from "tippy.js";
+import { Placement } from "@floating-ui/react";
 
 //#region src/tutorial/tutorial.types.d.ts
 type TutorialDataStep = {
@@ -85,4 +85,5 @@ type TutorialStepWrapper = {
 type CloseEvent = 'dismissed' | 'finished';
 //#endregion
 export { CloseEvent, TutorialCardProps, TutorialDataStep, TutorialProps, TutorialStepProps, TutorialStepWrapper };
+
 //# sourceMappingURL=tutorial.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tutorial.types.d.ts","names":[],"sources":["../../src/tutorial/tutorial.types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,gBAAA,CAAA,CAAA;;EAAA,KAAA,CAAA,CAAA,MAAA;EASA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA;EAIA,OAAM,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CATG,KAAA,CAAM,SAST;EAYJ,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,IAAA,CAAA,KAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA;EAEL,YAAA,CAAA,CAAA,CAAA,MAAA;CAAgB;AAeb,IAAA,CAjCA,aAAA,CAAA,CAAA,CAiCiB;EAyBjB,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,GAAA,CAAA,GAAA,CAAA,MAAA,CAAA,MAAA,CAAA,CAAA,OAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAaA,WAAA,CAAA,CAAA,CAAA,MAAA;EAKA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,OAAA,CAAA,GAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA;YAxEA,KAAA,CAAM;;;;;;;;;;;;cAYJ;;SAEL;;;;;;;;;;;;;;KAeG,iBAAA,CAAA,CAAA;;;;;;;;SAQH;;;;;;;;;;;;;;;;KAiBG,iBAAA,CAAA,CAAA;;;;;;qBAMS,KAAA,CAAM;;;;;;KAOf,mBAAA,CAAA,CAAA;;QAEJ;;KAGI,UAAA,CAAA,CAAA"}
+{"version":3,"file":"tutorial.types.d.ts","names":[],"sources":["../../src/tutorial/tutorial.types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,gBAAA;;EAAA,KAAA,EAAA,MAAA;EASA;EAIA,OAAM,CAAA,EAAA,MAAA,GATG,KAAA,CAAM,SAST;EAYJ;EAEL,YAAA,CAAA,EAAA,MAAA;CAAgB;AAeb,KAjCA,aAAA,GAiCiB;EAyBjB;EAaA,WAAA,CAAA,EAAA,MAAA;EAKA;YAxEA,KAAA,CAAM;;;;;;;;;;;;cAYJ;;SAEL;;;;;;;;;;;;;;KAeG,iBAAA;;;;;;;;SAQH;;;;;;;;;;;;;;;;KAiBG,iBAAA;;;;;;qBAMS,KAAA,CAAM;;;;;;KAOf,mBAAA;;QAEJ;;KAGI,UAAA"}

package/dist/tutorial/tutorialCard.d.ts

@@ -1,5 +1,5 @@
 import { TutorialCardProps } from "./tutorial.types.js";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/tutorial/tutorialCard.d.ts
 declare function TutorialCard({
@@ -14,10 +14,11 @@ declare function TutorialCard({
   onFinish,
   includeFinalPage,
   useContentTitle
-}: TutorialCardProps): react_jsx_runtime12.JSX.Element;
+}: TutorialCardProps): react_jsx_runtime13.JSX.Element;
 declare namespace TutorialCard {
   var displayName: string;
 }
 //#endregion
 export { TutorialCard };
+
 //# sourceMappingURL=tutorialCard.d.ts.map

package/dist/tutorial/tutorialCard.js

@@ -5,6 +5,7 @@ import { Card } from "../card/card.js";
 import { H4 } from "../heading/headings.js";
 import { tutorialColors } from "./consts.js";
 import { TutorialStep } from "./tutorialStep.js";
+import "../index.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -150,5 +151,5 @@ TutorialCard.displayName = "TutorialCard";
 
 //#endregion
 export { TutorialCard };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=tutorialCard.js.map

package/dist/tutorial/tutorialCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.js","names":["finalStep: TutorialDataStep"],"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,MAAMA,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":["finalStep: TutorialDataStep"],"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,MAAMA,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"}