xmlui 0.7.21 → 0.7.23

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.emojiSelectorRenderer = exports.EmojiSelectorMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("@components-core/renderers");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const metadata_helpers_1 = require("../metadata-helpers");
 const EmojiSelectorNative_1 = require("./EmojiSelectorNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "EmojiSelector";
 exports.EmojiSelectorMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",

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

@@ -44,8 +44,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmojiSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const constants_1 = require("@components-core/constants");
 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* () {
         yield select(emojiObject.emoji);
     }), lazyLoadEmojis: true, theme: theme, previewConfig: { showPreview: false }, skinTonesDisabled: true, height: 360, emojiStyle: emoji_picker_react_1.EmojiStyle.NATIVE }));

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

@@ -5,14 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fileInputRenderer = exports.FileInputMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const IconNative_1 = require("@components/Icon/IconNative");
 const FileInput_module_scss_1 = __importDefault(require("./FileInput.module.scss"));
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const abstractions_1 = require("@components/abstractions");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../../components/metadata-helpers");
+const abstractions_1 = require("../abstractions");
+const IconNative_1 = require("../Icon/IconNative");
 const FileInputNative_1 = require("./FileInputNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "FileInput";
 exports.FileInputMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` is a user interface component that allows users to select files from their ` +

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

@@ -41,14 +41,14 @@ exports.isFile = isFile;
 exports.isFileArray = isFileArray;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const FileInput_module_scss_1 = __importDefault(require("./FileInput.module.scss"));
-const ButtonNative_1 = require("@components/Button/ButtonNative");
-const constants_1 = require("@components-core/constants");
 const dropzone = __importStar(require("react-dropzone"));
-const misc_1 = require("@components-core/utils/misc");
 const VisuallyHidden = __importStar(require("@radix-ui/react-visually-hidden"));
-const TextBoxNative_1 = require("@components/TextBox/TextBoxNative");
-const ItemWithLabel_1 = require("@components/FormItem/ItemWithLabel");
+const FileInput_module_scss_1 = __importDefault(require("./FileInput.module.scss"));
+const constants_1 = require("../../components-core/constants");
+const misc_1 = require("../../components-core/utils/misc");
+const ButtonNative_1 = require("../Button/ButtonNative");
+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, 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, }) => {

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fileUploadDropZoneComponentRenderer = exports.FileUploadDropZoneMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FileUploadDropZone_module_scss_1 = __importDefault(require("./FileUploadDropZone.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
 const FileUploadDropZoneNative_1 = require("./FileUploadDropZoneNative");
 const COMP = "FileUploadDropZone";
 exports.FileUploadDropZoneMd = (0, ComponentDefs_1.createMetadata)({

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

@@ -48,16 +48,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUploadDropZone = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("react");
 const dropzone = __importStar(require("react-dropzone"));
-const IconNative_1 = require("@components/Icon/IconNative");
 const FileUploadDropZone_module_scss_1 = __importDefault(require("./FileUploadDropZone.module.scss"));
-const misc_1 = require("@components-core/utils/misc");
-const constants_1 = require("@components-core/constants");
+const misc_1 = require("../../components-core/utils/misc");
+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) {
-    const onDrop = (0, react_2.useCallback)((acceptedFiles) => __awaiter(this, void 0, void 0, function* () {
+    const onDrop = (0, react_1.useCallback)((acceptedFiles) => __awaiter(this, void 0, void 0, function* () {
         if (!acceptedFiles.length) {
             return;
         }
@@ -73,7 +72,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
     const doOpen = (0, misc_1.useEvent)(() => {
         open();
     });
-    const handleOnPaste = (0, react_2.useCallback)((event) => {
+    const handleOnPaste = (0, react_1.useCallback)((event) => {
         var _a, _b;
         if (!allowPaste) {
             return;
@@ -103,7 +102,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
             }
         }
     }, [allowPaste, inputRef]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         registerComponentApi({
             open: doOpen,
         });

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

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.flowLayoutComponentRenderer = exports.FlowLayoutMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FlowLayout_module_scss_1 = __importDefault(require("./FlowLayout.module.scss"));
-const renderers_1 = require("@components-core/renderers");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const misc_1 = require("@components-core/utils/misc");
-const EngineError_1 = require("@components-core/EngineError");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const misc_1 = require("../../components-core/utils/misc");
+const EngineError_1 = require("../../components-core/EngineError");
+const themeVars_1 = require("../../components-core/theming/themeVars");
 const FlowLayoutNative_1 = require("./FlowLayoutNative");
 const COMP = "FlowLayout";
 exports.FlowLayoutMd = (0, ComponentDefs_1.createMetadata)({
@@ -32,7 +32,9 @@ exports.flowLayoutComponentRenderer = (0, renderers_1.createComponentRenderer)(C
     if (!(0, misc_1.isComponentDefChildren)(node.children)) {
         throw new EngineError_1.NotAComponentDefError();
     }
-    const columnGap = extractValue.asSize((_a = node.props) === null || _a === void 0 ? void 0 : _a.columnGap) || layoutCss.gap || extractValue.asSize("$space-4");
+    const columnGap = extractValue.asSize((_a = node.props) === null || _a === void 0 ? void 0 : _a.columnGap) ||
+        layoutCss.gap ||
+        extractValue.asSize("$space-4");
     const rowGap = extractValue.asSize((_b = node.props) === null || _b === void 0 ? void 0 : _b.rowGap) || layoutCss.gap || extractValue.asSize("$space-4");
     return ((0, jsx_runtime_1.jsx)(FlowLayoutNative_1.FlowLayout, { style: layoutCss, columnGap: columnGap, rowGap: rowGap, children: renderChild(node.children, {
             wrapChild: ({ node, extractValue }, renderedChild, hints) => {

package/dist/scripts/src/components/FlowLayout/FlowLayoutNative.js

@@ -17,16 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlowLayout = exports.FlowItemWrapper = exports.FlowItemBreak = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("react");
-const FlowLayout_module_scss_1 = __importDefault(require("./FlowLayout.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const style_compiler_1 = require("../../parsers/style-parser/style-compiler");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const classnames_1 = __importDefault(require("classnames"));
 const lodash_es_1 = require("lodash-es");
-const css_utils_1 = require("@components-core/utils/css-utils");
-const hooks_1 = require("@components-core/utils/hooks");
+const FlowLayout_module_scss_1 = __importDefault(require("./FlowLayout.module.scss"));
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const css_utils_1 = require("../../components-core/utils/css-utils");
+const hooks_1 = require("../../components-core/utils/hooks");
+const layout_resolver_1 = require("../../components-core/theming/layout-resolver");
 const resolvedCssVars = {};
-const FlowLayoutContext = (0, react_2.createContext)({
+const FlowLayoutContext = (0, react_1.createContext)({
     rowGap: 0,
     columnGap: 0,
     setNumberOfChildren: lodash_es_1.noop,
@@ -35,7 +34,7 @@ const FlowItemBreak = ({ force }) => ((0, jsx_runtime_1.jsx)("div", { className:
 exports.FlowItemBreak = FlowItemBreak;
 exports.FlowItemWrapper = (0, react_1.forwardRef)(function FlowItemWrapper(_a, ref) {
     var { children, forceBreak } = _a, restProps = __rest(_a, ["children", "forceBreak"]);
-    const { rowGap, columnGap, setNumberOfChildren } = (0, react_2.useContext)(FlowLayoutContext);
+    const { rowGap, columnGap, setNumberOfChildren } = (0, react_1.useContext)(FlowLayoutContext);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         setNumberOfChildren((prev) => prev + 1);
         return () => {
@@ -46,13 +45,25 @@ exports.FlowItemWrapper = (0, react_1.forwardRef)(function FlowItemWrapper(_a, r
     const _width = restProps.width || "100%";
     const _minWidth = restProps.minWidth || undefined;
     const _maxWidth = restProps.maxWidth || undefined;
-    const { width = _width, minWidth, maxWidth, flex, } = (0, react_2.useMemo)(() => {
-        return ((0, style_compiler_1.compileLayout)({ width: _width, maxWidth: _maxWidth, minWidth: _minWidth }, activeTheme.themeVars, {
+    const { width = _width, minWidth, maxWidth, flex, } = (0, react_1.useMemo)(() => {
+        return (
+        // --- New layout resolution
+        (0, layout_resolver_1.resolveLayoutProps)({ width: _width, maxWidth: _maxWidth, minWidth: _minWidth }, {
             type: "Stack",
             orientation: "horizontal",
-        }).cssProps || {});
+        }).cssProps || {}
+        // --- Old layout resolution
+        // compileLayout(
+        //   { width: _width, maxWidth: _maxWidth, minWidth: _minWidth },
+        //   activeTheme.themeVars,
+        //   {
+        //     type: "Stack",
+        //     orientation: "horizontal",
+        //   },
+        // ).cssProps || {}
+        );
     }, [_maxWidth, _minWidth, _width, activeTheme.themeVars]);
-    const resolvedWidth = (0, react_2.useMemo)(() => {
+    const resolvedWidth = (0, react_1.useMemo)(() => {
         if (width && typeof width === "string" && width.startsWith("var(")) {
             if (!resolvedCssVars[width]) {
                 const varName = width.substring(4, width.length - 1);
@@ -87,17 +98,17 @@ exports.FlowItemWrapper = (0, react_1.forwardRef)(function FlowItemWrapper(_a, r
                 }), ref: ref, children: children }), isStarSizing && (0, jsx_runtime_1.jsx)(exports.FlowItemBreak, {})] }));
 });
 exports.FlowLayout = (0, react_1.forwardRef)(function FlowLayout({ style, columnGap = 0, rowGap = 0, children }, forwardedRef) {
-    const [numberOfChildren, setNumberOfChildren] = (0, react_2.useState)(0);
+    const [numberOfChildren, setNumberOfChildren] = (0, react_1.useState)(0);
     const safeColumnGap = numberOfChildren === 1 ? 0 : columnGap;
     // --- Be smart about rowGap
     const _rowGap = (0, css_utils_1.getSizeString)(rowGap);
     const _columnGap = (0, css_utils_1.getSizeString)(safeColumnGap);
-    const innerStyle = (0, react_2.useMemo)(() => ({
+    const innerStyle = (0, react_1.useMemo)(() => ({
         // We put a negative margin on the container to fill the space for the row's last columnGap
         marginRight: `calc(-1 * ${_columnGap})`,
         marginBottom: `calc(-1 * ${_rowGap})`,
     }), [_columnGap, _rowGap]);
-    const flowLayoutContextValue = (0, react_2.useMemo)(() => {
+    const flowLayoutContextValue = (0, react_1.useMemo)(() => {
         return {
             rowGap: _rowGap,
             columnGap: _columnGap,

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.footerRenderer = exports.FooterMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Footer_module_scss_1 = __importDefault(require("./Footer.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const base_utils_1 = require("@components-core/theming/themes/base-utils");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const base_utils_1 = require("../../components-core/theming/themes/base-utils");
 const FooterNative_1 = require("./FooterNative");
 const COMP = "Footer";
 exports.FooterMd = (0, ComponentDefs_1.createMetadata)({

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
 const Footer_module_scss_1 = __importDefault(require("./Footer.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
+const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // =====================================================================================================================
 // React Footer component implementation
 exports.Footer = (0, react_1.forwardRef)(function Footer({ children, style, className, }, forwardedRef) {

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.formComponentRenderer = exports.FormMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Form_module_scss_1 = __importDefault(require("./Form.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
+const abstractions_1 = require("../abstractions");
 const FormNative_1 = require("./FormNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
-const abstractions_1 = require("@components/abstractions");
 const COMP = "Form";
 exports.FormMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",

package/dist/scripts/src/components/Form/FormNative.js

@@ -17,21 +17,21 @@ exports.FormWithContextVar = FormWithContextVar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
-const Form_module_scss_1 = __importDefault(require("./Form.module.scss"));
+const react_dom_1 = require("react-dom");
 const immer_1 = __importDefault(require("immer"));
+const Form_module_scss_1 = __importDefault(require("./Form.module.scss"));
+const constants_1 = require("../../components-core/constants");
+const misc_1 = require("../../components-core/utils/misc");
+const formActions_1 = require("../../components/Form/formActions");
+const ModalDialogNative_1 = require("../../components/ModalDialog/ModalDialogNative");
+const TextNative_1 = require("../../components/Text/TextNative");
+const StackNative_1 = require("../../components/Stack/StackNative");
+const ModalVisibilityContext_1 = require("../../components/ModalDialog/ModalVisibilityContext");
+const ButtonNative_1 = require("../Button/ButtonNative");
+const ValidationSummary_1 = require("../ValidationSummary/ValidationSummary");
+const Validations_1 = require("../FormItem/Validations");
+const formActions_2 = require("../Form/formActions");
 const FormContext_1 = require("./FormContext");
-const ButtonNative_1 = require("@components/Button/ButtonNative");
-const constants_1 = require("@components-core/constants");
-const ValidationSummary_1 = require("@components/ValidationSummary/ValidationSummary");
-const misc_1 = require("@components-core/utils/misc");
-const Validations_1 = require("@components/FormItem/Validations");
-const formActions_1 = require("@components/Form/formActions");
-const formActions_2 = require("@components/Form/formActions");
-const ModalDialogNative_1 = require("@components/ModalDialog/ModalDialogNative");
-const TextNative_1 = require("@components/Text/TextNative");
-const StackNative_1 = require("@components/Stack/StackNative");
-const ModalVisibilityContext_1 = require("@components/ModalDialog/ModalVisibilityContext");
-const react_dom_1 = require("react-dom");
 const setByPath = (obj, path, val) => {
     const keys = path.split(".");
     for (let i = 0; i < keys.length; i++) {
@@ -69,23 +69,23 @@ const formReducer = (0, immer_1.default)((state, action) => {
         };
     }
     switch (action.type) {
-        case formActions_2.FormActionKind.FIELD_INITIALIZED: {
+        case formActions_1.FormActionKind.FIELD_INITIALIZED: {
             if (!state.interactionFlags[uid].isDirty) {
                 setByPath(state.subject, uid, action.payload.value);
             }
             break;
         }
-        case formActions_2.FormActionKind.FIELD_REMOVED: {
+        case formActions_1.FormActionKind.FIELD_REMOVED: {
             delete state.validationResults[uid];
             break;
         }
-        case formActions_2.FormActionKind.FIELD_VALUE_CHANGED: {
+        case formActions_1.FormActionKind.FIELD_VALUE_CHANGED: {
             setByPath(state.subject, uid, action.payload.value);
             state.interactionFlags[uid].isDirty = true;
             state.interactionFlags[uid].forceShowValidationResult = false;
             break;
         }
-        case formActions_2.FormActionKind.FIELD_VALIDATED: {
+        case formActions_1.FormActionKind.FIELD_VALIDATED: {
             // it means no validation happened, ignore it
             if (action.payload.validationResult.validations.length === 0) {
                 delete state.validationResults[uid];
@@ -107,27 +107,27 @@ const formReducer = (0, immer_1.default)((state, action) => {
                 !prevValid && state.validationResults[uid].isValid;
             break;
         }
-        case formActions_2.FormActionKind.FIELD_FOCUSED: {
+        case formActions_1.FormActionKind.FIELD_FOCUSED: {
             state.interactionFlags[uid].isValidOnFocus = !!((_c = state.validationResults[uid]) === null || _c === void 0 ? void 0 : _c.isValid);
             state.interactionFlags[uid].focused = true;
             break;
         }
-        case formActions_2.FormActionKind.FIELD_LOST_FOCUS: {
+        case formActions_1.FormActionKind.FIELD_LOST_FOCUS: {
             state.interactionFlags[uid].isValidLostFocus = !!((_d = state.validationResults[uid]) === null || _d === void 0 ? void 0 : _d.isValid);
             state.interactionFlags[uid].focused = false;
             break;
         }
-        case formActions_2.FormActionKind.TRIED_TO_SUBMIT: {
+        case formActions_1.FormActionKind.TRIED_TO_SUBMIT: {
             Object.keys(state.interactionFlags).forEach((key) => {
                 state.interactionFlags[key].forceShowValidationResult = true;
             });
             break;
         }
-        case formActions_2.FormActionKind.SUBMITTING: {
+        case formActions_1.FormActionKind.SUBMITTING: {
             state.submitInProgress = true;
             break;
         }
-        case formActions_2.FormActionKind.SUBMITTED: {
+        case formActions_1.FormActionKind.SUBMITTED: {
             state.submitInProgress = false;
             state.generalValidationResults = [];
             state.interactionFlags = {};
@@ -139,7 +139,7 @@ const formReducer = (0, immer_1.default)((state, action) => {
             });
             break;
         }
-        case formActions_2.FormActionKind.BACKEND_VALIDATION_ARRIVED: {
+        case formActions_1.FormActionKind.BACKEND_VALIDATION_ARRIVED: {
             state.submitInProgress = false;
             state.generalValidationResults = action.payload.generalValidationResults;
             Object.keys(state.validationResults).forEach((key) => {
@@ -157,7 +157,7 @@ const formReducer = (0, immer_1.default)((state, action) => {
             });
             break;
         }
-        case formActions_2.FormActionKind.RESET: {
+        case formActions_1.FormActionKind.RESET: {
             const { originalSubject } = action.payload;
             return Object.assign(Object.assign({}, initialState), { subject: originalSubject });
             break;
@@ -212,7 +212,7 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
             return;
         }
         setConfirmSubmitModalVisible(false);
-        dispatch((0, formActions_2.triedToSubmit)());
+        dispatch((0, formActions_1.triedToSubmit)());
         const { error, warning } = (0, Validations_1.groupInvalidValidationResultsBySeverity)(Object.values(formState.validationResults));
         if (error.length) {
             return;
@@ -222,12 +222,12 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
             return;
         }
         const prevFocused = document.activeElement;
-        dispatch((0, formActions_2.formSubmitting)());
+        dispatch((0, formActions_1.formSubmitting)());
         try {
             yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formState.subject, {
                 passAsDefaultBody: true,
             }));
-            dispatch((0, formActions_2.formSubmitted)());
+            dispatch((0, formActions_1.formSubmitted)());
             if (!keepModalOpenOnSubmit) {
                 requestModalFormClose();
             }
@@ -273,14 +273,14 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
                     fromBackend: true,
                 });
             }
-            dispatch((0, formActions_2.backendValidationArrived)({
+            dispatch((0, formActions_1.backendValidationArrived)({
                 generalValidationResults,
                 fieldValidationResults,
             }));
         }
     }));
     const doReset = (0, misc_1.useEvent)(() => {
-        dispatch((0, formActions_1.formReset)(initialValue));
+        dispatch((0, formActions_2.formReset)(initialValue));
         onReset === null || onReset === void 0 ? void 0 : onReset();
     });
     const cancelButton = cancelLabel === "" ? null : ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: "button", themeColor: "secondary", variant: "ghost", onClick: doCancel, children: cancelLabel }, "cancel"));

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

@@ -16,13 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formItemComponentRenderer = exports.FormItemMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
 const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
 const Validations_1 = require("./Validations");
 const FormItemNative_1 = require("./FormItemNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "FormItem";
 exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -15,24 +15,26 @@ exports.FormItem = void 0;
 exports.CustomFormItem = CustomFormItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const FormContext_1 = require("@components/Form/FormContext");
-const TextBoxNative_1 = require("@components/TextBox/TextBoxNative");
-const Toggle_1 = require("@components/Toggle/Toggle");
-const FileInputNative_1 = require("@components/FileInput/FileInputNative");
-const NumberBoxNative_1 = require("@components/NumberBox/NumberBoxNative");
-const SelectNative_1 = require("@components/Select/SelectNative");
-const RadioGroupNative_1 = require("@components/RadioGroup/RadioGroupNative");
-const HelperText_1 = require("@components/FormItem/HelperText");
 const react_2 = require("@formkit/auto-animate/react");
-const Validations_1 = require("./Validations");
-const formActions_1 = require("@components/Form/formActions");
-const TextAreaNative_1 = require("@components/TextArea/TextAreaNative");
-const misc_1 = require("@components-core/utils/misc");
+const valueExtractor_1 = require("../../components-core/rendering/valueExtractor");
+const FormContext_1 = require("../Form/FormContext");
+const TextBoxNative_1 = require("../TextBox/TextBoxNative");
+const Toggle_1 = require("../Toggle/Toggle");
+const FileInputNative_1 = require("../FileInput/FileInputNative");
+const NumberBoxNative_1 = require("../NumberBox/NumberBoxNative");
+const SelectNative_1 = require("../Select/SelectNative");
+const RadioGroupNative_1 = require("../RadioGroup/RadioGroupNative");
+const HelperText_1 = require("../FormItem/HelperText");
+const formActions_1 = require("../Form/formActions");
+const TextAreaNative_1 = require("../TextArea/TextAreaNative");
+const misc_1 = require("../../components-core/utils/misc");
+const DatePickerNative_1 = require("../DatePicker/DatePickerNative");
+const FormNative_1 = require("../Form/FormNative");
+const AutoCompleteNative_1 = require("../AutoComplete/AutoCompleteNative");
 const ItemWithLabel_1 = require("./ItemWithLabel");
-const DatePickerNative_1 = require("@components/DatePicker/DatePickerNative");
-const FormNative_1 = require("@components/Form/FormNative");
-const valueExtractor_1 = require("@components-core/rendering/valueExtractor");
-const AutoCompleteNative_1 = require("@components/AutoComplete/AutoCompleteNative");
+const Validations_1 = require("./Validations");
+const SliderNative_1 = require("../Slider/SliderNative");
+const ColorPickerNative_1 = require("../ColorPicker/ColorPickerNative");
 const DEFAULT_LABEL_POSITIONS = {
     checkbox: "end",
 };
@@ -114,6 +116,14 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             formControl = ((0, jsx_runtime_1.jsx)(TextAreaNative_1.TextArea, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
             break;
         }
+        case "slider": {
+            formControl = ((0, jsx_runtime_1.jsx)(SliderNative_1.Slider, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue })));
+            break;
+        }
+        case "colorpicker": {
+            formControl = ((0, jsx_runtime_1.jsx)(ColorPickerNative_1.ColorPicker, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus })));
+            break;
+        }
         case "custom": {
             formControl = children;
             break;

package/dist/scripts/src/components/FormItem/HelperText.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelperText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const classnames_1 = __importDefault(require("classnames"));
 const HelperText_module_scss_1 = __importDefault(require("./HelperText.module.scss"));
-const WarningIcon_1 = require("@components/Icon/WarningIcon");
-const ErrorIcon_1 = require("@components/Icon/ErrorIcon");
+const WarningIcon_1 = require("../Icon/WarningIcon");
+const ErrorIcon_1 = require("../Icon/ErrorIcon");
 const HelperText = ({ text = "", status, style }) => {
     const renderStatusIcon = () => {
         if (status === "warning") {

package/dist/scripts/src/components/FormItem/ItemWithLabel.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemWithLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("react");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
-const SpinnerNative_1 = require("@components/Spinner/SpinnerNative");
+const classnames_1 = __importDefault(require("classnames"));
 const react_slot_1 = require("@radix-ui/react-slot");
+const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
+const SpinnerNative_1 = require("../Spinner/SpinnerNative");
 const numberRegex = /^[0-9]+$/;
 exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel({ id, labelPosition = "top", style, label, labelBreak = true, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, }, ref) {
-    const generatedId = (0, react_2.useId)();
+    const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
     if (label === undefined) {
         return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { style: style, id: inputId, onFocus: onFocus, onBlur: onBlur, ref: ref, children: children }));
@@ -36,5 +35,5 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel({ id, lab
                             [FormItem_module_scss_1.default.required]: required,
                             [FormItem_module_scss_1.default.disabled]: !enabled,
                             [FormItem_module_scss_1.default.labelBreak]: labelBreak,
-                        }), children: [label, " ", required && (0, jsx_runtime_1.jsx)("span", { className: FormItem_module_scss_1.default.requiredMark, children: "*" }), validationInProgress && ((0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, { style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" } }))] })), react_2.Children.only((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { id: inputId, children: children }))] }), validationResult] }));
+                        }), children: [label, " ", required && (0, jsx_runtime_1.jsx)("span", { className: FormItem_module_scss_1.default.requiredMark, children: "*" }), validationInProgress && ((0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, { style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" } }))] })), react_1.Children.only((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { id: inputId, children: children }))] }), validationResult] }));
 });

package/dist/scripts/src/components/FormItem/Validations.js

@@ -13,12 +13,12 @@ exports.useValidation = useValidation;
 exports.useValidationDisplay = useValidationDisplay;
 exports.parseSeverity = parseSeverity;
 exports.groupInvalidValidationResultsBySeverity = groupInvalidValidationResultsBySeverity;
-const lodash_es_1 = require("lodash-es");
-const FormContext_1 = require("@components/Form/FormContext");
 const react_1 = require("react");
-const misc_1 = require("@components-core/utils/misc");
-const constants_1 = require("@components-core/constants");
-const formActions_1 = require("@components/Form/formActions");
+const lodash_es_1 = require("lodash-es");
+const misc_1 = require("../../components-core/utils/misc");
+const constants_1 = require("../../components-core/constants");
+const FormContext_1 = require("../Form/FormContext");
+const formActions_1 = require("../Form/formActions");
 function isInputEmpty(value) {
     if (value === undefined || value === null || value === "")
         return true;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formSectionRenderer = exports.FormSectionMd = void 0;
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const compound_utils_1 = require("@components-core/utils/compound-utils");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const compound_utils_1 = require("../../components-core/utils/compound-utils");
 // --- We cannot use this with nextra
 // import componentSource from "./FormSection.xmlui?raw";
 const COMP = "FormSection";