@uipath/apollo-react 4.6.0-pr525.51f590d → 4.6.0-pr525.7da9748

package/dist/canvas/components/BaseNode/BaseNode.cjs

@@ -229,6 +229,31 @@ const BaseNodeComponent = (props)=>{
         display.subLabel
     ]);
     const displayFooter = footerComponent;
+    const hasFooter = !!displayFooter;
+    const containerWidth = getContainerWidth(displayShape, width);
+    const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
+    const nodeVars = (0, external_react_namespaceObject.useMemo)(()=>{
+        const numH = 'number' == typeof containerHeight ? containerHeight : void 0;
+        const radiusBasis = 'rectangle' === displayShape ? numH ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : Math.min(containerWidth, numH ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE);
+        const nodeRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${radiusBasis * external_constants_cjs_namespaceObject.NODE_CONTAINER_RADIUS_RATIO}px`;
+        const effectiveH = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : numH ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
+        const effectiveW = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerWidth;
+        const basis = 'rectangle' === displayShape ? effectiveH : Math.min(effectiveW, effectiveH);
+        const innerRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${basis * external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO}px`;
+        return {
+            '--node-w': `${containerWidth}px`,
+            '--node-h': numH ? `${numH}px` : 'auto',
+            '--node-radius': nodeRadius,
+            '--inner-size': `${basis * external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO}px`,
+            '--inner-radius': innerRadius,
+            '--icon-size': `${basis * external_constants_cjs_namespaceObject.NODE_INNER_ICON_RATIO}px`
+        };
+    }, [
+        containerWidth,
+        containerHeight,
+        displayShape,
+        hasFooter
+    ]);
     const interactionState = (0, external_react_namespaceObject.useMemo)(()=>{
         if (disabled) return 'disabled';
         if (dragging) return 'drag';
@@ -345,6 +370,7 @@ const BaseNodeComponent = (props)=>{
     if (!manifest) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: containerRef,
         className: "relative",
+        style: nodeVars,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
@@ -356,12 +382,10 @@ const BaseNodeComponent = (props)=>{
             interactionState: interactionState
         })
     });
-    const hasFooter = !!displayFooter;
-    const containerWidth = getContainerWidth(displayShape, width);
-    const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
     const nodeContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: containerRef,
         className: "relative",
