xmlui 0.11.4 → 0.11.6

package/dist/scripts/src/components/Button/Button-style.spec.js

@@ -1,274 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-const abstractions_1 = require("../../components/abstractions");
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
-// --- variant & themeColor
-// background color
-const EXPECTED_BACKGROUND_COLOR = "rgb(255, 0, 0)";
-abstractions_1.buttonThemeValues.forEach((themeColor) => {
-    (0, fixtures_1.test)(`"solid" background color: "${themeColor}"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button variant="solid" themeColor="${themeColor}" />`, {
-            testThemeVars: {
-                [`backgroundColor-Button-${themeColor}-solid`]: EXPECTED_BACKGROUND_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveCSS("background-color", EXPECTED_BACKGROUND_COLOR);
-    }));
-});
-// content/label color
-const EXPECTED_CONTENT_COLOR = "rgb(255, 255, 255)";
-abstractions_1.buttonVariantValues.forEach((variant) => {
-    abstractions_1.buttonThemeValues.forEach((themeColor) => {
-        (0, fixtures_1.test)(`"${variant}" content color: "${themeColor}"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-            yield initTestBed(`<Button variant="${variant}" themeColor="${themeColor}" />`, {
-                testThemeVars: {
-                    [`textColor-Button-${themeColor}-${variant}`]: EXPECTED_CONTENT_COLOR,
-                },
-            });
-            yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveCSS("color", EXPECTED_CONTENT_COLOR);
-        }));
-    });
-});
-// border
-const EXPECTED_BORDER_COLOR = "rgb(255, 0, 0)";
-const EXPECTED_BORDER_WIDTH = "5px";
-const EXPECTED_BORDER_STYLE = "dotted";
-const EXPECTED_BORDER_RADIUS = "10px";
-abstractions_1.buttonVariantValues
-    .filter((v) => v !== "ghost")
-    .forEach((variant) => {
-    abstractions_1.buttonThemeValues.forEach((themeColor) => {
-        (0, fixtures_1.test)(`border: "${themeColor}" "${variant}" variant`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-            yield initTestBed(`<Button variant="${variant}" themeColor="${themeColor}" />`, {
-                testThemeVars: {
-                    [`borderColor-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_COLOR,
-                    [`borderWidth-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_WIDTH,
-                    [`borderRadius-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_RADIUS,
-                    [`borderStyle-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_STYLE,
-                },
-            });
-            const driver = yield createButtonDriver();
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", EXPECTED_BORDER_COLOR);
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-width", EXPECTED_BORDER_WIDTH);
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", EXPECTED_BORDER_RADIUS);
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-style", EXPECTED_BORDER_STYLE);
-        }));
-    });
-});
-abstractions_1.buttonThemeValues.forEach((themeColor) => {
-    (0, fixtures_1.test)(`border: "${themeColor}" "ghost" variant`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button variant="ghost" themeColor="${themeColor}" />`, {
-            testThemeVars: {
-                [`borderWidth-Button-${themeColor}-ghost`]: EXPECTED_BORDER_WIDTH,
-                [`borderRadius-Button-${themeColor}-ghost`]: EXPECTED_BORDER_RADIUS,
-            },
-        });
-        const driver = yield createButtonDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-width", EXPECTED_BORDER_WIDTH);
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", EXPECTED_BORDER_RADIUS);
-    }));
-});
-// fonts
-const EXPECTED_FONT_FAMILY = "Arial, sans-serif";
-const EXPECTED_FONT_SIZE = "20px";
-const EXPECTED_FONT_WEIGHT = "200";
-abstractions_1.buttonVariantValues.forEach((variant) => {
-    abstractions_1.buttonThemeValues.forEach((themeColor) => {
-        (0, fixtures_1.test)(`font: "${themeColor}" "${variant}" variant`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-            yield initTestBed(`<Button variant="${variant}" themeColor="${themeColor}" />`, {
-                testThemeVars: {
-                    [`fontFamily-Button-${themeColor}-${variant}`]: EXPECTED_FONT_FAMILY,
-                    [`fontSize-Button-${themeColor}-${variant}`]: EXPECTED_FONT_SIZE,
-                    [`fontWeight-Button-${themeColor}-${variant}`]: EXPECTED_FONT_WEIGHT,
-                },
-            });
-            const driver = yield createButtonDriver();
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-family", EXPECTED_FONT_FAMILY);
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-size", EXPECTED_FONT_SIZE);
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-weight", EXPECTED_FONT_WEIGHT);
-        }));
-    });
-});
-const variantsWithBorder = abstractions_1.buttonVariantValues.filter((v) => v === "solid" || v === "outlined");
-variantsWithBorder.forEach((variant) => {
-    abstractions_1.buttonThemeValues.forEach((themeColor) => {
-        const CODE = `<Button variant="${variant}" themeColor="${themeColor}" />`;
-        (0, fixtures_1.test)(`border ${variant} ${themeColor}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-            const EXPECTED_COLOR = "rgb(255, 0, 0)";
-            const EXPECTED_WIDTH = "5px";
-            const EXPECTED_STYLE = "dotted";
-            yield initTestBed(CODE, {
-                testThemeVars: {
-                    [`border-Button-${themeColor}-${variant}`]: `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-                },
-            });
-            const component = (yield createButtonDriver()).component;
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
-        }));
-        (0, fixtures_1.test)(`bordercolor ${variant} ${themeColor}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-            const EXPECTED_COLOR = "rgb(0, 128, 0)";
-            const EXPECTED_WIDTH = "5px";
-            const EXPECTED_STYLE = "dotted";
-            yield initTestBed(CODE, {
-                testThemeVars: {
-                    [`borderColor-Button-${themeColor}-${variant}`]: EXPECTED_COLOR,
-                },
-            });
-            const component = (yield createButtonDriver()).component;
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
-        }));
-        (0, fixtures_1.test)(`border, border-color ${variant} ${themeColor}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-            const EXPECTED_COLOR = "rgb(255, 0, 0)";
-            const EXPECTED_WIDTH = "5px";
-            const EXPECTED_STYLE = "dotted";
-            const UPDATED = "rgb(0, 128, 0)";
-            yield initTestBed(CODE, {
-                testThemeVars: {
-                    [`borderColor-Button-${themeColor}-${variant}`]: UPDATED,
-                    [`border-Button-${themeColor}-${variant}`]: `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-                },
-            });
-            const component = (yield createButtonDriver()).component;
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
-        }));
-        (0, fixtures_1.test)(`border-style ${variant} ${themeColor}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-            const EXPECTED_COLOR = "rgb(0, 128, 0)";
-            const EXPECTED_WIDTH = "5px";
-            const EXPECTED_STYLE = "dotted";
-            yield initTestBed(CODE, {
-                testThemeVars: {
-                    [`borderStyle-Button-${themeColor}-${variant}`]: EXPECTED_STYLE,
-                },
-            });
-            const component = (yield createButtonDriver()).component;
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
-        }));
-        (0, fixtures_1.test)(`border, border-style ${variant} ${themeColor}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-            const EXPECTED_COLOR = "rgb(255, 0, 0)";
-            const EXPECTED_WIDTH = "5px";
-            const EXPECTED_STYLE = "dotted";
-            const UPDATED = "double";
-            yield initTestBed(CODE, {
-                testThemeVars: {
-                    [`borderStyle-Button-${themeColor}-${variant}`]: UPDATED,
-                    [`border-Button-${themeColor}-${variant}`]: `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-                },
-            });
-            const component = (yield createButtonDriver()).component;
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
-        }));
-        (0, fixtures_1.test)(`border-thickness ${variant} ${themeColor}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-            const EXPECTED_COLOR = "rgb(0, 128, 0)";
-            const EXPECTED_WIDTH = "8px";
-            const EXPECTED_STYLE = "dotted";
-            yield initTestBed(CODE, {
-                testThemeVars: {
-                    [`borderWidth-Button-${themeColor}-${variant}`]: EXPECTED_WIDTH,
-                },
-            });
-            const component = (yield createButtonDriver()).component;
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
-            yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
-        }));
-        (0, fixtures_1.test)(`border, border-thickness ${variant} ${themeColor}`, component_test_helpers_1.SKIP_REASON.TEST_NOT_WORKING("borderWidth is disregarded because the regular border overrides it... somehow"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-            const EXPECTED_COLOR = "rgb(255, 0, 0)";
-            const EXPECTED_WIDTH = "5px";
-            const EXPECTED_STYLE = "dotted";
-            const UPDATED = "12px";
-            yield initTestBed(CODE, {
-                testThemeVars: {
-                    [`borderWidth-Button-${themeColor}-${variant}`]: UPDATED,
-                    [`border-Button-${themeColor}-${variant}`]: `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-                },
-            });
-            const component = (yield createButtonDriver()).component;
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
-            yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
-        }));
-    });
-});

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

