xmlui 0.9.51 → 0.9.52

package/dist/scripts/src/components/Charts/PieChart/PieChartNative.js

@@ -0,0 +1,127 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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.PieChart = PieChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const recharts_1 = require("recharts");
+const PieChartNative_module_scss_1 = __importDefault(require("./PieChartNative.module.scss"));
+const xmlui_1 = require("xmlui");
+const react_1 = require("react");
+const ChartProvider_1 = __importStar(require("../utils/ChartProvider"));
+const TooltipContent_1 = require("../Tooltip/TooltipContent");
+exports.defaultProps = {
+    showLabel: true,
+    showLabelList: false,
+    showLegend: false,
+    labelListPosition: "inside",
+    innerRadius: 0,
+};
+// Custom label renderer that draws connectors and places text outside the pie
+const renderCustomizedLabel = (props) => {
+    const RADIAN = Math.PI / 180;
+    const { cx, cy, midAngle, outerRadius, fill, payload, percent, value, name, index } = props;
+    // Calculate positions for the label connector lines
+    const sin = Math.sin(-RADIAN * midAngle);
+    const cos = Math.cos(-RADIAN * midAngle);
+    const sx = cx + (outerRadius + 10) * cos;
+    const sy = cy + (outerRadius + 10) * sin;
+    const mx = cx + (outerRadius + 30) * cos;
+    const my = cy + (outerRadius + 30) * sin;
+    const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+    const ey = my;
+    const textAnchor = cos >= 0 ? "start" : "end";
+    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: `M${sx},${sy}L${mx},${my}L${ex},${ey}`, stroke: fill, fill: "none" }), (0, jsx_runtime_1.jsx)("circle", { cx: ex, cy: ey, r: 2, fill: fill, stroke: "none" }), (0, jsx_runtime_1.jsx)("text", { x: ex + (cos >= 0 ? 1 : -1) * 12, y: ey, textAnchor: textAnchor, className: PieChartNative_module_scss_1.default.pieLabel, fill: "currentColor", fontSize: 12, children: props.name })] }));
+};
+// Enhanced active shape renderer
+const renderActiveShape = (props) => {
+    const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
+    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 10, startAngle: startAngle, endAngle: endAngle, fill: fill }), (0, jsx_runtime_1.jsx)(recharts_1.Sector, { cx: cx, cy: cy, startAngle: startAngle, endAngle: endAngle, innerRadius: outerRadius + 6, outerRadius: outerRadius + 10, fill: fill })] }));
+};
+function PieChart({ data, dataKey, nameKey, style, showLabel = exports.defaultProps.showLabel, showLabelList = exports.defaultProps.showLabelList, labelListPosition = exports.defaultProps.labelListPosition, innerRadius = exports.defaultProps.innerRadius, children, width = "100%", height = "100%", outerRadius = "60%", showLegend = exports.defaultProps.showLegend, }) {
+    const { getThemeVar } = (0, xmlui_1.useTheme)();
+    const colorValues = (0, react_1.useMemo)(() => {
+        return [
+            getThemeVar("color-primary-500"),
+            getThemeVar("color-primary-300"),
+            getThemeVar("color-success-500"),
+            getThemeVar("color-success-300"),
+            getThemeVar("color-warn-500"),
+            getThemeVar("color-warn-300"),
+            getThemeVar("color-danger-500"),
+            getThemeVar("color-danger-300"),
+            getThemeVar("color-info-500"),
+            getThemeVar("color-info-300"),
+            getThemeVar("color-secondary-500"),
+            getThemeVar("color-secondary-300"),
+            getThemeVar("color-primary-600"),
+            getThemeVar("color-primary-400"),
+            getThemeVar("color-success-600"),
+            getThemeVar("color-success-400"),
+            getThemeVar("color-warn-600"),
+            getThemeVar("color-warn-400"),
+            getThemeVar("color-danger-600"),
+            getThemeVar("color-danger-400"),
+            getThemeVar("color-info-600"),
+            getThemeVar("color-info-400"),
+            getThemeVar("color-secondary-600"),
+            getThemeVar("color-secondary-400"),
+            getThemeVar("color-primary-900"),
+            getThemeVar("color-primary-700"),
+            getThemeVar("color-success-900"),
+            getThemeVar("color-success-700"),
+            getThemeVar("color-warn-900"),
+            getThemeVar("color-warn-700"),
+            getThemeVar("color-danger-900"),
+            getThemeVar("color-danger-700"),
+            getThemeVar("color-info-900"),
+            getThemeVar("color-info-700"),
+            getThemeVar("color-secondary-900"),
+            getThemeVar("color-secondary-700"),
+        ];
+    }, [getThemeVar]);
+    const chartData = (0, react_1.useMemo)(() => {
+        if (!data)
+            return [];
+        return data.map((item, index) => (Object.assign(Object.assign({}, item), { fill: item.fill || colorValues[index % colorValues.length] })));
+    }, [colorValues, data]);
+    const chartContextValue = (0, ChartProvider_1.useChartContextValue)({ dataKey, nameKey });
+    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, width: width, height: height, children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { children: [(0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), (0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: chartData, dataKey: dataKey, nameKey: nameKey, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: 1, activeShape: renderActiveShape, label: showLabel ? renderCustomizedLabel : false, labelLine: showLabel, children: chartContextValue.labelList
+                                ? chartContextValue.labelList
+                                : showLabelList && ((0, jsx_runtime_1.jsx)(recharts_1.LabelList, { position: labelListPosition, dataKey: nameKey, className: PieChartNative_module_scss_1.default.labelList, stroke: "none", fill: "currentColor", fontSize: 12 })) }), chartContextValue.legend ? chartContextValue.legend : showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {})] }) })] }));
+}

