xmlui 0.11.4 → 0.11.6

package/dist/scripts/src/components/ResponsiveBar/ResponsiveBarNative.js

@@ -1,313 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResponsiveBar = exports.defaultResponsiveBarProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const ResponsiveBar_module_scss_1 = __importDefault(require("./ResponsiveBar.module.scss"));
-const hooks_1 = require("../../components-core/utils/hooks");
-const DropdownMenuNative_1 = require("../DropdownMenu/DropdownMenuNative");
-// Helper component to avoid duplication of DropdownMenu properties
-const ResponsiveBarDropdown = ({ overflowIcon, children, className }) => ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(DropdownMenuNative_1.DropdownMenu, { label: "More options", triggerButtonIcon: overflowIcon, children: children }) }));
-exports.defaultResponsiveBarProps = {
-    overflowIcon: "ellipsisHorizontal:ResponsiveBar",
-    gap: 0,
-    orientation: "horizontal",
-};
-exports.ResponsiveBar = (0, react_1.forwardRef)(function ResponsiveBar(_a, ref) {
-    var { children, overflowIcon = exports.defaultResponsiveBarProps.overflowIcon, gap = exports.defaultResponsiveBarProps.gap, orientation = exports.defaultResponsiveBarProps.orientation, style, className, onClick } = _a, rest = __rest(_a, ["children", "overflowIcon", "gap", "orientation", "style", "className", "onClick"]);
-    const containerRef = (0, react_1.useRef)(null);
-    const measurementDropdownRef = (0, react_1.useRef)(null);
-    const isCalculatingRef = (0, react_1.useRef)(false);
-    const lastContainerSize = (0, react_1.useRef)(0); // Renamed for clarity - stores width OR height
-    const lastChildrenCount = (0, react_1.useRef)(0);
-    const lastChildrenRef = (0, react_1.useRef)(null);
-    const layoutCompletedRef = (0, react_1.useRef)(false);
-    // Two-phase rendering state
-    const [isInMeasurementPhase, setIsInMeasurementPhase] = (0, react_1.useState)(true);
-    const [measuredWidths, setMeasuredWidths] = (0, react_1.useState)([]);
-    // Simple layout state
-    const [layout, setLayout] = (0, react_1.useState)({
-        visibleItems: [],
-        overflowItems: [],
-    });
-    // Convert children to array for processing - use stable reference
-    const childrenArray = react_1.default.useMemo(() => {
-        const result = react_1.default.Children.toArray(children).filter((child) => react_1.default.isValidElement(child));
-        return result;
-    }, [children]);
-    // Stable children count to prevent unnecessary re-measurements
-    const childrenCount = childrenArray.length;
-    // Measurement phase - measure all items in the same container
-    const measureItems = () => {
-        if (!containerRef.current)
-            return;
-        const items = [];
-        // Get the visibleItems container (during measurement phase, it has inline visibility styles)
-        const measurementContainer = containerRef.current.querySelector(`.${ResponsiveBar_module_scss_1.default.visibleItems}`);
-        if (measurementContainer) {
-            // Get all direct child divs within the measurement container
-            const childDivs = Array.from(measurementContainer.children);
-            childDivs.forEach((div) => {
-                const child = div.firstElementChild;
-                if (child) {
-                    items.push(child);
-                }
-            });
-        }
-        const measurements = items.map((item) => {
-            const rect = item.getBoundingClientRect();
-            // For horizontal orientation, use width; for vertical, use height
-            return orientation === "horizontal" ? rect.width : rect.height;
-        });
-        setMeasuredWidths(measurements);
-        setIsInMeasurementPhase(false);
-    };
-    // Calculate overflow layout with pre-measured dimensions
-    const calculateOverflowLayout = () => {
-        var _a;
-        if (isCalculatingRef.current ||
-            !containerRef.current ||
-            childrenArray.length === 0 ||
-            measuredWidths.length === 0) {
-            return;
-        }
-        const container = containerRef.current;
-        const containerRect = container.getBoundingClientRect();
-        const containerSize = orientation === "horizontal" ? containerRect.width : containerRect.height;
-        const lastSize = lastContainerSize.current;
-        if (containerSize === 0 || containerSize === lastSize) {
-            return; // Not ready yet or no change
-        }
-        // Debug logging
-        console.log(`ResponsiveBar ${orientation}: containerSize=${containerSize}, children=${childrenArray.length}`);
-        isCalculatingRef.current = true;
-        lastContainerSize.current = containerSize;
-        // Use the gap prop instead of computed style
-        const gapValue = gap;
-        // First, calculate if all items fit without any dropdown
-        let totalSize = 0;
-        for (let i = 0; i < childrenArray.length; i++) {
-            const childSize = measuredWidths[i];
-            if (!childSize)
-                continue;
-            const gapSize = i > 0 ? gapValue : 0;
-            totalSize += gapSize + childSize;
-        }
-        console.log(`Total size needed: ${totalSize}, available: ${containerSize}`);
-        let visibleItems;
-        let overflowItems;
-        // If all items fit, show all
-        if (totalSize <= containerSize) {
-            visibleItems = childrenArray;
-            overflowItems = [];
-        }
-        else {
-            // Need overflow - measure actual dropdown size
-            let dropdownSize = orientation === "horizontal" ? 147 : 47; // Different fallback for vertical
-            // First try existing dropdown in the visible layout
-            const existingDropdown = container.querySelector(`.${ResponsiveBar_module_scss_1.default.overflowDropdown}`);
-            if (existingDropdown) {
-                const dropdownRect = existingDropdown.getBoundingClientRect();
-                dropdownSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
-            }
-            // Then try the measurement dropdown
-            else if (measurementDropdownRef.current) {
-                const dropdownRect = measurementDropdownRef.current.getBoundingClientRect();
-                dropdownSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
-            }
-            console.log(`Dropdown size: ${dropdownSize}`);
-            let accumulatedSize = 0;
-            let visibleCount = 0;
-            for (let i = 0; i < childrenArray.length; i++) {
-                const childSize = measuredWidths[i];
-                if (!childSize)
-                    continue;
-                const gapSize = i > 0 ? gapValue : 0;
-                const proposedSize = accumulatedSize + gapSize + childSize;
-                // Check if this item would fit alongside the dropdown
-                // When we have overflow: visibleItems + dropdown = visibleCount items + visibleCount gaps
-                // The proposedSize already accounts for (visibleCount-1) gaps between items
-                // We need to add 1 more gap for the space before the dropdown
-                const totalSizeWithDropdown = proposedSize + gapValue + dropdownSize;
-                console.log(`Item ${i}: size=${childSize}, proposed=${proposedSize}, withDropdown=${totalSizeWithDropdown}`);
-                if (totalSizeWithDropdown <= containerSize) {
-                    accumulatedSize = proposedSize;
-                    visibleCount++;
-                }
-                else {
-                    // This item doesn't fit when considering the dropdown gap, so stop here
-                    break;
-                }
-            }
-            // Verify our calculation
-            if (visibleCount > 0) {
-                let verifyWidth = 0;
-                for (let i = 0; i < visibleCount; i++) {
-                    verifyWidth += measuredWidths[i];
-                }
-                // When we have overflow: visibleCount items + dropdown need visibleCount gaps total
-                // (visibleCount-1 gaps between items + 1 gap before dropdown)
-                const totalGaps = visibleCount * gapValue;
-            }
-            // Also check actual visible item widths for comparison
-            const visibleContainer = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${ResponsiveBar_module_scss_1.default.visibleItems}`);
-            if (visibleContainer && visibleContainer.children.length > 0) {
-                let actualTotalWidth = 0;
-                for (let i = 0; i < Math.min(visibleContainer.children.length, visibleCount); i++) {
-                    const actualWidth = visibleContainer.children[i].offsetWidth;
-                    actualTotalWidth += actualWidth;
-                }
-            }
-            // Ensure we move at least one item to overflow if we're showing dropdown
-            if (visibleCount >= childrenArray.length) {
-                // If all items would fit with dropdown space, don't show dropdown
-                visibleItems = childrenArray;
-                overflowItems = [];
-                console.log(`All items fit, no dropdown needed`);
-            }
-            else if (visibleCount === 0) {
-                // If no items fit, show at least one visible and rest in overflow
-                visibleItems = childrenArray.slice(0, 1);
-                overflowItems = childrenArray.slice(1);
-                console.log(`No items fit, forcing one visible: visible=1, overflow=${overflowItems.length}`);
-            }
-            else {
-                visibleItems = childrenArray.slice(0, visibleCount);
-                overflowItems = childrenArray.slice(visibleCount);
-                console.log(`Split items: visible=${visibleItems.length}, overflow=${overflowItems.length}`);
-            }
-        }
-        console.log(`Final layout: visible=${visibleItems.length}, overflow=${overflowItems.length}`);
-        // Only update if there's an actual change
-        if (visibleItems.length !== layout.visibleItems.length ||
-            overflowItems.length !== layout.overflowItems.length) {
-            setLayout({
-                visibleItems,
-                overflowItems,
-            });
-        }
-        // Allow future calculations
-        setTimeout(() => {
-            isCalculatingRef.current = false;
-        }, 50);
-    };
-    // Phase 1: Measure items when children actually change
-    (0, react_1.useEffect)(() => {
-        // Ignore children changes that happen immediately after layout completion
-        if (layoutCompletedRef.current) {
-            setTimeout(() => {
-                layoutCompletedRef.current = false;
-            }, 100);
-            return;
-        }
-        if (childrenCount !== lastChildrenCount.current) {
-            lastChildrenCount.current = childrenCount;
-            setIsInMeasurementPhase(true);
-            setMeasuredWidths([]);
-        }
-    }, [childrenCount]);
-    // Phase 1: Trigger measurement after render
-    (0, react_1.useEffect)(() => {
-        if (isInMeasurementPhase) {
-            const timer = setTimeout(() => {
-                measureItems();
-            }, 10);
-            return () => clearTimeout(timer);
-        }
-    }, [isInMeasurementPhase, childrenCount]);
-    // Phase 2: Calculate layout when measurements are ready
-    (0, react_1.useEffect)(() => {
-        if (!isInMeasurementPhase && measuredWidths.length > 0) {
-            calculateOverflowLayout();
-            // Mark that layout just completed to ignore immediate children changes
-            layoutCompletedRef.current = true;
-        }
-    }, [isInMeasurementPhase, measuredWidths]);
-    // Monitor container size changes - only in phase 2 to avoid infinite loops
-    (0, hooks_1.useResizeObserver)(containerRef, () => {
-        if (!isInMeasurementPhase && containerRef.current) {
-            const containerRect = containerRef.current.getBoundingClientRect();
-            const currentSize = orientation === "horizontal" ? containerRect.width : containerRect.height;
-            if (currentSize !== lastContainerSize.current) {
-                calculateOverflowLayout();
-            }
-        }
-    });
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: (el) => {
-            containerRef.current = el;
-            if (typeof ref === "function") {
-                ref(el);
-            }
-            else if (ref) {
-                ref.current = el;
-            }
-        }, className: (0, classnames_1.default)(ResponsiveBar_module_scss_1.default.responsiveBar, orientation === "vertical" ? ResponsiveBar_module_scss_1.default.vertical : ResponsiveBar_module_scss_1.default.horizontal, className), style: Object.assign(Object.assign({}, style), { gap: `${gap}px`, flexDirection: orientation === "horizontal" ? "row" : "column", height: orientation === "vertical" ? "100%" : undefined, width: orientation === "horizontal" ? "100%" : undefined }), onClick: onClick }, rest, { children: isInMeasurementPhase ? (
-        // Phase 1: Render all items invisibly for measurement - identical structure to layout phase
-        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(ResponsiveBar_module_scss_1.default.visibleItems, orientation === "vertical" ? ResponsiveBar_module_scss_1.default.vertical : ResponsiveBar_module_scss_1.default.horizontal), style: {
-                        gap: `${gap}px`, // Gap between items same as layout phase
-                        visibility: "hidden",
-                        opacity: 0,
-                        pointerEvents: "none",
-                        flexDirection: orientation === "horizontal" ? "row" : "column",
-                    }, children: childrenArray.map((child, index) => ((0, jsx_runtime_1.jsx)("div", { children: child }, `item-${index}`))) }), (0, jsx_runtime_1.jsx)("div", { ref: measurementDropdownRef, style: {
-                        visibility: "hidden",
-                        opacity: 0,
-                        pointerEvents: "none",
-                    }, children: (0, jsx_runtime_1.jsx)(ResponsiveBarDropdown, { overflowIcon: overflowIcon, className: ResponsiveBar_module_scss_1.default.overflowDropdown, children: childrenArray.length > 0 && (0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { children: childrenArray[0] }) }) })] })) : (
-        // Phase 2: Render final layout
-        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(ResponsiveBar_module_scss_1.default.visibleItems, orientation === "vertical" ? ResponsiveBar_module_scss_1.default.vertical : ResponsiveBar_module_scss_1.default.horizontal), style: {
-                        gap: `${gap}px`, // Gap between visible items
-                        flexDirection: orientation === "horizontal" ? "row" : "column",
-                    }, children: childrenArray.map((child, index) => {
-                        const isVisible = layout.visibleItems.length > 0 ? index < layout.visibleItems.length : true;
-                        return ((0, jsx_runtime_1.jsx)("div", { style: { display: isVisible ? "block" : "none" }, children: child }, `item-${index}`));
-                    }) }), layout.overflowItems.length > 0 && ((0, jsx_runtime_1.jsx)(ResponsiveBarDropdown, { overflowIcon: overflowIcon, className: ResponsiveBar_module_scss_1.default.overflowDropdown, children: layout.overflowItems.map((item, index) => ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { children: item }, index))) }))] })) })));
-});

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

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HiddenOption = HiddenOption;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const OptionContext_1 = require("./OptionContext");
-const react_1 = require("react");
-function HiddenOption(option) {
-    const { label } = option;
-    const { onOptionAdd } = (0, OptionContext_1.useOption)();
-    const [node, setNode] = (0, react_1.useState)(null);
-    const opt = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: option.keywords || [(_b = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
-    }, [option, node, label]);
-    (0, react_1.useEffect)(() => {
-        onOptionAdd(opt);
-        // Don't remove options when component unmounts - they should persist
-    }, [opt, onOptionAdd]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.children }));
-}

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

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionContext = void 0;
-exports.useOption = useOption;
-const react_1 = require("react");
-exports.OptionContext = (0, react_1.createContext)({
-    onOptionAdd: () => { },
-    onOptionRemove: () => { },
-});
-function useOption() {
-    return (0, react_1.useContext)(exports.OptionContext);
-}

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

@@ -1,131 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectComponentRenderer = exports.SelectMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const metadata_helpers_1 = require("../metadata-helpers");
-const container_helpers_1 = require("../container-helpers");
-const SelectNative_1 = require("./SelectNative");
-const COMP = "Select";
-exports.SelectMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`Select` provides a dropdown interface for choosing from a list of options, " +
-        "supporting both single and multiple selection modes. It offers extensive " +
-        "customization capabilities including search functionality, custom templates, " +
-        "and comprehensive form integration.",
-    props: {
-        placeholder: Object.assign(Object.assign({}, (0, metadata_helpers_1.dPlaceholder)()), { defaultValue: SelectNative_1.defaultProps.placeholder }),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        value: {
-            description: "This property sets the current value of the component.",
-            isInternal: true, //TODO illesg temp
-        },
-        autoFocus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dAutoFocus)()), { defaultValue: SelectNative_1.defaultProps.autoFocus }),
-        required: Object.assign(Object.assign({}, (0, metadata_helpers_1.dRequired)()), { defaultValue: SelectNative_1.defaultProps.required }),
-        readOnly: Object.assign(Object.assign({}, (0, metadata_helpers_1.dReadonly)()), { defaultValue: SelectNative_1.defaultProps.readOnly }),
-        enabled: Object.assign(Object.assign({}, (0, metadata_helpers_1.dEnabled)()), { defaultValue: SelectNative_1.defaultProps.enabled }),
-        validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: SelectNative_1.defaultProps.validationStatus }),
-        optionLabelTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display an option in the dropdown list.`),
-        optionTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display an option in the dropdown list.`),
-        valueTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display a selected value when ` +
-            `multiple selections (\`multiSelect\` is \`true\`) are enabled.`),
-        dropdownHeight: (0, metadata_helpers_1.d)("This property sets the height of the dropdown list. If not set, the height is determined automatically."),
-        emptyListTemplate: (0, metadata_helpers_1.dComponent)(`This optional property provides the ability to customize what is displayed when the ` +
-            `list of options is empty.`),
-        multiSelect: Object.assign(Object.assign({}, (0, metadata_helpers_1.dMulti)()), { defaultValue: SelectNative_1.defaultProps.multiSelect }),
-        searchable: {
-            description: `This property enables the search functionality in the dropdown list.`,
-            defaultValue: SelectNative_1.defaultProps.searchable,
-        },
-        inProgress: {
-            description: `This property indicates whether the component is in progress. It can be used to show a loading message.`,
-            defaultValue: SelectNative_1.defaultProps.inProgress,
-        },
-        inProgressNotificationMessage: {
-            description: `This property indicates the message to display when the component is in progress.`,
-            defaultValue: SelectNative_1.defaultProps.inProgressNotificationMessage,
-        },
-    },
-    events: {
-        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
-        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
-        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
-    },
-    apis: {
-        focus: {
-            description: `This method focuses the \`${COMP}\` component. You can use it to programmatically focus the component.`,
-            signature: "focus(): void",
-        },
-        setValue: {
-            description: `This API sets the value of the \`${COMP}\`. You can use it to programmatically change the value.`,
-            signature: "setValue(value: string | string[] | undefined): void",
-            parameters: {
-                value: "The new value to set. Can be a single value or an array of values for multi-select.",
-            },
-        },
-        value: {
-            description: `This API retrieves the current value of the \`${COMP}\`. You can use it to get the value programmatically.`,
-            signature: "get value(): string | string[] | undefined",
-        },
-        reset: {
-            description: `This method resets the component to its initial value, or clears the selection if no initial value was provided.`,
-            signature: "reset(): void",
-        },
-    },
-    contextVars: {
-        $item: (0, metadata_helpers_1.d)("Represents the current option's data (label and value properties)"),
-        $itemContext: (0, metadata_helpers_1.d)("Provides utility methods like `removeItem()` for multi-select scenarios"),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(Select_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`backgroundColor-menu-${COMP}`]: "$color-surface-raised",
-        [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
-        [`borderRadius-menu-${COMP}`]: "$borderRadius",
-        [`borderWidth-menu-${COMP}`]: "1px",
-        [`borderColor-menu-${COMP}`]: "$borderColor",
-        [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
-        [`fontSize-${COMP}-badge`]: "$fontSize-sm",
-        [`paddingHorizontal-${COMP}-badge`]: "$space-2_5",
-        [`paddingVertical-${COMP}-badge`]: "$space-0_5",
-        [`borderRadius-${COMP}-badge`]: "$borderRadius",
-        [`paddingHorizontal-item-${COMP}`]: "$space-2",
-        [`paddingVertical-item-${COMP}`]: "$space-2",
-        [`paddingHorizontal-${COMP}`]: "$space-2",
-        [`paddingVertical-${COMP}`]: "$space-2",
-        [`opacity-text-item-${COMP}--disabled`]: "0.5",
-        [`opacity-${COMP}--disabled`]: "0.5",
-        [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
-        [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
-        [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
-        [`textColor-${COMP}-badge`]: "$const-color-surface-50",
-        [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
-        [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--hover",
-        [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
-        // Default borderColor-Input--disabled is too light so the disabled component is barely visible
-        [`borderColor-${COMP}--disabled`]: "initial",
-    },
-});
-exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, className, registerComponentApi, }) => {
-    const multiSelect = extractValue.asOptionalBoolean(node.props.multiSelect);
-    const searchable = extractValue.asOptionalBoolean(node.props.searchable);
-    const isControlled = node.props.value !== undefined;
-    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, className: className, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: isControlled ? undefined : updateState, searchable: searchable, initialValue: extractValue(node.props.initialValue), value: isControlled ? extractValue(node.props.value) : state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), required: extractValue.asOptionalBoolean(node.props.required), valueRenderer: node.props.valueTemplate
-            ? (item, removeItem) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: {
-                        $itemContext: { removeItem },
-                    }, node: node.props.valueTemplate, item: item, renderChild: renderChild }));
-            }
-            : undefined, optionRenderer: node.props.optionTemplate
-            ? (item, val, inTrigger) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, contextVars: {
-                        $selectedValue: val,
-                        $inTrigger: inTrigger,
-                    }, renderChild: renderChild }));
-            }
-            : undefined, children: renderChild(node.children) }));
-});