@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/@Base/loadingQueueManager/loadingApi.js

@@ -0,0 +1,100 @@
+import { baseStore } from "../../baseStore";
+
+const normalizeUrl = (rawUrl = "") => {
+    try {
+        const u = new URL(
+            rawUrl,
+            typeof window !== "undefined" ? window.location.origin : "http://x",
+        );
+        u.hash = "";
+        const params = Array.from(u.searchParams.entries()).sort(([aK, aV], [bK, bV]) =>
+            aK === bK ? String(aV).localeCompare(String(bV)) : aK.localeCompare(bK),
+        );
+        u.search = "";
+        for (const [k, v] of params) u.searchParams.append(k, v);
+        return u.pathname + (u.search ? `?${u.searchParams.toString()}` : "");
+    } catch {
+        return String(rawUrl).trim();
+    }
+};
+
+const buildDedupeKey = ({ url = "unknown", method = "GET" } = {}, location) => {
+    return `${location.pathname}|${String(method).toUpperCase()}|${normalizeUrl(url)}`;
+};
+
+export const loadingApi = {
+    add: (item = {}, settings = {}) => {
+        const setGlobal = baseStore.globalData.set;
+        const {
+            _loadingManager: { apiQueue = [] } = {},
+            isDevMode,
+            _reactRouterDom: { location } = {},
+        } = baseStore.globalData.get();
+
+        const { queueName = buildDedupeKey(item, location), url = "unknown" } = item;
+        const { enableMultiple = false } = settings;
+
+        if (!url) return false;
+
+        const find = apiQueue.find((q) => q.queueName === queueName);
+
+        if (!enableMultiple && find) {
+            isDevMode && console.log("Allready in queue.");
+            return false;
+        }
+
+        setGlobal((s) => {
+            s.isLoadingApi = true;
+            s.isLoading = true;
+            s._loadingManager = {
+                ...s._loadingManager,
+                apiQueue: [...s._loadingManager.apiQueue, { queueName, url }],
+            };
+        });
+
+        return queueName;
+    },
+    remove: (queueName) => {
+        if (!queueName) return false;
+        const setGlobal = baseStore.globalData.set;
+        const {
+            isLoadingPage,
+            _loadingManager: { apiQueue = [] } = {},
+            isDevMode,
+        } = baseStore.globalData.get();
+
+        const find = apiQueue.find((q) => q.queueName === queueName);
+
+        if (!find) {
+            isDevMode && console.log("Not found in queue.");
+            return false;
+        }
+
+        const newApiQueue = apiQueue.filter((q) => q.queueName !== queueName);
+
+        setGlobal((s) => {
+            s.isLoadingApi = newApiQueue.length > 0;
+            s.isLoading = newApiQueue.length > 0 || isLoadingPage;
+            s._loadingManager = {
+                ...s._loadingManager,
+                apiQueue: newApiQueue,
+            };
+        });
+
+        return true;
+    },
+    clear: () => {
+        const setGlobal = baseStore.globalData.set;
+        const { isLoadingPage } = baseStore.globalData.get();
+        setGlobal((s) => {
+            s.isLoadingApi = false;
+            s.isLoading = isLoadingPage;
+            s._loadingManager = {
+                ...s._loadingManager,
+                apiQueue: [],
+            };
+        });
+
+        return true;
+    },
+};

package/src/libs/@Base/prepareRoutes/index.js

