xmlui 0.4.0

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

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemWithLabel = ItemWithLabel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
+const Spinner_1 = require("@components/Spinner/Spinner");
+const react_slot_1 = require("@radix-ui/react-slot");
+const numberRegex = /^[0-9]+$/;
+function ItemWithLabel({ id, labelPosition = "top", style, label, labelBreak = true, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, }) {
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
+    if (label === undefined) {
+        return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { style: style, id: inputId, onFocus: onFocus, onBlur: onBlur, children: children }));
+        // return cloneElement(children as ReactElement, {
+        //   ...mergeProps((children as ReactElement).props, {
+        //     style,
+        //     id: inputId,
+        //     onFocus: onFocus,
+        //     onBlur: onBlur
+        //   }),
+        // });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(FormItem_module_scss_1.default.container, {
+            [FormItem_module_scss_1.default.top]: labelPosition === "top",
+            [FormItem_module_scss_1.default.bottom]: labelPosition === "bottom",
+            [FormItem_module_scss_1.default.left]: labelPosition === "left",
+            [FormItem_module_scss_1.default.right]: labelPosition === "right",
+            [FormItem_module_scss_1.default.shrinkToLabel]: shrinkToLabel,
+        }), style: style, onFocus: onFocus, onBlur: onBlur, children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: inputId, style: Object.assign(Object.assign({}, labelStyle), { width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth }), className: (0, classnames_1.default)(FormItem_module_scss_1.default.inputLabel, {
+                    [FormItem_module_scss_1.default.required]: required,
+                    [FormItem_module_scss_1.default.disabled]: !enabled,
+                    [FormItem_module_scss_1.default.labelBreak]: labelBreak,
+                }), children: [label, " ", required && (0, jsx_runtime_1.jsx)("span", { className: FormItem_module_scss_1.default.requiredMark, children: "*" }), validationInProgress && ((0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" } }))] })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: labelPosition === "right" ? 'auto' : '100%' }, children: [react_1.Children.only((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { id: inputId, children: children })), validationResult] })] }));
+}

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

@@ -0,0 +1,346 @@
+"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 });
+exports.useValidation = useValidation;
+exports.useValidationDisplay = useValidationDisplay;
+exports.parseSeverity = parseSeverity;
+exports.groupInvalidValidationResultsBySeverity = groupInvalidValidationResultsBySeverity;
+const lodash_es_1 = require("lodash-es");
+const FormContext_1 = require("@components/Form/FormContext");
+const react_1 = require("react");
+const misc_1 = require("@components-core/utils/misc");
+const constants_1 = require("@components-core/constants");
+const formActions_1 = require("@components/Form/formActions");
+function isInputEmpty(value) {
+    if (value === undefined || value === null || value === "")
+        return true;
+    if (typeof value === "string")
+        return value.trim().length === 0;
+    return (0, lodash_es_1.isEmpty)(value);
+}
+function isMinLengthValid(value = "", boundary) {
+    if (typeof value === "string") {
+        return value.length >= boundary;
+    }
+    console.warn("minLength can only be used on strings");
+    return true;
+}
+function isMaxLengthValid(value = "", boundary) {
+    if (typeof value === "string") {
+        return value.length <= boundary;
+    }
+    console.warn("maxLength can only be used on strings");
+    return true;
+}
+function isMinValueValid(value = "", minValue) {
+    if (typeof value !== "string" && !(0, lodash_es_1.isNumber)(value)) {
+        console.warn("Range can only be used on strings and numbers");
+    }
+    return Number(value) >= minValue;
+}
+function isMaxValueValid(value = "", maxValue) {
+    if (typeof value !== "string" && !(0, lodash_es_1.isNumber)(value)) {
+        console.warn("Range can only be used on strings and numbers");
+    }
+    return Number(value) <= maxValue;
+}
+function isRegexValid(value = "", regex) {
+    if (typeof value === "string") {
+        return new RegExp(regex).test(value);
+    }
+    console.warn("Regex can only be used on strings");
+    return true;
+}
+class FormItemValidator {
+    constructor(validations, onValidate, value) {
+        this.validations = validations;
+        this.onValidate = onValidate;
+        this.value = value;
+        this.preValidate = () => {
+            const validationResults = [
+                this.validateRequired(),
+                this.validateLength(),
+                this.validateRange(),
+                this.validatePattern(),
+                this.validateRegex()
+            ].filter(result => result !== undefined);
+            return {
+                isValid: validationResults.find(result => !result.isValid) === undefined,
+                validatedValue: this.value,
+                partial: this.onValidate !== undefined,
+                validations: validationResults
+            };
+        };
+        this.validate = () => __awaiter(this, void 0, void 0, function* () {
+            const preValidateResult = this.preValidate();
+            const constValidationResult = (yield this.validateCustom()) || [];
+            preValidateResult.validations.push(...constValidationResult.map(res => (Object.assign(Object.assign({}, res), { async: true }))));
+            return {
+                isValid: preValidateResult.validations.find(result => !result.isValid) === undefined,
+                validatedValue: this.value,
+                partial: false,
+                validations: preValidateResult.validations
+            };
+        });
+    }
+    validateRequired() {
+        const { required, requiredInvalidMessage } = this.validations;
+        if (!required) {
+            return undefined;
+        }
+        return {
+            isValid: !isInputEmpty(this.value),
+            invalidMessage: requiredInvalidMessage || "This field is required",
+            severity: "error"
+        };
+    }
+    validateLength() {
+        const { minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity = "error" } = this.validations;
+        if (minLength === undefined && maxLength === undefined) {
+            return undefined;
+        }
+        if (minLength !== undefined && maxLength === undefined) {
+            return {
+                isValid: isMinLengthValid(this.value, minLength),
+                invalidMessage: lengthInvalidMessage || `Input should be at least ${minLength} ${pluralize(minLength, "character")}`,
+                severity: lengthInvalidSeverity
+            };
+        }
+        if (minLength === undefined && maxLength !== undefined) {
+            return {
+                isValid: isMaxLengthValid(this.value, maxLength),
+                invalidMessage: lengthInvalidMessage || `Input should be up to ${maxLength} ${pluralize(maxLength, "character")}`,
+                severity: lengthInvalidSeverity
+            };
+        }
+        return {
+            isValid: isMinLengthValid(this.value, minLength) && isMaxLengthValid(this.value, maxLength),
+            invalidMessage: lengthInvalidMessage || `Input length should be between ${minLength} and ${maxLength}`,
+            severity: lengthInvalidSeverity
+        };
+    }
+    validateRange() {
+        const { minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity = "error" } = this.validations;
+        if (minValue === undefined && maxValue === undefined) {
+            return undefined;
+        }
+        if (minValue !== undefined && maxValue === undefined) {
+            return {
+                isValid: isMinValueValid(this.value, minValue),
+                invalidMessage: rangeInvalidMessage || `Input should be bigger than ${minValue}`,
+                severity: rangeInvalidSeverity
+            };
+        }
+        if (minValue === undefined && maxValue !== undefined) {
+            return {
+                isValid: isMaxValueValid(this.value, maxValue),
+                invalidMessage: rangeInvalidMessage || `Input should be smaller than ${maxValue}`,
+                severity: rangeInvalidSeverity
+            };
+        }
+        return {
+            isValid: isMinValueValid(this.value, minValue) && isMaxValueValid(this.value, maxValue),
+            invalidMessage: rangeInvalidMessage || `Input should be between ${minValue} and ${maxValue}`,
+            severity: rangeInvalidSeverity
+        };
+    }
+    validatePattern() {
+        const { pattern, patternInvalidMessage, patternInvalidSeverity = "error" } = this.validations;
+        if (!pattern) {
+            return undefined;
+        }
+        switch (pattern.toLowerCase()) {
+            case "email":
+                return {
+                    isValid: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(this.value),
+                    invalidMessage: patternInvalidMessage || "Not a valid email address",
+                    severity: patternInvalidSeverity
+                };
+            case "phone":
+                return {
+                    isValid: /^[a-zA-Z0-9#*)(+.\-_&']+$/g.test(this.value),
+                    invalidMessage: patternInvalidMessage || "Not a valid phone number",
+                    severity: patternInvalidSeverity
+                };
+            case "url":
+                let url;
+                try {
+                    url = new URL(this.value);
+                }
+                catch (e) { }
+                if (!url || (url.protocol && !["http:", "https:"].includes(url.protocol))) {
+                    return {
+                        isValid: false,
+                        invalidMessage: "Not a valid URL",
+                        severity: patternInvalidSeverity
+                    };
+                }
+                return {
+                    isValid: true,
+                    severity: "valid"
+                };
+            default: {
+                console.warn("Unknown pattern provided");
+                return {
+                    isValid: true,
+                    severity: "valid"
+                };
+            }
+        }
+    }
+    validateRegex() {
+        const { regex, regexInvalidMessage, regexInvalidSeverity = "error" } = this.validations;
+        if (regex === undefined) {
+            return undefined;
+        }
+        return {
+            isValid: isRegexValid(this.value, regex),
+            invalidMessage: regexInvalidMessage || "Input is not in the correct format",
+            severity: regexInvalidSeverity
+        };
+    }
+    validateCustom() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.onValidate) {
+                return undefined;
+            }
+            const validationFnResult = yield this.onValidate(this.value);
+            if (typeof validationFnResult === "boolean") {
+                return [
+                    {
+                        isValid: validationFnResult,
+                        invalidMessage: "Invalid input",
+                        severity: "error"
+                    }
+                ];
+            }
+            if (!(0, lodash_es_1.isArray)(validationFnResult)) {
+                return [validationFnResult];
+            }
+            return validationFnResult;
+        });
+    }
+}
+function asyncValidate(validations, onValidate, deferredValue) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const validator = new FormItemValidator(validations, onValidate, deferredValue);
+        // console.log("calling async validate with ", deferredValue);
+        return yield validator.validate();
+    });
+}
+function useValidation(validations, onValidate, value, dispatch, bindTo, throttleWaitInMs = 0) {
+    const deferredValue = (0, react_1.useDeferredValue)(value);
+    const throttledAsyncValidate = (0, react_1.useMemo)(() => {
+        if (throttleWaitInMs !== 0) {
+            return (0, misc_1.asyncThrottle)(asyncValidate, throttleWaitInMs, {
+                trailing: true,
+                leading: true
+            });
+        }
+        return asyncValidate;
+    }, [throttleWaitInMs]);
+    (0, react_1.useEffect)(function runAllValidations() {
+        const validator = new FormItemValidator(validations, onValidate, deferredValue);
+        let ignore = false;
+        const partialResult = validator.preValidate();
+        if (!ignore) {
+            dispatch((0, formActions_1.fieldValidated)(bindTo, partialResult));
+            if (partialResult.partial) {
+                (() => __awaiter(this, void 0, void 0, function* () {
+                    const result = yield throttledAsyncValidate(validations, onValidate, deferredValue);
+                    if (!ignore) {
+                        // console.log(`async validation result for ${bindTo}`, result);
+                        dispatch((0, formActions_1.fieldValidated)(bindTo, result));
+                    }
+                }))();
+            }
+        }
+        return () => {
+            ignore = true;
+        };
+    }, [bindTo, deferredValue, dispatch, onValidate, throttledAsyncValidate, validations]);
+}
+function useValidationDisplay(bindTo, value, validationResult, validationMode = "errorLate") {
+    const interactionFlags = (0, FormContext_1.useFormContextPart)(value => value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
+    const forceShowValidationResult = interactionFlags.forceShowValidationResult;
+    const focused = interactionFlags.focused;
+    const isValidLostFocus = interactionFlags.isValidLostFocus;
+    const isValidOnFocus = interactionFlags.isValidOnFocus;
+    const invalidToValid = interactionFlags.invalidToValid;
+    const validationInProgress = !validationResult || validationResult.validatedValue !== value;
+    const isDirty = interactionFlags.isDirty;
+    const isValid = (validationResult === null || validationResult === void 0 ? void 0 : validationResult.isValid) === true;
+    let highestValidationSeverity = "none";
+    for (const val of (validationResult === null || validationResult === void 0 ? void 0 : validationResult.validations) || []) {
+        if (val.isValid) {
+            continue;
+        }
+        if (highestValidationSeverity !== "error" && val.severity === "warning") {
+            highestValidationSeverity = "warning";
+        }
+        if (val.severity === "error") {
+            highestValidationSeverity = "error";
+            break;
+        }
+    }
+    let isHelperTextShown = false;
+    switch (validationMode) {
+        case "errorLate":
+            isHelperTextShown = isDirty && (focused ? !invalidToValid && !isValidOnFocus : !isValidLostFocus);
+            break;
+        case "onChanged":
+            isHelperTextShown = isDirty;
+            break;
+        case "onLostFocus":
+            isHelperTextShown = isDirty && ((!focused && !isValid) || (!isValidLostFocus && !isValid));
+    }
+    isHelperTextShown = isHelperTextShown || forceShowValidationResult;
+    const [prevStableShown, setPrevStableShown] = (0, react_1.useState)(isHelperTextShown);
+    if (prevStableShown !== isHelperTextShown && !validationInProgress) {
+        setPrevStableShown(isHelperTextShown);
+    }
+    if (validationInProgress) {
+        isHelperTextShown = prevStableShown;
+    }
+    return {
+        isHelperTextShown,
+        validationStatus: isHelperTextShown ? highestValidationSeverity : "none"
+    };
+}
+function parseSeverity(severity) {
+    if (severity === undefined) {
+        return undefined;
+    }
+    if (severity === "error" || severity === "warning" || severity === "valid" || severity === "none") {
+        return severity;
+    }
+    return "none";
+}
+function groupInvalidValidationResultsBySeverity(validationResults) {
+    const ret = {
+        error: [],
+        warning: [],
+        valid: [],
+        none: []
+    };
+    Object.entries(validationResults).forEach(([field, validationResult]) => {
+        validationResult.validations.forEach(singleValidationResult => {
+            if (!singleValidationResult.isValid) {
+                ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
+                ret[singleValidationResult.severity].push(singleValidationResult);
+            }
+        });
+    });
+    return ret;
+}
+function pluralize(count, word) {
+    return count === 1 ? word : word + "s";
+}

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formSectionRenderer = void 0;
+exports.formSectionRenderer = {
+    name: "FormSection",
+    component: {
+        type: "VStack",
+        props: {
+            paddingBottom: "{$props.paddingBottom ?? '1rem'}",
+        },
+        children: [
+            {
+                type: "Heading",
+                when: "{!!$props.heading}",
+                props: {
+                    marginBottom: "0.5rem",
+                    level: "{$props.headingLevel ?? 'h3'}",
+                    fontWeight: "{$props.headingWeight ?? 'bold'}",
+                    value: "{$props.heading}",
+                }
+            },
+            {
+                type: "Text",
+                when: "{!!$props.info}",
+                props: {
+                    fontSize: "{$props.infoFontSize ?? '0.8rem'}",
+                    paddingBottom: "1.25rem",
+                    value: "{$props.info}",
+                }
+            },
+            {
+                type: "FlowLayout",
+                props: {
+                    columnGap: "{$props.columnGap ?? '3rem'}",
+                    rowGap: "{$props.rowGap ?? '1rem'}",
+                },
+                children: [
+                    {
+                        type: "ChildrenSlot",
+                    },
+                ],
+            },
+        ],
+    }
+};

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

@@ -0,0 +1,206 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.h6ComponentRenderer = exports.h5ComponentRenderer = exports.h4ComponentRenderer = exports.h3ComponentRenderer = exports.h2ComponentRenderer = exports.h1ComponentRenderer = exports.headingComponentRenderer = exports.Heading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Heading_module_scss_1 = __importDefault(require("./Heading.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const renderers_1 = require("@components-core/renderers");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const css_utils_1 = require("@components-core/utils/css-utils");
+// =====================================================================================================================
+// React Heading, H1,..., H6 component implementation
+const VALUE_DESC = "The text to display in the component - can be empty";
+const LINE_CLAMP_DESC = "Limits the number of lines the component can use";
+const PRESERVE_DESC = "Allow preserving linebreak information?";
+const NO_ELLIPSIS_DESC = "Indicates if ellipsis should be hidden from the end of the text";
+const LEVEL_DESC = (level) => `Represents a heading level ${level} text`;
+const HeadingLevelKeys = ["h1", "h2", "h3", "h4", "h5", "h6"];
+const Heading = ({ uid, level = "h1", children, sx, layout, title, maxLines = 0, preserveLinebreaks, ellipses = true, className, }) => {
+    const Element = level === null || level === void 0 ? void 0 : level.toLowerCase();
+    return ((0, jsx_runtime_1.jsx)(Element, { id: uid, title: title, style: Object.assign(Object.assign(Object.assign({}, sx), layout), (0, css_utils_1.getMaxLinesStyle)(maxLines)), className: (0, classnames_1.default)(Heading_module_scss_1.default.heading, Heading_module_scss_1.default[Element], className || "", {
+            [Heading_module_scss_1.default.truncateOverflow]: maxLines > 0,
+            [Heading_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks,
+            [Heading_module_scss_1.default.noEllipsis]: !ellipses,
+        }), children: children }));
+};
+exports.Heading = Heading;
+const headingMetadata = {
+    displayName: "Heading",
+    description: "Represents a heading text",
+    props: {
+        value: (0, descriptorHelper_1.desc)(VALUE_DESC),
+        level: (0, descriptorHelper_1.desc)("The heading level as described in HTML, indicates the heading size and importance"),
+        maxLines: (0, descriptorHelper_1.desc)(LINE_CLAMP_DESC),
+        ellipses: (0, descriptorHelper_1.desc)(NO_ELLIPSIS_DESC),
+        preserveLinebreaks: (0, descriptorHelper_1.desc)(PRESERVE_DESC),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "font-family-Heading": "$font-family",
+        "color-text-Heading": "inherit",
+        "font-weight-Heading": "$font-weight-bold",
+        "letter-spacing-Heading": "0",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+const h1Metadata = {
+    displayName: "H1",
+    description: LEVEL_DESC(1),
+    props: {
+        value: (0, descriptorHelper_1.desc)(VALUE_DESC),
+        maxLines: (0, descriptorHelper_1.desc)(LINE_CLAMP_DESC),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        // letter-spacing
+        "font-size-H1": "$font-size-large",
+        "line-height-H1": "$line-height-loose",
+        "margin-top-H1": "$space-3",
+        "margin-bottom-H1": "$space-6",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+const h2Metadata = {
+    displayName: "H2",
+    description: LEVEL_DESC(2),
+    props: {
+        value: (0, descriptorHelper_1.desc)(VALUE_DESC),
+        maxLines: (0, descriptorHelper_1.desc)(LINE_CLAMP_DESC),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "font-size-H2": "$font-size-medium",
+        "line-height-H2": "$line-height-relaxed",
+        "margin-top-H2": "$space-2",
+        "margin-bottom-H2": "$space-4",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+const h3Metadata = {
+    displayName: "H3",
+    description: LEVEL_DESC(3),
+    props: {
+        value: (0, descriptorHelper_1.desc)(VALUE_DESC),
+        maxLines: (0, descriptorHelper_1.desc)(LINE_CLAMP_DESC),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "font-size-H3": "$font-size-normal",
+        "line-height-H3": "$line-height-normal",
+        "margin-top-H3": "$space-1_5",
+        "margin-bottom-H3": "$space-3",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+const h4Metadata = {
+    displayName: "H4",
+    description: LEVEL_DESC(4),
+    props: {
+        value: (0, descriptorHelper_1.desc)(VALUE_DESC),
+        maxLines: (0, descriptorHelper_1.desc)(LINE_CLAMP_DESC),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "font-size-H4": "$font-size-small",
+        "line-height-H4": "$line-height-snug",
+        "margin-top-H4": "$space-1",
+        "margin-bottom-H4": "$space-2",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+const h5Metadata = {
+    displayName: "H5",
+    description: LEVEL_DESC(5),
+    props: {
+        value: (0, descriptorHelper_1.desc)(VALUE_DESC),
+        maxLines: (0, descriptorHelper_1.desc)(LINE_CLAMP_DESC),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "font-size-H5": "$font-size-smaller",
+        "line-height-H5": "$line-height-tight",
+        "margin-top-H5": "$space-0_5",
+        "margin-bottom-H5": "$space-1",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+const h6Metadata = {
+    displayName: "H6",
+    description: LEVEL_DESC(6),
+    props: {
+        value: (0, descriptorHelper_1.desc)(VALUE_DESC),
+        maxLines: (0, descriptorHelper_1.desc)(LINE_CLAMP_DESC),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "font-size-H6": "$font-size-tiny",
+        "line-height-H6": "$line-height-none",
+        "margin-top-H6": "$space-0",
+        "margin-bottom-H6": "$space-0",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+function renderHeading({ node, extractValue, layoutCss, level, renderChild }) {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(exports.Heading, { uid: node.uid, level: ((_a = extractValue.asOptionalString(level)) !== null && _a !== void 0 ? _a : "h1"), maxLines: extractValue.asOptionalNumber(node.props.maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(node.props.preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(node.props.ellipses, true), layout: layoutCss, children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) }));
+}
+exports.headingComponentRenderer = (0, renderers_1.createComponentRenderer)("Heading", ({ node, extractValue, layoutCss, layoutNonCss, renderChild }) => {
+    return renderHeading({ node, extractValue, layoutCss, layoutNonCss, level: node.props.level, renderChild });
+}, headingMetadata);
+exports.h1ComponentRenderer = (0, renderers_1.createComponentRenderer)("H1", ({ node, extractValue, layoutCss, layoutNonCss, renderChild }) => {
+    return renderHeading({ node, extractValue, layoutCss, layoutNonCss, level: "h1", renderChild });
+}, h1Metadata);
+exports.h2ComponentRenderer = (0, renderers_1.createComponentRenderer)("H2", ({ node, extractValue, layoutCss, layoutNonCss, renderChild }) => {
+    return renderHeading({ node, extractValue, layoutCss, layoutNonCss, level: "h2", renderChild });
+}, h2Metadata);
+exports.h3ComponentRenderer = (0, renderers_1.createComponentRenderer)("H3", ({ node, extractValue, layoutCss, layoutNonCss, renderChild }) => {
+    return renderHeading({ node, extractValue, layoutCss, layoutNonCss, level: "h3", renderChild });
+}, h3Metadata);
+exports.h4ComponentRenderer = (0, renderers_1.createComponentRenderer)("H4", ({ node, extractValue, layoutCss, layoutNonCss, renderChild }) => {
+    return renderHeading({ node, extractValue, layoutCss, layoutNonCss, level: "h4", renderChild });
+}, h4Metadata);
+exports.h5ComponentRenderer = (0, renderers_1.createComponentRenderer)("H5", ({ node, extractValue, layoutCss, layoutNonCss, renderChild }) => {
+    return renderHeading({ node, extractValue, layoutCss, layoutNonCss, level: "h5", renderChild });
+}, h5Metadata);
+exports.h6ComponentRenderer = (0, renderers_1.createComponentRenderer)("H6", ({ node, extractValue, layoutCss, layoutNonCss, renderChild }) => {
+    return renderHeading({ node, extractValue, layoutCss, layoutNonCss, level: "h6", renderChild });
+}, h6Metadata);