@kilivi/payloadcms-theme-management 2.0.0 → 2.1.0

package/dist/globals/ThemeSettings/FontPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/globals/ThemeSettings/FontPicker/index.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { TextFieldClientProps } from 'payload'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport type {\n  FontCategory,\n  GoogleFont,\n  LanguageSubset,\n} from '../../../app/api/google-fonts/route.js'\nimport { FontPreview } from './FontPreview.js'\nimport { PreviewContent, type PreviewTab } from './PreviewContent.js'\nimport { getTranslations, type Language } from './translations.js'\n\n// Import CSS for styling\nif (typeof window !== 'undefined') {\n  // @ts-expect-error - Dynamic CSS import\n  import('./styles.css').catch(() => {})\n}\n\nexport interface FontPickerProps {\n  value?: string\n  onChange: (fontFamily: string) => void\n  language?: Language\n}\n\n/**\n * FontPicker component\n *\n * A comprehensive Google Fonts picker with:\n * - Two-column layout (preview panel + selection panel)\n * - Search and filters (category, language subset)\n * - Multiple preview modes (typography, blog, landing, ui)\n * - Lazy font loading (only on hover/scroll)\n * - Infinite scroll with pagination\n * - Favorites system with localStorage\n * - View mode toggle (row/grid)\n */\nconst FontPickerField: React.FC<TextFieldClientProps> = (props) => {\n  const { path } = props\n  const { value, setValue } = useField<string>({ path })\n  const language: Language = 'en' // Could be extracted from admin config\n\n  const handleChange = useCallback(\n    (fontFamily: string) => {\n      setValue(fontFamily)\n    },\n    [setValue],\n  )\n\n  return <FontPickerComponent value={value} onChange={handleChange} language={language} />\n}\n\nconst FontPickerComponent: React.FC<FontPickerProps> = ({ value, onChange, language = 'en' }) => {\n  const t = getTranslations(language)\n\n  // State\n  const [fonts, setFonts] = useState<GoogleFont[]>([])\n  const [loading, setLoading] = useState(false)\n  const [search, setSearch] = useState('')\n  const [category, setCategory] = useState<FontCategory>('all')\n  const [subset, setSubset] = useState<LanguageSubset>('all')\n  const [offset, setOffset] = useState(0)\n  const [hasMore, setHasMore] = useState(true)\n  const [selectedFont, setSelectedFont] = useState<GoogleFont | null>(null)\n  const [hoveredFont, setHoveredFont] = useState<GoogleFont | null>(null)\n  const [previewTab, setPreviewTab] = useState<PreviewTab>(() => {\n    if (typeof window !== 'undefined') {\n      const saved = localStorage.getItem('fontPickerPreviewTab')\n      return (saved as PreviewTab) || 'typography'\n    }\n    return 'typography'\n  })\n  const [viewMode, setViewMode] = useState<'row' | 'grid'>(() => {\n    if (typeof window !== 'undefined') {\n      const saved = localStorage.getItem('fontPickerViewMode')\n      return (saved as 'row' | 'grid') || 'row'\n    }\n    return 'row'\n  })\n  const [favorites, setFavorites] = useState<string[]>(() => {\n    if (typeof window !== 'undefined') {\n      const saved = localStorage.getItem('fontPickerFavorites')\n      return saved ? JSON.parse(saved) : []\n    }\n    return []\n  })\n  const [loadedFonts, setLoadedFonts] = useState<Set<string>>(new Set())\n\n  // Refs\n  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n  const observerRef = useRef<IntersectionObserver | null>(null)\n  const loadMoreRef = useRef<HTMLDivElement>(null)\n\n  // Fetch fonts\n  const fetchFonts = useCallback(\n    async (reset = false) => {\n      if (loading) return\n\n      setLoading(true)\n\n      try {\n        const currentOffset = reset ? 0 : offset\n        const params = new URLSearchParams({\n          search,\n          category,\n          subset,\n          limit: '100',\n          offset: currentOffset.toString(),\n        })\n\n        const response = await fetch(`/api/google-fonts?${params}`)\n        const data = await response.json()\n\n        if (reset) {\n          setFonts(data.fonts)\n          setOffset(100)\n        } else {\n          setFonts((prev) => [...prev, ...data.fonts])\n          setOffset((prev) => prev + 100)\n        }\n\n        setHasMore(currentOffset + data.fonts.length < data.total)\n      } catch (error) {\n        console.error('Error fetching fonts:', error)\n      } finally {\n        setLoading(false)\n      }\n    },\n    [search, category, subset, offset, loading],\n  )\n\n  // Initial load\n  useEffect(() => {\n    fetchFonts(true)\n  }, [search, category, subset])\n\n  // Debounced search\n  useEffect(() => {\n    if (searchTimeoutRef.current) {\n      clearTimeout(searchTimeoutRef.current)\n    }\n\n    searchTimeoutRef.current = setTimeout(() => {\n      setOffset(0)\n      fetchFonts(true)\n    }, 300)\n\n    return () => {\n      if (searchTimeoutRef.current) {\n        clearTimeout(searchTimeoutRef.current)\n      }\n    }\n  }, [search])\n\n  // Infinite scroll\n  useEffect(() => {\n    if (!loadMoreRef.current) return\n\n    observerRef.current = new IntersectionObserver(\n      (entries) => {\n        if (entries[0].isIntersecting && hasMore && !loading) {\n          fetchFonts()\n        }\n      },\n      { threshold: 0.5 },\n    )\n\n    observerRef.current.observe(loadMoreRef.current)\n\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect()\n      }\n    }\n  }, [hasMore, loading, fetchFonts])\n\n  // Save preferences to localStorage\n  useEffect(() => {\n    localStorage.setItem('fontPickerViewMode', viewMode)\n  }, [viewMode])\n\n  useEffect(() => {\n    localStorage.setItem('fontPickerPreviewTab', previewTab)\n  }, [previewTab])\n\n  useEffect(() => {\n    localStorage.setItem('fontPickerFavorites', JSON.stringify(favorites))\n  }, [favorites])\n\n  // Set initial selected font\n  useEffect(() => {\n    if (value && fonts.length > 0 && !selectedFont) {\n      const font = fonts.find((f) => f.family === value)\n      if (font) {\n        setSelectedFont(font)\n      }\n    }\n  }, [value, fonts, selectedFont])\n\n  // Handlers\n  const handleFontSelect = (font: GoogleFont) => {\n    setSelectedFont(font)\n    onChange(font.family)\n  }\n\n  const handleFontHover = (font: GoogleFont) => {\n    setHoveredFont(font)\n    // Mark font as needing to be loaded\n    if (!loadedFonts.has(font.family)) {\n      setLoadedFonts((prev) => new Set([...prev, font.family]))\n    }\n  }\n\n  const toggleFavorite = (fontFamily: string) => {\n    setFavorites((prev) =>\n      prev.includes(fontFamily) ? prev.filter((f) => f !== fontFamily) : [...prev, fontFamily],\n    )\n  }\n\n  const previewFont = hoveredFont || selectedFont\n\n  return (\n    <div className=\"font-picker\">\n      {/* eslint-disable-next-line */}\n      {/* Preview Panel */}\n      <div className=\"font-picker__preview-panel\">\n        {/* Preview Tabs */}\n        <div className=\"font-picker__preview-tabs\">\n          {(['typography', 'blog', 'landing', 'ui'] as PreviewTab[]).map((tab) => (\n            <button\n              key={tab}\n              className={`font-picker__preview-tab ${previewTab === tab ? 'font-picker__preview-tab--active' : ''}`}\n              onClick={() => setPreviewTab(tab)}\n            >\n              {t.previewTabs[tab]}\n            </button>\n          ))}\n        </div>\n\n        {/* Preview Content */}\n        <div className=\"font-picker__preview-content\">\n          <PreviewContent font={previewFont} activeTab={previewTab} translations={t} />\n        </div>\n      </div>\n\n      {/* Selection Panel */}\n      <div className=\"font-picker__selection-panel\">\n        {/* Controls */}\n        <div className=\"font-picker__controls\">\n          {/* Search */}\n          <input\n            type=\"text\"\n            className=\"font-picker__search\"\n            placeholder={t.search}\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n          />\n\n          {/* Filters */}\n          <div className=\"font-picker__filters\">\n            <select\n              className=\"font-picker__select\"\n              value={category}\n              onChange={(e) => setCategory(e.target.value as FontCategory)}\n            >\n              <option value=\"all\">{t.categories.all}</option>\n              <option value=\"sans-serif\">{t.categories['sans-serif']}</option>\n              <option value=\"serif\">{t.categories.serif}</option>\n              <option value=\"display\">{t.categories.display}</option>\n              <option value=\"handwriting\">{t.categories.handwriting}</option>\n              <option value=\"monospace\">{t.categories.monospace}</option>\n            </select>\n\n            <select\n              className=\"font-picker__select\"\n              value={subset}\n              onChange={(e) => setSubset(e.target.value as LanguageSubset)}\n            >\n              <option value=\"all\">{t.subsets.all}</option>\n              <option value=\"latin\">{t.subsets.latin}</option>\n              <option value=\"latin-ext\">{t.subsets['latin-ext']}</option>\n              <option value=\"cyrillic\">{t.subsets.cyrillic}</option>\n              <option value=\"greek\">{t.subsets.greek}</option>\n              <option value=\"vietnamese\">{t.subsets.vietnamese}</option>\n              <option value=\"arabic\">{t.subsets.arabic}</option>\n              <option value=\"hebrew\">{t.subsets.hebrew}</option>\n              <option value=\"thai\">{t.subsets.thai}</option>\n              <option value=\"japanese\">{t.subsets.japanese}</option>\n              <option value=\"korean\">{t.subsets.korean}</option>\n              <option value=\"chinese\">{t.subsets.chinese}</option>\n            </select>\n          </div>\n\n          {/* View Mode Toggle */}\n          <div className=\"font-picker__view-toggle\">\n            <button\n              className={`font-picker__view-button ${viewMode === 'row' ? 'font-picker__view-button--active' : ''}`}\n              onClick={() => setViewMode('row')}\n              title={t.viewModes.row}\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                <rect x=\"2\" y=\"4\" width=\"16\" height=\"2\" />\n                <rect x=\"2\" y=\"9\" width=\"16\" height=\"2\" />\n                <rect x=\"2\" y=\"14\" width=\"16\" height=\"2\" />\n              </svg>\n            </button>\n            <button\n              className={`font-picker__view-button ${viewMode === 'grid' ? 'font-picker__view-button--active' : ''}`}\n              onClick={() => setViewMode('grid')}\n              title={t.viewModes.grid}\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                <rect x=\"2\" y=\"2\" width=\"7\" height=\"7\" />\n                <rect x=\"11\" y=\"2\" width=\"7\" height=\"7\" />\n                <rect x=\"2\" y=\"11\" width=\"7\" height=\"7\" />\n                <rect x=\"11\" y=\"11\" width=\"7\" height=\"7\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Font List */}\n        <div className={`font-picker__list font-picker__list--${viewMode}`}>\n          {fonts.map((font) => (\n            <div\n              key={font.family}\n              className={`font-picker__item ${\n                selectedFont?.family === font.family ? 'font-picker__item--selected' : ''\n              }`}\n              onClick={() => handleFontSelect(font)}\n              onMouseEnter={() => handleFontHover(font)}\n            >\n              <div className=\"font-picker__item-header\">\n                <span className=\"font-picker__item-name\">{font.family}</span>\n                <button\n                  className={`font-picker__favorite ${\n                    favorites.includes(font.family) ? 'font-picker__favorite--active' : ''\n                  }`}\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    toggleFavorite(font.family)\n                  }}\n                  title={\n                    favorites.includes(font.family) ? 'Remove from favorites' : 'Add to favorites'\n                  }\n                >\n                  ★\n                </button>\n              </div>\n              <div className=\"font-picker__item-preview\">\n                <FontPreview font={font} variant=\"row\" text={t.typography.body} />\n              </div>\n            </div>\n          ))}\n\n          {/* Loading indicator */}\n          {loading && <div className=\"font-picker__loading\">{t.loading}</div>}\n\n          {/* No fonts found */}\n          {!loading && fonts.length === 0 && <div className=\"font-picker__empty\">{t.noFonts}</div>}\n\n          {/* Infinite scroll trigger */}\n          {hasMore && <div ref={loadMoreRef} style={{ height: '20px' }} />}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport { FontPickerComponent }\nexport default FontPickerField\n"],"names":["useField","React","useCallback","useEffect","useRef","useState","FontPreview","PreviewContent","getTranslations","window","catch","FontPickerField","props","path","value","setValue","language","handleChange","fontFamily","FontPickerComponent","onChange","t","fonts","setFonts","loading","setLoading","search","setSearch","category","setCategory","subset","setSubset","offset","setOffset","hasMore","setHasMore","selectedFont","setSelectedFont","hoveredFont","setHoveredFont","previewTab","setPreviewTab","saved","localStorage","getItem","viewMode","setViewMode","favorites","setFavorites","JSON","parse","loadedFonts","setLoadedFonts","Set","searchTimeoutRef","observerRef","loadMoreRef","fetchFonts","reset","currentOffset","params","URLSearchParams","limit","toString","response","fetch","data","json","prev","length","total","error","console","current","clearTimeout","setTimeout","IntersectionObserver","entries","isIntersecting","threshold","observe","disconnect","setItem","stringify","font","find","f","family","handleFontSelect","handleFontHover","has","toggleFavorite","includes","filter","previewFont","div","className","map","tab","button","onClick","previewTabs","activeTab","translations","input","type","placeholder","e","target","select","option","categories","all","serif","display","handwriting","monospace","subsets","latin","cyrillic","greek","vietnamese","arabic","hebrew","thai","japanese","korean","chinese","title","viewModes","row","svg","width","height","viewBox","fill","rect","x","y","grid","onMouseEnter","span","stopPropagation","variant","text","typography","body","noFonts","ref","style"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/globals/ThemeSettings/FontPicker/index.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport { Star } from 'lucide-react'\nimport type { TextFieldClientProps } from 'payload'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport type {\n  FontCategory,\n  GoogleFont,\n  LanguageSubset,\n} from '../../../app/api/google-fonts/route.js'\nimport { useThemeLanguage } from '../../../hooks/useThemeTranslations.js'\nimport { FontPreview } from './FontPreview.js'\nimport { PreviewContent, type PreviewTab } from './PreviewContent.js'\nimport { getTranslations, translations, type Language } from './translations.js'\n\n// Import CSS for styling\nif (typeof window !== 'undefined') {\n  import('./styles.css').catch(() => {})\n}\n\nexport interface FontPickerProps {\n  value?: string\n  onChange: (fontFamily: string) => void\n  language?: Language\n}\n\n/**\n * FontPicker component\n *\n * A comprehensive Google Fonts picker with:\n * - Two-column layout (preview panel + selection panel)\n * - Search and filters (category, language subset)\n * - Multiple preview modes (typography, blog, landing, ui)\n * - Lazy font loading (only on hover/scroll)\n * - Infinite scroll with pagination\n * - Favorites system with localStorage\n * - View mode toggle (row/grid)\n */\nconst FontPickerField: React.FC<TextFieldClientProps> = (props) => {\n  const { path } = props\n  const { value, setValue } = useField<string>({ path })\n  const adminLang = useThemeLanguage()\n  // FontPicker ships its own en/cs strings; fall back to English for any other locale.\n  const language: Language = adminLang in translations ? (adminLang as Language) : 'en'\n\n  const handleChange = useCallback(\n    (fontFamily: string) => {\n      setValue(fontFamily)\n    },\n    [setValue],\n  )\n\n  return <FontPickerComponent value={value} onChange={handleChange} language={language} />\n}\n\nconst FontPickerComponent: React.FC<FontPickerProps> = ({ value, onChange, language = 'en' }) => {\n  const t = getTranslations(language)\n\n  // State\n  const [fonts, setFonts] = useState<GoogleFont[]>([])\n  const [loading, setLoading] = useState(false)\n  const [loadError, setLoadError] = useState(false)\n  const [search, setSearch] = useState('')\n  const [category, setCategory] = useState<FontCategory>('all')\n  const [subset, setSubset] = useState<LanguageSubset>('all')\n  const [offset, setOffset] = useState(0)\n  const [hasMore, setHasMore] = useState(true)\n  const [selectedFont, setSelectedFont] = useState<GoogleFont | null>(null)\n  const [hoveredFont, setHoveredFont] = useState<GoogleFont | null>(null)\n  const [previewTab, setPreviewTab] = useState<PreviewTab>(() => {\n    if (typeof window !== 'undefined') {\n      const saved = localStorage.getItem('fontPickerPreviewTab')\n      return (saved as PreviewTab) || 'typography'\n    }\n    return 'typography'\n  })\n  const [viewMode, setViewMode] = useState<'row' | 'grid'>(() => {\n    if (typeof window !== 'undefined') {\n      const saved = localStorage.getItem('fontPickerViewMode')\n      return (saved as 'row' | 'grid') || 'row'\n    }\n    return 'row'\n  })\n  const [favorites, setFavorites] = useState<string[]>(() => {\n    if (typeof window !== 'undefined') {\n      const saved = localStorage.getItem('fontPickerFavorites')\n      return saved ? JSON.parse(saved) : []\n    }\n    return []\n  })\n  const [loadedFonts, setLoadedFonts] = useState<Set<string>>(new Set())\n\n  // Refs\n  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n  const observerRef = useRef<IntersectionObserver | null>(null)\n  const loadMoreRef = useRef<HTMLDivElement>(null)\n\n  // Fetch fonts\n  const fetchFonts = useCallback(\n    async (reset = false) => {\n      if (loading) return\n\n      setLoading(true)\n      setLoadError(false)\n\n      try {\n        const currentOffset = reset ? 0 : offset\n        const params = new URLSearchParams({\n          search,\n          category,\n          subset,\n          limit: '100',\n          offset: currentOffset.toString(),\n        })\n\n        const response = await fetch(`/api/google-fonts?${params}`)\n        if (!response.ok) throw new Error(`Font request failed with ${response.status}`)\n        const data = await response.json()\n\n        if (reset) {\n          setFonts(data.fonts)\n          setOffset(100)\n        } else {\n          setFonts((prev) => [...prev, ...data.fonts])\n          setOffset((prev) => prev + 100)\n        }\n\n        setHasMore(currentOffset + data.fonts.length < data.total)\n      } catch (error) {\n        console.error('Error fetching fonts:', error)\n        setLoadError(true)\n        setHasMore(false)\n      } finally {\n        setLoading(false)\n      }\n    },\n    [search, category, subset, offset, loading],\n  )\n\n  // Initial load\n  useEffect(() => {\n    fetchFonts(true)\n  }, [search, category, subset])\n\n  // Debounced search\n  useEffect(() => {\n    if (searchTimeoutRef.current) {\n      clearTimeout(searchTimeoutRef.current)\n    }\n\n    searchTimeoutRef.current = setTimeout(() => {\n      setOffset(0)\n      fetchFonts(true)\n    }, 300)\n\n    return () => {\n      if (searchTimeoutRef.current) {\n        clearTimeout(searchTimeoutRef.current)\n      }\n    }\n  }, [search])\n\n  // Infinite scroll\n  useEffect(() => {\n    if (!loadMoreRef.current) return\n\n    observerRef.current = new IntersectionObserver(\n      (entries) => {\n        if (entries[0].isIntersecting && hasMore && !loading) {\n          fetchFonts()\n        }\n      },\n      { threshold: 0.5 },\n    )\n\n    observerRef.current.observe(loadMoreRef.current)\n\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect()\n      }\n    }\n  }, [hasMore, loading, fetchFonts])\n\n  // Save preferences to localStorage\n  useEffect(() => {\n    localStorage.setItem('fontPickerViewMode', viewMode)\n  }, [viewMode])\n\n  useEffect(() => {\n    localStorage.setItem('fontPickerPreviewTab', previewTab)\n  }, [previewTab])\n\n  useEffect(() => {\n    localStorage.setItem('fontPickerFavorites', JSON.stringify(favorites))\n  }, [favorites])\n\n  // Set initial selected font\n  useEffect(() => {\n    if (value && fonts.length > 0 && !selectedFont) {\n      const font = fonts.find((f) => f.family === value)\n      if (font) {\n        setSelectedFont(font)\n      }\n    }\n  }, [value, fonts, selectedFont])\n\n  // Handlers\n  const handleFontSelect = (font: GoogleFont) => {\n    setSelectedFont(font)\n    onChange(font.family)\n  }\n\n  const handleFontHover = (font: GoogleFont) => {\n    setHoveredFont(font)\n    // Mark font as needing to be loaded\n    if (!loadedFonts.has(font.family)) {\n      setLoadedFonts((prev) => new Set([...prev, font.family]))\n    }\n  }\n\n  const toggleFavorite = (fontFamily: string) => {\n    setFavorites((prev) =>\n      prev.includes(fontFamily) ? prev.filter((f) => f !== fontFamily) : [...prev, fontFamily],\n    )\n  }\n\n  const previewFont = hoveredFont || selectedFont\n\n  return (\n    <div className=\"font-picker\">\n      {/* eslint-disable-next-line */}\n      {/* Preview Panel */}\n      <div className=\"font-picker__preview-panel\">\n        {/* Preview Tabs */}\n        <div className=\"font-picker__preview-tabs\" role=\"group\" aria-label={t.previewModes}>\n          {(['typography', 'blog', 'landing', 'ui'] as PreviewTab[]).map((tab) => (\n            <button\n              key={tab}\n              type=\"button\"\n              aria-pressed={previewTab === tab}\n              className={`font-picker__preview-tab ${previewTab === tab ? 'font-picker__preview-tab--active' : ''}`}\n              onClick={() => setPreviewTab(tab)}\n            >\n              {t.previewTabs[tab]}\n            </button>\n          ))}\n        </div>\n\n        {/* Preview Content */}\n        <div className=\"font-picker__preview-content\">\n          <PreviewContent font={previewFont} activeTab={previewTab} translations={t} />\n        </div>\n      </div>\n\n      {/* Selection Panel */}\n      <div className=\"font-picker__selection-panel\">\n        {/* Controls */}\n        <div className=\"font-picker__controls\">\n          {/* Search */}\n          <input\n            type=\"text\"\n            className=\"font-picker__search\"\n            placeholder={t.search}\n            aria-label={t.search}\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n          />\n\n          {/* Filters */}\n          <div className=\"font-picker__filters\">\n            <select\n              className=\"font-picker__select\"\n              aria-label={t.category}\n              value={category}\n              onChange={(e) => setCategory(e.target.value as FontCategory)}\n            >\n              <option value=\"all\">{t.categories.all}</option>\n              <option value=\"sans-serif\">{t.categories['sans-serif']}</option>\n              <option value=\"serif\">{t.categories.serif}</option>\n              <option value=\"display\">{t.categories.display}</option>\n              <option value=\"handwriting\">{t.categories.handwriting}</option>\n              <option value=\"monospace\">{t.categories.monospace}</option>\n            </select>\n\n            <select\n              className=\"font-picker__select\"\n              aria-label={t.subset}\n              value={subset}\n              onChange={(e) => setSubset(e.target.value as LanguageSubset)}\n            >\n              <option value=\"all\">{t.subsets.all}</option>\n              <option value=\"latin\">{t.subsets.latin}</option>\n              <option value=\"latin-ext\">{t.subsets['latin-ext']}</option>\n              <option value=\"cyrillic\">{t.subsets.cyrillic}</option>\n              <option value=\"greek\">{t.subsets.greek}</option>\n              <option value=\"vietnamese\">{t.subsets.vietnamese}</option>\n              <option value=\"arabic\">{t.subsets.arabic}</option>\n              <option value=\"hebrew\">{t.subsets.hebrew}</option>\n              <option value=\"thai\">{t.subsets.thai}</option>\n              <option value=\"japanese\">{t.subsets.japanese}</option>\n              <option value=\"korean\">{t.subsets.korean}</option>\n              <option value=\"chinese\">{t.subsets.chinese}</option>\n            </select>\n          </div>\n\n          {/* View Mode Toggle */}\n          <div className=\"font-picker__view-toggle\" role=\"group\" aria-label={t.viewMode}>\n            <button\n              type=\"button\"\n              aria-pressed={viewMode === 'row'}\n              aria-label={t.viewModes.row}\n              className={`font-picker__view-button ${viewMode === 'row' ? 'font-picker__view-button--active' : ''}`}\n              onClick={() => setViewMode('row')}\n              title={t.viewModes.row}\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <rect x=\"2\" y=\"4\" width=\"16\" height=\"2\" />\n                <rect x=\"2\" y=\"9\" width=\"16\" height=\"2\" />\n                <rect x=\"2\" y=\"14\" width=\"16\" height=\"2\" />\n              </svg>\n            </button>\n            <button\n              type=\"button\"\n              aria-pressed={viewMode === 'grid'}\n              aria-label={t.viewModes.grid}\n              className={`font-picker__view-button ${viewMode === 'grid' ? 'font-picker__view-button--active' : ''}`}\n              onClick={() => setViewMode('grid')}\n              title={t.viewModes.grid}\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <rect x=\"2\" y=\"2\" width=\"7\" height=\"7\" />\n                <rect x=\"11\" y=\"2\" width=\"7\" height=\"7\" />\n                <rect x=\"2\" y=\"11\" width=\"7\" height=\"7\" />\n                <rect x=\"11\" y=\"11\" width=\"7\" height=\"7\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Font List */}\n        <div\n          className={`font-picker__list font-picker__list--${viewMode}`}\n          role=\"list\"\n          aria-label={t.fontList}\n          aria-busy={loading}\n        >\n          {fonts.map((font) => {\n            const isSelected = selectedFont?.family === font.family\n            const isFavorite = favorites.includes(font.family)\n            return (\n              <div\n                key={font.family}\n                role=\"listitem\"\n                className={`font-picker__item ${isSelected ? 'font-picker__item--selected' : ''}`}\n              >\n                <button\n                  type=\"button\"\n                  className=\"font-picker__item-select\"\n                  aria-pressed={isSelected}\n                  onClick={() => handleFontSelect(font)}\n                  onMouseEnter={() => handleFontHover(font)}\n                  onFocus={() => handleFontHover(font)}\n                >\n                  <span className=\"font-picker__item-name\">{font.family}</span>\n                  <span className=\"font-picker__item-preview\">\n                    <FontPreview font={font} variant=\"row\" text={t.typography.body} />\n                  </span>\n                </button>\n                <button\n                  type=\"button\"\n                  className={`font-picker__favorite ${isFavorite ? 'font-picker__favorite--active' : ''}`}\n                  aria-pressed={isFavorite}\n                  aria-label={`${isFavorite ? t.removeFavorite : t.addFavorite}: ${font.family}`}\n                  title={isFavorite ? t.removeFavorite : t.addFavorite}\n                  onClick={() => toggleFavorite(font.family)}\n                >\n                  <Star size={16} aria-hidden=\"true\" fill={isFavorite ? 'currentColor' : 'none'} />\n                </button>\n              </div>\n            )\n          })}\n\n          {/* Loading indicator */}\n          {loading && (\n            <div className=\"font-picker__loading\" role=\"status\">\n              {t.loading}\n            </div>\n          )}\n\n          {/* Load error */}\n          {!loading && loadError && (\n            <div className=\"font-picker__error\" role=\"alert\">\n              <p>{t.loadError}</p>\n              <button type=\"button\" className=\"font-picker__retry\" onClick={() => fetchFonts(true)}>\n                {t.retry}\n              </button>\n            </div>\n          )}\n\n          {/* No fonts found */}\n          {!loading && !loadError && fonts.length === 0 && (\n            <div className=\"font-picker__empty\">{t.noFonts}</div>\n          )}\n\n          {/* Infinite scroll trigger */}\n          {hasMore && <div ref={loadMoreRef} style={{ height: '20px' }} />}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport { FontPickerComponent }\nexport default FontPickerField\n"],"names":["useField","Star","React","useCallback","useEffect","useRef","useState","useThemeLanguage","FontPreview","PreviewContent","getTranslations","translations","window","catch","FontPickerField","props","path","value","setValue","adminLang","language","handleChange","fontFamily","FontPickerComponent","onChange","t","fonts","setFonts","loading","setLoading","loadError","setLoadError","search","setSearch","category","setCategory","subset","setSubset","offset","setOffset","hasMore","setHasMore","selectedFont","setSelectedFont","hoveredFont","setHoveredFont","previewTab","setPreviewTab","saved","localStorage","getItem","viewMode","setViewMode","favorites","setFavorites","JSON","parse","loadedFonts","setLoadedFonts","Set","searchTimeoutRef","observerRef","loadMoreRef","fetchFonts","reset","currentOffset","params","URLSearchParams","limit","toString","response","fetch","ok","Error","status","data","json","prev","length","total","error","console","current","clearTimeout","setTimeout","IntersectionObserver","entries","isIntersecting","threshold","observe","disconnect","setItem","stringify","font","find","f","family","handleFontSelect","handleFontHover","has","toggleFavorite","includes","filter","previewFont","div","className","role","aria-label","previewModes","map","tab","button","type","aria-pressed","onClick","previewTabs","activeTab","input","placeholder","e","target","select","option","categories","all","serif","display","handwriting","monospace","subsets","latin","cyrillic","greek","vietnamese","arabic","hebrew","thai","japanese","korean","chinese","viewModes","row","title","svg","width","height","viewBox","fill","aria-hidden","rect","x","y","grid","fontList","aria-busy","isSelected","isFavorite","onMouseEnter","onFocus","span","variant","text","typography","body","removeFavorite","addFavorite","size","p","retry","noFonts","ref","style"],"mappings":"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"}