package/dist/scripts/src/components/Charts/Tooltip/TooltipContent.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TooltipContent_module_scss_1 = __importDefault(require("./TooltipContent.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+exports.TooltipContent = (0, react_1.forwardRef)(function ({ active, payload, indicator = "dot", hideLabel = false, label, color }, ref) {
+    if (active && payload && payload.length) {
+        const nestLabel = payload.length === 1 && indicator !== "dot";
+        return ((0, jsx_runtime_1.jsxs)("div", { className: TooltipContent_module_scss_1.default.tooltipContainer, ref: ref, children: [!hideLabel && (0, jsx_runtime_1.jsx)("p", { className: "label", children: label }), (0, jsx_runtime_1.jsx)("div", { className: TooltipContent_module_scss_1.default.gridGap, children: payload === null || payload === void 0 ? void 0 : payload.map((item, index) => {
+                        var _a;
+                        const indicatorColor = color || ((_a = item.payload) === null || _a === void 0 ? void 0 : _a.fill) || item.color;
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: TooltipContent_module_scss_1.default.itemContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(TooltipContent_module_scss_1.default.indicator, {
+                                        [TooltipContent_module_scss_1.default.dot]: indicator === "dot",
+                                        [TooltipContent_module_scss_1.default.line]: indicator === "line",
+                                        [TooltipContent_module_scss_1.default.dashed]: indicator === "dashed",
+                                        [TooltipContent_module_scss_1.default.nestDashed]: nestLabel && indicator === "dashed",
+                                    }), style: { backgroundColor: indicatorColor, borderColor: indicatorColor } }), (0, jsx_runtime_1.jsxs)("div", { className: TooltipContent_module_scss_1.default.valueContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: TooltipContent_module_scss_1.default.labelGrid, children: (0, jsx_runtime_1.jsx)("span", { className: TooltipContent_module_scss_1.default.mutedText, children: item.name }) }), item.value && ((0, jsx_runtime_1.jsx)("span", { className: TooltipContent_module_scss_1.default.valueText, children: item.value.toLocaleString() }))] })] }, index));
+                    }) })] }));
+    }
+    return null;
+});
+exports.TooltipContent.displayName = "TooltipContent";

