xmlui 0.7.26 → 0.7.28

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

@@ -15,7 +15,7 @@ const IconNative_1 = require("../Icon/IconNative");
 const ButtonNative_1 = require("./ButtonNative");
 const COMP = "Button";
 exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
-    description: `Button is an interactive element that triggers an action when clicked.`,
+    description: "Button is an interactive element that triggers an action when clicked.",
     status: "stable",
     props: {
         autoFocus: {
@@ -50,13 +50,11 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
                 `specified and an icon is set, the ${COMP} will modify its styling to look like a ` +
                 `small icon button. When the ${COMP} has nested children, it will display them and ` +
                 `ignore the value of the \`label\` prop.`,
-            isRequired: false,
             type: "string",
         },
         type: {
             description: `This optional string describes how the ${COMP} appears in an HTML context. You ` +
                 `rarely need to set this property explicitly.`,
-            isRequired: false,
             availableValues: abstractions_1.buttonTypesMd,
             valueType: "string",
             defaultValue: ButtonNative_1.propDefaults.type,
@@ -64,7 +62,6 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
         enabled: {
             description: `The value of this property indicates whether the button accepts actions (\`true\`) ` +
                 `or does not react to them (\`false\`).`,
-            isRequired: false,
             type: "boolean",
             defaultValue: true,
         },
@@ -73,12 +70,10 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
             description: `This string value denotes an icon name. The framework will render an icon if XMLUI ` +
                 `recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP} ` +
                 `displays only that icon.`,
-            isRequired: false,
             type: "string",
         },
         iconPosition: {
             description: `This optional string determines the location of the icon in the ${COMP}.`,
-            isRequired: false,
             availableValues: abstractions_1.iconPositionMd,
             type: "string",
             defaultValue: ButtonNative_1.propDefaults.iconPosition,
@@ -86,7 +81,6 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
         contentPosition: {
             description: `This optional value determines how the label and icon (or nested children) should be placed` +
                 `inside the ${COMP} component.`,
-            isRequired: false,
             availableValues: abstractions_1.alignmentOptionMd,
             type: "string",
             defaultValue: ButtonNative_1.propDefaults.contentPosition,

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

@@ -20,15 +20,29 @@ exports.ButtonGroupMd = (0, ComponentDefs_1.createMetadata)({
     description: `(**NOT IMPLEMENTED YET**) The \`${COMP}\` component is a container that embeds buttons used ` +
         `together for a particular reason. It provides a view that emphasizes this coherency.`,
     props: {
-        themeColor: (0, ComponentDefs_1.d)(`This optional property specifies the default theme color for the buttons in the group. ` +
-            `Individual buttons may override this setting with their \`themeColor\` property.`, abstractions_1.buttonThemeMd, "string", "primary"),
-        variant: (0, ComponentDefs_1.d)(`This optional property specifies the default variant for the buttons in the group. ` +
-            `Individual buttons may override this setting with their \`variant\` property.`, abstractions_1.buttonVariantMd, "string", "solid"),
+        themeColor: {
+            description: `This optional property specifies the default theme color for the buttons in the group. ` +
+                `Individual buttons may override this setting with their \`themeColor\` property.`,
+            availableValues: abstractions_1.buttonThemeMd,
+            valueType: "string",
+            defaultValue: "primary",
+        },
+        variant: {
+            description: `This optional property specifies the default variant for the buttons in the group. ` +
+                `Individual buttons may override this setting with their \`variant\` property.`,
+            availableValues: abstractions_1.buttonVariantMd,
+            valueType: "string",
+            defaultValue: "solid",
+        },
         orientation: (0, metadata_helpers_1.dOrientation)("horizontal"),
-        buttonWidth: (0, ComponentDefs_1.d)(`When this optional property is set, all buttons within the group will have the ` +
-            `specified width. If it is empty, each button's width accommodates its content.`),
-        gap: (0, ComponentDefs_1.d)(`When this optional property is set, adjacent buttons will have the specified gap ` +
-            `between them. If this property is not set, the buttons will be merged into one group.`),
+        buttonWidth: {
+            description: `When this optional property is set, all buttons within the group will have the ` +
+                `specified width. If it is empty, each button's width accommodates its content.`,
+        },
+        gap: {
+            description: `When this optional property is set, adjacent buttons will have the specified gap ` +
+                `between them. If this property is not set, the buttons will be merged into one group.`,
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(ButtonGroup_module_scss_1.default.themeVars),
     defaultThemeVars: {

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

@@ -16,16 +16,37 @@ const COMP = "Card";
 exports.CardMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component is a container for cohesive elements, often rendered visually as a card.`,
     props: {
-        avatarUrl: (0, ComponentDefs_1.d)(`Show the avatar (\`true\`) or not (\`false\`). If not specified, the ${COMP} will show the ` +
-            `first letters of the [\`title\`](#title).`),
-        showAvatar: (0, ComponentDefs_1.d)(`Indicates whether the ${COMP} should be displayed`, null, "boolean"),
-        title: (0, ComponentDefs_1.d)(`This prop sets the prestyled title.`),
-        subtitle: (0, ComponentDefs_1.d)(`This prop sets the prestyled subtitle.`),
-        linkTo: (0, ComponentDefs_1.d)(`This property wraps the title in a \`Link\` component that is clickable to navigate.`),
-        orientation: (0, ComponentDefs_1.d)(`An optional property that governs the ${COMP}'s orientation ` +
-            `(whether the ${COMP} lays out its children in a row or a column). ` +
-            `If the orientation is set to \`horizontal\`, the ${COMP} will display ` +
-            `its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`, abstractions_1.orientationOptionMd, "string", CardNative_1.DEFAULT_ORIENTATION),
+        avatarUrl: {
+            description: `Show the avatar (\`true\`) or not (\`false\`). If not specified, the ${COMP} will show the ` +
+                `first letters of the [\`title\`](#title).`,
+            type: "string",
+        },
+        showAvatar: {
+            description: `Indicates whether the ${COMP} should be displayed`,
+            valueType: "boolean",
+            defaultValue: CardNative_1.defaultProps.showAvatar,
+        },
+        title: {
+            description: `This prop sets the prestyled title.`,
+            valueType: "string",
+        },
+        subtitle: {
+            description: `This prop sets the prestyled subtitle.`,
+            valueType: "string",
+        },
+        linkTo: {
+            description: `This property wraps the title in a \`Link\` component that is clickable to navigate.`,
+            valueType: "string",
+        },
+        orientation: {
+            description: `An optional property that governs the ${COMP}'s orientation ` +
+                `(whether the ${COMP} lays out its children in a row or a column). ` +
+                `If the orientation is set to \`horizontal\`, the ${COMP} will display ` +
+                `its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`,
+            availableValues: abstractions_1.orientationOptionMd,
+            valueType: "string",
+            defaultValue: CardNative_1.defaultProps.orientation,
+        },
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),

package/dist/scripts/src/components/Card/CardNative.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.Card = exports.DEFAULT_ORIENTATION = void 0;
+exports.Card = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
@@ -13,8 +13,11 @@ const LinkNative_1 = require("../Link/LinkNative");
 const HeadingNative_1 = require("../Heading/HeadingNative");
 const StackNative_1 = require("../Stack/StackNative");
 const TextNative_1 = require("../Text/TextNative");
-exports.DEFAULT_ORIENTATION = "vertical";
-exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = exports.DEFAULT_ORIENTATION, style, title, subtitle, linkTo, avatarUrl, showAvatar = !!avatarUrl || false, onClick, }, forwardedRef) {
+exports.defaultProps = {
+    orientation: "vertical",
+    showAvatar: false,
+};
+exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = exports.defaultProps.orientation, style, title, subtitle, linkTo, avatarUrl, showAvatar = !!avatarUrl || exports.defaultProps.showAvatar, onClick, }, forwardedRef) {
     const titleProps = {
         level: "h2",
     };

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

@@ -11,24 +11,73 @@ const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const CarouselNative_1 = require("./CarouselNative");
+const abstractions_1 = require("../abstractions");
 const COMP = "Carousel";
 exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
     status: "in progress",
     description: `This component displays a slideshow by cycling through elements (images, text, or ` +
         `custom slides) like a carousel.`,
     props: {
-        orientation: (0, ComponentDefs_1.d)("This property indicates the orientation of the carousel. The `horizontal` value indicates that the carousel moves horizontally, and the `vertical` value indicates that the carousel moves vertically.", ["horizontal", "vertical"], null, "horizontal"),
-        indicators: (0, ComponentDefs_1.d)("This property indicates whether the carousel displays the indicators.", null, null, "true"),
-        controls: (0, ComponentDefs_1.d)("This property indicates whether the carousel displays the controls.", null, null, "true"),
-        autoplay: (0, ComponentDefs_1.d)("This property indicates whether the carousel automatically scrolls.", null, null, "false"),
-        loop: (0, ComponentDefs_1.d)("This property indicates whether the carousel loops.", null, null, "false"),
-        startIndex: (0, ComponentDefs_1.d)("This property indicates the index of the first slide to display.", null, null, "0"),
-        transitionDuration: (0, ComponentDefs_1.d)("This property specifies the duration of the transition between slides."),
-        autoplayInterval: (0, ComponentDefs_1.d)("This property specifies the interval between autoplay transitions."),
-        stopAutoplayOnInteraction: (0, ComponentDefs_1.d)("This property indicates whether autoplay stops on interaction."),
-        prevIcon: (0, ComponentDefs_1.d)("This property specifies the icon to display for the previous control."),
-        nextIcon: (0, ComponentDefs_1.d)("This property specifies the icon to display for the next control."),
-        keyboard: (0, ComponentDefs_1.d)("This property indicates whether the carousel responds to keyboard events."),
+        orientation: {
+            description: "This property indicates the orientation of the carousel. The `horizontal` " +
+                "value indicates that the carousel moves horizontally, and the `vertical` " +
+                "value indicates that the carousel moves vertically.",
+            availableValues: abstractions_1.orientationOptionMd,
+            valueType: "string",
+            defaultValue: CarouselNative_1.defaultProps.orientation,
+        },
+        indicators: {
+            description: "This property indicates whether the carousel displays the indicators.",
+            valueType: "boolean",
+            defaultValue: CarouselNative_1.defaultProps.indicators,
+        },
+        controls: {
+            description: "This property indicates whether the carousel displays the controls.",
+            valueType: "boolean",
+            defaultValue: CarouselNative_1.defaultProps.controls,
+        },
+        autoplay: {
+            description: "This property indicates whether the carousel automatically scrolls.",
+            valueType: "boolean",
+            defaultValue: CarouselNative_1.defaultProps.autoplay,
+        },
+        loop: {
+            description: "This property indicates whether the carousel loops.",
+            valueType: "boolean",
+            defaultValue: CarouselNative_1.defaultProps.loop,
+        },
+        startIndex: {
+            description: "This property indicates the index of the first slide to display.",
+            valueType: "number",
+            defaultValue: CarouselNative_1.defaultProps.startIndex,
+        },
+        transitionDuration: {
+            description: "This property indicates the duration of the transition between slides.",
+            valueType: "number",
+            defaultValue: CarouselNative_1.defaultProps.transitionDuration,
+        },
+        autoplayInterval: {
+            description: "This property specifies the interval between autoplay transitions.",
+            valueType: "number",
+            defaultValue: CarouselNative_1.defaultProps.autoplayInterval,
+        },
+        stopAutoplayOnInteraction: {
+            description: "This property indicates whether autoplay stops on interaction.",
+            valueType: "boolean",
+            defaultValue: CarouselNative_1.defaultProps.stopAutoplayOnInteraction,
+        },
+        prevIcon: {
+            description: "This property specifies the icon to display for the previous control.",
+            valueType: "string",
+        },
+        nextIcon: {
+            description: "This property specifies the icon to display for the next control.",
+            valueType: "string",
+        },
+        keyboard: {
+            description: "This property indicates whether the carousel responds to keyboard events.",
+            valueType: "boolean",
+        },
     },
     events: {
         displayDidChange: (0, metadata_helpers_1.dDidChange)(COMP),

package/dist/scripts/src/components/Carousel/CarouselNative.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.CarouselComponent = void 0;
+exports.CarouselComponent = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const react_1 = require("react");
@@ -48,7 +48,18 @@ const Carousel_module_scss_1 = __importDefault(require("./Carousel.module.scss")
 const constants_1 = require("../../components-core/constants");
 const CarouselContext_1 = require("./CarouselContext");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({ orientation = "horizontal", children, style, indicators = true, onDisplayDidChange = constants_1.noop, autoplay = false, controls = true, loop = false, startIndex = 0, prevIcon, nextIcon, transitionDuration = 25, autoplayInterval = 5000, stopAutoplayOnInteraction = true, registerComponentApi, }, forwardedRef) {
+exports.defaultProps = {
+    orientation: "horizontal",
+    indicators: true,
+    autoplay: false,
+    controls: true,
+    loop: false,
+    startIndex: 0,
+    transitionDuration: 25,
+    autoplayInterval: 5000,
+    stopAutoplayOnInteraction: true,
+};
+exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({ orientation = exports.defaultProps.orientation, children, style, indicators = exports.defaultProps.indicators, onDisplayDidChange = constants_1.noop, autoplay = exports.defaultProps.autoplay, controls = exports.defaultProps.controls, loop = exports.defaultProps.loop, startIndex = exports.defaultProps.startIndex, prevIcon, nextIcon, transitionDuration = exports.defaultProps.transitionDuration, autoplayInterval = exports.defaultProps.autoplayInterval, stopAutoplayOnInteraction = exports.defaultProps.stopAutoplayOnInteraction, registerComponentApi, }, forwardedRef) {
     const referenceElement = (0, react_1.useRef)(null);
     const [activeSlide, setActiveSlide] = (0, react_1.useState)(0);
     const [plugins, setPlugins] = (0, react_1.useState)([]);

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

@@ -11,9 +11,16 @@ exports.ChangeListenerMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a functional component (it renders no UI) to trigger an action when a ` +
         `particular value (component property, state, etc.) changes.`,
     props: {
-        listenTo: (0, ComponentDefs_1.d)(`Value to the changes of which this component listens.`),
-        throttleWaitInMs: (0, ComponentDefs_1.d)(`This variable sets a throttling time (in milliseconds) to apply when executing the \`didChange\` ` +
-            `event handler. All changes within that throttling time will only fire the \`didChange\` event once.`),
+        listenTo: {
+            description: `Value to the changes of which this component listens.`,
+            valueType: "any",
+        },
+        throttleWaitInMs: {
+            description: `This variable sets a throttling time (in milliseconds) to apply when executing the \`didChange\` ` +
+                `event handler. All changes within that throttling time will only fire the \`didChange\` event once.`,
+            valueType: "number",
+            defaultValue: ChangeListenerNative_1.defaultProps.throttleWaitInMs,
+        },
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),

package/dist/scripts/src/components/ChangeListener/ChangeListenerNative.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.ChangeListener = ChangeListener;
 const react_1 = require("react");
 const lodash_es_1 = require("lodash-es");
 const hooks_1 = require("../../components-core/utils/hooks");
-function ChangeListener({ listenTo, onChange, throttleWaitInMs = 0 }) {
+exports.defaultProps = {
+    throttleWaitInMs: 0,
+};
+function ChangeListener({ listenTo, onChange, throttleWaitInMs = exports.defaultProps.throttleWaitInMs }) {
     const prevValue = (0, hooks_1.usePrevious)(listenTo);
     const throttledOnChange = (0, react_1.useMemo)(() => {
         if (throttleWaitInMs !== 0 && onChange) {

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

@@ -18,23 +18,24 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component allows users to make binary choices, typically between checked or ` +
         `unchecked. It consists of a small box that can be toggled on or off by clicking on it.`,
     props: {
-        indeterminate: (0, metadata_helpers_1.dIndeterminate)(),
+        indeterminate: (0, metadata_helpers_1.dIndeterminate)(Toggle_1.defaultProps.indeterminate),
         label: (0, metadata_helpers_1.dLabel)(),
         labelPosition: (0, metadata_helpers_1.dLabelPosition)("end"),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         required: (0, metadata_helpers_1.dRequired)(),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(false),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(Toggle_1.defaultProps.initialValue),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        description: (0, ComponentDefs_1.d)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(Toggle_1.defaultProps.validationStatus),
+        description: (0, metadata_helpers_1.dInternal)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
             `of the ${COMP} besides its label.`),
-        inputTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom checkbox input template"),
+        inputTemplate: {
+            description: "This property is used to define a custom checkbox input template",
+        },
     },
     events: {
-        click: (0, metadata_helpers_1.dClick)(COMP),
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),
@@ -70,5 +71,5 @@ exports.checkboxComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     const inputTemplate = node.children || ((_a = node.props) === null || _a === void 0 ? void 0 : _a.inputTemplate);
     return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { inputRenderer: inputTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))
-            : undefined, enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, false), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi }));
+            : undefined, enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi }));
 });

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

@@ -13,18 +13,18 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
 const COMP = "ColorPicker";
 exports.ColorPickerMd = (0, ComponentDefs_1.createMetadata)({
-    description: ``,
+    description: "This component allows the user to select a color with the browser's default color picker control.",
     props: {
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)(),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(ColorPickerNative_1.defaultProps.validationStatus),
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),

package/dist/scripts/src/components/ColorPicker/ColorPickerNative.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.ColorPicker = void 0;
+exports.ColorPicker = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
@@ -12,7 +12,13 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
-exports.ColorPicker = (0, react_2.forwardRef)(({ style, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = true, value = "", autoFocus, tabIndex = -1, label, labelPosition, labelWidth, labelBreak, required, validationStatus = "none", initialValue, }, forwardedRef) => {
+exports.defaultProps = {
+    initialValue: "",
+    value: "",
+    enabled: true,
+    validationStatus: "none",
+};
+exports.ColorPicker = (0, react_2.forwardRef)(({ style, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, value = exports.defaultProps.value, autoFocus, tabIndex = -1, label, labelPosition, labelWidth, labelBreak, required, validationStatus = exports.defaultProps.validationStatus, initialValue = exports.defaultProps.initialValue, }, forwardedRef) => {
     const inputRef = (0, react_2.useRef)(null);
     const updateValue = (0, react_2.useCallback)((value) => {
         updateState({ value });

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

@@ -12,23 +12,45 @@ exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         bindTo: {
             description: `Indicates what part of the data to lay out in the column.`,
-            isRequired: true,
-        },
-        header: (0, ComponentDefs_1.d)(`Adds a label for a particular column.`),
-        width: (0, ComponentDefs_1.d)(`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).`),
-        minWidth: (0, ComponentDefs_1.d)(`Indicates the minimum width a particular column can have.`),
-        maxWidth: (0, ComponentDefs_1.d)(`Indicates the maximum width a particular column can have.`),
-        canSort: (0, ComponentDefs_1.d)(`This property sets whether the user can sort by a column by clicking on its header ` +
-            `(\`true\`) or not (\`false\`).`),
-        pinTo: (0, ComponentDefs_1.d)(`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.`, ["left", "right"], "string"),
-        canResize: (0, ComponentDefs_1.d)(`This property indicates whether the user can resize the column. If set to ` +
-            `\`true\`, the column can be resized by dragging the column border. If set to ` +
-            `\`false\`, the column cannot be resized. Double-clicking the column border ` +
-            `resets to the original size.`),
+            valueType: "string",
+        },
+        header: {
+            description: `Adds a label for a particular column.`,
+            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).`,
+            valueType: "any",
+        },
+        minWidth: {
+            description: `Indicates the minimum width a particular column can have. Same rules apply as with [width](#width).`,
+            valueType: "any",
+        },
+        maxWidth: {
+            description: `Indicates the maximum width a particular column can have. Same rules apply as with [width](#width).`,
+            valueType: "any",
+        },
+        canSort: {
+            description: `This property sets whether the user can sort by a column by clicking on its header ` +
+                `(\`true\`) or not (\`false\`).`,
+            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.`,
+            availableValues: ["left", "right"],
+            valueType: "string",
+        },
+        canResize: {
+            description: `This property indicates whether the user can resize the column. If set to ` +
+                `\`true\`, the column can be resized by dragging the column border. If set to ` +
+                `\`false\`, the column cannot be resized. Double-clicking the column border ` +
+                `resets to the original size.`,
+            valueType: "boolean",
+        },
     },
     contextVars: {
         $item: {

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

@@ -17,9 +17,17 @@ exports.ContentSeparatorMd = (0, ComponentDefs_1.createMetadata)({
         `It serves as a visual cue to distinguish between different sections or groups of content, ` +
         `helping to improve readability and organization.`,
     props: {
-        size: (0, ComponentDefs_1.d)(`This property defines the component's height (if the \`orientation\` is horizontal) ` +
-            `or the width (if the \`orientation\` is vertical).`),
-        orientation: (0, ComponentDefs_1.d)("Sets the main axis of the component", abstractions_1.orientationOptionMd),
+        size: {
+            description: `This property defines the component's height (if the \`orientation\` is horizontal) ` +
+                `or the width (if the \`orientation\` is vertical).`,
+            valueType: "any",
+        },
+        orientation: {
+            description: "Sets the main axis of the component",
+            availableValues: abstractions_1.orientationOptionMd,
+            defaultValue: ContentSeparatorNative_1.defaultProps.orientation,
+            valueType: "string",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(ContentSeparator_module_scss_1.default.themeVars),
     defaultThemeVars: {

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

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

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

@@ -20,16 +20,48 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        mode: (0, ComponentDefs_1.d)("The mode of the datepicker (single or range)"),
-        dateFormat: (0, ComponentDefs_1.d)("The format of the date displayed in the input field"),
-        showWeekNumber: (0, ComponentDefs_1.d)("Whether to show the week number in the calendar"),
-        weekStartsOn: (0, ComponentDefs_1.d)("The first day of the week. 0 is Sunday, 1 is Monday, etc."),
-        fromDate: (0, ComponentDefs_1.d)("The start date of the range of selectable dates"),
-        toDate: (0, ComponentDefs_1.d)("The end date of the range of selectable dates"),
-        disabledDates: (0, ComponentDefs_1.d)("An array of dates that are disabled"),
-        inline: (0, ComponentDefs_1.d)("The datepicker is displayed inline"),
+        enabled: (0, metadata_helpers_1.dEnabled)(DatePickerNative_1.defaultProps.enabled),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(DatePickerNative_1.defaultProps.validationStatus),
+        mode: {
+            description: "The mode of the datepicker (single or range)",
+            valueType: "string",
+            availableValues: DatePickerNative_1.DatePickerModeValues,
+            defaultValue: DatePickerNative_1.defaultProps.mode,
+        },
+        dateFormat: {
+            description: "The format of the date displayed in the input field",
+            valueType: "string",
+            defaultValue: DatePickerNative_1.defaultProps.dateFormat,
+            availableValues: DatePickerNative_1.dateFormats,
+        },
+        showWeekNumber: {
+            description: "Whether to show the week number in the calendar",
+            valueType: "boolean",
+            defaultValue: DatePickerNative_1.defaultProps.showWeekNumber,
+        },
+        weekStartsOn: {
+            description: "The first day of the week. 0 is Sunday, 1 is Monday, etc.",
+            valueType: "number",
+            defaultValue: DatePickerNative_1.defaultProps.weekStartsOn,
+            availableValues: DatePickerNative_1.weekDaysMd,
+        },
+        fromDate: {
+            description: "The start date of the range of selectable dates",
+            valueType: "string",
+        },
+        toDate: {
+            description: "The end date of the range of selectable dates",
+            valueType: "string",
+        },
+        disabledDates: {
+            description: "An array of dates that are disabled",
+            valueType: "any",
+        },
+        inline: {
+            description: "Whether to display the datepicker inline",
+            valueType: "boolean",
+            defaultValue: DatePickerNative_1.defaultProps.inline,
+        },
         startText: (0, metadata_helpers_1.dStartText)(),
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),