package/dist/globals/ThemeSettings/FontPicker/styles.css

@@ -32,7 +32,7 @@
   font-weight: 500;
   color: var(--theme-elevation-600);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
 }
 
 .font-picker__preview-tab:hover {
@@ -54,7 +54,8 @@
 
 /* Selection Panel (Right) */
 .font-picker__selection-panel {
-  width: 400px;
+  flex: 0 0 clamp(280px, 40%, 400px);
+  min-width: 0;
   display: flex;
   flex-direction: column;
   background: var(--theme-elevation-0);
@@ -77,10 +78,10 @@
   color: var(--theme-elevation-900);
 }
 
-.font-picker__search:focus {
-  outline: none;
+.font-picker__search:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-text));
+  outline-offset: 1px;
   border-color: var(--theme-elevation-500);
-  box-shadow: 0 0 0 3px var(--theme-elevation-100);
 }
 
 .font-picker__search::placeholder {
@@ -104,10 +105,10 @@
   cursor: pointer;
 }
 
-.font-picker__select:focus {
-  outline: none;
+.font-picker__select:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-text));
+  outline-offset: 1px;
   border-color: var(--theme-elevation-500);
-  box-shadow: 0 0 0 3px var(--theme-elevation-100);
 }
 
 .font-picker__view-toggle {
@@ -123,7 +124,7 @@
   border-radius: 6px;
   color: var(--theme-elevation-600);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
 }
 
 .font-picker__view-button:hover {
@@ -157,26 +158,34 @@
   gap: 8px;
 }
 
