@sykoramaros/marosh-components 0.1.15 → 0.1.17

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sykoramaros/marosh-components",
   "private": false,
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/basicComponents/Footer.tsx

@@ -10,7 +10,7 @@ export interface FooterLinks {
 export interface FooterSocial {
   title: string
   url: string
-  icon?: LucideIcon | React.ComponentType
+  icon?: string | LucideIcon | React.ComponentType
 }
 
 export interface FooterItems extends React.ComponentPropsWithoutRef<"footer"> {
@@ -31,16 +31,19 @@ export const Footer = ({
     <footer className={cn(className)} {...props}>
       <div className="flex flex-col items-center justify-center gap-5 bg-background py-8 border-t">
         <div className="flex justify-center gap-5 sm:gap-8 xl:gap-13">
-          {socialProfiles.map((item) => (
-            <Link
-              to={item.url}
-              className="rounded-xl"
-              key={item.title}
-              target="_blank"
-            >
-              {item.icon && <item.icon />}
-            </Link>
-          ))}
+          {socialProfiles.map((item) => {
+            const Icon = typeof item.icon === "string" ? null : item.icon
+            return (
+              <Link
+                to={item.url}
+                className="rounded-xl"
+                key={item.title}
+                target="_blank"
+              >
+                {Icon && <Icon />}
+              </Link>
+            )
+          })}
         </div>
         <div className="flex justify-center gap-5 sm:gap-8 xl:gap-13">
           {links.map((item) => {

package/src/config/projectData.ts

@@ -0,0 +1,122 @@
+import {
+  Home,
+  FolderOpenDot,
+  SmilePlus,
+  MessageSquareMore,
+  Facebook,
+  Linkedin,
+  Info,
+  Gitlab,
+} from "lucide-react"
+import type { LucideIcon } from "lucide-react"
+
+export interface ProjectData {
+  appName: string
+  navItems: NavItem[]
+  footerItems: FooterItem
+}
+
+export interface NavItem {
+  title: string
+  url: string
+  icon: LucideIcon
+}
+
+export interface FooterItem {
+  links: Link[]
+  socialProfiles: SocialProfile[]
+  copyright: string
+}
+
+export interface Link {
+  title: string
+  url: string
+}
+
+export interface SocialProfile {
+  title: string
+  url: string
+  icon: LucideIcon
+}
+
+export const projectData: ProjectData = {
+  appName: "Frontend App Template",
+  navItems: [
+    {
+      title: "Home",
+      url: "/",
+      icon: Home,
+    },
+    {
+      title: "About",
+      url: "/portfolio/about",
+      icon: Info,
+    },
+    {
+      title: "Skills",
+      url: "/portfolio/skills",
+      icon: SmilePlus,
+    },
+    {
+      title: "Projects",
+      url: "/portfolio/projects",
+      icon: FolderOpenDot,
+    },
+    // {
+    //   title: "Hobbies",
+    //   url: "/portfolio/hobbies",
+    //   icon: FerrisWheel,
+    // },
+    {
+      title: "Contact",
+      url: "/portfolio/contact",
+      icon: MessageSquareMore,
+    },
+  ],
+  footerItems: {
+    links: [
+      {
+        title: "Home",
+        url: "/",
+      },
+      {
+        title: "Contact",
+        url: "/portfolio/contact",
+      },
+      {
+        title: "Services",
+        url: "/portfolio/services",
+      },
+      {
+        title: "About",
+        url: "/portfolio/about",
+      },
+      {
+        title: "Terms",
+        url: "/portfolio/terms",
+      },
+      // {
+      //   title: "Privacy Policy",
+      //   url: "/privacy-policy",
+      // },
+    ],
+    copyright: "Copyright Marosh ©" + new Date().getFullYear(),
+    socialProfiles: [
+      {
+        title: "Facebook",
+        url: "https://facebook.com/",
+        icon: Facebook,
+      },
+      {
+        title: "Gitlab",
+        url: "https://gitlab.com/",
+        icon: Gitlab,
+      },
+      {
+        title: "LinkedIn",
+        url: "https://www.linkedin.com/",
+        icon: Linkedin,
+      },
+    ],
+  },
+}

package/src/index.ts

@@ -1,5 +1,8 @@
 export { cn } from "@/lib/utils.ts"
 export { Link } from "@tanstack/react-router"
+
+// COMPONENTS
+
 export {
   CustomButton,
   type CustomButtonProps,
@@ -20,3 +23,31 @@ export {
   type MainSidebarLayoutProps,
 } from "@/components/basicComponents/MainSidebarLayout"
 export { Switcher } from "@/components/basicComponents/Switcher"
+
+// PROVIDERS
+export {
+  BaseUrlProvider,
+  useBaseUrl,
+  type BaseUrlProviderProps,
+} from "@/providers/BaseUrlProvider"
+
+export {
+  ProjectProvider,
+  useProject,
+  type ProjectProviderProps,
+} from "@/providers/ProjectDataProvider"
+
+export {
+  ThemeContextProvider,
+  useThemeContext,
+  type ThemeContextProviderProps,
+  type ThemeConfig,
+  type ThemeRegistry,
+  type ThemeMode,
+} from "@/providers/ThemeContextProvider"
+
+// HOOKS
+// ...
+
+// THEMES
+export { themeData } from "@/themes/index"

package/src/providers/BaseUrlProvider.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext, ReactNode } from "react"
+
+export const BaseUrlContext = createContext<string>("")
+
+export interface BaseUrlProviderProps {
+  children: ReactNode
+  value: string
+}
+
+export const BaseUrlProvider = ({ children, value }: BaseUrlProviderProps) => {
+  return (
+    <BaseUrlContext.Provider value={value}>{children}</BaseUrlContext.Provider>
+  )
+}
+
+export const useBaseUrl = (): string => {
+  const context = useContext(BaseUrlContext)
+
+  if (context === undefined) {
+    throw new Error("useBaseUrl must be used within BaseUrlProvider")
+  }
+
+  return context
+}

package/src/providers/ProjectDataProvider.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, ReactNode } from "react"
+
+import { projectData } from "@/config/projectData"
+
+type ProjectData = typeof projectData
+
+const ProjectContext = createContext<ProjectData | undefined>(undefined)
+
+export interface ProjectProviderProps {
+  children: ReactNode
+  value: ProjectData
+}
+
+export const ProjectProvider = ({ children, value }: ProjectProviderProps) => {
+  return (
+    <ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>
+  )
+}
+
+export const useProject = (): ProjectData => {
+  const context = useContext(ProjectContext)
+  if (context === undefined) {
+    throw new Error("useProject must be used within ProjectProvider")
+  }
+  return context
+}

package/src/providers/ThemeContextProvider.tsx

@@ -0,0 +1,260 @@
+// src/providers/ThemeContextProvider.tsx
+import React, { createContext, useContext, useEffect, useState } from "react"
+
+// Typy - EXPORTUJ JE!
+export type ThemeMode = "light" | "dark"
+
+export interface ThemeConfig {
+  name: string
+  cssVars: {
+    theme: Record<string, string>
+    light: Record<string, string>
+    dark: Record<string, string>
+  }
+  css?: {
+    "@layer base"?: Record<string, any>
+  }
+}
+
+export type ThemeRegistry = Record<string, ThemeConfig>
+
+// Context
+interface ThemeContextType {
+  isDarkMode: boolean
+  setIsDarkMode: (value: boolean) => void
+  themeName: string
+  setThemeName: (value: string) => void
+  availableThemes: string[]
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+export const useThemeContext = () => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error("useThemeContext must be used within ThemeContextProvider")
+  }
+  return context
+}
+
+// Provider Props
+export interface ThemeContextProviderProps {
+  children: React.ReactNode
+  themes: ThemeRegistry // <- Uživatel předá své themes!
+  defaultTheme?: string
+  defaultMode?: ThemeMode
+}
+
+// Provider
+export const ThemeContextProvider = ({
+  children,
+  themes,
+  defaultTheme,
+  defaultMode = "light",
+}: ThemeContextProviderProps) => {
+  // Určit default theme
+  const initialTheme = defaultTheme || Object.keys(themes)[0] || "default"
+
+  const [isDarkMode, setIsDarkMode] = useState(defaultMode === "dark")
+  const [themeName, setThemeName] = useState<string>(initialTheme)
+
+  const mode: ThemeMode = isDarkMode ? "dark" : "light"
+
+  useEffect(() => {
+    const theme = themes[themeName] || Object.values(themes)[0]
+
+    if (!theme) {
+      console.warn(`Theme "${themeName}" not found`)
+      return
+    }
+
+    // Aplikovat CSS proměnné pro mode (light/dark)
+    Object.entries(theme.cssVars[mode] || {}).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(`--${key}`, value)
+    })
+
+    // Aplikovat CSS proměnné z theme (včetně fontů)
+    Object.entries(theme.cssVars.theme || {}).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(`--${key}`, value)
+    })
+
+    // Vytvořit a přidat @layer base styly
+    const styleId = "theme-base-styles"
+    let styleElement = document.getElementById(styleId) as HTMLStyleElement
+
+    if (!styleElement) {
+      styleElement = document.createElement("style")
+      styleElement.id = styleId
+      document.head.appendChild(styleElement)
+    }
+
+    // Převést objekt @layer base na CSS řetězec
+    const baseStyles = theme.css?.["@layer base"]
+    if (baseStyles) {
+      const cssString = Object.entries(baseStyles)
+        .map(([selector, styles]) => {
+          const styleString = Object.entries(styles as Record<string, string>)
+            .map(([prop, val]) => `${prop}: ${val};`)
+            .join(" ")
+          return `${selector} { ${styleString} }`
+        })
+        .join("\n")
+
+      styleElement.textContent = `@layer base { ${cssString} }`
+    } else {
+      styleElement.textContent = ""
+    }
+
+    // Nastavit data atributy
+    document.documentElement.setAttribute("data-theme", themeName)
+    document.documentElement.setAttribute("data-mode", mode)
+  }, [themeName, mode, themes])
+
+  const availableThemes = Object.keys(themes)
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        isDarkMode,
+        setIsDarkMode,
+        themeName,
+        setThemeName,
+        availableThemes,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+// // src/providers/ThemeContextProvider.tsx
+// import React, { createContext, useContext, useEffect, useState } from "react"
+
+// // Přímý import JSON
+// import defaultJson from "@/themes/default.json"
+// import maroshThemeJson from "@/themes/marosh-theme.json"
+// import newThemeJson from "@/themes/new-theme.json"
+// import natureJson from "@/themes/nature.json"
+// import retroArcadeJson from "@/themes/retro-arcade.json"
+// import tangerineJson from "@/themes/tangerine.json"
+// import bubblegumJson from "@/themes/bubblegum.json"
+
+// // Typy
+// type ThemeMode = "light" | "dark"
+// type ThemeName =
+//   | "default"
+//   | "marosh"
+//   | "newTheme"
+//   | "nature"
+//   | "retro-arcade"
+//   | "tangerine"
+//   | "bubblegum"
+
+// interface ThemeConfig {
+//   name: string
+//   cssVars: {
+//     theme: Record<string, string>
+//     light: Record<string, string>
+//     dark: Record<string, string>
+//   }
+//   css: {
+//     "@layer base": Record<string, any>
+//   }
+// }
+
+// // Data
+// const themeData = {
+//   default: defaultJson as ThemeConfig,
+//   marosh: maroshThemeJson as ThemeConfig,
+//   newTheme: newThemeJson as ThemeConfig,
+//   nature: natureJson as ThemeConfig,
+//   "retro-arcade": retroArcadeJson as ThemeConfig,
+//   tangerine: tangerineJson as ThemeConfig,
+//   bubblegum: bubblegumJson as ThemeConfig,
+// }
+
+// // Context
+// interface ThemeContextType {
+//   isDarkMode: boolean
+//   setIsDarkMode: (value: boolean) => void
+//   themeName: ThemeName
+//   setThemeName: (value: ThemeName) => void
+// }
+
+// const ThemeContext = createContext<ThemeContextType>({
+//   isDarkMode: false,
+//   setIsDarkMode: () => {},
+//   themeName: "marosh",
+//   setThemeName: () => {},
+// })
+
+// export const useThemeContext = () => useContext(ThemeContext)
+
+// // Provider
+// export const ThemeContextProvider = ({
+//   children,
+//   defaultTheme = "marosh",
+// }: {
+//   children: React.ReactNode
+//   defaultTheme?: ThemeName
+// }) => {
+//   const [isDarkMode, setIsDarkMode] = useState(false)
+//   const [themeName, setThemeName] = useState<ThemeName>(defaultTheme)
+
+//   const mode: ThemeMode = isDarkMode ? "dark" : "light"
+
+//   console.log("ThemeContextProvider - isDarkMode:", isDarkMode, "mode:", mode)
+
+//   useEffect(() => {
+//     const theme = themeData[themeName] || themeData.default
+
+//     // Aplikovat CSS proměnné
+//     Object.entries(theme.cssVars[mode]).forEach(([key, value]) => {
+//       document.documentElement.style.setProperty(`--${key}`, value)
+//     })
+
+//     // Aplikovat CSS proměnné z theme (včetně fontů)
+//     Object.entries(theme.cssVars.theme).forEach(([key, value]) => {
+//       document.documentElement.style.setProperty(`--${key}`, value)
+//     })
+
+//     // Vytvořit a přidat @layer base styly
+//     const styleId = "theme-base-styles"
+//     let styleElement = document.getElementById(styleId) as HTMLStyleElement
+
+//     if (!styleElement) {
+//       styleElement = document.createElement("style")
+//       styleElement.id = styleId
+//       document.head.appendChild(styleElement)
+//     }
+
+//     // Převést objekt @layer base na CSS řetězec
+//     const baseStyles = theme.css?.["@layer base"]
+//     if (baseStyles) {
+//       const cssString = Object.entries(baseStyles)
+//         .map(([selector, styles]) => {
+//           const styleString = Object.entries(styles as Record<string, string>)
+//             .map(([prop, val]) => `${prop}: ${val};`)
+//             .join(" ")
+//           return `${selector} { ${styleString} }`
+//         })
+//         .join("\n")
+
+//       styleElement.textContent = `@layer base { ${cssString} }`
+//     } else {
+//       styleElement.textContent = ""
+//     }
+
+//     // Nastavit data atributy
+//     document.documentElement.setAttribute("data-theme", themeName)
+//     document.documentElement.setAttribute("data-mode", mode)
+//   }, [themeName, mode])
+
+//   return (
+//     <ThemeContext.Provider
+//       value={{ isDarkMode, setIsDarkMode, themeName, setThemeName }}
+//     >
+//       {children}
+//     </ThemeContext.Provider>
+//   )
+// }

package/src/themes/bubblegum.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "bubblegum",
+  "type": "registry:style",
+  "css": {
+    "@layer base": {
+      "body": {
+        "letter-spacing": "var(--tracking-normal)"
+      }
+    }
+  },
+  "cssVars": {
+    "theme": {
+      "font-sans": "Poppins, sans-serif",
+      "font-mono": "Fira Code, monospace",
+      "font-serif": "Lora, serif",
+      "radius": "0.4rem",
+      "tracking-tighter": "calc(var(--tracking-normal) - 0.05em)",
+      "tracking-tight": "calc(var(--tracking-normal) - 0.025em)",
+      "tracking-wide": "calc(var(--tracking-normal) + 0.025em)",
+      "tracking-wider": "calc(var(--tracking-normal) + 0.05em)",
+      "tracking-widest": "calc(var(--tracking-normal) + 0.1em)"
+    },
+    "light": {
+      "background": "oklch(0.9399 0.0203 345.6985)",
+      "foreground": "oklch(0.4712 0 0)",
+      "card": "oklch(0.9498 0.0500 86.8891)",
+      "card-foreground": "oklch(0.4712 0 0)",
+      "popover": "oklch(1.0000 0 0)",
+      "popover-foreground": "oklch(0.4712 0 0)",
+      "primary": "oklch(0.6209 0.1801 348.1385)",
+      "primary-foreground": "oklch(1.0000 0 0)",
+      "secondary": "oklch(0.8095 0.0694 198.1863)",
+      "secondary-foreground": "oklch(0.3211 0 0)",
+      "muted": "oklch(0.8800 0.0504 212.0952)",
+      "muted-foreground": "oklch(0.5795 0 0)",
+      "accent": "oklch(0.9195 0.0801 87.6670)",
+      "accent-foreground": "oklch(0.3211 0 0)",
+      "destructive": "oklch(0.7091 0.1697 21.9551)",
+      "destructive-foreground": "oklch(1.0000 0 0)",
+      "border": "oklch(0.6209 0.1801 348.1385)",
+      "input": "oklch(0.9189 0 0)",
+      "ring": "oklch(0.7002 0.1597 350.7532)",
+      "chart-1": "oklch(0.7002 0.1597 350.7532)",
+      "chart-2": "oklch(0.8189 0.0799 212.0892)",
+      "chart-3": "oklch(0.9195 0.0801 87.6670)",
+      "chart-4": "oklch(0.7998 0.1110 348.1791)",
+      "chart-5": "oklch(0.6197 0.1899 353.9091)",
+      "radius": "0.4rem",
+      "sidebar": "oklch(0.9140 0.0424 343.0913)",
+      "sidebar-foreground": "oklch(0.3211 0 0)",
+      "sidebar-primary": "oklch(0.6559 0.2118 354.3084)",
+      "sidebar-primary-foreground": "oklch(1.0000 0 0)",
+      "sidebar-accent": "oklch(0.8228 0.1095 346.0184)",
+      "sidebar-accent-foreground": "oklch(0.3211 0 0)",
+      "sidebar-border": "oklch(0.9464 0.0327 307.1745)",
+      "sidebar-ring": "oklch(0.6559 0.2118 354.3084)",
+      "font-sans": "Poppins, sans-serif",
+      "font-serif": "Lora, serif",
+      "font-mono": "Fira Code, monospace",
+      "shadow-color": "hsl(325.78 58.18% 56.86% / 0.5)",
+      "shadow-opacity": "1.0",
+      "shadow-blur": "0px",
+      "shadow-spread": "0px",
+      "shadow-offset-x": "3px",
+      "shadow-offset-y": "3px",
+      "letter-spacing": "0em",
+      "spacing": "0.25rem",
+      "shadow-2xs": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50)",
+      "shadow-xs": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50)",
+      "shadow-sm": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00)",
+      "shadow": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00)",
+      "shadow-md": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 2px 4px -1px hsl(325.7800 58.1800% 56.8600% / 1.00)",
+      "shadow-lg": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 4px 6px -1px hsl(325.7800 58.1800% 56.8600% / 1.00)",
+      "shadow-xl": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 8px 10px -1px hsl(325.7800 58.1800% 56.8600% / 1.00)",
+      "shadow-2xl": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 2.50)",
+      "tracking-normal": "0em"
+    },
+    "dark": {
+      "background": "oklch(0.2497 0.0305 234.1628)",
+      "foreground": "oklch(0.9306 0.0197 349.0785)",
+      "card": "oklch(0.2902 0.0299 233.5352)",
+      "card-foreground": "oklch(0.9306 0.0197 349.0785)",
+      "popover": "oklch(0.2902 0.0299 233.5352)",
+      "popover-foreground": "oklch(0.9306 0.0197 349.0785)",
+      "primary": "oklch(0.9195 0.0801 87.6670)",
+      "primary-foreground": "oklch(0.2497 0.0305 234.1628)",
+      "secondary": "oklch(0.7794 0.0803 4.1330)",
+      "secondary-foreground": "oklch(0.2497 0.0305 234.1628)",
+      "muted": "oklch(0.2713 0.0086 255.5780)",
+      "muted-foreground": "oklch(0.7794 0.0803 4.1330)",
+      "accent": "oklch(0.6699 0.0988 356.9762)",
+      "accent-foreground": "oklch(0.9306 0.0197 349.0785)",
+      "destructive": "oklch(0.6702 0.1806 350.3599)",
+      "destructive-foreground": "oklch(0.2497 0.0305 234.1628)",
+      "border": "oklch(0.3907 0.0399 242.2181)",
+      "input": "oklch(0.3093 0.0305 232.0027)",
+      "ring": "oklch(0.6998 0.0896 201.8672)",
+      "chart-1": "oklch(0.6998 0.0896 201.8672)",
+      "chart-2": "oklch(0.7794 0.0803 4.1330)",
+      "chart-3": "oklch(0.6699 0.0988 356.9762)",
+      "chart-4": "oklch(0.4408 0.0702 217.0848)",
+      "chart-5": "oklch(0.2713 0.0086 255.5780)",
+      "radius": "0.4rem",
+      "sidebar": "oklch(0.2303 0.0270 235.9743)",
+      "sidebar-foreground": "oklch(0.9670 0.0029 264.5419)",
+      "sidebar-primary": "oklch(0.6559 0.2118 354.3084)",
+      "sidebar-primary-foreground": "oklch(1.0000 0 0)",
+      "sidebar-accent": "oklch(0.8228 0.1095 346.0184)",
+      "sidebar-accent-foreground": "oklch(0.2781 0.0296 256.8480)",
+      "sidebar-border": "oklch(0.3729 0.0306 259.7328)",
+      "sidebar-ring": "oklch(0.6559 0.2118 354.3084)",
+      "font-sans": "Poppins, sans-serif",
+      "font-serif": "Lora, serif",
+      "font-mono": "Fira Code, monospace",
+      "shadow-color": "#324859",
+      "shadow-opacity": "1.0",
+      "shadow-blur": "0px",
+      "shadow-spread": "0px",
+      "shadow-offset-x": "3px",
+      "shadow-offset-y": "3px",
+      "letter-spacing": "0em",
+      "spacing": "0.25rem",
+      "shadow-2xs": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50)",
+      "shadow-xs": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50)",
+      "shadow-sm": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00)",
+      "shadow": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00)",
+      "shadow-md": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 2px 4px -1px hsl(206.1538 28.0576% 27.2549% / 1.00)",
+      "shadow-lg": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 4px 6px -1px hsl(206.1538 28.0576% 27.2549% / 1.00)",
+      "shadow-xl": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 8px 10px -1px hsl(206.1538 28.0576% 27.2549% / 1.00)",
+      "shadow-2xl": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 2.50)"
+    }
+  }
+}