@superblocksteam/library 2.0.3-next.125 → 2.0.3-next.127

package/dist/{index-CRYekRqO.js → index-ByxiFYSo.js}

@@ -2703,14 +2703,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-PuPpwk36.js"
+            "./allPathsLoader-CPfNk8yv.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-C9xWFFnU.js"
+            "./splitPathsBySizeLoader-CZXCHUIN.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -10516,6 +10516,17 @@ function toMobXPatch(change, pathStr) {
 function isComputedProperty(value) {
   return typeof value === "object" && value !== null && value.__isComputedProperty === true;
 }
+function getRuntimeComputedExpression(value) {
+  var _a2, _b2, _c2;
+  const lines = value.split("\n");
+  if (lines.length === 1 && ((_a2 = lines[0]) == null ? void 0 : _a2.startsWith("return"))) {
+    return lines[0];
+  }
+  if (lines.length === 1 && (!((_b2 = lines[0]) == null ? void 0 : _b2.startsWith("return")) || ((_c2 = lines[0]) == null ? void 0 : _c2.endsWith(";")))) {
+    return `return ${lines[0]}`;
+  }
+  return value;
+}
 function isBindingString(value) {
   return typeof value === "object" && value != null && value.__binding === true;
 }
@@ -47014,20 +47025,17 @@ const DEFAULT_LIGHT_PALETTE = {
   primaryColor: colors.ACCENT_BLUE_500,
   appBackgroundColor: LIGHT_APP_BG
 };
