xmlui 0.9.60 → 0.9.61

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

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.numberBoxComponentRenderer = exports.NumberBoxMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NumberBox_module_scss_1 = __importDefault(require("./NumberBox.module.scss"));
-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("../metadata-helpers");
 const NumberBoxNative_1 = require("./NumberBoxNative");
 const COMP = "NumberBox";
-exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
+exports.NumberBoxMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`NumberBox` provides a specialized input field for numeric values with built-in " +
         "validation, spinner buttons, and flexible formatting options. It supports both " +
@@ -43,10 +42,10 @@ exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: true,
         },
-        spinnerUpIcon: (0, ComponentDefs_1.d)(`Allows setting an alternate icon displayed in the ${COMP} spinner for incrementing values. You can change ` +
+        spinnerUpIcon: (0, metadata_helpers_1.d)(`Allows setting an alternate icon displayed in the ${COMP} spinner for incrementing values. You can change ` +
             `the default icon for all ${COMP} instances with the "icon.spinnerUp:NumberBox" declaration in the ` +
             `app configuration file.`),
-        spinnerDownIcon: (0, ComponentDefs_1.d)(`Allows setting an alternate icon displayed in the ${COMP} spinner for decrementing values. You can change ` +
+        spinnerDownIcon: (0, metadata_helpers_1.d)(`Allows setting an alternate icon displayed in the ${COMP} spinner for decrementing values. You can change ` +
             `the default icon for all ${COMP} instances with the "icon.spinnerDown:NumberBox" declaration in the ` +
             `app configuration file.`),
         step: {
@@ -66,10 +65,10 @@ exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: false,
         },
-        minValue: (0, ComponentDefs_1.d)("The minimum value the input field allows. Can be a float or an integer if " +
+        minValue: (0, metadata_helpers_1.d)("The minimum value the input field allows. Can be a float or an integer if " +
             "[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer." +
             "If not set, no minimum value check is done."),
-        maxValue: (0, ComponentDefs_1.d)("The maximum value the input field allows. Can be a float or an integer if " +
+        maxValue: (0, metadata_helpers_1.d)("The maximum value the input field allows. Can be a float or an integer if " +
             "[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer." +
             "If not set, no maximum value check is done."),
     },

package/dist/scripts/src/components/NumberBox/NumberBox2.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.numberBox2ComponentRenderer = exports.NumberBoxMd2 = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NumberBox_module_scss_1 = __importDefault(require("./NumberBox.module.scss"));
-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("../metadata-helpers");
 const NumberBox2Native_1 = require("./NumberBox2Native");
 const COMP = "NumberBox2";
-exports.NumberBoxMd2 = (0, ComponentDefs_1.createMetadata)({
+exports.NumberBoxMd2 = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
     description: `A \`${COMP}\` component allows users to input numeric values: either integer or floating ` +
         `point numbers. It also accepts empty values, where the stored value will be of type \`null\`.`,
@@ -38,10 +37,10 @@ exports.NumberBoxMd2 = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: NumberBox2Native_1.defaultProps.hasSpinBox,
         },
-        spinnerUpIcon: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} spinner for incrementing values. You can change ` +
+        spinnerUpIcon: (0, metadata_helpers_1.d)(`Allows setting the icon displayed in the ${COMP} spinner for incrementing values. You can change ` +
             `the default icon for all ${COMP} instances with the "icon.spinnerUp:NumberBox" declaration in the ` +
             `app configuration file.`),
-        spinnerDownIcon: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} spinner for decrementing values. You can change ` +
+        spinnerDownIcon: (0, metadata_helpers_1.d)(`Allows setting the icon displayed in the ${COMP} spinner for decrementing values. You can change ` +
             `the default icon for all ${COMP} instances with the "icon.spinnerDown:NumberBox" declaration in the ` +
             `app configuration file.`),
         step: {
@@ -67,9 +66,9 @@ exports.NumberBoxMd2 = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: NumberBox2Native_1.defaultProps.zeroOrPositive,
         },
-        minValue: (0, ComponentDefs_1.d)(`The minimum value the input field allows. Can be a float or an integer if ` +
+        minValue: (0, metadata_helpers_1.d)(`The minimum value the input field allows. Can be a float or an integer if ` +
             `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
-        maxValue: (0, ComponentDefs_1.d)(`The maximum value the input field allows. Can be a float or an integer if ` +
+        maxValue: (0, metadata_helpers_1.d)(`The maximum value the input field allows. Can be a float or an integer if ` +
             `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
     },
     events: {

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

@@ -2,21 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optionComponentRenderer = exports.OptionMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const container_helpers_1 = require("../container-helpers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const OptionNative_1 = require("./OptionNative");
 const COMP = "Option";
-exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
+exports.OptionMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Option` defines selectable items for choice-based components, providing both " +
         "the underlying value and display text for selection interfaces. It serves as " +
         "a non-visual data structure that describes individual choices within " +
         "[Select](/components/Select), [AutoComplete](/components/AutoComplete), " +
         "and other selection components.",
     props: {
-        label: (0, ComponentDefs_1.d)(`This property defines the text to display for the option. If \`label\` is not defined, ` +
+        label: (0, metadata_helpers_1.d)(`This property defines the text to display for the option. If \`label\` is not defined, ` +
             `\`Option\` will use the \`value\` as the label.`),
-        value: (0, ComponentDefs_1.d)("This property defines the value of the option. If \`value\` is not defined, " +
+        value: (0, metadata_helpers_1.d)("This property defines the value of the option. If \`value\` is not defined, " +
             "\`Option\` will use the \`label\` as the value. If neither is defined, " +
             "the option is not displayed."),
         enabled: {
@@ -24,7 +24,7 @@ exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: OptionNative_1.defaultProps.enabled,
         },
-        optionTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom option template"),
+        optionTemplate: (0, metadata_helpers_1.d)("This property is used to define a custom option template"),
     },
     childrenAsTemplate: "optionTemplate",
 });

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pageMetaTitleComponentRenderer = exports.PageMetaTitleMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const PageMetaTilteNative_1 = require("./PageMetaTilteNative");
 const COMP = "PageMetaTitle";
-exports.PageMetaTitleMd = (0, ComponentDefs_1.createMetadata)({
+exports.PageMetaTitleMd = (0, metadata_helpers_1.createMetadata)({
     description: "`PageMetaTitle` dynamically sets or updates the browser tab title, enabling " +
         "pages and components to override the default application name with context-specific titles.",
     props: {

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

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pagesRenderer = exports.PagesMd = exports.pageRenderer = exports.PageMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
 const metadata_helpers_1 = require("../metadata-helpers");
 const PagesNative_1 = require("./PagesNative");
 const PAGE = "Page";
-exports.PageMd = (0, ComponentDefs_1.createMetadata)({
+exports.PageMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     docFolder: "Pages",
     description: "`Page` defines route endpoints within an application, mapping specific URL " +
@@ -17,7 +16,7 @@ exports.PageMd = (0, ComponentDefs_1.createMetadata)({
         "routing system.",
     props: {
         //TODO illesg rename to path
-        url: (0, ComponentDefs_1.d)(`The URL of the route associated with the content. If not set, the page is not available.`),
+        url: (0, metadata_helpers_1.d)(`The URL of the route associated with the content. If not set, the page is not available.`),
         navLabel: (0, metadata_helpers_1.dInternal)("The label of the page that is displayed in the navigation panel. If provided, the " +
             "a new entry will be added to the navigation panel."),
     },
@@ -26,16 +25,16 @@ exports.pageRenderer = (0, renderers_1.createComponentRenderer)(PAGE, exports.Pa
     return ((0, jsx_runtime_1.jsx)(TableOfContentsContext_1.TableOfContentsProvider, { children: (0, jsx_runtime_1.jsx)(PagesNative_1.RouteWrapper, { childRoute: node.children, uid: node.uid, renderChild: renderChild, style: layoutCss }, extractValue(node.props.url)) }));
 });
 const COMP = "Pages";
-exports.PagesMd = (0, ComponentDefs_1.createMetadata)({
+exports.PagesMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Pages` serves as the routing coordinator within an [App](/components/App), " +
         "managing which [Page](/components/Page)  displays based on the current URL.",
     props: {
-        defaultRoute: {
-            description: `The default route when displaying the app`,
-            defaultValue: PagesNative_1.defaultProps.defaultRoute,
+        fallbackPath: {
+            description: `The fallback path when the current URL does not match any of the paths of the pages.`,
+            defaultValue: PagesNative_1.defaultProps.fallbackPath,
         },
     },
 });
 exports.pagesRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PagesMd, ({ node, extractValue, renderChild }) => {
-    return ((0, jsx_runtime_1.jsx)(PagesNative_1.Pages, { defaultRoute: extractValue(node.props.defaultRoute), node: node, renderChild: renderChild, extractValue: extractValue }));
+    return ((0, jsx_runtime_1.jsx)(PagesNative_1.Pages, { fallbackPath: extractValue(node.props.fallbackPath), node: node, renderChild: renderChild, extractValue: extractValue }));
 });

package/dist/scripts/src/components/Pages/PagesNative.js

@@ -23,12 +23,17 @@ const react_2 = require("@remix-run/react");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../components-core/constants");
 const Pages_module_scss_1 = __importDefault(require("./Pages.module.scss"));
+const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // Default props for Pages component
 exports.defaultProps = {
-    defaultRoute: "/"
+    fallbackPath: "/",
 };
 function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layoutContext, style, uid, }) {
+    var _a;
     const params = (0, react_2.useParams)();
+    const location = (0, react_2.useLocation)();
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const linkInfo = ((_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.linkMap) === null || _a === void 0 ? void 0 : _a.get(location.pathname)) || {};
     //we need to wrap the child route in a container to make sure the route params are available.
     // we do this wrapping by providing an empty object to vars.
     // this way it becomes an 'implicit' container (vars/state inside this container is propagated to the parent)
@@ -54,7 +59,7 @@ function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layou
     }, [style]);
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Pages_module_scss_1.default.wrapper, "xmlui-page-root"), style: wrapperStyle, children: renderChild(wrappedWithContainer, layoutContext) }, JSON.stringify(params)));
 }
-function Pages({ node, renderChild, extractValue, defaultRoute }) {
+function Pages({ node, renderChild, extractValue, fallbackPath }) {
     var _a;
     const routes = [];
     const restChildren = [];
@@ -68,5 +73,5 @@ function Pages({ node, renderChild, extractValue, defaultRoute }) {
     });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Routes, { children: [routes.map((child, i) => {
                         return ((0, jsx_runtime_1.jsx)(react_2.Route, { path: extractValue(child.props.url), element: renderChild(child) }, i));
-                    }), !!defaultRoute && (0, jsx_runtime_1.jsx)(react_2.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(react_2.Navigate, { to: defaultRoute, replace: true }) })] }), renderChild(restChildren)] }));
+                    }), !!fallbackPath && (0, jsx_runtime_1.jsx)(react_2.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(react_2.Navigate, { to: fallbackPath, replace: true }) })] }), renderChild(restChildren)] }));
 }

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

@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.positionedContainerComponentRenderer = exports.PositionedContainerMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const PositionedContainer_module_scss_1 = __importDefault(require("./PositionedContainer.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const PositionedContainerNative_1 = require("./PositionedContainerNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "PositionedContainer";
-exports.PositionedContainerMd = (0, ComponentDefs_1.createMetadata)({
+exports.PositionedContainerMd = (0, metadata_helpers_1.createMetadata)({
     status: "deprecated",
     description: "(**OBSOLETE**) This component was created for the ChatEngine app.",
     props: {
-        visibleOnHover: (0, ComponentDefs_1.d)("No description"),
+        visibleOnHover: (0, metadata_helpers_1.d)("No description"),
     },
     themeVars: (0, themeVars_1.parseScssVar)(PositionedContainer_module_scss_1.default.themeVars),
 });

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.progressBarComponentRenderer = exports.ProgressBarMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ProgressBar_module_scss_1 = __importDefault(require("./ProgressBar.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const ProgressBarNative_1 = require("./ProgressBarNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "ProgressBar";
-exports.ProgressBarMd = (0, ComponentDefs_1.createMetadata)({
+exports.ProgressBarMd = (0, metadata_helpers_1.createMetadata)({
     description: "`ProgressBar` provides a visual indicator showing the completion percentage " +
         "of tasks, processes, or any measurable progress. It displays as a horizontal " +
         "bar that fills from left to right based on the provided value between 0 " +

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

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.queueComponentRenderer = exports.QueueMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const container_helpers_1 = require("../container-helpers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const QueueNative_1 = require("./QueueNative");
 const COMP = "Queue";
-exports.QueueMd = (0, ComponentDefs_1.createMetadata)({
+exports.QueueMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Queue` manages sequential processing of items in FIFO (first-in, first-out) " +
         "order. It is a non-visual component but provides UI progress reporting and result display.",
     props: {
-        progressFeedback: (0, ComponentDefs_1.d)("This property defines the component template of the UI that displays " +
+        progressFeedback: (0, metadata_helpers_1.d)("This property defines the component template of the UI that displays " +
             "progress information whenever, the queue's \`progressReport\` function " +
             "in invoked. If not set, no progress feedback is displayed."),
-        resultFeedback: (0, ComponentDefs_1.d)("This property defines the component template of the UI that displays result " +
+        resultFeedback: (0, metadata_helpers_1.d)("This property defines the component template of the UI that displays result " +
             "information when the queue becomes empty after processing all queued items. If not set, " +
             "no result feedback is displayed."),
         clearAfterFinish: {
@@ -25,36 +25,36 @@ exports.QueueMd = (0, ComponentDefs_1.createMetadata)({
     },
     nonVisual: true,
     events: {
-        willProcess: (0, ComponentDefs_1.d)(`This event is triggered to process a particular item.`),
-        process: (0, ComponentDefs_1.d)(`This event is fired to process the next item in the queue. If the processing cannot ` +
+        willProcess: (0, metadata_helpers_1.d)(`This event is triggered to process a particular item.`),
+        process: (0, metadata_helpers_1.d)(`This event is fired to process the next item in the queue. If the processing cannot ` +
             `proceed because of some error, raise an exception, and the queue will handle that.`),
-        didProcess: (0, ComponentDefs_1.d)(`This event is fired when the processing of a queued item has been successfully processed.`),
-        processError: (0, ComponentDefs_1.d)(`This event is fired when processing an item raises an error. The event handler method ` +
+        didProcess: (0, metadata_helpers_1.d)(`This event is fired when the processing of a queued item has been successfully processed.`),
+        processError: (0, metadata_helpers_1.d)(`This event is fired when processing an item raises an error. The event handler method ` +
             `receives two parameters. The first is the error raised during the processing of the ` +
             `item; the second is an object with these properties:`),
-        complete: (0, ComponentDefs_1.d)(`The queue fires this event when the queue gets empty after processing all items. ` +
+        complete: (0, metadata_helpers_1.d)(`The queue fires this event when the queue gets empty after processing all items. ` +
             `The event handler has no arguments.`),
     },
     apis: {
-        enqueueItem: (0, ComponentDefs_1.d)(`This method enqueues the item passed in the method parameter. The new item will be ` +
+        enqueueItem: (0, metadata_helpers_1.d)(`This method enqueues the item passed in the method parameter. The new item will be ` +
             `processed after the current queue items have been handled. The method retrieves the ` +
             `unique ID of the newly added item; this ID can be used later in other methods, ` +
             `such as \`remove\`.`),
-        enqueueItems: (0, ComponentDefs_1.d)(`This method enqueues the array of items passed in the method parameter. The new items ` +
+        enqueueItems: (0, metadata_helpers_1.d)(`This method enqueues the array of items passed in the method parameter. The new items ` +
             `will be processed after the current queue items have been handled. The method ` +
             `retrieves an array of unique IDs, one for each new item. An item ID can be used later ` +
             `in other methods, such as \`remove\`.`),
-        getQueuedItems: (0, ComponentDefs_1.d)(`You can use this method to return the items in the queue. These items contain all ` +
+        getQueuedItems: (0, metadata_helpers_1.d)(`You can use this method to return the items in the queue. These items contain all ` +
             `entries not removed from the queue yet, including pending, in-progress, and ` +
             `completed items.`),
-        getQueueLength: (0, ComponentDefs_1.d)(`This method retrieves the current queue length. The queue contains only those items ` +
+        getQueueLength: (0, metadata_helpers_1.d)(`This method retrieves the current queue length. The queue contains only those items ` +
             `that are not fully processed yet.`),
-        remove: (0, ComponentDefs_1.d)(`This method retrieves the current queue length. The queue contains only those items ` +
+        remove: (0, metadata_helpers_1.d)(`This method retrieves the current queue length. The queue contains only those items ` +
             `that are not fully processed yet.`),
     },
     contextVars: {
-        $completedItems: (0, ComponentDefs_1.d)(`A list containing the queue items that have been completed (fully processed).`),
-        $queuedItems: (0, ComponentDefs_1.d)(`A list containing the items waiting in the queue, icluding the completed items.`),
+        $completedItems: (0, metadata_helpers_1.d)(`A list containing the queue items that have been completed (fully processed).`),
+        $queuedItems: (0, metadata_helpers_1.d)(`A list containing the items waiting in the queue, icluding the completed items.`),
     },
 });
 exports.queueComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.QueueMd, ({ node, registerComponentApi, lookupEventHandler, renderChild, extractValue }) => {

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

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.radioGroupRenderer = exports.RadioGroupMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const RadioGroup_module_scss_1 = __importDefault(require("./RadioGroup.module.scss"));
-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("../metadata-helpers");
 const RadioGroupNative_1 = require("./RadioGroupNative");
 const COMP = "RadioGroup";
 const RGOption = `RadioGroupOption`;
-exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
+exports.RadioGroupMd = (0, metadata_helpers_1.createMetadata)({
     description: "`RadioGroup` creates a mutually exclusive selection interface where users can " +
         "choose only one option from a group of radio buttons. It manages the selection " +
         "state and ensures that selecting one option automatically deselects all others in " +
@@ -41,20 +40,21 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`gap-${RGOption}`]: "$space-1_5",
         [`borderWidth-${RGOption}`]: "1px",
-        [`backgroundColor-checked-${RGOption}-indicator`]: `$backgroundColor-primary`,
-        [`backgroundColor-checked-${RGOption}--disabled]`]: `$borderColor-${RGOption}--disabled`,
-        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
-        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
-        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
-        [`fontSize-${RGOption}`]: "$fontSize-small",
-        [`fontWeight-${RGOption}`]: "$fontWeight-bold",
-        [`textColor-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
-        [`textColor-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
-        [`textColor-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
-        [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
+        [`borderWidth-${RGOption}-validation`]: `2px`,
         [`borderColor-${RGOption}-default`]: "$color-surface-500",
+        [`borderColor-checked-${RGOption}`]: "$color-primary-500",
         [`borderColor-${RGOption}-default--hover`]: "$color-surface-700",
         [`borderColor-${RGOption}-default--active`]: "$color-primary-500",
+        [`backgroundColor-${RGOption}--disabled`]: "$backgroundColor--disabled",
+        [`backgroundColor-checked-${RGOption}`]: "$color-primary-500",
+        [`backgroundColor-${RGOption}-checked--disabled`]: `$textColor--disabled`,
+        [`backgroundColor-checked-indicator-${RGOption}`]: `transparent`,
+        [`backgroundColor-${RGOption}-checked-indicator--disabled`]: `transparent`,
+        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-error`,
+        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-warning`,
+        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-success`,
+        [`fontSize-${RGOption}`]: "$fontSize-small",
+        [`fontWeight-${RGOption}`]: "$fontWeight-bold",
     },
 });
 exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioGroupMd, ({ node, extractValue, layoutCss, state, updateState, lookupEventHandler, renderChild, registerComponentApi, }) => {

package/dist/scripts/src/components/RadioGroup/RadioGroupNative.js

@@ -37,7 +37,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroupOption = exports.RadioGroup = exports.defaultProps = void 0;
-exports.useRadioGroupValue = useRadioGroupValue;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const InnerRadioGroup = __importStar(require("@radix-ui/react-radio-group"));
@@ -54,8 +53,9 @@ exports.defaultProps = {
     validationStatus: "none",
     required: false,
 };
-const RadioGroupValidationStatusContext = (0, react_1.createContext)({
+const RadioGroupStatusContext = (0, react_1.createContext)({
     status: "none",
+    enabled: exports.defaultProps.enabled,
 });
 exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup({ id, value = exports.defaultProps.value, initialValue = exports.defaultProps.initialValue, enabled = exports.defaultProps.enabled, validationStatus = exports.defaultProps.validationStatus, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, style, }, forwardedRef) {
     const [focused, setFocused] = react_1.default.useState(false);
@@ -90,40 +90,25 @@ exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup({ id, value = e
         });
     }, [/* focus, */ registerComponentApi, setValue]);
     const contextValue = (0, react_1.useMemo)(() => {
-        return { value, status: validationStatus };
-    }, [value, validationStatus]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupValidationStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
+        return { value, status: validationStatus, enabled };
+    }, [value, validationStatus, enabled]);
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
                         [RadioGroup_module_scss_1.default.focused]: focused,
                         [RadioGroup_module_scss_1.default.disabled]: !enabled,
                     }), children: children }) }) }) }));
 });
-function useRadioGroupValue() {
-    const context = (0, react_1.useContext)(RadioGroupValidationStatusContext);
-    if (!context) {
-        throw new Error("useRadioGroupValue must be used within a RadioGroup");
-    }
-    const { value } = context;
-    const isChecked = (0, react_1.useCallback)((optionValue) => value === optionValue, [value]);
-    return {
-        value,
-        isChecked,
-    };
-}
 const RadioGroupOption = ({ value, label, enabled = true, optionRenderer, style, }) => {
     const id = (0, react_1.useId)();
-    const validationContext = (0, react_1.useContext)(RadioGroupValidationStatusContext);
-    const { isChecked } = useRadioGroupValue();
+    const radioGroupContext = (0, react_1.useContext)(RadioGroupStatusContext);
     const statusStyles = (0, react_1.useMemo)(() => ({
-        [RadioGroup_module_scss_1.default.disabled]: !enabled,
-        [RadioGroup_module_scss_1.default.error]: value === validationContext.value && validationContext.status === "error",
-        [RadioGroup_module_scss_1.default.warning]: value === validationContext.value && validationContext.status === "warning",
-        [RadioGroup_module_scss_1.default.valid]: value === validationContext.value && validationContext.status === "valid",
-    }), [enabled, validationContext.status, validationContext.value, value]);
-    const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles, {
-                    [RadioGroup_module_scss_1.default.checked]: isChecked(value),
-                }), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] })), [enabled, id, label, statusStyles, value]);
+        [RadioGroup_module_scss_1.default.disabled]: radioGroupContext.enabled === false ? true : !enabled,
+        [RadioGroup_module_scss_1.default.error]: value === radioGroupContext.value && radioGroupContext.status === "error",
+        [RadioGroup_module_scss_1.default.warning]: value === radioGroupContext.value && radioGroupContext.status === "warning",
+        [RadioGroup_module_scss_1.default.valid]: value === radioGroupContext.value && radioGroupContext.status === "valid",
+    }), [enabled, radioGroupContext, value]);
+    const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] })), [enabled, id, label, statusStyles, value]);
     return ((0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.radioOptionContainer, style: style, children: optionRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: RadioGroup_module_scss_1.default.optionLabel, children: [(0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.itemContainer, children: item }), optionRenderer({
-                    $checked: value === validationContext.value,
+                    $checked: value === radioGroupContext.value,
                 })] })) : (item) }, id));
 };
 exports.RadioGroupOption = RadioGroupOption;