@@ -0,0 +1,176 @@
+import { typeOf } from "../../typeOf";
+
+const trimSegment = (segment) => String(segment ?? "").replace(/^\/+|\/+$/g, "");
+
+const resolvePrefixSegment = (prefixPath, language) => {
+    if (prefixPath == null || prefixPath === "") return null;
+    if (typeof prefixPath === "string") {
+        const trimmed = trimSegment(prefixPath);
+        return trimmed || null;
+    }
+    if (typeOf(prefixPath) === "object") {
+        const value = prefixPath[language] ?? prefixPath.en ?? null;
+        const trimmed = trimSegment(value);
+        return trimmed || null;
+    }
+    return null;
+};
+
+/** RRD path segment(s) without leading slash; relatives use a leading slash. */
+export const joinRouteSegments = (...segments) => {
+    const parts = segments.map(trimSegment).filter(Boolean);
+    return parts.join("/");
+};
+
+export const joinRoutePathname = (...segments) => {
+    const joined = joinRouteSegments(...segments);
+    return joined ? `/${joined}` : "/";
+};
+
+const isNavGroup = (node) =>
+    Array.isArray(node?.children) && node.children.length > 0 && !node.Component;
+
+const collectLanguagesFromPath = (path) => {
+    if (typeOf(path) === "object") return Object.keys(path);
+    return [];
+};
+
+const collectLanguagesForRoute = (pagePath, categories) => {
+    if (typeOf(pagePath) === "object") return collectLanguagesFromPath(pagePath);
+    const languages = new Set(["en"]);
+    categories.forEach((category) => {
+        if (typeOf(category.prefixPath) === "object") {
+            Object.keys(category.prefixPath).forEach((lang) => languages.add(lang));
+        }
+    });
+    return [...languages];
+};
+
+const buildRelativesMap = (pagePath, categories) => {
+    const pagePathIsObject = typeOf(pagePath) === "object";
+    const languages = collectLanguagesForRoute(pagePath, categories);
+
+    const relatives = {};
+    for (const language of languages) {
+        const pageSegment = pagePathIsObject ? pagePath[language] : pagePath;
+        const prefixSegments = categories.map((category) =>
+            resolvePrefixSegment(category.prefixPath, language),
+        );
+        relatives[language] = joinRoutePathname(...prefixSegments, pageSegment);
+    }
+    return relatives;
+};
+
+const pushPreparedRoute = (routes, routeConfig) => {
+    routes.push(routeConfig);
+};
+
+const prepareRouteNode = (routes, route, context) => {
+    if (!route) return;
+
+    const { path, handle, children, title, prefixPath, ...rest } = route;
+    const { title: handleTitle, pageTitle, ...restHandle } = handle || {};
+    const mergedTitle = handleTitle ?? title;
+
+    if (isNavGroup(route)) {
+        const categoryEntry = {
+            ...(mergedTitle != null ? { title: mergedTitle } : {}),
+            ...(prefixPath != null ? { prefixPath } : {}),
+        };
+        const nextContext = {
+            categories: [...context.categories, categoryEntry],
+        };
+        route.children.forEach((child) => prepareRouteNode(routes, child, nextContext));
+        return;
+    }
+
+    const categories = context.categories;
+
+    if (typeOf(path) === "object") {
+        const relatives = buildRelativesMap(path, categories);
+        Object.keys(path).forEach((language) => {
+            const routePath = joinRouteSegments(
+                ...categories.map((category) => resolvePrefixSegment(category.prefixPath, language)),
+                path[language],
+            );
+            pushPreparedRoute(routes, {
+                ...rest,
+                path: routePath,
+                handle: {
+                    language,
+                    relatives,
+                    ...(categories.length > 0 ? { categories: [...categories] } : {}),
+                    ...(mergedTitle?.[language] != null ? { title: mergedTitle[language] } : {}),
+                    ...(pageTitle?.[language] != null ? { pageTitle: pageTitle[language] } : {}),
+                    ...restHandle,
+                },
+            });
+        });
+        return;
+    }
+
+    if (path === "/" || path === "") {
+        pushPreparedRoute(routes, {
+            ...rest,
+            path: path === "" ? "/" : path,
+            handle: {
+                ...(categories.length > 0 ? { categories: [...categories] } : {}),
+                ...restHandle,
+            },
+        });
+        return;
+    }
+
+    if (path != null && path !== "") {
+        const languages = collectLanguagesForRoute(path, categories);
+        const primaryLanguage = languages[0] ?? "en";
+        const routePath = joinRouteSegments(
+            ...categories.map((category) =>
+                resolvePrefixSegment(category.prefixPath, primaryLanguage),
+            ),
+            path,
+        );
+        const relatives = buildRelativesMap(path, categories);
+        pushPreparedRoute(routes, {
+            ...rest,
+            path: routePath || trimSegment(path),
+            handle: {
+                relatives,
+                ...(categories.length > 0 ? { categories: [...categories] } : {}),
+                ...restHandle,
+                ...(typeOf(mergedTitle) === "object" ? {} : mergedTitle != null ? { title: mergedTitle } : {}),
+            },
+        });
+        return;
+    }
+
+    pushPreparedRoute(routes, route);
+};
+
+/**
+ * Flattens SITEMAP (pages + nested category groups) into RRD-ready route objects.
+ * Category prefixPath stacks per level; missing prefix at a level adds no segment.
+ */
+export const prepareRoutes = (arr = []) => {
+    const routes = [];
+    if (!Array.isArray(arr)) return routes;
+    arr.forEach((route) => prepareRouteNode(routes, route, { categories: [] }));
+    return routes;
+};
+
+/**
+ * Builds the app route tree passed to createBrowserRouter (Layout wrapper + prepared children).
+ */
+export const buildAppRoutes = (rrdSettings = {}) => {
+    const { Layout, SITEMAP = [], overridePrepareRoutes } = rrdSettings;
+    const prepare =
+        typeof overridePrepareRoutes === "function" ? overridePrepareRoutes : prepareRoutes;
+    const preparedRoutes = prepare(SITEMAP);
+
+    if (!Layout) return { appRoutes: preparedRoutes, preparedRoutes };
+
+    return {
+        appRoutes: [{ Component: Layout, children: preparedRoutes }],
+        preparedRoutes,
+    };
+};

