xmlui 0.9.20 → 0.9.23

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/App/App.js

@@ -77,6 +77,7 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     themeVarDescriptions: {
         "maxWidth‑content‑App": "This theme variable defines the maximum width of the main content. If the main " +
             "content is broader, the engine adds margins to keep the expected maximum size.",
+        "maxWidth-App-vertical": "This theme variable defines the app's full width in vertical layouts.",
         "boxShadow‑header‑App": "This theme variable sets the shadow of the app's header section.",
         "boxShadow‑navPanel‑App": "This theme variable sets the shadow of the app's navigation panel section " +
             "(visible only in vertical layouts).",
@@ -86,6 +87,7 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`width-navPanel-${COMP}`]: "$space-64",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
+        [`maxWidth-${COMP}-vertical`]: "100%",
         [`boxShadow-header-${COMP}`]: "$boxShadow-spread",
         [`boxShadow-navPanel-${COMP}`]: "$boxShadow-spread",
         [`scroll-padding-block-Pages`]: "$space-4",

package/dist/scripts/src/components/App/AppLayoutContext.js

@@ -7,7 +7,6 @@ const appLayoutNames = [
     "vertical",
     "vertical-sticky",
     "vertical-full-header",
-    "vertical-constrained-width",
     "condensed",
     "condensed-sticky",
     "horizontal",

package/dist/scripts/src/components/App/AppNative.js

@@ -36,6 +36,8 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
     const { setActiveThemeTone, setActiveThemeId, themes } = (0, ThemeContext_1.useThemes)();
     const mounted = (0, react_1.useRef)(false);
     const layoutWithDefaultValue = layout || getThemeVar("layout-App") || "condensed-sticky";
+    const isFullVerticalWidth = getThemeVar("maxWidth-App-vertical") === "100%";
+    console.log("isVerticalMaxWidth", isFullVerticalWidth);
     const safeLayout = layoutWithDefaultValue === null || layoutWithDefaultValue === void 0 ? void 0 : layoutWithDefaultValue.trim().replace(/[\u2013\u2014\u2011]/g, "-"); //It replaces all – (–) and — (—) and non-breaking hyphen '‑' symbols with simple dashes (-).
     const { setLoggedInUser, mediaSize } = (0, AppContext_1.useAppContext)();
     const hasRegisteredHeader = header !== undefined;
@@ -138,6 +140,8 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
             logoContentDef,
             registerSubNavPanelSlot,
             subNavPanelSlot,
+            isFullVerticalWidth,
+            scrollWholePage,
         };
     }, [
         hasRegisteredNavPanel,
@@ -153,6 +157,8 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
         logoContentDef,
         registerSubNavPanelSlot,
         subNavPanelSlot,
+        isFullVerticalWidth,
+        scrollWholePage,
     ]);
     (0, react_1.useEffect)(() => {
         if (navPanelVisible) {
@@ -183,10 +189,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
             content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical, App_module_scss_1.default.sticky), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] }));
             break;
         case "vertical-full-header":
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
-            break;
-        case "vertical-constrained-width":
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalConstrained), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.header, style: { paddingInline: 0 }, children: header }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.content, App_module_scss_1.default.verticalConstrained), children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.contentScroller, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.contentAligner, children: (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
             break;
         case "condensed":
         case "condensed-sticky":
@@ -213,7 +216,6 @@ function getAppLayoutOrientation(appLayout) {
         case "vertical":
         case "vertical-sticky":
         case "vertical-full-header":
-        case "vertical-constrained-width":
             return "vertical";
         default:
             return "horizontal";

package/dist/scripts/src/components/AppHeader/AppHeaderNative.js

@@ -40,16 +40,18 @@ function useLogoUrl() {
     const toneLogoUrl = (0, ThemeContext_1.useResourceUrl)(`resource:logo-${activeThemeTone}`) || logoUrlByTone[activeThemeTone];
     return toneLogoUrl || baseLogoUrl;
 }
-const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot, }) => {
+const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, navPanelVisible = true, toggleDrawer, showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot, }) => {
     const { mediaSize } = (0, AppContext_1.useAppContext)();
     const logoUrl = useLogoUrl();
     const subNavPanelSlot = (0, react_1.useRef)(null);
     const safeLogoTitle = mediaSize.sizeIndex < 2 ? null : !titleContent && title ? ((0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { paddingLeft: 0 }, children: title })) : (titleContent);
