xmlui 0.10.7 → 0.10.10

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.7",
+    "version": "0.10.10",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/Accordion/AccordionItemNative.js

@@ -86,10 +86,10 @@ exports.AccordionItemComponent = (0, react_1.forwardRef)(function AccordionItemC
             unRegister(triggerId);
         };
     }, [triggerId, unRegister]);
-    return ((0, jsx_runtime_1.jsxs)(RAccordion.Item, { value: itemId, className: (0, classnames_1.default)(Accordion_module_scss_1.default.item, className), ref: forwardedRef, style: style, children: [(0, jsx_runtime_1.jsx)(RAccordion.Header, { className: Accordion_module_scss_1.default.header, children: (0, jsx_runtime_1.jsxs)(RAccordion.Trigger, Object.assign({}, rest, { id: `trigger_${itemId}`, className: (0, classnames_1.default)(Accordion_module_scss_1.default.trigger, {
+    return ((0, jsx_runtime_1.jsxs)(RAccordion.Item, { id: itemId, value: itemId, className: (0, classnames_1.default)(Accordion_module_scss_1.default.item, className), ref: forwardedRef, style: style, children: [(0, jsx_runtime_1.jsx)(RAccordion.Header, { className: Accordion_module_scss_1.default.header, children: (0, jsx_runtime_1.jsxs)(RAccordion.Trigger, Object.assign({}, rest, { id: triggerId, className: (0, classnames_1.default)(Accordion_module_scss_1.default.trigger, {
                         [Accordion_module_scss_1.default.triggerStart]: triggerPosition === "start",
                     }), children: [headerRenderer(header), !hideIcon && ((0, jsx_runtime_1.jsx)("span", { style: {
                                 transform: expanded && !expandedIcon ? `rotate(${rotateExpanded})` : "rotate(0deg)",
                                 transition: "transform 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: !expanded ? collapsedIcon : expandedIcon || collapsedIcon, className: Accordion_module_scss_1.default.chevron }) }))] })) }), (0, jsx_runtime_1.jsx)(RAccordion.Content, { className: Accordion_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: Accordion_module_scss_1.default.content, children: content }) })] }, itemId));
+                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: !expanded ? collapsedIcon : expandedIcon || collapsedIcon, className: Accordion_module_scss_1.default.chevron, "aria-hidden": "true" }) }))] })) }), (0, jsx_runtime_1.jsx)(RAccordion.Content, { className: Accordion_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: Accordion_module_scss_1.default.content, children: content }) })] }, itemId));
 });

package/dist/scripts/src/components/App/AppNative.js

@@ -25,7 +25,6 @@ const lodash_es_1 = require("lodash-es");
 const classnames_1 = __importDefault(require("classnames"));
 const App_module_scss_1 = __importDefault(require("./App.module.scss"));
 const AppContext_1 = require("../../components-core/AppContext");
-const ScrollContext_1 = require("../../components-core/ScrollContext");
 const hooks_1 = require("../../components-core/utils/hooks");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const css_utils_1 = require("../../components-core/utils/css-utils");
@@ -229,13 +228,13 @@ function App(_a) {
     });
     switch (safeLayout) {
         case "vertical":
-            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] })));
+            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] })));
             break;
         case "vertical-sticky":
-            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical, App_module_scss_1.default.sticky), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] })));
+            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical, App_module_scss_1.default.sticky), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] })));
             break;
         case "vertical-full-header":
-            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
+            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
             break;
         case "condensed":
         case "condensed-sticky":
@@ -243,14 +242,14 @@ function App(_a) {
                     [App_module_scss_1.default.sticky]: safeLayout === "condensed-sticky",
                 }), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)("app-layout-condensed", App_module_scss_1.default.headerWrapper, {
                             [App_module_scss_1.default.sticky]: safeLayout === "condensed-sticky",
-                        }), ref: headerRefCallback, children: [!hasRegisteredHeader && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { renderChild: renderChild })), header] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
+                        }), ref: headerRefCallback, children: [!hasRegisteredHeader && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { renderChild: renderChild })), header] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
             break;
         case "horizontal": {
-            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), ref: headerRefCallback, children: [header, navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
+            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), ref: headerRefCallback, children: [header, navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
             break;
         }
         case "horizontal-sticky":
