@veracity/vui 4.0.3 → 5.0.0-alpha.375407.2603121328

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

@@ -1,14 +1,9 @@
 import { PropsOf } from "../utils/types.js";
-import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
-import "../icon/index.js";
 import { LinkProps } from "../link/link.types.js";
-import "../link/index.js";
 import { ListItemProps } from "../list/list.types.js";
-import "../list/index.js";
 import { JSX, ReactNode } from "react";
 
 //#region src/tree/tree.types.d.ts

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

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

package/dist/tree/treeIcon.d.ts

@@ -1,8 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { IconProps } from "../icon/icon.types.js";
-import "../icon/index.js";
-import "../index.js";
-
 //#region src/tree/treeIcon.d.ts
 /** Displays an icon on the side of the TreeItem. */
 declare const TreeIcon: VuiComponent<"svg", IconProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"treeIcon.d.ts","names":[],"sources":["../../src/tree/treeIcon.tsx"],"mappings":";;;;;;;cAOa,QAAA,EAAQ,YAAA,QAAA,SAAA"}
+{"version":3,"file":"treeIcon.d.ts","names":[],"sources":["../../src/tree/treeIcon.tsx"],"mappings":";;;;cAOa,QAAA,EAAQ,YAAA,QAAA,SAAA"}

package/dist/tree/treeIcon.js

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

package/dist/tree/treeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeIcon.js","names":[],"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,oBAAC;EAAK,WAAW,GAAG,gBAAgB,UAAU;EAAO;EAAK,MAAK;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EACxG;AAEF,SAAS,cAAc"}
+{"version":3,"file":"treeIcon.js","names":[],"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,oBAAC,MAAD;EAAM,WAAW,GAAG,gBAAgB,UAAU;EAAO;EAAK,MAAK;EAAK,GAAI,OAAO;EAAM,GAAI;EAAQ;EACxG;AAEF,SAAS,cAAc"}

package/dist/tree/treeItem.d.ts

@@ -1,11 +1,10 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { TreeItemProps } from "./tree.types.js";
-import "../index.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/tree/treeItem.d.ts
-declare const TreeItemBase: styled_components0.StyledComponent<"li", styled_components0.DefaultTheme, SystemProps, never>;
+declare const TreeItemBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 /**
  * Displays a tree item with text and optional icons. Can be shown as selected.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"treeItem.d.ts","names":[],"sources":["../../src/tree/treeItem.tsx"],"mappings":";;;;;;;cAWa,YAAA,EAAY,kBAAA,CAAA,eAAA,OAKxB,kBAAA,CALwB,YAAA,EAAA,WAAA;;;;cAUZ,QAAA,EAAQ,YAAA,OAAA,aAAA"}
+{"version":3,"file":"treeItem.d.ts","names":[],"sources":["../../src/tree/treeItem.tsx"],"mappings":";;;;;;cAWa,YAAA,EAAY,6BAAA,CAAA,oBAAA,QAKxB,kBAAA,CALwB,QAAA;;;;cAUZ,QAAA,EAAQ,YAAA,OAAA,aAAA"}

package/dist/tree/treeItem.js

@@ -126,5 +126,5 @@ TreeItem.displayName = "TreeItem";
 
 //#endregion
 export { TreeItemBase, TreeItem as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# 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 [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":[],"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,8 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { TProps } from "../t/t.types.js";
-import "../t/index.js";
-import "../index.js";
-
 //#region src/tree/treeText.d.ts
 /** Displays text within the TreeItem. */
 declare const TreeText: VuiComponent<"span", TProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"treeText.d.ts","names":[],"sources":["../../src/tree/treeText.tsx"],"mappings":";;;;;;;cAOa,QAAA,EAAQ,YAAA,SAAA,MAAA"}
+{"version":3,"file":"treeText.d.ts","names":[],"sources":["../../src/tree/treeText.tsx"],"mappings":";;;;cAOa,QAAA,EAAQ,YAAA,SAAA,MAAA"}

package/dist/tree/treeText.js

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

package/dist/tree/treeText.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeText.js","names":[],"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,oBAAC;EACC,WAAW,GAAG,gBAAgB,UAAU;EACxC,UAAS;EACT,IAAI,OAAO,KAAK;EACX;EACL,GAAI;EACJ,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,SAAS,cAAc"}
+{"version":3,"file":"treeText.js","names":[],"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,oBAAC,GAAD;EACE,WAAW,GAAG,gBAAgB,UAAU;EACxC,UAAS;EACT,IAAI,OAAO,KAAK;EACX;EACL,GAAI;EACJ,GAAI,OAAO;EACX,GAAI;EACJ;EAEJ;AAEF,SAAS,cAAc"}

package/dist/tree/useTreeState.js

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

package/dist/tutorial/consts.js

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

package/dist/tutorial/tutorial.js

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

package/dist/tutorial/tutorialCard.js