-const NO_BORDER = {
+const noBorder = (theme) => ({
   width: Dim.px(0),
   style: "solid",
-  color: "{{ theme.colors.neutral100 }}"
-};
-({
-  width: Dim.px(1)
+  color: theme.colors.neutral100
+});
+const noBorderOject = (theme) => ({
+  left: noBorder(theme),
+  right: noBorder(theme),
+  top: noBorder(theme),
+  bottom: noBorder(theme)
 });
-const NO_BORDER_OBJECT = {
-  left: NO_BORDER,
-  right: NO_BORDER,
-  top: NO_BORDER,
-  bottom: NO_BORDER
-};
 ({
   topLeft: Dim.px(0),
   topRight: Dim.px(0),
@@ -64564,7 +64572,7 @@ function getPropertyValue$1({
   }
   if (property.type === "COMPUTED" && typeof property.value === "string" && scopeId && name) {
     try {
-      return LazyFunction(property.value);
+      return LazyFunction(getRuntimeComputedExpression(property.value));
     } catch (e3) {
       console.error("Error generating computed value", e3);
       const entity = rootStore.entityManager.getEntity(scopeId, name);
@@ -64786,19 +64794,14 @@ class RuntimeWidgetsManager {
     return this.sourceIdCount[sourceId] ?? 0;
   }
   isChildOf(childId, parentId) {
-    const parentMeta = this.widgets[parentId];
-    if (!parentMeta || !parentMeta.children) {
-      return false;
+    const childMeta = this.widgets[childId];
+    if (childMeta && childMeta.parentInstanceId === parentId) {
+      return true;
     }
-    for (const child of parentMeta.children) {
-      if (child.isSbComponent && child.value === childId) {
-        return true;
-      }
-      if (child.isSbComponent && this.isChildOf(childId, child.value)) {
-        return true;
-      }
+    if (!childMeta || !childMeta.parentInstanceId) {
+      return false;
     }
-    return false;
+    return this.isChildOf(childMeta.parentInstanceId, parentId);
   }
   // get the closest ancestor of a widget by type
   getClosestAncestorByType(instanceId, type5) {
@@ -65896,6 +65899,18 @@ const getWidgetNode = (instanceId) => {
     `[${WIDGET_SOURCE_ID_ATTRIBUTE}="${sourceId}"]`
   );
 };
+const getIsComponentInInteractionLayer = (instanceId) => {
+  const editStore2 = getEditStore();
+  const activeRootInstanceId = editStore2.interactionLayerManager.activeRootInstanceId;
+  const isDropTargetInInteractionLayer = (
+    // if active root id is undefined, we are in the page and can drop anywhere
+    !activeRootInstanceId || instanceId && (instanceId === activeRootInstanceId || editStore2.runtimeEntitiesManager.isChildOf(
+      instanceId,
+      activeRootInstanceId
+    ))
+  );
+  return isDropTargetInInteractionLayer;
+};
 _setWidgetFeatures_dec = [action], _setIsDragging_dec = [action], _startNewComponentDrag_dec = [action], _cancelNewComponentDrag_dec = [action], _setValidRootIds_dec = [action], _setInvalidDropTarget_dec = [action], _setDropTargetId_dec = [action], _setActiveDragRect_dec = [action], _setActiveTargetRect_dec = [action], _setWidgetPosition_dec = [action], _updateChildPositions_dec = [action];
 class DragAndDropManager {
   constructor(root2) {
@@ -109017,11 +109032,286 @@ const Layers$1 = {
   // section column resizer and resizer disabled tooltip,
   modal: 7,
   // min max height constraint
-  addSectionButton: 6,
+  addSectionButton: 7,
   // blueprint control group focused input
   max: 99999
   /* LayerMax */
 };
+const createBindableEntityProxy = (entity, identifier2) => {
+  return new Proxy(
+    {
+      entity,
+      [BindingMetaSymbol]: identifier2
+    },
+    {
+      get(_target, prop) {
+        if (prop === BindingMetaSymbol) {
+          return identifier2;
+        }
+        return entity == null ? void 0 : entity[prop];
+      },
+      set(_target, prop, value) {
+        if (!entity) {
+          return false;
+        }
+        entity[prop] = value;
+        return true;
+      },
+      deleteProperty(_target, prop) {
+        if (!entity) {
+          return false;
+        }
+        delete entity[prop];
+        return true;
+      },
+      has(_target, prop) {
+        if (!entity) {
+          return false;
+        }
+        return prop in entity;
+      },
+      ownKeys(_target) {
+        if (!entity) {
+          return [];
+        }
+        return Object.keys(entity);
+      },
+      getOwnPropertyDescriptor(_target, prop) {
+        if (!entity) {
+          return void 0;
+        }
+        return Object.getOwnPropertyDescriptor(entity, prop);
+      },
+      defineProperty(_target, prop, descriptor) {
+        if (!entity) {
+          return false;
+        }
+        Object.defineProperty(entity, prop, descriptor);
+        return true;
+      },
+      preventExtensions(_target) {
+        if (!entity) {
+          return false;
+        }
+        Object.preventExtensions(entity);
+        return true;
+      },
+      isExtensible(_target) {
+        if (!entity) {
+          return false;
+        }
+        return Object.isExtensible(entity);
+      },
+      getPrototypeOf(_target) {
+        if (!entity) {
+          return null;
+        }
+        return Object.getPrototypeOf(entity);
+      },
+      setPrototypeOf(_target, proto4) {
+        if (!entity) {
+          return false;
+        }
+        Object.setPrototypeOf(entity, proto4);
+        return true;
+      }
+    }
+  );
+};
+const existingScopeIds = /* @__PURE__ */ new Set();
+function internalCreateScope(initialEntities, options) {
+  return createSbScope(initialEntities, options);
+}
+function createSbScope(initialEntities, options) {
+  const { parentScopeId, name } = options;
+  if (!name) {
+    throw new Error("Scope name is required");
+  }
+  const stableScopeId = options.scopeId ?? getStableScopeId(name);
+  if (existingScopeIds.has(stableScopeId)) {
+    console.warn(`Scope with name ${name} already exists`);
+  }
+  existingScopeIds.add(stableScopeId);
+  const scopeId = rootStore.entityManager.createScope({
+    parentScopeId,
+    name,
+    scopeId: stableScopeId
+  });
+  const bindingIds = {};
+  const getBinding = (key2) => {
+    if (bindingIds[key2]) {
+      return bindingIds[key2];
+    }
+    bindingIds[key2] = {
+      entityName: key2,
+      scopeId
+    };
+    return bindingIds[key2];
+  };
+  const entities = new Proxy(
+    {},
+    {
+      get(_target, key2) {
+        if (typeof key2 !== "string") {
+          return void 0;
+        }
+        const entity = rootStore.entityManager.getEntity(scopeId, {
+          value: key2,
+          isAnonymous: false
+        });
+        return createBindableEntityProxy(entity, getBinding(key2));
+      }
+    }
+  );
+  return {
+    entities,
+    initialEntities,
+    scopeInfo: {
+      scopeId,
+      name,
+      parentScopeId
+    }
+  };
+}
+const ScopeContext = createContext({
+  scopeId: GLOBAL_SCOPE_ID
+});
+const ScopeProvider = ({
+  scopeId,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ScopeContext.Provider, { value: { scopeId }, children });
+};
+const useScope = () => {
+  const scopeInfo = useContext(ScopeContext);
+  return scopeInfo ?? { scopeId: GLOBAL_SCOPE_ID };
+};
+function registerScope(Component3, scopeDef, options) {
+  const componentName = Component3.displayName || Component3.name;
+  const scopeInfo = scopeDef.scopeInfo;
+  const ScopedComponent = function ScopedComponent2(props) {
+    const parentScope = useScope();
+    const stableScopeId = useRef(
+      predictableNameGenerator(`sc-${componentName}`)
+    );
+    const [scopeId, setScopeId] = useState(null);
+    useEffect(() => {
+      if (scopeInfo.scopeId) {
+        setScopeId(scopeInfo.scopeId);
+        return;
+      }
+      const newScopeId = rootStore.entityManager.createScope({
+        parentScopeId: parentScope.scopeId,
+        name: scopeInfo.name,
+        scopeId: stableScopeId.current
+      });
+      setScopeId(newScopeId);
+    }, [parentScope.scopeId]);
+    useStableEffect(
+      () => {
+        var _a2;
+        const currentScopeId = scopeId;
+        if (!currentScopeId) {
+          return;
+        }
+        Object.entries(scopeDef.initialEntities).forEach(
+          ([name, { type: type5, ...rest }]) => {
+            const internalName = getName(name);
+            const entity = rootStore.entityManager.getEntity(
+              currentScopeId,
+              internalName
+            );
+            const entityIsInOurScope = entity && currentScopeId === entity.scopeId;
+            if (entity && entityIsInOurScope) {
+              rootStore.entityManager.updateEntity({
+                scopeId: currentScopeId,
+                name: internalName,
+                props: rest
+              });
+            } else {
+              rootStore.entityManager.createEntity({
+                scopeId: currentScopeId,
+                name: internalName,
+                props: rest,
+                type: type5
+              });
+            }
+            if (type5 === "SbTimer" && rest.startOnPageLoad && typeof entity === "object" && typeof (entity == null ? void 0 : entity.start) === "function") {
+              entity.start();
+            }
+          }
+        );
+        (_a2 = options == null ? void 0 : options.onScopeLoaded) == null ? void 0 : _a2.call(options);
+      },
+      {
+        initialEntities: scopeDef.initialEntities,
+        scopeInfo: scopeDef.scopeInfo,
+        scopeId
+      },
+      {
+        cold: true,
+        customEqualChecks: [
+          [(a3) => typeof a3 === "object" && a3 !== null, (a3, b3) => lodashExports.isEqual(a3, b3)]
+        ]
+      }
+    );
+    if (!scopeId) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ScopeProvider, { scopeId, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component3, { ...props }) });
+  };
+  return ScopedComponent;
+}
+const InternalGlobalScope = internalCreateScope(
+  {},
+  {
+    name: GLOBAL_SCOPE_ID,
+    scopeId: GLOBAL_SCOPE_ID
+  }
+);
+const GlobalScope = registerScope(
+  ({ children }) => {
+    const { theme } = useTheme();
+    useEffect(() => {
+      const name = getName("Theme");
+      const existingTheme = rootStore.entityManager.getEntity(
+        GLOBAL_SCOPE_ID,
+        name
+      );
+      if (existingTheme) {
+        rootStore.entityManager.updateEntity({
+          name,
+          props: theme,
+          scopeId: GLOBAL_SCOPE_ID
+        });
+      } else {
+        rootStore.entityManager.createEntity({
+          name,
+          type: "theme",
+          props: theme,
+          scopeId: GLOBAL_SCOPE_ID
+        });
+      }
+    }, [theme]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children });
+  },
+  InternalGlobalScope
+);
+function createEntityProxy(entityName) {
+  return new Proxy(
+    {},
+    {
+      get(_target, prop) {
+        const entity = InternalGlobalScope.entities[entityName];
+        return entity == null ? void 0 : entity[prop];
+      }
+    }
+  );
+}
+const Theme = createEntityProxy("Theme");
+const Global = createEntityProxy("Global");
+const Embed = createEntityProxy("Embed");
+const Env = createEntityProxy("Env");
 const getSizeProp = ({
   label,
   controlType,
@@ -109145,12 +109435,11 @@ const spacing = (options) => {
     label: "Spacing",
     helpText: "Space between components in container. If the alignment is space-between or space-around, this is the minimum spacing between items",
     controlType: "SPACING_CONTROL",
-    themeValue: function(s3) {
-      var _a2;
+    themeValue: function() {
       if (this.layout === "freeform") {
         return Dim.px(0);
       }
-      return themeValue ?? ((_a2 = s3.theme) == null ? void 0 : _a2.spacing);
+      return themeValue ?? Theme.spacing;
     },
     ...rest
   });
@@ -109179,9 +109468,8 @@ const padding = (options) => {
     label: "Padding",
     helpText: "The padding for the component",
     controlType: "PADDING_CONTROL",
-    themeValue: function(s3) {
-      var _a2;
-      return themeValue ?? ((_a2 = s3.theme) == null ? void 0 : _a2.padding);
+    themeValue: function() {
+      return themeValue ?? Theme.padding;
     },
     ...rest
   }).default(themeValue);
@@ -113138,19 +113426,6 @@ function useRegisterSourceElement(sourceId) {
     [sourceId]
   );
 }
-const ScopeContext = createContext({
-  scopeId: GLOBAL_SCOPE_ID
-});
-const ScopeProvider = ({
-  scopeId,
-  children
-}) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ScopeContext.Provider, { value: { scopeId }, children });
-};
-const useScope = () => {
-  const scopeInfo = useContext(ScopeContext);
-  return scopeInfo ?? { scopeId: GLOBAL_SCOPE_ID };
-};
 const CANVAS_ROOT_ID = "canvas-root";
 const MODAL_TARGET_ROOT_ID = "modal-target-root";
 const CollisionsLayer = observer(() => {
@@ -113159,6 +113434,7 @@ const CollisionsLayer = observer(() => {
   const dropTargetId = editStore2.ui.dnd.dropTargetId;
   const isDragging = editStore2.ui.dnd.isDragging;
   const pendingResize = editStore2.ui.resizing.pendingResizes;
+  const isDropTargetInInteractionLayer = getIsComponentInInteractionLayer(dropTargetId);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     pendingResize.map((resize) => {
       const widget = getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(
@@ -113177,7 +113453,7 @@ const CollisionsLayer = observer(() => {
         resize.sourceId
       );
     }),
-    isDragging && dropTargetId && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    isDragging && dropTargetId && isDropTargetInInteractionLayer && /* @__PURE__ */ jsxRuntimeExports.jsx(
       Collisions,
       {
         parentInstanceId: dropTargetId,
@@ -114260,17 +114536,10 @@ const DropLayer = observer(() => {
   const editStore2 = getEditStore();
   const draggedWidgetType = editStore2.ui.dnd.draggedWidgetType;
   const dropTargetWidgetType = editStore2.ui.dnd.dropTargetWidgetType;
-  const dropTargetId = editStore2.ui.dnd.dropTargetId;
   const isDropTargetGridLike = editStore2.ui.dnd.isDropTargetGridLike;
   const isDropTargetStackLike = editStore2.ui.dnd.isDropTargetStackLike;
-  const activeRootInstanceId = editStore2.interactionLayerManager.activeRootInstanceId;
-  const isDropTargetInInteractionLayer = (
-    // if active root id is undefined, we are in the page and can drop anywhere
-    !activeRootInstanceId || dropTargetId && (dropTargetId === activeRootInstanceId || editStore2.runtimeEntitiesManager.isChildOf(
-      dropTargetId,
-      activeRootInstanceId
-    ))
-  );
+  const dropTargetId = editStore2.ui.dnd.dropTargetId;
+  const isDropTargetInInteractionLayer = getIsComponentInInteractionLayer(dropTargetId);
   const isDragging = editStore2.ui.dnd.isDragging;
   const isAllowedDrop = isDropTargetInInteractionLayer && isDragging && Boolean(draggedWidgetType && dropTargetWidgetType);
   const validStackDrop = isAllowedDrop && isDropTargetStackLike;
@@ -121050,10 +121319,9 @@ const createTextStyleCompositeBase = () => ({
 const basePropertiesPaneDisplay = {
   label: "Style",
   controlType: "TEXT_STYLE",
-  options: function(s3) {
-    var _a2;
+  options: function() {
     return [
-      ...Object.entries(((_a2 = s3.theme) == null ? void 0 : _a2.typographies) ?? {}).flatMap(
+      ...Object.entries(Theme.typographies ?? {}).flatMap(
         ([key2, typography]) => {
           return {
             label: typography.name ?? camelCaseToSentenceCase(key2),
@@ -121116,8 +121384,8 @@ const borderRadius = (propertiesPanelConfig = {}) => {
     topRight: Prop.dimension().readAndWrite(),
     bottomRight: Prop.dimension().readAndWrite(),
     bottomLeft: Prop.dimension().readAndWrite()
-  }).default(function(s3) {
-    const borderRadius2 = s3.theme.defaultBorder.borderRadius ?? Dim.px(0);
+  }).default(function() {
+    const borderRadius2 = Theme.defaultBorder.borderRadius ?? Dim.px(0);
     return createBorderRadiusObject(borderRadius2);
   }).readAndWrite().propertiesPanel({
     label: "Border radius",
@@ -121142,7 +121410,7 @@ const PRIMARY_BUTTON_BORDER_OBJECT = buildPerSideBorder(() => ({
   style: "solid"
 }));
 const SECONDARY_BUTTON_BORDER_OBJECT = buildPerSideBorder(() => ({
-  color: (s3) => s3.theme.colors.primary500,
+  color: () => Theme.colors.primary500,
   width: Dim.px(1),
   style: "solid"
 }));
@@ -121153,7 +121421,7 @@ const getDefaultBorderObject = function() {
     case "secondary":
       return SECONDARY_BUTTON_BORDER_OBJECT;
     default:
-      return NO_BORDER_OBJECT;
+      return noBorderOject(Theme);
   }
 };
 const PerSideBorderDef = function() {
@@ -121163,11 +121431,11 @@ const PerSideBorderDef = function() {
     style: Prop.string().readAndWrite()
   });
 };
-const textStyle$3 = textStyleProp().default(function(s3) {
+const textStyle$3 = textStyleProp().default(function() {
   return {
     variant: "buttonLabel",
     textColor: {
-      default: getButtonThemeDefaultTextColor(s3.theme, this.variant)
+      default: getButtonThemeDefaultTextColor(Theme, this.variant)
     }
   };
 });
@@ -121218,9 +121486,9 @@ const propertiesDefinition$j = {
       }
     }),
     textStyle: textStyle$3,
-    backgroundColor: Prop.string().readAndWrite().default(function(s3) {
+    backgroundColor: Prop.string().readAndWrite().default(function() {
       const defaultThemeBackground = getButtonThemeDefaultBackgroundColor(
-        s3.theme,
+        Theme,
         this.variant
       );
       return defaultThemeBackground === "transparent" ? void 0 : defaultThemeBackground;
@@ -121229,8 +121497,8 @@ const propertiesDefinition$j = {
       controlType: "COLOR_PICKER",
       visibility: "SHOW_NAME",
       isRemovable: true,
-      defaultOnAdd: function(s3) {
-        return getButtonThemeDefaultBackgroundColor(s3.theme, this.variant);
+      defaultOnAdd: function() {
+        return getButtonThemeDefaultBackgroundColor(Theme, this.variant);
       }
     }),
     border: Prop.composite(buildPerSideBorder(() => PerSideBorderDef())).default(getDefaultBorderObject).propertiesPanel({
@@ -121241,20 +121509,20 @@ const propertiesDefinition$j = {
       defaultOnAdd: SECONDARY_BUTTON_BORDER_OBJECT,
       visibility: "SHOW_NAME"
     }).readAndWrite(),
-    borderRadius: borderRadius().default(function(s3) {
+    borderRadius: borderRadius().default(function() {
       let borderRadius2;
       switch (this.variant) {
         case "PRIMARY_BUTTON":
-          borderRadius2 = s3.theme.buttons.primary.borderRadius;
+          borderRadius2 = Theme.buttons.primary.borderRadius;
           break;
         case "SECONDARY_BUTTON":
-          borderRadius2 = s3.theme.buttons.secondary.borderRadius;
+          borderRadius2 = Theme.buttons.secondary.borderRadius;
           break;
         case "TERTIARY_BUTTON":
-          borderRadius2 = s3.theme.buttons.tertiary.borderRadius;
+          borderRadius2 = Theme.buttons.tertiary.borderRadius;
           break;
         default:
-          borderRadius2 = s3.theme.buttons.primary.borderRadius;
+          borderRadius2 = Theme.buttons.primary.borderRadius;
       }
       return createBorderRadiusObject(borderRadius2);
     }),
@@ -122230,16 +122498,16 @@ const propertiesDefinition$h = {
         { label: "Card", value: "card", icon: "CONTAINER_CARD_STYLE" }
       ]
     }),
-    backgroundColor: Prop.string().default(function(s3) {
-      return this.variant === "card" ? s3.theme.colors.neutral : void 0;
+    backgroundColor: Prop.string().default(function() {
+      return this.variant === "card" ? Theme.colors.neutral : void 0;
     }).validate(VALIDATORS.TEXT_ALLOW_UNDEFINED).readAndWrite().propertiesPanel({
       label: "Background",
       controlType: "COLOR_PICKER_FOR_CONTAINER_BACKGROUND",
       helpText: "Changes the color of the background",
       visibility: "SHOW_NAME",
       isRemovable: true,
-      defaultOnAdd: function(s3) {
-        return s3.theme.colors.appBackground ?? "#ffffff";
+      defaultOnAdd: function() {
+        return Theme.colors.appBackground ?? "#ffffff";
       }
     }),
     border: border(),
@@ -122247,8 +122515,8 @@ const propertiesDefinition$h = {
       isRemovable: true,
       visibility: "SHOW_NAME",
       defaultOnAdd: createBorderRadiusObject(Dim.px(0))
-    }).default(function(s3) {
-      const borderRadius2 = this.variant === "card" ? s3.theme.defaultBorder.borderRadius : Dim.px(0);
+    }).default(function() {
+      const borderRadius2 = this.variant === "card" ? Theme.defaultBorder.borderRadius : Dim.px(0);
       return createBorderRadiusObject(borderRadius2);
     })
   })
@@ -122264,6 +122532,7 @@ const InternalContainer = (props) => {
   var _a2, _b2, _c2;
   const { style: style2, ...passThroughProps } = usePassthroughProps(props);
   const { isEditing } = useEditor();
+  const { theme } = useTheme();
   const componentClasses = useMemo$2(
     () => [
       "container-component",
@@ -122339,7 +122608,7 @@ const InternalContainer = (props) => {
           spacing: props.spacing,
           isVisible: props.isVisible ?? true,
           style: innerLayoutStyle,
-          border: NO_BORDER_OBJECT,
+          border: noBorderOject(theme),
           children: props.children
         }
       ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -122348,7 +122617,7 @@ const InternalContainer = (props) => {
           spacing: props.spacing,
           isVisible: props.isVisible ?? true,
           style: innerLayoutStyle,
-          border: NO_BORDER_OBJECT,
+          border: noBorderOject(theme),
           children: props.children
         }
       )
@@ -128259,13 +128528,17 @@ const CURRENCY_CODE_DISPLAY_OPTIONS = [
     value: CurrencyCodeDisplayTypes.ISO_CODE
   }
 ];
-const DEFAULT_INPUT_BORDER = {
-  width: Dim.px(1)
-};
-const DEFAULT_INPUT_BORDER_OBJECT = {
-  top: DEFAULT_INPUT_BORDER,
-  bottom: DEFAULT_INPUT_BORDER
-};
+const defaultInputBorder = (theme) => ({
+  width: Dim.px(1),
+  style: "solid",
+  color: theme.colors.neutral100
+});
+const defaultInputBorderObject = (theme) => ({
+  left: defaultInputBorder(theme),
+  right: defaultInputBorder(theme),
+  top: defaultInputBorder(theme),
+  bottom: defaultInputBorder(theme)
+});
 const CURRENCY_SYMBOL_MAP = {
   AED: "د.إ",
   AFN: "؋",
@@ -128848,8 +129121,8 @@ const useIconTop = ({
     backgroundColor
   });
   const inputStyleOverride = inputTypographyProps.style;
-  const borderTop = ((_b2 = (_a2 = border2 == null ? void 0 : border2.top) == null ? void 0 : _a2.width) == null ? void 0 : _b2.value) ?? ((_c2 = DEFAULT_INPUT_BORDER_OBJECT.top.width) == null ? void 0 : _c2.value) ?? 0;
-  const borderBottom = ((_e2 = (_d2 = border2 == null ? void 0 : border2.bottom) == null ? void 0 : _d2.width) == null ? void 0 : _e2.value) ?? ((_f2 = DEFAULT_INPUT_BORDER_OBJECT.bottom.width) == null ? void 0 : _f2.value) ?? 0;
+  const borderTop = ((_b2 = (_a2 = border2 == null ? void 0 : border2.top) == null ? void 0 : _a2.width) == null ? void 0 : _b2.value) ?? ((_c2 = defaultInputBorderObject(theme).top.width) == null ? void 0 : _c2.value) ?? 0;
+  const borderBottom = ((_e2 = (_d2 = border2 == null ? void 0 : border2.bottom) == null ? void 0 : _d2.width) == null ? void 0 : _e2.value) ?? ((_f2 = defaultInputBorderObject(theme).bottom.width) == null ? void 0 : _f2.value) ?? 0;
   const generatedInputTypographiesTheme = theme.typographies;
   const lineHeight = (inputStyleOverride == null ? void 0 : inputStyleOverride.lineHeight) ?? ((_g2 = generatedInputTypographiesTheme == null ? void 0 : generatedInputTypographiesTheme.inputText) == null ? void 0 : _g2.lineHeight);
   const fontSize = getFontSizeInPxFromTextStyle({
@@ -129819,10 +130092,10 @@ const textStyle$2 = textStyleProp({
     label: "Input text style"
   }
 }).default(
-  (state) => ({
+  () => ({
     variant: DEFAULT_INPUT_WIDGET_INPUT_STYLE_VARIANT,
     textColor: {
-      default: state.theme.colors.neutral900
+      default: Theme.colors.neutral900
     }
   })
 );
@@ -129835,10 +130108,10 @@ const labelStyle$1 = textStyleProp({
     }
   }
 }).default(
-  (state) => ({
+  () => ({
     variant: DEFAULT_INPUT_WIDGET_LABEL_STYLE_VARIANT,
     textColor: {
-      default: state.theme.colors.neutral900
+      default: Theme.colors.neutral900
     }
   })
 );
@@ -136921,10 +137194,10 @@ const getHorizontalPositionProperty = (propertyName = "position", schema, defaul
     })
   };
 };
-const textStyle$1 = textStyleProp().default(function(s3) {
+const textStyle$1 = textStyleProp().default(function() {
   return {
     variant: DEFAULT_TEXT_WIDGET_TEXT_STYLE_VARIANT,
-    textColor: s3.theme.typographies.label.textColor
+    textColor: Theme.typographies.label.textColor
   };
 });
 const propertiesDefinition$d = {
@@ -137343,7 +137616,9 @@ const CloseButton = (props) => {
 };
 const ModalComponent = (props) => {
   const modalWidthCss = props.widthPreset ? `${MODAL_WIDTH_PRESETS[props.widthPreset]}%` : void 0;
-  const { allStyles: modalStyle } = useComputeComponentStyles(props.styleProps);
+  const { borderStyle, backgroundStyle } = useComputeComponentStyles(
+    props.styleProps
+  );
   const modalInternalContainer = useMemo$2(
     () => /* @__PURE__ */ jsxRuntimeExports.jsx(
       InternalContainer,
@@ -137354,6 +137629,7 @@ const ModalComponent = (props) => {
         "data-sb-instance-id": props.instanceId,
         verticalAlign: props.verticalAlign ?? "top",
         horizontalAlign: props.horizontalAlign ?? "left",
+        padding: props.styleProps.padding ?? ZERO_PADDING,
         spacing: props.spacing ?? Dim.px(0),
         columns: props.columns ?? 48,
         rows: props.rows,
@@ -137369,6 +137645,7 @@ const ModalComponent = (props) => {
       props.instanceId,
       props.verticalAlign,
       props.horizontalAlign,
+      props.styleProps.padding,
       props.spacing,
       props.columns,
       props.rows,
@@ -137396,7 +137673,9 @@ const ModalComponent = (props) => {
         bodyStyle: {
           height: "100%",
           position: "relative",
-          ...modalStyle,
+          padding: 0,
+          ...borderStyle,
+          ...backgroundStyle,
           ...props.isEditing && props.isOpen ? {
             anchorName: getWidgetAnchorName(props.instanceId)
           } : {}
@@ -147576,14 +147855,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-CHtqqhqa.js"
+            "./allPathsLoader-B3FzEE6v.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-Cx--S5eU.js"
+            "./splitPathsBySizeLoader-DTQ0e96j.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -178001,10 +178280,10 @@ const baseTextStyleProp = createTextStyleCompositeBase();
 const textStyle = textStyleProp({
   baseProp: baseTextStyleProp
 }).default(
-  (state) => ({
+  () => ({
     variant: DEFAULT_INPUT_WIDGET_INPUT_STYLE_VARIANT,
     textColor: {
-      default: state.theme.colors.neutral900
+      default: Theme.colors.neutral900
     }
   })
 );
@@ -178017,10 +178296,10 @@ const labelStyle = textStyleProp({
     }
   }
 }).default(
-  (state) => ({
+  () => ({
     variant: DEFAULT_INPUT_WIDGET_LABEL_STYLE_VARIANT,
     textColor: {
-      default: state.theme.colors.neutral900
+      default: Theme.colors.neutral900
     }
   })
 );
@@ -180088,10 +180367,10 @@ const propertiesDefinition$8 = {
       label: "Border radius",
       controlType: "BORDER_RADIUS_CONTROL"
     }),
-    "styleProps.divider": Prop.any().default({
+    "styleProps.divider": Prop.any().default(() => ({
       size: Dim.px(1),
-      color: "{{ theme.colors.neutral100 }}"
-    }).propertiesPanel({
+      color: Theme.colors.neutral100
+    })).propertiesPanel({
       label: "Divider",
       helpText: "Display dividers between key value pairs",
       controlType: "COLORED_DIMENSION_CONTROL",
@@ -184113,12 +184392,6 @@ const SbProvider = function SbProvider2({
     editorBridge.updateTheme(mergedTheme, generatedTheme);
     const userAccessibleTheme2 = generatedTheme;
     setUserAccessibleTheme(userAccessibleTheme2);
-    rootStore.entityManager.createEntity({
-      name: getName("theme"),
-      scopeId: GLOBAL_SCOPE_ID,
-      type: "theme",
-      props: userAccessibleTheme2
-    });
   }, [settings == null ? void 0 : settings.theme, settings == null ? void 0 : settings.themeOverrides]);
   useEffect(() => {
     initializeStyles(name);
@@ -184145,7 +184418,7 @@ const SbProvider = function SbProvider2({
               overflow: "hidden",
               position: "relative"
             },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme: userAccessibleTheme, children: isEmbedded ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmbedWrapper, { children }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Auth0Wrapper, { children }) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme: userAccessibleTheme, children: /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalScope, { children: isEmbedded ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmbedWrapper, { children }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Auth0Wrapper, { children }) }) })
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: MODAL_TARGET_ROOT_ID, "data-superblocks": MODAL_TARGET_ROOT_ID })
@@ -184374,82 +184647,6 @@ function showAlert(_message, _style, _durationSeconds, _alertPosition) {
 }
 function logoutIntegrations() {
 }
-function registerScope(Component3, scopeDef, options) {
-  const componentName = Component3.displayName || Component3.name;
-  const scopeInfo = scopeDef.scopeInfo;
-  const ScopedComponent = function ScopedComponent2(props) {
-    const parentScope = useScope();
-    const stableScopeId = useRef(
-      predictableNameGenerator(`sc-${componentName}`)
-    );
-    const [scopeId, setScopeId] = useState(null);
-    useEffect(() => {
-      if (scopeInfo.scopeId) {
-        setScopeId(scopeInfo.scopeId);
-        return;
-      }
-      const newScopeId = rootStore.entityManager.createScope({
-        parentScopeId: parentScope.scopeId,
-        name: scopeInfo.name,
-        scopeId: stableScopeId.current
-      });
-      setScopeId(newScopeId);
-    }, [parentScope.scopeId]);
-    useStableEffect(
-      () => {
-        var _a2;
-        const currentScopeId = scopeId;
-        if (!currentScopeId) {
-          return;
-        }
-        Object.entries(scopeDef.initialEntities).forEach(
-          ([name, { type: type5, ...rest }]) => {
-            const internalName = getName(name);
-            const entity = rootStore.entityManager.getEntity(
-              currentScopeId,
-              internalName
-            );
-            const entityIsInOurScope = entity && currentScopeId === entity.scopeId;
-            if (entity && entityIsInOurScope) {
-              rootStore.entityManager.updateEntity({
-                scopeId: currentScopeId,
-                name: internalName,
-                props: rest
-              });
-            } else {
-              rootStore.entityManager.createEntity({
-                scopeId: currentScopeId,
-                name: internalName,
-                props: rest,
-                type: type5
-              });
-            }
-            if (type5 === "SbTimer" && rest.startOnPageLoad && typeof entity === "object" && typeof (entity == null ? void 0 : entity.start) === "function") {
-              entity.start();
-            }
-          }
-        );
-        (_a2 = options == null ? void 0 : options.onScopeLoaded) == null ? void 0 : _a2.call(options);
-      },
-      {
-        initialEntities: scopeDef.initialEntities,
-        scopeInfo: scopeDef.scopeInfo,
-        scopeId
-      },
-      {
-        cold: true,
-        customEqualChecks: [
-          [(a3) => typeof a3 === "object" && a3 !== null, (a3, b3) => lodashExports.isEqual(a3, b3)]
-        ]
-      }
-    );
-    if (!scopeId) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ScopeProvider, { scopeId, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component3, { ...props }) });
-  };
-  return ScopedComponent;
-}
 function registerPage(Component3, scope) {
   return registerScope(Component3, scope, {
     onScopeLoaded: () => {
@@ -184457,136 +184654,6 @@ function registerPage(Component3, scope) {
     }
   });
 }
-const createBindableEntityProxy = (entity, identifier2) => {
-  return new Proxy(
-    {
-      entity,
-      [BindingMetaSymbol]: identifier2
-    },
-    {
-      get(_target, prop) {
-        if (prop === BindingMetaSymbol) {
-          return identifier2;
-        }
-        return entity == null ? void 0 : entity[prop];
-      },
-      set(_target, prop, value) {
-        if (!entity) {
-          return false;
-        }
-        entity[prop] = value;
-        return true;
-      },
-      deleteProperty(_target, prop) {
-        if (!entity) {
-          return false;
-        }
-        delete entity[prop];
-        return true;
-      },
-      has(_target, prop) {
-        if (!entity) {
-          return false;
-        }
-        return prop in entity;
-      },
-      ownKeys(_target) {
-        if (!entity) {
-          return [];
-        }
-        return Object.keys(entity);
-      },
-      getOwnPropertyDescriptor(_target, prop) {
-        if (!entity) {
-          return void 0;
-        }
-        return Object.getOwnPropertyDescriptor(entity, prop);
-      },
-      defineProperty(_target, prop, descriptor) {
-        if (!entity) {
-          return false;
-        }
-        Object.defineProperty(entity, prop, descriptor);
-        return true;
-      },
-      preventExtensions(_target) {
-        if (!entity) {
-          return false;
-        }
-        Object.preventExtensions(entity);
-        return true;
-      },
-      isExtensible(_target) {
-        if (!entity) {
-          return false;
-        }
-        return Object.isExtensible(entity);
-      },
-      getPrototypeOf(_target) {
-        if (!entity) {
-          return null;
-        }
-        return Object.getPrototypeOf(entity);
-      },
-      setPrototypeOf(_target, proto4) {
-        if (!entity) {
-          return false;
-        }
-        Object.setPrototypeOf(entity, proto4);
-        return true;
-      }
-    }
-  );
-};
-const existingScopeIds = /* @__PURE__ */ new Set();
-function createSbScope(initialEntities, options) {
-  const { parentScopeId, name } = options;
-  if (!name) {
-    throw new Error("Scope name is required");
-  }
-  const stableScopeId = getStableScopeId(name);
-  if (existingScopeIds.has(stableScopeId)) {
-    console.warn(`Scope with name ${name} already exists`);
-  }
-  existingScopeIds.add(stableScopeId);
-  const scopeId = rootStore.entityManager.createScope({
-    parentScopeId,
-    name,
-    scopeId: stableScopeId
-  });
-  const bindingIds = {};
-  const getBinding = (key2) => {
-    if (bindingIds[key2]) {
-      return bindingIds[key2];
-    }
-    bindingIds[key2] = {
-      entityName: key2,
-      scopeId
-    };
-    return bindingIds[key2];
-  };
-  const entities = new Proxy({}, {
-    get(_target, key2) {
-      if (typeof key2 !== "string") {
-        return void 0;
-      }
-      const entity = rootStore.entityManager.getEntity(scopeId, {
-        value: key2,
-        isAnonymous: false
-      });
-      return createBindableEntityProxy(entity, getBinding(key2));
-    }
-  });
-  return {
-    entities,
-    initialEntities,
-    scopeInfo: {
-      scopeId,
-      name,
-      parentScopeId
-    }
-  };
-}
 function SbEvent({
   payload
 }) {
@@ -195756,7 +195823,7 @@ function requireClient() {
 }
 var clientExports = requireClient();
 export {
-  IDLE_NAVIGATION as $,
+  Form2 as $,
   AppStateVarPersistence6$1 as A,
   copyToClipboard as B,
   navigateTo as C,
@@ -195768,130 +195835,134 @@ export {
   IconSize$2 as I,
   registerPage as J,
   createSbScope as K,
-  SbEvent as L,
-  useUpdateProperties as M,
-  sbComputed as N,
-  Dim as O,
-  Prop as P,
-  SB as Q,
-  Outlet as R,
+  Global as L,
+  Embed as M,
+  Env as N,
+  SbEvent as O,
+  useUpdateProperties as P,
+  Prop as Q,
+  sbComputed as R,
   SbButton as S,
-  clientExports as T,
-  Await as U,
-  BrowserRouter as V,
-  Form2 as W,
-  HashRouter as X,
-  IDLE_BLOCKER as Y,
-  IDLE_FETCHER as Z,
+  Theme as T,
+  Dim as U,
+  SB as V,
+  Outlet as W,
+  clientExports as X,
+  Await as Y,
+  BrowserRouter as Z,
   __awaiter as _,
   __generator as a,
-  isSession as a$,
-  Link as a0,
-  Links as a1,
-  MemoryRouter as a2,
-  Meta as a3,
-  NavLink as a4,
-  Navigate as a5,
-  Action as a6,
-  PrefetchPageLinks as a7,
-  Route as a8,
-  Router as a9,
-  getSingleFetchDataStrategy as aA,
-  invariant as aB,
-  mapRouteProperties as aC,
-  shouldHydrateRouteLoader as aD,
-  useFogOFWarDiscovery as aE,
-  useScrollRestoration as aF,
-  createBrowserRouter as aG,
-  createCookie as aH,
-  createCookieSessionStorage as aI,
-  createHashRouter as aJ,
-  createMemoryRouter as aK,
-  createMemorySessionStorage as aL,
-  createPath as aM,
-  createRequestHandler as aN,
-  createRoutesFromChildren as aO,
-  createRoutesFromElements as aP,
-  createRoutesStub as aQ,
-  createSearchParams as aR,
-  createSession as aS,
-  createSessionStorage as aT,
-  createStaticHandler2 as aU,
-  createStaticRouter as aV,
-  data as aW,
-  generatePath as aX,
-  href as aY,
-  isCookie as aZ,
-  isRouteErrorResponse as a_,
-  RouterProvider as aa,
-  Routes as ab,
-  Scripts as ac,
-  ScrollRestoration as ad,
-  ServerRouter as ae,
-  StaticRouter as af,
-  StaticRouterProvider as ag,
-  DataRouterContext as ah,
-  DataRouterStateContext as ai,
-  ErrorResponseImpl as aj,
-  FetchersContext as ak,
-  FrameworkContext as al,
-  LocationContext as am,
-  NavigationContext as an,
-  RemixErrorBoundary as ao,
-  RouteContext as ap,
-  ServerMode as aq,
-  SingleFetchRedirectSymbol as ar,
-  ViewTransitionContext as as,
-  createBrowserHistory as at,
-  createClientRoutes as au,
-  createClientRoutesWithHMRRevalidationOptOut as av,
-  createRouter as aw,
-  decodeViaTurboStream as ax,
-  deserializeErrors2 as ay,
-  getPatchRoutesOnNavigationFunction as az,
+  generatePath as a$,
+  HashRouter as a0,
+  IDLE_BLOCKER as a1,
+  IDLE_FETCHER as a2,
+  IDLE_NAVIGATION as a3,
+  Link as a4,
+  Links as a5,
+  MemoryRouter as a6,
+  Meta as a7,
+  NavLink as a8,
+  Navigate as a9,
+  createRouter as aA,
+  decodeViaTurboStream as aB,
+  deserializeErrors2 as aC,
+  getPatchRoutesOnNavigationFunction as aD,
+  getSingleFetchDataStrategy as aE,
+  invariant as aF,
+  mapRouteProperties as aG,
+  shouldHydrateRouteLoader as aH,
+  useFogOFWarDiscovery as aI,
+  useScrollRestoration as aJ,
+  createBrowserRouter as aK,
+  createCookie as aL,
+  createCookieSessionStorage as aM,
+  createHashRouter as aN,
+  createMemoryRouter as aO,
+  createMemorySessionStorage as aP,
+  createPath as aQ,
+  createRequestHandler as aR,
+  createRoutesFromChildren as aS,
+  createRoutesFromElements as aT,
+  createRoutesStub as aU,
+  createSearchParams as aV,
+  createSession as aW,
+  createSessionStorage as aX,
+  createStaticHandler2 as aY,
+  createStaticRouter as aZ,
+  data as a_,
+  Action as aa,
+  PrefetchPageLinks as ab,
+  Route as ac,
+  Router as ad,
+  RouterProvider as ae,
+  Routes as af,
+  Scripts as ag,
+  ScrollRestoration as ah,
+  ServerRouter as ai,
+  StaticRouter as aj,
+  StaticRouterProvider as ak,
+  DataRouterContext as al,
+  DataRouterStateContext as am,
+  ErrorResponseImpl as an,
+  FetchersContext as ao,
+  FrameworkContext as ap,
+  LocationContext as aq,
+  NavigationContext as ar,
+  RemixErrorBoundary as as,
+  RouteContext as at,
+  ServerMode as au,
+  SingleFetchRedirectSymbol as av,
+  ViewTransitionContext as aw,
+  createBrowserHistory as ax,
+  createClientRoutes as ay,
+  createClientRoutesWithHMRRevalidationOptOut as az,
   IconSize as b,
-  matchPath as b0,
-  matchRoutes as b1,
-  parsePath as b2,
-  redirect as b3,
-  redirectDocument as b4,
-  renderMatches as b5,
-  replace2 as b6,
-  resolvePath as b7,
-  HistoryRouter as b8,
-  unstable_RouterContextProvider as b9,
-  useRouteError as bA,
-  useRouteLoaderData as bB,
-  useRoutes as bC,
-  useSearchParams as bD,
-  useSubmit as bE,
-  useViewTransitionState as bF,
-  unstable_createContext as ba,
-  setDevServerHooks as bb,
-  usePrompt as bc,
-  useActionData as bd,
-  useAsyncError as be,
-  useAsyncValue as bf,
-  useBeforeUnload as bg,
-  useBlocker as bh,
-  useFetcher as bi,
-  useFetchers as bj,
-  useFormAction as bk,
-  useHref as bl,
-  useInRouterContext as bm,
-  useLinkClickHandler as bn,
-  useLoaderData as bo,
-  useLocation as bp,
-  useMatch as bq,
-  useMatches as br,
-  useNavigate as bs,
-  useNavigation as bt,
-  useNavigationType as bu,
-  useOutlet as bv,
-  useOutletContext as bw,
-  useParams as bx,
-  useResolvedPath as by,
-  useRevalidator as bz,
+  href as b0,
+  isCookie as b1,
+  isRouteErrorResponse as b2,
+  isSession as b3,
+  matchPath as b4,
+  matchRoutes as b5,
+  parsePath as b6,
+  redirect as b7,
+  redirectDocument as b8,
+  renderMatches as b9,
+  useOutletContext as bA,
+  useParams as bB,
+  useResolvedPath as bC,
+  useRevalidator as bD,
+  useRouteError as bE,
+  useRouteLoaderData as bF,
+  useRoutes as bG,
+  useSearchParams as bH,
+  useSubmit as bI,
+  useViewTransitionState as bJ,
+  replace2 as ba,
+  resolvePath as bb,
+  HistoryRouter as bc,
+  unstable_RouterContextProvider as bd,
+  unstable_createContext as be,
+  setDevServerHooks as bf,
+  usePrompt as bg,
+  useActionData as bh,
+  useAsyncError as bi,
+  useAsyncValue as bj,
+  useBeforeUnload as bk,
+  useBlocker as bl,
+  useFetcher as bm,
+  useFetchers as bn,
+  useFormAction as bo,
+  useHref as bp,
+  useInRouterContext as bq,
+  useLinkClickHandler as br,
+  useLoaderData as bs,
+  useLocation as bt,
+  useMatch as bu,
+  useMatches as bv,
+  useNavigate as bw,
+  useNavigation as bx,
+  useNavigationType as by,
+  useOutlet as bz,
   SbSection as c,
   SbColumn as d,
   SbContainer as e,
@@ -195917,4 +195988,4 @@ export {
   SbProvider as y,
   SbEventFlow as z
 };
-//# sourceMappingURL=index-CRYekRqO.js.map
+//# sourceMappingURL=index-ByxiFYSo.js.map