xmlui 0.7.32 → 0.7.34

package/dist/scripts/src/components/Markdown/MarkdownNative.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Markdown = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
 const unist_util_visit_1 = require("unist-util-visit");
 const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
 const HtmlTags_module_scss_1 = __importDefault(require("../HtmlTags/HtmlTags.module.scss"));
-const HeadingNative_1 = require("../Heading/HeadingNative");
 const TextNative_1 = require("../Text/TextNative");
 const LinkNative_1 = require("../Link/LinkNative");
 const ImageNative_1 = require("../Image/ImageNative");
@@ -21,24 +21,24 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
         return null;
     }
     children = removeIndents ? removeTextIndents(children) : children;
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default, [bindingExpression, { extractValue }]], components: {
-                h1({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h1", sx: { lineHeight: "initial" }, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.markdownContent, style: Object.assign({}, style), children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default, [bindingExpression, { extractValue }]], components: {
+                h1({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h1", { className: HtmlTags_module_scss_1.default.htmlH1, children: children });
                 },
-                h2({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h2", sx: { lineHeight: "initial" }, children: children }));
+                h2({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h2", { className: HtmlTags_module_scss_1.default.htmlH2, children: children });
                 },
-                h3({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h3", sx: { lineHeight: "initial" }, children: children }));
+                h3({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h3", { className: HtmlTags_module_scss_1.default.htmlH3, children: children });
                 },
-                h4({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h4", sx: { lineHeight: "initial" }, children: children }));
+                h4({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h4", { className: HtmlTags_module_scss_1.default.htmlH4, children: children });
                 },
-                h5({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h5", sx: { lineHeight: "initial" }, children: children }));
+                h5({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h5", { className: HtmlTags_module_scss_1.default.htmlH5, children: children });
                 },
-                h6({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h6", sx: { lineHeight: "initial" }, children: children }));
+                h6({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h6", { className: HtmlTags_module_scss_1.default.htmlH6, children: children });
                 },
                 p({ id, children }) {
                     return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, children: children }));
@@ -62,13 +62,13 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                     return (0, jsx_runtime_1.jsx)(Blockquote, { children: children });
                 },
                 ol({ children }) {
-                    return (0, jsx_runtime_1.jsx)(OrderedList, { children: children });
+                    return (0, jsx_runtime_1.jsx)("ol", { className: HtmlTags_module_scss_1.default.htmlOl, children: children });
                 },
                 ul({ children }) {
-                    return (0, jsx_runtime_1.jsx)(UnorderedList, { children: children });
+                    return (0, jsx_runtime_1.jsx)("ul", { className: HtmlTags_module_scss_1.default.htmlUl, children: children });
                 },
                 li({ children }) {
-                    return (0, jsx_runtime_1.jsx)(ListItem, { children: children });
+                    return (0, jsx_runtime_1.jsx)("li", { children: children }); // No custom styling for li elements
                 },
                 hr() {
                     return (0, jsx_runtime_1.jsx)(HorizontalRule, {});
@@ -122,6 +122,62 @@ const HorizontalRule = () => {
     return (0, jsx_runtime_1.jsx)("hr", { className: Markdown_module_scss_1.default.horizontalRule });
 };
 const Blockquote = ({ children, style }) => {
+    // Helper function to extract text content from React nodes
+    const extractTextContent = (node) => {
+        if (typeof node === 'string') {
+            return node;
+        }
+        if (react_2.default.isValidElement(node) && node.props && node.props.children) {
+            if (Array.isArray(node.props.children)) {
+                return node.props.children.map(extractTextContent).join('');
+            }
+            return extractTextContent(node.props.children);
+        }
+        return '';
+    };
+    // Extract all text content
+    const allText = react_2.default.Children.toArray(children).map(extractTextContent).join('');
+    // Check for admonition pattern
+    const match = allText.match(/\[!([A-Z]+)\]/);
+    const isAdmonition = !!match;
+    if (isAdmonition && match && match[1]) {
+        const type = match[1].toLowerCase();
+        // Map admonition type to emoji
+        const emojiMap = {
+            info: '💡',
+            warning: '⚠️',
+            danger: '🚫',
+            note: '📝',
+            tip: '💬'
+        };
+        // Process children to remove the admonition marker
+        const processNode = (node) => {
+            if (typeof node === 'string') {
+                return node.replace(/\[!([A-Z]+)\]\s*/, '');
+            }
+            if (react_2.default.isValidElement(node)) {
+                // Handle React elements with children
+                if (node.props && node.props.children) {
+                    let newChildren;
+                    if (Array.isArray(node.props.children)) {
+                        newChildren = node.props.children.map(processNode);
+                    }
+                    else {
+                        newChildren = processNode(node.props.children);
+                    }
+                    return react_2.default.cloneElement(node, node.props, newChildren);
+                }
+                // Element without children, return as is
+                return node;
+            }
+            // Other node types (null, undefined, etc.)
+            return node;
+        };
+        const processedChildren = react_2.default.Children.map(children, processNode);
+        // Render admonition blockquote with the updated structure
+        return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.admonitionBlockquote, style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: Markdown_module_scss_1.default.admonitionContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: `${Markdown_module_scss_1.default.admonitionIcon} ${Markdown_module_scss_1.default[type] || ''}`, children: emojiMap[type] || '💡' }), (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.admonitionContent, children: processedChildren })] }) }));
+    }
+    // Render regular blockquote
     return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: style, children: children }));
 };
 const UnorderedList = ({ children, style }) => {

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

@@ -51,7 +51,7 @@ exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
             "second (and so on) parameters. \`$param\` is the same as \`$params[0]\`."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(ModalDialog_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`color-bg-${COMP}`]: "$color-bg-primary", [`color-bg-overlay-${COMP}`]: "$color-bg-overlay", [`color-text-${COMP}`]: "$color-text-primary", [`radius-${COMP}`]: "$radius", [`font-family-${COMP}`]: "$font-family", [`max-width-${COMP}`]: "450px", [`margin-bottom-title-${COMP}`]: "0", dark: {
+    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`color-bg-${COMP}`]: "$color-bg-primary", [`color-bg-overlay-${COMP}`]: "$color-bg-overlay", [`color-text-${COMP}`]: "$color-text-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0", dark: {
             [`color-bg-${COMP}`]: "$color-bg-primary",
         } }),
 });

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

@@ -25,8 +25,8 @@ exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(NavGroup_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`color-bg-dropdown-${COMP}`]: "$color-bg-primary",
-        [`radius-dropdown-${COMP}`]: "$radius",
-        [`shadow-dropdown-${COMP}`]: "$shadow-spread",
+        [`borderRadius-dropdown-${COMP}`]: "$borderRadius",
+        [`boxShadow-dropdown-${COMP}`]: "$shadow-spread",
     },
 });
 exports.navGroupComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavGroupMd, ({ node, extractValue, renderChild }) => {

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

@@ -53,33 +53,36 @@ exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
         click: (0, metadata_helpers_1.dClick)(COMP),
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavLink_module_scss_1.default.themeVars),
+    themeVarDescriptions: {
+        [`color-indicator-${COMP}`]: "Provides the following states: `--hover`, `--active`, `--pressed`",
+    },
     defaultThemeVars: {
-        [`border-NavLink`]: "0px solid $color-border",
-        "radius-NavLink": "$radius",
-        "color-bg-NavLink": "transparent",
-        "padding-horizontal-NavLink": "$space-4",
-        "padding-vertical-NavLink": "$space-2",
-        "font-size-NavLink": "$font-size-small",
-        "font-weight-NavLink": "$font-weight-normal",
-        "font-family-NavLink": "$font-family",
-        "color-text-NavLink": "$color-text-primary",
-        "font-weight-NavLink--pressed": "$font-weight-normal",
-        "thickness-indicator-NavLink": "$space-0_5",
-        "color-outline-NavLink--focus": "$color-outline--focus",
-        "thickness-outline-NavLink--focus": "$thickness-outline--focus",
-        "style-outline-NavLink--focus": "$style-outline--focus",
-        "offset-outline-NavLink--focus": "-1px",
-        "radius-indicator-NavLink": "$radius",
+        [`border-${COMP}`]: "0px solid $color-border",
+        [`borderRadius-${COMP}`]: "$borderRadius",
+        [`color-bg-${COMP}`]: "transparent",
+        [`paddingHorizontal-${COMP}`]: "$space-4",
+        [`paddingVertical-${COMP}`]: "$space-2",
+        [`fontSize-${COMP}`]: "$fontSize-small",
+        [`fontWeight-${COMP}`]: "$fontWeight-normal",
+        [`fontFamily-${COMP}`]: "$fontFamily",
+        [`color-text-${COMP}`]: "$color-text-primary",
+        [`fontWeight-${COMP}--pressed`]: "$fontWeight-normal",
+        [`thickness-indicator-${COMP}`]: "$space-0_5",
+        [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
+        [`outlineWidth-${COMP}--focus`]: "$outlineWidth--focus",
+        [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",
+        [`outlineOffset-${COMP}--focus`]: "-1px",
+        [`borderRadius-indicator-${COMP}`]: "$borderRadius",
         light: {
-            "color-icon-NavLink": "$color-surface-500",
-            "color-indicator-NavLink--active": "$color-primary-500",
-            "color-indicator-NavLink--pressed": "$color-primary-500",
-            "color-indicator-NavLink--hover": "$color-primary-600",
+            [`color-icon-${COMP}`]: "$color-surface-500",
+            [`color-indicator-${COMP}--active`]: "$color-primary-500",
+            [`color-indicator-${COMP}--pressed`]: "$color-primary-500",
+            [`color-indicator-${COMP}--hover`]: "$color-primary-600",
         },
         dark: {
-            "color-indicator-NavLink--active": "$color-primary-500",
-            "color-indicator-NavLink--pressed": "$color-primary-500",
-            "color-indicator-NavLink--hover": "$color-primary-400",
+            [`color-indicator-${COMP}--active`]: "$color-primary-500",
+            [`color-indicator-${COMP}--pressed`]: "$color-primary-500",
+            [`color-indicator-${COMP}--hover`]: "$color-primary-400",
         },
     },
 });

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

