xmlui 0.7.21 → 0.7.23

package/dist/scripts/src/components/ColorPicker/ColorPickerNative.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
+const constants_1 = require("../../components-core/constants");
+const misc_1 = require("../../components-core/utils/misc");
+const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+exports.ColorPicker = (0, react_2.forwardRef)(({ style, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = true, value = "", autoFocus, tabIndex = -1, label, labelPosition, labelWidth, labelBreak, required, validationStatus = "none", initialValue, }, forwardedRef) => {
+    const inputRef = (0, react_2.useRef)(null);
+    const updateValue = (0, react_2.useCallback)((value) => {
+        updateState({ value });
+        onDidChange(value);
+    }, [onDidChange, updateState]);
+    const onInputChange = (0, react_2.useCallback)((event) => {
+        updateValue(event.target.value);
+    }, [updateValue]);
+    (0, react_1.useEffect)(() => {
+        updateState({ value: initialValue }, { initial: true });
+    }, [initialValue, updateState]);
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = (0, react_2.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_2.useCallback)(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    const focus = (0, react_2.useCallback)(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        updateValue(newValue);
+    });
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue,
+        });
+    }, [focus, registerComponentApi, setValue]);
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, ref: forwardedRef, children: (0, jsx_runtime_1.jsx)("input", { className: (0, classnames_1.default)(ColorPicker_module_scss_1.default.colorInput, {
+                [ColorPicker_module_scss_1.default.disabled]: !enabled,
+                [ColorPicker_module_scss_1.default.error]: validationStatus === "error",
+                [ColorPicker_module_scss_1.default.warning]: validationStatus === "warning",
+                [ColorPicker_module_scss_1.default.valid]: validationStatus === "valid",
+            }), disabled: !enabled, onFocus: handleOnFocus, onChange: onInputChange, autoFocus: autoFocus, onBlur: handleOnBlur, required: required, type: "color", inputMode: "text", ref: inputRef, value: value, tabIndex: tabIndex }) }));
+});
+exports.ColorPicker.displayName = "ColorPicker";

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.columnComponentRenderer = exports.ColumnMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
 const ColumnNative_1 = require("./ColumnNative");
 const COMP = "Column";
 exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/Column/ColumnNative.js

@@ -13,9 +13,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Column = Column;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TableContext_1 = require("./TableContext");
 const react_1 = require("react");