-            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, App_module_scss_1.default.sticky), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: [header, navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
+            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, App_module_scss_1.default.sticky), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: [header, navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
             break;
         default:
             throw new Error("layout type not supported: " + safeLayout);

package/dist/scripts/src/components/Breakout/BreakoutNative.js

@@ -18,7 +18,7 @@ exports.Breakout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Breakout_module_scss_1 = __importDefault(require("./Breakout.module.scss"));
 const Breakout = (_a) => {
-    var { children } = _a, rest = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: Breakout_module_scss_1.default.breakout, children: children })));
+    var { children, style } = _a, rest = __rest(_a, ["children", "style"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { style: style, className: Breakout_module_scss_1.default.breakout, children: children })));
 };
 exports.Breakout = Breakout;

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

@@ -52,6 +52,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
+const abstractions_1 = require("../abstractions");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const VisuallyHidden_1 = require("../VisuallyHidden");
 exports.defaultProps = {
@@ -77,6 +78,9 @@ exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
         }
     }, [autoFocus]);
     const iconToLeft = iconPosition === "start";
+    if (!(0, abstractions_1.isSizeType)(size)) {
+        size = exports.defaultProps.size;
+    }
     return ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { id: id, type: type, ref: composedRef, className: (0, classnames_1.default)(Button_module_scss_1.default.button, {
             [Button_module_scss_1.default.buttonHorizontal]: orientation === "horizontal",
             [Button_module_scss_1.default.buttonVertical]: orientation === "vertical",

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

@@ -13,7 +13,7 @@ const CarouselNative_1 = require("./CarouselNative");
 const abstractions_1 = require("../abstractions");
 const COMP = "Carousel";
 exports.CarouselMd = (0, metadata_helpers_1.createMetadata)({
-    status: "in progress",
+    status: "stable",
     description: `This component displays a slideshow by cycling through elements (images, text, or ` +
         `custom slides) like a carousel.`,
     props: {
@@ -26,57 +26,53 @@ exports.CarouselMd = (0, metadata_helpers_1.createMetadata)({
             defaultValue: CarouselNative_1.defaultProps.orientation,
         },
         indicators: {
-            description: "This property indicates whether the carousel displays the indicators.",
+            description: "Display the individual slides as buttons (`true`) or not (`false`).",
             valueType: "boolean",
             defaultValue: CarouselNative_1.defaultProps.indicators,
         },
         controls: {
-            description: "This property indicates whether the carousel displays the controls.",
+            description: "Display the previous/next controls (`true`) or not (`false`).",
             valueType: "boolean",
             defaultValue: CarouselNative_1.defaultProps.controls,
         },
         autoplay: {
-            description: "This property indicates whether the carousel automatically scrolls.",
+            description: "Start scrolling the carousel automatically (`true`) or not (`false`).",
             valueType: "boolean",
             defaultValue: CarouselNative_1.defaultProps.autoplay,
         },
         loop: {
-            description: "This property indicates whether the carousel loops.",
+            description: "Sets whether the carousel should loop back to the start/end when it reaches the last/first slide.",
             valueType: "boolean",
             defaultValue: CarouselNative_1.defaultProps.loop,
         },
         startIndex: {
-            description: "This property indicates the index of the first slide to display.",
+            description: "The index of the first slide to display.",
             valueType: "number",
             defaultValue: CarouselNative_1.defaultProps.startIndex,
         },
         transitionDuration: {
-            description: "This property indicates the duration of the transition between slides.",
+            description: "The duration of the transition between slides.",
             valueType: "number",
             defaultValue: CarouselNative_1.defaultProps.transitionDuration,
         },
         autoplayInterval: {
-            description: "This property specifies the interval between autoplay transitions.",
+            description: "Specifies the interval between autoplay transitions.",
             valueType: "number",
             defaultValue: CarouselNative_1.defaultProps.autoplayInterval,
         },
         stopAutoplayOnInteraction: {
-            description: "This property indicates whether autoplay stops on interaction.",
+            description: "This property indicates whether autoplay stops on user interaction.",
             valueType: "boolean",
             defaultValue: CarouselNative_1.defaultProps.stopAutoplayOnInteraction,
         },
         prevIcon: {
-            description: "This property specifies the icon to display for the previous control.",
+            description: "The icon to display for the previous control.",
             valueType: "string",
         },
         nextIcon: {
-            description: "This property specifies the icon to display for the next control.",
+            description: "The icon to display for the next control.",
             valueType: "string",
         },
-        keyboard: {
-            description: "This property indicates whether the carousel responds to keyboard events.",
-            valueType: "boolean",
-        },
     },
     events: {
         displayDidChange: (0, metadata_helpers_1.dDidChange)(COMP),
@@ -107,9 +103,6 @@ exports.CarouselMd = (0, metadata_helpers_1.createMetadata)({
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Carousel_module_scss_1.default.themeVars),
-    themeVarDescriptions: {
-        [`width-indicator-${COMP}`]: "Sets the width of the indicator.",
-    },
     defaultThemeVars: {
         [`backgroundColor-control-${COMP}`]: "$color-primary",
         [`textColor-control-${COMP}`]: "$textColor",
@@ -135,6 +128,6 @@ exports.CarouselMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.carouselComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CarouselMd, ({ node, renderChild, className, extractValue, lookupEventHandler, registerComponentApi }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    return ((0, jsx_runtime_1.jsx)(CarouselNative_1.CarouselComponent, { className: className, stopAutoplayOnInteraction: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.stopAutoplayOnInteraction), autoplayInterval: extractValue.asOptionalNumber((_b = node.props) === null || _b === void 0 ? void 0 : _b.autoplayInterval), transitionDuration: extractValue.asOptionalNumber((_c = node.props) === null || _c === void 0 ? void 0 : _c.transitionDuration), indicators: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.indicators), controls: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.controls), orientation: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.orientation), onDisplayDidChange: lookupEventHandler("displayDidChange"), autoplay: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.autoplay), registerComponentApi: registerComponentApi, loop: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.loop), startIndex: extractValue.asOptionalNumber((_j = node.props) === null || _j === void 0 ? void 0 : _j.startIndex), prevIcon: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.prevIcon), nextIcon: extractValue((_l = node.props) === null || _l === void 0 ? void 0 : _l.nextIcon), keyboard: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.keyboard), children: renderChild(node.children) }));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    return ((0, jsx_runtime_1.jsx)(CarouselNative_1.CarouselComponent, { className: className, stopAutoplayOnInteraction: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.stopAutoplayOnInteraction), autoplayInterval: extractValue.asOptionalNumber((_b = node.props) === null || _b === void 0 ? void 0 : _b.autoplayInterval), transitionDuration: extractValue.asOptionalNumber((_c = node.props) === null || _c === void 0 ? void 0 : _c.transitionDuration), indicators: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.indicators), controls: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.controls), orientation: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.orientation), onDisplayDidChange: lookupEventHandler("displayDidChange"), autoplay: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.autoplay), registerComponentApi: registerComponentApi, loop: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.loop), startIndex: extractValue.asOptionalNumber((_j = node.props) === null || _j === void 0 ? void 0 : _j.startIndex), prevIcon: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.prevIcon), nextIcon: extractValue((_l = node.props) === null || _l === void 0 ? void 0 : _l.nextIcon), children: renderChild(node.children) }));
 });

