diy-template-components 5.0.0 → 5.1.1

package/build/index.js

@@ -2466,6 +2466,25 @@ const fontWeight = {
   superBold: 900
 };
 
+/**
+ * Central font name resolver.
+ * Maps legacy/display names to canonical Google Fonts family names.
+ */
+const FONT_NAME_ALIASES = {
+  'Ibm Plex Sans': 'IBM Plex Sans'
+};
+
+/**
+ * Resolves a font family name to its canonical form for loading/rendering.
+ * @param {string} fontFamily - Raw font name (e.g. from metadata or user selection)
+ * @returns {string} Resolved font name for CSS/Google Fonts URL
+ */
+function resolveFont(fontFamily) {
+  if (!fontFamily || typeof fontFamily !== 'string') return fontFamily;
+  const normalized = fontFamily.trim();
+  return FONT_NAME_ALIASES[normalized] || normalized;
+}
+
 const getBorderRadius = roundness => {
   const mapping = {
     sharp: {
@@ -2502,8 +2521,9 @@ const getBorderRadius = roundness => {
 };
 function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile, roundness = 'rounded') {
   const palette = palettes[colorTheme] || palettes['blue'];
+  const resolvedFont = resolveFont(fontFamily);
   const typography = {
-    fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
+    fontFamily: `"${resolvedFont}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
     fontSize: isMobile ? fontSizeMob : fontSize,
     fontWeight
   };
@@ -2520,58 +2540,25 @@ function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile, roundness
   };
 }
 
-const fontComponents = {
-  Rubik,
-  'Ibm Plex Sans': IbmPlexSans,
-  'Merriweather Sans': MerriweatherSans,
-  'Arima Madurai': ArimaMadurai,
-  'Nanum Square': NanumSquare
-};
-const getFontComponent = font => fontComponents[font] || (() => null);
+const NANUM_SQUARE_URL = 'https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css';
+const FONT_LINK_ID_PREFIX = 'diy-font-seeder-';
+const getGoogleFontsUrl = fontFamily => `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g, '+')}:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap`;
 function FontSeeder({
   fontFamily
 }) {
-  const Comp = getFontComponent(fontFamily);
-  return /*#__PURE__*/React__default["default"].createElement(Comp, null);
-}
-const useRubikFont = reactJss.createUseStyles({
-  '@import': `url('https://fonts.googleapis.com/css2?family=Lato&family=Rubik:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap')`
-});
-function Rubik() {
-  // to import "Rubik" font css
-  useRubikFont();
-  return null;
-}
-const useIbmPlexSansFont = reactJss.createUseStyles({
-  '@import': 'url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap)'
-});
-function IbmPlexSans() {
-  // to import "Ibm Plex Sans" font css
-  useIbmPlexSansFont();
-  return null;
-}
-const useMerriweatherSansFont = reactJss.createUseStyles({
-  '@import': 'url(https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap)'
-});
-function MerriweatherSans() {
-  // to import "Merriweather Sans" font css
-  useMerriweatherSansFont();
-  return null;
-}
-const useArimaMaduraiFont = reactJss.createUseStyles({
-  '@import': 'url(https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@400;500;700&display=swap)'
-});
-function ArimaMadurai() {
-  // to import "Arima Madurai" font css
-  useArimaMaduraiFont();
-  return null;
-}
-const useNanumSqaureFont = reactJss.createUseStyles({
-  '@import': 'url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css)'
-});
-function NanumSquare() {
-  // to import "Nanum Square" font css
-  useNanumSqaureFont();
+  React.useEffect(() => {
+    if (!fontFamily || typeof document === 'undefined') return;
+    const normalizedName = String(fontFamily).trim();
+    const fontForUrl = resolveFont(normalizedName);
+    const url = normalizedName.toLowerCase() === 'nanum square' ? NANUM_SQUARE_URL : getGoogleFontsUrl(fontForUrl);
+    const linkId = `${FONT_LINK_ID_PREFIX}${normalizedName.replace(/\s+/g, '-')}`;
+    if (document.getElementById(linkId)) return;
+    const link = document.createElement('link');
+    link.id = linkId;
+    link.rel = 'stylesheet';
+    link.href = url;
+    document.head.appendChild(link);
+  }, [fontFamily]);
   return null;
 }
 
@@ -3040,8 +3027,9 @@ const generateTheme = (theme = 'blue', fontFamily = 'Arial', isMobile, roundness
     headerText: allColors[color],
     headerHover: allColors['tertiary' + color]
   };
+  const resolvedFont = resolveFont(fontFamily);
   const typography = {
-    fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
+    fontFamily: `"${resolvedFont}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
     fontSize: isMobile ? fontSizeMob : fontSize,
     fontWeight
   };