package/src/libs/@Base/styling/GlobalStyle.js

@@ -0,0 +1,7 @@
+import { createGlobalStyle } from "styled-components";
+
+/** Do not interpolate @import here — it breaks production CSSOM injection for component rules. */
+export const GlobalStyle = createGlobalStyle`
+    ${({ defaultGlobalStyle }) => defaultGlobalStyle}
+    ${({ globalStyle }) => globalStyle}
+`;

package/src/libs/@Base/styling/fontCss.js

@@ -0,0 +1,64 @@
+import { css } from "styled-components";
+
+const CSS_IMPORT_RE = /@import\s+(?:url\([^)]+\)|["'][^"']+["'])[^;]*;/gi;
+const CSS_IMPORT_URL_RE =
+    /@import\s+(?:url\(\s*(['"]?)([^"')]+)\1\s*\)|(['"])([^"']+)\3)[^;]*;/gi;
+
+const collectCssStrings = (value) => {
+    if (value == null) return [];
+    if (typeof value === "string" || typeof value === "number") return [String(value)];
+    if (Array.isArray(value)) return value.flatMap(collectCssStrings);
+    return [];
+};
+
+export const getCssDeclarationValue = (value, propertyName) => {
+    if (!propertyName) return null;
+    const declarationRe = new RegExp(`${propertyName}\\s*:\\s*([^;]+)`, "i");
+
+    for (const chunk of collectCssStrings(value)) {
+        const match = declarationRe.exec(chunk);
+        if (match?.[1]) return match[1].replace(/\s*!important\s*$/i, "").trim();
+    }
+
+    return null;
+};
+
+export const collectFontImports = (fonts = {}) => {
+    const imports = new Set();
+
+    Object.values(fonts || {}).forEach((fontCss) => {
+        collectCssStrings(fontCss).forEach((chunk) => {
+            const matches = chunk.match(CSS_IMPORT_RE);
+            matches?.forEach((match) => imports.add(match.trim()));
+        });
+    });
+
+    return imports.size ? css`${Array.from(imports).join("\n")}` : null;
+};
+
+export const collectFontImportUrls = (fonts = {}) => {
+    const urls = new Set();
+
+    Object.values(fonts || {}).forEach((fontCss) => {
+        collectCssStrings(fontCss).forEach((chunk) => {
+            CSS_IMPORT_URL_RE.lastIndex = 0;
+            let match = CSS_IMPORT_URL_RE.exec(chunk);
+            while (match) {
+                const url = match[2] || match[4];
+                if (url) urls.add(url.trim());
+                match = CSS_IMPORT_URL_RE.exec(chunk);
+            }
+        });
+    });
+
+    return Array.from(urls);
+};
+
+export const stripCssImports = (value) => {
+    if (value == null) return value;
+    if (typeof value === "string") return value.replace(CSS_IMPORT_RE, "");
+    if (Array.isArray(value)) {
+        return value.map((item) => (typeof item === "string" ? stripCssImports(item) : item));
+    }
+    return value;
+};

package/src/libs/@Base/styling/generateMediaFunctions.js