@@ -22,15 +22,15 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`color-bg-${COMP}`]: "transparent",
         [`border-${COMP}`]: '0px solid $color-border',
-        [`padding-horizontal-${COMP}`]: "$space-4",
-        [`padding-vertical-logo-${COMP}`]: "$space-4",
-        [`padding-horizontal-logo-${COMP}`]: "$space-4",
-        [`margin-bottom-logo-${COMP}`]: "$space-4",
+        [`paddingHorizontal-${COMP}`]: "$space-4",
+        [`paddingVertical-logo-${COMP}`]: "$space-4",
+        [`paddingHorizontal-logo-${COMP}`]: "$space-4",
+        [`marginBottom-logo-${COMP}`]: "$space-4",
         light: {
-            [`shadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
+            [`boxShadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
         },
         dark: {
-            [`shadow-${COMP}-vertical`]: "4px 0 6px 0 rgba(0, 0, 0, 0.2)",
+            [`boxShadow-${COMP}-vertical`]: "4px 0 6px 0 rgba(0, 0, 0, 0.2)",
         },
     },
 });

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

@@ -27,7 +27,7 @@ exports.NoResultMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(NoResult_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`border-${COMP}`]: "0px solid $color-border",
-        [`padding-vertical-${COMP}`]: "$space-2",
+        [`paddingVertical-${COMP}`]: "$space-2",
         [`gap-icon-${COMP}`]: "$space-2",
         [`size-icon-${COMP}`]: "$space-8",
         light: {

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

@@ -43,11 +43,11 @@ exports.OffCanvasMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         "width-OffCanvas": "600px",
         "padding-OffCanvas": "$padding-tight",
-        "padding-vertical-OffCanvas": "$padding-tight",
-        "padding-horizontal-OffCanvas": "$padding-normal",
+        "paddingVertical-OffCanvas": "$padding-tight",
+        "paddingHorizontal-OffCanvas": "$padding-normal",
         "color-bg-OffCanvas": "$color-bg",
-        "shadow-horizontal-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
-        "shadow-vertical-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
+        "boxShadow-horizontal-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
+        "boxShadow-vertical-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
         light: {},
         dark: {},
     },

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