@@ -61,7 +61,8 @@ function TutorialCard({ actionLabel = "Action", className, title, readMoreLink,
 					icon: "uiTimes",
 					onClick: onDismiss,
 					scale: 2,
-					variant: "tertiaryLight"
+					variant: "tertiary",
+					intent: "brand"
 				})]
 			}),
 			/* @__PURE__ */ jsx(Box, {
@@ -92,7 +93,8 @@ function TutorialCard({ actionLabel = "Action", className, title, readMoreLink,
 							onClick: () => setActiveStep(activeStep - 1),
 							scale: 2,
 							transition: "none",
-							variant: "tertiaryLight",
+							variant: "tertiary",
+							intent: "brand",
 							w: "34"
 						}),
 						/* @__PURE__ */ jsx(Box, {
@@ -113,7 +115,8 @@ function TutorialCard({ actionLabel = "Action", className, title, readMoreLink,
 							onClick: () => setActiveStep(activeStep + 1),
 							scale: 2,
 							transition: "none",
-							variant: "tertiaryLight",
+							variant: "tertiary",
+							intent: "brand",
 							w: "34"
 						})
 					]
@@ -124,20 +127,23 @@ function TutorialCard({ actionLabel = "Action", className, title, readMoreLink,
 						showSkipButton && !isFinalStep && /* @__PURE__ */ jsx(Button, {
 							mx: 1,
 							onClick: onDismiss,
-							variant: "secondaryLight",
+							variant: "secondary",
+							intent: "contrast",
 							children: "Skip"
 						}),
 						isFinalStep && /* @__PURE__ */ jsx(Button, {
 							mx: 1,
 							onClick: onFinish,
-							variant: "primaryLight",
+							variant: "primary",
+							intent: "contrast",
 							children: "I got it"
 						}),
 						!!onAction && /* @__PURE__ */ jsx(Button, {
 							ml: 1,
 							mr: showSkipButton || isFinalStep ? 12 : 2,
 							onClick: onAction,
-							variant: "primaryLight",
+							variant: "primary",
+							intent: "contrast",
 							children: actionLabel
 						})
 					]
@@ -150,5 +156,5 @@ TutorialCard.displayName = "TutorialCard";
 
 //#endregion
 export { TutorialCard };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=tutorialCard.js.map

package/dist/tutorial/tutorialCard.js.map

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

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

package/dist/tutorial/tutorialStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialStep.js","names":[],"sources":["../../src/tutorial/tutorialStep.tsx"],"sourcesContent":["import { Box, H5, v } from '../index'\nimport { tutorialColors } from './consts'\nimport type { TutorialStepProps } from './tutorial.types'\n\nexport const TutorialStep = ({ active, content, title, useContentTitle }: TutorialStepProps) => (\n  <v.div className=\"vui-tutorialStep\" hidden={!active} pb={2}>\n    {!useContentTitle && (\n      <H5 color={tutorialColors.color} fontWeight=\"medium\" mb={1}>\n        {title}\n      </H5>\n    )}\n    <Box>{content}</Box>\n  </v.div>\n)\n\nTutorialStep.displayName = 'TutorialStep'\n"],"mappings":";;;;;;;AAIA,MAAa,gBAAgB,EAAE,QAAQ,SAAS,OAAO,sBACrD,qBAAC,EAAE;CAAI,WAAU;CAAmB,QAAQ,CAAC;CAAQ,IAAI;YACtD,CAAC,mBACA,oBAAC;EAAG,OAAO,eAAe;EAAO,YAAW;EAAS,IAAI;YACtD;GACE,EAEP,oBAAC,iBAAK,UAAc;EACd;AAGV,aAAa,cAAc"}
+{"version":3,"file":"tutorialStep.js","names":[],"sources":["../../src/tutorial/tutorialStep.tsx"],"sourcesContent":["import { Box, H5, v } from '../index'\nimport { tutorialColors } from './consts'\nimport type { TutorialStepProps } from './tutorial.types'\n\nexport const TutorialStep = ({ active, content, title, useContentTitle }: TutorialStepProps) => (\n  <v.div className=\"vui-tutorialStep\" hidden={!active} pb={2}>\n    {!useContentTitle && (\n      <H5 color={tutorialColors.color} fontWeight=\"medium\" mb={1}>\n        {title}\n      </H5>\n    )}\n    <Box>{content}</Box>\n  </v.div>\n)\n\nTutorialStep.displayName = 'TutorialStep'\n"],"mappings":";;;;;;;AAIA,MAAa,gBAAgB,EAAE,QAAQ,SAAS,OAAO,sBACrD,qBAAC,EAAE,KAAH;CAAO,WAAU;CAAmB,QAAQ,CAAC;CAAQ,IAAI;WAAzD,CACG,CAAC,mBACA,oBAAC,IAAD;EAAI,OAAO,eAAe;EAAO,YAAW;EAAS,IAAI;YACtD;EACE,GAEP,oBAAC,KAAD,YAAM,SAAc,EACd;;AAGV,aAAa,cAAc"}

package/dist/utils/array.js

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

package/dist/utils/assertion.js

@@ -32,5 +32,5 @@ function isString(value) {
 
 //#endregion
 export { isArray, isFunction, isJsx, isNumber, isObject, isReactText, isString };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# 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__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# 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__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=dates.js.map

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__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=dom.js.map

package/dist/utils/formatDate.js

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

package/dist/utils/function.js

@@ -16,5 +16,5 @@ function runIfFn(valueOrFn, ...args) {
 
 //#endregion
 export { callAll, noop, runIfFn };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=function.js.map

package/dist/utils/images.js

@@ -20,5 +20,5 @@ function loadImageUrl(url) {
 
 //#endregion
 export { loadImageUrl };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=images.js.map

package/dist/utils/number.js

@@ -6,5 +6,5 @@ function random(start = 0, end = 1e6) {
 
 //#endregion
 export { random };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=number.js.map

package/dist/utils/object.js

@@ -32,5 +32,5 @@ function objectFilter(object, fn) {
 
 //#endregion
 export { filterUndefined, merge, objectFilter };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=object.js.map

package/dist/utils/react.js

@@ -109,5 +109,5 @@ function useIsMounted() {
 
 //#endregion
 export { assignRef, createContext$1 as createContext, mergeRefs, useCallbackRef, useClickOutside, useControlled, useIds, useIsMounted };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=react.js.map

package/dist/utils/string.js

@@ -19,5 +19,5 @@ const generateMenuItemId = (title, level = 0) => {
 
 //#endregion
 export { generateMenuItemId, normalizeToId };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=string.js.map

package/dist/utils/styles.js

@@ -75,5 +75,5 @@ const ellipsisOverflow = {
 
 //#endregion
 export { HSLToRGBA, cs, ellipsisOverflow, hexToRGBA, parseHSL, vuiColorToRGBA };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=styles.js.map

package/dist/utils/uid.js

@@ -3,5 +3,5 @@ const uid = (prefix) => `${prefix ? `${prefix}_` : ""}${Date.now().toString(36)
 
 //#endregion
 export { uid };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=uid.js.map

package/dist/utils/window.js

@@ -3,5 +3,5 @@ const isActivePath = (path) => !!path && window.location.pathname.includes(path)
 
 //#endregion
 export { isActivePath };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=window.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "4.0.3",
+  "version": "5.0.0-alpha.375407.2603121328",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Veracity",
@@ -29,33 +29,39 @@
     "tslint": "tsc --noEmit"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.18",
-    "@types/styled-components": "5.1.36",
-    "@xstyled/core": "2.5.0",
-    "@xstyled/styled-components": "2.5.0",
-    "@xstyled/system": "2.5.0",
-    "@xstyled/util": "2.2.3",
+    "@floating-ui/react": "^0.27.19",
+    "@xstyled/core": "3.8.2",
+    "@xstyled/styled-components": "4.1.0",
+    "@xstyled/system": "3.8.2",
+    "@xstyled/util": "3.7.0",
     "react-focus-lock": "2.13.7",
     "react-slider": "2.0.6",
-    "styled-components": "^5.3.11"
+    "styled-components": "^6.3.11"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
-    "@types/node": "^24",
+    "@types/node": "^25",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-slider": "^1.3.6",
     "@veracity/eslint-config": "*",
     "@veracity/tsconfig": "*",
-    "eslint": "^9.39.2",
+    "eslint": "^10.0.3",
     "eslint-plugin-perfectionist": "^5.6.0",
-    "oxfmt": "^0.33.0",
+    "oxfmt": "^0.39.0",
     "premove": "^4.0.0",
-    "publint": "^0.3.17",
-    "tsdown": "^0.20.3"
+    "publint": "^0.3.18",
+    "tsdown": "^0.21.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "inlinedDependencies": {
+    "@floating-ui/core": "1.7.5",
+    "@floating-ui/dom": "1.7.6",
+    "@floating-ui/react-dom": "2.1.8",
+    "@floating-ui/utils": "0.2.11",
+    "csstype": "3.2.3"
   }
 }

package/dist/sidemenu/consts.js

@@ -1,8 +0,0 @@
-//#region src/sidemenu/consts.ts
-const collapsedWidth = 52;
-const expandedWidth = 240;
-
-//#endregion
-export { collapsedWidth, expandedWidth };
-globalThis.__vuiVersion__ = "4.0.3"
-//# sourceMappingURL=consts.js.map

package/dist/sidemenu/consts.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../src/sidemenu/consts.ts"],"sourcesContent":["export const collapsedWidth = 52\n\nexport const expandedWidth = 240\n"],"mappings":";AAAA,MAAa,iBAAiB;AAE9B,MAAa,gBAAgB"}

package/dist/sidemenuV2/consts.js

@@ -1,8 +0,0 @@
-//#region src/sidemenuV2/consts.ts
-const collapsedWidth = 52;
-const expandedWidth = 240;
-
-//#endregion
-export { collapsedWidth, expandedWidth };
-globalThis.__vuiVersion__ = "4.0.3"
-//# sourceMappingURL=consts.js.map

package/dist/sidemenuV2/consts.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../src/sidemenuV2/consts.ts"],"sourcesContent":["export const collapsedWidth = 52\n\nexport const expandedWidth = 240\n"],"mappings":";AAAA,MAAa,iBAAiB;AAE9B,MAAa,gBAAgB"}