@@ -0,0 +1,143 @@
+
+
+import { css } from "styled-components";
+import { DEFAULT_BREAKPOINTS } from "../../../constants/DEFAULT_BREAKPOINTS";
+import { DEFAULT_MAX_ASP_RATIO } from "../../../constants/DEFAULT_MAX_ASP_RATIO";
+import { DEFAULT_MIN_ASP_RATIO } from "../../../constants/DEFAULT_MIN_ASP_RATIO";
+import { colorAlpha } from "../../colorAlpha";
+import { colorTinter } from "../../colorTinter";
+import { colorShader } from "../../colorShader";
+import { colorConverter } from "../../colorConverter";
+import { colorWcagMatch } from "../../colorWcagMatch";
+import { colorWcagValue } from "../../colorWcagValue";
+import { colorGet } from "../../colorGet";
+import { colorFind } from "../../colorFind";
+import { cssNormalizeSize } from "../../cssNormalizeSize";
+import { cssSpacingResolver } from "../../cssSpacingResolver";
+import { get3DShadow } from "../../colorGet3DShadow";
+
+export const generateMediaFunctions = ({
+    breakpoints = DEFAULT_BREAKPOINTS,
+    maxAspRatio = DEFAULT_MAX_ASP_RATIO,
+    minAspRatio = DEFAULT_MIN_ASP_RATIO,
+} = {}) => {
+    const mediaFunctions = {
+        phone: (content) => {
+            return css`
+                @media (max-aspect-ratio: ${maxAspRatio}),
+                    (min-aspect-ratio: ${minAspRatio}),
+                    (max-width: ${breakpoints.tablet[0] + "px"}) {
+                    ${content}
+                }
+            `;
+        },
+
+        tablet: (content) => css`
+        @media (min-aspect-ratio: ${maxAspRatio})
+            and (max-aspect-ratio: ${minAspRatio})
+            and (min-width: ${breakpoints.tablet[0] + "px"})
+            and (max-width: ${breakpoints.desktop[0] + "px"}) {
+                ${content}
+            }
+    `,
+
+        desktop: (content) => css`
+        @media (min-aspect-ratio: ${maxAspRatio})
+            and (max-aspect-ratio: ${minAspRatio})
+            and (min-width: ${breakpoints.desktop[0] + "px"})
+            and (max-width: ${breakpoints.large[0] + "px"}) {
+                ${content}
+            }
+    `,
+
+        large: (content) => css`
+            @media (min-aspect-ratio: ${maxAspRatio})
+            and (max-aspect-ratio: ${minAspRatio})
+            and (min-width: ${breakpoints.large[0] + "px"})
+            and (max-width: ${breakpoints.uhd[0] + "px"}) {
+                ${content}
+            }
+    `,
+
+        uhd: (content) => css`
+            @media (min-aspect-ratio: ${maxAspRatio})
+            and (max-aspect-ratio: ${minAspRatio})
+            and (min-width: ${breakpoints.uhd[0] + "px"})
+            and (max-width: ${breakpoints.uhd8[0] + "px"}) {
+                ${content}
+            }
+    `,
+
+        uhd8: (content) => css`
+            @media (min-aspect-ratio: ${maxAspRatio})
+            and (max-aspect-ratio: ${minAspRatio})
+            and (min-width: ${breakpoints.uhd8[0] + "px"}) {
+                ${content}
+            }
+    `,
+
+        vertical: (content) => css`
+            @media (max-aspect-ratio: ${maxAspRatio}) {
+                ${content}
+            }
+        `,
+
+        square: (content) => css`
+            @media (aspect-ratio: 1/1) {
+                ${content}
+            }
+        `,
+    };
+
+    mediaFunctions.responsive = (arrStr = "", content) => {
+        const arr = arrStr.replace(/\s/g, "").split?.(",");
+        return css`
+            ${arr.includes("phone") && mediaFunctions.phone(content)}
+            ${arr.includes("tablet") && mediaFunctions.tablet(content)}
+        ${arr.includes("desktop") && mediaFunctions.desktop(content)}
+        ${arr.includes("large") && mediaFunctions.large(content)}
+        ${arr.includes("uhd") && mediaFunctions.uhd(content)}
+        ${arr.includes("uhd8") && mediaFunctions.uhd8(content)}
+        ${arr.includes("vertical") && mediaFunctions.vertical(content)}
+        ${arr.includes("square") && mediaFunctions.square(content)}
+        `;
+    };
+
+    const keys = ["phone", "tablet", "desktop", "large", "uhd", "uhd8", "vertical", "square"];
+
+    keys.forEach((key) => {
+        mediaFunctions.responsive[key] = (content) => mediaFunctions[key](content);
+    });
+
+    mediaFunctions.freeBpMixin = (prop, obj) => {
+        let styles = "";
+        for (let i = 0; i < obj.length; i++) {
+            const bpRange = obj[i];
+            const min = bpRange[0];
+            const max = bpRange[1];
+            const value = obj[i][2];
+            styles += `
+      @media (min-width: ${min}px) and (max-width: ${max}px) {
+        ${prop}: ${value};
+      }
+    `;
+        }
+        return css`
+            ${styles}
+        `;
+    };
+
+    mediaFunctions.colorAlpha = colorAlpha;
+    mediaFunctions.colorTinter = colorTinter;
+    mediaFunctions.colorShader = colorShader;
+    mediaFunctions.colorConverter = colorConverter;
+    mediaFunctions.colorWcagMatch = colorWcagMatch;
+    mediaFunctions.colorWcagValue = colorWcagValue;
+    mediaFunctions.colorGet = colorGet;
+    mediaFunctions.colorFind = colorFind;
+    mediaFunctions.get3DShadow = get3DShadow;
+    mediaFunctions.cssNormalizeSize = cssNormalizeSize;
+    mediaFunctions.cssSpacingResolver = cssSpacingResolver;
+
+    return mediaFunctions;
+};

