xmlui 0.7.20 → 0.7.22

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.contentSeparatorComponentRenderer = exports.ContentSeparatorMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContentSeparator_module_scss_1 = __importDefault(require("./ContentSeparator.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
-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 abstractions_1 = require("../abstractions");
 const ContentSeparatorNative_1 = require("./ContentSeparatorNative");
 const COMP = "ContentSeparator";
 exports.ContentSeparatorMd = (0, ComponentDefs_1.createMetadata)({

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentSeparator = 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 classnames_1 = __importDefault(require("@components-core/utils/classnames"));
 const ContentSeparator = ({ orientation = "horizontal", 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",

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

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.datePickerComponentRenderer = exports.DatePickerMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("@components-core/renderers");
 const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
-const themeVars_1 = require("@components-core/theming/themeVars");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+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 DatePickerNative_1 = require("./DatePickerNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "DatePicker";
 exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",

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

@@ -39,16 +39,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("react");
 const react_day_picker_1 = require("react-day-picker");
 const date_fns_1 = require("date-fns");
 const ReactDropdownMenu = __importStar(require("@radix-ui/react-dropdown-menu"));
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const constants_1 = require("@components-core/constants");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
-const misc_1 = require("@components-core/utils/misc");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const classnames_1 = __importDefault(require("classnames"));
+const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const constants_1 = require("../../components-core/constants");
+const misc_1 = require("../../components-core/utils/misc");
 var WeekDays;
 (function (WeekDays) {
     WeekDays[WeekDays["Sunday"] = 0] = "Sunday";
@@ -93,11 +92,11 @@ const parseDate = (dateString) => {
 exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialValue, value, mode = "single", enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = "MM/dd/yyyy", // Default dateFormat
 showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabledDates = [], style, registerComponentApi, }, forwardedRef) {
     const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
-    const [isButtonFocused, setIsButtonFocused] = (0, react_2.useState)(false);
-    const [isMenuFocused, setIsMenuFocused] = (0, react_2.useState)(false);
+    const [isButtonFocused, setIsButtonFocused] = (0, react_1.useState)(false);
+    const [isMenuFocused, setIsMenuFocused] = (0, react_1.useState)(false);
     const referenceElement = (0, react_1.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(referenceElement, forwardedRef) : referenceElement;
-    const selected = (0, react_2.useMemo)(() => {
+    const selected = (0, react_1.useMemo)(() => {
         if (mode === "single" && typeof value === "string") {
             return parseISODate(value) || parseDate(value);
         }
@@ -109,21 +108,21 @@ showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabl
         }
         return undefined;
     }, [value, mode]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (!dateFormats.includes(dateFormat)) {
             throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${dateFormats.join(", ")}`);
         }
     }, [dateFormat]);
-    const startDate = (0, react_2.useMemo)(() => {
+    const startDate = (0, react_1.useMemo)(() => {
         return fromDate ? (0, date_fns_1.parse)(fromDate, dateFormat, new Date()) : undefined;
     }, [fromDate, dateFormat]);
-    const endDate = (0, react_2.useMemo)(() => {
+    const endDate = (0, react_1.useMemo)(() => {
         return toDate ? (0, date_fns_1.parse)(toDate, dateFormat, new Date()) : undefined;
     }, [toDate, dateFormat]);
-    const disabled = (0, react_2.useMemo)(() => {
+    const disabled = (0, react_1.useMemo)(() => {
         return disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.map((date) => (0, date_fns_1.parse)(date, dateFormat, new Date()));
     }, [disabledDates, dateFormat]);
-    const [open, setOpen] = (0, react_2.useState)(false);
+    const [open, setOpen] = (0, react_1.useState)(false);
     const { root } = (0, ThemeContext_1.useTheme)();
     const handleOnButtonFocus = () => {
         setIsButtonFocused(true);
@@ -138,7 +137,7 @@ showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabl
         setIsMenuFocused(false);
     };
     // Register component API for external interactions
-    const focus = (0, react_2.useCallback)(() => {
+    const focus = (0, react_1.useCallback)(() => {
         var _a;
         (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current]);
@@ -146,13 +145,13 @@ showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabl
         const parsedDate = parseDate(newValue);
         handleSelect(parsedDate);
     });
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (!isButtonFocused && !isMenuFocused) {
             onBlur === null || onBlur === void 0 ? void 0 : onBlur();
         }
@@ -160,10 +159,10 @@ showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabl
             onFocus === null || onFocus === void 0 ? void 0 : onFocus();
         }
     }, [isButtonFocused, isMenuFocused, onFocus, onBlur]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         updateState({ value: initialValue }, { initial: true });
     }, [initialValue, updateState]);
-    const handleSelect = (0, react_2.useCallback)((dateOrRange) => {
+    const handleSelect = (0, react_1.useCallback)((dateOrRange) => {
         if (!dateOrRange) {
             updateState({ value: undefined });
             onDidChange("");

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.menuSeparatorRenderer = exports.MenuSeparatorMd = exports.subMenuItemRenderer = exports.SubMenuItemMd = exports.menuItemRenderer = exports.MenuItemMd = exports.dropdownMenuComponentRenderer = exports.DropdownMenuMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DropdownMenu_module_scss_1 = __importDefault(require("./DropdownMenu.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const abstractions_1 = require("@components/abstractions");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const IconNative_1 = require("@components/Icon/IconNative");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const abstractions_1 = require("../abstractions");
+const metadata_helpers_1 = require("../metadata-helpers");
+const IconNative_1 = require("../Icon/IconNative");
 const DropdownMenuNative_1 = require("./DropdownMenuNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const DDMCOMP = "DropdownMenu";
 exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
     description: `This component represents a dropdown menu with a trigger. When the user clicks the trigger, ` +

package/dist/scripts/src/components/DropdownMenu/DropdownMenuNative.js

@@ -53,12 +53,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
 const ReactDropdownMenu = __importStar(require("@radix-ui/react-dropdown-menu"));
+const classnames_1 = __importDefault(require("classnames"));
 const DropdownMenu_module_scss_1 = __importDefault(require("./DropdownMenu.module.scss"));
-const ButtonNative_1 = require("@components/Button/ButtonNative");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const IconNative_1 = require("@components/Icon/IconNative");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const constants_1 = require("@components-core/constants");
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const constants_1 = require("../../components-core/constants");
+const ButtonNative_1 = require("../Button/ButtonNative");
+const IconNative_1 = require("../Icon/IconNative");
 exports.DropdownMenu = (0, react_1.forwardRef)(function DropdownMenu({ triggerTemplate, children, label, registerComponentApi, style, onWillOpen, alignment = "start", disabled = false, triggerButtonVariant = "ghost", triggerButtonThemeColor = "primary", triggerButtonIcon = "chevrondown", triggerButtonIconPosition = "end", }, ref) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const [open, setOpen] = (0, react_2.useState)(false);

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",