@superblocksteam/library 2.0.6-next.38 → 2.0.6-next.39

package/dist/{index-CQOHJMew.js → index-D9O95zsr.js}

@@ -83526,7 +83526,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-BQ5Eme4s.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-DaYe-zkb.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -83539,7 +83539,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-BQ5Eme4s.js").then((module2) => ({
+  return import("./devtools-consolidated-DaYe-zkb.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -87518,8 +87518,9 @@ class RuntimeEntitiesManager {
         const { width, height, marginLeft, marginTop } = pendingResize;
         merged.props = {
           ...merged.props || {},
-          ...width && { width },
-          ...height && { height },
+          ...width && merged.type !== "SbIcon" && { width },
+          ...height && merged.type !== "SbIcon" && { height },
+          ...width && merged.type === "SbIcon" && { size: width },
           ...marginLeft && { marginLeft },
           ...marginTop && { marginTop }
         };
@@ -87897,22 +87898,27 @@ function shouldWrapInSectionAndColumn(type5, parentType) {
   return parentType === "SbPage" && type5 !== "SbSection" || parentType === "SbSection" && type5 !== "SbColumn";
 }
 const filterSafeStackDimensionProperties = (existingProps) => {
-  const { width, height } = existingProps;
+  const { width, height, size: size2 } = existingProps;
   let safeHeight;
   let safeWidth;
+  let safeSize;
   if ((height == null ? void 0 : height.mode) === "px" || (height == null ? void 0 : height.mode) === "fit" || (height == null ? void 0 : height.mode) === "fill") {
     safeHeight = Property.Dimension(height);
   }
   if ((width == null ? void 0 : width.mode) === "px" || (width == null ? void 0 : width.mode) === "fit" || (width == null ? void 0 : width.mode) === "fill") {
     safeWidth = Property.Dimension(width);
   }
+  if ((size2 == null ? void 0 : size2.mode) === "px") {
+    safeSize = Property.Dimension(size2);
+  }
   return {
     width: safeWidth,
-    height: safeHeight
+    height: safeHeight,
+    size: safeSize
   };
 };
 const filterSafeGridDimensionProperties = (existingProps) => {
-  const { width, height } = existingProps;
+  const { width, height, size: size2 } = existingProps;
   const safeDimensions = {};
   if ((height == null ? void 0 : height.mode) === "rows" || (height == null ? void 0 : height.mode) === "fit") {
     safeDimensions.height = Property.Dimension(height);
@@ -87920,6 +87926,9 @@ const filterSafeGridDimensionProperties = (existingProps) => {
   if ((width == null ? void 0 : width.mode) === "columns") {
     safeDimensions.width = Property.Dimension(width);
   }
+  if ((size2 == null ? void 0 : size2.mode) === "columns") {
+    safeDimensions.size = Property.Dimension(size2);
+  }
   return safeDimensions;
 };
 const defaultSizeForComponent = (componentType, isFreeform, draggedDimensions) => {
@@ -88879,7 +88888,7 @@ class ResizingManager {
     return this._activeResizes.get(selectedSourceId);
   }
   startResizing(dragStartX, dragStartY, instanceId, position2) {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2, _n2, _o2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2, _n2, _o2, _p2, _q;
     const widget = (_a2 = this.root.editStore) == null ? void 0 : _a2.runtimeEntitiesManager.getEditorWidgetMeta(
       instanceId
     );
@@ -88918,10 +88927,10 @@ class ResizingManager {
       dragStartX,
       dragStartY,
       start: {
-        width: ((_i = (_h2 = widget == null ? void 0 : widget.props) == null ? void 0 : _h2.width) == null ? void 0 : _i.value) ?? 0,
-        height: ((_k = (_j = widget == null ? void 0 : widget.props) == null ? void 0 : _j.height) == null ? void 0 : _k.value) ?? 0,
-        marginLeft: ((_m2 = (_l2 = widget == null ? void 0 : widget.props) == null ? void 0 : _l2.marginLeft) == null ? void 0 : _m2.value) ?? 0,
-        marginTop: ((_o2 = (_n2 = widget == null ? void 0 : widget.props) == null ? void 0 : _n2.marginTop) == null ? void 0 : _o2.value) ?? 0
+        width: ((_i = (_h2 = widget == null ? void 0 : widget.props) == null ? void 0 : _h2.width) == null ? void 0 : _i.value) ?? ((_k = (_j = widget == null ? void 0 : widget.props) == null ? void 0 : _j.size) == null ? void 0 : _k.value) ?? 0,
+        height: ((_m2 = (_l2 = widget == null ? void 0 : widget.props) == null ? void 0 : _l2.height) == null ? void 0 : _m2.value) ?? 0,
+        marginLeft: ((_o2 = (_n2 = widget == null ? void 0 : widget.props) == null ? void 0 : _n2.marginLeft) == null ? void 0 : _o2.value) ?? 0,
+        marginTop: ((_q = (_p2 = widget == null ? void 0 : widget.props) == null ? void 0 : _p2.marginTop) == null ? void 0 : _q.value) ?? 0
       },
       resizedPosition: position2,
       widthToUpdate: null,
@@ -89059,21 +89068,34 @@ class ResizingManager {
     });
   }
   resizeWidget(currentX, currentY, instanceId, canResizeWidth2, canResizeHeight2) {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k;
     const sourceId = (_a2 = this.root.editStore) == null ? void 0 : _a2.runtimeEntitiesManager.getEditorWidgetSourceId(
       instanceId
     );
+    const type5 = (_b2 = this.root.editStore) == null ? void 0 : _b2.runtimeEntitiesManager.getEditorWidgetType(
+      instanceId
+    );
     const resizeState = sourceId && this._activeResizes.get(sourceId);
     if (!resizeState) {
       return;
     }
-    const widget = (_b2 = this.root.editStore) == null ? void 0 : _b2.runtimeEntitiesManager.getEditorWidgetMeta(
+    const widget = (_c2 = this.root.editStore) == null ? void 0 : _c2.runtimeEntitiesManager.getEditorWidgetMeta(
       instanceId
     );
-    const widthMode = (_d2 = (_c2 = widget == null ? void 0 : widget.props) == null ? void 0 : _c2.width) == null ? void 0 : _d2.mode;
-    const heightMode = (_f2 = (_e2 = widget == null ? void 0 : widget.props) == null ? void 0 : _e2.height) == null ? void 0 : _f2.mode;
+    let widthMode = (_e2 = (_d2 = widget == null ? void 0 : widget.props) == null ? void 0 : _d2.width) == null ? void 0 : _e2.mode;
+    const heightMode = (_g2 = (_f2 = widget == null ? void 0 : widget.props) == null ? void 0 : _f2.height) == null ? void 0 : _g2.mode;
     const deltaX = currentX - resizeState.dragStartX;
     const deltaY = currentY - resizeState.dragStartY;
+    if (type5 === "SbIcon") {
+      widthMode = (_i = (_h2 = widget == null ? void 0 : widget.props) == null ? void 0 : _h2.size) == null ? void 0 : _i.mode;
+      if (!widthMode) {
+        const parentInstanceId = widget == null ? void 0 : widget.parentInstanceId;
+        const parentWidget = parentInstanceId && ((_j = this.root.editStore) == null ? void 0 : _j.runtimeEntitiesManager.getEditorWidgetMeta(
+          parentInstanceId
+        ));
+        widthMode = ((_k = parentWidget == null ? void 0 : parentWidget.props) == null ? void 0 : _k.layout) === "freeform" ? "columns" : "px";
+      }
+    }
     const updateWidth = this.handleResizeDimension({
       resizeState,
       dimension: "width",
@@ -89128,22 +89150,28 @@ class ResizingManager {
     );
   }
   applyResize(instanceId) {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     const sourceId = (_a2 = this.root.editStore) == null ? void 0 : _a2.runtimeEntitiesManager.getEditorWidgetSourceId(
       instanceId
     );
+    const type5 = (_b2 = this.root.editStore) == null ? void 0 : _b2.runtimeEntitiesManager.getEditorWidgetType(
+      instanceId
+    );
     const resizeState = sourceId && this._activeResizes.get(sourceId);
     if (!resizeState) {
       return;
     }
     resizeState.isApplyingResize = true;
     const properties2 = {
-      ...resizeState.heightToUpdate && {
+      ...resizeState.heightToUpdate && type5 !== "SbIcon" && {
         height: Property.Dimension(resizeState.heightToUpdate)
       },
-      ...resizeState.widthToUpdate && {
+      ...resizeState.widthToUpdate && type5 !== "SbIcon" && {
         width: Property.Dimension(resizeState.widthToUpdate)
       },
+      ...resizeState.widthToUpdate && type5 === "SbIcon" && {
+        size: Property.Dimension(resizeState.widthToUpdate)
+      },
       ...resizeState.marginLeftToUpdate && {
         marginLeft: Property.Dimension(resizeState.marginLeftToUpdate)
       },
@@ -89152,7 +89180,7 @@ class ResizingManager {
       }
     };
     if (Object.keys(properties2).length > 0) {
-      (_b2 = this.root.editStore) == null ? void 0 : _b2.operationManager.setWidgetProperties({
+      (_c2 = this.root.editStore) == null ? void 0 : _c2.operationManager.setWidgetProperties({
         sourceId: resizeState.sourceId,
         properties: properties2,
         callback: () => {
@@ -91163,14 +91191,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-yqClhllT.js"
+            "./allPathsLoader-Bt-mJXJw.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BV47-5ws.js"
+            "./splitPathsBySizeLoader-HDsWhSbE.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -112263,7 +112291,8 @@ const containerLayout = (sizeProps) => Prop.union({
           sourceId: child.sourceId,
           element: (_b3 = (_a3 = editStore2.interactionLayerManager.getSourceIdElements(
             child.sourceId
-          )) == null ? void 0 : _a3[0]) == null ? void 0 : _b3.element
+          )) == null ? void 0 : _a3[0]) == null ? void 0 : _b3.element,
+          type: child.type
         };
       }).filter(({ element }) => !!element)) ?? [];
       if ("layout" in updates && updates.layout.value === "freeform") {
@@ -112275,7 +112304,7 @@ const containerLayout = (sizeProps) => Prop.union({
           return baseUpdate;
         }
         const updatesBySourceId = {};
-        elements.forEach(({ sourceId: sourceId2, element, currentProps }) => {
+        elements.forEach(({ sourceId: sourceId2, element, currentProps, type: type5 }) => {
           const elementRect = element.getBoundingClientRect();
           const gridPosition = editStore2.ui.dnd.grid.getGridPositionInfo({
             positionRect: elementRect,
@@ -112288,8 +112317,14 @@ const containerLayout = (sizeProps) => Prop.union({
             props: {
               marginTop: Property.Dimension(Dim.row(gridPosition.yGU)),
               marginLeft: Property.Dimension(Dim.col(gridPosition.xGU)),
-              width: Property.Dimension(Dim.col(gridPosition.widthGU)),
-              height: isHeightFit ? Property.Dimension(Dim.fit()) : Property.Dimension(Dim.row(gridPosition.heightGU))
+              ...type5 === "SbIcon" ? {
+                size: Property.Dimension(Dim.col(gridPosition.widthGU))
+              } : {
+                width: Property.Dimension(
+                  Dim.col(gridPosition.widthGU)
+                ),
+                height: isHeightFit ? Property.Dimension(Dim.fit()) : Property.Dimension(Dim.row(gridPosition.heightGU))
+              }
             },
             meta: {}
           };
@@ -112306,7 +112341,7 @@ const containerLayout = (sizeProps) => Prop.union({
         };
       } else if (previousProps.layout === "freeform" && (newProps.layout === "vertical" || newProps.layout === "horizontal")) {
         const updatesBySourceId = {};
-        elements.forEach(({ sourceId: sourceId2, element, currentProps }) => {
+        elements.forEach(({ sourceId: sourceId2, element, currentProps, type: type5 }) => {
           const elementRect = element.getBoundingClientRect();
           const isHeightFit = isDimension(currentProps == null ? void 0 : currentProps.height) && currentProps.height.mode === "fit";
           updatesBySourceId[sourceId2] = {
@@ -112314,8 +112349,12 @@ const containerLayout = (sizeProps) => Prop.union({
               marginTop: Property.Static(""),
               marginLeft: Property.Static(""),
               constraintTop: Property.Static(""),
-              width: Property.Dimension(Dim.px(elementRect.width)),
-              height: isHeightFit ? Property.Dimension(Dim.fit()) : Property.Dimension(Dim.px(elementRect.height))
+              ...type5 === "SbIcon" ? {
+                size: Property.Dimension(Dim.px(elementRect.width))
+              } : {
+                width: Property.Dimension(Dim.px(elementRect.width)),
+                height: isHeightFit ? Property.Dimension(Dim.fit()) : Property.Dimension(Dim.px(elementRect.height))
+              }
             },
             meta: {}
           };
@@ -117046,6 +117085,7 @@ const handleGridDropWithinCanvas = (params) => {
   const editStore2 = getEditStore();
   const dropSourceId = editStore2.runtimeEntitiesManager.getEditorWidgetSourceId(dropTargetId);
   const draggedSourceId = editStore2.runtimeEntitiesManager.getEditorWidgetSourceId(draggedId);
+  const draggedType = editStore2.runtimeEntitiesManager.getEditorWidgetType(draggedId);
   if (!dropSourceId || !draggedSourceId) {
     throw new Error(`Missing IDs: dragging ${draggedId} to ${dropTargetId}`);
   }
@@ -117065,15 +117105,16 @@ const handleGridDropWithinCanvas = (params) => {
   const droppedWidgetProps = (_a2 = editStore2.runtimeEntitiesManager.getEditorWidgetMeta(draggedId)) == null ? void 0 : _a2.props;
   const safeExistingDimensions = filterSafeGridDimensionProperties({
     width: droppedWidgetProps == null ? void 0 : droppedWidgetProps.width,
-    height: droppedWidgetProps == null ? void 0 : droppedWidgetProps.height
+    height: droppedWidgetProps == null ? void 0 : droppedWidgetProps.height,
+    size: droppedWidgetProps == null ? void 0 : droppedWidgetProps.size
   });
   const width = safeExistingDimensions.width ?? Property.Dimension(Dim.col(droppedWidgetConstraints.width));
   const height = safeExistingDimensions.height ?? Property.Dimension(Dim.rows(droppedWidgetConstraints.height));
+  const size2 = safeExistingDimensions.size ?? Property.Dimension(Dim.col(droppedWidgetConstraints.width));
   const propsToChange = droppedWidgetConstraints ? {
     marginTop: Property.Dimension(Dim.row(droppedWidgetConstraints.top)),
     marginLeft: Property.Dimension(Dim.col(droppedWidgetConstraints.left)),
-    width,
-    height,
+    ...draggedType === "SbIcon" ? { size: size2 } : { width, height },
     constraintTop: Property.Expression(
       JSON.stringify(droppedWidgetConstraints.constraintTop)
     )
@@ -117139,13 +117180,18 @@ const handleGridDrop = async ({
     });
   }
 };
-const mergeDroppedDimensions = (draggedProps, activeDragRect) => {
+const mergeDroppedDimensions = (draggedType, draggedProps, activeDragRect) => {
   const safeExistingDimensions = filterSafeStackDimensionProperties({
     width: draggedProps == null ? void 0 : draggedProps.width,
-    height: draggedProps == null ? void 0 : draggedProps.height
+    height: draggedProps == null ? void 0 : draggedProps.height,
+    size: draggedProps == null ? void 0 : draggedProps.size
   });
   const width = safeExistingDimensions.width ?? ((activeDragRect == null ? void 0 : activeDragRect.width) ? Property.Dimension(Dim.px(activeDragRect.width)) : Property.Static(""));
   const height = safeExistingDimensions.height ?? ((activeDragRect == null ? void 0 : activeDragRect.height) ? Property.Dimension(Dim.px(activeDragRect.height)) : Property.Static(""));
+  if (draggedType === "SbIcon") {
+    const size2 = safeExistingDimensions.size ?? ((activeDragRect == null ? void 0 : activeDragRect.height) ? Property.Dimension(Dim.px(activeDragRect.height)) : Property.Static(""));
+    return { size: size2 };
+  }
   return {
     width,
     height
@@ -117198,7 +117244,7 @@ const handleStackDropWithinCanvas = (params) => {
         marginTop: Property.Static(""),
         marginLeft: Property.Static(""),
         constraintTop: Property.Static(""),
-        ...mergeDroppedDimensions(draggedProps, activeDragRect)
+        ...mergeDroppedDimensions(draggedType, draggedProps, activeDragRect)
       }
     });
   }
@@ -117241,7 +117287,7 @@ const dropComponentInWrappingSectionOrColumn = async (params) => {
       marginTop: Property.Static(""),
       marginLeft: Property.Static(""),
       constraintTop: Property.Static(""),
-      ...mergeDroppedDimensions(draggedProps, activeDragRect)
+      ...mergeDroppedDimensions(dropTargetType, draggedProps, activeDragRect)
     }
   });
 };
@@ -117784,10 +117830,17 @@ const canResizeHeight = (heightMode) => {
   return heightMode === "px" || heightMode === "rows" || heightMode === "gridUnit";
 };
 const useResizeCapabilities = (instanceId) => {
-  var _a2, _b2, _c2, _d2, _e2;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
   const widget = (_a2 = rootStore.editStore) == null ? void 0 : _a2.runtimeEntitiesManager.getEditorWidgetMeta(instanceId);
-  const widthMode = (_c2 = (_b2 = widget == null ? void 0 : widget.props) == null ? void 0 : _b2.width) == null ? void 0 : _c2.mode;
-  const heightMode = (_e2 = (_d2 = widget == null ? void 0 : widget.props) == null ? void 0 : _d2.height) == null ? void 0 : _e2.mode;
+  if ((widget == null ? void 0 : widget.type) === "SbIcon") {
+    const sizeMode = (_c2 = (_b2 = widget.props) == null ? void 0 : _b2.size) == null ? void 0 : _c2.mode;
+    return {
+      canResizeWidth: sizeMode != null && sizeMode !== "fit",
+      canResizeHeight: false
+    };
+  }
+  const widthMode = (_e2 = (_d2 = widget == null ? void 0 : widget.props) == null ? void 0 : _d2.width) == null ? void 0 : _e2.mode;
+  const heightMode = (_g2 = (_f2 = widget == null ? void 0 : widget.props) == null ? void 0 : _f2.height) == null ? void 0 : _g2.mode;
   return {
     canResizeWidth: canResizeWidth(widthMode),
     canResizeHeight: canResizeHeight(heightMode)
@@ -117812,7 +117865,9 @@ const HandlesWrapper = qe$1.div`
   pointer-events: none;
 `;
 const InteractionRectHandles = (props2) => {
+  var _a2;
   const { instanceId, isDragging, selectionType } = props2;
+  const type5 = (_a2 = rootStore.editStore) == null ? void 0 : _a2.runtimeEntitiesManager.getEditorWidgetType(instanceId);
   const [showPopover, setShowPopover] = useState(null);
   const { canResizeWidth: canResizeWidth2, canResizeHeight: canResizeHeight2 } = useResizeCapabilities(instanceId);
   const timeoutRef = useRef(null);
@@ -117825,8 +117880,8 @@ const InteractionRectHandles = (props2) => {
   }, []);
   const throttledResizeWidget = useMemo$2(
     () => lodashExports.throttle((e3) => {
-      var _a2;
-      (_a2 = rootStore.editStore) == null ? void 0 : _a2.ui.resizing.resizeWidget(
+      var _a3;
+      (_a3 = rootStore.editStore) == null ? void 0 : _a3.ui.resizing.resizeWidget(
         e3.clientX,
         e3.clientY,
         instanceId,
@@ -117843,14 +117898,14 @@ const InteractionRectHandles = (props2) => {
     [throttledResizeWidget]
   );
   const handlePointerUp = useCallback(() => {
-    var _a2;
-    (_a2 = rootStore.editStore) == null ? void 0 : _a2.ui.resizing.applyResize(instanceId);
+    var _a3;
+    (_a3 = rootStore.editStore) == null ? void 0 : _a3.ui.resizing.applyResize(instanceId);
     window.removeEventListener("pointermove", handlePointerMove);
     window.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, instanceId]);
   const handlePointerDown = useCallback(
     (e3, position2) => {
-      var _a2;
+      var _a3;
       e3.stopPropagation();
       e3.preventDefault();
       if (timeoutRef.current) {
@@ -117868,7 +117923,7 @@ const InteractionRectHandles = (props2) => {
         return;
       }
       setShowPopover(null);
-      (_a2 = rootStore.editStore) == null ? void 0 : _a2.ui.resizing.startResizing(
+      (_a3 = rootStore.editStore) == null ? void 0 : _a3.ui.resizing.startResizing(
         e3.clientX,
         e3.clientY,
         instanceId,
@@ -117956,7 +118011,7 @@ const InteractionRectHandles = (props2) => {
                   }
                 }
               },
-              content: /* @__PURE__ */ jsxRuntimeExports.jsx(NotifierTooltipBody, { children: pos2 === "left" || pos2 === "right" ? "Width cannot be resized. Change width to pixel to enable manual resizing." : pos2 === "top" || pos2 === "bottom" ? "Height cannot be resized. Change height to pixel to enable manual resizing." : "" }),
+              content: /* @__PURE__ */ jsxRuntimeExports.jsx(NotifierTooltipBody, { children: pos2 === "left" || pos2 === "right" ? "Width cannot be resized. Change width to pixel to enable manual resizing." : pos2 === "top" || pos2 === "bottom" ? type5 === "SbIcon" ? "Icons can be resized by changing its width." : "Height cannot be resized. Change height to pixel to enable manual resizing." : "" }),
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" } })
             }
           )
@@ -119972,7 +120027,7 @@ const getStackChildStyle = ({
   parentWidth
 }) => {
   const height = (childProps == null ? void 0 : childProps.height) ?? Dim.fit();
-  const heightCss = (
+  let heightCss = (
     // using 100% height when there is only one child and user's intention to set the child height as exact 100%, e.g. an image with large original height
     // if parent height is fit-content, child height 100% will cause unexpected height if child is empty container
     childCount === 1 && (height == null ? void 0 : height.mode) === "fill" && (parentHeight == null ? void 0 : parentHeight.mode) !== "fit" ? { height: "100%" } : dimToCSS(height, "height", primary === "height")
@@ -119980,7 +120035,11 @@ const getStackChildStyle = ({
   const width = (childProps == null ? void 0 : childProps.width) ?? (["SbText", "SbButton", "SbCheckbox", "SbSwitch"].includes(
     (childProps == null ? void 0 : childProps.type) ?? ""
   ) ? Dim.fit() : Dim.fill());
-  const widthCss = childCount === 1 && (width == null ? void 0 : width.mode) === "fill" && (parentWidth == null ? void 0 : parentWidth.mode) !== "fit" ? { width: "100%" } : dimToCSS(width, "width", primary === "width");
+  let widthCss = childCount === 1 && (width == null ? void 0 : width.mode) === "fill" && (parentWidth == null ? void 0 : parentWidth.mode) !== "fit" ? { width: "100%" } : dimToCSS(width, "width", primary === "width");
+  if ((childProps == null ? void 0 : childProps.type) === "SbIcon") {
+    heightCss = dimToCSS(Dim.fit(), "height", false);
+    widthCss = dimToCSS(Dim.fit(), "width", false);
+  }
   const widthInPx = (width == null ? void 0 : width.mode) === "px";
   const heightInPx = (height == null ? void 0 : height.mode) === "px";
   const shouldNotShrink = widthInPx && primary === "width" || heightInPx && primary === "height";
@@ -120345,7 +120404,7 @@ const GridChild = observer(
     const left2 = gridPositions[childProps.name].left;
     const rows = gridPositions[childProps.name].height;
     const columns = gridPositions[childProps.name].width;
-    const Component3 = heightMode === "fit" ? MeasuredComponent : StaticComponent;
+    const Component3 = heightMode === "fit" || childProps.sbType === "SbIcon" ? MeasuredComponent : StaticComponent;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -120359,6 +120418,9 @@ const GridChild = observer(
           Component3,
           {
             staticHeight: (((_b2 = childProps.height) == null ? void 0 : _b2.value) ?? 0) * rowHeight,
+            style: childProps.sbType === "SbIcon" ? {
+              aspectRatio: "1"
+            } : void 0,
             onHeightChanged: (height) => {
               dispatchHeight({
                 type: "SET_HEIGHT",
@@ -120389,9 +120451,13 @@ const InternalGrid = observer(
           value: bindingIdentifier.entityName,
           isAnonymous: false
         }) : null;
+        const sbType = isSbComponent(child) ? child.type.sbType : void 0;
         const marginTop = (entity == null ? void 0 : entity.marginTop) ?? (isDimension(child.props.marginTop) ? child.props.marginTop : void 0);
         const marginLeft = (entity == null ? void 0 : entity.marginLeft) ?? (isDimension(child.props.marginLeft) ? child.props.marginLeft : void 0);
-        const width = (entity == null ? void 0 : entity.width) ?? (isDimension(child.props.width) ? child.props.width : void 0);
+        let width = (entity == null ? void 0 : entity.width) ?? (isDimension(child.props.width) ? child.props.width : void 0);
+        if (sbType === "SbIcon") {
+          width = (entity == null ? void 0 : entity.size) ?? (isDimension(child.props.size) ? child.props.size : void 0);
+        }
         const height = (entity == null ? void 0 : entity.height) ?? (isDimension(child.props.height) ? child.props.height : void 0);
         const constraintTop = (entity == null ? void 0 : entity.constraintTop) ?? child.props.constraintTop;
         const isVisible2 = (entity == null ? void 0 : entity.isVisible) ?? child.props.isVisible;
@@ -120403,7 +120469,7 @@ const InternalGrid = observer(
           constraintTop,
           name: (bindingIdentifier == null ? void 0 : bindingIdentifier.entityName) ?? child.props[WIDGET_SOURCE_ID_ATTRIBUTE],
           // source ID as a fallback
-          sbType: isSbComponent(child) ? child.type.sbType : void 0,
+          sbType,
           element: child
         };
         if (isVisible2 !== false || isEditing) {
@@ -145727,14 +145793,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-okzKZ8ZK.js"
+            "./allPathsLoader-rDsLNp7q.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-DOjF2YSu.js"
+            "./splitPathsBySizeLoader-DCl0XfAP.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -182527,13 +182593,7 @@ const propertiesDefinition$4 = {
     size: Prop.dimension().readAndWrite().propertiesPanel({
       label: "Size",
       controlType: "WIDTH_DROPDOWN"
-    }).default(Dim.px(24)),
-    width: Prop.dimension().readAndWrite().default(function() {
-      return this.size;
-    }),
-    height: Prop.dimension().readAndWrite().default(function() {
-      return this.size;
-    })
+    }).default(Dim.fit())
   }).add(margin()).add(visible()),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
     color: colorProp({
@@ -182559,7 +182619,7 @@ const SbIcon = registerSbComponent(
   },
   (props2) => {
     const [isLoading, setIsLoading] = useState(false);
-    const { icon, style: style2, color, onClick } = props2;
+    const { icon, style: style2, color, size: size2, onClick } = props2;
     const { style: passthroughStyle, ...passThroughProps } = usePassthroughProps(props2);
     const inlineStyles = useMemo$2(() => {
       const minWidthStyle = !icon ? {
@@ -182571,7 +182631,8 @@ const SbIcon = registerSbComponent(
         ...passthroughStyle,
         color,
         cursor: onClick ? "pointer" : "inherit",
-        ...style2
+        ...style2,
+        height: "100%"
       };
     }, [style2, color, onClick, passthroughStyle, icon]);
     const handleClick = useCallback(async () => {
@@ -182597,7 +182658,8 @@ const SbIcon = registerSbComponent(
             disablePointerEvents: true,
             iconName: icon,
             color,
-            fill: true
+            fill: (size2 == null ? void 0 : size2.mode) !== "px",
+            size: (size2 == null ? void 0 : size2.mode) === "px" ? size2.value : void 0
           }
         )
       }
@@ -197422,4 +197484,4 @@ export {
   SbTimer as y,
   SbApi as z
 };
-//# sourceMappingURL=index-CQOHJMew.js.map
+//# sourceMappingURL=index-D9O95zsr.js.map