package/src/libs/@Base/styling/generateMediaFunctions.test.js

@@ -0,0 +1,56 @@
+import { describe, it, expect } from "vitest";
+import { generateMediaFunctions } from "./generateMediaFunctions";
+
+const flattenCss = (value) => {
+    if (value == null || typeof value === "boolean") return "";
+    if (typeof value === "string" || typeof value === "number") return String(value);
+    if (typeof value.join === "function") return value.join("");
+    if (Array.isArray(value)) return value.map(flattenCss).join("");
+    return "";
+};
+
+describe("generateMediaFunctions", () => {
+    it("exposes vertical and square helpers on theme.responsive", () => {
+        const media = generateMediaFunctions({
+            maxAspRatio: 0.5,
+            minAspRatio: 3,
+            breakpoints: {
+                tablet: [601],
+                desktop: [961],
+                large: [1441],
+                uhd: [1921],
+                uhd8: [3841],
+            },
+        });
+
+        expect(typeof media.vertical).toBe("function");
+        expect(typeof media.square).toBe("function");
+        expect(typeof media.responsive.vertical).toBe("function");
+        expect(typeof media.responsive.square).toBe("function");
+    });
+
+    it("vertical uses max-aspect-ratio from maxAspRatio", () => {
+        const media = generateMediaFunctions({ maxAspRatio: 0.5 });
+        const cssText = flattenCss(media.vertical("vertical-styles"));
+
+        expect(cssText).toContain("max-aspect-ratio: 0.5");
+        expect(cssText).toContain("vertical-styles");
+    });
+
+    it("square targets 1/1 aspect ratio", () => {
+        const media = generateMediaFunctions();
+        const cssText = flattenCss(media.square("square-styles"));
+
+        expect(cssText).toContain("aspect-ratio: 1/1");
+        expect(cssText).toContain("square-styles");
+    });
+
+    it("responsive combinator can mix width and ratio axes", () => {
+        const media = generateMediaFunctions({ maxAspRatio: 0.5 });
+        const cssText = flattenCss(media.responsive("tablet, vertical", "mixed-styles"));
+
+        expect(cssText).toContain("min-width: 601px");
+        expect(cssText).toContain("max-aspect-ratio: 0.5");
+        expect(cssText).toContain("mixed-styles");
+    });
+});

package/src/libs/@Base/styling/index.jsx