-const container_helpers_1 = require("@components/container-helpers");
+const container_helpers_1 = require("../../components/container-helpers");
+const TableContext_1 = require("./TableContext");
 function Column(_a) {
     var { nodeChildren, renderChild } = _a, columnMetadata = __rest(_a, ["nodeChildren", "renderChild"]);
     const id = (0, react_1.useId)();

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

@@ -4,109 +4,107 @@ exports.ComponentRegistry = void 0;
 exports.ComponentProvider = ComponentProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Stack_1 = require("@components/Stack/Stack");
-const SpaceFiller_1 = require("@components/SpaceFiller/SpaceFiller");
-const TextArea_1 = require("@components/TextArea/TextArea");
-const NavLink_1 = require("@components/NavLink/NavLink");
-const Link_1 = require("@components/Link/Link");
-const TreeComponent_1 = require("@components/Tree/TreeComponent");
-const Button_1 = require("@components/Button/Button");
-const Heading_1 = require("@components/Heading/Heading");
-const Text_1 = require("@components/Text/Text");
-const Fragment_1 = require("@components-core/Fragment");
-const Table_1 = require("@components/Table/Table");
-const StickyBox_1 = require("@components/StickyBox/StickyBox");
-const Badge_1 = require("@components/Badge/Badge");
-const Avatar_1 = require("@components/Avatar/Avatar");
-const ContentSeparator_1 = require("@components/ContentSeparator/ContentSeparator");
-const Card_1 = require("@components/Card/Card");
-const FlowLayout_1 = require("@components/FlowLayout/FlowLayout");
-const ModalDialog_1 = require("@components/ModalDialog/ModalDialog");
-const NoResult_1 = require("@components/NoResult/NoResult");
-const FileUploadDropZone_1 = require("@components/FileUploadDropZone/FileUploadDropZone");
-const Icon_1 = require("@components/Icon/Icon");
-const Items_1 = require("@components/Items/Items");
-const SelectionStore_1 = require("@components/SelectionStore/SelectionStore");
-const Image_1 = require("@components/Image/Image");
-const PageMetaTitle_1 = require("@components/PageMetaTitle/PageMetaTitle");
-const ProgressBar_1 = require("@components/ProgressBar/ProgressBar");
-const Splitter_1 = require("@components/Splitter/Splitter");
-const Queue_1 = require("@components/Queue/Queue");
-const CompoundComponent_1 = require("@components-core/CompoundComponent");
-const List_1 = require("@components/List/List");
-const PositionedContainer_1 = require("@components/PositionedContainer/PositionedContainer");
-const ChangeListener_1 = require("@components/ChangeListener/ChangeListener");
-const FormItem_1 = require("@components/FormItem/FormItem");
-const TextBox_1 = require("@components/TextBox/TextBox");
-const RealTimeAdapter_1 = require("@components/RealTimeAdapter/RealTimeAdapter");
-const Form_1 = require("@components/Form/Form");
-const EmojiSelector_1 = require("@components/EmojiSelector/EmojiSelector");
-const NumberBox_1 = require("@components/NumberBox/NumberBox");
-const HoverCard_1 = require("@components/HoverCard/HoverCard");
-const App_1 = require("@components/App/App");
-const NavPanel_1 = require("@components/NavPanel/NavPanel");
-const Pages_1 = require("@components/Pages/Pages");
-const Footer_1 = require("@components/Footer/Footer");
-const NavGroup_1 = require("@components/NavGroup/NavGroup");
-const Logo_1 = require("@components/Logo/Logo");
-const RadioGroup_1 = require("@components/RadioGroup/RadioGroup");
-const Slot_1 = require("@components-core/Slot");
-const FileInput_1 = require("@components/FileInput/FileInput");
-const Chart_1 = require("@components/Chart/Chart");
-const Spinner_1 = require("@components/Spinner/Spinner");
-const Markdown_1 = require("@components/Markdown/Markdown");
-const Select_1 = require("@components/Select/Select");
-const ThemeChanger_1 = require("@components/ThemeChanger/ThemeChanger");
-const FormSection_1 = require("@components/FormSection/FormSection");
-const Checkbox_1 = require("@components/Checkbox/Checkbox");
-const Switch_1 = require("@components/Switch/Switch");
-const AppHeader_1 = require("@components/AppHeader/AppHeader");
-const DropdownMenu_1 = require("@components/DropdownMenu/DropdownMenu");
-const Theme_1 = require("@components/Theme/Theme");
+const Stack_1 = require("./Stack/Stack");
+const SpaceFiller_1 = require("./SpaceFiller/SpaceFiller");
+const TextArea_1 = require("./TextArea/TextArea");
+const NavLink_1 = require("./NavLink/NavLink");
+const Link_1 = require("./Link/Link");
+const TreeComponent_1 = require("./Tree/TreeComponent");
+const Button_1 = require("./Button/Button");
+const Heading_1 = require("./Heading/Heading");
+const Text_1 = require("./Text/Text");
+const Fragment_1 = require("../components-core/Fragment");
+const Table_1 = require("./Table/Table");
+const StickyBox_1 = require("./StickyBox/StickyBox");
+const Badge_1 = require("./Badge/Badge");
+const Avatar_1 = require("./Avatar/Avatar");
+const ContentSeparator_1 = require("./ContentSeparator/ContentSeparator");
+const Card_1 = require("./Card/Card");
+const FlowLayout_1 = require("./FlowLayout/FlowLayout");
+const ModalDialog_1 = require("./ModalDialog/ModalDialog");
+const NoResult_1 = require("./NoResult/NoResult");
+const FileUploadDropZone_1 = require("./FileUploadDropZone/FileUploadDropZone");
+const Icon_1 = require("./Icon/Icon");
+const Items_1 = require("./Items/Items");
+const SelectionStore_1 = require("./SelectionStore/SelectionStore");
+const Image_1 = require("./Image/Image");
+const PageMetaTitle_1 = require("./PageMetaTitle/PageMetaTitle");
+const ProgressBar_1 = require("./ProgressBar/ProgressBar");
+const Splitter_1 = require("./Splitter/Splitter");
+const Queue_1 = require("./Queue/Queue");
+const CompoundComponent_1 = require("../components-core/CompoundComponent");
+const List_1 = require("./List/List");
+const PositionedContainer_1 = require("./PositionedContainer/PositionedContainer");
+const ChangeListener_1 = require("./ChangeListener/ChangeListener");
+const FormItem_1 = require("./FormItem/FormItem");
+const TextBox_1 = require("./TextBox/TextBox");
+const RealTimeAdapter_1 = require("./RealTimeAdapter/RealTimeAdapter");
+const Form_1 = require("./Form/Form");
+const EmojiSelector_1 = require("./EmojiSelector/EmojiSelector");
+const NumberBox_1 = require("./NumberBox/NumberBox");
+const HoverCard_1 = require("./HoverCard/HoverCard");
+const App_1 = require("./App/App");
+const NavPanel_1 = require("./NavPanel/NavPanel");
+const Pages_1 = require("./Pages/Pages");
+const Footer_1 = require("./Footer/Footer");
+const NavGroup_1 = require("./NavGroup/NavGroup");
+const Logo_1 = require("./Logo/Logo");
+const RadioGroup_1 = require("./RadioGroup/RadioGroup");
+const Slot_1 = require("../components-core/Slot");
+const FileInput_1 = require("./FileInput/FileInput");
+const Spinner_1 = require("./Spinner/Spinner");
+const Markdown_1 = require("./Markdown/Markdown");
+const Select_1 = require("./Select/Select");
+const ThemeChanger_1 = require("./ThemeChanger/ThemeChanger");
+const FormSection_1 = require("./FormSection/FormSection");
+const Checkbox_1 = require("./Checkbox/Checkbox");
+const Switch_1 = require("./Switch/Switch");
+const AppHeader_1 = require("./AppHeader/AppHeader");
+const DropdownMenu_1 = require("./DropdownMenu/DropdownMenu");
+const Theme_1 = require("./Theme/Theme");
 const lodash_es_1 = require("lodash-es");
-const ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
-const Column_1 = require("@components/Column/Column");
-const APICall_1 = require("@components-core/action/APICall");
-const FileDownloadAction_1 = require("@components-core/action/FileDownloadAction");
-const FileUploadAction_1 = require("@components-core/action/FileUploadAction");
-const NavigateAction_1 = require("@components-core/action/NavigateAction");
-const TimedAction_1 = require("@components-core/action/TimedAction");
-const ApiLoader_1 = require("@components-core/loader/ApiLoader");
-const ExternalDataLoader_1 = require("@components-core/loader/ExternalDataLoader");
-const MockLoaderRenderer_1 = require("@components-core/loader/MockLoaderRenderer");
-const DataLoader_1 = require("@components-core/loader/DataLoader");
-const DatePicker_1 = require("@components/DatePicker/DatePicker");
-const Redirect_1 = require("@components/Redirect/Redirect");
-const Tabs_1 = require("@components/Tabs/Tabs");
-const Bookmark_1 = require("@components/Bookmark/Bookmark");
-const AppState_1 = require("@components/AppState/AppState");
+const ComponentRegistryContext_1 = require("./ComponentRegistryContext");
+const Column_1 = require("./Column/Column");
+const APICall_1 = require("../components-core/action/APICall");
+const FileDownloadAction_1 = require("../components-core/action/FileDownloadAction");
+const FileUploadAction_1 = require("../components-core/action/FileUploadAction");
+const NavigateAction_1 = require("../components-core/action/NavigateAction");
+const TimedAction_1 = require("../components-core/action/TimedAction");
+const ApiLoader_1 = require("../components-core/loader/ApiLoader");
+const ExternalDataLoader_1 = require("../components-core/loader/ExternalDataLoader");
+const MockLoaderRenderer_1 = require("../components-core/loader/MockLoaderRenderer");
+const DataLoader_1 = require("../components-core/loader/DataLoader");
+const DatePicker_1 = require("./DatePicker/DatePicker");
+const Redirect_1 = require("./Redirect/Redirect");
+const Tabs_1 = require("./Tabs/Tabs");
+const Bookmark_1 = require("./Bookmark/Bookmark");
+const AppState_1 = require("./AppState/AppState");
 const PageHeader_1 = require("./PageHeader/PageHeader");
 const TrendLabel_1 = require("./TrendLabel/TrendLabel");
 const IconInfoCard_1 = require("./IconInfoCard/IconInfoCard");
 const TableHeader_1 = require("./TableHeader/TableHeader");
 const Toolbar_1 = require("./Toolbar/Toolbar");
 const ToolbarButton_1 = require("./ToolbarButton/ToolbarButton");
-const TableOfContents_1 = require("@components/TableOfContents/TableOfContents");
+const TableOfContents_1 = require("./TableOfContents/TableOfContents");
 const Accordion_1 = require("./Accordion/Accordion");
 const Alert_1 = require("./Alert/Alert");
 const OffCanvas_1 = require("./OffCanvas/OffCanvas");
-const XmluiCodeHighlighter_1 = require("@components-core/XmluiCodeHighlighter");
-const TabItem_1 = require("@components/Tabs/TabItem");
-const Range_1 = require("./Range/Range");
-const AccordionItem_1 = require("@components/Accordion/AccordionItem");
+const XmluiCodeHighlighter_1 = require("../components-core/XmluiCodeHighlighter");
+const TabItem_1 = require("./Tabs/TabItem");
+const AccordionItem_1 = require("./Accordion/AccordionItem");
 const Slider_1 = require("./Slider/Slider");
 const ButtonGroup_1 = require("./ButtonGroup/ButtonGroup");
-const Carousel_1 = require("@components/Carousel/Carousel");
-const CarouselItem_1 = require("@components/Carousel/CarouselItem");
-const renderers_1 = require("@components-core/renderers");
-const Breakout_1 = require("@components/Breakout/Breakout");
-const ToneChangerButton_1 = require("@components/ThemeChanger/ToneChangerButton");
-const APICall_2 = require("@components/APICall/APICall");
-const Option_1 = require("@components/Option/Option");
-const AutoComplete_1 = require("@components/AutoComplete/AutoComplete");
+const Carousel_1 = require("./Carousel/Carousel");
+const CarouselItem_1 = require("./Carousel/CarouselItem");
+const renderers_1 = require("../components-core/renderers");
+const Breakout_1 = require("./Breakout/Breakout");
+const ToneChangerButton_1 = require("./ThemeChanger/ToneChangerButton");
+const APICall_2 = require("./APICall/APICall");
+const Option_1 = require("./Option/Option");
+const AutoComplete_1 = require("./AutoComplete/AutoComplete");
 const Backdrop_1 = require("./Backdrop/Backdrop");
-const RawHtml_1 = require("./RawHtml/RawHtml");
 const HtmlTags_1 = require("./HtmlTags/HtmlTags");
+const ColorPicker_1 = require("./ColorPicker/ColorPicker");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -179,7 +177,7 @@ class ComponentRegistry {
         this.registerComponentRenderer = ({ type, renderer, metadata }, ...namespaces) => {
             const component = { renderer, descriptor: metadata };
             namespaces.forEach((ns) => {
-                this.pool.set((ns ? (ns + ".") : "") + type, component);
+                this.pool.set((ns ? ns + "." : "") + type, component);
             });
             if (metadata === null || metadata === void 0 ? void 0 : metadata.themeVars) {
                 Object.keys(metadata.themeVars).forEach((key) => this.themeVars.add(key));
@@ -297,6 +295,9 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_Card !== "false") {
             this.registerCoreComponent(Card_1.cardComponentRenderer);
         }
+        if (process.env.VITE_USED_COMPONENTS_ColorPicker !== "false") {
+            this.registerCoreComponent(ColorPicker_1.colorPickerComponentRenderer);
+        }
         if (process.env.VITE_USED_COMPONENTS_FlowLayout !== "false") {
             this.registerCoreComponent(FlowLayout_1.flowLayoutComponentRenderer);
         }
@@ -389,16 +390,109 @@ class ComponentRegistry {
         this.registerCoreComponent(Accordion_1.accordionComponentRenderer);
         this.registerCoreComponent(Alert_1.alertComponentRenderer);
         this.registerCoreComponent(OffCanvas_1.offCanvasComponentRenderer);
-        this.registerCoreComponent(Range_1.rangeComponentRenderer);
         this.registerCoreComponent(Slider_1.sliderComponentRenderer);
         this.registerCoreComponent(ButtonGroup_1.buttonGroupComponentRenderer);
         this.registerCoreComponent(Backdrop_1.backdropComponentRenderer);
-        this.registerCoreComponent(RawHtml_1.rawHtmlComponentRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlATagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlAbbrTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlAddressTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlAreaTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlArticleTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlAsideTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlAudioTagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlBTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlBdiTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlBdoTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlBlockquoteTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlBrTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlButtonTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlCanvasTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlCaptionTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlCiteTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlCodeTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlColTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlColgroupTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlDataTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlDatalistTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlDdTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlDelTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlDetailsTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlDfnTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlDialogTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlDivTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlDlTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlDtTagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlEMTagRenderer);
-        if (process.env.VITE_USED_COMPONENTS_Chart !== "false") {
-            this.registerCoreComponent(Chart_1.chartRenderer);
-        }
+        this.registerCoreComponent(HtmlTags_1.htmlEmbedTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlFieldsetTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlFigcaptionTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlFigureTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlFooterTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlFormTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlH1TagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlH2TagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlH3TagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlH4TagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlH5TagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlH6TagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlHeaderTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlHrTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlITagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlIframeTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlImgTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlInputTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlInsTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlKbdTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlLabelTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlLegendTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlLiTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlMainTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlMapTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlMarkTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlMenuTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlMeterTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlNavTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlObjectTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlOlTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlOptgroupTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlOptionTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlOutputTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlPTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlParamTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlPictureTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlPreTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlProgressTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlQTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlRpTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlRtTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlRubyTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlSTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlSampTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlSectionTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlSelectTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlSmallTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlSourceTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlSpanTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlStrongTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlSubTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlSummaryTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlSupTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlTableTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlTbodyTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlTdTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlTemplateTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlTextareaTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlTfootTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlThTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlTheadTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlTimeTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlTrTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlTrackTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlUTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlUlTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlVarTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlVideoTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlWbrTagRenderer);
         this.registerActionFn(APICall_1.apiAction);
         this.registerActionFn(FileDownloadAction_1.downloadAction);
         this.registerActionFn(FileUploadAction_1.uploadAction);
@@ -473,14 +567,14 @@ class ComponentRegistry {
             this.actionFns.get(componentName) !== undefined);
     }
     // --- Registers a compound component using its definition and metadata
-    registerCompoundComponentRenderer({ compoundComponentDef, metadata, }, ...namespaces) {
+    registerCompoundComponentRenderer({ compoundComponentDef, metadata }, ...namespaces) {
         const component = {
             type: compoundComponentDef.name,
             renderer: (rendererContext) => {
                 return ((0, jsx_runtime_1.jsx)(CompoundComponent_1.CompoundComponent, Object.assign({ api: compoundComponentDef.api, scriptCollected: compoundComponentDef.scriptCollected, compound: compoundComponentDef.component }, rendererContext)));
             },
             isCompoundComponent: true,
-            metadata
+            metadata,
         };
         this.registerComponentRenderer(component, ...namespaces);
     }

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.contentSeparatorComponentRenderer = exports.ContentSeparatorMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContentSeparator_module_scss_1 = __importDefault(require("./ContentSeparator.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const abstractions_1 = require("@components/abstractions");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const abstractions_1 = require("../abstractions");
 const ContentSeparatorNative_1 = require("./ContentSeparatorNative");
 const COMP = "ContentSeparator";
 exports.ContentSeparatorMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/ContentSeparator/ContentSeparatorNative.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentSeparator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
 const ContentSeparator_module_scss_1 = __importDefault(require("./ContentSeparator.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
 const ContentSeparator = ({ orientation = "horizontal", size, style, }) => {
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(ContentSeparator_module_scss_1.default.separator, {
             [ContentSeparator_module_scss_1.default.horizontal]: orientation === "horizontal",

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

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.datePickerComponentRenderer = exports.DatePickerMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("@components-core/renderers");
 const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
-const themeVars_1 = require("@components-core/theming/themeVars");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../../components/metadata-helpers");
 const DatePickerNative_1 = require("./DatePickerNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "DatePicker";
 exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",

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

@@ -39,16 +39,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("react");
 const react_day_picker_1 = require("react-day-picker");
 const date_fns_1 = require("date-fns");
 const ReactDropdownMenu = __importStar(require("@radix-ui/react-dropdown-menu"));
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const constants_1 = require("@components-core/constants");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
-const misc_1 = require("@components-core/utils/misc");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const classnames_1 = __importDefault(require("classnames"));
+const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const constants_1 = require("../../components-core/constants");
+const misc_1 = require("../../components-core/utils/misc");
 var WeekDays;
 (function (WeekDays) {
     WeekDays[WeekDays["Sunday"] = 0] = "Sunday";
@@ -93,11 +92,11 @@ const parseDate = (dateString) => {
 exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialValue, value, mode = "single", enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = "MM/dd/yyyy", // Default dateFormat
 showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabledDates = [], style, registerComponentApi, }, forwardedRef) {
     const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
-    const [isButtonFocused, setIsButtonFocused] = (0, react_2.useState)(false);
-    const [isMenuFocused, setIsMenuFocused] = (0, react_2.useState)(false);
+    const [isButtonFocused, setIsButtonFocused] = (0, react_1.useState)(false);
+    const [isMenuFocused, setIsMenuFocused] = (0, react_1.useState)(false);
     const referenceElement = (0, react_1.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(referenceElement, forwardedRef) : referenceElement;
-    const selected = (0, react_2.useMemo)(() => {
+    const selected = (0, react_1.useMemo)(() => {
         if (mode === "single" && typeof value === "string") {
             return parseISODate(value) || parseDate(value);
         }
@@ -109,21 +108,21 @@ showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabl
         }
         return undefined;
     }, [value, mode]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (!dateFormats.includes(dateFormat)) {
             throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${dateFormats.join(", ")}`);
         }
     }, [dateFormat]);
-    const startDate = (0, react_2.useMemo)(() => {
+    const startDate = (0, react_1.useMemo)(() => {
         return fromDate ? (0, date_fns_1.parse)(fromDate, dateFormat, new Date()) : undefined;
     }, [fromDate, dateFormat]);
-    const endDate = (0, react_2.useMemo)(() => {
+    const endDate = (0, react_1.useMemo)(() => {
         return toDate ? (0, date_fns_1.parse)(toDate, dateFormat, new Date()) : undefined;
     }, [toDate, dateFormat]);
-    const disabled = (0, react_2.useMemo)(() => {
+    const disabled = (0, react_1.useMemo)(() => {
         return disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.map((date) => (0, date_fns_1.parse)(date, dateFormat, new Date()));
     }, [disabledDates, dateFormat]);
-    const [open, setOpen] = (0, react_2.useState)(false);
+    const [open, setOpen] = (0, react_1.useState)(false);
     const { root } = (0, ThemeContext_1.useTheme)();
     const handleOnButtonFocus = () => {
         setIsButtonFocused(true);
@@ -138,7 +137,7 @@ showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabl
         setIsMenuFocused(false);
     };
     // Register component API for external interactions
-    const focus = (0, react_2.useCallback)(() => {
+    const focus = (0, react_1.useCallback)(() => {
         var _a;
         (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current]);
@@ -146,13 +145,13 @@ showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabl
         const parsedDate = parseDate(newValue);
         handleSelect(parsedDate);
     });
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (!isButtonFocused && !isMenuFocused) {
             onBlur === null || onBlur === void 0 ? void 0 : onBlur();
         }
@@ -160,10 +159,10 @@ showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabl
             onFocus === null || onFocus === void 0 ? void 0 : onFocus();
         }
     }, [isButtonFocused, isMenuFocused, onFocus, onBlur]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         updateState({ value: initialValue }, { initial: true });
     }, [initialValue, updateState]);
-    const handleSelect = (0, react_2.useCallback)((dateOrRange) => {
+    const handleSelect = (0, react_1.useCallback)((dateOrRange) => {
         if (!dateOrRange) {
             updateState({ value: undefined });
             onDidChange("");

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.menuSeparatorRenderer = exports.MenuSeparatorMd = exports.subMenuItemRenderer = exports.SubMenuItemMd = exports.menuItemRenderer = exports.MenuItemMd = exports.dropdownMenuComponentRenderer = exports.DropdownMenuMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DropdownMenu_module_scss_1 = __importDefault(require("./DropdownMenu.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const abstractions_1 = require("@components/abstractions");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const IconNative_1 = require("@components/Icon/IconNative");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const abstractions_1 = require("../abstractions");
+const metadata_helpers_1 = require("../metadata-helpers");
+const IconNative_1 = require("../Icon/IconNative");
 const DropdownMenuNative_1 = require("./DropdownMenuNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const DDMCOMP = "DropdownMenu";
 exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
     description: `This component represents a dropdown menu with a trigger. When the user clicks the trigger, ` +

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

@@ -53,12 +53,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
 const ReactDropdownMenu = __importStar(require("@radix-ui/react-dropdown-menu"));
+const classnames_1 = __importDefault(require("classnames"));
 const DropdownMenu_module_scss_1 = __importDefault(require("./DropdownMenu.module.scss"));
-const ButtonNative_1 = require("@components/Button/ButtonNative");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const IconNative_1 = require("@components/Icon/IconNative");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const constants_1 = require("@components-core/constants");
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const constants_1 = require("../../components-core/constants");
+const ButtonNative_1 = require("../Button/ButtonNative");
+const IconNative_1 = require("../Icon/IconNative");
 exports.DropdownMenu = (0, react_1.forwardRef)(function DropdownMenu({ triggerTemplate, children, label, registerComponentApi, style, onWillOpen, alignment = "start", disabled = false, triggerButtonVariant = "ghost", triggerButtonThemeColor = "primary", triggerButtonIcon = "chevrondown", triggerButtonIconPosition = "end", }, ref) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const [open, setOpen] = (0, react_2.useState)(false);