@superblocksteam/library 2.0.0-next.104 → 2.0.0-next.106

package/dist/{index--WgLdVs1.js → index-ctuNjk-c.js}

@@ -2684,14 +2684,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-DSzl66vm.js"
+            "./allPathsLoader-C1K3ZeiQ.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-D_NFLN6H.js"
+            "./splitPathsBySizeLoader-C5GPcg6J.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -3155,19 +3155,19 @@ var AnchorButton$1 = React.forwardRef(function(props2, ref2) {
 AnchorButton$1.displayName = "".concat(DISPLAYNAME_PREFIX$1, ".AnchorButton");
 function useSharedButtonAttributes$1(props2, ref2, options) {
   var _a2;
-  var alignText = props2.alignText, fill = props2.fill, large = props2.large, _b2 = props2.loading, loading = _b2 === void 0 ? false : _b2, minimal = props2.minimal, outlined = props2.outlined, small = props2.small;
-  var disabled = props2.disabled || loading;
+  var alignText = props2.alignText, fill = props2.fill, large = props2.large, _b2 = props2.loading, loading2 = _b2 === void 0 ? false : _b2, minimal = props2.minimal, outlined = props2.outlined, small = props2.small;
+  var disabled = props2.disabled || loading2;
   var _c2 = useInteractiveAttributes$1(!disabled, props2, ref2, options), active = _c2[0], interactiveProps = _c2[1];
-  var className = classNames(BUTTON$1, (_a2 = {}, _a2[ACTIVE$1] = active, _a2[DISABLED$1] = disabled, _a2[FILL$1] = fill, _a2[LARGE$1] = large, _a2[LOADING$1] = loading, _a2[MINIMAL$1] = minimal, _a2[OUTLINED$1] = outlined, _a2[SMALL$1] = small, _a2), alignmentClass$1(alignText), intentClass$1(props2.intent), props2.className);
+  var className = classNames(BUTTON$1, (_a2 = {}, _a2[ACTIVE$1] = active, _a2[DISABLED$1] = disabled, _a2[FILL$1] = fill, _a2[LARGE$1] = large, _a2[LOADING$1] = loading2, _a2[MINIMAL$1] = minimal, _a2[OUTLINED$1] = outlined, _a2[SMALL$1] = small, _a2), alignmentClass$1(alignText), intentClass$1(props2.intent), props2.className);
   return __assign$2(__assign$2({}, interactiveProps), { className, disabled });
 }
 function renderButtonContents$1(props2) {
-  var children = props2.children, ellipsizeText = props2.ellipsizeText, icon = props2.icon, loading = props2.loading, rightIcon = props2.rightIcon, text = props2.text, textClassName = props2.textClassName;
+  var children = props2.children, ellipsizeText = props2.ellipsizeText, icon = props2.icon, loading2 = props2.loading, rightIcon = props2.rightIcon, text = props2.text, textClassName = props2.textClassName;
   var hasTextContent = !isReactNodeEmpty$1(text) || !isReactNodeEmpty$1(children);
   return React.createElement(
     React.Fragment,
     null,
-    loading && React.createElement(Spinner$1, { key: "loading", className: BUTTON_SPINNER$1, size: SpinnerSize$1.SMALL }),
+    loading2 && React.createElement(Spinner$1, { key: "loading", className: BUTTON_SPINNER$1, size: SpinnerSize$1.SMALL }),
     React.createElement(Icon$3, { key: "leftIcon", icon }),
     hasTextContent && React.createElement(
       Text$1,
@@ -65441,7 +65441,7 @@ function isMultiple(mode) {
 }
 var BaseSelect = /* @__PURE__ */ React.forwardRef(function(props2, ref2) {
   var _customizeRawInputEle, _classNames2;
-  var id2 = props2.id, prefixCls = props2.prefixCls, className = props2.className, showSearch = props2.showSearch, tagRender = props2.tagRender, direction = props2.direction, omitDomProps = props2.omitDomProps, displayValues = props2.displayValues, onDisplayValuesChange = props2.onDisplayValuesChange, emptyOptions = props2.emptyOptions, _props$notFoundConten = props2.notFoundContent, notFoundContent = _props$notFoundConten === void 0 ? "Not Found" : _props$notFoundConten, onClear = props2.onClear, mode = props2.mode, disabled = props2.disabled, loading = props2.loading, getInputElement = props2.getInputElement, getRawInputElement = props2.getRawInputElement, open = props2.open, defaultOpen = props2.defaultOpen, onDropdownVisibleChange = props2.onDropdownVisibleChange, activeValue = props2.activeValue, onActiveValueChange = props2.onActiveValueChange, activeDescendantId = props2.activeDescendantId, searchValue = props2.searchValue, autoClearSearchValue = props2.autoClearSearchValue, onSearch = props2.onSearch, onSearchSplit = props2.onSearchSplit, tokenSeparators = props2.tokenSeparators, allowClear = props2.allowClear, showArrow = props2.showArrow, inputIcon = props2.inputIcon, clearIcon = props2.clearIcon, OptionList3 = props2.OptionList, animation = props2.animation, transitionName2 = props2.transitionName, dropdownStyle = props2.dropdownStyle, dropdownClassName = props2.dropdownClassName, dropdownMatchSelectWidth = props2.dropdownMatchSelectWidth, dropdownRender = props2.dropdownRender, dropdownAlign = props2.dropdownAlign, placement = props2.placement, getPopupContainer = props2.getPopupContainer, _props$showAction = props2.showAction, showAction = _props$showAction === void 0 ? [] : _props$showAction, onFocus = props2.onFocus, onBlur = props2.onBlur, onKeyUp = props2.onKeyUp, onKeyDown = props2.onKeyDown, onMouseDown = props2.onMouseDown, restProps = _objectWithoutProperties(props2, _excluded$l);
+  var id2 = props2.id, prefixCls = props2.prefixCls, className = props2.className, showSearch = props2.showSearch, tagRender = props2.tagRender, direction = props2.direction, omitDomProps = props2.omitDomProps, displayValues = props2.displayValues, onDisplayValuesChange = props2.onDisplayValuesChange, emptyOptions = props2.emptyOptions, _props$notFoundConten = props2.notFoundContent, notFoundContent = _props$notFoundConten === void 0 ? "Not Found" : _props$notFoundConten, onClear = props2.onClear, mode = props2.mode, disabled = props2.disabled, loading2 = props2.loading, getInputElement = props2.getInputElement, getRawInputElement = props2.getRawInputElement, open = props2.open, defaultOpen = props2.defaultOpen, onDropdownVisibleChange = props2.onDropdownVisibleChange, activeValue = props2.activeValue, onActiveValueChange = props2.onActiveValueChange, activeDescendantId = props2.activeDescendantId, searchValue = props2.searchValue, autoClearSearchValue = props2.autoClearSearchValue, onSearch = props2.onSearch, onSearchSplit = props2.onSearchSplit, tokenSeparators = props2.tokenSeparators, allowClear = props2.allowClear, showArrow = props2.showArrow, inputIcon = props2.inputIcon, clearIcon = props2.clearIcon, OptionList3 = props2.OptionList, animation = props2.animation, transitionName2 = props2.transitionName, dropdownStyle = props2.dropdownStyle, dropdownClassName = props2.dropdownClassName, dropdownMatchSelectWidth = props2.dropdownMatchSelectWidth, dropdownRender = props2.dropdownRender, dropdownAlign = props2.dropdownAlign, placement = props2.placement, getPopupContainer = props2.getPopupContainer, _props$showAction = props2.showAction, showAction = _props$showAction === void 0 ? [] : _props$showAction, onFocus = props2.onFocus, onBlur = props2.onBlur, onKeyUp = props2.onKeyUp, onKeyDown = props2.onKeyDown, onMouseDown = props2.onMouseDown, restProps = _objectWithoutProperties(props2, _excluded$l);
   var multiple = isMultiple(mode);
   var mergedShowSearch = (showSearch !== void 0 ? showSearch : multiple) || mode === "combobox";
   var domProps = _objectSpread2$1({}, restProps);
@@ -65708,14 +65708,14 @@ var BaseSelect = /* @__PURE__ */ React.forwardRef(function(props2, ref2) {
       toggleOpen: onToggleOpen
     });
   }, [props2, notFoundContent, triggerOpen, mergedOpen, id2, mergedShowSearch, multiple, onToggleOpen]);
-  var mergedShowArrow = showArrow !== void 0 ? showArrow : loading || !multiple && mode !== "combobox";
+  var mergedShowArrow = showArrow !== void 0 ? showArrow : loading2 || !multiple && mode !== "combobox";
   var arrowNode;
   if (mergedShowArrow) {
     arrowNode = /* @__PURE__ */ React.createElement(TransBtn, {
-      className: classNames("".concat(prefixCls, "-arrow"), _defineProperty$3({}, "".concat(prefixCls, "-arrow-loading"), loading)),
+      className: classNames("".concat(prefixCls, "-arrow"), _defineProperty$3({}, "".concat(prefixCls, "-arrow-loading"), loading2)),
       customizeIcon: inputIcon,
       customizeIconProps: {
-        loading,
+        loading: loading2,
         searchValue: mergedSearchValue,
         open: mergedOpen,
         focused: mockFocused,
@@ -65744,7 +65744,7 @@ var BaseSelect = /* @__PURE__ */ React.forwardRef(function(props2, ref2) {
   var optionList = /* @__PURE__ */ React.createElement(OptionList3, {
     ref: listRef
   });
-  var mergedClassName = classNames(prefixCls, className, (_classNames2 = {}, _defineProperty$3(_classNames2, "".concat(prefixCls, "-focused"), mockFocused), _defineProperty$3(_classNames2, "".concat(prefixCls, "-multiple"), multiple), _defineProperty$3(_classNames2, "".concat(prefixCls, "-single"), !multiple), _defineProperty$3(_classNames2, "".concat(prefixCls, "-allow-clear"), allowClear), _defineProperty$3(_classNames2, "".concat(prefixCls, "-show-arrow"), mergedShowArrow), _defineProperty$3(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty$3(_classNames2, "".concat(prefixCls, "-loading"), loading), _defineProperty$3(_classNames2, "".concat(prefixCls, "-open"), mergedOpen), _defineProperty$3(_classNames2, "".concat(prefixCls, "-customize-input"), customizeInputElement), _defineProperty$3(_classNames2, "".concat(prefixCls, "-show-search"), mergedShowSearch), _classNames2));
+  var mergedClassName = classNames(prefixCls, className, (_classNames2 = {}, _defineProperty$3(_classNames2, "".concat(prefixCls, "-focused"), mockFocused), _defineProperty$3(_classNames2, "".concat(prefixCls, "-multiple"), multiple), _defineProperty$3(_classNames2, "".concat(prefixCls, "-single"), !multiple), _defineProperty$3(_classNames2, "".concat(prefixCls, "-allow-clear"), allowClear), _defineProperty$3(_classNames2, "".concat(prefixCls, "-show-arrow"), mergedShowArrow), _defineProperty$3(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty$3(_classNames2, "".concat(prefixCls, "-loading"), loading2), _defineProperty$3(_classNames2, "".concat(prefixCls, "-open"), mergedOpen), _defineProperty$3(_classNames2, "".concat(prefixCls, "-customize-input"), customizeInputElement), _defineProperty$3(_classNames2, "".concat(prefixCls, "-show-search"), mergedShowSearch), _classNames2));
   var selectorNode = /* @__PURE__ */ React.createElement(RefSelectTrigger, {
     ref: triggerRef,
     disabled,
@@ -71254,7 +71254,7 @@ if (define_process_env_default$X.NODE_ENV !== "production") {
   RefIcon$c.displayName = "SearchOutlined";
 }
 function getIcons(_ref2) {
-  var suffixIcon = _ref2.suffixIcon, clearIcon = _ref2.clearIcon, menuItemSelectedIcon = _ref2.menuItemSelectedIcon, removeIcon = _ref2.removeIcon, loading = _ref2.loading, multiple = _ref2.multiple, hasFeedback = _ref2.hasFeedback, prefixCls = _ref2.prefixCls, showArrow = _ref2.showArrow, feedbackIcon = _ref2.feedbackIcon;
+  var suffixIcon = _ref2.suffixIcon, clearIcon = _ref2.clearIcon, menuItemSelectedIcon = _ref2.menuItemSelectedIcon, removeIcon = _ref2.removeIcon, loading2 = _ref2.loading, multiple = _ref2.multiple, hasFeedback = _ref2.hasFeedback, prefixCls = _ref2.prefixCls, showArrow = _ref2.showArrow, feedbackIcon = _ref2.feedbackIcon;
   var mergedClearIcon = clearIcon !== null && clearIcon !== void 0 ? clearIcon : /* @__PURE__ */ React.createElement(RefIcon$n, null);
   var getSuffixIconNode = function getSuffixIconNode2(arrowIcon) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, showArrow !== false && arrowIcon, hasFeedback && feedbackIcon);
@@ -71262,7 +71262,7 @@ function getIcons(_ref2) {
   var mergedSuffixIcon = null;
   if (suffixIcon !== void 0) {
     mergedSuffixIcon = getSuffixIconNode(suffixIcon);
-  } else if (loading) {
+  } else if (loading2) {
     mergedSuffixIcon = getSuffixIconNode(/* @__PURE__ */ React.createElement(RefIcon$k, {
       spin: true
     }));
@@ -74611,8 +74611,8 @@ var getRealWidth = function getRealWidth2(node2) {
   };
 };
 var LoadingIcon$1 = function LoadingIcon(_ref2) {
-  var prefixCls = _ref2.prefixCls, loading = _ref2.loading, existIcon = _ref2.existIcon;
-  var visible2 = !!loading;
+  var prefixCls = _ref2.prefixCls, loading2 = _ref2.loading, existIcon = _ref2.existIcon;
+  var visible2 = !!loading2;
   if (existIcon) {
     return /* @__PURE__ */ React__default.createElement("span", {
       className: "".concat(prefixCls, "-loading-icon")
@@ -74709,12 +74709,12 @@ function convertLegacyProps(type5) {
 }
 var InternalButton = function InternalButton2(props2, ref2) {
   var _classNames;
-  var _props$loading = props2.loading, loading = _props$loading === void 0 ? false : _props$loading, customizePrefixCls = props2.prefixCls, _props$type = props2.type, type5 = _props$type === void 0 ? "default" : _props$type, danger = props2.danger, _props$shape = props2.shape, shape = _props$shape === void 0 ? "default" : _props$shape, customizeSize = props2.size, customDisabled = props2.disabled, className = props2.className, children = props2.children, icon = props2.icon, _props$ghost = props2.ghost, ghost = _props$ghost === void 0 ? false : _props$ghost, _props$block = props2.block, block = _props$block === void 0 ? false : _props$block, _props$htmlType = props2.htmlType, htmlType = _props$htmlType === void 0 ? "button" : _props$htmlType, rest = __rest$l(props2, ["loading", "prefixCls", "type", "danger", "shape", "size", "disabled", "className", "children", "icon", "ghost", "block", "htmlType"]);
+  var _props$loading = props2.loading, loading2 = _props$loading === void 0 ? false : _props$loading, customizePrefixCls = props2.prefixCls, _props$type = props2.type, type5 = _props$type === void 0 ? "default" : _props$type, danger = props2.danger, _props$shape = props2.shape, shape = _props$shape === void 0 ? "default" : _props$shape, customizeSize = props2.size, customDisabled = props2.disabled, className = props2.className, children = props2.children, icon = props2.icon, _props$ghost = props2.ghost, ghost = _props$ghost === void 0 ? false : _props$ghost, _props$block = props2.block, block = _props$block === void 0 ? false : _props$block, _props$htmlType = props2.htmlType, htmlType = _props$htmlType === void 0 ? "button" : _props$htmlType, rest = __rest$l(props2, ["loading", "prefixCls", "type", "danger", "shape", "size", "disabled", "className", "children", "icon", "ghost", "block", "htmlType"]);
   var size2 = React.useContext(SizeContext$1);
   var disabled = React.useContext(DisabledContext$1);
   var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
   var groupSize = React.useContext(GroupSizeContext);
-  var _React$useState = React.useState(!!loading), _React$useState2 = _slicedToArray(_React$useState, 2), innerLoading = _React$useState2[0], setLoading = _React$useState2[1];
+  var _React$useState = React.useState(!!loading2), _React$useState2 = _slicedToArray(_React$useState, 2), innerLoading = _React$useState2[0], setLoading = _React$useState2[1];
   var _React$useState3 = React.useState(false), _React$useState4 = _slicedToArray(_React$useState3, 2), hasTwoCNChar = _React$useState4[0], setHasTwoCNChar = _React$useState4[1];
   var _React$useContext = React.useContext(ConfigContext), getPrefixCls = _React$useContext.getPrefixCls, autoInsertSpaceInButton = _React$useContext.autoInsertSpaceInButton, direction = _React$useContext.direction;
   var buttonRef = ref2 || /* @__PURE__ */ React.createRef();
@@ -74734,7 +74734,7 @@ var InternalButton = function InternalButton2(props2, ref2) {
       setHasTwoCNChar(false);
     }
   };
-  var loadingOrDelay = typeof loading === "boolean" ? loading : (loading === null || loading === void 0 ? void 0 : loading.delay) || true;
+  var loadingOrDelay = typeof loading2 === "boolean" ? loading2 : (loading2 === null || loading2 === void 0 ? void 0 : loading2.delay) || true;
   React.useEffect(function() {
     var delayTimer = null;
     if (typeof loadingOrDelay === "number") {
@@ -74962,7 +74962,7 @@ var __rest$j = function(s3, e3) {
 };
 var DropdownButton = function DropdownButton2(props2) {
   var _React$useContext = React.useContext(ConfigContext), getContextPopupContainer = _React$useContext.getPopupContainer, getPrefixCls = _React$useContext.getPrefixCls, direction = _React$useContext.direction;
-  var customizePrefixCls = props2.prefixCls, _props$type = props2.type, type5 = _props$type === void 0 ? "default" : _props$type, danger = props2.danger, disabled = props2.disabled, loading = props2.loading, onClick = props2.onClick, htmlType = props2.htmlType, children = props2.children, className = props2.className, menu = props2.menu, arrow2 = props2.arrow, autoFocus = props2.autoFocus, overlay = props2.overlay, trigger2 = props2.trigger, align = props2.align, visible2 = props2.visible, open = props2.open, onVisibleChange = props2.onVisibleChange, onOpenChange = props2.onOpenChange, placement = props2.placement, getPopupContainer = props2.getPopupContainer, href2 = props2.href, _props$icon = props2.icon, icon = _props$icon === void 0 ? /* @__PURE__ */ React.createElement(RefIcon$b, null) : _props$icon, title = props2.title, _props$buttonsRender = props2.buttonsRender, buttonsRender = _props$buttonsRender === void 0 ? function(buttons) {
+  var customizePrefixCls = props2.prefixCls, _props$type = props2.type, type5 = _props$type === void 0 ? "default" : _props$type, danger = props2.danger, disabled = props2.disabled, loading2 = props2.loading, onClick = props2.onClick, htmlType = props2.htmlType, children = props2.children, className = props2.className, menu = props2.menu, arrow2 = props2.arrow, autoFocus = props2.autoFocus, overlay = props2.overlay, trigger2 = props2.trigger, align = props2.align, visible2 = props2.visible, open = props2.open, onVisibleChange = props2.onVisibleChange, onOpenChange = props2.onOpenChange, placement = props2.placement, getPopupContainer = props2.getPopupContainer, href2 = props2.href, _props$icon = props2.icon, icon = _props$icon === void 0 ? /* @__PURE__ */ React.createElement(RefIcon$b, null) : _props$icon, title = props2.title, _props$buttonsRender = props2.buttonsRender, buttonsRender = _props$buttonsRender === void 0 ? function(buttons) {
     return buttons;
   } : _props$buttonsRender, mouseEnterDelay = props2.mouseEnterDelay, mouseLeaveDelay = props2.mouseLeaveDelay, overlayClassName = props2.overlayClassName, overlayStyle = props2.overlayStyle, destroyPopupOnHide = props2.destroyPopupOnHide, restProps = __rest$j(props2, ["prefixCls", "type", "danger", "disabled", "loading", "onClick", "htmlType", "children", "className", "menu", "arrow", "autoFocus", "overlay", "trigger", "align", "visible", "open", "onVisibleChange", "onOpenChange", "placement", "getPopupContainer", "href", "icon", "title", "buttonsRender", "mouseEnterDelay", "mouseLeaveDelay", "overlayClassName", "overlayStyle", "destroyPopupOnHide"]);
   var prefixCls = getPrefixCls("dropdown-button", customizePrefixCls);
@@ -75000,7 +75000,7 @@ var DropdownButton = function DropdownButton2(props2) {
     type: type5,
     danger,
     disabled,
-    loading,
+    loading: loading2,
     onClick,
     htmlType,
     href: href2,
@@ -83058,10 +83058,10 @@ function getParagraphBasicProps(hasAvatar, hasTitle) {
   return basicProps;
 }
 var Skeleton$1 = function Skeleton(props2) {
-  var customizePrefixCls = props2.prefixCls, loading = props2.loading, className = props2.className, style2 = props2.style, children = props2.children, _props$avatar = props2.avatar, avatar = _props$avatar === void 0 ? false : _props$avatar, _props$title = props2.title, title = _props$title === void 0 ? true : _props$title, _props$paragraph = props2.paragraph, paragraph = _props$paragraph === void 0 ? true : _props$paragraph, active = props2.active, round2 = props2.round;
+  var customizePrefixCls = props2.prefixCls, loading2 = props2.loading, className = props2.className, style2 = props2.style, children = props2.children, _props$avatar = props2.avatar, avatar = _props$avatar === void 0 ? false : _props$avatar, _props$title = props2.title, title = _props$title === void 0 ? true : _props$title, _props$paragraph = props2.paragraph, paragraph = _props$paragraph === void 0 ? true : _props$paragraph, active = props2.active, round2 = props2.round;
   var _React$useContext = React.useContext(ConfigContext), getPrefixCls = _React$useContext.getPrefixCls, direction = _React$useContext.direction;
   var prefixCls = getPrefixCls("skeleton", customizePrefixCls);
-  if (loading || !("loading" in props2)) {
+  if (loading2 || !("loading" in props2)) {
     var hasAvatar = !!avatar;
     var hasTitle = !!title;
     var hasParagraph = !!paragraph;
@@ -86059,7 +86059,7 @@ var __rest$6 = function(s3, e3) {
   return t3;
 };
 var Search$1 = /* @__PURE__ */ React.forwardRef(function(props2, ref2) {
-  var customizePrefixCls = props2.prefixCls, customizeInputPrefixCls = props2.inputPrefixCls, className = props2.className, customizeSize = props2.size, suffix = props2.suffix, _props$enterButton = props2.enterButton, enterButton = _props$enterButton === void 0 ? false : _props$enterButton, addonAfter = props2.addonAfter, loading = props2.loading, disabled = props2.disabled, customOnSearch = props2.onSearch, customOnChange = props2.onChange, onCompositionStart = props2.onCompositionStart, onCompositionEnd = props2.onCompositionEnd, restProps = __rest$6(props2, ["prefixCls", "inputPrefixCls", "className", "size", "suffix", "enterButton", "addonAfter", "loading", "disabled", "onSearch", "onChange", "onCompositionStart", "onCompositionEnd"]);
+  var customizePrefixCls = props2.prefixCls, customizeInputPrefixCls = props2.inputPrefixCls, className = props2.className, customizeSize = props2.size, suffix = props2.suffix, _props$enterButton = props2.enterButton, enterButton = _props$enterButton === void 0 ? false : _props$enterButton, addonAfter = props2.addonAfter, loading2 = props2.loading, disabled = props2.disabled, customOnSearch = props2.onSearch, customOnChange = props2.onChange, onCompositionStart = props2.onCompositionStart, onCompositionEnd = props2.onCompositionEnd, restProps = __rest$6(props2, ["prefixCls", "inputPrefixCls", "className", "size", "suffix", "enterButton", "addonAfter", "loading", "disabled", "onSearch", "onChange", "onCompositionStart", "onCompositionEnd"]);
   var _React$useContext = React.useContext(ConfigContext), getPrefixCls = _React$useContext.getPrefixCls, direction = _React$useContext.direction;
   var contextSize = React.useContext(SizeContext$1);
   var composedRef = React.useRef(false);
@@ -86089,7 +86089,7 @@ var Search$1 = /* @__PURE__ */ React.forwardRef(function(props2, ref2) {
     }
   };
   var onPressEnter = function onPressEnter2(e3) {
-    if (composedRef.current || loading) {
+    if (composedRef.current || loading2) {
       return;
     }
     onSearch(e3);
@@ -86121,7 +86121,7 @@ var Search$1 = /* @__PURE__ */ React.forwardRef(function(props2, ref2) {
       key: "enterButton",
       onMouseDown,
       onClick: onSearch,
-      loading,
+      loading: loading2,
       icon: searchIcon
     }, enterButton);
   }
@@ -87720,7 +87720,7 @@ function isThenable(thing) {
 var ActionButton = function ActionButton2(props2) {
   var clickedRef = React.useRef(false);
   var ref2 = React.useRef(null);
-  var _useState = useSafeState(false), _useState2 = _slicedToArray(_useState, 2), loading = _useState2[0], setLoading = _useState2[1];
+  var _useState = useSafeState(false), _useState2 = _slicedToArray(_useState, 2), loading2 = _useState2[0], setLoading = _useState2[1];
   var close2 = props2.close;
   var onInternalClose = function onInternalClose2() {
     close2 === null || close2 === void 0 ? void 0 : close2.apply(void 0, arguments);
@@ -87787,7 +87787,7 @@ var ActionButton = function ActionButton2(props2) {
   var type5 = props2.type, children = props2.children, prefixCls = props2.prefixCls, buttonProps = props2.buttonProps;
   return /* @__PURE__ */ React.createElement(Button$4, _extends$5({}, convertLegacyProps(type5), {
     onClick,
-    loading,
+    loading: loading2,
     prefixCls
   }, buttonProps, {
     ref: ref2
@@ -110491,6 +110491,10 @@ function rb(e3) {
     return Object.values(i3).length && (yield Yi(n2, o, true), yield qg(i3, t3.useAnimationFrame)), i3;
   });
 }
+const CSS_CLASSES = {
+  SUSPENSE_FALLBACK: "sb-suspense-fallback",
+  ANCHOR_NAME: "sb-anchor-name"
+};
 const PopoverClassName = styleAsClass`
   .ant-popover-inner-content {
     padding: 12px;
@@ -110648,6 +110652,77 @@ const ComponentInfoProvider = ({ sourceId, instanceId, name, children }) => {
 const useComponentInfo = () => {
   return useContext(ComponentInfoContext);
 };
+const ComponentStyleContext = createContext(
+  null
+);
+function ComponentSuspenseStyleProvider({
+  children
+}) {
+  const [style2, setStyle] = useState({});
+  const elementRef = useRef(null);
+  const previousStyle = useRef(null);
+  const getFallbackStyle = useMemo$2(() => {
+    return () => {
+      var _a2, _b2;
+      if (!elementRef.current || !style2) {
+        return style2 || previousStyle.current || {};
+      }
+      const childRef = elementRef.current.children[0];
+      if (!childRef) {
+        return style2;
+      }
+      let cachedRect = null;
+      const lazyRect = () => {
+        if (cachedRect === null) {
+          cachedRect = childRef.getBoundingClientRect();
+        }
+        return cachedRect;
+      };
+      const fallbackStyle = { ...style2 };
+      if (style2.width === "fit-content" || style2.width === "auto" || style2.width === void 0) {
+        fallbackStyle.width = `${lazyRect().width}px`;
+      }
+      if (style2.height === "fit-content" || style2.height === "auto" || style2.height === void 0) {
+        fallbackStyle.height = `${lazyRect().height}px`;
+      }
+      if (fallbackStyle.width === 0 || fallbackStyle.width === "0px") {
+        fallbackStyle.width = (_a2 = previousStyle.current) == null ? void 0 : _a2.width;
+      }
+      if (fallbackStyle.height === 0 || fallbackStyle.height === "0px") {
+        fallbackStyle.height = (_b2 = previousStyle.current) == null ? void 0 : _b2.height;
+      }
+      previousStyle.current = fallbackStyle;
+      return fallbackStyle;
+    };
+  }, [elementRef, style2]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ComponentStyleContext.Provider,
+    {
+      value: {
+        setStyle,
+        getFallbackStyle
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: CSS_CLASSES.SUSPENSE_FALLBACK,
+          style: { display: "contents" },
+          ref: elementRef,
+          children
+        }
+      )
+    }
+  );
+}
+function useComponentSuspenseStyle() {
+  const context2 = useContext(ComponentStyleContext);
+  if (!context2) {
+    throw new Error(
+      "useComponentStyle must be used within a ComponentStyleProvider"
+    );
+  }
+  return context2;
+}
 const entityActions = {
   reset: (entityName, scopeId) => {
     rootStore.entityManager.resetEntity({
@@ -110719,7 +110794,46 @@ const useShallowMobxObserver = (obj) => {
   }, [obj, keys2]);
   return result;
 };
-const INVISIBLE_OPACITY = 0.5;
+const shimmerAnimation = We$1`
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+`;
+const ShimmerDiv = qe$1.div`
+  min-height: 12px;
+  min-width: 12px;
+  background-color: ${(props2) => props2.$backgroundColor};
+  border-radius: ${(props2) => props2.$borderRadius};
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(
+    90deg,
+    ${(props2) => props2.$backgroundColor} 25%,
+    ${(props2) => props2.$shimmerHighlight} 50%,
+    ${(props2) => props2.$backgroundColor} 75%
+  );
+  background-size: 200px 100%;
+  animation: ${shimmerAnimation} 5s infinite linear;
+`;
+function SuspenseFallback({ style: style2 }) {
+  var _a2, _b2;
+  const { theme } = useTheme();
+  const backgroundColor = ((_a2 = theme == null ? void 0 : theme.colors) == null ? void 0 : _a2.neutral50) || "#f8f9fa";
+  const shimmerHighlight = ((_b2 = theme == null ? void 0 : theme.colors) == null ? void 0 : _b2.neutral100) || "#ffffff";
+  const borderRadius2 = (theme == null ? void 0 : theme.borderRadius.value) + (theme == null ? void 0 : theme.borderRadius.mode);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ShimmerDiv,
+    {
+      $backgroundColor: backgroundColor,
+      $shimmerHighlight: shimmerHighlight,
+      $borderRadius: borderRadius2,
+      style: style2 == null ? void 0 : style2()
+    }
+  );
+}
 function removeBindings(props2) {
   return Object.entries(props2).reduce(
     (acc, [key2, value]) => {
@@ -110735,6 +110849,7 @@ function removeBindings(props2) {
     {}
   );
 }
+const INVISIBLE_OPACITY = 0.5;
 const useStyleWithSize = (props2) => {
   const [style2, setStyle] = useState({});
   useStableEffect(
@@ -110818,6 +110933,10 @@ const ReactiveComponent = observer(function Component2({
     }
     return stylePropWithSize;
   }, [reactiveProps.isVisible, stylePropWithSize]);
+  const { setStyle, getFallbackStyle } = useComponentSuspenseStyle();
+  useMemo$2(() => {
+    setStyle(styleProp);
+  }, [styleProp, setStyle]);
   const instanceIdProps = { [WIDGET_INSTANCE_ID_ATTRIBUTE]: instanceId };
   if (currentName.current !== name) {
     currentName.current = name;
@@ -110831,35 +110950,44 @@ const ReactiveComponent = observer(function Component2({
       "data-test": `component-${name}`
     };
   }, [name, identifier2.name]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { header: "Something went wrong rendering this widget.", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    ComponentInfoProvider,
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ErrorBoundary,
     {
-      sourceId,
-      name,
-      instanceId,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActionsProvider, { actions: actions.current, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        DuplicatedNamePopover,
+      header: `Something went wrong rendering this widget [${name}]`,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ComponentInfoProvider,
         {
-          showWarning: !!(isNameDuplicated && showErrors),
           sourceId,
           name,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Component2,
+          instanceId,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActionsProvider, { actions: actions.current, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DuplicatedNamePopover,
             {
+              showWarning: !!(isNameDuplicated && showErrors),
+              sourceId,
               name,
-              ...reactiveProps,
-              ...instanceIdProps,
-              dropTargetRef: widgetProps.dropTargetRef,
-              style: styleProp,
-              ...testProps,
-              children
+              children: reactiveProps.loading === true ? /* @__PURE__ */ jsxRuntimeExports.jsx(SuspenseFallback, { style: getFallbackStyle }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Component2,
+                {
+                  name,
+                  ...reactiveProps,
+                  ...instanceIdProps,
+                  dropTargetRef: widgetProps.dropTargetRef,
+                  style: styleProp,
+                  ...testProps,
+                  children
+                }
+              )
             }
-          )
+          ) })
         }
-      ) })
+      )
     }
-  ) });
+  );
 });
+const WrappedReactiveComponent = (props2) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentSuspenseStyleProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ReactiveComponent, { ...props2 }) });
+};
 const CustomComponentContext = createContext({
   isInCustomComponent: false,
   instanceId: "",
@@ -117500,7 +117628,7 @@ const EditWrapper = observer(function EditWrapper2(props2) {
       style: createAnchorNameStyle({
         instanceId: props2.identifier.instanceId
       }),
-      className: "sb-anchor-name",
+      className: CSS_CLASSES.ANCHOR_NAME,
       "data-can-drag": !isRoot,
       "data-can-drop": props2.isDroppable,
       "data-selected": isSelected,
@@ -117534,7 +117662,7 @@ const EditWrapper = observer(function EditWrapper2(props2) {
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ReactiveComponent,
+          WrappedReactiveComponent,
           {
             Component: props2.component,
             identifier: identifier2,
@@ -117886,7 +118014,7 @@ const registerSbComponent = (type5, config2, Component3) => {
     }
     if (props2.isVisible === false) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ReactiveComponent,
+      WrappedReactiveComponent,
       {
         Component: Component3,
         identifier: identifier2.current,
@@ -118379,6 +118507,28 @@ const borderRadius = (propertiesPanelConfig = {}) => {
     ...propertiesPanelConfig
   });
 };
+const loading = () => Prop.boolean().default(false).readAndWrite().propertiesPanel({
+  label: "Loading",
+  controlType: "RADIO_BUTTON_GROUP",
+  helpText: "Whether the component is loading, switch to code mode to set the loading state based whatever you want",
+  options: [
+    {
+      label: "Off",
+      value: false
+    },
+    {
+      label: "On",
+      value: true
+    },
+    {
+      label: "Auto",
+      disabled: true,
+      tooltip: "Coming soon! Loading state is based on if referenced data is loading",
+      showTooltip: true,
+      value: void 0
+    }
+  ]
+});
 function getDefaultBorderRadius() {
   let borderRadius2;
   switch (this.variant) {
@@ -118488,9 +118638,7 @@ const propertiesDefinition$h = {
         }
       ]
     }),
-    loadingAnimation: Prop.boolean().readAndWrite().default(true).propertiesPanel({
-      label: "Loading animation"
-    })
+    loading: loading()
   }),
   interaction: Section.category(PropsPanelCategory.Interaction).children({
     isDisabled: Prop.boolean().readAndWrite().default(false).propertiesPanel({
@@ -118672,7 +118820,8 @@ Section.category(PropsPanelCategory.Appearance).children({
     helpText: "Changes the color of the background"
   }),
   border: border(),
-  borderRadius: borderRadius()
+  borderRadius: borderRadius(),
+  loading: loading()
 });
 ({
   layout: Section.category(PropsPanelCategory.Layout).add({
@@ -119019,7 +119168,8 @@ const propertiesDefinition$g = {
       isRemovable: true,
       defaultOnAdd: () => Theme.colors.appBackground ?? "#ffffff"
     }).default(void 0).validate(VALIDATORS.TEXT_ALLOW_UNDEFINED),
-    border: border()
+    border: border(),
+    loading: loading()
   })
 };
 const SbSection = registerSbComponent(
@@ -119429,7 +119579,8 @@ const propertiesDefinition$f = {
     }),
     borderRadius: borderRadius().default(function() {
       return this.variant === "card" ? createBorderRadiusObject(Theme.defaultBorder.borderRadius) : void 0;
-    })
+    }),
+    loading: loading()
   })
 };
 const EMPTY_CONTAINER_MIN_HEIGHT = 72;
@@ -119566,7 +119717,8 @@ const propertiesDefinition$e = {
       isRemovable: true,
       defaultOnAdd: () => Theme.colors.appBackground ?? "#ffffff"
     }),
-    border: border()
+    border: border(),
+    loading: loading()
   })
 };
 const CONTAINER_MIN_WIDTH = Dim.px(0);
@@ -126676,7 +126828,6 @@ const getInputValidationErrors = (props2) => {
 };
 const getErrorMessages = (errors2) => Object.values(errors2).filter(Boolean);
 const hasErrors = (errors2) => getErrorMessages(errors2).length > 0;
-const ANIMATE_LOADING_PROPERTY_CONTROL_HELP_TEXT = "Display a loading animation if dependent data is loading";
 const errorMessagePlacement = Prop.string().readAndWrite().default("tooltip").propertiesPanel({
   label: "Error display",
   controlType: "RADIO_BUTTON_GROUP",
@@ -127028,11 +127179,7 @@ const propertiesDefinition$d = {
       variants: [{ inputType: Prop.literal(InputTypes.TEXT) }]
     })
   ).add({
-    loadingAnimation: Prop.boolean().default(true).propertiesPanel({
-      helpText: ANIMATE_LOADING_PROPERTY_CONTROL_HELP_TEXT,
-      label: "Loading animation",
-      controlType: "SWITCH"
-    })
+    loading: loading()
   }),
   layout: Section.category(PropsPanelCategory.Layout).add(padding({ themeValue: INPUT_PADDING, default: INPUT_PADDING })).add({
     ...size$2(),
@@ -127301,6 +127448,9 @@ const propertiesDefinition$c = {
       hasMaxHeight: false
     })
   ),
+  appearance: Section.category(PropsPanelCategory.Appearance).children({
+    loading: loading()
+  }),
   events: Section.category(PropsPanelCategory.EventHandlers).children({
     onLoad: Prop.event().propertiesPanel({
       label: "onPageLoad"
@@ -133688,8 +133838,8 @@ function requireLoadingIcon() {
       };
     };
     var LoadingIcon3 = function LoadingIcon4(_ref2) {
-      var prefixCls = _ref2.prefixCls, loading = _ref2.loading, existIcon = _ref2.existIcon;
-      var visible2 = !!loading;
+      var prefixCls = _ref2.prefixCls, loading2 = _ref2.loading, existIcon = _ref2.existIcon;
+      var visible2 = !!loading2;
       if (existIcon) {
         return /* @__PURE__ */ _react["default"].createElement("span", {
           className: "".concat(prefixCls, "-loading-icon")
@@ -133819,12 +133969,12 @@ function requireButton$1() {
     }
     var InternalButton3 = function InternalButton22(props2, ref2) {
       var _classNames;
-      var _props$loading = props2.loading, loading = _props$loading === void 0 ? false : _props$loading, customizePrefixCls = props2.prefixCls, _props$type = props2.type, type5 = _props$type === void 0 ? "default" : _props$type, danger = props2.danger, _props$shape = props2.shape, shape = _props$shape === void 0 ? "default" : _props$shape, customizeSize = props2.size, customDisabled = props2.disabled, className = props2.className, children = props2.children, icon = props2.icon, _props$ghost = props2.ghost, ghost = _props$ghost === void 0 ? false : _props$ghost, _props$block = props2.block, block = _props$block === void 0 ? false : _props$block, _props$htmlType = props2.htmlType, htmlType = _props$htmlType === void 0 ? "button" : _props$htmlType, rest = __rest2(props2, ["loading", "prefixCls", "type", "danger", "shape", "size", "disabled", "className", "children", "icon", "ghost", "block", "htmlType"]);
+      var _props$loading = props2.loading, loading2 = _props$loading === void 0 ? false : _props$loading, customizePrefixCls = props2.prefixCls, _props$type = props2.type, type5 = _props$type === void 0 ? "default" : _props$type, danger = props2.danger, _props$shape = props2.shape, shape = _props$shape === void 0 ? "default" : _props$shape, customizeSize = props2.size, customDisabled = props2.disabled, className = props2.className, children = props2.children, icon = props2.icon, _props$ghost = props2.ghost, ghost = _props$ghost === void 0 ? false : _props$ghost, _props$block = props2.block, block = _props$block === void 0 ? false : _props$block, _props$htmlType = props2.htmlType, htmlType = _props$htmlType === void 0 ? "button" : _props$htmlType, rest = __rest2(props2, ["loading", "prefixCls", "type", "danger", "shape", "size", "disabled", "className", "children", "icon", "ghost", "block", "htmlType"]);
       var size2 = React2.useContext(_SizeContext["default"]);
       var disabled = React2.useContext(_DisabledContext["default"]);
       var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
       var groupSize = React2.useContext(_buttonGroup.GroupSizeContext);
-      var _React$useState = React2.useState(!!loading), _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2), innerLoading = _React$useState2[0], setLoading = _React$useState2[1];
+      var _React$useState = React2.useState(!!loading2), _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2), innerLoading = _React$useState2[0], setLoading = _React$useState2[1];
       var _React$useState3 = React2.useState(false), _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2), hasTwoCNChar = _React$useState4[0], setHasTwoCNChar = _React$useState4[1];
       var _React$useContext = React2.useContext(_configProvider.ConfigContext), getPrefixCls = _React$useContext.getPrefixCls, autoInsertSpaceInButton = _React$useContext.autoInsertSpaceInButton, direction = _React$useContext.direction;
       var buttonRef = ref2 || /* @__PURE__ */ React2.createRef();
@@ -133844,7 +133994,7 @@ function requireButton$1() {
           setHasTwoCNChar(false);
         }
       };
-      var loadingOrDelay = typeof loading === "boolean" ? loading : (loading === null || loading === void 0 ? void 0 : loading.delay) || true;
+      var loadingOrDelay = typeof loading2 === "boolean" ? loading2 : (loading2 === null || loading2 === void 0 ? void 0 : loading2.delay) || true;
       React2.useEffect(function() {
         var delayTimer = null;
         if (typeof loadingOrDelay === "number") {
@@ -134030,11 +134180,7 @@ const propertiesDefinition$b = {
       helpText: "If enabled, the text will wrap",
       controlType: "SWITCH"
     }).default(true),
-    animateLoading: Prop.boolean().readAndWrite().propertiesPanel({
-      helpText: ANIMATE_LOADING_PROPERTY_CONTROL_HELP_TEXT,
-      label: "Loading animation",
-      controlType: "SWITCH"
-    }),
+    loading: loading(),
     shouldScroll: Prop.boolean().readAndWrite().propertiesPanel({
       helpText: "Whether the user can scroll vertically or horizontally to acess any overflow content. If disabled, content will clip",
       label: "Scroll overflow",
@@ -134577,7 +134723,8 @@ const propertiesDefinition$a = {
           value: "FULLSCREEN"
         }
       ]
-    })
+    }),
+    loading: loading()
   }),
   interaction: Section.category(PropsPanelCategory.Interaction).children({
     closeOnClickOutside: Prop.boolean().readAndWrite().default(true).propertiesPanel({
@@ -144556,14 +144703,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-BNlRJuEf.js"
+            "./allPathsLoader-C6jGHolR.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BEDIEt1Q.js"
+            "./splitPathsBySizeLoader-DCKSQVMB.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -144967,19 +145114,19 @@ var AnchorButton = React.forwardRef(function(props2, ref2) {
 AnchorButton.displayName = "".concat(DISPLAYNAME_PREFIX, ".AnchorButton");
 function useSharedButtonAttributes(props2, ref2, options) {
   var _a2;
-  var alignText = props2.alignText, fill = props2.fill, large = props2.large, _b2 = props2.loading, loading = _b2 === void 0 ? false : _b2, minimal = props2.minimal, outlined = props2.outlined, _c2 = props2.size, size2 = _c2 === void 0 ? "medium" : _c2, small = props2.small, _d2 = props2.variant, variant = _d2 === void 0 ? "solid" : _d2;
-  var disabled = props2.disabled || loading;
+  var alignText = props2.alignText, fill = props2.fill, large = props2.large, _b2 = props2.loading, loading2 = _b2 === void 0 ? false : _b2, minimal = props2.minimal, outlined = props2.outlined, _c2 = props2.size, size2 = _c2 === void 0 ? "medium" : _c2, small = props2.small, _d2 = props2.variant, variant = _d2 === void 0 ? "solid" : _d2;
+  var disabled = props2.disabled || loading2;
   var _e2 = useInteractiveAttributes(!disabled, props2, ref2, options), active = _e2[0], interactiveProps = _e2[1];
-  var className = classNames(BUTTON, (_a2 = {}, _a2[ACTIVE] = active, _a2[DISABLED] = disabled, _a2[FILL] = fill, _a2[LOADING] = loading, _a2), alignmentClass(alignText), intentClass(props2.intent), sizeClass(size2, { large, small }), variantClass(variant, { minimal, outlined }), props2.className);
+  var className = classNames(BUTTON, (_a2 = {}, _a2[ACTIVE] = active, _a2[DISABLED] = disabled, _a2[FILL] = fill, _a2[LOADING] = loading2, _a2), alignmentClass(alignText), intentClass(props2.intent), sizeClass(size2, { large, small }), variantClass(variant, { minimal, outlined }), props2.className);
   return __assign$2(__assign$2({}, interactiveProps), { className, disabled });
 }
 function renderButtonContents(props2) {
-  var children = props2.children, ellipsizeText = props2.ellipsizeText, endIcon = props2.endIcon, icon = props2.icon, loading = props2.loading, rightIcon = props2.rightIcon, text = props2.text, textClassName = props2.textClassName;
+  var children = props2.children, ellipsizeText = props2.ellipsizeText, endIcon = props2.endIcon, icon = props2.icon, loading2 = props2.loading, rightIcon = props2.rightIcon, text = props2.text, textClassName = props2.textClassName;
   var hasTextContent = !isReactNodeEmpty(text) || !isReactNodeEmpty(children);
   return React.createElement(
     React.Fragment,
     null,
-    loading && React.createElement(Spinner, { className: BUTTON_SPINNER, size: SpinnerSize.SMALL }),
+    loading2 && React.createElement(Spinner, { className: BUTTON_SPINNER, size: SpinnerSize.SMALL }),
     React.createElement(Icon, { icon }),
     hasTextContent && React.createElement(
       Text,
@@ -160871,7 +161018,7 @@ const renderCell = ({
 };
 const TableButton = (props2) => {
   var _a2;
-  const [loading, setLoading] = useState(false);
+  const [loading2, setLoading] = useState(false);
   const onComplete = () => {
     setLoading(false);
   };
@@ -160922,7 +161069,7 @@ const TableButton = (props2) => {
       textProps,
       buttonStyle: props2.buttonVariant,
       disabled: props2.isDisabled,
-      isLoading: loading,
+      isLoading: loading2,
       backgroundColor: props2.backgroundColor ?? defaultBackgroundColor,
       text: props2.buttonLabel,
       border: props2.buttonBorder ?? defaultBorderObject,
@@ -160936,7 +161083,7 @@ const TableButton = (props2) => {
         if (!props2.isSelected) {
           props2.handleRowSelect(props2.rowIndex);
         }
-        if (!loading) {
+        if (!loading2) {
           setLoading(true);
           props2.onClick(onComplete);
         }
@@ -161956,11 +162103,7 @@ const propertiesDefinition$9 = {
         { label: "5", value: 5 }
       ]
     }).default(-1),
-    animateLoading: Prop.boolean().propertiesPanel({
-      label: "Loading animation",
-      helpText: "Animate the loading state",
-      controlType: "SWITCH"
-    }),
+    loading: loading(),
     isVisible: Prop.boolean().propertiesPanel({
       label: "Visible",
       helpText: "Whether the component is visible",
@@ -180821,10 +180964,7 @@ const propertiesDefinition$8 = {
       helpText: "Text to be shown inside of placeholder"
     }),
     textStyle: inputTextStyle(),
-    loadingAnimation: Prop.boolean().propertiesPanel({
-      label: "Loading animation",
-      helpText: "Display a loading animation if dependent data is loading"
-    })
+    loading: loading()
   }),
   layout: Section.category(PropsPanelCategory.Layout).add(padding({ themeValue: DROPDOWN_PADDING, default: DROPDOWN_PADDING })).add({
     ...size$2(),
@@ -181477,10 +181617,7 @@ const propertiesDefinition$7 = {
   }),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
     labelStyle: labelTextStyle(),
-    loadingAnimation: Prop.boolean().propertiesPanel({
-      label: "Loading animation",
-      helpText: "Display a loading animation if dependent data is loading"
-    })
+    loading: loading()
   }),
   layout: basicLayout(),
   interaction: Section.category(PropsPanelCategory.Interaction).children({
@@ -181748,7 +181885,8 @@ const propertiesDefinition$6 = {
       label: "Placeholder",
       helpText: "Text to be shown inside of placeholder"
     }),
-    textStyle: inputTextStyle()
+    textStyle: inputTextStyle(),
+    loading: loading()
   }),
   interaction: Section.category(PropsPanelCategory.Interaction).children({
     isRequired: Prop.boolean().readAndWrite().default(false).propertiesPanel({
@@ -182229,11 +182367,7 @@ const propertiesDefinition$4 = {
       label: "Color",
       helpText: "Changes the color of the icon"
     }),
-    animateLoading: Prop.boolean().readAndWrite().default(true).propertiesPanel({
-      label: "Loading animation",
-      helpText: ANIMATE_LOADING_PROPERTY_CONTROL_HELP_TEXT,
-      controlType: "SWITCH"
-    })
+    loading: loading()
   }),
   events: Section.category(PropsPanelCategory.EventHandlers).children({
     onClick: Prop.event().propertiesPanel({
@@ -182252,7 +182386,7 @@ const SbIcon = registerSbComponent(
   },
   (props2) => {
     const [isLoading, setIsLoading] = useState(false);
-    const { icon, style: style2, color, animateLoading, onClick } = props2;
+    const { icon, style: style2, color, onClick } = props2;
     const { style: passthroughStyle, ...passThroughProps } = usePassthroughProps(props2);
     const inlineStyles = useMemo$2(() => {
       const minWidthStyle = !icon ? {
@@ -182269,13 +182403,14 @@ const SbIcon = registerSbComponent(
     }, [style2, color, onClick, passthroughStyle, icon]);
     const handleClick = useCallback(async () => {
       if (onClick) {
-        if (animateLoading) {
+        try {
           setIsLoading(true);
+          await onClick();
+        } finally {
+          setIsLoading(false);
         }
-        await onClick();
-        setIsLoading(false);
       }
-    }, [onClick, animateLoading]);
+    }, [onClick]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       StyledContainer,
       {
@@ -182472,11 +182607,7 @@ const propertiesDefinition$3 = {
         }
       ]
     }),
-    animateLoading: Prop.boolean().readAndWrite().propertiesPanel({
-      label: "Loading animation",
-      helpText: "Display a loading animation if dependent data is loading",
-      controlType: "SWITCH"
-    })
+    loading: loading()
   }),
   layout: Section.category(PropsPanelCategory.Layout).add(size$2()).add(margin()).add(visible()),
   events: Section.category(PropsPanelCategory.EventHandlers).children({
@@ -185212,13 +185343,16 @@ function applyThemeToIframe(generatedTheme) {
 }
 const originalLog = console.log;
 console.log = (...args) => {
-  const processedArgs = args.map((arg) => {
-    if (arg && typeof arg === "object" && (getBindingIdentifier(arg) || getBindingIdentifier(arg.bind ?? {}))) {
-      return JSON.parse(JSON.stringify(arg));
-    }
-    return arg;
-  });
-  originalLog(...processedArgs);
+  try {
+    const processedArgs = args.map((arg) => {
+      if (arg && typeof arg === "object" && (getBindingIdentifier(arg) || getBindingIdentifier(arg.bind ?? {}))) {
+        return JSON.parse(JSON.stringify(arg));
+      }
+      return arg;
+    });
+    originalLog(...processedArgs);
+  } catch {
+  }
 };
 const SbProvider = function SbProvider2({
   name = "codemode",
@@ -196839,4 +196973,4 @@ export {
   copyToClipboard as y,
   navigateTo as z
 };
-//# sourceMappingURL=index--WgLdVs1.js.map
+//# sourceMappingURL=index-ctuNjk-c.js.map