xmlui 0.9.50 → 0.9.52

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

@@ -31,7 +31,7 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         isPaginated: {
             description: `This property adds pagination controls to the \`${COMP}\`.`,
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: TableNative_1.defaultProps.isPaginated,
         },
         loading: (0, ComponentDefs_1.d)(`This boolean property indicates if the component is fetching (or processing) data. This ` +
             `property is useful when data is loaded conditionally or receiving it takes some time.`),
@@ -45,22 +45,24 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
             `row should be disabled. The function retrieves the item to display and should return ` +
             `a Boolean-like value.`),
         noDataTemplate: (0, metadata_helpers_1.dComponent)(`A property to customize what to display if the table does not contain any data.`),
-        sortBy: (0, ComponentDefs_1.d)(`This property is used to determine which data attributes to sort by.`),
-        sortDirection: (0, ComponentDefs_1.d)(`This property determines the sort order to be \`ascending\` or \`descending\`. This ` +
-            `property only works if the [\`sortBy\`](#sortby) property is also set.`),
+        sortBy: (0, ComponentDefs_1.d)("This property is used to determine which data property to sort by. If not defined, " +
+            "the data is not sorted"),
+        sortDirection: (0, ComponentDefs_1.d)("This property determines the sort order to be \`ascending\` or \`descending\`. This " +
+            "property only works if the [\`sortBy\`](#sortby) property is also set. By default " +
+            "ascending order is used."),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         hideHeader: {
             description: "Set the header visibility using this property. Set it to \`true\` to hide the header.",
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: TableNative_1.defaultProps.hideHeader,
         },
-        iconNoSort: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is ` +
+        iconNoSort: (0, ComponentDefs_1.d)(`Allows setting an alternate icon displayed in the ${COMP} column header when sorting is ` +
             `enabled, but the column remains unsorted. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.nosort:Table" declaration in the app configuration file.`),
-        iconSortAsc: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is enabled, ` +
+        iconSortAsc: (0, ComponentDefs_1.d)(`Allows setting an alernate icon displayed in the ${COMP} column header when sorting is enabled, ` +
             `and the column is sorted in ascending order. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.sortasc:Table" declaration in the app configuration file.`),
-        iconSortDesc: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is enabled, ` +
+        iconSortDesc: (0, ComponentDefs_1.d)(`Allows setting an alternate icon displayed in the ${COMP} column header when sorting is enabled, ` +
             `and the column is sorted in descending order. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.sortdesc:Table" declaration in the app configuration file.`),
         enableMultiRowSelection: {
@@ -68,7 +70,7 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
                 `This property only has an effect when the rowsSelectable property is set. Setting it ` +
                 `to \`false\` limits selection to a single row.`,
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: TableNative_1.defaultProps.enableMultiRowSelection,
         },
         alwaysShowSelectionHeader: {
             description: "This property indicates when the row selection header is displayed. When the value is " +
@@ -82,7 +84,7 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
                 `\`true\`, the table does not have a bottom border. Otherwise, it has a bottom border.`,
             valueType: "boolean",
             defaultValue: false,
-        }
+        },
     },
     events: {
         sortingDidChange: (0, ComponentDefs_1.d)(`This event is fired when the table data sorting has changed. It has two arguments: ` +
@@ -106,11 +108,10 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Table_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`padding-heading-${COMP}`]: `$space-2`,
-        [`paddingHorizontal-cell-${COMP}`]: "$space-2",
+        [`padding-heading-${COMP}`]: `$space-2 $space-0 $space-2 $space-2`,
+        [`padding-cell-${COMP}`]: "$space-2 $space-0 $space-2 $space-2",
         [`paddingHorizontal-cell-first-${COMP}`]: "$space-5",
-        [`paddingHorizontal-cell-last-${COMP}`]: "$space-5",
-        [`paddingVertical-cell-${COMP}`]: "$space-2",
+        [`paddingHorizontal-cell-last-${COMP}`]: "$space-0",
         [`border-cell-${COMP}`]: "1px solid $borderColor",
         [`outlineWidth-heading-${COMP}--focus`]: "$outlineWidth--focus",
         [`outlineStyle-heading-${COMP}--focus`]: "$outlineStyle--focus",

package/dist/scripts/src/components/Table/TableNative.js

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
+exports.defaultProps = exports.Table = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
@@ -73,7 +73,7 @@ const getCommonPinningStyles = (column) => {
     };
 };
 // eslint-disable-next-line react/display-name
-exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, columns = constants_1.EMPTY_ARRAY, isPaginated = false, loading = false, headerHeight, rowsSelectable = false, enableMultiRowSelection = true, pageSizes = DEFAULT_PAGE_SIZES, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = "ascending", iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, noDataRenderer, autoFocus = false, hideHeader = false, hideNoDataView = false, alwaysShowSelectionHeader = false, registerComponentApi, onSelectionDidChange, noBottomBorder = false,
+exports.Table = (0, react_1.forwardRef)(({ data = exports.defaultProps.data, columns = exports.defaultProps.columns, isPaginated = exports.defaultProps.isPaginated, loading = exports.defaultProps.loading, headerHeight, rowsSelectable = exports.defaultProps.rowsSelectable, enableMultiRowSelection = exports.defaultProps.enableMultiRowSelection, pageSizes = exports.defaultProps.pageSizes, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = exports.defaultProps.sortingDirection, iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, noDataRenderer, autoFocus = exports.defaultProps.autoFocus, hideHeader = exports.defaultProps.hideHeader, hideNoDataView = exports.defaultProps.hideNoDataView, alwaysShowSelectionHeader = exports.defaultProps.alwaysShowSelectionHeader, registerComponentApi, onSelectionDidChange, noBottomBorder = exports.defaultProps.noBottomBorder,
 // cols
  }, forwardedRef) => {
     var _a, _b, _c, _d;
@@ -162,7 +162,7 @@ exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, colum
             const { width, starSizedWidth } = getColumnWidth(col.width, true, "width");
             const { width: minWidth } = getColumnWidth(col.minWidth, false, "minWidth");
             const { width: maxWidth } = getColumnWidth(col.maxWidth, false, "maxWidth");
-            const customColumn = Object.assign(Object.assign({}, col), { header: (_b = (_a = col.header) !== null && _a !== void 0 ? _a : col.accessorKey) !== null && _b !== void 0 ? _b : " ", id: "col_" + idx, size: width, minSize: minWidth, maxSize: maxWidth, enableResizing: col.canResize, enableSorting: col.canSort, enablePinning: col.pinTo !== undefined, meta: {
+            const customColumn = Object.assign(Object.assign({}, col), { header: (_b = (_a = col.header) !== null && _a !== void 0 ? _a : col.accessorKey) !== null && _b !== void 0 ? _b : " ", id: "col_" + idx, size: width, minSize: minWidth, maxSize: maxWidth, enableResizing: col.canResize, enableSorting: col.canSort && !!col.accessorKey, enablePinning: col.pinTo !== undefined, meta: {
                     starSizedWidth,
                     pinTo: col.pinTo,
                     style: col.style,
@@ -384,10 +384,11 @@ exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, colum
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(Table_module_scss_1.default.wrapper, { [Table_module_scss_1.default.noScroll]: hasOutsideScroll }), tabIndex: -1, onKeyDown: onKeyDown, ref: ref, style: style, children: [(0, jsx_runtime_1.jsxs)("table", { className: Table_module_scss_1.default.table, ref: tableRef, style: { borderRight: "1px solid transparent" }, children: [!hideHeader && ((0, jsx_runtime_1.jsx)("thead", { style: { height: headerHeight }, className: Table_module_scss_1.default.headerWrapper, children: table.getHeaderGroups().map((headerGroup, headerGroupIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: (0, classnames_1.default)(Table_module_scss_1.default.headerRow, {
                                 [Table_module_scss_1.default.allSelected]: table.getIsAllRowsSelected(),
                             }), children: headerGroup.headers.map((header, headerIndex) => {
-                                var _a, _b;
-                                const _c = ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.style) || {}, { width } = _c, style = __rest(_c, ["width"]);
+                                var _a, _b, _c;
+                                const _d = ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.style) || {}, { width } = _d, style = __rest(_d, ["width"]);
                                 const size = header.getSize();
-                                return ((0, jsx_runtime_1.jsxs)("th", { className: Table_module_scss_1.default.columnCell, colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting, updateSorting: () => { var _a; return _updateSorting((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey); }, children: (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.headerContent, style: style, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), header.column.columnDef.enableSorting && ((0, jsx_runtime_1.jsx)("span", { style: { display: "inline-flex", maxWidth: 16 }, children: (0, jsx_runtime_1.jsx)(ColumnOrderingIndicator, { iconSortAsc: iconSortAsc, iconSortDesc: iconSortDesc, iconNoSort: iconNoSort, direction: ((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey) === _sortBy
+                                return ((0, jsx_runtime_1.jsxs)("th", { className: Table_module_scss_1.default.columnCell, colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting &&
+                                                !!((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey), updateSorting: () => { var _a; return _updateSorting((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey); }, children: (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.headerContent, style: style, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), header.column.columnDef.enableSorting && ((0, jsx_runtime_1.jsx)("span", { style: { display: "inline-flex", maxWidth: 16 }, children: (0, jsx_runtime_1.jsx)(ColumnOrderingIndicator, { iconSortAsc: iconSortAsc, iconSortDesc: iconSortDesc, iconNoSort: iconNoSort, direction: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.accessorKey) === _sortBy
                                                                 ? _sortingDirection
                                                                 : undefined }) }))] }) }), header.column.getCanResize() && ((0, jsx_runtime_1.jsx)("div", { onDoubleClick: () => {
                                                 touchedSizesRef.current[header.column.id] = false;
@@ -437,9 +438,9 @@ exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, colum
                                         const size = cell.column.getSize();
                                         return ((0, jsx_runtime_1.jsx)("td", { className: Table_module_scss_1.default.cell, style: Object.assign({ 
                                                 // width: size,
-                                                width: size }, getCommonPinningStyles(cell.column)), children: cellRenderer
-                                                ? cellRenderer(cell.row.original, rowIndex, i, cell === null || cell === void 0 ? void 0 : cell.getValue())
-                                                : (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, `${cell.id}-${i}`));
+                                                width: size }, getCommonPinningStyles(cell.column)), children: (0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.cellContent, children: cellRenderer
+                                                    ? cellRenderer(cell.row.original, rowIndex, i, cell === null || cell === void 0 ? void 0 : cell.getValue())
+                                                    : (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }) }, `${cell.id}-${i}`));
                                     }) }, `${row.id}-${rowIndex}`));
                             }), paddingBottom > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { style: { height: `${paddingBottom}px` } }) }))] }))] }), loading && !hasData && ((0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, {}) })), !hideNoDataView &&
                 !loading &&
@@ -462,3 +463,18 @@ function ColumnOrderingIndicator({ direction, iconSortAsc = "sortasc:Table", ico
     }
     return iconNoSort !== "-" ? ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconNoSort, fallback: "nosort", size: "12" })) : ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconNoSort, size: "12" })); //nosort
 }
+exports.defaultProps = {
+    data: constants_1.EMPTY_ARRAY,
+    columns: constants_1.EMPTY_ARRAY,
+    isPaginated: false,
+    loading: false,
+    rowsSelectable: false,
+    enableMultiRowSelection: true,
+    pageSizes: [10],
+    sortingDirection: "ascending",
+    autoFocus: false,
+    hideHeader: false,
+    hideNoDataView: false,
+    alwaysShowSelectionHeader: false,
+    noBottomBorder: false,
+};

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

@@ -23,14 +23,14 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
             description: `This property indicates that smooth scrolling is used while scrolling the selected table ` +
                 `of contents items into view.`,
             valueType: "boolean",
-            defaultValue: "false",
+            defaultValue: TableOfContentsNative_1.defaultProps.smoothScrolling,
         },
         maxHeadingLevel: {
             description: "Defines the maximum heading level (1 to 6) to include in the table of contents. " +
                 "For example, if it is 2, then `H1` and `H2` are displayed, but lower levels " +
                 "(`H3` to `H6`) are not.",
             valueType: "number",
-            defaultValue: "6",
+            defaultValue: TableOfContentsNative_1.defaultProps.maxHeadingLevel,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(TableOfContents_module_scss_1.default.themeVars),
@@ -41,8 +41,17 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${COMP_CHILD}`]: "$fontSize-small",
         [`wordWrap-${COMP_CHILD}`]: "break-word",
         [`paddingVertical-${COMP_CHILD}`]: "$space-1",
-        [`paddingHorizontal-${COMP_CHILD}`]: "$space-1",
+        [`paddingLeft-${COMP_CHILD}`]: "$space-1",
+        [`paddingLeft-${COMP_CHILD}-level-2`]: "$space-3",
+        [`paddingLeft-${COMP_CHILD}-level-3`]: "$space-5",
+        [`paddingLeft-${COMP_CHILD}-level-4`]: "$space-6",
+        [`paddingLeft-${COMP_CHILD}-level-5`]: "$space-6",
+        [`paddingLeft-${COMP_CHILD}-level-6`]: "$space-6",
         [`fontWeight-${COMP_CHILD}`]: "$fontWeight-bold",
+        [`fontWeight-${COMP_CHILD}-level-3`]: "normal",
+        [`fontWeight-${COMP_CHILD}-level-4`]: "normal",
+        [`fontWeight-${COMP_CHILD}-level-5`]: "normal",
+        [`fontWeight-${COMP_CHILD}-level-6`]: "normal",
         [`fontStyle-${COMP_CHILD}-level-6`]: "italic",
         [`color-${COMP_CHILD}--active`]: "$color-primary-500",
     },

package/dist/scripts/src/components/TableOfContents/TableOfContentsNative.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableOfContents = void 0;
+exports.TableOfContents = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@remix-run/react");
@@ -13,7 +13,11 @@ const classnames_1 = __importDefault(require("classnames"));
 const TableOfContents_module_scss_1 = __importDefault(require("./TableOfContents.module.scss"));
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
 const hooks_1 = require("../../components-core/utils/hooks");
-exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling, maxHeadingLevel = 6 }, forwardedRef) {
+exports.defaultProps = {
+    smoothScrolling: false,
+    maxHeadingLevel: 6,
+};
+exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling = exports.defaultProps.smoothScrolling, maxHeadingLevel = exports.defaultProps.maxHeadingLevel }, forwardedRef) {
     const tocRef = (0, react_1.useRef)(null);
     const { headings, scrollToAnchor, subscribeToActiveAnchorChange, activeAnchorId: initialActiveAnchorId } = (0, TableOfContentsContext_1.useTableOfContents)();
     const [activeAnchorId, setActiveId] = (0, react_1.useState)(initialActiveAnchorId);

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

@@ -18,13 +18,13 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component provides a tabbed layout where each tab has a clickable label and content.`,
     props: {
         activeTab: (0, ComponentDefs_1.d)(`This property indicates the index of the active tab. The indexing starts from 0, ` +
-            `representing the starting (leftmost) tab.`),
+            `representing the starting (leftmost) tab. If not set, the first tab is selected by default.`),
         orientation: {
             description: `This property indicates the orientation of the component. In horizontal orientation, ` +
                 `the tab sections are laid out on the left side of the content panel, while in vertical ` +
                 `orientation, the buttons are at the top.`,
             availableValues: ["horizontal", "vertical"],
-            defaultValue: "vertical",
+            defaultValue: TabsNative_1.defaultProps.orientation,
             valueType: "string",
         },
         tabTemplate: (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`),

package/dist/scripts/src/components/Tabs/TabsNative.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
+exports.Tabs = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const RTabs = __importStar(require("@radix-ui/react-tabs"));
@@ -44,7 +44,12 @@ const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
 const misc_1 = require("../../components-core/utils/misc");
 const TabContext_1 = require("../Tabs/TabContext");
 const classnames_1 = __importDefault(require("classnames"));
-exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = 0, orientation = "horizontal", tabRenderer, style, children, registerComponentApi, className, distributeEvenly = false, }, forwardedRef) {
+exports.defaultProps = {
+    activeTab: 0,
+    orientation: "horizontal",
+    distributeEvenly: false,
+};
+exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = exports.defaultProps.activeTab, orientation = exports.defaultProps.orientation, tabRenderer, style, children, registerComponentApi, className, distributeEvenly = exports.defaultProps.distributeEvenly, }, forwardedRef) {
     const { tabItems, tabContextValue } = (0, TabContext_1.useTabContextValue)();
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(activeTab);
     const currentTab = (0, react_1.useMemo)(() => {

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

@@ -37,17 +37,18 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         },
         maxLines: (0, ComponentDefs_1.d)("This property determines the maximum number of lines the component can wrap to. " +
             "If there is no space to display all the contents, the component displays up to as " +
-            "many lines as specified in this property. When the value is not defined, there is no limit on the displayed lines."),
+            "many lines as specified in this property. When the value is not defined, there is " +
+            "no limit on the displayed lines."),
         preserveLinebreaks: {
             description: `This property indicates if linebreaks should be preserved when displaying text.`,
             valueType: "boolean",
-            defaultValue: "false",
+            defaultValue: TextNative_1.defaultProps.preserveLinebreaks,
         },
         ellipses: {
             description: "This property indicates whether ellipses should be displayed when the text is " +
                 "cropped (\`true\`) or not (\`false\`).",
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: TextNative_1.defaultProps.ellipses,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Text_module_scss_1.default.themeVars),
@@ -56,6 +57,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`borderStyle-${COMP}`]: "solid",
         [`fontSize-${COMP}`]: "$fontSize-small",
         [`borderWidth-${COMP}`]: "$space-0",
+        [`lineHeight-${COMP}-codefence`]: "1.5",
         [`fontWeight-${COMP}-abbr`]: "$fontWeight-bold",
         [`textTransform-${COMP}-abbr`]: "uppercase",
         [`fontSize-${COMP}-secondary`]: "$fontSize-small",
@@ -63,13 +65,13 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`textColor-${COMP}`]: "$textColor-primary",
         [`fontFamily-${COMP}`]: "$fontFamily",
         [`fontWeight-${COMP}`]: "$fontWeight-normal",
-        [`fontSize-${COMP}-codefence`]: "$fontSize-small",
+        [`fontSize-${COMP}-codefence`]: "$fontSize-code",
         [`fontFamily-${COMP}-code`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-code`]: "$fontSize-small",
         [`borderWidth-${COMP}-code`]: "1px",
         [`borderStyle-${COMP}-code`]: "solid",
         [`borderRadius-${COMP}-code`]: "4px",
-        [`paddingHorizontal-${COMP}-code`]: "$space-1",
+        [`paddingHorizontal-${COMP}-code`]: "$space-0_5",
         [`paddingBottom-${COMP}-code`]: "2px",
         [`textDecorationLine-${COMP}-deleted`]: "line-through",
         [`textDecorationLine-${COMP}-inserted`]: "underline",
@@ -92,7 +94,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${COMP}-small`]: "$fontSize-small",
         [`lineHeight-${COMP}-small`]: "$lineHeight-tight",
         [`letterSpacing-${COMP}-caption`]: "0.05rem",
-        [`fontSize-${COMP}-placeholder`]: "$fontSize-small",
+        [`fontSize-${COMP}-placeholder`]: "$fontSize-smaller",
         [`fontFamily-${COMP}-codefence`]: "$fontFamily-monospace",
         [`paddingHorizontal-${COMP}-codefence`]: "$space-3",
         [`paddingVertical-${COMP}-codefence`]: "$space-2",
@@ -108,18 +110,18 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
         [`marginTop-${COMP}-markdown`]: "$space-3",
         [`marginBottom-${COMP}-markdown`]: "$space-6",
-        [`backgroundColor-${COMP}-code`]: "rgba($color-surface-100-rgb, .4)",
+        [`backgroundColor-${COMP}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
         [`borderColor-${COMP}-code`]: "$color-surface-100",
-        [`backgroundColor-${COMP}-keyboard`]: "rgba($color-surface-100-rgb, .4)",
+        [`backgroundColor-${COMP}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",
         [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
-        [`backgroundColor-${COMP}-marked`]: "rgba($color-primary-200-rgb, .4)",
+        [`backgroundColor-${COMP}-marked`]: "rgb(from $color-primary-200 r g b / 0.4)",
         [`color-${COMP}-placeholder`]: "$color-surface-500",
         [`color-${COMP}-codefence`]: "$color-surface-900",
         [`color-${COMP}-subheading`]: "$textColor-secondary",
         [`color-${COMP}-secondary`]: "$textColor-secondary",
         dark: {
-            [`backgroundColor-${COMP}-marked`]: "rgba($color-primary-400-rgb, .4)",
-        }
+            [`backgroundColor-${COMP}-marked`]: "rgb(from $color-primary-400 r g b / 0.4)",
+        },
     },
 });
 exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextMd, ({ node, extractValue, layoutCss, renderChild }) => {
@@ -127,5 +129,5 @@ exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, e
     const variantSpecificProps = Object.fromEntries(Object.entries(variantSpecific)
         .filter(([key, _]) => abstractions_1.VariantPropsKeys.includes(key))
         .map(([key, value]) => [key, extractValue(value)]));
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ variant: extractValue(variant), maxLines: extractValue.asOptionalNumber(maxLines), style: layoutCss, preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true) }, variantSpecificProps, { children: extractValue.asDisplayText(value) || renderChild(node.children) })));
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ variant: extractValue(variant), maxLines: extractValue.asOptionalNumber(maxLines), style: layoutCss, preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, TextNative_1.defaultProps.preserveLinebreaks), ellipses: extractValue.asOptionalBoolean(ellipses, TextNative_1.defaultProps.ellipses) }, variantSpecificProps, { children: extractValue.asDisplayText(value) || renderChild(node.children) })));
 });

package/dist/scripts/src/components/Text/TextNative.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
+exports.Text = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
@@ -22,8 +22,13 @@ const classnames_1 = __importDefault(require("classnames"));
 const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
 const css_utils_1 = require("../../components-core/utils/css-utils");
 const abstractions_1 = require("../abstractions");
+exports.defaultProps = {
+    maxLines: 0,
+    preserveLinebreaks: false,
+    ellipses: true,
+};
 exports.Text = (0, react_1.forwardRef)(function Text(_a, forwardedRef) {
-    var { uid, variant, maxLines = 0, style, children, preserveLinebreaks, ellipses = true } = _a, variantSpecificProps = __rest(_a, ["uid", "variant", "maxLines", "style", "children", "preserveLinebreaks", "ellipses"]);
+    var { uid, variant, maxLines = exports.defaultProps.maxLines, style, children, preserveLinebreaks = exports.defaultProps.preserveLinebreaks, ellipses = exports.defaultProps.ellipses } = _a, variantSpecificProps = __rest(_a, ["uid", "variant", "maxLines", "style", "children", "preserveLinebreaks", "ellipses"]);
     const innerRef = (0, react_1.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(innerRef, forwardedRef) : innerRef;
     // NOTE: This is to accept syntax highlight classes coming from shiki

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

@@ -26,7 +26,7 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
             description: "This optional boolean property indicates whether pressing the \`Enter\` key on the " +
                 "keyboard prompts the parent \`Form\` component to submit.",
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: TextAreaNative_1.defaultProps.enterSubmits,
         },
         escResets: {
             description: `This boolean property indicates whether the ${COMP} contents should be reset when pressing ` +
@@ -34,12 +34,14 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: false,
         },
-        maxRows: (0, ComponentDefs_1.d)(`This optional property sets the maximum number of text rows the \`${COMP}\` can grow.`),
-        minRows: (0, ComponentDefs_1.d)(`This optional property sets the minimum number of text rows the \`${COMP}\` can shrink.`),
+        maxRows: (0, ComponentDefs_1.d)(`This optional property sets the maximum number of text rows the \`${COMP}\` ` +
+            "can grow. If not set, the number of rows is unlimited."),
+        minRows: (0, ComponentDefs_1.d)(`This optional property sets the minimum number of text rows the \`${COMP}\` can shrink. ` +
+            `If not set, the minimum number of rows is 1.`),
         rows: {
             description: `Specifies the number of rows the component initially has.`,
             valueType: "number",
-            defaultValue: 2,
+            defaultValue: TextAreaNative_1.defaultProps.rows,
         },
         autoSize: {
             description: `If set to \`true\`, this boolean property enables the \`${COMP}\` to resize ` +
@@ -59,7 +61,8 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        resize: { description: `This optional property specifies in which dimensions can the \`TextArea\` ` +
+        resize: {
+            description: `This optional property specifies in which dimensions can the \`TextArea\` ` +
                 `be resized by the user.`,
             availableValues: exports.resizeOptionsMd,
         },

package/dist/scripts/src/components/TextArea/TextAreaNative.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextArea = exports.resizeOptionKeys = void 0;
+exports.TextArea = exports.defaultProps = exports.resizeOptionKeys = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
@@ -53,7 +53,24 @@ const resizeMap = {
     vertical: TextArea_module_scss_1.default.resizeVertical,
     both: TextArea_module_scss_1.default.resizeBoth,
 };
-exports.TextArea = (0, react_1.forwardRef)(function TextArea({ id, value = "", placeholder = "", required = false, readOnly = false, allowCopy = true, updateState = constants_1.noop, validationStatus, autoFocus = false, initialValue = "", resize, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, controlled = true, enterSubmits = true, escResets, style, registerComponentApi, autoSize, maxRows, minRows, maxLength, rows = 2, enabled = true, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
+exports.defaultProps = {
+    value: "",
+    placeholder: "",
+    required: false,
+    readOnly: false,
+    allowCopy: true,
+    updateState: constants_1.noop,
+    autoFocus: false,
+    initialValue: "",
+    onDidChange: constants_1.noop,
+    onFocus: constants_1.noop,
+    onBlur: constants_1.noop,
+    controlled: true,
+    enterSubmits: true,
+    rows: 2,
+    enabled: true
+};
+exports.TextArea = (0, react_1.forwardRef)(function TextArea({ id, value = exports.defaultProps.value, placeholder = exports.defaultProps.placeholder, required = exports.defaultProps.required, readOnly = exports.defaultProps.readOnly, allowCopy = exports.defaultProps.allowCopy, updateState = exports.defaultProps.updateState, validationStatus, autoFocus = exports.defaultProps.autoFocus, initialValue = exports.defaultProps.initialValue, resize, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, controlled = exports.defaultProps.controlled, enterSubmits = exports.defaultProps.enterSubmits, escResets, style, registerComponentApi, autoSize, maxRows, minRows, maxLength, rows = exports.defaultProps.rows, enabled = exports.defaultProps.enabled, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
     // --- The component is initially unfocused
     const inputRef = (0, react_1.useRef)(null);
     const [cursorPosition, setCursorPosition] = (0, react_1.useState)(null);

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

@@ -17,7 +17,7 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` is an input component that allows users to input and edit textual data.`,
     props: {
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        initialValue: Object.assign(Object.assign({}, (0, metadata_helpers_1.dInitialValue)()), { defaultValue: TextBoxNative_1.defaultProps.initialValue }),
         label: (0, metadata_helpers_1.dLabel)(),
         labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
@@ -26,14 +26,15 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        enabled: Object.assign(Object.assign({}, (0, metadata_helpers_1.dEnabled)()), { defaultValue: TextBoxNative_1.defaultProps.enabled }),
+        validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: TextBoxNative_1.defaultProps.validationStatus }),
         startText: (0, metadata_helpers_1.dStartText)(),
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),
         endIcon: (0, metadata_helpers_1.dEndIcon)(),
         gap: {
-            description: "This property defines the gap between the adornments and the input area.",
+            description: "This property defines the gap between the adornments and the input area. If not " +
+                "set, the gap declared by the current theme is used.",
         },
     },
     events: {

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextBox = void 0;
+exports.TextBox = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = __importStar(require("react"));
@@ -46,7 +46,19 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, onKeyDown = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
+exports.defaultProps = {
+    type: "text",
+    value: "",
+    initialValue: "",
+    enabled: true,
+    validationStatus: "none",
+    onDidChange: constants_1.noop,
+    onFocus: constants_1.noop,
+    onBlur: constants_1.noop,
+    onKeyDown: constants_1.noop,
+    updateState: constants_1.noop,
+};
+exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = exports.defaultProps.type, value = exports.defaultProps.value, updateState = exports.defaultProps.updateState, initialValue = exports.defaultProps.initialValue, style, maxLength, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onKeyDown = exports.defaultProps.onKeyDown, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
     const _id = (0, react_1.useId)();
     id = id || _id;
     const inputRef = (0, react_2.useRef)(null);

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

@@ -31,7 +31,7 @@ exports.ThemeMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "string",
             defaultValue: "light",
         },
-        root: (0, ComponentDefs_1.d)(`This property indicates whether the component is at the root of the application.`),
+        root: (0, ComponentDefs_1.d)(`This property indicates whether the component is at the root of the application.`, undefined, "boolean", ThemeNative_1.defaultProps.root),
     },
     opaque: true,
 });

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.Theme = Theme;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -15,7 +16,6 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const ErrorBoundary_1 = require("../../components-core/rendering/ErrorBoundary");
 const NotificationToast_1 = require("./NotificationToast");
-const InspectorContext_1 = require("../../components-core/InspectorContext");
 const IndexerContext_1 = require("../App/IndexerContext");
 function getClassName(css) {
     return `theme-${calculateHash(css)}`;
@@ -31,7 +31,13 @@ function calculateHash(str) {
     }
     return hash;
 }
-function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 5000, themeVars = constants_1.EMPTY_OBJECT, layoutContext, children, }) {
+exports.defaultProps = {
+    isRoot: false,
+    toastDuration: 5000,
+    themeVars: constants_1.EMPTY_OBJECT,
+    root: false,
+};
+function Theme({ id, isRoot = exports.defaultProps.isRoot, renderChild, node, tone, toastDuration = exports.defaultProps.toastDuration, themeVars = exports.defaultProps.themeVars, layoutContext, children, }) {
     const generatedId = (0, react_1.useId)();
     const { themes, resources, resourceMap, activeThemeId, setRoot, root } = (0, ThemeContext_1.useThemes)();
     const { activeTheme, activeThemeTone } = (0, ThemeContext_1.useTheme)();
@@ -112,16 +118,6 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         getResourceUrl,
         getThemeVar,
     ]);
-    const { devToolsSize, devToolsSide, devToolsEnabled } = (0, InspectorContext_1.useDevTools)();
-    const inspectStyle = (0, react_1.useMemo)(() => {
-        return devToolsEnabled
-            ? {
-                paddingBottom: devToolsSide === "bottom" ? devToolsSize : 0,
-                paddingLeft: devToolsSide === "left" ? devToolsSize : 0,
-                paddingRight: devToolsSide === "right" ? devToolsSize : 0,
-            }
-            : {};
-    }, [devToolsEnabled, devToolsSide, devToolsSize]);
     const { indexing } = (0, IndexerContext_1.useIndexerContext)();
     if (indexing) {
         return children;
@@ -130,7 +126,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
         return (
         // <ThemeContext.Provider value={currentThemeContextValue}>
-        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", "data-theme-root": true, children: `.${className}  {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { style: inspectStyle, id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
+        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", "data-theme-root": true, dangerouslySetInnerHTML: { __html: `.${className}  {${css}}` } }), (0, jsx_runtime_1.jsxs)("div", { id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
                         if (el) {
                             setRoot(el);
                         }
@@ -138,7 +134,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         // </ThemeContext.Provider>
         );
     }
-    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, Theme_module_scss_1.default.wrapper, className), children: renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })) }), root &&
+    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", dangerouslySetInnerHTML: { __html: `.${className}  {${css}}` } }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, Theme_module_scss_1.default.wrapper, className), children: renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })) }), root &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), ref: (el) => {
                         if (el) {
                             setThemeRoot(el);