-.font-picker__list--grid .font-picker__item {
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 12px;
-}
-
-.font-picker__list--grid .font-picker__item-preview {
-  width: 100%;
-  margin-top: 8px;
+.font-picker__item {
+  position: relative;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 6px;
+  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
+  background: var(--theme-elevation-0);
 }
 
-.font-picker__item {
+.font-picker__item-select {
   display: flex;
   flex-direction: column;
-  padding: 12px;
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: 6px;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  /* Leave room for the favourite toggle in the top-right corner. */
+  padding: 12px 44px 12px 12px;
+  border: none;
+  border-radius: inherit;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
   cursor: pointer;
-  transition: all 0.2s ease;
-  background: var(--theme-elevation-0);
+}
+
+.font-picker__item-select:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-text));
+  outline-offset: 2px;
 }
 
 .font-picker__item:hover {
@@ -191,13 +200,6 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.font-picker__item-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
 .font-picker__item-name {
   font-size: 14px;
   font-weight: 600;
@@ -205,29 +207,40 @@
 }
 
 .font-picker__favorite {
-  padding: 4px 8px;
+  position: absolute;
+  top: 6px;
+  inset-inline-end: 6px;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
   background: none;
   border: none;
-  font-size: 18px;
-  color: var(--theme-elevation-400);
+  border-radius: 6px;
+  color: var(--theme-elevation-500);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.15s ease-out, background-color 0.15s ease-out;
 }
 
 .font-picker__favorite:hover {
-  color: var(--theme-elevation-600);
-  transform: scale(1.1);
+  color: var(--theme-elevation-800);
+  background: var(--theme-elevation-100);
 }
 
-.font-picker__favorite--active {
-  color: #fbbf24;
+.font-picker__favorite:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-text));
+  outline-offset: 0;
 }
 