package/dist/scripts/src/components/Charts/utils/ChartProvider.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChartContextValue = useChartContextValue;
+exports.useChart = useChart;
+exports.useLabelList = useLabelList;
+exports.useLegend = useLegend;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const ChartContext = (0, react_2.createContext)({
+    dataKey: "",
+    nameKey: "",
+    dataKeys: [],
+    labelList: null,
+    setLabelList: () => { },
+    legend: null,
+    setLegend: () => { },
+});
+function useChartContextValue({ dataKey = "", dataKeys = [], nameKey = "", }) {
+    const [dKey] = (0, react_1.useState)(dataKey);
+    const [dKeys] = (0, react_1.useState)(dataKeys);
+    const [nKey] = (0, react_1.useState)(nameKey);
+    const [labelList, setLabelList] = (0, react_1.useState)(null);
+    const [legend, setLegend] = (0, react_1.useState)(null);
+    return {
+        dataKey: dKey,
+        nameKey: nKey,
+        dataKeys: dKeys,
+        labelList,
+        setLabelList,
+        legend,
+        setLegend,
+    };
+}
+function useChart() {
+    const context = (0, react_2.useContext)(ChartContext);
+    if (context === undefined) {
+        throw new Error("useChart must be used within a ChartProvider");
+    }
+    return context;
+}
+function useLabelList() {
+    const context = (0, react_2.useContext)(ChartContext);
+    if (context === undefined) {
+        throw new Error("LabelList must be used within a chart");
+    }
+    const { setLabelList } = context;
+    return {
+        setLabelList,
+    };
+}
+function useLegend() {
+    const context = (0, react_2.useContext)(ChartContext);
+    if (context === undefined) {
+        throw new Error("Legend must be used within a chart");
+    }
+    const { setLegend } = context;
+    return {
+        setLegend,
+    };
+}
+function ChartProvider({ value, children }) {
+    return (0, jsx_runtime_1.jsx)(ChartContext.Provider, { value: value, children: children });
+}
+exports.default = ChartProvider;

package/dist/scripts/src/components/Charts/utils/abstractions.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelPositionValues = void 0;
+exports.LabelPositionValues = [
+    "top",
+    "left",
+    "right",
+    "bottom",
+    "inside",
+    "outside",
+    "insideLeft",
+    "insideRight",
+    "insideTop",
+    "insideBottom",
+    "insideTopLeft",
+    "insideBottomLeft",
+    "insideTopRight",
+    "insideBottomRight",
+    "insideStart",
+    "insideEnd",
+    "end",
+    "center",
+    "centerTop",
+    "centerBottom",
+    "middle",
+];

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

@@ -21,15 +21,15 @@ exports.CodeBlockMd = (0, ComponentDefs_1.createMetadata)({
         "backgroundColor-CodeBlock-header": "$color-primary-100",
         "marginTop-CodeBlock": "$space-5",
         "marginBottom-CodeBlock": "$space-5",
-        "backgroundColor-CodeBlock-highlightRow": "rgba($color-primary-200-rgb, .25)",
-        "backgroundColor-CodeBlock-highlightString": "rgba($color-primary-200-rgb, .5)",
+        "backgroundColor-CodeBlock-highlightRow": "rgb(from $color-primary-200 r g b / 0.25)",
+        "backgroundColor-CodeBlock-highlightString": "rgb(from $color-primary-200 r g b / 0.5)",
         "borderRadius-CodeBlock": "$space-2",
         "borderColor-CodeBlock-highlightString-emphasis": "$color-attention",
         dark: {
             "backgroundColor-CodeBlock-header": "$color-surface-200",
             "backgroundColor-CodeBlock": "$color-surface-50",
-            "backgroundColor-CodeBlock-highlightRow": "rgba($color-primary-300-rgb, .15)",
-            "backgroundColor-CodeBlock-highlightString": "rgba($color-primary-300-rgb, .5)",
+            "backgroundColor-CodeBlock-highlightRow": "rgb(from $color-primary-300 r g b / 0.15)",
+            "backgroundColor-CodeBlock-highlightString": "rgb(from $color-primary-300 r g b / 0.5)",
         }
     },
 });

package/dist/scripts/src/components/CodeBlock/CodeBlockNative.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.CodeBlock = CodeBlock;
 exports.isBrowser = isBrowser;
 exports.decodeValue = decodeValue;
@@ -15,11 +16,14 @@ const ButtonNative_1 = require("../Button/ButtonNative");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
 const unist_util_visit_1 = require("unist-util-visit");