+        style: nodeVars,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
@@ -375,20 +399,14 @@ const BaseNodeComponent = (props)=>{
                 executionStatus: executionStatus,
                 validationStatus: validationState?.validationStatus,
                 suggestionType: suggestionType,
-                width: containerWidth,
-                height: containerHeight,
                 hasFooter: hasFooter,
                 background: displayBackground,
                 loading: data.loading,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeInnerShape_cjs_namespaceObject.BaseInnerShape, {
-                        shape: displayShape,
                         color: displayColor,
                         background: displayIconBackground,
                         loading: data.loading,
-                        hasFooter: hasFooter,
-                        containerWidth: containerWidth,
-                        containerHeight: 'number' == typeof containerHeight ? containerHeight : void 0,
                         children: data.loading ? null : Icon
                     }),
                     adornments?.topLeft && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeBadgeSlot_cjs_namespaceObject.BaseBadgeSlot, {

package/dist/canvas/components/BaseNode/BaseNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;AAkChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAyiB1B,eAAO,MAAM,QAAQ,8CAjgBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAigBhB,CAAC"}
+{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;AAsChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAqlB1B,eAAO,MAAM,QAAQ,8CA7iBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CA6iBhB,CAAC"}

package/dist/canvas/components/BaseNode/BaseNode.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Position, useReactFlow, useStore, useUpdateNodeInternals } from "../../xyflow/react.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, GRID_SPACING, NODE_HEIGHT_DEFAULT, NODE_HEIGHT_FOOTER_BUTTON, NODE_HEIGHT_FOOTER_DOUBLE, NODE_HEIGHT_FOOTER_SINGLE } from "../../constants.js";
+import { DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, GRID_SPACING, NODE_CONTAINER_RADIUS_RATIO, NODE_HEIGHT_DEFAULT, NODE_HEIGHT_FOOTER_BUTTON, NODE_HEIGHT_FOOTER_DOUBLE, NODE_HEIGHT_FOOTER_SINGLE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
 import { useNodeTypeRegistry } from "../../core/index.js";
 import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
 import { resolveAdornments } from "../../utils/adornment-resolver.js";
@@ -201,6 +201,31 @@ const BaseNodeComponent = (props)=>{
         display.subLabel
     ]);
     const displayFooter = footerComponent;
+    const hasFooter = !!displayFooter;
+    const containerWidth = getContainerWidth(displayShape, width);
+    const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
+    const nodeVars = useMemo(()=>{
+        const numH = 'number' == typeof containerHeight ? containerHeight : void 0;
+        const radiusBasis = 'rectangle' === displayShape ? numH ?? DEFAULT_NODE_SIZE : Math.min(containerWidth, numH ?? DEFAULT_NODE_SIZE);
+        const nodeRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${radiusBasis * NODE_CONTAINER_RADIUS_RATIO}px`;
+        const effectiveH = hasFooter ? DEFAULT_NODE_SIZE : numH ?? DEFAULT_NODE_SIZE;
+        const effectiveW = hasFooter ? DEFAULT_NODE_SIZE : containerWidth;
+        const basis = 'rectangle' === displayShape ? effectiveH : Math.min(effectiveW, effectiveH);
+        const innerRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${basis * NODE_INNER_RADIUS_RATIO}px`;
+        return {
+            '--node-w': `${containerWidth}px`,
+            '--node-h': numH ? `${numH}px` : 'auto',
+            '--node-radius': nodeRadius,
+            '--inner-size': `${basis * NODE_INNER_SHAPE_RATIO}px`,
+            '--inner-radius': innerRadius,
+            '--icon-size': `${basis * NODE_INNER_ICON_RATIO}px`
+        };
+    }, [
+        containerWidth,
+        containerHeight,
+        displayShape,
+        hasFooter
+    ]);
     const interactionState = useMemo(()=>{
         if (disabled) return 'disabled';
         if (dragging) return 'drag';
@@ -317,6 +342,7 @@ const BaseNodeComponent = (props)=>{
     if (!manifest) return /*#__PURE__*/ jsx("div", {
         ref: containerRef,
         className: "relative",
+        style: nodeVars,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
@@ -328,12 +354,10 @@ const BaseNodeComponent = (props)=>{
             interactionState: interactionState
         })
     });
-    const hasFooter = !!displayFooter;
-    const containerWidth = getContainerWidth(displayShape, width);
-    const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
     const nodeContent = /*#__PURE__*/ jsxs("div", {
         ref: containerRef,
         className: "relative",
+        style: nodeVars,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
@@ -347,20 +371,14 @@ const BaseNodeComponent = (props)=>{
                 executionStatus: executionStatus,
                 validationStatus: validationState?.validationStatus,
                 suggestionType: suggestionType,
-                width: containerWidth,
-                height: containerHeight,
                 hasFooter: hasFooter,
                 background: displayBackground,
                 loading: data.loading,
                 children: [
                     /*#__PURE__*/ jsx(BaseInnerShape, {
-                        shape: displayShape,
                         color: displayColor,
                         background: displayIconBackground,
                         loading: data.loading,
-                        hasFooter: hasFooter,
-                        containerWidth: containerWidth,
-                        containerHeight: 'number' == typeof containerHeight ? containerHeight : void 0,
                         children: data.loading ? null : Icon
                     }),
                     adornments?.topLeft && /*#__PURE__*/ jsx(BaseBadgeSlot, {

package/dist/canvas/components/BaseNode/BaseNodeContainer.cjs

@@ -30,7 +30,6 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
-const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const getStatusBorder = (status)=>{
     switch(status){
         case 'InProgress':
@@ -54,13 +53,9 @@ const getStatusBorder = (status)=>{
             return '';
     }
 };
-const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, width, height, hasFooter, background, loading, children })=>{
-    const numericWidth = 'number' == typeof width ? width : void 0;
-    const numericHeight = 'number' == typeof height ? height : void 0;
-    const radiusBasis = 'rectangle' === shape ? numericHeight ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : Math.min(numericWidth ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, numericHeight ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE);
-    const containerRadius = radiusBasis * external_constants_cjs_namespaceObject.NODE_CONTAINER_RADIUS_RATIO;
+const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, hasFooter, background, loading, children })=>{
     const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
-    const className = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'circle' === shape ? 'rounded-full' : '', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap rounded-2xl', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'), [
+    const className = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'w-(--node-w) h-(--node-h) [border-radius:var(--node-radius)]', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'), [
         shape,
         hasFooter,
         activeStatus,
@@ -68,19 +63,6 @@ const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executi
         isHovered,
         interactionState
     ]);
-    const style = (0, external_react_namespaceObject.useMemo)(()=>({
-            width,
-            height,
-            background,
-            borderRadius: 'circle' === shape || hasFooter ? void 0 : containerRadius
-        }), [
-        width,
-        height,
-        background,
-        shape,
-        hasFooter,
-        containerRadius
-    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "data-testid": "base-container",
         "data-execution-status": executionStatus,
@@ -88,7 +70,9 @@ const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executi
         "data-validation-status": validationStatus,
         "data-suggestion-type": suggestionType,
         className: className,
-        style: style,
+        style: background ? {
+            background
+        } : void 0,
         "aria-busy": loading || void 0,
         children: children
     });

package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts

@@ -11,13 +11,11 @@ interface BaseContainerProps {
     executionStatus?: ElementStatusValues;
     validationStatus?: ValidationErrorSeverity;
     suggestionType?: SuggestionType;
-    width?: number;
-    height?: number | 'auto';
     hasFooter?: boolean;
     background?: string;
     loading?: boolean;
     children: React.ReactNode;
 }
-export declare const BaseContainer: ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, width, height, hasFooter, background, loading, children, }: BaseContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseContainer: ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, hasFooter, background, loading, children, }: BaseContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=BaseNodeContainer.d.ts.map

package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNodeContainer.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,eAAO,MAAM,eAAe,GAC1B,SAAS,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,KACtE,MAsBF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,eAAO,MAAM,aAAa,GAAI,iKAc3B,kBAAkB,4CA2DpB,CAAC"}
+{"version":3,"file":"BaseNodeContainer.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,eAAO,MAAM,eAAe,GAC1B,SAAS,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,KACtE,MAsBF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,kJAY3B,kBAAkB,4CAoCpB,CAAC"}

package/dist/canvas/components/BaseNode/BaseNodeContainer.js

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "@uipath/apollo-wind";
 import { useMemo } from "react";
-import { DEFAULT_NODE_SIZE, NODE_CONTAINER_RADIUS_RATIO } from "../../constants.js";
 const getStatusBorder = (status)=>{
     switch(status){
         case 'InProgress':
@@ -25,13 +24,9 @@ const getStatusBorder = (status)=>{
             return '';
     }
 };
-const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, width, height, hasFooter, background, loading, children })=>{
-    const numericWidth = 'number' == typeof width ? width : void 0;
-    const numericHeight = 'number' == typeof height ? height : void 0;
-    const radiusBasis = 'rectangle' === shape ? numericHeight ?? DEFAULT_NODE_SIZE : Math.min(numericWidth ?? DEFAULT_NODE_SIZE, numericHeight ?? DEFAULT_NODE_SIZE);
-    const containerRadius = radiusBasis * NODE_CONTAINER_RADIUS_RATIO;
+const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, hasFooter, background, loading, children })=>{
     const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
-    const className = useMemo(()=>cn('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'circle' === shape ? 'rounded-full' : '', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap rounded-2xl', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'), [
+    const className = useMemo(()=>cn('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'w-(--node-w) h-(--node-h) [border-radius:var(--node-radius)]', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'), [
         shape,
         hasFooter,
         activeStatus,
@@ -39,19 +34,6 @@ const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executi
         isHovered,
         interactionState
     ]);
-    const style = useMemo(()=>({
-            width,
-            height,
-            background,
-            borderRadius: 'circle' === shape || hasFooter ? void 0 : containerRadius
-        }), [
-        width,
-        height,
-        background,
-        shape,
-        hasFooter,
-        containerRadius
-    ]);
     return /*#__PURE__*/ jsx("div", {
         "data-testid": "base-container",
         "data-execution-status": executionStatus,
@@ -59,7 +41,9 @@ const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executi
         "data-validation-status": validationStatus,
         "data-suggestion-type": suggestionType,
         className: className,
-        style: style,
+        style: background ? {
+            background
+        } : void 0,
         "aria-busy": loading || void 0,
         children: children
     });

package/dist/canvas/components/BaseNode/BaseNodeInnerShape.cjs

@@ -29,48 +29,19 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
-const external_constants_cjs_namespaceObject = require("../../constants.cjs");
-const CssUtil_cjs_namespaceObject = require("../../utils/CssUtil.cjs");
-const BaseInnerShape = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ shape, color, background, hasFooter, loading, containerWidth = external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, containerHeight = external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, children })=>{
-    const effectiveContainerHeight = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerHeight;
-    const effectiveContainerWidth = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerWidth;
-    const basis = 'rectangle' === shape ? effectiveContainerHeight : Math.min(effectiveContainerWidth, effectiveContainerHeight);
-    const innerSize = basis * external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO;
-    const iconSize = basis * external_constants_cjs_namespaceObject.NODE_INNER_ICON_RATIO;
-    const innerRadius = basis * external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO;
-    const className = (0, external_react_namespaceObject.useMemo)(()=>(0, CssUtil_cjs_namespaceObject.cx)('flex items-center justify-center overflow-hidden bg-surface text-foreground', 'circle' === shape ? 'rounded-full' : '', hasFooter ? 'rounded-2xl' : '', '[&>svg]:w-(--canvas-icon-size) [&>svg]:h-(--canvas-icon-size)', '[&>img]:w-(--canvas-icon-size) [&>img]:h-(--canvas-icon-size) [&>img]:object-contain'), [
-        shape,
-        hasFooter
-    ]);
-    const style = (0, external_react_namespaceObject.useMemo)(()=>({
-            width: innerSize,
-            height: innerSize,
-            borderRadius: 'circle' === shape || hasFooter ? void 0 : innerRadius,
+const INNER_SHAPE_CLASS = "flex items-center justify-center overflow-hidden bg-surface text-foreground w-(--inner-size) h-(--inner-size) [border-radius:var(--inner-radius)] [&>svg]:w-(--icon-size) [&>svg]:h-(--icon-size) [&>img]:w-(--icon-size) [&>img]:h-(--icon-size) [&>img]:object-contain";
+const SKELETON_CLASS = 'rounded-lg w-(--icon-size) h-(--icon-size)';
+const BaseInnerShape = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ loading, color, background, children })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: INNER_SHAPE_CLASS,
+        style: color || background ? {
             color,
-            background,
-            '--canvas-icon-size': `${iconSize}px`
-        }), [
-        innerSize,
-        innerRadius,
-        shape,
-        hasFooter,
-        color,
-        background,
-        iconSize
-    ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: className,
-        style: style,
+            background
+        } : void 0,
         children: loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
             "data-testid": "skeleton-icon",
-            className: "rounded-lg",
-            style: {
-                width: iconSize,
-                height: iconSize
-            }
+            className: SKELETON_CLASS
         }) : children
-    });
-});
+    }));
 exports.BaseInnerShape = __webpack_exports__.BaseInnerShape;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "BaseInnerShape"