@@ -22,8 +22,8 @@ exports.ProgressBarMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(ProgressBar_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`radius-${COMP}`]: "$radius",
-        [`radius-indicator-${COMP}`]: "0px",
+        [`borderRadius-${COMP}`]: "$borderRadius",
+        [`borderRadius-indicator-${COMP}`]: "0px",
         [`thickness-${COMP}`]: "$space-2",
         light: {
             [`color-bg-${COMP}`]: "$color-surface-200",

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

@@ -44,8 +44,8 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
         [`color-bg-checked-${RGOption}-error`]: `$color-border-${RGOption}-error`,
         [`color-bg-checked-${RGOption}-warning`]: `$color-border-${RGOption}-warning`,
         [`color-bg-checked-${RGOption}-success`]: `$color-border-${RGOption}-success`,
-        [`font-size-${RGOption}`]: "$font-size-small",
-        [`font-weight-${RGOption}`]: "$font-weight-bold",
+        [`fontSize-${RGOption}`]: "$fontSize-small",
+        [`fontWeight-${RGOption}`]: "$fontWeight-bold",
         [`color-text-${RGOption}-error`]: `$color-border-${RGOption}-error`,
         [`color-text-${RGOption}-warning`]: `$color-border-${RGOption}-warning`,
         [`color-text-${RGOption}-success`]: `$color-border-${RGOption}-success`,

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

@@ -55,18 +55,18 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Select_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",
         [`thickness-border-menu-${COMP}`]: "1px",
         [`color-border-menu-${COMP}`]: "$color-border",
         [`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",
         [`opacity-text-item-${COMP}--disabled`]: "0.5",
         [`opacity-${COMP}--disabled`]: "0.5",
         light: {

package/dist/scripts/src/components/Select/SelectNative.js

@@ -45,6 +45,7 @@ const react_select_1 = require("@radix-ui/react-select");
 const react_popover_1 = require("@radix-ui/react-popover");
 const cmdk_1 = require("cmdk");
 const classnames_1 = __importDefault(require("classnames"));
+const react_focus_scope_1 = require("@radix-ui/react-focus-scope");
 const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
@@ -56,7 +57,7 @@ const OptionContext_1 = require("./OptionContext");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwardedRef) {
     const { root } = (0, ThemeContext_1.useTheme)();
-    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, children, value, height, style, placeholder, id, triggerRef, onFocus, options } = props;
+    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, children, value, height, style, placeholder, id, triggerRef, onFocus, options, } = props;
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
     const stringValue = value + "";
     const onValChange = (0, react_1.useCallback)((val) => {
@@ -67,10 +68,10 @@ const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwar
     return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectOption, children: (0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: onValChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, { id: id, style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
                         [Select_module_scss_1.default.error]: validationStatus === "error",
                         [Select_module_scss_1.default.warning]: validationStatus === "warning",
-                        [Select_module_scss_1.default.valid]: validationStatus === "valid"
+                        [Select_module_scss_1.default.valid]: validationStatus === "valid",
                     }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: (0, jsx_runtime_1.jsx)(react_select_1.Value, { placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.Viewport, { className: (0, classnames_1.default)(Select_module_scss_1.default.selectViewport), children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }) }));
 });
-exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false }, ref) {
+exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false, }, ref) {
     var _a;
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -129,7 +130,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
-            setValue
+            setValue,
         });
     }, [focus, registerComponentApi, setValue]);
     // Render the "empty list" message
@@ -146,17 +147,17 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     }, []);
     const optionContextValue = (0, react_1.useMemo)(() => ({
         onOptionAdd,
-        onOptionRemove
+        onOptionRemove,
     }), [onOptionAdd, onOptionRemove]);
     const selectContextValue = (0, react_1.useMemo)(() => ({
         multiSelect,
         value,
         optionLabelRenderer,
-        onChange: toggleOption
+        onChange: toggleOption,
     }), [multiSelect, toggleOption, value, optionLabelRenderer]);
     return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption, children: [children, (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { id: id, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
                                             [Select_module_scss_1.default.disabled]: !enabled,
-                                            [Select_module_scss_1.default.multi]: multiSelect
+                                            [Select_module_scss_1.default.multi]: multiSelect,
                                         }), autoFocus: autoFocus, children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
                                                         var _a;
                                                         return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === v), () => {
@@ -168,14 +169,14 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                     }) }) })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
                                                             event.stopPropagation();
                                                             clearValue();
-                                                        } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }) }), open && ((0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {
-                                            const extendedValue = value + " " + keywords.join(" ");
-                                            if (extendedValue.toLowerCase().includes(search.toLowerCase()))
-                                                return 1;
-                                            return 0;
-                                        }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
-                                            // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                                            (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { value: value, label: label, enabled: enabled, keywords: keywords }, value))), (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }))] }) })] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { ref: ref, value: value, options: options, onValueChange: toggleOption, id: id, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: children || emptyListNode })) }) }));
+                                                        } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }) }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {
+                                                    const extendedValue = value + " " + keywords.join(" ");
+                                                    if (extendedValue.toLowerCase().includes(search.toLowerCase()))
+                                                        return 1;
+                                                    return 0;
+                                                }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
+                                                    // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
+                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { value: value, label: label, enabled: enabled, keywords: keywords }, value))), (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] }) })] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { ref: ref, value: value, options: options, onValueChange: toggleOption, id: id, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: children || emptyListNode })) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_1.useId)();

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

@@ -52,7 +52,7 @@ exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
         [`style-border-thumb-${COMP}`]: "solid",
         [`color-border-thumb-${COMP}`]: "$color-surface-50",
         [`color-bg-thumb-${COMP}`]: "$color-primary",
-        [`shadow-thumb-${COMP}`]: "$shadow-md",
+        [`boxShadow-thumb-${COMP}`]: "$shadow-md",
         light: {
             [`color-bg-track-${COMP}--disabled`]: "$color-surface-300",
             [`color-bg-range-${COMP}--disabled`]: "$color-surface-400",

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

@@ -98,23 +98,23 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Table_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`padding-heading-${COMP}`]: `$space-2`,
-        [`padding-horizontal-cell-${COMP}`]: "$space-2",
-        [`padding-horizontal-cell-first-${COMP}`]: "$space-5",
-        [`padding-horizontal-cell-last-${COMP}`]: "$space-5",
-        [`padding-vertical-cell-${COMP}`]: "$space-2",
+        [`paddingHorizontal-cell-${COMP}`]: "$space-2",
+        [`paddingHorizontal-cell-first-${COMP}`]: "$space-5",
+        [`paddingHorizontal-cell-last-${COMP}`]: "$space-5",
+        [`paddingVertical-cell-${COMP}`]: "$space-2",
         [`border-cell-${COMP}`]: "1px solid $color-border",
-        [`thickness-outline-heading-${COMP}--focus`]: "$thickness-outline--focus",
-        [`style-outline-heading-${COMP}--focus`]: "$style-outline--focus",
-        [`offset-outline-heading-${COMP}--focus`]: "$offset-outline--focus",
-        [`font-size-heading-${COMP}`]: "$font-size-tiny",
-        [`font-weight-heading-${COMP}`]: "$font-weight-bold",
-        [`transform-text-heading-${COMP}`]: "uppercase",
-        [`font-size-row-${COMP}`]: "$font-size-small",
+        [`outlineWidth-heading-${COMP}--focus`]: "$outlineWidth--focus",
+        [`outlineStyle-heading-${COMP}--focus`]: "$outlineStyle--focus",
+        [`outlineOffset-heading-${COMP}--focus`]: "$outlineOffset--focus",
+        [`fontSize-heading-${COMP}`]: "$fontSize-tiny",
+        [`fontWeight-heading-${COMP}`]: "$fontWeight-bold",
+        [`textTransform-heading-${COMP}`]: "uppercase",
+        [`fontSize-row-${COMP}`]: "$fontSize-small",
         [`color-bg-${COMP}`]: "$color-bg",
         [`color-bg-row-${COMP}`]: "inherit",
         [`color-bg-selected-${COMP}--hover`]: `$color-bg-row-${COMP}--hover`,
         [`color-bg-pagination-${COMP}`]: `$color-bg-${COMP}`,
-        [`color-outline-heading-${COMP}--focus`]: "$color-outline--focus",
+        [`outlineColor-heading-${COMP}--focus`]: "$outlineColor--focus",
         [`color-text-pagination-${COMP}`]: "$color-secondary",
         light: {
             [`color-bg-row-${COMP}--hover`]: "$color-primary-50",
@@ -133,7 +133,7 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-const TableWithColumns = ({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, layoutCss, registerComponentApi, }) => {
+const TableWithColumns = (0, react_1.forwardRef)(({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, layoutCss, registerComponentApi, }, ref) => {
     var _a, _b, _c, _d, _e, _f;
     const data = extractValue(node.props.items) || extractValue(node.props.data);
     const [columnIds, setColumnIds] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
@@ -181,7 +181,7 @@ const TableWithColumns = ({ extractValue, node, renderChild, lookupEventHandler,
     }, []);
     const columns = (0, react_1.useMemo)(() => columnIds.map((colId) => columnsByIds[colId]), [columnIds, columnsByIds]);
     const selectionContext = (0, SelectionStoreNative_1.useSelectionContext)();
-    const tableContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: tableContextValue, children: renderChild(node.children) }, tableKey), (0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: columnRefresherContextValue, children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(TableNative_1.Table, { data: data, columns: columns, pageSizes: extractValue(node.props.pageSizes), rowsSelectable: extractValue.asOptionalBoolean(node.props.rowsSelectable), registerComponentApi: registerComponentApi, noDataRenderer: node.props.noDataTemplate &&
+    const tableContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: tableContextValue, children: renderChild(node.children) }, tableKey), (0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: columnRefresherContextValue, children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(TableNative_1.Table, { ref: ref, data: data, columns: columns, pageSizes: extractValue(node.props.pageSizes), rowsSelectable: extractValue.asOptionalBoolean(node.props.rowsSelectable), registerComponentApi: registerComponentApi, noDataRenderer: node.props.noDataTemplate &&
                     (() => {
                         return renderChild(node.props.noDataTemplate);
                     }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), style: layoutCss, uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader) })] }));
@@ -189,7 +189,7 @@ const TableWithColumns = ({ extractValue, node, renderChild, lookupEventHandler,
         return (0, jsx_runtime_1.jsx)(SelectionStoreNative_1.StandaloneSelectionStore, { children: tableContent });
     }
     return tableContent;
-};
+});
 exports.tableComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TableMd, ({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, layoutCss, registerComponentApi, }) => {
     return ((0, jsx_runtime_1.jsx)(TableWithColumns, { node: node, extractValue: extractValue, lookupEventHandler: lookupEventHandler, lookupSyncCallback: lookupSyncCallback, layoutCss: layoutCss, renderChild: renderChild, registerComponentApi: registerComponentApi }));
 });

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

@@ -35,36 +35,36 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`width-${COMP}`]: "auto",
         [`height-${COMP}`]: "auto",
-        [`font-size-${COMP}Item`]: "$font-size-smaller",
-        [`font-weight-${COMP}Item`]: "$font-weight-normal",
-        [`font-family-${COMP}Item`]: "$font-family",
-        [`border-radius-${COMP}Item`]: "0",
+        [`fontSize-${COMP}Item`]: "$fontSize-smaller",
+        [`fontWeight-${COMP}Item`]: "$fontWeight-normal",
+        [`fontFamily-${COMP}Item`]: "$fontFamily",
+        [`borderRadius-${COMP}Item`]: "0",
         [`border-width-${COMP}Item`]: "$space-0_5",
         [`border-style-${COMP}Item`]: "solid",
-        [`border-radius-${COMP}Item--active`]: "0",
+        [`borderRadius-${COMP}Item--active`]: "0",
         [`border-width-${COMP}Item--active`]: "$space-0_5",
         [`border-style-${COMP}Item--active`]: "solid",
-        [`font-weight-${COMP}Item--active`]: "$font-weight-bold",
+        [`fontWeight-${COMP}Item--active`]: "$fontWeight-bold",
         [`color-bg-${COMP}`]: "transparent",
-        [`padding-horizontal-${COMP}`]: "$space-8",
-        [`padding-vertical-${COMP}`]: "$space-4",
-        [`padding-horizontal-${COMP}Item`]: "$space-2",
-        [`padding-vertical-${COMP}Item`]: "$space-2",
-        [`padding-horizontal-${COMP}Item-level-1`]: "unset",
-        [`padding-horizontal-${COMP}Item-level-2`]: "unset",
-        [`padding-horizontal-${COMP}Item-level-3`]: "unset",
-        [`padding-horizontal-${COMP}Item-level-4`]: "unset",
-        [`padding-horizontal-${COMP}Item-level-5`]: "unset",
-        [`padding-horizontal-${COMP}Item-level-6`]: "unset",
-        [`margin-top-${COMP}`]: "0",
-        [`margin-bottom-${COMP}`]: "0",
-        [`border-radius-${COMP}`]: "0",
+        [`paddingHorizontal-${COMP}`]: "$space-8",
+        [`paddingVertical-${COMP}`]: "$space-4",
+        [`paddingHorizontal-${COMP}Item`]: "$space-2",
+        [`paddingVertical-${COMP}Item`]: "$space-2",
+        [`paddingHorizontal-${COMP}Item-level-1`]: "unset",
+        [`paddingHorizontal-${COMP}Item-level-2`]: "unset",
+        [`paddingHorizontal-${COMP}Item-level-3`]: "unset",
+        [`paddingHorizontal-${COMP}Item-level-4`]: "unset",
+        [`paddingHorizontal-${COMP}Item-level-5`]: "unset",
+        [`paddingHorizontal-${COMP}Item-level-6`]: "unset",
+        [`marginTop-${COMP}`]: "0",
+        [`marginBottom-${COMP}`]: "0",
+        [`borderRadius-${COMP}`]: "0",
         [`border-width-${COMP}`]: "0",
         [`border-color-${COMP}`]: "transparent",
         [`border-style-${COMP}`]: "solid",
-        [`transform-${COMP}Item`]: "none",
+        [`textTransform-${COMP}Item`]: "none",
         [`align-vertical-${COMP}Item`]: "baseline",
-        [`letter-spacing-${COMP}Item`]: "0",
+        [`letterSpacing-${COMP}Item`]: "0",
         light: {
             [`color-${COMP}Item`]: "$color-text-primary",
             [`border-color-${COMP}Item`]: "$color-border",

package/dist/scripts/src/components/TableOfContents/TableOfContentsNative.js

@@ -12,11 +12,12 @@ const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const classnames_1 = __importDefault(require("classnames"));
 const TableOfContents_module_scss_1 = __importDefault(require("./TableOfContents.module.scss"));
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
+const hooks_1 = require("../../components-core/utils/hooks");
 exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling, maxHeadingLevel = 6 }, forwardedRef) {
     const tocRef = (0, react_1.useRef)(null);
     const [activeAnchorId, setActiveId] = (0, react_1.useState)(null);
     const { headings, scrollToAnchor, subscribeToActiveAnchorChange } = (0, TableOfContentsContext_1.useTableOfContents)();
-    (0, react_1.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         return subscribeToActiveAnchorChange((id) => {
             const foundHeading = headings.find((heading) => heading.id === id);
             if (foundHeading.level <= maxHeadingLevel) {