+exports.defaultProps = {
+// No default props needed for this component currently
+};
 function CodeBlock({ children, meta, textToCopy, style }) {
     if (!meta) {
         return ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: children }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: [meta.filename && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockHeader, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "em", children: meta.filename }) })), (0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: [children, (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "outlined", themeColor: "primary", size: "sm", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "copy", "aria-hidden": true }), onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: [meta.filename && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockHeader, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "em", children: meta.filename }) })), (0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: [children, (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "xs", className: CodeBlock_module_scss_1.default.copyButton, icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "copy", "aria-hidden": true }), onClick: () => {
                                 if (!textToCopy)
                                     return;
                                 navigator.clipboard.writeText(textToCopy);

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

@@ -11,17 +11,21 @@ exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
         `column's visual properties and data bindings.`,
     props: {
         bindTo: {
-            description: `Indicates what part of the data to lay out in the column.`,
+            description: "Indicates the name of the current row item's property, the value of which to " +
+                "lay out in the column. If this property is not defined, the column is not sortable.",
             valueType: "string",
         },
         header: {
-            description: `Adds a label for a particular column.`,
+            description: "This property defines a label for a particular column. If not set, the " +
+                "`bindTo` property value is used for the label.",
             valueType: "string",
         },
         width: {
-            description: `This property defines the width of the column. You can use a numeric value, a pixel ` +
-                `value (such as \`100px\`), or a star size value (such as \`*\`, \`2*\`, etc.). ` +
-                `You will get an error if you use any other unit (or value).`,
+            description: "This property defines the width of the column. You can use a numeric value, a pixel " +
+                "value (such as \`100px\`), or a star size value (such as \`*\`, \`2*\`, etc.). " +
+                "You will get an error if you use any other unit (or value)." +
+                "If not defined, the component will use a width according to the column values and " +
+                "the available space.",
             valueType: "any",
         },
         minWidth: {
@@ -33,15 +37,16 @@ exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "any",
         },
         canSort: {
-            description: `This property sets whether the user can sort by a column by clicking on its header ` +
-                `(\`true\`) or not (\`false\`).`,
-            defaultValue: true,
+            description: "This property sets whether the user can sort by a column by clicking on its header " +
+                "(\`true\`) or not (\`false\`). If the `bindTo` property is not defined, the column is not sortable.",
+            defaultValue: ColumnNative_1.defaultProps.canSort,
             valueType: "boolean",
         },
         pinTo: {
             description: `This property allows the column to be pinned to ` +
                 `the \`left\` (left-to-right writing style) or \`right\` (left-to-right writing style) edge ` +
-                `of the table. If the writing style is right-to-left, the locations are switched.`,
+                "of the table. If the writing style is right-to-left, the locations are switched. " +
+                "If this property is not set, the column is not pinned to any edge.",
             availableValues: ["left", "right"],
             valueType: "string",
         },
@@ -51,6 +56,7 @@ exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
                 `\`false\`, the column cannot be resized. Double-clicking the column border ` +
                 `resets to the original size.`,
             valueType: "boolean",
+            defaultValue: ColumnNative_1.defaultProps.canResize,
         },
     },
     contextVars: {

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

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

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

@@ -1,7 +1,4 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentRegistry = void 0;
 exports.ComponentProvider = ComponentProvider;
@@ -98,14 +95,18 @@ const APICall_2 = require("./APICall/APICall");
 const Option_1 = require("./Option/Option");
 const AutoComplete_1 = require("./AutoComplete/AutoComplete");
 const Backdrop_1 = require("./Backdrop/Backdrop");
-// @ts-ignore
-const xmlui_charts_1 = __importDefault(require("xmlui-charts"));
 const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 const ColorPicker_1 = require("./ColorPicker/ColorPicker");
 const RadioItem_1 = require("./RadioGroup/RadioItem");
 const InspectButton_1 = require("./InspectButton/InspectButton");
 const NestedApp_1 = require("./NestedApp/NestedApp");
 const CodeBlock_1 = require("./CodeBlock/CodeBlock");
+const BarChart_1 = require("./Charts/BarChart/BarChart");
+const DonutChart_1 = require("./Charts/DonutChart/DonutChart");
+const LabelList_1 = require("./Charts/LabelList/LabelList");
+const Legend_1 = require("./Charts/Legend/Legend");
+const LineChart_1 = require("./Charts/LineChart/LineChart");
+const PieChart_1 = require("./Charts/PieChart/PieChart");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -358,7 +359,12 @@ class ComponentRegistry {
             this.registerCoreComponent(Markdown_1.markdownComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Charts !== "false") {
-            this.extensionRegistered(xmlui_charts_1.default);
+            this.registerCoreComponent(BarChart_1.barChartComponentRenderer);
+            this.registerCoreComponent(DonutChart_1.donutChartComponentRenderer);
+            this.registerCoreComponent(LabelList_1.labelListComponentRenderer);
+            this.registerCoreComponent(Legend_1.legendComponentRenderer);
+            this.registerCoreComponent(LineChart_1.lineChartComponentRenderer);
+            this.registerCoreComponent(PieChart_1.pieChartComponentRenderer);
         }
         if (process.env.VITE_INCLUDE_REST_COMPONENTS !== "false") {
             //TODO, if it proves to be a working solution, make these components skippable, too

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

@@ -18,8 +18,9 @@ exports.ContentSeparatorMd = (0, ComponentDefs_1.createMetadata)({
         `helping to improve readability and organization.`,
     props: {
         size: {
-            description: `This property defines the component's height (if the \`orientation\` is horizontal) ` +
-                `or the width (if the \`orientation\` is vertical).`,
+            description: "This property defines the component's height (if the \`orientation\` is horizontal) " +
+                "or the width (if the \`orientation\` is vertical). " +
+                "If not defined, the component uses the entire available width or height.",
             valueType: "any",
         },
         orientation: {
@@ -31,7 +32,7 @@ exports.ContentSeparatorMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(ContentSeparator_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`backgroundColor-${COMP}`]: "$borderColor",
+        [`backgroundColor-${COMP}`]: "$color-surface-200",
         [`size-${COMP}`]: "1px",
         light: {
         // --- No light-specific theme vars

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

@@ -79,15 +79,17 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
             ],
         },
         minValue: {
-            description: "The start date of the range of selectable dates",
+            description: "The optional start date of the selectable date range. If not defined, the range " +
+                "allows any dates in the past.",
             valueType: "string",
         },
         maxValue: {
-            description: "The end date of the range of selectable dates",
+            description: "The optional end date of the selectable date range. If not defined, the range allows " +
+                "any future dates.",
             valueType: "string",
         },
         disabledDates: {
-            description: "An array of dates that are disabled",
+            description: "An optional array of dates that are disabled",
             valueType: "any",
         },
         inline: {

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

@@ -13,7 +13,7 @@ exports.EmojiSelectorMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component provides users with a graphical interface to browse, search and ` +
         `select emojis to insert into text fields, messages, or other forms of communication.`,
     props: {
-        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        autoFocus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dAutoFocus)()), { defaultValue: EmojiSelectorNative_1.defaultProps.autoFocus }),
     },
     events: {
         select: (0, ComponentDefs_1.d)(`This event is fired when the user selects an emoticon from this component.`),

package/dist/scripts/src/components/EmojiSelector/EmojiSelectorNative.js

@@ -42,11 +42,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmojiSelector = void 0;
+exports.EmojiSelector = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const emoji_picker_react_1 = __importStar(require("emoji-picker-react"));
 const constants_1 = require("../../components-core/constants");
-const EmojiSelector = ({ select = constants_1.noop, theme = emoji_picker_react_1.Theme.LIGHT, autoFocus = false, }) => ((0, jsx_runtime_1.jsx)(emoji_picker_react_1.default, { autoFocusSearch: autoFocus, onEmojiClick: (emojiObject) => __awaiter(void 0, void 0, void 0, function* () {
+exports.defaultProps = {
+    theme: emoji_picker_react_1.Theme.LIGHT,
+    select: constants_1.noop,
+    autoFocus: false,
+};
+const EmojiSelector = ({ select = exports.defaultProps.select, theme = exports.defaultProps.theme, autoFocus = exports.defaultProps.autoFocus, }) => ((0, jsx_runtime_1.jsx)(emoji_picker_react_1.default, { autoFocusSearch: autoFocus, onEmojiClick: (emojiObject) => __awaiter(void 0, void 0, void 0, function* () {
         yield select(emojiObject.emoji);
     }), lazyLoadEmojis: true, theme: theme, previewConfig: { showPreview: false }, skinTonesDisabled: true, height: 360, emojiStyle: emoji_picker_react_1.EmojiStyle.NATIVE }));
 exports.EmojiSelector = EmojiSelector;

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

@@ -35,17 +35,16 @@ exports.FileInputMd = (0, ComponentDefs_1.createMetadata)({
         buttonLabel: (0, ComponentDefs_1.d)(`This property is an optional string to set a label for the button part.`),
         buttonIcon: (0, ComponentDefs_1.d)(`The ID of the icon to display in the button. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.browse:FileInput" declaration in the app configuration file.`),
-        buttonIconPosition: (0, ComponentDefs_1.d)(`This optional string determines the location of the button icon.`, abstractions_1.iconPositionNames),
-        acceptsFileType: (0, ComponentDefs_1.d)(`A list of file types the input controls accepts provided as a string array.`),
-        multiple: (0, ComponentDefs_1.d)(`This boolean property enables to add not just one (\`false\`), but multiple files to the field ` +
+        buttonIconPosition: (0, ComponentDefs_1.d)(`This optional string determines the location of the button icon.`, abstractions_1.iconPositionNames, "string", "start"),
+        acceptsFileType: (0, ComponentDefs_1.d)(`An optional list of file types the input controls accepts provided as a string array.`),
+        multiple: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This boolean property enables to add not just one (\`false\`), but multiple files to the field ` +
             `(\`true\`). This is done either by dragging onto the field or by selecting multiple files ` +
-            `in the browser menu after clicking the input field button.`, null, "boolean", false),
-        directory: (0, ComponentDefs_1.d)(`This boolean property indicates whether the component allows selecting directories (\`true\`) ` +
-            `or files only (\`false\`).`, null, "boolean", false),
-        buttonPosition: (0, ComponentDefs_1.d)(`This property determines the position of the button relative to the input field. ` +
-            `The default is "end".`, ["start", "end"]),
+            `in the browser menu after clicking the input field button.`, null, "boolean")), { defaultValue: FileInputNative_1.defaultProps.multiple }),
+        directory: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This boolean property indicates whether the component allows selecting directories (\`true\`) ` +
+            `or files only (\`false\`).`, null, "boolean")), { defaultValue: FileInputNative_1.defaultProps.directory }),
+        buttonPosition: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This property determines the position of the button relative to the input field.`, ["start", "end"])), { defaultValue: FileInputNative_1.defaultProps.buttonPosition }),
         buttonSize: (0, ComponentDefs_1.d)("The size of the button (small, medium, large)", abstractions_1.sizeMd),
-        buttonThemeColor: (0, ComponentDefs_1.d)("The button color scheme (primary, secondary, attention)", abstractions_1.buttonThemeNames),
+        buttonThemeColor: (0, ComponentDefs_1.d)("The button color scheme (primary, secondary, attention)", abstractions_1.buttonThemeNames, "string", FileInputNative_1.defaultProps.buttonThemeColor),
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),

package/dist/scripts/src/components/FileInput/FileInputNative.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.FileInput = void 0;
+exports.FileInput = exports.defaultProps = void 0;
 exports.isFile = isFile;
 exports.isFileArray = isFileArray;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -52,7 +52,19 @@ const TextBoxNative_1 = require("../TextBox/TextBoxNative");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 // https://github.com/react-dropzone/react-dropzone/issues/1259
 const { useDropzone } = dropzone;
-const FileInput = ({ id, enabled = true, style, placeholder, buttonPosition = "end", buttonLabel = "Browse", buttonIcon, buttonIconPosition, variant, buttonThemeColor, buttonSize, autoFocus, validationStatus, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, value, initialValue, acceptsFileType, multiple = false, directory = false, label, labelPosition, labelWidth, labelBreak, required, }) => {
+exports.defaultProps = {
+    enabled: true,
+    buttonPosition: "end",
+    buttonLabel: "Browse",
+    multiple: false,
+    directory: false,
+    buttonThemeColor: "primary",
+    updateState: constants_1.noop,
+    onDidChange: constants_1.noop,
+    onFocus: constants_1.noop,
+    onBlur: constants_1.noop,
+};
+const FileInput = ({ id, enabled = exports.defaultProps.enabled, style, placeholder, buttonPosition = exports.defaultProps.buttonPosition, buttonLabel = exports.defaultProps.buttonLabel, buttonIcon, buttonIconPosition, variant, buttonThemeColor, buttonSize, autoFocus, validationStatus, updateState = exports.defaultProps.updateState, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, value, initialValue, acceptsFileType, multiple = exports.defaultProps.multiple, directory = exports.defaultProps.directory, label, labelPosition, labelWidth, labelBreak, required, }) => {
     // Don't accept any (initial) value if it is not a File array explicitly
     const _initialValue = isFileArray(initialValue) ? initialValue : undefined;
     const _value = isFileArray(value) ? value : undefined;

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

@@ -18,7 +18,7 @@ exports.FileUploadDropZoneMd = (0, ComponentDefs_1.createMetadata)({
         text: {
             description: "With this property, you can change the default text to display when files " +
                 "are dragged over the drop zone.",
-            defaultValue: "Drop files here",
+            defaultValue: FileUploadDropZoneNative_1.defaultProps.text,
             type: "string",
         },
         allowPaste: {
@@ -26,7 +26,7 @@ exports.FileUploadDropZoneMd = (0, ComponentDefs_1.createMetadata)({
                 "clipboard (\`true\`) or " +
                 "only dragged files (\`false\`).",
             type: "boolean",
-            defaultValue: true,
+            defaultValue: FileUploadDropZoneNative_1.defaultProps.allowPaste,
         },
         enabled: (0, ComponentDefs_1.d)(`If set to \`false\`, the drop zone will be disabled and users will not be able to upload files.`, null, "boolean", true),
     },

package/dist/scripts/src/components/FileUploadDropZone/FileUploadDropZoneNative.js

@@ -45,7 +45,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileUploadDropZone = void 0;
+exports.FileUploadDropZone = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const dropzone = __importStar(require("react-dropzone"));
@@ -55,7 +55,14 @@ const constants_1 = require("../../components-core/constants");
 const IconNative_1 = require("../Icon/IconNative");
 // https://github.com/react-dropzone/react-dropzone/issues/1259
 const { useDropzone } = dropzone;
-exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone({ children, onUpload = constants_1.asyncNoop, uid = "fileUploadDialog", registerComponentApi, style, allowPaste = true, text = "Drop files here", disabled = false, }, forwardedRef) {
+exports.defaultProps = {
+    onUpload: constants_1.asyncNoop,
+    uid: "fileUploadDialog",
+    allowPaste: true,
+    text: "Drop files here",
+    disabled: false,
+};
+exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone({ children, onUpload = exports.defaultProps.onUpload, uid = exports.defaultProps.uid, registerComponentApi, style, allowPaste = exports.defaultProps.allowPaste, text = exports.defaultProps.text, disabled = exports.defaultProps.disabled, }, forwardedRef) {
     const onDrop = (0, react_1.useCallback)((acceptedFiles) => __awaiter(this, void 0, void 0, function* () {
         if (!acceptedFiles.length) {
             return;

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

@@ -23,6 +23,7 @@ exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
         [`borderTop-${COMP}`]: `1px solid $borderColor`,
         [`padding-${COMP}`]: "$space-2 $space-4",
+        [`gap-${COMP}`]: "$space-normal",
         light: {
         // --- No light-specific theme vars
         },

package/dist/scripts/src/components/Footer/FooterNative.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.Footer = void 0;
+exports.Footer = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
@@ -11,6 +11,9 @@ const Footer_module_scss_1 = __importDefault(require("./Footer.module.scss"));
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // =====================================================================================================================
 // React Footer component implementation
+exports.defaultProps = {
+// No default props needed currently, but adding object for consistency
+};
 exports.Footer = (0, react_1.forwardRef)(function Footer({ children, style, className, }, forwardedRef) {
     const { layout } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
     const canRestrictContentWidth = layout !== "vertical-full-header";