xmlui 0.9.20 → 0.9.21

package/dist/{lint-Cd70ckJ6.mjs → lint-EcgF-9Wr.mjs}

@@ -105,28 +105,6 @@ const iconPositionMd = [
     description: "The icon will appear at the end (right side when the left-to-right direction is set)"
   }
 ];
-const statusColorMd = [
-  { value: "primary", description: "Primary theme color, no default icon" },
-  { value: "secondary", description: "Secondary theme color, no default icon" },
-  { value: "success", description: 'Success theme color, "success" icon' },
-  { value: "danger", description: 'Warning theme color, "warning" icon' },
-  { value: "warning", description: 'Danger theme color, "danger" icon' },
-  { value: "info", description: 'Info theme color, "info" icon' },
-  { value: "light", description: "Light theme color, no default icon" },
-  { value: "dark", description: "Dark theme color, no default icon" }
-];
-const placementMd = [
-  {
-    value: "start",
-    description: "The left side of the window (left-to-right) or the right side of the window (right-to-left)"
-  },
-  {
-    value: "end",
-    description: "The right side of the window (left-to-right) or the left side of the window (right-to-left)"
-  },
-  { value: "top", description: "The top of the window" },
-  { value: "bottom", description: "The bottom of the window" }
-];
 const labelPositionMd = [
   {
     value: "start",
@@ -6265,30 +6243,28 @@ export {
   buttonVariantNames as a4,
   nodeToComponentDef as a5,
   triggerPositionNames as a6,
-  statusColorMd as a7,
-  placementMd as a8,
-  httpMethodNames as a9,
-  PARSED_MARK_PROP as aa,
-  layoutOptionKeys as ab,
-  viewportSizeNames as ac,
-  componentFileExtension as ad,
-  codeBehindFileExtension as ae,
-  getLintSeverity as af,
-  LintSeverity as ag,
-  lintApp as ah,
-  printComponentLints as ai,
-  lintErrorsComponent as aj,
-  collectCodeBehindFromSource as ak,
-  removeCodeBehindTokensFromTree as al,
-  COMPOUND_COMP_ID as am,
-  moduleFileExtension as an,
-  LintDiagKind as ao,
-  lint as ap,
-  ParserError2 as aq,
-  errorMessages as ar,
-  UCRegex as as,
-  onPrefixRegex as at,
-  CORE_NAMESPACE_VALUE as au,
+  httpMethodNames as a7,
+  PARSED_MARK_PROP as a8,
+  layoutOptionKeys as a9,
+  viewportSizeNames as aa,
+  componentFileExtension as ab,
+  codeBehindFileExtension as ac,
+  getLintSeverity as ad,
+  LintSeverity as ae,
+  lintApp as af,
+  printComponentLints as ag,
+  lintErrorsComponent as ah,
+  collectCodeBehindFromSource as ai,
+  removeCodeBehindTokensFromTree as aj,
+  COMPOUND_COMP_ID as ak,
+  moduleFileExtension as al,
+  LintDiagKind as am,
+  lint as an,
+  ParserError2 as ao,
+  errorMessages as ap,
+  UCRegex as aq,
+  onPrefixRegex as ar,
+  CORE_NAMESPACE_VALUE as as,
   alignmentOptionMd as b,
   buttonTypesMd as c,
   buttonThemeMd as d,

package/dist/scripts/src/components/ComponentProvider.js

@@ -81,13 +81,10 @@ const Bookmark_1 = require("./Bookmark/Bookmark");
 const AppState_1 = require("./AppState/AppState");
 const TableOfContents_1 = require("./TableOfContents/TableOfContents");
 const Accordion_1 = require("./Accordion/Accordion");
-const Alert_1 = require("./Alert/Alert");
-const OffCanvas_1 = require("./OffCanvas/OffCanvas");
 const XmluiCodeHighlighter_1 = require("../components-core/XmluiCodeHighlighter");
 const TabItem_1 = require("./Tabs/TabItem");
 const AccordionItem_1 = require("./Accordion/AccordionItem");
 const Slider_1 = require("./Slider/Slider");
-const ButtonGroup_1 = require("./ButtonGroup/ButtonGroup");
 const Carousel_1 = require("./Carousel/Carousel");
 const CarouselItem_1 = require("./Carousel/CarouselItem");
 const renderers_1 = require("../components-core/renderers");
@@ -100,7 +97,6 @@ const Backdrop_1 = require("./Backdrop/Backdrop");
 const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 const ColorPicker_1 = require("./ColorPicker/ColorPicker");
 const RadioItem_1 = require("./RadioGroup/RadioItem");
-const SubNavPanel_1 = require("./SubNavPanel/SubNavPanel");
 const InspectButton_1 = require("./InspectButton/InspectButton");
 /**
  * The framework has a specialized component concept, the "property holder
@@ -275,9 +271,6 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_NavPanel !== "false") {
             this.registerCoreComponent(NavPanel_1.navPanelRenderer);
         }
-        if (process.env.VITE_USED_COMPONENTS_SubNavPanel !== "false") {
-            this.registerCoreComponent(SubNavPanel_1.subNavPanelRenderer);
-        }
         if (process.env.VITE_USED_COMPONENTS_Pages !== "false") {
             this.registerCoreComponent(Pages_1.pagesRenderer);
             this.registerCoreComponent(Pages_1.pageRenderer);
@@ -390,10 +383,7 @@ class ComponentRegistry {
         // --- New Bootstrap-inspired components
         this.registerCoreComponent(Carousel_1.carouselComponentRenderer);
         this.registerCoreComponent(Accordion_1.accordionComponentRenderer);
-        this.registerCoreComponent(Alert_1.alertComponentRenderer);
-        this.registerCoreComponent(OffCanvas_1.offCanvasComponentRenderer);
         this.registerCoreComponent(Slider_1.sliderComponentRenderer);
-        this.registerCoreComponent(ButtonGroup_1.buttonGroupComponentRenderer);
         this.registerCoreComponent(Backdrop_1.backdropComponentRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlATagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlAbbrTagRenderer);

package/dist/scripts/src/components/DropdownMenu/DropdownMenu.js

@@ -99,6 +99,7 @@ exports.MenuItemMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: DropdownMenuNative_1.defaultMenuItemProps.active,
         },
+        enabled: (0, metadata_helpers_1.dEnabled)(),
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(MICOMP),
@@ -107,6 +108,7 @@ exports.MenuItemMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`backgroundColor-${MICOMP}`]: "$backgroundColor-dropdown-item",
         [`color-${MICOMP}`]: "$textColor-primary",
+        [`color-${MICOMP}--disabled`]: "$textColor--disabled",
         [`fontFamily-${MICOMP}`]: "$fontFamily",
         [`fontSize-${MICOMP}`]: "$fontSize-small",
         [`paddingVertical-${MICOMP}`]: "$space-2",
@@ -131,7 +133,7 @@ exports.menuItemRenderer = (0, renderers_1.createComponentRenderer)(MICOMP, expo
             navigateAction === null || navigateAction === void 0 ? void 0 : navigateAction({ pathname: to });
         };
     }
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { onClick: clickHandler, label: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.label), style: layoutCss, iconPosition: extractValue(node.props.iconPosition), icon: ((_b = node.props) === null || _b === void 0 ? void 0 : _b.icon) && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue(node.props.icon) }), active: extractValue.asOptionalBoolean(node.props.active, false), children: renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { onClick: clickHandler, label: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.label), style: layoutCss, iconPosition: extractValue(node.props.iconPosition), icon: ((_b = node.props) === null || _b === void 0 ? void 0 : _b.icon) && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue(node.props.icon) }), active: extractValue.asOptionalBoolean(node.props.active, false), enabled: extractValue.asOptionalBoolean(node.props.enabled, true), children: renderChild(node.children) }));
 });
 const SMCOMP = "SubMenuItem";
 exports.SubMenuItemMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/DropdownMenu/DropdownMenuNative.js

@@ -87,13 +87,21 @@ exports.defaultMenuItemProps = {
     iconPosition: "start",
     active: false,
 };
-exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = exports.defaultMenuItemProps.iconPosition, active = exports.defaultMenuItemProps.active, }, ref) {
+exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = exports.defaultMenuItemProps.iconPosition, active = exports.defaultMenuItemProps.active, enabled = true, }, ref) {
     const iconToStart = iconPosition === "start";
     return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Item, { style: style, className: (0, classnames_1.default)(DropdownMenu_module_scss_1.default.DropdownMenuItem, {
             [DropdownMenu_module_scss_1.default.active]: active,
+            [DropdownMenu_module_scss_1.default.disabled]: !enabled,
         }), onClick: (event) => {
+            if (!enabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
             event.stopPropagation();
-            onClick(event);
+            if (enabled) {
+                onClick(event);
+            }
         }, ref: ref, children: [iconToStart && icon, (0, jsx_runtime_1.jsx)("div", { className: DropdownMenu_module_scss_1.default.wrapper, children: label !== null && label !== void 0 ? label : children }), !iconToStart && icon] }));
 });
 function SubMenuItem({ children, label, triggerTemplate }) {

package/dist/scripts/src/components/Form/FormContext.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formControlTypesMd = exports.formControlTypes = exports.FormContext = exports.validationModeMd = exports.defaultValidationMode = exports.validationModeValues = exports.validationSeverityMd = exports.validationSeverityValues = void 0;
+exports.useFormContext = useFormContext;
 exports.useFormContextPart = useFormContextPart;
 const use_context_selector_1 = require("use-context-selector");
 exports.validationSeverityValues = ["error", "warning", "valid", "none"];
@@ -27,6 +28,9 @@ exports.validationModeMd = [
     }
 ];
 exports.FormContext = (0, use_context_selector_1.createContext)(undefined);
+function useFormContext() {
+    return (0, use_context_selector_1.useContext)(exports.FormContext);
+}
 function useFormContextPart(selector) {
     return (0, use_context_selector_1.useContextSelector)(exports.FormContext, selector);
 }

package/dist/scripts/src/components/Form/FormNative.js

@@ -56,7 +56,7 @@ const getByPath = (obj, path) => {
 };
 exports.getByPath = getByPath;
 const formReducer = (0, immer_1.default)((state, action) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { uid } = action.payload;
     if (uid !== undefined && !state.interactionFlags[uid]) {
         state.interactionFlags[uid] = {
@@ -70,7 +70,7 @@ const formReducer = (0, immer_1.default)((state, action) => {
     }
     switch (action.type) {
         case formActions_1.FormActionKind.FIELD_INITIALIZED: {
-            if (!state.interactionFlags[uid].isDirty) {
+            if (!state.interactionFlags[uid].isDirty || action.payload.force) {
                 setByPath(state.subject, uid, action.payload.value);
             }
             break;
@@ -167,8 +167,7 @@ const formReducer = (0, immer_1.default)((state, action) => {
         }
         case formActions_1.FormActionKind.RESET: {
             const { originalSubject } = action.payload;
-            return Object.assign(Object.assign({}, initialState), { subject: originalSubject });
-            break;
+            return Object.assign(Object.assign({}, initialState), { subject: originalSubject, resetVersion: ((_e = state.resetVersion) !== null && _e !== void 0 ? _e : 0) + 1 });
         }
         default:
     }
@@ -179,6 +178,7 @@ const initialState = {
     generalValidationResults: [],
     interactionFlags: {},
     submitInProgress: false,
+    resetVersion: 0,
 };
 exports.defaultProps = {
     cancelLabel: "Cancel",
@@ -203,6 +203,7 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
             originalSubject: initialValue,
             validationResults: formState.validationResults,
             interactionFlags: formState.interactionFlags,
+            resetVersion: formState.resetVersion,
             dispatch,
             enabled: isEnabled,
         };
@@ -211,6 +212,7 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         formState.interactionFlags,
         formState.subject,
         formState.validationResults,
+        formState.resetVersion,
         initialValue,
         isEnabled,
         itemLabelBreak,

package/dist/scripts/src/components/Form/formActions.js

@@ -27,12 +27,13 @@ var FormActionKind;
     FormActionKind["SUBMITTED"] = "FormActionKind:SUBMITTED";
     FormActionKind["RESET"] = "FormActionKind:RESET";
 })(FormActionKind || (exports.FormActionKind = FormActionKind = {}));
-function fieldInitialized(uid, value) {
+function fieldInitialized(uid, value, force = false) {
     return {
         type: FormActionKind.FIELD_INITIALIZED,
         payload: {
             uid,
             value,
+            force
         },
     };
 }

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -46,12 +46,14 @@ exports.defaultProps = {
     customValidationsDebounce: 0,
 };
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
+    var _b;
     var { style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, validations, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer"]);
     const defaultId = (0, react_1.useId)();
     const [formItemId, setFormItemId] = (0, react_1.useState)(bindTo);
     const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);
     const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value.itemLabelBreak);
     const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || value.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]);
+    const resetVersion = (_b = (0, FormContext_1.useFormContext)()) === null || _b === void 0 ? void 0 : _b.resetVersion;
     const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.originalSubject, formItemId));
     const initialValue = initialValueFromSubject === undefined ? rest.initialValue : initialValueFromSubject;
     const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, formItemId));
@@ -64,6 +66,11 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         setFormItemId(newId);
         dispatch((0, formActions_1.fieldInitialized)(newId, initialValue));
     }, [bindTo, dispatch, initialValue]);
+    (0, react_1.useEffect)(() => {
+        if (resetVersion) {
+            dispatch((0, formActions_1.fieldInitialized)(formItemId, initialValue, true));
+        }
+    }, [resetVersion, formItemId, initialValue, dispatch]);
     (0, Validations_1.useValidation)(validations, onValidate, value, dispatch, formItemId, customValidationsDebounce);
     const onStateChange = (0, react_1.useCallback)(({ value }, options) => {
         //we already handled the initial value in the useEffect with fieldInitialized(...);

package/dist/scripts/src/components/Icon/MoonIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoonIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const moon_svg_react_1 = __importDefault(require("./svg/moon.svg?react"));
+const MoonIcon = (props) => ((0, jsx_runtime_1.jsx)(moon_svg_react_1.default, Object.assign({}, props)));
+exports.MoonIcon = MoonIcon;

package/dist/scripts/src/components/Icon/StarsIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StarsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const stars_svg_react_1 = __importDefault(require("./svg/stars.svg?react"));
+const StarsIcon = (props) => ((0, jsx_runtime_1.jsx)(stars_svg_react_1.default, Object.assign({}, props)));
+exports.StarsIcon = StarsIcon;

package/dist/scripts/src/components/IconProvider.js

@@ -79,6 +79,8 @@ const SortDescendingIcon_1 = require("./Icon/SortDescendingIcon");
 const NoSortIcon_1 = require("./Icon/NoSortIcon");
 const TrendingLevelIcon_1 = require("./Icon/TrendingLevelIcon");
 const Inspect_1 = require("./Icon/Inspect");
+const MoonIcon_1 = require("./Icon/MoonIcon");
+const StarsIcon_1 = require("./Icon/StarsIcon");
 const pool = new Map();
 function registerIconRenderer(name, renderer) {
     if (typeof name === "object") {
@@ -194,7 +196,8 @@ registerIconRenderer("duplicate", (props) => (0, jsx_runtime_1.jsx)(hi_1.HiOutli
 registerIconRenderer("connect", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxLightningBolt, Object.assign({}, props)));
 registerIconRenderer("cog", (props) => (0, jsx_runtime_1.jsx)(hi_1.HiOutlineCog, Object.assign({}, props)));
 registerIconRenderer("sun", (props) => (0, jsx_runtime_1.jsx)(hi2_1.HiSun, Object.assign({}, props)));
-registerIconRenderer("moon", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiMoon, Object.assign({}, props)));
+registerIconRenderer("moon", (props) => (0, jsx_runtime_1.jsx)(MoonIcon_1.MoonIcon, Object.assign({}, props)));
+registerIconRenderer("stars", (props) => (0, jsx_runtime_1.jsx)(StarsIcon_1.StarsIcon, Object.assign({}, props)));
 registerIconRenderer("share", (props) => (0, jsx_runtime_1.jsx)(ShareIcon_1.ShareIcon, Object.assign({}, props)));
 registerIconRenderer("new-window", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, Object.assign({}, props)));
 registerIconRenderer("paint", (props) => (0, jsx_runtime_1.jsx)(hi2_1.HiOutlinePaintBrush, Object.assign({}, props)));

package/dist/scripts/src/components/InspectButton/InspectButton.js

@@ -11,18 +11,20 @@ const ButtonNative_1 = require("../Button/ButtonNative");
 const InspectorContext_1 = require("../../components-core/InspectorContext");
 const InspectButton_module_scss_1 = __importDefault(require("./InspectButton.module.scss"));
 const themeVars_1 = require("../../components-core/theming/themeVars");
+const pi_1 = require("react-icons/pi");
 const COMP = "InspectButton";
 exports.InspectButtonMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
-    description: `The \`${COMP}\` component is a component that allows the user to change the tone of the app.`,
+    description: "This component displays a button that can turn the inspection " +
+        "mode of a running XMLUI app on or off.",
     props: {},
     themeVars: (0, themeVars_1.parseScssVar)(InspectButton_module_scss_1.default.themeVars),
 });
 function InspectButton({ children, style }) {
     const { setInspectMode, inspectMode } = (0, InspectorContext_1.useInspectMode)();
-    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { style: style, themeColor: inspectMode ? "primary" : "secondary", variant: inspectMode ? "solid" : "outlined", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(ButtonNative_1.Button, { style: style, className: InspectButton_module_scss_1.default.inspectButton, themeColor: inspectMode ? "primary" : "secondary", variant: inspectMode ? "solid" : "outlined", onClick: () => {
             setInspectMode((prev) => !prev);
-        }, children: children }));
+        }, children: [(0, jsx_runtime_1.jsx)(pi_1.PiFileCode, { className: InspectButton_module_scss_1.default.icon }), children] }));
 }
 /**
  * Define the renderer for the Button component

package/dist/scripts/src/components/ToneChangerButton/ToneChangerButton.js

@@ -15,7 +15,7 @@ exports.ToneChangerButtonMd = (0, ComponentDefs_1.createMetadata)({
 });
 function ToneChangerButton() {
     const { activeThemeTone, setActiveThemeTone } = (0, ThemeContext_1.useThemes)();
-    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: activeThemeTone === "light" ? "moon" : "sun" }), onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: activeThemeTone === "light" ? "stars" : "sun" }), onClick: () => {
             activeThemeTone === "light" ? setActiveThemeTone("dark") : setActiveThemeTone("light");
         } }));
 }

package/dist/scripts/src/components-core/InspectorContext.js

@@ -15,9 +15,9 @@ const react_dom_1 = require("react-dom");
 const ThemeContext_1 = require("./theming/ThemeContext");
 const classnames_1 = __importDefault(require("classnames"));
 const ButtonNative_1 = require("../components/Button/ButtonNative");
-const IconNative_1 = __importDefault(require("../components/Icon/IconNative"));
 const InspectorButton_module_scss_1 = __importDefault(require("./InspectorButton.module.scss"));
 const ComponentRegistryContext_1 = require("../components/ComponentRegistryContext");
+const pi_1 = require("react-icons/pi");
 // --- The context object that is used to store the inspector information.
 exports.InspectorContext = (0, react_1.createContext)(null);
 function InspectorProvider({ children, sources, projectCompilation, mockApi, }) {
@@ -28,7 +28,6 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
     const [devToolsSize, setDevToolsSize] = (0, react_1.useState)(0);
     const [devToolsSide, setDevToolsSide] = (0, react_1.useState)("bottom");
     const [inspectMode, setInspectMode] = (0, react_1.useState)(false);
-    const [lastInspectedElement, setLastInspectedElement] = (0, react_1.useState)(null);
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const devToolsEntry = componentRegistry.lookupComponentRenderer("XMLUIDevtools.DevTools");
     const contextValue = (0, react_1.useMemo)(() => {
@@ -97,7 +96,7 @@ function InspectButton({ inspectId, node, inspectedNode, setInspectedNode, setSh
             {
                 name: "offset",
                 options: {
-                    offset: [0, -18],
+                    offset: [-4, -18],
                 },
             },
             {
@@ -184,7 +183,7 @@ function InspectButton({ inspectId, node, inspectedNode, setInspectedNode, setSh
             htmlElement.removeEventListener("mouseenter", mouseenter);
             htmlElement.removeEventListener("mouseleave", mouseleave);
         };
-    }, [inspectId, node, inspectMode, setInspectedNode, setShowCode]);
+    }, [inspectId, node, inspectMode, setShowCode]);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: inspectMode
             ? null
             : visible &&
@@ -201,7 +200,7 @@ function InspectButton({ inspectId, node, inspectedNode, setInspectedNode, setSh
                     }, onClick: () => {
                         setInspectedNode(node);
                         setShowCode(true);
-                    }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "inspect", size: "md" }) })), root) }));
+                    }, children: (0, jsx_runtime_1.jsx)(pi_1.PiFileCode, { className: InspectorButton_module_scss_1.default.inspectIcon }) })), root) }));
 }
 function useDevTools() {
     const context = (0, react_1.useContext)(exports.InspectorContext);

package/dist/scripts/src/components-core/rendering/Container.js

@@ -56,14 +56,12 @@ const ScriptingSourceTree_1 = require("../../abstractions/scripting/ScriptingSou
 const containers_1 = require("../abstractions/containers");
 const AppContext_1 = require("../AppContext");
 const buildProxy_1 = require("../rendering/buildProxy");
-const DebugViewProvider_1 = require("../DebugViewProvider");
 const process_statement_async_1 = require("../script-runner/process-statement-async");
 const process_statement_sync_1 = require("../script-runner/process-statement-sync");
 const extractParam_1 = require("../utils/extractParam");
 const hooks_1 = require("../utils/hooks");
 const misc_1 = require("../utils/misc");
 const statementUtils_1 = require("../utils/statementUtils");
-const StateViewerNative_1 = require("../../components/StateViewer/StateViewerNative");
 const renderChild_1 = require("./renderChild");
 const ThemeContext_1 = require("../theming/ThemeContext");
 const LoaderComponent_1 = require("../LoaderComponent");
@@ -521,9 +519,6 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
     const uidInfo = {};
     const thisUidInfoRef = (0, react_1.useRef)({});
     const uidInfoRef = node.uses === undefined ? parentUidInfoRef : thisUidInfoRef;
-    const debugContext = (0, DebugViewProvider_1.useDebugView)();
-    const stateViewProps = debugContext === null || debugContext === void 0 ? void 0 : debugContext.stateViewOptions;
-    const showContainer = stateViewProps && debugContext.displayStateView;
     const renderedChildren = stableRenderChild(node.children, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current, parentRenderContext, uidInfoRef, ref);
     const renderedLoaders = renderLoaders({
         uidInfo,
@@ -545,7 +540,7 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
     const containerContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderedLoaders, !!children && (0, react_1.isValidElement)(renderedChildren)
                 ? (0, react_1.cloneElement)(renderedChildren, null, children)
                 : renderedChildren] }));
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [showContainer && ((0, jsx_runtime_1.jsx)(StateViewerNative_1.StateViewer, { state: componentState, showBoundary: stateViewProps === null || stateViewProps === void 0 ? void 0 : stateViewProps.showBoundary, blink: stateViewProps === null || stateViewProps === void 0 ? void 0 : stateViewProps.blink, children: containerContent })), !showContainer && containerContent] }, node.uid
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: containerContent }, node.uid
         ? `${resolvedKey}>${(0, extractParam_1.extractParam)(componentState, node.uid, appContext, true)}`
         : undefined));
 }));