package/dist/scripts/src/components/Carousel/CarouselContext.js

@@ -10,6 +10,7 @@ const immer_1 = __importDefault(require("immer"));
 exports.CarouselContext = (0, react_1.createContext)({
     register: (column) => { },
     unRegister: (id) => { },
+    itemProps: {},
 });
 const useCarousel = () => {
     const context = (0, react_1.useContext)(exports.CarouselContext);
@@ -19,7 +20,7 @@ const useCarousel = () => {
     return context;
 };
 exports.useCarousel = useCarousel;
-function useCarouselContextValue() {
+function useCarouselContextValue(isTabbed) {
     const [carouselItems, setCarouselItems] = (0, react_1.useState)([]);
     const carouselContextValue = (0, react_1.useMemo)(() => {
         return {
@@ -39,8 +40,16 @@ function useCarouselContextValue() {
                     return draft.filter((col) => col.id !== id);
                 }));
             },
+            itemProps: isTabbed
+                ? {
+                    role: "group tabpanel",
+                }
+                : {
+                    role: "group",
+                    "aria-roledescription": "slide",
+                },
         };
-    }, [setCarouselItems]);
+    }, [setCarouselItems, isTabbed]);
     return {
         carouselItems,
         carouselContextValue,

package/dist/scripts/src/components/Carousel/CarouselItemNative.js

@@ -24,7 +24,7 @@ const CarouselContext_1 = require("./CarouselContext");
 exports.CarouselItemComponent = (0, react_2.forwardRef)(function CarouselItemComponent(_a, forwardedRef) {
     var { children, style } = _a, rest = __rest(_a, ["children", "style"]);
     const id = (0, react_2.useId)();
-    const { register, unRegister } = (0, CarouselContext_1.useCarousel)();
+    const { register, unRegister, itemProps } = (0, CarouselContext_1.useCarousel)();
     (0, react_2.useEffect)(() => {
         register({
             id,
@@ -35,6 +35,6 @@ exports.CarouselItemComponent = (0, react_2.forwardRef)(function CarouselItemCom
             unRegister(id);
         };
     }, [id, unRegister]);
-    return ((0, react_1.createElement)("div", Object.assign({}, rest, { key: id, role: "group", "aria-roledescription": "slide", className: (0, classnames_1.default)(Carousel_module_scss_1.default.carouselItem) }),
+    return ((0, react_1.createElement)("div", Object.assign({}, rest, { key: id }, itemProps, { className: (0, classnames_1.default)(Carousel_module_scss_1.default.carouselItem) }),
         (0, jsx_runtime_1.jsx)("div", { className: Carousel_module_scss_1.default.innerWrapper, ref: forwardedRef, style: style, children: children })));
 });

package/dist/scripts/src/components/Carousel/CarouselNative.js

@@ -76,7 +76,7 @@ exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent(_
     const [activeSlide, setActiveSlide] = (0, react_1.useState)(0);
     const [plugins, setPlugins] = (0, react_1.useState)([]);
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
-    const { carouselContextValue, carouselItems } = (0, CarouselContext_1.useCarouselContextValue)();
+    const { carouselContextValue, carouselItems } = (0, CarouselContext_1.useCarouselContextValue)(indicators);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(referenceElement, forwardedRef) : referenceElement;
     const [carouselRef, api] = (0, embla_carousel_react_1.default)({
         axis: orientation === "horizontal" ? "x" : "y",
@@ -189,7 +189,7 @@ exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent(_
     return ((0, jsx_runtime_1.jsx)(CarouselContext_1.CarouselContext.Provider, { value: carouselContextValue, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { style: style, ref: ref, className: (0, classnames_1.default)(Carousel_module_scss_1.default.carousel, className), role: "region", tabIndex: -1, "aria-roledescription": "carousel", children: [(0, jsx_runtime_1.jsx)("div", { ref: carouselRef, className: Carousel_module_scss_1.default.carouselContentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Carousel_module_scss_1.default.carouselContent, {
                             [Carousel_module_scss_1.default.horizontal]: orientation === "horizontal",
                             [Carousel_module_scss_1.default.vertical]: orientation === "vertical",
-                        }), children: children }) }), controls && ((0, jsx_runtime_1.jsxs)("div", { className: Carousel_module_scss_1.default.controls, children: [autoplay && ((0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, onClick: toggleAutoplay, children: isPlaying ? (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "pause" }) : (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "play" }) })), (0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, disabled: !canScrollPrev, onClick: scrollPrev, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: prevIconName }) }), (0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, onClick: scrollNext, disabled: !canScrollNext, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: nextIconName }) })] })), indicators && ((0, jsx_runtime_1.jsx)("div", { className: Carousel_module_scss_1.default.indicators, children: carouselItems.map((_, index) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => scrollTo(index), className: (0, classnames_1.default)(Carousel_module_scss_1.default.indicator, {
+                        }), children: children }) }), controls && ((0, jsx_runtime_1.jsxs)("div", { className: Carousel_module_scss_1.default.controls, children: [autoplay && ((0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, onClick: toggleAutoplay, "aria-label": isPlaying ? "Pause Autoplay" : "Start Autoplay", children: isPlaying ? (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "pause" }) : (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "play" }) })), (0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, disabled: !canScrollPrev, onClick: scrollPrev, "aria-label": "Previous Slide", children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: prevIconName }) }), (0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, onClick: scrollNext, disabled: !canScrollNext, "aria-label": "Next Slide", children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: nextIconName }) })] })), indicators && ((0, jsx_runtime_1.jsx)("div", { className: Carousel_module_scss_1.default.indicators, role: "tablist", "aria-label": "Select slide", children: carouselItems.map((_, index) => ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "tab", "aria-label": `Go to slide ${index + 1}`, "aria-controls": "carousel", tabIndex: index === activeSlide ? 0 : -1, onClick: () => scrollTo(index), className: (0, classnames_1.default)(Carousel_module_scss_1.default.indicator, {
                             [Carousel_module_scss_1.default.active]: index === activeSlide,
                         }), "aria-current": index === activeSlide }, index))) }))] })) }));
 });

