xmlui 0.7.32 → 0.7.34

package/dist/scripts/bin/language-server.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+"use strict";
+require("ts-node").register({
+    transpileOnly: true,
+    esm: true,
+    compilerOptions: {
+        module: "commonjs",
+        esModuleInterop: true,
+    },
+});
+require("../src/language-server/server");

package/dist/scripts/src/abstractions/ComponentDefs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMetadata = createMetadata;
 exports.d = d;
-function createMetadata({ description, shortDescription, specializedFrom, status, props, events, contextVars, apis, nonVisual, opaque, themeVars, defaultThemeVars, toneSpecificThemeVars, allowArbitraryProps, docFolder, isHtmlTag, }) {
+function createMetadata({ description, shortDescription, specializedFrom, status, props, events, contextVars, apis, nonVisual, opaque, themeVars, themeVarDescriptions, defaultThemeVars, toneSpecificThemeVars, allowArbitraryProps, docFolder, isHtmlTag, }) {
     return {
         description,
         shortDescription,
@@ -16,6 +16,7 @@ function createMetadata({ description, shortDescription, specializedFrom, status
         opaque,
         themeVars,
         defaultThemeVars,
+        themeVarDescriptions,
         toneSpecificThemeVars,
         allowArbitraryProps,
         docFolder,

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

@@ -61,12 +61,12 @@ exports.AccordionMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Accordion_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`padding-horizontal-header-${COMP}`]: "$space-3",
-        [`padding-vertical-header-${COMP}`]: "$space-3",
+        [`paddingHorizontal-header-${COMP}`]: "$space-3",
+        [`paddingVertical-header-${COMP}`]: "$space-3",
         [`align-vertical-header-${COMP}`]: "center",
-        [`font-size-header-${COMP}`]: "$font-size-normal",
-        [`font-weight-header-${COMP}`]: "$font-weight-normal",
-        [`font-family-header-${COMP}`]: "$font-family",
+        [`fontSize-header-${COMP}`]: "$fontSize-normal",
+        [`fontWeight-header-${COMP}`]: "$fontWeight-normal",
+        [`fontFamily-header-${COMP}`]: "$fontFamily",
         [`border-${COMP}`]: "0px solid $color-border",
         [`width-icon-${COMP}`]: "",
         [`height-icon-${COMP}`]: "",

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

@@ -76,8 +76,8 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`width-navPanel-${COMP}`]: "$space-64",
         [`max-content-width-${COMP}`]: "$max-content-width",
-        [`shadow-header-${COMP}`]: "$shadow-spread",
-        [`shadow-pages-${COMP}`]: "$shadow-spread",
+        [`boxShadow-header-${COMP}`]: "$shadow-spread",
+        [`boxShadow-pages-${COMP}`]: "$shadow-spread",
         [`scroll-padding-block-Pages`]: "$space-4",
         light: {
         // --- No light-specific theme vars

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

@@ -97,7 +97,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
             "--footer-height": !scrollWholePage ? 0 : footerHeight + "px",
             "--header-abs-height": headerHeight + "px",
             "--footer-abs-height": footerHeight + "px",
-            "--scrollbar-width": noScrollbarGutters ? 0 : (scrollbarWidth + "px"),
+            "--scrollbar-width": noScrollbarGutters ? 0 : scrollbarWidth + "px",
         };
     }, [footerHeight, headerHeight, noScrollbarGutters, scrollWholePage, scrollbarWidth]);
     const [drawerVisible, setDrawerVisible] = (0, react_1.useState)(false);
@@ -105,7 +105,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
     const toggleDrawer = (0, react_1.useCallback)(() => {
         setDrawerVisible((prev) => !prev);
     }, []);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         var _a;
         (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
             top: 0,

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

@@ -34,10 +34,13 @@ exports.AppHeaderMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(AppHeader_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign(Object.assign({ "height-AppHeader": "$space-14", "max-content-width-AppHeader": "$max-content-width-App", "border-bottom-AppHeader": "1px solid $color-border" }, (0, base_utils_1.paddingSubject)("logo-AppHeader", { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)("AppHeader", { horizontal: "$space-4", vertical: "$space-0" })), { "radius-AppHeader": "0px", light: {
-            "color-bg-AppHeader": "white",
+    themeVarDescriptions: {
+        [`width-logo-${COMP}`]: "Sets the width of the displayed logo",
+    },
+    defaultThemeVars: Object.assign(Object.assign(Object.assign({ [`height-${COMP}`]: "$space-14", [`max-content-width-${COMP}`]: "$max-content-width-App", [`border-bottom-${COMP}`]: "1px solid $color-border" }, (0, base_utils_1.paddingSubject)(`logo-${COMP}`, { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)(COMP, { horizontal: "$space-4", vertical: "$space-0" })), { [`borderRadius-${COMP}`]: "0px", light: {
+            [`color-bg-${COMP}`]: "white",
         }, dark: {
-            "color-bg-AppHeader": "$color-surface-900",
+            [`color-bg-${COMP}`]: "$color-surface-900",
         } }),
 });
 exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppHeaderMd, ({ node, renderChild, layoutCss, layoutContext, extractValue }) => {

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

@@ -50,16 +50,16 @@ exports.AutoCompleteMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(AutoComplete_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`color-bg-menu-${COMP}`]: "$color-bg-primary",
-        [`shadow-menu-${COMP}`]: "$shadow-md",
-        [`radius-menu-${COMP}`]: "$radius",
+        [`boxShadow-menu-${COMP}`]: "$shadow-md",
+        [`borderRadius-menu-${COMP}`]: "$borderRadius",
         [`color-bg-item-${COMP}`]: "$color-bg-dropdown-item",
         [`color-bg-item-${COMP}--hover`]: "$color-bg-dropdown-item--active",
         [`color-bg-item-${COMP}--active`]: "$color-bg-dropdown-item--active",
-        [`min-height-Input`]: "39px",
+        [`minHeight-Input`]: "39px",
         [`color-bg-${COMP}-badge`]: "$color-primary-500",
-        [`font-size-${COMP}-badge`]: "$font-size-small",
-        [`padding-horizontal-${COMP}-badge`]: "$space-1",
-        [`padding-vertical-${COMP}-badge`]: "$space-1",
+        [`fontSize-${COMP}-badge`]: "$fontSize-small",
+        [`paddingHorizontal-${COMP}-badge`]: "$space-1",
+        [`paddingVertical-${COMP}-badge`]: "$space-1",
         light: {
             [`color-bg-${COMP}-badge--hover`]: "$color-primary-400",
             [`color-bg-${COMP}-badge--active`]: "$color-primary-500",

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

@@ -35,10 +35,10 @@ exports.AvatarMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Avatar_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`radius-${COMP}`]: "4px",
-        [`shadow-${COMP}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
+        [`borderRadius-${COMP}`]: "4px",
+        [`boxShadow-${COMP}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
         [`color-text-${COMP}`]: "$color-text-secondary",
-        [`font-weight-${COMP}`]: "$font-weight-bold",
+        [`fontWeight-${COMP}`]: "$fontWeight-bold",
         light: {
             [`border-${COMP}`]: "0px solid $color-surface-400A80",
             [`color-bg-${COMP}`]: "$color-surface-100",

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

@@ -46,9 +46,9 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
         [`padding-${COMP}`]: `$space-0_5 $space-2`,
         [`border-${COMP}`]: `0px solid $color-border`,
         [`padding-${COMP}-pill`]: `$space-0_5 $space-2`,
-        [`radius-${COMP}`]: "4px",
-        [`font-size-${COMP}`]: "0.8em",
-        [`font-size-${COMP}-pill`]: "0.8em",
+        [`borderRadius-${COMP}`]: "4px",
+        [`fontSize-${COMP}`]: "0.8em",
+        [`fontSize-${COMP}-pill`]: "0.8em",
         light: {
             [`color-bg-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
             [`color-text-${COMP}`]: "white",

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

@@ -95,9 +95,9 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`width-${COMP}`]: "fit-content",
         [`height-${COMP}`]: "fit-content",
-        [`radius-${COMP}`]: "$radius",
-        [`font-size-${COMP}`]: "$font-size-small",
-        [`font-weight-${COMP}`]: "$font-weight-medium",
+        [`borderRadius-${COMP}`]: "$borderRadius",
+        [`fontSize-${COMP}`]: "$fontSize-small",
+        [`fontWeight-${COMP}`]: "$fontWeight-medium",
         [`color-bg-${COMP}-primary`]: "$color-primary-500",
         [`color-bg-${COMP}-attention`]: "$color-bg-attention",
         [`color-border-${COMP}-attention`]: "$color-attention",
@@ -105,19 +105,19 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
         [`color-border-${COMP}--disabled`]: "$color-border--disabled",
         [`style-border-${COMP}`]: "solid",
         [`color-text-${COMP}--disabled`]: "$color-text--disabled",
-        [`color-outline-${COMP}--focus`]: "$color-outline--focus",
+        [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
         [`thickness-border-${COMP}`]: "1px",
-        [`thickness-outline-${COMP}--focus`]: "$thickness-outline--focus",
-        [`style-outline-${COMP}--focus`]: "$style-outline--focus",
-        [`offset-outline-${COMP}--focus`]: "$offset-outline--focus",
-        [`padding-horizontal-${COMP}-xs`]: "$space-1",
-        [`padding-vertical-${COMP}-xs`]: "$space-0_5",
-        [`padding-horizontal-${COMP}-sm`]: "$space-4",
-        [`padding-vertical-${COMP}-sm`]: "$space-2",
-        [`padding-horizontal-${COMP}-md`]: "$space-4",
-        [`padding-vertical-${COMP}-md`]: "$space-3",
-        [`padding-horizontal-${COMP}-lg`]: "$space-5",
-        [`padding-vertical-${COMP}-lg`]: "$space-4",
+        [`outlineWidth-${COMP}--focus`]: "$outlineWidth--focus",
+        [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",
+        [`outlineOffset-${COMP}--focus`]: "$outlineOffset--focus",
+        [`paddingHorizontal-${COMP}-xs`]: "$space-1",
+        [`paddingVertical-${COMP}-xs`]: "$space-0_5",
+        [`paddingHorizontal-${COMP}-sm`]: "$space-4",
+        [`paddingVertical-${COMP}-sm`]: "$space-2",
+        [`paddingHorizontal-${COMP}-md`]: "$space-4",
+        [`paddingVertical-${COMP}-md`]: "$space-3",
+        [`paddingHorizontal-${COMP}-lg`]: "$space-5",
+        [`paddingVertical-${COMP}-lg`]: "$space-4",
         light: {
             [`color-text-${COMP}`]: "$color-surface-950",
             [`color-text-${COMP}-solid`]: "$color-surface-50",

package/dist/scripts/src/components/Button/ButtonNative.js

@@ -52,6 +52,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 exports.propDefaults = {
     type: "button",
     iconPosition: "start",
@@ -64,7 +65,7 @@ exports.propDefaults = {
 exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
     var { id, type = exports.propDefaults.type, icon, iconPosition = exports.propDefaults.iconPosition, contentPosition = exports.propDefaults.contentPosition, orientation = exports.propDefaults.orientation, variant = exports.propDefaults.variant, themeColor = exports.propDefaults.themeColor, size = exports.propDefaults.size, disabled, children, formId, onClick, onFocus, onBlur, style, gap, className, autoFocus } = _a, rest = __rest(_a, ["id", "type", "icon", "iconPosition", "contentPosition", "orientation", "variant", "themeColor", "size", "disabled", "children", "formId", "onClick", "onFocus", "onBlur", "style", "gap", "className", "autoFocus"]);
     const innerRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, () => innerRef.current);
+    const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, innerRef) : innerRef;
     (0, react_1.useEffect)(() => {
         if (autoFocus) {
             setTimeout(() => {
@@ -74,7 +75,7 @@ exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
         }
     }, [autoFocus]);
     const iconToLeft = iconPosition === "start";
-    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { id: id, type: type, ref: innerRef, className: (0, classnames_1.default)(className, Button_module_scss_1.default.button, {
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { id: id, type: type, ref: composedRef, className: (0, classnames_1.default)(className, Button_module_scss_1.default.button, {
             [Button_module_scss_1.default.buttonHorizontal]: orientation === "horizontal",
             [Button_module_scss_1.default.buttonVertical]: orientation === "vertical",
             [Button_module_scss_1.default.xs]: size === "xs",

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

@@ -55,8 +55,8 @@ exports.CardMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`padding-${COMP}`]: "$space-4",
         [`border-${COMP}`]: "1px solid $color-border",
-        [`radius-${COMP}`]: "$radius",
-        [`shadow-${COMP}`]: "none",
+        [`borderRadius-${COMP}`]: "$borderRadius",
+        [`boxShadow-${COMP}`]: "none",
         light: {
             [`color-bg-${COMP}`]: "white",
         },

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

@@ -90,6 +90,9 @@ exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
         scrollNext: (0, ComponentDefs_1.d)("This method scrolls the carousel to the next slide."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Carousel_module_scss_1.default.themeVars),
+    themeVarDescriptions: {
+        [`width-indicator-${COMP}`]: "Sets the width of the indicator.",
+    },
     defaultThemeVars: {
         [`color-bg-control-${COMP}`]: "$color-primary",
         [`color-text-control-${COMP}`]: "$color-text",
@@ -109,7 +112,7 @@ exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
         [`height-indicator-${COMP}`]: "6px",
         [`height-control-${COMP}`]: "36px",
         [`width-control-${COMP}`]: "36px",
-        [`radius-control-${COMP}`]: "50%",
+        [`borderRadius-control-${COMP}`]: "50%",
         [`height-${COMP}`]: "100%",
         [`width-${COMP}`]: "100%",
     },

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

@@ -141,7 +141,8 @@ class ComponentRegistry {
         // --- The pool of available loader renderers
         this.loaders = new Map();
         this.extensionRegistered = (extension) => {
-            extension.components.forEach((c) => {
+            var _a;
+            (_a = extension.components) === null || _a === void 0 ? void 0 : _a.forEach((c) => {
                 if ("type" in c) {
                     //we handle just the js components for now
                     this.registerComponentRenderer(c, extension.namespace);
@@ -168,8 +169,12 @@ class ComponentRegistry {
         };
         // --- Registers a renderable component using its renderer function
         // --- and metadata
-        this.registerComponentRenderer = ({ type, renderer, metadata }, ...namespaces) => {
-            const component = { renderer, descriptor: metadata };
+        this.registerComponentRenderer = ({ type, renderer, metadata, isCompoundComponent, }, ...namespaces) => {
+            const component = {
+                renderer,
+                descriptor: metadata,
+                isCompoundComponent,
+            };
             namespaces.forEach((ns) => {
                 this.pool.set((ns ? ns + "." : "") + type, component);
             });

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

@@ -108,8 +108,8 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(DatePicker_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`shadow-menu-${COMP}`]: "$shadow-md",
-        [`radius-menu-${COMP}`]: "$radius",
+        [`boxShadow-menu-${COMP}`]: "$shadow-md",
+        [`borderRadius-menu-${COMP}`]: "$borderRadius",
         [`color-text-value-${COMP}`]: "$color-text-primary",
         light: {
             [`color-bg-menu-${COMP}`]: "$color-surface-50",

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

@@ -63,10 +63,10 @@ exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`color-bg-${DDMCOMP}`]: "$color-bg-primary",
-        [`min-width-${DDMCOMP}`]: "160px",
-        [`shadow-${DDMCOMP}`]: "$shadow-xl",
+        [`minWidth-${DDMCOMP}`]: "160px",
+        [`boxShadow-${DDMCOMP}`]: "$shadow-xl",
         [`style-border-${DDMCOMP}-content`]: "solid",
-        [`radius-${DDMCOMP}`]: "$radius",
+        [`borderRadius-${DDMCOMP}`]: "$borderRadius",
     },
 });
 exports.dropdownMenuComponentRenderer = (0, renderers_1.createComponentRenderer)(DDMCOMP, exports.DropdownMenuMd, ({ node, extractValue, renderChild, registerComponentApi, layoutCss, lookupEventHandler }) => {
@@ -107,10 +107,10 @@ exports.MenuItemMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`color-bg-${MICOMP}`]: "$color-bg-dropdown-item",
         [`color-${MICOMP}`]: "$color-text-primary",
-        [`font-family-${MICOMP}`]: "$font-family",
-        [`font-size-${MICOMP}`]: "$font-size-small",
-        [`padding-vertical-${MICOMP}`]: "$space-2",
-        [`padding-horizontal-${MICOMP}`]: "$space-3",
+        [`fontFamily-${MICOMP}`]: "$fontFamily",
+        [`fontSize-${MICOMP}`]: "$fontSize-small",
+        [`paddingVertical-${MICOMP}`]: "$space-2",
+        [`paddingHorizontal-${MICOMP}`]: "$space-3",
         [`color-bg-${MICOMP}--hover`]: "$color-bg-dropdown-item--hover",
         [`color-${MICOMP}--hover`]: "inherit",
         [`gap-${MICOMP}`]: "$space-2",
@@ -152,12 +152,12 @@ exports.MenuSeparatorMd = (0, ComponentDefs_1.createMetadata)({
     docFolder: DDMCOMP,
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`margin-top-${MSEP}`]: "$space-1",
-        [`margin-bottom-${MSEP}`]: "$space-1",
+        [`marginTop-${MSEP}`]: "$space-1",
+        [`marginBottom-${MSEP}`]: "$space-1",
         [`width-${MSEP}`]: "100%",
         [`height-${MSEP}`]: "1px",
         [`color-${MSEP}`]: "$color-border-dropdown-item",
-        [`margin-horizontal-${MSEP}`]: "12px",
+        [`marginHorizontal-${MSEP}`]: "12px",
     },
 });
 exports.menuSeparatorRenderer = (0, renderers_1.createComponentRenderer)(MSEP, exports.MenuSeparatorMd, () => {

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

@@ -45,8 +45,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultMenuItemProps = exports.DropdownMenu = exports.defaultDropdownMenuProps = void 0;
-exports.MenuItem = MenuItem;
+exports.MenuItem = exports.defaultMenuItemProps = exports.DropdownMenu = exports.defaultDropdownMenuProps = void 0;
 exports.SubMenuItem = SubMenuItem;
 exports.MenuSeparator = MenuSeparator;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -88,15 +87,15 @@ exports.defaultMenuItemProps = {
     iconPosition: "start",
     active: false,
 };
-function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = exports.defaultMenuItemProps.iconPosition, active = exports.defaultMenuItemProps.active, }) {
+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) {
     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,
         }), onClick: (event) => {
             event.stopPropagation();
             onClick(event);
-        }, 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] }));
-}
+        }, 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 }) {
     const { root } = (0, ThemeContext_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Sub, { children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubTrigger, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubTrigger, asChild: true, children: triggerTemplate ? triggerTemplate : (0, jsx_runtime_1.jsx)("div", { children: label }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubContent, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubContent, children: children }) })] }));

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

@@ -17,7 +17,7 @@ exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`color-bg-${COMP}`]: "$color-bg-AppHeader",
         [`align-vertical-${COMP}`]: "center",
-        [`font-size-${COMP}`]: "$font-size-small",
+        [`fontSize-${COMP}`]: "$fontSize-small",
         [`color-text-${COMP}`]: "$color-text-secondary",
         [`max-content-width-${COMP}`]: "$max-content-width",
         [`border-${COMP}`]: `1px solid $color-border`,

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

@@ -165,10 +165,10 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(FormItem_module_scss_1.default.themeVars),
     defaultThemeVars: {
         "color-text-FormItemLabel": "$color-text-primary",
-        "font-size-FormItemLabel": "$font-size-small",
-        "font-weight-FormItemLabel": "$font-weight-medium",
+        "fontSize-FormItemLabel": "$fontSize-small",
+        "fontWeight-FormItemLabel": "$fontWeight-medium",
         "font-style-FormItemLabel": "normal",
-        "transform-text-FormItemLabel": "none",
+        "textTransform-FormItemLabel": "none",
         "color-text-FormItemLabel-requiredMark": "$color-danger-400",
     },
 });

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

@@ -58,10 +58,10 @@ exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`font-family-${COMP}`]: "$font-family",
+        [`fontFamily-${COMP}`]: "$fontFamily",
         [`color-text-${COMP}`]: "inherit",
-        [`font-weight-${COMP}`]: "$font-weight-bold",
-        [`letter-spacing-${COMP} `]: "0",
+        [`fontWeight-${COMP}`]: "$fontWeight-bold",
+        [`letterSpacing-${COMP} `]: "0",
         light: {
         // --- No light-specific theme vars
         },
@@ -81,10 +81,9 @@ exports.H1Md = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        // letter-spacing
-        [`font-size-${H1}`]: "$font-size-large",
-        [`margin-top-${H1}`]: "0",
-        [`margin-bottom-${H1}`]: "0",
+        [`fontSize-${H1}`]: "$fontSize-large",
+        [`marginTop-${H1}`]: "0",
+        [`marginBottom-${H1}`]: "0",
         light: {
         // --- No light-specific theme vars
         },
@@ -104,10 +103,9 @@ exports.H2Md = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        // letter-spacing
-        [`font-size-${H2}`]: "$font-size-medium",
-        [`margin-top-${H2}`]: "0",
-        [`margin-bottom-${H2}`]: "0",
+        [`fontSize-${H2}`]: "$fontSize-medium",
+        [`marginTop-${H2}`]: "0",
+        [`marginBottom-${H2}`]: "0",
         light: {
         // --- No light-specific theme vars
         },
@@ -127,10 +125,9 @@ exports.H3Md = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        // letter-spacing
-        [`font-size-${H3}`]: "$font-size-normal",
-        [`margin-top-${H3}`]: "0",
-        [`margin-bottom-${H3}`]: "0",
+        [`fontSize-${H3}`]: "$fontSize-normal",
+        [`marginTop-${H3}`]: "0",
+        [`marginBottom-${H3}`]: "0",
         light: {
         // --- No light-specific theme vars
         },
@@ -150,10 +147,9 @@ exports.H4Md = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        // letter-spacing
-        [`font-size-${H4}`]: "$font-size-small",
-        [`margin-top-${H4}`]: "0",
-        [`margin-bottom-${H4}`]: "0",
+        [`fontSize-${H4}`]: "$fontSize-small",
+        [`marginTop-${H4}`]: "0",
+        [`marginBottom-${H4}`]: "0",
         light: {
         // --- No light-specific theme vars
         },
@@ -173,10 +169,9 @@ exports.H5Md = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        // letter-spacing
-        [`font-size-${H5}`]: "$font-size-smaller",
-        [`margin-top-${H5}`]: "0",
-        [`margin-bottom-${H5}`]: "0",
+        [`fontSize-${H5}`]: "$fontSize-smaller",
+        [`marginTop-${H5}`]: "0",
+        [`marginBottom-${H5}`]: "0",
         light: {
         // --- No light-specific theme vars
         },
@@ -196,10 +191,9 @@ exports.H6Md = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        // letter-spacing
-        [`font-size-${H6}`]: "$font-size-tiny",
-        [`margin-top-${H6}`]: "0",
-        [`margin-bottom-${H6}`]: "0",
+        [`fontSize-${H6}`]: "$fontSize-tiny",
+        [`marginTop-${H6}`]: "0",
+        [`marginBottom-${H6}`]: "0",
         light: {
         // --- No light-specific theme vars
         },

package/dist/scripts/src/components/Heading/HeadingNative.js

@@ -22,6 +22,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const Heading_module_scss_1 = __importDefault(require("./Heading.module.scss"));
 const css_utils_1 = require("../../components-core/utils/css-utils");
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
+const hooks_1 = require("../../components-core/utils/hooks");
 const HeadingLevelKeys = ["h1", "h2", "h3", "h4", "h5", "h6"];
 exports.defaultProps = {
     level: "h1",
@@ -45,7 +46,7 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
             setAnchorId(newAnchorId || null);
         }
     }, [observeIntersection]);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         if (observeIntersection && elementRef.current && anchorId && !omitFromToc) {
             return registerHeading === null || registerHeading === void 0 ? void 0 : registerHeading({
                 id: anchorId,