package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts

@@ -1,14 +1,9 @@
-import type { NodeShape } from '../../schema';
 interface BaseInnerShapeProps {
-    shape?: NodeShape;
+    loading?: boolean;
     color?: string;
     background?: string;
-    hasFooter?: boolean;
-    loading?: boolean;
-    containerWidth?: number;
-    containerHeight?: number;
     children: React.ReactNode;
 }
-export declare const BaseInnerShape: import("react").MemoExoticComponent<({ shape, color, background, hasFooter, loading, containerWidth, containerHeight, children, }: BaseInnerShapeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const BaseInnerShape: import("react").MemoExoticComponent<({ loading, color, background, children }: BaseInnerShapeProps) => import("react/jsx-runtime").JSX.Element>;
 export {};
 //# sourceMappingURL=BaseNodeInnerShape.d.ts.map

package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNodeInnerShape.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeInnerShape.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,eAAO,MAAM,cAAc,qIAUtB,mBAAmB,6CAuDvB,CAAC"}
+{"version":3,"file":"BaseNodeInnerShape.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeInnerShape.tsx"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,iFACkB,mBAAmB,6CAQ/D,CAAC"}

package/dist/canvas/components/BaseNode/BaseNodeInnerShape.js

@@ -1,46 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { Skeleton } from "@uipath/apollo-wind";
-import { memo, useMemo } from "react";
-import { DEFAULT_NODE_SIZE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
-import { cx } from "../../utils/CssUtil.js";
-const BaseInnerShape = /*#__PURE__*/ memo(({ shape, color, background, hasFooter, loading, containerWidth = DEFAULT_NODE_SIZE, containerHeight = DEFAULT_NODE_SIZE, children })=>{
-    const effectiveContainerHeight = hasFooter ? DEFAULT_NODE_SIZE : containerHeight;
-    const effectiveContainerWidth = hasFooter ? DEFAULT_NODE_SIZE : containerWidth;
-    const basis = 'rectangle' === shape ? effectiveContainerHeight : Math.min(effectiveContainerWidth, effectiveContainerHeight);
-    const innerSize = basis * NODE_INNER_SHAPE_RATIO;
-    const iconSize = basis * NODE_INNER_ICON_RATIO;
-    const innerRadius = basis * NODE_INNER_RADIUS_RATIO;
-    const className = useMemo(()=>cx('flex items-center justify-center overflow-hidden bg-surface text-foreground', 'circle' === shape ? 'rounded-full' : '', hasFooter ? 'rounded-2xl' : '', '[&>svg]:w-(--canvas-icon-size) [&>svg]:h-(--canvas-icon-size)', '[&>img]:w-(--canvas-icon-size) [&>img]:h-(--canvas-icon-size) [&>img]:object-contain'), [
-        shape,
-        hasFooter
-    ]);
-    const style = useMemo(()=>({
-            width: innerSize,
-            height: innerSize,
-            borderRadius: 'circle' === shape || hasFooter ? void 0 : innerRadius,
+import { memo } from "react";
+const INNER_SHAPE_CLASS = "flex items-center justify-center overflow-hidden bg-surface text-foreground w-(--inner-size) h-(--inner-size) [border-radius:var(--inner-radius)] [&>svg]:w-(--icon-size) [&>svg]:h-(--icon-size) [&>img]:w-(--icon-size) [&>img]:h-(--icon-size) [&>img]:object-contain";
+const SKELETON_CLASS = 'rounded-lg w-(--icon-size) h-(--icon-size)';
+const BaseInnerShape = /*#__PURE__*/ memo(({ loading, color, background, children })=>/*#__PURE__*/ jsx("div", {
+        className: INNER_SHAPE_CLASS,
+        style: color || background ? {
             color,
-            background,
-            '--canvas-icon-size': `${iconSize}px`
-        }), [
-        innerSize,
-        innerRadius,
-        shape,
-        hasFooter,
-        color,
-        background,
-        iconSize
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        className: className,
-        style: style,
+            background
+        } : void 0,
         children: loading ? /*#__PURE__*/ jsx(Skeleton, {
             "data-testid": "skeleton-icon",
-            className: "rounded-lg",
-            style: {
-                width: iconSize,
-                height: iconSize
-            }
+            className: SKELETON_CLASS
         }) : children
-    });
-});
+    }));
 export { BaseInnerShape };

package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.cjs

@@ -37,13 +37,8 @@ const MissingManifestNode = ({ type, isSelected, isHovered, interactionState })=
         isSelected: isSelected,
         isHovered: isHovered,
         interactionState: interactionState,
-        width: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
-        height: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeInnerShape_cjs_namespaceObject.BaseInnerShape, {
-                shape: "square",
-                containerWidth: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
-                containerHeight: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.CanvasIcon, {
                     icon: "circle-alert",
                     size: external_constants_cjs_namespaceObject.NODE_ERROR_ICON_SIZE,

package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNodeMissingManifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeMissingManifest.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,GAAI,oDAKjC,wBAAwB,4CAmB1B,CAAC"}
+{"version":3,"file":"BaseNodeMissingManifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeMissingManifest.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,GAAI,oDAKjC,wBAAwB,4CAY1B,CAAC"}

package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { DEFAULT_NODE_SIZE, NODE_ERROR_ICON_SIZE } from "../../constants.js";
+import { NODE_ERROR_ICON_SIZE } from "../../constants.js";
 import { CanvasIcon } from "../../utils/index.js";
 import { BaseContainer } from "./BaseNodeContainer.js";
 import { BaseInnerShape } from "./BaseNodeInnerShape.js";
@@ -9,13 +9,8 @@ const MissingManifestNode = ({ type, isSelected, isHovered, interactionState })=
         isSelected: isSelected,
         isHovered: isHovered,
         interactionState: interactionState,
-        width: DEFAULT_NODE_SIZE,
-        height: DEFAULT_NODE_SIZE,
         children: [
             /*#__PURE__*/ jsx(BaseInnerShape, {
-                shape: "square",
-                containerWidth: DEFAULT_NODE_SIZE,
-                containerHeight: DEFAULT_NODE_SIZE,
                 children: /*#__PURE__*/ jsx(CanvasIcon, {
                     icon: "circle-alert",
                     size: NODE_ERROR_ICON_SIZE,