@@ -1,171 +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.buttonComponentRenderer = exports.ButtonMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
-const abstractions_1 = require("../abstractions");
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const metadata_helpers_1 = require("../../components/metadata-helpers");
-const IconNative_1 = require("../Icon/IconNative");
-const ButtonNative_1 = require("./ButtonNative");
-const nodeUtils_1 = require("../../components-core/rendering/nodeUtils");
-const COMP = "Button";
-exports.ButtonMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`Button` is the primary interactive component for triggering actions like " +
-        "form submissions, navigation, opening modals, and API calls. It supports " +
-        "multiple visual styles and sizes to match different UI contexts and importance levels.",
-    props: {
-        autoFocus: {
-            description: "Indicates if the button should receive focus when the page loads.",
-            isRequired: false,
-            type: "boolean",
-            defaultValue: ButtonNative_1.defaultProps.autoFocus,
-        },
-        variant: {
-            description: "The button variant determines the level of emphasis the button should possess.",
-            isRequired: false,
-            type: "string",
-            availableValues: abstractions_1.buttonVariantMd,
-            defaultValue: ButtonNative_1.defaultProps.variant,
-        },
-        themeColor: {
-            description: "Sets the button color scheme defined in the application theme.",
-            isRequired: false,
-            type: "string",
-            availableValues: abstractions_1.buttonThemeMd,
-            defaultValue: ButtonNative_1.defaultProps.themeColor,
-        },
-        size: {
-            description: "Sets the size of the button.",
-            isRequired: false,
-            type: "string",
-            availableValues: abstractions_1.sizeMd,
-            defaultValue: ButtonNative_1.defaultProps.size,
-        },
-        label: {
-            description: `This property is an optional string to set a label for the ${COMP}. If no label is ` +
-                `specified and an icon is set, the ${COMP} will modify its styling to look like a ` +
-                `small icon button. When the ${COMP} has nested children, it will display them and ` +
-                `ignore the value of the \`label\` prop.`,
-            type: "string",
-        },
-        type: {
-            description: `This optional string describes how the ${COMP} appears in an HTML context. You ` +
-                `rarely need to set this property explicitly.`,
-            availableValues: abstractions_1.buttonTypesMd,
-            valueType: "string",
-            defaultValue: ButtonNative_1.defaultProps.type,
-        },
-        enabled: {
-            description: `The value of this property indicates whether the button accepts actions (\`true\`) ` +
-                `or does not react to them (\`false\`).`,
-            type: "boolean",
-            defaultValue: true,
-        },
-        orientation: (0, metadata_helpers_1.dOrientation)(ButtonNative_1.defaultProps.orientation),
-        icon: {
-            description: `This string value denotes an icon name. The framework will render an icon if XMLUI ` +
-                `recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP} ` +
-                `displays only that icon.`,
-            type: "string",
-        },
-        iconPosition: {
-            description: `This optional string determines the location of the icon in the ${COMP}.`,
-            availableValues: abstractions_1.iconPositionMd,
-            type: "string",
-            defaultValue: ButtonNative_1.defaultProps.iconPosition,
-        },
-        contentPosition: {
-            description: `This optional value determines how the label and icon (or nested children) should be placed` +
-                `inside the ${COMP} component.`,
-            availableValues: abstractions_1.alignmentOptionMd,
-            type: "string",
-            defaultValue: ButtonNative_1.defaultProps.contentPosition,
-        },
-        contextualLabel: {
-            description: `This optional value is used to provide an accessible name for the ${COMP} in the context of its usage.`,
-            type: "string",
-        },
-    },
-    events: {
-        click: (0, metadata_helpers_1.dClick)(COMP),
-        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
-        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(Button_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        // --- Default styles for supporting "variant" behavior
-        [`padding-${COMP}`]: "$space-2 $space-4",
-        [`gap-${COMP}`]: "$space-2",
-        [`borderColor-${COMP}`]: "transparent",
-        [`backgroundColor-${COMP}`]: "transparent",
-        [`transition-${COMP}`]: "color 0.2s, background 0.2s",
-        [`width-${COMP}`]: "fit-content",
-        [`height-${COMP}`]: "fit-content",
-        [`borderRadius-${COMP}`]: "$borderRadius",
-        [`fontSize-${COMP}`]: "$fontSize-sm",
-        [`fontWeight-${COMP}`]: "$fontWeight-medium",
-        [`fontStyle-${COMP}`]: "$fontStyle-normal",
-        [`backgroundColor-${COMP}-primary`]: "$color-primary-500",
-        [`backgroundColor-${COMP}-attention`]: "$backgroundColor-attention",
-        [`borderColor-${COMP}-attention`]: "$color-attention",
-        [`backgroundColor-${COMP}--disabled`]: "$backgroundColor--disabled",
-        [`borderColor-${COMP}--disabled`]: "$borderColor--disabled",
-        [`borderStyle-${COMP}`]: "solid",
-        [`textColor-${COMP}--disabled`]: "$textColor--disabled",
-        [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
-        [`borderWidth-${COMP}`]: "1px",
-        [`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",
-        [`textColor-${COMP}`]: "$color-surface-950",
-        [`textColor-${COMP}-solid`]: "$const-color-surface-50",
-        [`borderColor-${COMP}-primary`]: "$color-primary-500",
-        [`backgroundColor-${COMP}-primary--hover`]: "$color-primary-400",
-        [`backgroundColor-${COMP}-primary--active`]: "$color-primary-500",
-        [`backgroundColor-${COMP}-primary-outlined--hover`]: "$color-primary-50",
-        [`backgroundColor-${COMP}-primary-outlined--active`]: "$color-primary-100",
-        [`borderColor-${COMP}-primary-outlined`]: "$color-primary-600",
-        [`borderColor-${COMP}-primary-outlined--hover`]: "$color-primary-500",
-        [`textColor-${COMP}-primary-outlined`]: "$color-primary-900",
-        [`textColor-${COMP}-primary-outlined--hover`]: "$color-primary-950",
-        [`textColor-${COMP}-primary-outlined--active`]: "$color-primary-900",
-        [`backgroundColor-${COMP}-primary-ghost--hover`]: "$color-primary-50",
-        [`backgroundColor-${COMP}-primary-ghost--active`]: "$color-primary-100",
-        [`borderColor-${COMP}-secondary`]: "$color-secondary-100",
-        [`backgroundColor-${COMP}-secondary`]: "$color-secondary-500",
-        [`backgroundColor-${COMP}-secondary--hover`]: "$color-secondary-400",
-        [`backgroundColor-${COMP}-secondary--active`]: "$color-secondary-500",
-        [`backgroundColor-${COMP}-secondary-outlined--hover`]: "$color-secondary-50",
-        [`backgroundColor-${COMP}-secondary-outlined--active`]: "$color-secondary-100",
-        [`backgroundColor-${COMP}-secondary-ghost--hover`]: "$color-secondary-100",
-        [`backgroundColor-${COMP}-secondary-ghost--active`]: "$color-secondary-100",
-        [`backgroundColor-${COMP}-attention--hover`]: "$color-danger-400",
-        [`backgroundColor-${COMP}-attention--active`]: "$color-danger-500",
-        [`backgroundColor-${COMP}-attention-outlined--hover`]: "$color-danger-50",
-        [`backgroundColor-${COMP}-attention-outlined--active`]: "$color-danger-100",
-        [`backgroundColor-${COMP}-attention-ghost--hover`]: "$color-danger-50",
-        [`backgroundColor-${COMP}-attention-ghost--active`]: "$color-danger-100",
-    },
-});
-exports.buttonComponentRenderer = (0, renderers_1.createComponentRenderer)("Button", exports.ButtonMd, ({ node, extractValue, renderChild, lookupEventHandler, className }) => {
-    const iconName = extractValue.asString(node.props.icon);
-    const label = extractValue.asDisplayText(node.props.label);
-    const renderedChildren = (0, nodeUtils_1.hasRenderableChildren)(node.children)
-        ? renderChild(node.children, { type: "Stack", orientation: "horizontal" })
-        : label;
-    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: extractValue.asOptionalString(node.props.type), variant: extractValue.asOptionalString(node.props.variant), themeColor: extractValue.asOptionalString(node.props.themeColor), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), size: extractValue.asOptionalString(node.props.size), icon: iconName && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, "aria-hidden": true }), iconPosition: extractValue.asOptionalString(node.props.iconPosition), orientation: extractValue.asOptionalString(node.props.orientation), contentPosition: extractValue.asOptionalString(node.props.contentPosition), disabled: !extractValue.asOptionalBoolean(node.props.enabled, true), onClick: lookupEventHandler("click"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), className: className, contextualLabel: extractValue.asOptionalString(node.props.contextualLabel), children: renderedChildren }));
-});