@hitachivantara/uikit-react-lab 5.45.1 → 5.46.1

package/dist/cjs/Blade/Blade.cjs

@@ -80,8 +80,8 @@ const HvBlade = (props) => {
         component: "div",
         role: "button",
         className: cx(classes.button, {
-          [classes.disabled]: disabled,
-          [classes.textOnlyLabel]: typeof buttonLabel === "string"
+          [classes.textOnlyLabel]: typeof buttonLabel === "string",
+          [classes.disabled]: disabled
         }),
         style: { flexShrink: headingLevel === void 0 ? 0 : void 0 },
         disabled,

package/dist/cjs/Blade/Blade.styles.cjs

@@ -12,10 +12,10 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvBlade", {
     },
     transition: "flex-grow 600ms linear",
     zIndex: 0,
-    color: uikitStyles.theme.colors.secondary,
+    color: uikitStyles.theme.colors.text,
     backgroundColor: uikitStyles.theme.colors.atmo1,
     borderRadius: uikitStyles.theme.radii.round,
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`
+    border: `1px solid ${uikitStyles.theme.colors.border}`
   },
   expanded: {},
   fullWidth: {
@@ -33,10 +33,10 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvBlade", {
     },
     "&:focus": {
       outline: "none",
-      background: uikitStyles.theme.colors.containerBackgroundHover
+      background: uikitStyles.theme.colors.bgHover
     },
     "&:hover": {
-      background: uikitStyles.theme.colors.containerBackgroundHover
+      background: uikitStyles.theme.colors.bgHover
     },
     "&:focus-visible": {
       ...uikitReactCore.outlineStyles,
@@ -58,7 +58,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvBlade", {
   },
   disabled: {
     cursor: "not-allowed",
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     "&:focus": {
       background: "none"
     },

package/dist/cjs/Dashboard/Dashboard.styles.cjs

@@ -38,7 +38,7 @@ const gridStyles = react.css`
   }
 
   .react-grid-item.react-grid-placeholder {
-    background: ${uikitReactCore.theme.colors.primary_20};
+    background: ${uikitReactCore.theme.colors.primaryDimmed};
     transition-duration: 100ms;
     z-index: 2;
     -webkit-user-select: none;

package/dist/cjs/Flow/Background/Background.cjs

@@ -10,7 +10,7 @@ const HvFlowBackground = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactflow.Background,
     {
-      color: uikitStyles.getColor(color, uikitStyles.theme.colors.secondary_80),
+      color: uikitStyles.getColor(color, uikitStyles.theme.colors.textSubtle),
       gap: 16,
       ...others
     }

package/dist/cjs/Flow/Flow.styles.cjs

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlow", {
   root: {
     height: "100%",
     [`& .selected > .${BaseNode_styles.staticClasses.root}`]: {
-      border: `1px solid ${uikitReactCore.theme.colors.secondary_60}`,
+      border: `1px solid ${uikitReactCore.theme.colors.textDisabled}`,
       borderRadius: uikitReactCore.theme.radii.round,
       boxSizing: "border-box"
     }

package/dist/cjs/Flow/Minimap/Minimap.cjs

@@ -5,10 +5,10 @@ const reactflow = require("reactflow");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Minimap_styles = require("./Minimap.styles.cjs");
 const HvFlowMinimap = ({
-  nodeColor = "atmo4",
-  maskColor = "atmo3",
-  maskStrokeColor = "atmo3",
-  nodeStrokeColor = "atmo4",
+  nodeColor = "border",
+  maskColor = "borderSubtle",
+  maskStrokeColor = "borderSubtle",
+  nodeStrokeColor = "border",
   classes: classesProp,
   className,
   ...others
@@ -18,10 +18,10 @@ const HvFlowMinimap = ({
     reactflow.MiniMap,
     {
       className: cx(classes.root, className),
-      nodeColor: typeof nodeColor === "string" ? uikitStyles.getColor(nodeColor, "atmo4") : nodeColor,
-      nodeStrokeColor: typeof nodeStrokeColor === "string" ? uikitStyles.getColor(nodeStrokeColor, "atmo4") : nodeStrokeColor,
-      maskColor: uikitStyles.getColor(maskColor, "atmo3"),
-      maskStrokeColor: uikitStyles.getColor(maskStrokeColor, "atmo3"),
+      nodeColor: typeof nodeColor === "string" ? uikitStyles.getColor(nodeColor, "border") : nodeColor,
+      nodeStrokeColor: typeof nodeStrokeColor === "string" ? uikitStyles.getColor(nodeStrokeColor, "border") : nodeStrokeColor,
+      maskColor: uikitStyles.getColor(maskColor, "borderSubtle"),
+      maskStrokeColor: uikitStyles.getColor(maskStrokeColor, "borderSubtle"),
       ...others
     }
   );

package/dist/cjs/Flow/Minimap/Minimap.styles.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowMinimap", {
   root: {
-    "&.react-flow__minimap": { backgroundColor: uikitReactCore.theme.colors.atmo2 }
+    "&.react-flow__minimap": { backgroundColor: uikitReactCore.theme.colors.bgPage }
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Flow/Node/BaseNode.styles.cjs

@@ -4,7 +4,7 @@ const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowBaseNode", {
   root: {
     borderRadius: uikitReactCore.theme.radii.round,
-    backgroundColor: uikitReactCore.theme.colors.atmo1,
+    backgroundColor: uikitReactCore.theme.colors.bgContainer,
     boxShadow: uikitReactCore.theme.colors.shadow,
     minWidth: "250px",
     border: "1px solid var(--node-color)"
@@ -32,17 +32,17 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowBaseNo
     display: "flex",
     justifyContent: "center",
     padding: uikitReactCore.theme.space.xs,
-    backgroundColor: uikitReactCore.theme.colors.atmo2,
-    borderTop: `1px solid ${uikitReactCore.theme.colors.atmo3}`,
-    borderBottom: `1px solid ${uikitReactCore.theme.colors.atmo3}`
+    backgroundColor: uikitReactCore.theme.colors.bgPage,
+    borderTop: `1px solid ${uikitReactCore.theme.colors.borderSubtle}`,
+    borderBottom: `1px solid ${uikitReactCore.theme.colors.borderSubtle}`
   },
   outputsTitleContainer: {
     display: "flex",
     justifyContent: "center",
     padding: uikitReactCore.theme.space.xs,
-    backgroundColor: uikitReactCore.theme.colors.atmo2,
-    borderTop: `1px solid ${uikitReactCore.theme.colors.atmo3}`,
-    borderBottom: `1px solid ${uikitReactCore.theme.colors.atmo3}`
+    backgroundColor: uikitReactCore.theme.colors.bgPage,
+    borderTop: `1px solid ${uikitReactCore.theme.colors.borderSubtle}`,
+    borderBottom: `1px solid ${uikitReactCore.theme.colors.borderSubtle}`
   },
   contentContainer: {},
   inputsContainer: {
@@ -86,10 +86,10 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowBaseNo
   handle: {
     zIndex: uikitReactCore.theme.zIndices.overlay,
     marginLeft: 2,
-    backgroundColor: uikitReactCore.theme.colors.atmo1,
+    backgroundColor: uikitReactCore.theme.colors.bgContainer,
     height: 10,
     width: 10,
-    border: `1px solid ${uikitReactCore.theme.colors.secondary_60}`,
+    border: `1px solid ${uikitReactCore.theme.colors.textDisabled}`,
     "&.react-flow__handle-left": {
       left: -23
     },
@@ -97,21 +97,21 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowBaseNo
       right: -21
     },
     "&.react-flow__handle-connecting": {
-      backgroundColor: uikitReactCore.theme.colors.negative_20
+      backgroundColor: uikitReactCore.theme.colors.negativeDimmed
     },
     "&.react-flow__handle-valid": {
-      backgroundColor: uikitReactCore.theme.colors.positive_20
+      backgroundColor: uikitReactCore.theme.colors.positiveDimmed
     },
     "::before": {
       fontSize: 14,
-      color: uikitReactCore.theme.colors.secondary_60,
+      color: uikitReactCore.theme.colors.textDisabled,
       content: '"+"',
       marginTop: -7,
       position: "absolute"
     }
   },
   handleConnected: {
-    backgroundColor: uikitReactCore.theme.colors.secondary_60,
+    backgroundColor: uikitReactCore.theme.colors.textDisabled,
     width: 8,
     height: 8,
     "::before": {
@@ -124,11 +124,11 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowBaseNo
     height: 10,
     margin: uikitReactCore.theme.spacing(0, uikitReactCore.theme.space.xs),
     borderRadius: uikitReactCore.theme.radii.full,
-    backgroundColor: uikitReactCore.theme.colors.negative_20
+    backgroundColor: uikitReactCore.theme.colors.negativeDimmed
   },
   footerContainer: {
     padding: uikitReactCore.theme.space.sm,
-    borderTop: `1px solid ${uikitReactCore.theme.colors.atmo3}`
+    borderTop: `1px solid ${uikitReactCore.theme.colors.borderSubtle}`
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Flow/Node/Node.styles.cjs

@@ -29,7 +29,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowNode",
     gap: 0
   },
   paramsContainer: {
-    borderTop: `1px solid ${uikitReactCore.theme.colors.atmo4}`,
+    borderTop: `1px solid ${uikitReactCore.theme.colors.border}`,
     display: "flex",
     flexDirection: "column",
     gap: uikitReactCore.theme.space.xs,

package/dist/cjs/Flow/Sidebar/Sidebar.styles.cjs

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowSideba
     padding: uikitReactCore.theme.spacing("sm", "lg", "xs", "sm")
   },
   contentContainer: { padding: uikitReactCore.theme.spacing(0, "lg", "sm", "lg") },
-  description: { color: uikitReactCore.theme.colors.secondary_80 },
+  description: { color: uikitReactCore.theme.colors.textSubtle },
   searchRoot: {
     paddingTop: uikitReactCore.theme.space.sm,
     paddingBottom: uikitReactCore.theme.space.sm

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.cjs

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      border: `1px solid ${uikitReactCore.theme.colors.atmo4}`,
+      border: `1px solid ${uikitReactCore.theme.colors.border}`,
       padding: uikitReactCore.theme.spacing(0, 0, 0, "sm"),
       cursor: "pointer",
       boxShadow: `0 1px 0 ${uikitReactCore.theme.colors.shad1}`,
@@ -16,7 +16,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
         ...uikitReactCore.outlineStyles
       }
     },
-    dragging: { borderColor: uikitReactCore.theme.colors.primary_80 }
+    dragging: { borderColor: uikitReactCore.theme.colors.primaryStrong }
   }
 );
 exports.staticClasses = staticClasses;

package/dist/cjs/Flow/base.cjs

@@ -45,7 +45,7 @@ const flowStyles = react.css`
   }
   .react-flow__edge-path,
   .react-flow__connection-path {
-    stroke: ${uikitReactCore.theme.colors.secondary};
+    stroke: ${uikitReactCore.theme.colors.text};
     stroke-width: 1;
     fill: none;
   }
@@ -235,13 +235,13 @@ const flowStyles = react.css`
     padding: ${uikitReactCore.theme.space.sm};
     border-radius: ${uikitReactCore.theme.radii.round};
     width: 150px;
-    color: ${uikitReactCore.theme.colors.secondary};
+    color: ${uikitReactCore.theme.colors.text};
     text-align: center;
     border: 1px solid ${uikitReactCore.theme.colors.negative};
-    background-color: ${uikitReactCore.theme.colors.negative_20};
+    background-color: ${uikitReactCore.theme.colors.negativeDimmed};
   }
   .react-flow__node-group {
-    color: ${uikitReactCore.theme.colors.secondary};
+    color: ${uikitReactCore.theme.colors.text};
     text-align: center;
   }
   .react-flow__node-default::before {
@@ -373,7 +373,7 @@ const flowStyles = react.css`
   }
   /* line styles */
   .react-flow__resize-control.line {
-    border-color: ${uikitReactCore.theme.colors.primary_80};
+    border-color: ${uikitReactCore.theme.colors.primaryStrong};
     border-width: 0;
     border-style: dashed;
   }

package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.cjs

@@ -43,8 +43,8 @@ const HvStep = ({
     xl: squareL + 24
   }[size];
   const backgroundColor = utils.getColor(state);
-  const color = state === "Pending" ? "atmo2" : utils.getSemantic(state);
-  const status = state === "Current" ? "secondary_60" : void 0;
+  const color = state === "Pending" ? "bgPage" : utils.getSemantic(state);
+  const status = state === "Current" ? "textDisabled" : void 0;
   const IconComponent = iconStateObject[state];
   return /* @__PURE__ */ jsxRuntime.jsx(
     uikitReactCore.HvButtonBase,

package/dist/cjs/StepNavigation/DefaultNavigation/utils.cjs

@@ -5,17 +5,17 @@ const getColor = (state) => ({
   Pending: uikitStyles.theme.colors.warning ?? "warning",
   Failed: uikitStyles.theme.colors.negative ?? "negative",
   Completed: uikitStyles.theme.colors.positive ?? "positive",
-  Current: uikitStyles.theme.colors.secondary ?? "secondary",
-  Disabled: uikitStyles.theme.colors.secondary_60 ?? "secondary_60",
-  Enabled: uikitStyles.theme.colors.secondary ?? "secondary"
+  Current: uikitStyles.theme.colors.text ?? "text",
+  Disabled: uikitStyles.theme.colors.textDisabled ?? "textDisabled",
+  Enabled: uikitStyles.theme.colors.text ?? "text"
 })[state];
 const getSemantic = (state) => ({
   Pending: "warning",
   Failed: "negative",
   Completed: "positive",
-  Current: "secondary",
-  Disabled: "secondary_60",
-  Enabled: "secondary"
+  Current: "text",
+  Disabled: "textDisabled",
+  Enabled: "text"
 })[state];
 const EXTRA_SMALL = { container: 32, avatar: 24 };
 const SMALL = { container: 40, avatar: 32 };

package/dist/cjs/StepNavigation/SimpleNavigation/Dot/Dot.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const utils = require("../utils.cjs");
 const Dot_styles = require("./Dot.styles.cjs");
 const HvDot = ({
@@ -11,34 +12,30 @@ const HvDot = ({
   title,
   size = "sm",
   onClick,
-  disabled
+  disabled: disabledProp
 }) => {
-  const { classes, cx, css } = Dot_styles.useClasses(classesProp);
+  const { classes, cx } = Dot_styles.useClasses(classesProp);
   const dotSize = utils.dotSizes[size] * (state === "Current" ? 1.5 : 1);
+  const disabled = disabledProp ?? ["Current", "Disabled"].includes(state);
   return /* @__PURE__ */ jsxRuntime.jsx(
     uikitReactCore.HvButton,
     {
+      style: uikitReactUtils.mergeStyles(void 0, {
+        "--dotColor": utils.getColor(state),
+        "--dotSize": `${dotSize}px`
+      }),
       className: cx(
-        css({
-          backgroundColor: utils.getColor(state),
-          width: dotSize,
-          height: dotSize,
-          "&:hover, &:disabled": {
-            backgroundColor: utils.getColor(state)
-          }
-        }),
         classes.root,
         {
           [classes.active]: state === "Current",
-          [classes.ghostDisabled]: disabled ?? ["Current", "Disabled"].includes(state)
+          [classes.ghostDisabled]: disabled
         },
         className
       ),
-      "aria-label": `${title}`,
+      "aria-label": title,
       icon: true,
-      disabled: disabled ?? ["Current", "Disabled"].includes(state),
-      onClick,
-      children: []
+      disabled,
+      onClick
     }
   );
 };

package/dist/cjs/StepNavigation/SimpleNavigation/Dot/Dot.styles.cjs

@@ -2,7 +2,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const { staticClasses, useClasses } = uikitReactCore.createClasses("HvDot", {
-  root: { borderRadius: uikitReactCore.theme.radii.full, zIndex: 1 },
+  root: {
+    borderRadius: uikitReactCore.theme.radii.full,
+    zIndex: 1,
+    width: "var(--dotSize)",
+    height: "var(--dotSize)",
+    "&,:hover,:disabled": {
+      backgroundColor: "var(--dotColor)"
+    }
+  },
   active: {},
   ghostDisabled: {}
 });

package/dist/cjs/StepNavigation/SimpleNavigation/utils.cjs

@@ -8,6 +8,6 @@ const dotSizes = {
   lg: 14,
   xl: 16
 };
-const getColor = (state) => state === "Disabled" ? uikitStyles.theme.colors.secondary_60 : uikitStyles.theme.colors.secondary;
+const getColor = (state) => state === "Disabled" ? uikitStyles.theme.colors.textDisabled : uikitStyles.theme.colors.text;
 exports.dotSizes = dotSizes;
 exports.getColor = getColor;

package/dist/cjs/Wizard/WizardContent/WizardContent.styles.cjs

@@ -28,7 +28,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvWizardCont
     top: 0,
     minWidth: 280,
     boxShadow: uikitStyles.theme.colors.shadow,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     transition: "transform 0.3s",
     transitionTimingFunction: "ease-in-out",
     overflowY: "scroll"

package/dist/cjs/Wizard/WizardTitle/WizardTitle.cjs

@@ -55,6 +55,7 @@ const HvWizardTitle = ({
         classes.messageContainer,
         classes.titleContainer
       ),
+      showIcon: false,
       children: [
         title && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title3", component: "div", children: title }),
         !!steps.length && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Wizard/WizardTitle/WizardTitle.styles.cjs

@@ -4,7 +4,7 @@ const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactCore.createClasses("HvWizardTitle", {
   root: {
-    backgroundColor: uikitStyles.theme.colors.atmo2,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     justifyContent: "space-between",
     paddingRight: uikitStyles.theme.space.sm
   },

package/dist/esm/Blade/Blade.js

@@ -79,8 +79,8 @@ const HvBlade = (props) => {
         component: "div",
         role: "button",
         className: cx(classes.button, {
-          [classes.disabled]: disabled,
-          [classes.textOnlyLabel]: typeof buttonLabel === "string"
+          [classes.textOnlyLabel]: typeof buttonLabel === "string",
+          [classes.disabled]: disabled
         }),
         style: { flexShrink: headingLevel === void 0 ? 0 : void 0 },
         disabled,

package/dist/esm/Blade/Blade.styles.js

@@ -10,10 +10,10 @@ const { staticClasses, useClasses } = createClasses("HvBlade", {
     },
     transition: "flex-grow 600ms linear",
     zIndex: 0,
-    color: theme.colors.secondary,
+    color: theme.colors.text,
     backgroundColor: theme.colors.atmo1,
     borderRadius: theme.radii.round,
-    border: `1px solid ${theme.colors.atmo4}`
+    border: `1px solid ${theme.colors.border}`
   },
   expanded: {},
   fullWidth: {
@@ -31,10 +31,10 @@ const { staticClasses, useClasses } = createClasses("HvBlade", {
     },
     "&:focus": {
       outline: "none",
-      background: theme.colors.containerBackgroundHover
+      background: theme.colors.bgHover
     },
     "&:hover": {
-      background: theme.colors.containerBackgroundHover
+      background: theme.colors.bgHover
     },
     "&:focus-visible": {
       ...outlineStyles,
@@ -56,7 +56,7 @@ const { staticClasses, useClasses } = createClasses("HvBlade", {
   },
   disabled: {
     cursor: "not-allowed",
-    color: theme.colors.secondary_60,
+    color: theme.colors.textDisabled,
     "&:focus": {
       background: "none"
     },

package/dist/esm/Dashboard/Dashboard.styles.js

@@ -36,7 +36,7 @@ const gridStyles = css`
   }
 
   .react-grid-item.react-grid-placeholder {
-    background: ${theme.colors.primary_20};
+    background: ${theme.colors.primaryDimmed};
     transition-duration: 100ms;
     z-index: 2;
     -webkit-user-select: none;

package/dist/esm/Flow/Background/Background.js

@@ -8,7 +8,7 @@ const HvFlowBackground = ({
   return /* @__PURE__ */ jsx(
     Background,
     {
-      color: getColor(color, theme.colors.secondary_80),
+      color: getColor(color, theme.colors.textSubtle),
       gap: 16,
       ...others
     }

package/dist/esm/Flow/Flow.styles.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvFlow", {
   root: {
     height: "100%",
     [`& .selected > .${staticClasses$1.root}`]: {
-      border: `1px solid ${theme.colors.secondary_60}`,
+      border: `1px solid ${theme.colors.textDisabled}`,
       borderRadius: theme.radii.round,
       boxSizing: "border-box"
     }

package/dist/esm/Flow/Minimap/Minimap.js

@@ -4,10 +4,10 @@ import { getColor } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./Minimap.styles.js";
 import { staticClasses } from "./Minimap.styles.js";
 const HvFlowMinimap = ({
-  nodeColor = "atmo4",
-  maskColor = "atmo3",
-  maskStrokeColor = "atmo3",
-  nodeStrokeColor = "atmo4",
+  nodeColor = "border",
+  maskColor = "borderSubtle",
+  maskStrokeColor = "borderSubtle",
+  nodeStrokeColor = "border",
   classes: classesProp,
   className,
   ...others
@@ -17,10 +17,10 @@ const HvFlowMinimap = ({
     MiniMap,
     {
       className: cx(classes.root, className),
-      nodeColor: typeof nodeColor === "string" ? getColor(nodeColor, "atmo4") : nodeColor,
-      nodeStrokeColor: typeof nodeStrokeColor === "string" ? getColor(nodeStrokeColor, "atmo4") : nodeStrokeColor,
-      maskColor: getColor(maskColor, "atmo3"),
-      maskStrokeColor: getColor(maskStrokeColor, "atmo3"),
+      nodeColor: typeof nodeColor === "string" ? getColor(nodeColor, "border") : nodeColor,
+      nodeStrokeColor: typeof nodeStrokeColor === "string" ? getColor(nodeStrokeColor, "border") : nodeStrokeColor,
+      maskColor: getColor(maskColor, "borderSubtle"),
+      maskStrokeColor: getColor(maskStrokeColor, "borderSubtle"),
       ...others
     }
   );

package/dist/esm/Flow/Minimap/Minimap.styles.js

@@ -1,7 +1,7 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 const { staticClasses, useClasses } = createClasses("HvFlowMinimap", {
   root: {
-    "&.react-flow__minimap": { backgroundColor: theme.colors.atmo2 }
+    "&.react-flow__minimap": { backgroundColor: theme.colors.bgPage }
   }
 });
 export {

package/dist/esm/Flow/Node/BaseNode.styles.js

@@ -2,7 +2,7 @@ import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
   root: {
     borderRadius: theme.radii.round,
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     boxShadow: theme.colors.shadow,
     minWidth: "250px",
     border: "1px solid var(--node-color)"
@@ -30,17 +30,17 @@ const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
     display: "flex",
     justifyContent: "center",
     padding: theme.space.xs,
-    backgroundColor: theme.colors.atmo2,
-    borderTop: `1px solid ${theme.colors.atmo3}`,
-    borderBottom: `1px solid ${theme.colors.atmo3}`
+    backgroundColor: theme.colors.bgPage,
+    borderTop: `1px solid ${theme.colors.borderSubtle}`,
+    borderBottom: `1px solid ${theme.colors.borderSubtle}`
   },
   outputsTitleContainer: {
     display: "flex",
     justifyContent: "center",
     padding: theme.space.xs,
-    backgroundColor: theme.colors.atmo2,
-    borderTop: `1px solid ${theme.colors.atmo3}`,
-    borderBottom: `1px solid ${theme.colors.atmo3}`
+    backgroundColor: theme.colors.bgPage,
+    borderTop: `1px solid ${theme.colors.borderSubtle}`,
+    borderBottom: `1px solid ${theme.colors.borderSubtle}`
   },
   contentContainer: {},
   inputsContainer: {
@@ -84,10 +84,10 @@ const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
   handle: {
     zIndex: theme.zIndices.overlay,
     marginLeft: 2,
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     height: 10,
     width: 10,
-    border: `1px solid ${theme.colors.secondary_60}`,
+    border: `1px solid ${theme.colors.textDisabled}`,
     "&.react-flow__handle-left": {
       left: -23
     },
@@ -95,21 +95,21 @@ const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
       right: -21
     },
     "&.react-flow__handle-connecting": {
-      backgroundColor: theme.colors.negative_20
+      backgroundColor: theme.colors.negativeDimmed
     },
     "&.react-flow__handle-valid": {
-      backgroundColor: theme.colors.positive_20
+      backgroundColor: theme.colors.positiveDimmed
     },
     "::before": {
       fontSize: 14,
-      color: theme.colors.secondary_60,
+      color: theme.colors.textDisabled,
       content: '"+"',
       marginTop: -7,
       position: "absolute"
     }
   },
   handleConnected: {
-    backgroundColor: theme.colors.secondary_60,
+    backgroundColor: theme.colors.textDisabled,
     width: 8,
     height: 8,
     "::before": {
@@ -122,11 +122,11 @@ const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
     height: 10,
     margin: theme.spacing(0, theme.space.xs),
     borderRadius: theme.radii.full,
-    backgroundColor: theme.colors.negative_20
+    backgroundColor: theme.colors.negativeDimmed
   },
   footerContainer: {
     padding: theme.space.sm,
-    borderTop: `1px solid ${theme.colors.atmo3}`
+    borderTop: `1px solid ${theme.colors.borderSubtle}`
   }
 });
 export {

package/dist/esm/Flow/Node/Node.styles.js

@@ -27,7 +27,7 @@ const { staticClasses, useClasses } = createClasses("HvFlowNode", {
     gap: 0
   },
   paramsContainer: {
-    borderTop: `1px solid ${theme.colors.atmo4}`,
+    borderTop: `1px solid ${theme.colors.border}`,
     display: "flex",
     flexDirection: "column",
     gap: theme.space.xs,

package/dist/esm/Flow/Sidebar/Sidebar.styles.js

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = createClasses("HvFlowSidebar", {
     padding: theme.spacing("sm", "lg", "xs", "sm")
   },
   contentContainer: { padding: theme.spacing(0, "lg", "sm", "lg") },
-  description: { color: theme.colors.secondary_80 },
+  description: { color: theme.colors.textSubtle },
   searchRoot: {
     paddingTop: theme.space.sm,
     paddingBottom: theme.space.sm

package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = createClasses(
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      border: `1px solid ${theme.colors.atmo4}`,
+      border: `1px solid ${theme.colors.border}`,
       padding: theme.spacing(0, 0, 0, "sm"),
       cursor: "pointer",
       boxShadow: `0 1px 0 ${theme.colors.shad1}`,
@@ -14,7 +14,7 @@ const { staticClasses, useClasses } = createClasses(
         ...outlineStyles
       }
     },
-    dragging: { borderColor: theme.colors.primary_80 }
+    dragging: { borderColor: theme.colors.primaryStrong }
   }
 );
 export {

package/dist/esm/Flow/base.js

@@ -43,7 +43,7 @@ const flowStyles = css`
   }
   .react-flow__edge-path,
   .react-flow__connection-path {
-    stroke: ${theme.colors.secondary};
+    stroke: ${theme.colors.text};
     stroke-width: 1;
     fill: none;
   }
@@ -233,13 +233,13 @@ const flowStyles = css`
     padding: ${theme.space.sm};
     border-radius: ${theme.radii.round};
     width: 150px;
-    color: ${theme.colors.secondary};
+    color: ${theme.colors.text};
     text-align: center;
     border: 1px solid ${theme.colors.negative};
-    background-color: ${theme.colors.negative_20};
+    background-color: ${theme.colors.negativeDimmed};
   }
   .react-flow__node-group {
-    color: ${theme.colors.secondary};
+    color: ${theme.colors.text};
     text-align: center;
   }
   .react-flow__node-default::before {
@@ -371,7 +371,7 @@ const flowStyles = css`
   }
   /* line styles */
   .react-flow__resize-control.line {
-    border-color: ${theme.colors.primary_80};
+    border-color: ${theme.colors.primaryStrong};
     border-width: 0;
     border-style: dashed;
   }

package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js

@@ -41,8 +41,8 @@ const HvStep = ({
     xl: squareL + 24
   }[size];
   const backgroundColor = getColor(state);
-  const color = state === "Pending" ? "atmo2" : getSemantic(state);
-  const status = state === "Current" ? "secondary_60" : void 0;
+  const color = state === "Pending" ? "bgPage" : getSemantic(state);
+  const status = state === "Current" ? "textDisabled" : void 0;
   const IconComponent = iconStateObject[state];
   return /* @__PURE__ */ jsx(
     HvButtonBase,

package/dist/esm/StepNavigation/DefaultNavigation/utils.js

@@ -3,17 +3,17 @@ const getColor = (state) => ({
   Pending: theme.colors.warning ?? "warning",
   Failed: theme.colors.negative ?? "negative",
   Completed: theme.colors.positive ?? "positive",
-  Current: theme.colors.secondary ?? "secondary",
-  Disabled: theme.colors.secondary_60 ?? "secondary_60",
-  Enabled: theme.colors.secondary ?? "secondary"
+  Current: theme.colors.text ?? "text",
+  Disabled: theme.colors.textDisabled ?? "textDisabled",
+  Enabled: theme.colors.text ?? "text"
 })[state];
 const getSemantic = (state) => ({
   Pending: "warning",
   Failed: "negative",
   Completed: "positive",
-  Current: "secondary",
-  Disabled: "secondary_60",
-  Enabled: "secondary"
+  Current: "text",
+  Disabled: "textDisabled",
+  Enabled: "text"
 })[state];
 const EXTRA_SMALL = { container: 32, avatar: 24 };
 const SMALL = { container: 40, avatar: 32 };

package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { HvButton } from "@hitachivantara/uikit-react-core";
+import { mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { getColor, dotSizes } from "../utils.js";
 import { useClasses } from "./Dot.styles.js";
 import { staticClasses } from "./Dot.styles.js";
@@ -10,34 +11,30 @@ const HvDot = ({
   title,
   size = "sm",
   onClick,
-  disabled
+  disabled: disabledProp
 }) => {
-  const { classes, cx, css } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
+  const disabled = disabledProp ?? ["Current", "Disabled"].includes(state);
   return /* @__PURE__ */ jsx(
     HvButton,
     {
+      style: mergeStyles(void 0, {
+        "--dotColor": getColor(state),
+        "--dotSize": `${dotSize}px`
+      }),
       className: cx(
-        css({
-          backgroundColor: getColor(state),
-          width: dotSize,
-          height: dotSize,
-          "&:hover, &:disabled": {
-            backgroundColor: getColor(state)
-          }
-        }),
         classes.root,
         {
           [classes.active]: state === "Current",
-          [classes.ghostDisabled]: disabled ?? ["Current", "Disabled"].includes(state)
+          [classes.ghostDisabled]: disabled
         },
         className
       ),
-      "aria-label": `${title}`,
+      "aria-label": title,
       icon: true,
-      disabled: disabled ?? ["Current", "Disabled"].includes(state),
-      onClick,
-      children: []
+      disabled,
+      onClick
     }
   );
 };

package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.styles.js

@@ -1,6 +1,14 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 const { staticClasses, useClasses } = createClasses("HvDot", {
-  root: { borderRadius: theme.radii.full, zIndex: 1 },
+  root: {
+    borderRadius: theme.radii.full,
+    zIndex: 1,
+    width: "var(--dotSize)",
+    height: "var(--dotSize)",
+    "&,:hover,:disabled": {
+      backgroundColor: "var(--dotColor)"
+    }
+  },
   active: {},
   ghostDisabled: {}
 });

package/dist/esm/StepNavigation/SimpleNavigation/utils.js

@@ -6,7 +6,7 @@ const dotSizes = {
   lg: 14,
   xl: 16
 };
-const getColor = (state) => state === "Disabled" ? theme.colors.secondary_60 : theme.colors.secondary;
+const getColor = (state) => state === "Disabled" ? theme.colors.textDisabled : theme.colors.text;
 export {
   dotSizes,
   getColor

package/dist/esm/Wizard/WizardContent/WizardContent.styles.js

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvWizardContent", {
     top: 0,
     minWidth: 280,
     boxShadow: theme.colors.shadow,
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     transition: "transform 0.3s",
     transitionTimingFunction: "ease-in-out",
     overflowY: "scroll"

package/dist/esm/Wizard/WizardTitle/WizardTitle.js

@@ -54,6 +54,7 @@ const HvWizardTitle = ({
         classes.messageContainer,
         classes.titleContainer
       ),
+      showIcon: false,
       children: [
         title && /* @__PURE__ */ jsx(HvTypography, { variant: "title3", component: "div", children: title }),
         !!steps.length && /* @__PURE__ */ jsx(

package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.js

@@ -2,7 +2,7 @@ import { createClasses } from "@hitachivantara/uikit-react-core";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvWizardTitle", {
   root: {
-    backgroundColor: theme.colors.atmo2,
+    backgroundColor: theme.colors.bgPage,
     justifyContent: "space-between",
     paddingRight: theme.space.sm
   },

package/dist/types/index.d.ts

@@ -496,13 +496,13 @@ export declare const HvFlowMinimap: ({ nodeColor, maskColor, maskStrokeColor, no
 export declare type HvFlowMinimapClasses = ExtractNames<typeof useClasses_5>;
 
 export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMapProps<NodeData>, "nodeColor" | "nodeStrokeColor" | "maskColor" | "maskStrokeColor"> {
-    /** Node color. Defaults to `atmo4`. */
+    /** Node color. */
     nodeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;
-    /** Node stroke color. Defaults to `atmo4`. */
+    /** Node stroke color. */
     nodeStrokeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;
-    /** Mask color. Defaults to `atmo3`. */
+    /** Mask color. */
     maskColor?: HvColorAny;
-    /** Mask stroke color. Defaults to `atmo3`. */
+    /** Mask stroke color. */
     maskStrokeColor?: HvColorAny;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvFlowMinimapClasses;
@@ -966,7 +966,7 @@ declare const useClasses_14: (classesProp?: Partial<Record<"root" | "messageCont
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_15: (classesProp?: Partial<Record<"root" | "closeButton" | "paper", string>>, addStatic?: boolean) => {
+declare const useClasses_15: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         paper: string;
@@ -1088,7 +1088,7 @@ declare const useClasses_8: (classesProp?: Partial<Record<"mandatory" | "root" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_9: (classesProp?: Partial<Record<"mandatory" | "root" | "title" | "empty" | "actions" | "footerContainer" | "titleContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_9: (classesProp?: Partial<Record<"mandatory" | "root" | "title" | "actions" | "empty" | "footerContainer" | "titleContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         mandatory: string;
         root: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.45.1",
+  "version": "5.46.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -33,10 +33,10 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.98.0",
-    "@hitachivantara/uikit-react-icons": "^5.16.1",
-    "@hitachivantara/uikit-react-utils": "^0.2.41",
-    "@hitachivantara/uikit-styles": "^5.49.0",
+    "@hitachivantara/uikit-react-core": "^5.99.1",
+    "@hitachivantara/uikit-react-icons": "^5.16.3",
+    "@hitachivantara/uikit-react-utils": "^0.2.43",
+    "@hitachivantara/uikit-styles": "^5.50.1",
     "@mui/base": "5.0.0-beta.68",
     "@types/react-grid-layout": "^1.3.5",
     "react-grid-layout": "^1.4.4",
@@ -52,7 +52,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "3b3c13424f41d3ab57653e51d7b0108193eff962",
+  "gitHead": "581850c6252b29a8cd9820a6e87b2df89830155f",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",