+    const layoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerSubNavPanelSlot === null || registerSubNavPanelSlot === void 0 ? void 0 : registerSubNavPanelSlot(subNavPanelSlot.current);
     }, []);
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
-                [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
+                [AppHeader_module_scss_1.default.verticalFullHeader]: (layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.layout) === "vertical-full-header",
+                [AppHeader_module_scss_1.default.scrollWholePage]: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.scrollWholePage,
             }), children: [!navPanelVisible && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !navPanelVisible) &&
                         (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { padding: 0, height: "100%" }, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { ref: subNavPanelSlot, className: AppHeader_module_scss_1.default.subNavPanelSlot }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) }));
 };
@@ -59,6 +61,5 @@ function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, c
     const { navPanelVisible, toggleDrawer, layout, hasRegisteredNavPanel, navPanelDef, logoContentDef, registerSubNavPanelSlot, } = appLayoutContext || {};
     // console.log("APP LAYOUT CONTEXT", appLayoutContext);
     const displayLogo = layout !== "vertical" && layout !== "vertical-sticky" && showLogo;
-    const canRestrictContentWidth = layout !== "vertical-full-header";
-    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && navPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && navPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
 }

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/Footer/FooterNative.js

@@ -13,8 +13,7 @@ const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // React Footer component implementation
 exports.Footer = (0, react_1.forwardRef)(function Footer({ children, style, className, }, forwardedRef) {
     const { layout } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
-    const canRestrictContentWidth = layout !== "vertical-full-header";
     return ((0, jsx_runtime_1.jsx)("div", { className: Footer_module_scss_1.default.outerWrapper, ref: forwardedRef, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Footer_module_scss_1.default.wrapper, className, {
-                [Footer_module_scss_1.default.full]: !canRestrictContentWidth,
+                [Footer_module_scss_1.default.verticalFullHeader]: layout === "vertical-full-header",
             }), children: children }) }));
 });

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

@@ -48,6 +48,7 @@ exports.formControlTypes = [
     "switch",
     "slider",
     "colorpicker",
+    "items",
 ];
 exports.formControlTypesMd = [
     {
@@ -106,6 +107,10 @@ exports.formControlTypesMd = [
         value: "colorpicker",
         description: "Renders ColorPicker",
     },
+    {
+        value: "items",
+        description: "Renders Items",
+    },
     {
         value: "custom",
         description: "Custom control specified in children",

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

@@ -32,31 +32,13 @@ const ValidationSummary_1 = require("../ValidationSummary/ValidationSummary");
 const Validations_1 = require("../FormItem/Validations");
 const formActions_2 = require("../Form/formActions");
 const FormContext_1 = require("./FormContext");
-const setByPath = (obj, path, val) => {
-    const keys = path.split(".");
-    for (let i = 0; i < keys.length; i++) {
-        const currentKey = keys[i];
-        const nextKey = keys[i + 1];
-        if (typeof nextKey !== "undefined") {
-            obj[currentKey] = obj[currentKey] ? obj[currentKey] : {};
-        }
-        else {
-            obj[currentKey] = val;
-        }
-        obj = obj[currentKey];
-    }
-};
+const lodash_es_1 = require("lodash-es");
 const getByPath = (obj, path) => {
-    const keys = path.split(".");
-    let ret = obj;
-    for (let i = 0; i < keys.length; i++) {
-        ret = ret === null || ret === void 0 ? void 0 : ret[keys[i]];
-    }
-    return ret;
+    return (0, lodash_es_1.get)(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,17 +52,18 @@ const formReducer = (0, immer_1.default)((state, action) => {
     }
     switch (action.type) {
         case formActions_1.FormActionKind.FIELD_INITIALIZED: {
-            if (!state.interactionFlags[uid].isDirty) {
-                setByPath(state.subject, uid, action.payload.value);
+            if (!state.interactionFlags[uid].isDirty || action.payload.force) {
+                (0, lodash_es_1.set)(state.subject, uid, action.payload.value);
             }
             break;
         }
         case formActions_1.FormActionKind.FIELD_REMOVED: {
             delete state.validationResults[uid];
+            delete state.interactionFlags[uid];
             break;
         }
         case formActions_1.FormActionKind.FIELD_VALUE_CHANGED: {
-            setByPath(state.subject, uid, action.payload.value);
+            (0, lodash_es_1.set)(state.subject, uid, action.payload.value);
             state.interactionFlags[uid].isDirty = true;
             state.interactionFlags[uid].forceShowValidationResult = false;
             break;
@@ -167,10 +150,10 @@ 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:
+            break;
     }
 });
 const initialState = {
@@ -179,6 +162,7 @@ const initialState = {
     generalValidationResults: [],
     interactionFlags: {},
     submitInProgress: false,
+    resetVersion: 0,
 };
 exports.defaultProps = {
     cancelLabel: "Cancel",
@@ -328,7 +312,7 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
             update: updateData,
         });
     }, [doReset, updateData, registerComponentApi]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { style: style, className: Form_module_scss_1.default.wrapper, onSubmit: doSubmit, onReset: doReset, id: id, ref: formRef, children: [(0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }), (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }), buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] }))] }), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { style: style, className: Form_module_scss_1.default.wrapper, onSubmit: doSubmit, onReset: doReset, id: id, ref: formRef, children: [(0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }), (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }), buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] }))] }, formState.resetVersion), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
 });
 Form.displayName = "Form";
 function FormWithContextVar({ node, renderChild, extractValue, style, lookupEventHandler, registerComponentApi, }) {

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
         },
     };
 }