+.font-picker__favorite--active,
 .font-picker__favorite--active:hover {
-  color: #f59e0b;
+  color: var(--theme-warning-500, #d97706);
 }
 
 .font-picker__item-preview {
+  display: block;
+  width: 100%;
   font-size: 14px;
   color: var(--theme-elevation-700);
   overflow: hidden;
@@ -242,6 +255,38 @@
   font-size: 14px;
 }
 
+.font-picker__error {
+  padding: 32px 24px;
+  text-align: center;
+  color: var(--theme-error-500, var(--theme-elevation-800));
+  font-size: 14px;
+}
+
+.font-picker__error p {
+  margin: 0 0 12px;
+}
+
+.font-picker__retry {
+  padding: 8px 14px;
+  border: 1px solid var(--theme-elevation-300);
+  border-radius: 6px;
+  background: var(--theme-elevation-0);
+  color: var(--theme-elevation-900);
+  font: inherit;
+  cursor: pointer;
+}
+
+.font-picker__retry:hover {
+  background: var(--theme-elevation-100);
+}
+
+.font-picker__retry:focus-visible,
+.font-picker__preview-tab:focus-visible,
+.font-picker__view-button:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-text));
+  outline-offset: 2px;
+}
+
 .font-picker__empty {
   padding: 48px 24px;
   text-align: center;
@@ -333,5 +378,17 @@
 
 /* Apply animation to font items */
 .font-picker__list .font-picker__item {
-  animation: fadeIn 0.3s ease;
+  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .font-picker__list .font-picker__item {
+    animation: none;
+  }
+
+  .font-picker *,
+  .font-picker *::before,
+  .font-picker *::after {
+    transition-duration: 0.01ms !important;
+  }
 }

package/dist/globals/ThemeSettings/FontPicker/translations.d.ts

@@ -9,6 +9,12 @@ export interface Translations {
     allLanguages: string;
     loading: string;
     noFonts: string;
+    loadError: string;
+    retry: string;
+    addFavorite: string;
+    removeFavorite: string;
+    fontList: string;
+    previewModes: string;
     loadMore: string;
     selectFont: string;
     previewTabs: {

package/dist/globals/ThemeSettings/FontPicker/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/globals/ThemeSettings/FontPicker/translations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAA;AAElC,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE;QACX,UAAU,EAAE,MAAM,CAAA;QAClB,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EAAE,MAAM,CAAA;QACf,EAAE,EAAE,MAAM,CAAA;KACX,CAAA;IACD,UAAU,EAAE;QACV,GAAG,EAAE,MAAM,CAAA;QACX,YAAY,EAAE,MAAM,CAAA;QACpB,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,MAAM,CAAA;QACf,WAAW,EAAE,MAAM,CAAA;QACnB,SAAS,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,OAAO,EAAE;QACP,GAAG,EAAE,MAAM,CAAA;QACX,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;QACnB,QAAQ,EAAE,MAAM,CAAA;QAChB,cAAc,EAAE,MAAM,CAAA;QACtB,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;QACnB,MAAM,EAAE,MAAM,CAAA;QACd,MAAM,EAAE,MAAM,CAAA;QACd,IAAI,EAAE,MAAM,CAAA;QACZ,QAAQ,EAAE,MAAM,CAAA;QAChB,MAAM,EAAE,MAAM,CAAA;QACd,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,SAAS,EAAE;QACT,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD,UAAU,EAAE;QACV,EAAE,EAAE,MAAM,CAAA;QACV,EAAE,EAAE,MAAM,CAAA;QACV,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,MAAM,CAAA;QAChB,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAA;QACZ,UAAU,EAAE,MAAM,CAAA;QAClB,GAAG,EAAE,MAAM,CAAA;KACZ,CAAA;IACD,EAAE,EAAE;QACF,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;CACF;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,QAAQ,EAAE,YAAY,CA6IvD,CAAA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,GAAE,QAAe,GAAG,YAAY,CAEnE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/globals/ThemeSettings/FontPicker/translations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAA;AAElC,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE;QACX,UAAU,EAAE,MAAM,CAAA;QAClB,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EAAE,MAAM,CAAA;QACf,EAAE,EAAE,MAAM,CAAA;KACX,CAAA;IACD,UAAU,EAAE;QACV,GAAG,EAAE,MAAM,CAAA;QACX,YAAY,EAAE,MAAM,CAAA;QACpB,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,MAAM,CAAA;QACf,WAAW,EAAE,MAAM,CAAA;QACnB,SAAS,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,OAAO,EAAE;QACP,GAAG,EAAE,MAAM,CAAA;QACX,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;QACnB,QAAQ,EAAE,MAAM,CAAA;QAChB,cAAc,EAAE,MAAM,CAAA;QACtB,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;QACnB,MAAM,EAAE,MAAM,CAAA;QACd,MAAM,EAAE,MAAM,CAAA;QACd,IAAI,EAAE,MAAM,CAAA;QACZ,QAAQ,EAAE,MAAM,CAAA;QAChB,MAAM,EAAE,MAAM,CAAA;QACd,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,SAAS,EAAE;QACT,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD,UAAU,EAAE;QACV,EAAE,EAAE,MAAM,CAAA;QACV,EAAE,EAAE,MAAM,CAAA;QACV,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,MAAM,CAAA;QAChB,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAA;QACZ,UAAU,EAAE,MAAM,CAAA;QAClB,GAAG,EAAE,MAAM,CAAA;KACZ,CAAA;IACD,EAAE,EAAE;QACF,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;CACF;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,QAAQ,EAAE,YAAY,CAyJvD,CAAA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,GAAE,QAAe,GAAG,YAAY,CAEnE"}

package/dist/globals/ThemeSettings/FontPicker/translations.js

@@ -8,7 +8,13 @@ export const translations = {
         allCategories: 'All Categories',
         allLanguages: 'All Languages',
         loading: 'Loading fonts...',
-        noFonts: 'No fonts found',
+        noFonts: 'No fonts match these filters',
+        loadError: 'Fonts could not be loaded. Check the connection and try again.',
+        retry: 'Try again',
+        addFavorite: 'Add to favorites',
+        removeFavorite: 'Remove from favorites',
+        fontList: 'Fonts',
+        previewModes: 'Preview mode',
         loadMore: 'Load more',
         selectFont: 'Select Font',
         previewTabs: {
@@ -77,7 +83,13 @@ export const translations = {
         allCategories: 'Všechny kategorie',
         allLanguages: 'Všechny jazyky',
         loading: 'Načítání fontů...',
-        noFonts: 'Žádné fonty nenalezeny',
+        noFonts: 'Filtrům neodpovídá žádný font',
+        loadError: 'Fonty se nepodařilo načíst. Zkontrolujte připojení a zkuste to znovu.',
+        retry: 'Zkusit znovu',
+        addFavorite: 'Přidat do oblíbených',
+        removeFavorite: 'Odebrat z oblíbených',
+        fontList: 'Fonty',
+        previewModes: 'Režim náhledu',
         loadMore: 'Načíst další',
         selectFont: 'Vybrat font',
         previewTabs: {

package/dist/globals/ThemeSettings/FontPicker/translations.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/globals/ThemeSettings/FontPicker/translations.ts"],"sourcesContent":["export type Language = 'en' | 'cs'\n\nexport interface Translations {\n  search: string\n  category: string\n  subset: string\n  viewMode: string\n  favorites: string\n  allCategories: string\n  allLanguages: string\n  loading: string\n  noFonts: string\n  loadMore: string\n  selectFont: string\n  previewTabs: {\n    typography: string\n    blog: string\n    landing: string\n    ui: string\n  }\n  categories: {\n    all: string\n    'sans-serif': string\n    serif: string\n    display: string\n    handwriting: string\n    monospace: string\n  }\n  subsets: {\n    all: string\n    vietnamese: string\n    latin: string\n    'latin-ext': string\n    cyrillic: string\n    'cyrillic-ext': string\n    greek: string\n    'greek-ext': string\n    arabic: string\n    hebrew: string\n    thai: string\n    japanese: string\n    korean: string\n    chinese: string\n  }\n  viewModes: {\n    row: string\n    grid: string\n  }\n  typography: {\n    h1: string\n    h2: string\n    h3: string\n    body: string\n    small: string\n  }\n  blog: {\n    title: string\n    subtitle: string\n    body: string\n  }\n  landing: {\n    hero: string\n    subheading: string\n    cta: string\n  }\n  ui: {\n    button: string\n    input: string\n    link: string\n  }\n}\n\nexport const translations: Record<Language, Translations> = {\n  en: {\n    search: 'Search fonts...',\n    category: 'Category',\n    subset: 'Language',\n    viewMode: 'View',\n    favorites: 'Favorites',\n    allCategories: 'All Categories',\n    allLanguages: 'All Languages',\n    loading: 'Loading fonts...',\n    noFonts: 'No fonts found',\n    loadMore: 'Load more',\n    selectFont: 'Select Font',\n    previewTabs: {\n      typography: 'Typography',\n      blog: 'Blog Post',\n      landing: 'Landing Page',\n      ui: 'UI Elements',\n    },\n    categories: {\n      all: 'All',\n      'sans-serif': 'Sans Serif',\n      serif: 'Serif',\n      display: 'Display',\n      handwriting: 'Handwriting',\n      monospace: 'Monospace',\n    },\n    subsets: {\n      all: 'All Languages',\n      vietnamese: '🇻🇳 Vietnamese',\n      latin: 'Latin',\n      'latin-ext': 'Latin Extended',\n      cyrillic: '🇷🇺 Cyrillic',\n      'cyrillic-ext': 'Cyrillic Extended',\n      greek: '🇬🇷 Greek',\n      'greek-ext': 'Greek Extended',\n      arabic: '🇸🇦 Arabic',\n      hebrew: '🇮🇱 Hebrew',\n      thai: '🇹🇭 Thai',\n      japanese: '🇯🇵 Japanese',\n      korean: '🇰🇷 Korean',\n      chinese: '🇨🇳 Chinese',\n    },\n    viewModes: {\n      row: 'Row',\n      grid: 'Grid',\n    },\n    typography: {\n      h1: 'The quick brown fox jumps over the lazy dog',\n      h2: 'Sphinx of black quartz, judge my vow',\n      h3: 'Pack my box with five dozen liquor jugs',\n      body: 'The five boxing wizards jump quickly. A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent.',\n      small: 'How vexingly quick daft zebras jump!',\n    },\n    blog: {\n      title: 'The Art of Typography in Modern Web Design',\n      subtitle:\n        'Typography is one of the most important aspects of web design. It affects readability, user experience, and the overall aesthetic of your website.',\n      body: 'Good typography makes reading effortless and enjoyable. It guides the reader through your content, creating hierarchy and emphasis where needed. When choosing fonts for your website, consider not just how they look, but how they perform across different devices and screen sizes.',\n    },\n    landing: {\n      hero: 'Transform Your Digital Experience',\n      subheading: 'Create stunning websites with beautiful typography',\n      cta: 'Get Started',\n    },\n    ui: {\n      button: 'Click Me',\n      input: 'Enter text here...',\n      link: 'Learn More →',\n    },\n  },\n  cs: {\n    search: 'Hledat fonty...',\n    category: 'Kategorie',\n    subset: 'Jazyk',\n    viewMode: 'Zobrazení',\n    favorites: 'Oblíbené',\n    allCategories: 'Všechny kategorie',\n    allLanguages: 'Všechny jazyky',\n    loading: 'Načítání fontů...',\n    noFonts: 'Žádné fonty nenalezeny',\n    loadMore: 'Načíst další',\n    selectFont: 'Vybrat font',\n    previewTabs: {\n      typography: 'Typografie',\n      blog: 'Blogový příspěvek',\n      landing: 'Landing Page',\n      ui: 'UI prvky',\n    },\n    categories: {\n      all: 'Vše',\n      'sans-serif': 'Sans Serif',\n      serif: 'Serif',\n      display: 'Display',\n      handwriting: 'Ručně psané',\n      monospace: 'Monospace',\n    },\n    subsets: {\n      all: 'Všechny jazyky',\n      vietnamese: '🇻🇳 Vietnamština',\n      latin: 'Latinka',\n      'latin-ext': 'Latinka rozšířená',\n      cyrillic: '🇷🇺 Cyrilice',\n      'cyrillic-ext': 'Cyrilice rozšířená',\n      greek: '🇬🇷 Řečtina',\n      'greek-ext': 'Řečtina rozšířená',\n      arabic: '🇸🇦 Arabština',\n      hebrew: '🇮🇱 Hebrejština',\n      thai: '🇹🇭 Thajština',\n      japanese: '🇯🇵 Japonština',\n      korean: '🇰🇷 Korejština',\n      chinese: '🇨🇳 Čínština',\n    },\n    viewModes: {\n      row: 'Řádky',\n      grid: 'Mřížka',\n    },\n    typography: {\n      h1: 'Příliš žluťoučký kůň úpěl ďábelské ódy',\n      h2: 'Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu',\n      h3: 'Zvlášť zákeřný učeň s ďolíčky běží podél zóny úlů',\n      body: 'Typografie je umění a technika uspořádání písma tak, aby byl text čitelný, srozumitelný a vizuálně přitažlivý. Dobrá typografie vytváří hierarchii a vede čtenáře obsahem přirozeným způsobem.',\n      small: 'Dobrá typografie je neviditelná, špatná typografie je nezapomenutelná.',\n    },\n    blog: {\n      title: 'Umění typografie v moderním webdesignu',\n      subtitle:\n        'Typografie je jedním z nejdůležitějších aspektů webdesignu. Ovlivňuje čitelnost, uživatelskou zkušenost a celkovou estetiku vašich webových stránek.',\n      body: 'Dobrá typografie dělá čtení snadným a příjemným. Vede čtenáře vaším obsahem a vytváří hierarchii a důraz tam, kde je to potřeba. Při výběru fontů pro vaše webové stránky zvažte nejen to, jak vypadají, ale také jak fungují na různých zařízeních a velikostech obrazovky.',\n    },\n    landing: {\n      hero: 'Transformujte svůj digitální zážitek',\n      subheading: 'Vytvářejte úchvatné webové stránky s krásnou typografií',\n      cta: 'Začít',\n    },\n    ui: {\n      button: 'Klikněte sem',\n      input: 'Zadejte text...',\n      link: 'Zjistit více →',\n    },\n  },\n}\n\n/**\n * Get translations for a specific language\n */\nexport function getTranslations(lang: Language = 'en'): Translations {\n  return translations[lang] || translations.en\n}\n"],"names":["translations","en","search","category","subset","viewMode","favorites","allCategories","allLanguages","loading","noFonts","loadMore","selectFont","previewTabs","typography","blog","landing","ui","categories","all","serif","display","handwriting","monospace","subsets","vietnamese","latin","cyrillic","greek","arabic","hebrew","thai","japanese","korean","chinese","viewModes","row","grid","h1","h2","h3","body","small","title","subtitle","hero","subheading","cta","button","input","link","cs","getTranslations","lang"],"mappings":"AAwEA,OAAO,MAAMA,eAA+C;IAC1DC,IAAI;QACFC,QAAQ;QACRC,UAAU;QACVC,QAAQ;QACRC,UAAU;QACVC,WAAW;QACXC,eAAe;QACfC,cAAc;QACdC,SAAS;QACTC,SAAS;QACTC,UAAU;QACVC,YAAY;QACZC,aAAa;YACXC,YAAY;YACZC,MAAM;YACNC,SAAS;YACTC,IAAI;QACN;QACAC,YAAY;YACVC,KAAK;YACL,cAAc;YACdC,OAAO;YACPC,SAAS;YACTC,aAAa;YACbC,WAAW;QACb;QACAC,SAAS;YACPL,KAAK;YACLM,YAAY;YACZC,OAAO;YACP,aAAa;YACbC,UAAU;YACV,gBAAgB;YAChBC,OAAO;YACP,aAAa;YACbC,QAAQ;YACRC,QAAQ;YACRC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,SAAS;QACX;QACAC,WAAW;YACTC,KAAK;YACLC,MAAM;QACR;QACAvB,YAAY;YACVwB,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,MAAM;YACNC,OAAO;QACT;QACA3B,MAAM;YACJ4B,OAAO;YACPC,UACE;YACFH,MAAM;QACR;QACAzB,SAAS;YACP6B,MAAM;YACNC,YAAY;YACZC,KAAK;QACP;QACA9B,IAAI;YACF+B,QAAQ;YACRC,OAAO;YACPC,MAAM;QACR;IACF;IACAC,IAAI;QACFjD,QAAQ;QACRC,UAAU;QACVC,QAAQ;QACRC,UAAU;QACVC,WAAW;QACXC,eAAe;QACfC,cAAc;QACdC,SAAS;QACTC,SAAS;QACTC,UAAU;QACVC,YAAY;QACZC,aAAa;YACXC,YAAY;YACZC,MAAM;YACNC,SAAS;YACTC,IAAI;QACN;QACAC,YAAY;YACVC,KAAK;YACL,cAAc;YACdC,OAAO;YACPC,SAAS;YACTC,aAAa;YACbC,WAAW;QACb;QACAC,SAAS;YACPL,KAAK;YACLM,YAAY;YACZC,OAAO;YACP,aAAa;YACbC,UAAU;YACV,gBAAgB;YAChBC,OAAO;YACP,aAAa;YACbC,QAAQ;YACRC,QAAQ;YACRC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,SAAS;QACX;QACAC,WAAW;YACTC,KAAK;YACLC,MAAM;QACR;QACAvB,YAAY;YACVwB,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,MAAM;YACNC,OAAO;QACT;QACA3B,MAAM;YACJ4B,OAAO;YACPC,UACE;YACFH,MAAM;QACR;QACAzB,SAAS;YACP6B,MAAM;YACNC,YAAY;YACZC,KAAK;QACP;QACA9B,IAAI;YACF+B,QAAQ;YACRC,OAAO;YACPC,MAAM;QACR;IACF;AACF,EAAC;AAED;;CAEC,GACD,OAAO,SAASE,gBAAgBC,OAAiB,IAAI;IACnD,OAAOrD,YAAY,CAACqD,KAAK,IAAIrD,aAAaC,EAAE;AAC9C"}
+{"version":3,"sources":["../../../../src/globals/ThemeSettings/FontPicker/translations.ts"],"sourcesContent":["export type Language = 'en' | 'cs'\n\nexport interface Translations {\n  search: string\n  category: string\n  subset: string\n  viewMode: string\n  favorites: string\n  allCategories: string\n  allLanguages: string\n  loading: string\n  noFonts: string\n  loadError: string\n  retry: string\n  addFavorite: string\n  removeFavorite: string\n  fontList: string\n  previewModes: string\n  loadMore: string\n  selectFont: string\n  previewTabs: {\n    typography: string\n    blog: string\n    landing: string\n    ui: string\n  }\n  categories: {\n    all: string\n    'sans-serif': string\n    serif: string\n    display: string\n    handwriting: string\n    monospace: string\n  }\n  subsets: {\n    all: string\n    vietnamese: string\n    latin: string\n    'latin-ext': string\n    cyrillic: string\n    'cyrillic-ext': string\n    greek: string\n    'greek-ext': string\n    arabic: string\n    hebrew: string\n    thai: string\n    japanese: string\n    korean: string\n    chinese: string\n  }\n  viewModes: {\n    row: string\n    grid: string\n  }\n  typography: {\n    h1: string\n    h2: string\n    h3: string\n    body: string\n    small: string\n  }\n  blog: {\n    title: string\n    subtitle: string\n    body: string\n  }\n  landing: {\n    hero: string\n    subheading: string\n    cta: string\n  }\n  ui: {\n    button: string\n    input: string\n    link: string\n  }\n}\n\nexport const translations: Record<Language, Translations> = {\n  en: {\n    search: 'Search fonts...',\n    category: 'Category',\n    subset: 'Language',\n    viewMode: 'View',\n    favorites: 'Favorites',\n    allCategories: 'All Categories',\n    allLanguages: 'All Languages',\n    loading: 'Loading fonts...',\n    noFonts: 'No fonts match these filters',\n    loadError: 'Fonts could not be loaded. Check the connection and try again.',\n    retry: 'Try again',\n    addFavorite: 'Add to favorites',\n    removeFavorite: 'Remove from favorites',\n    fontList: 'Fonts',\n    previewModes: 'Preview mode',\n    loadMore: 'Load more',\n    selectFont: 'Select Font',\n    previewTabs: {\n      typography: 'Typography',\n      blog: 'Blog Post',\n      landing: 'Landing Page',\n      ui: 'UI Elements',\n    },\n    categories: {\n      all: 'All',\n      'sans-serif': 'Sans Serif',\n      serif: 'Serif',\n      display: 'Display',\n      handwriting: 'Handwriting',\n      monospace: 'Monospace',\n    },\n    subsets: {\n      all: 'All Languages',\n      vietnamese: '🇻🇳 Vietnamese',\n      latin: 'Latin',\n      'latin-ext': 'Latin Extended',\n      cyrillic: '🇷🇺 Cyrillic',\n      'cyrillic-ext': 'Cyrillic Extended',\n      greek: '🇬🇷 Greek',\n      'greek-ext': 'Greek Extended',\n      arabic: '🇸🇦 Arabic',\n      hebrew: '🇮🇱 Hebrew',\n      thai: '🇹🇭 Thai',\n      japanese: '🇯🇵 Japanese',\n      korean: '🇰🇷 Korean',\n      chinese: '🇨🇳 Chinese',\n    },\n    viewModes: {\n      row: 'Row',\n      grid: 'Grid',\n    },\n    typography: {\n      h1: 'The quick brown fox jumps over the lazy dog',\n      h2: 'Sphinx of black quartz, judge my vow',\n      h3: 'Pack my box with five dozen liquor jugs',\n      body: 'The five boxing wizards jump quickly. A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent.',\n      small: 'How vexingly quick daft zebras jump!',\n    },\n    blog: {\n      title: 'The Art of Typography in Modern Web Design',\n      subtitle:\n        'Typography is one of the most important aspects of web design. It affects readability, user experience, and the overall aesthetic of your website.',\n      body: 'Good typography makes reading effortless and enjoyable. It guides the reader through your content, creating hierarchy and emphasis where needed. When choosing fonts for your website, consider not just how they look, but how they perform across different devices and screen sizes.',\n    },\n    landing: {\n      hero: 'Transform Your Digital Experience',\n      subheading: 'Create stunning websites with beautiful typography',\n      cta: 'Get Started',\n    },\n    ui: {\n      button: 'Click Me',\n      input: 'Enter text here...',\n      link: 'Learn More →',\n    },\n  },\n  cs: {\n    search: 'Hledat fonty...',\n    category: 'Kategorie',\n    subset: 'Jazyk',\n    viewMode: 'Zobrazení',\n    favorites: 'Oblíbené',\n    allCategories: 'Všechny kategorie',\n    allLanguages: 'Všechny jazyky',\n    loading: 'Načítání fontů...',\n    noFonts: 'Filtrům neodpovídá žádný font',\n    loadError: 'Fonty se nepodařilo načíst. Zkontrolujte připojení a zkuste to znovu.',\n    retry: 'Zkusit znovu',\n    addFavorite: 'Přidat do oblíbených',\n    removeFavorite: 'Odebrat z oblíbených',\n    fontList: 'Fonty',\n    previewModes: 'Režim náhledu',\n    loadMore: 'Načíst další',\n    selectFont: 'Vybrat font',\n    previewTabs: {\n      typography: 'Typografie',\n      blog: 'Blogový příspěvek',\n      landing: 'Landing Page',\n      ui: 'UI prvky',\n    },\n    categories: {\n      all: 'Vše',\n      'sans-serif': 'Sans Serif',\n      serif: 'Serif',\n      display: 'Display',\n      handwriting: 'Ručně psané',\n      monospace: 'Monospace',\n    },\n    subsets: {\n      all: 'Všechny jazyky',\n      vietnamese: '🇻🇳 Vietnamština',\n      latin: 'Latinka',\n      'latin-ext': 'Latinka rozšířená',\n      cyrillic: '🇷🇺 Cyrilice',\n      'cyrillic-ext': 'Cyrilice rozšířená',\n      greek: '🇬🇷 Řečtina',\n      'greek-ext': 'Řečtina rozšířená',\n      arabic: '🇸🇦 Arabština',\n      hebrew: '🇮🇱 Hebrejština',\n      thai: '🇹🇭 Thajština',\n      japanese: '🇯🇵 Japonština',\n      korean: '🇰🇷 Korejština',\n      chinese: '🇨🇳 Čínština',\n    },\n    viewModes: {\n      row: 'Řádky',\n      grid: 'Mřížka',\n    },\n    typography: {\n      h1: 'Příliš žluťoučký kůň úpěl ďábelské ódy',\n      h2: 'Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu',\n      h3: 'Zvlášť zákeřný učeň s ďolíčky běží podél zóny úlů',\n      body: 'Typografie je umění a technika uspořádání písma tak, aby byl text čitelný, srozumitelný a vizuálně přitažlivý. Dobrá typografie vytváří hierarchii a vede čtenáře obsahem přirozeným způsobem.',\n      small: 'Dobrá typografie je neviditelná, špatná typografie je nezapomenutelná.',\n    },\n    blog: {\n      title: 'Umění typografie v moderním webdesignu',\n      subtitle:\n        'Typografie je jedním z nejdůležitějších aspektů webdesignu. Ovlivňuje čitelnost, uživatelskou zkušenost a celkovou estetiku vašich webových stránek.',\n      body: 'Dobrá typografie dělá čtení snadným a příjemným. Vede čtenáře vaším obsahem a vytváří hierarchii a důraz tam, kde je to potřeba. Při výběru fontů pro vaše webové stránky zvažte nejen to, jak vypadají, ale také jak fungují na různých zařízeních a velikostech obrazovky.',\n    },\n    landing: {\n      hero: 'Transformujte svůj digitální zážitek',\n      subheading: 'Vytvářejte úchvatné webové stránky s krásnou typografií',\n      cta: 'Začít',\n    },\n    ui: {\n      button: 'Klikněte sem',\n      input: 'Zadejte text...',\n      link: 'Zjistit více →',\n    },\n  },\n}\n\n/**\n * Get translations for a specific language\n */\nexport function getTranslations(lang: Language = 'en'): Translations {\n  return translations[lang] || translations.en\n}\n"],"names":["translations","en","search","category","subset","viewMode","favorites","allCategories","allLanguages","loading","noFonts","loadError","retry","addFavorite","removeFavorite","fontList","previewModes","loadMore","selectFont","previewTabs","typography","blog","landing","ui","categories","all","serif","display","handwriting","monospace","subsets","vietnamese","latin","cyrillic","greek","arabic","hebrew","thai","japanese","korean","chinese","viewModes","row","grid","h1","h2","h3","body","small","title","subtitle","hero","subheading","cta","button","input","link","cs","getTranslations","lang"],"mappings":"AA8EA,OAAO,MAAMA,eAA+C;IAC1DC,IAAI;QACFC,QAAQ;QACRC,UAAU;QACVC,QAAQ;QACRC,UAAU;QACVC,WAAW;QACXC,eAAe;QACfC,cAAc;QACdC,SAAS;QACTC,SAAS;QACTC,WAAW;QACXC,OAAO;QACPC,aAAa;QACbC,gBAAgB;QAChBC,UAAU;QACVC,cAAc;QACdC,UAAU;QACVC,YAAY;QACZC,aAAa;YACXC,YAAY;YACZC,MAAM;YACNC,SAAS;YACTC,IAAI;QACN;QACAC,YAAY;YACVC,KAAK;YACL,cAAc;YACdC,OAAO;YACPC,SAAS;YACTC,aAAa;YACbC,WAAW;QACb;QACAC,SAAS;YACPL,KAAK;YACLM,YAAY;YACZC,OAAO;YACP,aAAa;YACbC,UAAU;YACV,gBAAgB;YAChBC,OAAO;YACP,aAAa;YACbC,QAAQ;YACRC,QAAQ;YACRC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,SAAS;QACX;QACAC,WAAW;YACTC,KAAK;YACLC,MAAM;QACR;QACAvB,YAAY;YACVwB,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,MAAM;YACNC,OAAO;QACT;QACA3B,MAAM;YACJ4B,OAAO;YACPC,UACE;YACFH,MAAM;QACR;QACAzB,SAAS;YACP6B,MAAM;YACNC,YAAY;YACZC,KAAK;QACP;QACA9B,IAAI;YACF+B,QAAQ;YACRC,OAAO;YACPC,MAAM;QACR;IACF;IACAC,IAAI;QACFvD,QAAQ;QACRC,UAAU;QACVC,QAAQ;QACRC,UAAU;QACVC,WAAW;QACXC,eAAe;QACfC,cAAc;QACdC,SAAS;QACTC,SAAS;QACTC,WAAW;QACXC,OAAO;QACPC,aAAa;QACbC,gBAAgB;QAChBC,UAAU;QACVC,cAAc;QACdC,UAAU;QACVC,YAAY;QACZC,aAAa;YACXC,YAAY;YACZC,MAAM;YACNC,SAAS;YACTC,IAAI;QACN;QACAC,YAAY;YACVC,KAAK;YACL,cAAc;YACdC,OAAO;YACPC,SAAS;YACTC,aAAa;YACbC,WAAW;QACb;QACAC,SAAS;YACPL,KAAK;YACLM,YAAY;YACZC,OAAO;YACP,aAAa;YACbC,UAAU;YACV,gBAAgB;YAChBC,OAAO;YACP,aAAa;YACbC,QAAQ;YACRC,QAAQ;YACRC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,SAAS;QACX;QACAC,WAAW;YACTC,KAAK;YACLC,MAAM;QACR;QACAvB,YAAY;YACVwB,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,MAAM;YACNC,OAAO;QACT;QACA3B,MAAM;YACJ4B,OAAO;YACPC,UACE;YACFH,MAAM;QACR;QACAzB,SAAS;YACP6B,MAAM;YACNC,YAAY;YACZC,KAAK;QACP;QACA9B,IAAI;YACF+B,QAAQ;YACRC,OAAO;YACPC,MAAM;QACR;IACF;AACF,EAAC;AAED;;CAEC,GACD,OAAO,SAASE,gBAAgBC,OAAiB,IAAI;IACnD,OAAO3D,YAAY,CAAC2D,KAAK,IAAI3D,aAAaC,EAAE;AAC9C"}

package/dist/globals/ThemeSettings/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/globals/ThemeSettings/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,EAAE,YAqH3B,CAAA"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/globals/ThemeSettings/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAc3C;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,EAAE,YAiG3B,CAAA"}

package/dist/globals/ThemeSettings/config.js

@@ -1,3 +1,68 @@
+const fontWeightOptions = [
+    {
+        value: '100',
+        label: {
+            en: '100 – Thin',
+            cs: '100 – Vlasové'
+        }
+    },
+    {
+        value: '200',
+        label: {
+            en: '200 – Extra light',
+            cs: '200 – Extra tenké'
+        }
+    },
+    {
+        value: '300',
+        label: {
+            en: '300 – Light',
+            cs: '300 – Tenké'
+        }
+    },
+    {
+        value: '400',
+        label: {
+            en: '400 – Regular',
+            cs: '400 – Normální'
+        }
+    },
+    {
+        value: '500',
+        label: {
+            en: '500 – Medium',
+            cs: '500 – Střední'
+        }
+    },
+    {
+        value: '600',
+        label: {
+            en: '600 – Semi bold',
+            cs: '600 – Polotučné'
+        }
+    },
+    {
+        value: '700',
+        label: {
+            en: '700 – Bold',
+            cs: '700 – Tučné'
+        }
+    },
+    {
+        value: '800',
+        label: {
+            en: '800 – Extra bold',
+            cs: '800 – Extra tučné'
+        }
+    },
+    {
+        value: '900',
+        label: {
+            en: '900 – Black',
+            cs: '900 – Černé'
+        }
+    }
+];
 /**
  * ThemeSettings Global Configuration
  *
@@ -8,7 +73,7 @@
     slug: 'themeSettings',
     label: {
         en: 'Theme Settings',
-        cs: 'Nastavení témat'
+        cs: 'Nastavení motivu'
     },
     admin: {
         group: {
@@ -72,90 +137,22 @@
                                 {
                                     name: 'fontWeightHeading',
                                     type: 'select',
-                                    label: 'Heading Font Weight',
+                                    label: {
+                                        en: 'Heading font weight',
+                                        cs: 'Tloušťka písma nadpisů'
+                                    },
                                     defaultValue: '700',
-                                    options: [
-                                        {
-                                            label: '100 - Thin',
-                                            value: '100'
-                                        },
-                                        {
-                                            label: '200 - Extra Light',
-                                            value: '200'
-                                        },
-                                        {
-                                            label: '300 - Light',
-                                            value: '300'
-                                        },
-                                        {
-                                            label: '400 - Regular',
-                                            value: '400'
-                                        },
-                                        {
-                                            label: '500 - Medium',
-                                            value: '500'
-                                        },
-                                        {
-                                            label: '600 - Semi Bold',
-                                            value: '600'
-                                        },
-                                        {
-                                            label: '700 - Bold',
-                                            value: '700'
-                                        },
-                                        {
-                                            label: '800 - Extra Bold',
-                                            value: '800'
-                                        },
-                                        {
-                                            label: '900 - Black',
-                                            value: '900'
-                                        }
-                                    ]
+                                    options: fontWeightOptions
                                 },
                                 {
                                     name: 'fontWeightBody',
                                     type: 'select',
-                                    label: 'Body Font Weight',
+                                    label: {
+                                        en: 'Body font weight',
+                                        cs: 'Tloušťka písma textu'
+                                    },
                                     defaultValue: '400',
-                                    options: [
-                                        {
-                                            label: '100 - Thin',
-                                            value: '100'
-                                        },
-                                        {
-                                            label: '200 - Extra Light',
-                                            value: '200'
-                                        },
-                                        {
-                                            label: '300 - Light',
-                                            value: '300'
-                                        },
-                                        {
-                                            label: '400 - Regular',
-                                            value: '400'
-                                        },
-                                        {
-                                            label: '500 - Medium',
-                                            value: '500'
-                                        },
-                                        {
-                                            label: '600 - Semi Bold',
-                                            value: '600'
-                                        },
-                                        {
-                                            label: '700 - Bold',
-                                            value: '700'
-                                        },
-                                        {
-                                            label: '800 - Extra Bold',
-                                            value: '800'
-                                        },
-                                        {
-                                            label: '900 - Black',
-                                            value: '900'
-                                        }
-                                    ]
+                                    options: fontWeightOptions
                                 }
                             ]
                         },