package/dist/scripts/src/components/Charts/BarChart/BarChart.js

@@ -18,7 +18,7 @@ exports.BarChartMd = (0, metadata_helpers_1.createMetadata)({
             description: `This property is used to provide the component with data to display.` +
                 `The data needs to be an array of objects.`,
         },
-        dataKeys: {
+        xKeys: {
             description: "This property specifies the keys in the data objects that should be used for rendering the bars." +
                 `E.g. 'id' or 'key'.`,
             valueType: "string",
@@ -29,7 +29,7 @@ exports.BarChartMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "boolean",
             defaultValue: BarChartNative_1.defaultProps.stacked,
         },
-        layout: {
+        orientation: {
             description: `This property determines the orientation of the bar chart. The \`vertical\` variant ` +
                 `specifies the horizontal axis as the primary and lays out the bars from left to right. ` +
                 `The \`horizontal\` variant specifies the vertical axis as the primary and has the bars ` +
@@ -38,7 +38,7 @@ exports.BarChartMd = (0, metadata_helpers_1.createMetadata)({
             availableValues: ["horizontal", "vertical"],
             defaultValue: BarChartNative_1.defaultProps.layout,
         },
-        nameKey: {
+        yKey: {
             description: "Specifies the key in the data objects that will be used to label the different data series.",
             valueType: "string",
         },
@@ -87,7 +87,7 @@ exports.BarChartMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.barChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BarChartMd, ({ extractValue, node, className, lookupSyncCallback, renderChild }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    return ((0, jsx_runtime_1.jsx)(BarChartNative_1.BarChart, { className: className, tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), data: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.data), layout: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.layout), nameKey: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.nameKey), dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.dataKeys), stacked: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.stacked), hideX: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTickX: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTickX), hideTickY: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.hideTickY), hideTooltip: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.hideTooltip), showLegend: extractValue.asOptionalBoolean((_o = node.props) === null || _o === void 0 ? void 0 : _o.showLegend), tooltipRenderer: node.props.tooltipTemplate
+    return ((0, jsx_runtime_1.jsx)(BarChartNative_1.BarChart, { className: className, tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), data: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.data), layout: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.orientation), nameKey: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.yKey), dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.xKeys), stacked: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.stacked), hideX: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTickX: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTickX), hideTickY: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.hideTickY), hideTooltip: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.hideTooltip), showLegend: extractValue.asOptionalBoolean((_o = node.props) === null || _o === void 0 ? void 0 : _o.showLegend), tooltipRenderer: node.props.tooltipTemplate
             ? (tooltipData) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.tooltipTemplate, item: tooltipData, contextVars: {
                         $tooltip: tooltipData,

package/dist/scripts/src/components/Charts/BarChart/BarChartNative.js

@@ -70,10 +70,14 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
     const safeTooltipRenderer = (0, react_1.useCallback)((props) => {
         if (!tooltipRenderer)
             return (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, Object.assign({}, props));
+        const payloadObject = {};
+        if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
+            Object.assign(payloadObject, props.payload[0].payload);
+        }
         // Extract tooltip data from Recharts props
         const tooltipData = {
             label: props.label,
-            payload: props.payload,
+            payload: payloadObject,
             active: props.active,
         };
         return tooltipRenderer(tooltipData);

package/dist/scripts/src/components/Charts/LineChart/LineChart.js

@@ -24,11 +24,11 @@ exports.LineChartMd = (0, metadata_helpers_1.createMetadata)({
             description: "The data to be displayed in the line chart." +
                 "It needs to be an array of objects, where each object represents a data point.",
         },
-        dataKeys: {
+        xKeys: {
             description: "This property specifies the keys in the data objects that should be used for rendering the lines.",
             valueType: "string",
         },
-        nameKey: {
+        yKey: {
             description: "The key in the data objects used for labeling different data series.",
             valueType: "string",
         },
@@ -84,7 +84,7 @@ exports.LineChartMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.lineChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LineChartMd, ({ extractValue, node, className, lookupSyncCallback, renderChild }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    return ((0, jsx_runtime_1.jsx)(LineChartNative_1.LineChart, { tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), hideTickX: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.hideTickX), hideTickY: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.hideTickY), data: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.data), className: className, dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.dataKeys), nameKey: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.nameKey), hideX: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTooltip: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTooltip), showLegend: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.showLegend), marginTop: extractValue.asOptionalNumber((_m = node.props) === null || _m === void 0 ? void 0 : _m.marginTop), marginRight: extractValue.asOptionalNumber((_o = node.props) === null || _o === void 0 ? void 0 : _o.marginRight), marginBottom: extractValue.asOptionalNumber((_p = node.props) === null || _p === void 0 ? void 0 : _p.marginBottom), marginLeft: extractValue.asOptionalNumber((_q = node.props) === null || _q === void 0 ? void 0 : _q.marginLeft), tooltipRenderer: node.props.tooltipTemplate
+    return ((0, jsx_runtime_1.jsx)(LineChartNative_1.LineChart, { tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), hideTickX: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.hideTickX), hideTickY: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.hideTickY), data: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.data), className: className, dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.xKeys), nameKey: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.yKey), hideX: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTooltip: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTooltip), showLegend: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.showLegend), marginTop: extractValue.asOptionalNumber((_m = node.props) === null || _m === void 0 ? void 0 : _m.marginTop), marginRight: extractValue.asOptionalNumber((_o = node.props) === null || _o === void 0 ? void 0 : _o.marginRight), marginBottom: extractValue.asOptionalNumber((_p = node.props) === null || _p === void 0 ? void 0 : _p.marginBottom), marginLeft: extractValue.asOptionalNumber((_q = node.props) === null || _q === void 0 ? void 0 : _q.marginLeft), tooltipRenderer: node.props.tooltipTemplate
             ? (tooltipData) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.tooltipTemplate, item: tooltipData, contextVars: {
                         $tooltip: tooltipData,

package/dist/scripts/src/components/Charts/LineChart/LineChartNative.js

@@ -114,10 +114,14 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
     const safeTooltipRenderer = (0, react_1.useCallback)((props) => {
         if (!tooltipRenderer)
             return (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, Object.assign({}, props));
+        const payloadObject = {};
+        if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
+            Object.assign(payloadObject, props.payload[0].payload);
+        }
         // Extract tooltip data from Recharts props
         const tooltipData = {
             label: props.label,
-            payload: props.payload,
+            payload: payloadObject,
             active: props.active,
         };
         return tooltipRenderer(tooltipData);

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

@@ -81,6 +81,7 @@ const DataLoader_1 = require("../components-core/loader/DataLoader");
 const DatePicker_1 = require("./DatePicker/DatePicker");
 const DateInput_1 = require("./DateInput/DateInput");
 const TimeInput_1 = require("./TimeInput/TimeInput");
+const Timer_1 = require("./Timer/Timer");
 const Redirect_1 = require("./Redirect/Redirect");
 const Tabs_1 = require("./Tabs/Tabs");
 const Bookmark_1 = require("./Bookmark/Bookmark");
@@ -390,6 +391,7 @@ class ComponentRegistry {
             this.registerCoreComponent(DatePicker_1.datePickerComponentRenderer);
             this.registerCoreComponent(DateInput_1.dateInputComponentRenderer);
             this.registerCoreComponent(TimeInput_1.timeInputComponentRenderer);
+            this.registerCoreComponent(Timer_1.timerComponentRenderer);
         }
         if (process.env.VITE_INCLUDE_REST_COMPONENTS !== "false") {
             //TODO, if it proves to be a working solution, make these components skippable, too

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

@@ -143,19 +143,11 @@ exports.DateInputMd = (0, metadata_helpers_1.createMetadata)({
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),
         endIcon: (0, metadata_helpers_1.dEndIcon)(),
-        mute: {
-            description: "Whether to mute the beep sound while still firing the beep event",
-            valueType: "boolean",
-            defaultValue: DateInputNative_1.defaultProps.mute,
-        },
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
-        beep: {
-            description: "Event triggered when a beep should occur due to invalid input auto-tab prevention",
-        },
     },
     apis: {
         focus: {
@@ -173,10 +165,16 @@ exports.DateInputMd = (0, metadata_helpers_1.createMetadata)({
                 value: "The new value to set for the date input.",
             },
         },
+        isoValue: {
+            description: `Get the current date value formatted in ISO standard (YYYY-MM-DD) format, suitable for JSON serialization.`,
+            signature: "isoValue(): string | null",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(DateInput_module_scss_1.default.themeVars),
     defaultThemeVars: {
         // DateInput specific theme variables (matching TimeInput structure)
+        [`paddingHorizontal-${COMP}`]: "$space-2",
+        [`paddingVertical-${COMP}`]: "$space-2",
         [`color-divider-${COMP}`]: "$textColor-secondary",
         [`spacing-divider-${COMP}`]: "1px 0",
         [`width-input-${COMP}`]: "1.8em",
@@ -199,5 +197,5 @@ exports.DateInputMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.dateInputComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.DateInputMd, ({ node, state, updateState, extractValue, className, lookupEventHandler, registerComponentApi, }) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(DateInputNative_1.DateInput, { id: node.uid, className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), onBeep: lookupEventHandler("beep"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue.asOptionalNumber(node.props.weekStartsOn), minValue: extractValue.asOptionalString(node.props.minValue), maxValue: extractValue.asOptionalString(node.props.maxValue), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline, DateInputNative_1.defaultProps.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue.asOptionalString(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), required: extractValue.asOptionalBoolean(node.props.required), clearable: extractValue.asOptionalBoolean(node.props.clearable, DateInputNative_1.defaultProps.clearable), clearIcon: extractValue.asOptionalString(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, DateInputNative_1.defaultProps.clearToInitialValue), gap: extractValue.asOptionalString(node.props.gap), mute: extractValue.asOptionalBoolean(node.props.mute, DateInputNative_1.defaultProps.mute), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter) }));
+    return ((0, jsx_runtime_1.jsx)(DateInputNative_1.DateInput, { id: node.uid, className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue.asOptionalNumber(node.props.weekStartsOn), minValue: extractValue.asOptionalString(node.props.minValue), maxValue: extractValue.asOptionalString(node.props.maxValue), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline, DateInputNative_1.defaultProps.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue.asOptionalString(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), required: extractValue.asOptionalBoolean(node.props.required), clearable: extractValue.asOptionalBoolean(node.props.clearable, DateInputNative_1.defaultProps.clearable), clearIcon: extractValue.asOptionalString(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, DateInputNative_1.defaultProps.clearToInitialValue), gap: extractValue.asOptionalString(node.props.gap), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter) }));
 });