package/dist/scripts/src/components/RadioGroup/RadioItem.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.radioItemComponentRenderer = exports.RadioItemMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const RadioItemNative_1 = require("./RadioItemNative");
 const COMP = "RadioItem";
-exports.RadioItemMd = (0, ComponentDefs_1.createMetadata)({
+exports.RadioItemMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
     description: `The \`${COMP}\` component is a radio button that is part of a group of radio buttons.`,
     props: {

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.realTimeAdapterComponentRenderer = exports.RealTimeAdapterMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const RealTimeAdapterNative_1 = require("./RealTimeAdapterNative");
 const COMP = "RealTimeAdapter";
-exports.RealTimeAdapterMd = (0, ComponentDefs_1.createMetadata)({
+exports.RealTimeAdapterMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
     description: "`RealTimeAdapter` is a non-visual component that listens to real-time events.",
     props: {
@@ -16,7 +16,7 @@ exports.RealTimeAdapterMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     events: {
-        eventArrived: (0, ComponentDefs_1.d)(`This event is raised when data arrives from the backend using long-polling.`),
+        eventArrived: (0, metadata_helpers_1.d)(`This event is raised when data arrives from the backend using long-polling.`),
     },
 });
 exports.realTimeAdapterComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RealTimeAdapterMd, ({ node, lookupEventHandler, extractValue }) => {

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

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.redirectRenderer = exports.RedirectMd = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@remix-run/react");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const component_utils_1 = require("../component-utils");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Redirect";
 exports.defaultProps = {
     to: "",
 };
-exports.RedirectMd = (0, ComponentDefs_1.createMetadata)({
+exports.RedirectMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Redirect` immediately redirects the browser to the URL in its `to` property when " +
         "it gets visible (its `when` property gets `true`). It works only within " +
         "[App](/components/App), not externally.",

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectComponentRenderer = exports.SelectMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Select_module_scss_1 = __importDefault(require("../Select/Select.module.scss"));
-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("../metadata-helpers");
@@ -14,7 +13,7 @@ const container_helpers_1 = require("../container-helpers");
 const SelectNative_1 = require("./SelectNative");
 const react_select_1 = require("@radix-ui/react-select");
 const COMP = "Select";
-exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
+exports.SelectMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Select` provides a dropdown interface for choosing from a list of options, " +
         "supporting both single and multiple selection modes. It offers extensive " +
         "customization capabilities including search functionality, custom templates, " +
@@ -36,8 +35,8 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         optionTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display an option in the dropdown list.`),
         valueTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display a selected value when ` +
             `multiple selections (\`multiSelect\` is \`true\`) are enabled.`),
-        dropdownHeight: (0, ComponentDefs_1.d)("This property sets the height of the dropdown list. If not set, the height is determined automatically."),
-        emptyListTemplate: (0, ComponentDefs_1.d)(`This optional property provides the ability to customize what is displayed when the ` +
+        dropdownHeight: (0, metadata_helpers_1.d)("This property sets the height of the dropdown list. If not set, the height is determined automatically."),
+        emptyListTemplate: (0, metadata_helpers_1.d)(`This optional property provides the ability to customize what is displayed when the ` +
             `list of options is empty.`),
         multiSelect: Object.assign(Object.assign({}, (0, metadata_helpers_1.dMulti)()), { defaultValue: SelectNative_1.defaultProps.multiSelect }),
         searchable: {
@@ -62,11 +61,11 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         focus: (0, metadata_helpers_1.dFocus)(COMP),
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
         value: (0, metadata_helpers_1.dValue)(),
-        reset: (0, ComponentDefs_1.d)(`This method resets the component to its initial value, or clears the selection if no initial value was provided.`),
+        reset: (0, metadata_helpers_1.d)(`This method resets the component to its initial value, or clears the selection if no initial value was provided.`),
     },
     contextVars: {
-        $item: (0, ComponentDefs_1.d)("Represents the current option's data (label and value properties)"),
-        $itemContext: (0, ComponentDefs_1.d)("Provides utility methods like `removeItem()` for multi-select scenarios"),
+        $item: (0, metadata_helpers_1.d)("Represents the current option's data (label and value properties)"),
+        $itemContext: (0, metadata_helpers_1.d)("Provides utility methods like `removeItem()` for multi-select scenarios"),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Select_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -75,7 +74,6 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
         [`borderWidth-menu-${COMP}`]: "1px",
         [`borderColor-menu-${COMP}`]: "$borderColor",
-        [`minHeight-Input`]: "39px",
         [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
         [`fontSize-${COMP}-badge`]: "$fontSize-small",
         [`paddingHorizontal-${COMP}-badge`]: "$space-1",
@@ -91,6 +89,8 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
         [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--hover",
         [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
+        // Default borderColor-Input--disabled is too light so the disabled component is barely visible
+        [`borderColor-${COMP}--disabled`]: "initial",
     },
 });
 exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {

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

@@ -212,7 +212,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                 }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
                                                     // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
                                                     (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, options: options, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: options.size > 0
-                                ? Array.from(options).map((option) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, option.value)))
+                                ? Array.from(options).map((option, idx) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, `${option.value}-${idx}`)))
                                 : emptyListNode })) }), children] }) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectionStoreComponentRenderer = exports.SelectionStoreMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const SelectionStoreNative_1 = require("./SelectionStoreNative");
 const COMP = "SelectionStore";
-exports.SelectionStoreMd = (0, ComponentDefs_1.createMetadata)({
+exports.SelectionStoreMd = (0, metadata_helpers_1.createMetadata)({
     status: "deprecated",
     description: `The \`${COMP}\` is a non-visual component that may wrap components (items) and manage ` +
         `their selection state to accommodate the usage of other actions.`,