@@ -0,0 +1,73 @@
+import { useEffect, useMemo } from "react";
+import { ThemeProvider } from "styled-components";
+import { useTheme } from "./useTheme";
+import { generateMediaFunctions } from "./generateMediaFunctions";
+import { prepareRemSettings } from "./prepareRemSettings";
+import { GlobalStyle } from "./GlobalStyle";
+import { DEFAULT_PRIMARY_FONT } from "../../../constants/DEFAULT_PRIMARY_FONT";
+import { DEFAULT_GLOBAL_STYLE } from "../../../constants/DEFAULT_GLOBAL_STYLE";
+import { collectFontImportUrls, stripCssImports } from "./fontCss";
+
+export const StyledComponentsWrapper = ({ children, styledSettings }) => {
+    const {
+        globalStyle,
+        maxAspRatio,
+        minAspRatio,
+        otherStyledComponentsProps,
+        fonts,
+        primaryFont,
+        remSettings,
+        breakpoints,
+        themes,
+    } = styledSettings || {};
+
+    const availableFonts = {
+        primaryFont: primaryFont || DEFAULT_PRIMARY_FONT,
+        ...(fonts || {}),
+    };
+    const primaryFontCss = stripCssImports(availableFonts.primaryFont);
+    // Fonts must load via <link>, never via @import inside the styled-components sheet.
+    // @import in that sheet causes production CSSOM insertRule drops (missing Button/Icon/Flex rules).
+    const fontImportUrls = useMemo(() => collectFontImportUrls(availableFonts), [fonts, primaryFont]);
+
+    const { theme } = useTheme({ theme: themes });
+
+    const mediaFunctions = useMemo(
+        () => generateMediaFunctions({ maxAspRatio, minAspRatio, breakpoints }),
+        [maxAspRatio, minAspRatio, breakpoints],
+    );
+
+    const preparedRemSettings = useMemo(
+        () => prepareRemSettings({ remSettings, mediaFunctions }),
+        [remSettings, mediaFunctions],
+    );
+
+    useEffect(() => {
+        if (typeof document === "undefined") return;
+
+        fontImportUrls.forEach((href) => {
+            const exists = Array.from(
+                document.head.querySelectorAll('link[data-base-font-import="1"]'),
+            ).some((link) => link.getAttribute("href") === href);
+            if (exists) return;
+
+            const link = document.createElement("link");
+            link.setAttribute("data-base-font-import", "1");
+            link.rel = "stylesheet";
+            link.href = href;
+            document.head.appendChild(link);
+        });
+    }, [fontImportUrls]);
+
+    return (
+        <ThemeProvider theme={{ ...theme, ...mediaFunctions }} {...otherStyledComponentsProps}>
+            <GlobalStyle
+                preparedRemSettings={preparedRemSettings}
+                primaryFont={primaryFontCss}
+                defaultGlobalStyle={DEFAULT_GLOBAL_STYLE}
+                globalStyle={globalStyle}
+            />
+            {children}
+        </ThemeProvider>
+    );
+};

package/src/libs/@Base/styling/injectInitialRemAndBodyFontStyle.js

@@ -0,0 +1,43 @@
+import { DEFAULT_REM_SETTINGS } from "../../../constants/DEFAULT_REM_SETTINGS";
+
+let __initialFontStyleInjected = false;
+
+function getViewportWidth() {
+    const docEl = document.documentElement;
+    return Math.round(window.innerWidth || docEl.clientWidth || 0);
+}
+
+function pickHtmlFontSizePx(width, remSettings) {
+    let picked = null;
+
+    for (let i = 0; i < remSettings.length; i++) {
+        const [min, max, value] = remSettings[i];
+        if (width >= min && width <= max) picked = value;
+    }
+
+    if (picked) return picked;
+    const firstMin = remSettings[0]?.[0];
+    const firstVal = remSettings[0]?.[2];
+    const lastVal = remSettings[remSettings.length - 1]?.[2];
+
+    if (typeof firstMin === "number" && width < firstMin) return firstVal || "1px";
+    return lastVal || "1px";
+}
+
+export function injectInitialRemAndBodyFontStyle(remSettings = DEFAULT_REM_SETTINGS) {
+    if (__initialFontStyleInjected) return;
+    if (typeof document === "undefined") return;
+
+    const width = getViewportWidth();
+    const htmlFontSize = pickHtmlFontSizePx(width, remSettings);
+
+    const style = document.createElement("style");
+    style.setAttribute("data-initial-rem-style", "1");
+    style.textContent = `
+    html { font-size: ${htmlFontSize}; }
+    body { font-size: 14rem; }
+  `;
+
+    document.head.appendChild(style);
+    __initialFontStyleInjected = true;
+}

package/src/libs/@Base/styling/prepareRemSettings.js

@@ -0,0 +1,6 @@
+import { DEFAULT_REM_SETTINGS } from "../../../constants/DEFAULT_REM_SETTINGS";
+
+export const prepareRemSettings = ({ remSettings = DEFAULT_REM_SETTINGS, mediaFunctions }) => {
+    const mixin = mediaFunctions?.freeBpMixin?.("font-size", remSettings);
+    return mixin;
+};