@@ -41,7 +42,7 @@ function fieldChanged(uid, value) {
         type: FormActionKind.FIELD_VALUE_CHANGED,
         payload: {
             uid,
-            value,
+            value
         },
     };
 }

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

@@ -203,7 +203,7 @@ exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     const formItemType = extractValue.asOptionalString(type);
     const isCustomFormItem = formItemType === undefined && !!node.children;
     const inputTemplate = node.children || ((_a = node.props) === null || _a === void 0 ? void 0 : _a.inputTemplate);
-    return ((0, jsx_runtime_1.jsx)(FormItemNative_1.FormItem, Object.assign({ style: layoutCss, layoutContext: layoutContext, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, validations: resolvedValidationPropsAndEvents, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength), inputRenderer: inputTemplate
+    return ((0, jsx_runtime_1.jsx)(FormItemNative_1.FormItem, Object.assign({ style: layoutCss, layoutContext: layoutContext, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, validations: resolvedValidationPropsAndEvents, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength), itemIndex: extractValue("{$itemIndex}"), initialValue: extractValue(node.props.initialValue), inputRenderer: inputTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))
             : undefined }, resolvedRestProps, { children: isCustomFormItem ? ((0, jsx_runtime_1.jsx)(FormItemNative_1.CustomFormItem, { renderChild: renderChild, node: node, bindTo: extractValue.asString(bindTo) })) : (renderChild(node.children, {
             type: formItemType,

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

@@ -36,6 +36,8 @@ const SliderNative_1 = require("../Slider/SliderNative");
 const ColorPickerNative_1 = require("../ColorPicker/ColorPickerNative");
 const HelperText_1 = require("./HelperText");
 const NumberBox2Native_1 = require("../NumberBox/NumberBox2Native");
+const ItemsNative_1 = require("../Items/ItemsNative");
+const constants_1 = require("../../components-core/constants");
 const DEFAULT_LABEL_POSITIONS = {
     checkbox: "end",
 };
@@ -45,25 +47,63 @@ exports.defaultProps = {
     enabled: true,
     customValidationsDebounce: 0,
 };
+const FormItemContext = (0, react_1.createContext)({ parentFormItemId: null });
+function ArrayLikeFormItem({ children, formItemId, registerComponentApi, value = constants_1.EMPTY_ARRAY, updateState, }) {
+    const formContextValue = (0, react_1.useMemo)(() => {
+        return {
+            parentFormItemId: formItemId,
+        };
+    }, [formItemId]);
+    const addItem = (0, misc_1.useEvent)((item) => {
+        updateState({ value: [...value, item] });
+    });
+    const removeItem = (0, misc_1.useEvent)((index) => {
+        updateState({ value: value.filter((item, i) => i !== index) });
+    });
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            addItem: addItem,
+            removeItem: removeItem,
+        });
+    }, [addItem, registerComponentApi, removeItem]);
+    return (0, jsx_runtime_1.jsx)(FormItemContext.Provider, { value: formContextValue, children: children });
+}
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
-    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"]);
+    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, itemIndex, initialValue: initialValueFromProps } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer", "itemIndex", "initialValue"]);
     const defaultId = (0, react_1.useId)();
-    const [formItemId, setFormItemId] = (0, react_1.useState)(bindTo);
+    const { parentFormItemId } = (0, react_1.useContext)(FormItemContext);
+    const formItemId = (0, react_1.useMemo)(() => {
+        const safeBindTo = bindTo || `${defaultId}${formActions_1.UNBOUND_FIELD_SUFFIX}`;
+        if (parentFormItemId) {
+            if (itemIndex !== undefined) {
+                let parentFieldReference = `${parentFormItemId}[${itemIndex}]`;
+                if (bindTo !== undefined && bindTo.trim() === "") {
+                    return parentFieldReference;
+                }
+                else {
+                    return `${parentFieldReference}.${safeBindTo}`;
+                }
+            }
+        }
+        else {
+            return safeBindTo;
+        }
+    }, [bindTo, defaultId, itemIndex, parentFormItemId]);
     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 initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.originalSubject, formItemId));
-    const initialValue = initialValueFromSubject === undefined ? rest.initialValue : initialValueFromSubject;
+    const initialValue = initialValueFromSubject === undefined ? initialValueFromProps : initialValueFromSubject;
     const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, formItemId));
     const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[formItemId]);
     const dispatch = (0, FormContext_1.useFormContextPart)((value) => value.dispatch);
     const formEnabled = (0, FormContext_1.useFormContextPart)((value) => value.enabled);
     const isEnabled = enabled && formEnabled;
     (0, react_1.useEffect)(() => {
-        const newId = bindTo || `${defaultId}${formActions_1.UNBOUND_FIELD_SUFFIX}`;
-        setFormItemId(newId);
-        dispatch((0, formActions_1.fieldInitialized)(newId, initialValue));
-    }, [bindTo, dispatch, initialValue]);
+        if (initialValue !== undefined) {
+            dispatch((0, formActions_1.fieldInitialized)(formItemId, initialValue));
+        }
+    }, [dispatch, formItemId, initialValue]);
     (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(...);
@@ -143,6 +183,10 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             formControl = ((0, jsx_runtime_1.jsx)(ColorPickerNative_1.ColorPicker, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus })));
             break;
         }
+        case "items": {
+            formControl = ((0, jsx_runtime_1.jsx)(ArrayLikeFormItem, { formItemId: formItemId, registerComponentApi: registerComponentApi, updateState: onStateChange, value: value, children: (0, jsx_runtime_1.jsx)(ItemsNative_1.Items, { items: value, renderItem: inputRenderer }) }));
+            break;
+        }
         case "custom": {
             formControl = children;
             break;
@@ -164,6 +208,9 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
                 (validationResult === null || validationResult === void 0 ? void 0 : validationResult.validations.map((singleValidation, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [singleValidation.isValid && !!singleValidation.validMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.validMessage, status: "valid", style: { opacity: singleValidation.stale ? 0.5 : undefined } })), !singleValidation.isValid && !!singleValidation.invalidMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.invalidMessage, status: singleValidation.severity, style: { opacity: singleValidation.stale ? 0.5 : undefined } }))] }, i)))) }), children: formControl }));
 });
 function CustomFormItem({ renderChild, node, bindTo, }) {
+    // IMPORTANT NOTE:
+    //  why we use useFormContextPart, and not useFormContext?
+    //  because we want to avoid re-rendering the whole form when the form state changes.
     const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, bindTo));
     const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[bindTo]);
     const dispatch = (0, FormContext_1.useFormContextPart)((value) => value.dispatch);

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

@@ -14,7 +14,7 @@ const numberRegex = /^[0-9]+$/;
 exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel({ id, labelPosition = "top", style, label, labelBreak = true, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, isInputTemplateUsed = false, }, ref) {
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
-    if (label === undefined) {
+    if (label === undefined && !validationResult) {
         return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { style: style, id: inputId, ref: ref, children: children }));
         // return cloneElement(children as ReactElement, {
         //   ...mergeProps((children as ReactElement).props, {

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)));