colbrush 1.3.0 → 1.4.0

package/dist/cli.cjs

@@ -23,7 +23,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// src/node/parseFlags.ts
+// src/cli/parseFlags.ts
 function parseFlags(argv = process.argv.slice(2)) {
   const out = { _: [] };
   for (const s of argv) {
@@ -35,19 +35,19 @@ function parseFlags(argv = process.argv.slice(2)) {
   return out;
 }
 
-// src/constants/regex.ts
+// src/core/constants/regex.ts
 var variableRegex = /(--color-[\w-]+):\s*(#[0-9a-fA-F]{3,8})/g;
 var variationRegex = /^--(.+?)-(50|100|200|300|400|500|600|700|800|900)$/i;
 
-// src/node/applyThemes.ts
+// src/cli/applyThemes.ts
 var import_node_fs = __toESM(require("fs"), 1);
 var import_postcss = __toESM(require("postcss"), 1);
 var import_postcss_safe_parser = __toESM(require("postcss-safe-parser"), 1);
 
-// src/utils/core/colorScale.ts
+// src/core/utils/colorScale.ts
 var import_colorjs = __toESM(require("colorjs.io"), 1);
 
-// src/constants/variation.ts
+// src/core/constants/variation.ts
 var DEFAULT_KEYS = [
   "50",
   "100",
@@ -73,7 +73,7 @@ var DEFAULT_SCALE = {
   "900": { dL: -0.3, cMul: 0.88 }
 };
 
-// src/utils/core/colorScale.ts
+// src/core/utils/colorScale.ts
 var CLAMP01 = (x) => Math.max(0, Math.min(1, x));
 function hexToOKLCH(hex) {
   const c = new import_colorjs.default(hex);
@@ -103,11 +103,8 @@ function buildScaleFromBaseHex(baseHex, opts) {
   return out;
 }
 
-// src/node/applyThemes.ts
+// src/cli/applyThemes.ts
 var CSS_PATH = "src/index.css";
-function toThemeColor(hex, _vision) {
-  return hex;
-}
 function loadRoot(cssPath = CSS_PATH) {
   const css = import_node_fs.default.readFileSync(cssPath, "utf8");
   return (0, import_postcss.default)().process(css, { parser: import_postcss_safe_parser.default }).root;
@@ -152,7 +149,7 @@ function getColorVariablesFromRoot(root) {
   });
   return vars;
 }
-function applyThemes(input, cssPath = CSS_PATH) {
+function applyThemes(input, cssPath = CSS_PATH, opts) {
   const root = loadRoot(cssPath);
   const originalVars = getColorVariablesFromRoot(root);
   const varsForTheme = {};
@@ -167,27 +164,31 @@ function applyThemes(input, cssPath = CSS_PATH) {
       const [, token] = m;
       const keys = rich.keys && rich.keys.length ? rich.keys : getExistingKeysForToken(root, token).length ? getExistingKeysForToken(root, token) : Array.from(DEFAULT_KEYS);
       if (rich.scale !== false) {
-        const scaleMap = buildScaleFromBaseHex(rich.base, { keys });
+        const scaleMap = buildScaleFromBaseHex(rich.base, {
+          keys
+        });
         for (const k of keys) {
           const hex = scaleMap[k];
-          varsForTheme[`--${token}-${k}`] = toThemeColor(hex, input.vision);
+          varsForTheme[`--${token}-${k}`] = hex;
         }
       } else {
-        varsForTheme[varName] = toThemeColor(rich.base, input.vision);
+        varsForTheme[varName] = rich.base;
       }
     } else {
-      varsForTheme[varName] = toThemeColor(rich.base, input.vision);
+      varsForTheme[varName] = rich.base;
     }
   }
   upsertBlock(root, `[data-theme='${input.vision}']`, varsForTheme);
   import_node_fs.default.writeFileSync(cssPath, root.toString(), "utf8");
-  console.log(`\u2705 [${input.vision}] theme updated in ${cssPath}`);
+  if (!opts?.silent) {
+    console.log(`\u2705 [${input.vision}] theme updated in ${cssPath}`);
+  }
 }
 function inferRich(varName, baseHex) {
   return variationRegex.test(varName) ? { base: baseHex, scale: true } : { base: baseHex, scale: false };
 }
 
-// src/node/colorTransform.ts
+// src/cli/colorTransform.ts
 var import_chroma_js = __toESM(require("chroma-js"), 1);
 var import_color_blind = __toESM(require("color-blind"), 1);
 var THRESHOLD = 10;
@@ -199,7 +200,10 @@ function generateCandidates(hex) {
   candidates[0] = hex;
   for (let i = 1; i <= CANDIDATE_COUNT / 2; i++) {
     candidates[i * 2 - 1] = (0, import_chroma_js.default)(hex).set("hcl.h", (baseHue + HUE_STEP / CANDIDATE_COUNT * i) % 360).hex();
-    candidates[i * 2] = (0, import_chroma_js.default)(hex).set("hcl.h", (baseHue - HUE_STEP / CANDIDATE_COUNT * i + 360) % 360).hex();
+    candidates[i * 2] = (0, import_chroma_js.default)(hex).set(
+      "hcl.h",
+      (baseHue - HUE_STEP / CANDIDATE_COUNT * i + 360) % 360
+    ).hex();
   }
   return candidates;
 }
@@ -213,7 +217,7 @@ function findOptimalColorCombination(colorKeys, baseColorsArray, candidateList,
     case "protanopia":
       blind = import_color_blind.default.protanopia;
       break;
-    // 녹색맹 
+    // 녹색맹
     case "deuteranopia":
       blind = import_color_blind.default.deuteranopia;
       break;
@@ -244,12 +248,15 @@ function findOptimalColorCombination(colorKeys, baseColorsArray, candidateList,
   }
   dfs(0, [], 0);
   const finalColors = bestColors ?? [...baseColorsArray];
-  return colorKeys.reduce((acc, key, idx) => {
-    acc[key] = finalColors[idx];
-    return acc;
-  }, {});
+  return colorKeys.reduce(
+    (acc, key, idx) => {
+      acc[key] = finalColors[idx];
+      return acc;
+    },
+    {}
+  );
 }
-async function requestColorTransformation(variables) {
+function prepareCandidates(variables, progress) {
   const scaleGroups = {};
   const filteredVariables = {};
   for (const key in variables) {
@@ -275,26 +282,30 @@ async function requestColorTransformation(variables) {
   }
   const colorKeys = Object.keys(filteredVariables);
   const baseColorsArray = Object.values(filteredVariables).map((v) => v.base);
-  const candidateList = baseColorsArray.map((color) => {
-    return generateCandidates(color);
-  });
-  const colors_d = findOptimalColorCombination(colorKeys, baseColorsArray, candidateList, "deuteranopia");
-  const colors_p = findOptimalColorCombination(colorKeys, baseColorsArray, candidateList, "protanopia");
-  const colors_t = findOptimalColorCombination(colorKeys, baseColorsArray, candidateList, "tritanopia");
-  const visions = ["deuteranopia", "protanopia", "tritanopia"];
-  const colorsMap = {
-    deuteranopia: colors_d,
-    protanopia: colors_p,
-    tritanopia: colors_t
-  };
-  const themes = visions.map((vision) => ({
-    vision,
-    variables: Object.entries(colorsMap[vision]).reduce((acc, [varName, baseHex]) => {
+  progress?.startSection("Generate candidates");
+  const candidateList = [];
+  for (let i = 0; i < baseColorsArray.length; i++) {
+    candidateList[i] = generateCandidates(baseColorsArray[i]);
+    progress?.update((i + 1) / baseColorsArray.length * 100);
+  }
+  progress?.finishSection("Done");
+  return { colorKeys, baseColorsArray, candidateList };
+}
+function buildThemeForVision(colorKeys, baseColorsArray, candidateList, vision) {
+  const colors = findOptimalColorCombination(
+    colorKeys,
+    baseColorsArray,
+    candidateList,
+    vision
+  );
+  const variables = Object.entries(colors).reduce(
+    (acc, [varName, baseHex]) => {
       acc[varName] = inferRich(varName, baseHex);
       return acc;
-    }, {})
-  }));
-  return { themes };
+    },
+    {}
+  );
+  return { vision, variables };
 }
 function getMiddleScaleKey(keys) {
   const scaleNumbers = keys.map((k) => {
@@ -311,16 +322,17 @@ function getMiddleScaleKey(keys) {
 function isValidColors(colors, blind) {
   for (let i = 0; i < colors.length; i++) {
     for (let j = i + 1; j < colors.length; j++) {
-      if (import_chroma_js.default.deltaE(blind(colors[i]), blind(colors[j])) < THRESHOLD) return false;
+      if (import_chroma_js.default.deltaE(blind(colors[i]), blind(colors[j])) < THRESHOLD)
+        return false;
     }
   }
   return true;
 }
 
-// src/node/runThemeApply.ts
+// src/cli/runThemeApply.ts
 var import_node_fs2 = __toESM(require("fs"), 1);
 
-// src/node/removeExistingThemeBlocks.ts
+// src/cli/removeExistingThemeBlocks.ts
 function removeExistingThemeBlocks(content) {
   const visions = ["protanopia", "deuteranopia", "tritanopia"];
   let cleaned = content;
@@ -334,7 +346,7 @@ function removeExistingThemeBlocks(content) {
   return cleaned.trim();
 }
 
-// src/node/runThemeApply.ts
+// src/cli/runThemeApply.ts
 function hexToRgb(hex) {
   let clean = hex.replace("#", "").toLowerCase();
   if (clean.length === 3) {
@@ -368,19 +380,30 @@ function calculateScale(varName, hexColor) {
   }
   return /\d+$/.test(varName);
 }
-async function runThemeApply(cssPath) {
+async function runThemeApply(cssPath, progress) {
   if (!import_node_fs2.default.existsSync(cssPath)) {
     throw new Error(`\u274C CSS \uD30C\uC77C\uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4: ${cssPath}`);
   }
   let content = import_node_fs2.default.readFileSync(cssPath, "utf8");
+  progress?.startSection("Remove existing theme blocks");
   content = removeExistingThemeBlocks(content);
+  progress?.update(100);
+  progress?.finishSection("Done");
   const variables = {};
+  progress?.startSection("Extract variables");
+  const scanRegex = new RegExp(variableRegex.source, variableRegex.flags);
+  const all = Array.from(content.matchAll(scanRegex));
+  const totalVars = all.length || 1;
+  const loopRegex = new RegExp(variableRegex.source, variableRegex.flags);
   let match;
-  while ((match = variableRegex.exec(content)) !== null) {
+  let count = 0;
+  while ((match = loopRegex.exec(content)) !== null) {
     const [, key, value] = match;
     const cleanKey = key.trim();
     const cleanValue = value.trim().toLowerCase();
     if (isNeutralColor(cleanValue)) {
+      count++;
+      progress?.update(count / totalVars * 100);
       continue;
     }
     const scale = calculateScale(cleanKey, cleanValue);
@@ -389,35 +412,159 @@ async function runThemeApply(cssPath) {
       scale
     };
     variables[cleanKey] = rich;
+    count++;
+    progress?.update(count / totalVars * 100);
   }
+  progress?.finishSection("Done");
   const visions = ["deuteranopia", "protanopia", "tritanopia"];
   try {
-    const algorithmResult = await requestColorTransformation(variables);
-    for (const themeData of algorithmResult.themes) {
-      await applyThemes(themeData, cssPath);
+    const { colorKeys, baseColorsArray, candidateList } = prepareCandidates(
+      variables,
+      progress
+    );
+    for (const vision of visions) {
+      const label = `Process \u2014 ${vision}`;
+      progress?.startSection(label);
+      progress?.update(30, "Optimizing...");
+      const themeData = buildThemeForVision(
+        colorKeys,
+        baseColorsArray,
+        candidateList,
+        vision
+      );
+      progress?.update(70, "Applying CSS...");
+      await applyThemes(themeData, cssPath, { silent: !!progress });
+      progress?.update(100, "Done");
+      progress?.finishSection("Done");
     }
   } catch (error) {
     console.log("\u{1F680} ~ runThemeApply ~ error:", error);
     for (const vision of visions) {
-      await applyThemes({ vision, variables }, cssPath);
+      const label = `Process (fallback) \u2014 ${vision}`;
+      progress?.startSection(label);
+      await applyThemes({ vision, variables }, cssPath, {
+        silent: !!progress
+      });
+      progress?.finishSection("Done");
+    }
+  }
+  console.log(`
+\u2705 Colbrush themes applied to ${cssPath}`);
+}
+
+// src/cli/progress.ts
+function clampPercent(n) {
+  if (Number.isNaN(n)) return 0;
+  return Math.max(0, Math.min(100, n));
+}
+function createCliProgress() {
+  let hasAnyOutput = false;
+  let currentSection = null;
+  let sectionStartedAt = 0;
+  const isTTY = !!process.stdout.isTTY;
+  const A = {
+    reset: "\x1B[0m",
+    // 리셋
+    bold: "\x1B[1m",
+    // 굵게
+    dim: "\x1B[2m",
+    // 흐리게
+    green: "\x1B[32m",
+    // 초록
+    cyan: "\x1B[36m",
+    // 청록
+    clearLine: "\x1B[2K",
+    // 줄 지우기
+    carriage: "\r"
+    // 캐리지 리턴
+  };
+  const style = (code, text) => isTTY ? `${code}${text}${A.reset}` : text;
+  const bold = (t) => style(A.bold, t);
+  const dim = (t) => style(A.dim, t);
+  const green = (t) => style(A.green, t);
+  const cyan = (t) => style(A.cyan, t);
+  function writeSameLine(text) {
+    if (isTTY) {
+      process.stdout.write(A.clearLine + A.carriage + text);
+    } else {
+      console.log(text);
     }
+    hasAnyOutput = true;
+  }
+  function newline() {
+    if (hasAnyOutput) process.stdout.write("\n");
   }
-  console.log(`\u2705 ${cssPath}\uC5D0 \uC0C9\uB9F9 \uD14C\uB9C8\uAC00 \uC801\uC6A9\uB418\uC5C8\uC2B5\uB2C8\uB2E4`);
+  function getTerminalColumns() {
+    const c = typeof process.stdout.columns === "number" ? process.stdout.columns : 80;
+    return Math.max(40, c);
+  }
+  function renderBar(pct) {
+    const columns = getTerminalColumns();
+    const width = Math.max(12, Math.min(30, Math.floor(columns * 0.3)));
+    const filled = Math.round(pct / 100 * width);
+    const fillChar = "\u2588";
+    const emptyChar = "\u2591";
+    const body = fillChar.repeat(filled) + emptyChar.repeat(width - filled);
+    return pct >= 100 ? green(body) : cyan(body);
+  }
+  function render(pctRaw, suffixLabel, opts) {
+    const p = clampPercent(pctRaw);
+    const name = currentSection ? bold(currentSection) : "";
+    const bar = renderBar(p);
+    const percentText = bold(`${p.toFixed(0).padStart(3, " ")}%`);
+    const prefix = isTTY ? `${cyan("\u203A")} ${name ? name + " " : ""}` : name ? name + " " : "";
+    const suffix = suffixLabel ? ` ${opts?.styledSuffix ? suffixLabel : dim(suffixLabel)}` : "";
+    writeSameLine(`${prefix}[${bar}] ${percentText}${suffix}`);
+  }
+  return {
+    startSection(name) {
+      if (currentSection) newline();
+      currentSection = name;
+      sectionStartedAt = Date.now();
+      render(0);
+    },
+    update(percent, label) {
+      if (!currentSection) {
+        currentSection = "";
+        sectionStartedAt = Date.now();
+      }
+      render(percent, label);
+    },
+    finishSection() {
+      if (!currentSection) return;
+      const ms = Date.now() - sectionStartedAt;
+      const secText = (ms / 1e3).toFixed(1) + "s";
+      const doneStyled = `${green("\u2714 Done")} ${dim(`(${secText})`)}`;
+      render(100, doneStyled, { styledSuffix: true });
+      newline();
+      process.stdout.write("\n\n");
+      currentSection = null;
+    },
+    // 하위 호환: 단일 바를 하나의 섹션처럼 취급
+    start(_totalHint, label) {
+      this.startSection(label ?? "");
+    },
+    finish(label) {
+      this.finishSection(label);
+    }
+  };
 }
 
-// src/cli.ts
+// src/cli/index.ts
 async function main() {
   const flags = parseFlags();
   const cmd = flags._[0] ?? "generate";
   const cssPath = typeof flags.css === "string" ? flags.css : "src/index.css";
   if (cmd === "generate") {
-    await runThemeApply(cssPath);
+    const progress = createCliProgress();
+    await runThemeApply(cssPath, progress);
     process.exit(0);
   }
-  console.log(`\uC0AC\uC6A9 \uBC29\uBC95:
-    - cb-theme generate [--css=src/index.css]
-        CSS \uD30C\uC77C\uC5D0\uC11C \uC0C9\uC0C1 \uBCC0\uC218\uB4E4\uC744 \uCD94\uCD9C\uD558\uACE0, \uC0C9\uB9F9 \uD14C\uB9C8\uB97C \uC790\uB3D9 \uC0DD\uC131\uD558\uC5EC \uAC19\uC740 CSS \uD30C\uC77C\uC5D0 \uC801\uC6A9\uD569\uB2C8\uB2E4.
-        (\uAE30\uBCF8 \uACBD\uB85C\uB294 src/index.css)
+  console.log(`Usage:
+    - colbrush generate [--css=src/index.css]
+        Extracts color variables from the CSS file and automatically generates color-blind themes,
+        then applies them to the same CSS file.
+        (Default path: src/index.css)
 `);
   process.exit(1);
 }

package/dist/client.cjs

@@ -0,0 +1,715 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client.ts
+var client_exports = {};
+__export(client_exports, {
+  THEMES: () => THEMES,
+  ThemeProvider: () => ThemeProvider,
+  ThemeSwitcher: () => ThemeSwitcher,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(client_exports);
+
+// src/react/ThemeProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var THEME_KEYS = [
+  "default",
+  "protanopia",
+  "deuteranopia",
+  "tritanopia"
+];
+var THEME_LABEL = {
+  English: {
+    default: "default",
+    protanopia: "protanopia",
+    deuteranopia: "deuteranopia",
+    tritanopia: "tritanopia"
+  },
+  Korean: {
+    default: "\uAE30\uBCF8",
+    protanopia: "\uC801\uC0C9\uB9F9",
+    deuteranopia: "\uB179\uC0C9\uB9F9",
+    tritanopia: "\uCCAD\uC0C9\uB9F9"
+  }
+};
+var getThemeOptions = (lang) => THEME_KEYS.map((key) => ({ key, label: THEME_LABEL[lang][key] }));
+var KEY = "theme";
+var LANG_KEY = "theme_lang";
+var ThemeContext = (0, import_react.createContext)({
+  theme: "default",
+  language: "English",
+  updateTheme: () => {
+  },
+  updateLanguage: () => {
+  }
+});
+var useTheme = () => (0, import_react.useContext)(ThemeContext);
+function normalizeToKey(value) {
+  if (!value) return "default";
+  if (THEME_KEYS.includes(value))
+    return value;
+  const reverse = {};
+  ["English", "Korean"].forEach((lang) => {
+    Object.entries(THEME_LABEL[lang]).forEach(
+      ([k, label]) => {
+        reverse[label] = k;
+      }
+    );
+  });
+  return reverse[value] ?? "default";
+}
+function ThemeProvider({ children }) {
+  const [theme, setTheme] = (0, import_react.useState)("default");
+  const [language, setLanguage] = (0, import_react.useState)("English");
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const storedTheme = normalizeToKey(localStorage.getItem(KEY));
+    const storedLang = localStorage.getItem(LANG_KEY) || "English";
+    setTheme(storedTheme);
+    setLanguage(storedLang);
+    document.documentElement.setAttribute("data-theme", storedTheme);
+  }, []);
+  const updateTheme = (k) => {
+    setTheme(k);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(KEY, k);
+      document.documentElement.setAttribute("data-theme", k);
+    }
+  };
+  const updateLanguage = (t) => {
+    setLanguage(t);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(LANG_KEY, t);
+    }
+  };
+  const value = (0, import_react.useMemo)(
+    () => ({ theme, language, updateTheme, updateLanguage }),
+    [theme, language]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
+}
+var THEMES = THEME_LABEL;
+
+// src/react/ThemeSwitcher.tsx
+var import_react3 = require("react");
+
+// src/icons/Logo.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SvgLogo = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 39,
+    height: 40,
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#CE78A9", d: "m.5 17.805 1.516-3.514 16.812-7.924-1.309 3.308z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#D55D00",
+          d: "M3.187 24.212 1.05 19.32l14.056-7.097-1.378 3.376-9.233 4.685 2.48 5.72z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#E59F01",
+          d: "m22.276.741 3.496 1.556 7.732 16.901-3.292-1.347z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#000",
+          d: "m15.837 3.355 4.916-2.08L27.69 15.41l-3.36-1.417-4.58-9.285-5.747 2.415z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#0072B1",
+          d: "m17.036 39.246-3.493-1.562-7.699-16.917 3.29 1.354z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#F0E442",
+          d: "m23.477 36.645-4.92 2.07-6.908-14.149 3.357 1.423 4.562 9.295 5.751-2.404z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#009F73",
+          d: "m38.889 22.215-1.482 3.529-16.734 8.087 1.277-3.32z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#56B4E8",
+          d: "m36.14 15.833 2.184 4.871-13.987 7.233 1.345-3.389 9.187-4.775-2.536-5.694z"
+        }
+      )
+    ]
+  }
+);
+var Logo_default = SvgLogo;
+
+// src/icons/Us.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SvgUs = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 28,
+    height: 21,
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { clipPath: "url(#a)", filter: "url(#b)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "#fff", d: "M3.996 4.166h20v13.333h-20z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            fill: "#D80027",
+            d: "M3.996 4.166h20v1.025h-20zm0 2.05h20v1.026h-20zm0 2.051h20v1.026h-20zm0 2.051h20v1.025h-20zm0 2.055h20v1.025h-20zm0 2.05h20v1.026h-20zm0 2.051h20v1.025h-20z"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "#2E52B2", d: "M3.996 4.166h10v7.177h-10z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            fill: "#fff",
+            d: "m5.86 9.581-.156-.499-.172.5h-.514l.417.3-.156.498.425-.308.413.308-.16-.499.425-.3zm2.195 0-.16-.499-.164.5h-.515l.418.3-.156.498.417-.308.42.308-.155-.499.417-.3zm2.202 0-.167-.499-.156.5h-.527l.43.3-.164.498.417-.308.429.308-.164-.499.417-.3zm2.191 0-.156-.499-.163.5h-.519l.421.3-.156.498.417-.308.422.308-.168-.499.429-.3zm-4.553-2.48-.164.5h-.515l.418.308-.156.49.417-.303.42.304-.155-.491.417-.308h-.522zm-2.191 0-.172.5h-.514l.417.308-.156.49.425-.303.413.304-.16-.491.425-.308H5.86zm4.386 0-.156.5h-.527l.43.308-.164.49.417-.303.429.304-.164-.491.417-.308h-.515zm2.202 0-.163.5h-.519l.421.308-.156.49.417-.303.422.304-.168-.491.429-.308h-.527zM5.704 5.13l-.172.491h-.514l.417.308-.156.495.425-.308.413.308-.16-.495.425-.308H5.86zm2.19 0-.163.491h-.515l.418.308-.156.495.417-.308.42.308-.155-.495.417-.308h-.522zm2.196 0-.156.491h-.527l.43.308-.164.495.417-.308.429.308-.164-.495.417-.308h-.515zm2.202 0-.163.491h-.519l.421.308-.156.495.417-.308.422.308-.168-.495.429-.308h-.527z"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("defs", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("clipPath", { id: "a", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "#fff", d: "M3.996 4.166h20v13.333h-20z" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "filter",
+          {
+            id: "b",
+            width: 26.973,
+            height: 20.307,
+            x: 0.509,
+            y: 0.679,
+            colorInterpolationFilters: "sRGB",
+            filterUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "feColorMatrix",
+                {
+                  in: "SourceAlpha",
+                  result: "hardAlpha",
+                  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feOffset", {}),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feGaussianBlur", { stdDeviation: 1.743 }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feComposite", { in2: "hardAlpha", operator: "out" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "feBlend",
+                {
+                  in2: "BackgroundImageFix",
+                  result: "effect1_dropShadow_306_3300"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "feBlend",
+                {
+                  in: "SourceGraphic",
+                  in2: "effect1_dropShadow_306_3300",
+                  result: "shape"
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+);
+var Us_default = SvgUs;
+
+// src/icons/Kr.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SvgKr = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 17,
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { clipPath: "url(#a)", filter: "url(#b)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { fill: "#fff", d: "M1.906 2h20v13.333h-20z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#000",
+            fillRule: "evenodd",
+            d: "m4.959 6.04 1.849-2.774.487.324-1.85 2.773zm.693.461 1.85-2.773.486.324-1.85 2.774zm.694.463L8.195 4.19l.486.324-1.849 2.774zm8.782 5.855 1.85-2.774.486.325-1.849 2.773zm.694.462 1.849-2.774.486.325-1.849 2.773zm3.029-1.987L17 14.068l-.486-.325 1.85-2.773z",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#fff",
+            fillRule: "evenodd",
+            d: "m18.01 13.03-2.31-1.542.27-.405 2.31 1.54z",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#CA163A",
+            d: "M14.68 10.514a3.333 3.333 0 1 0-5.548-3.698 3.333 3.333 0 0 0 5.547 3.698"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#0E4896",
+            d: "M9.132 6.816a1.667 1.667 0 0 0 2.774 1.85 1.667 1.667 0 0 1 2.773 1.848 3.334 3.334 0 0 1-5.547-3.698"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#000",
+            fillRule: "evenodd",
+            d: "m17.002 3.266 1.849 2.773-.487.325-1.849-2.774zm-.694.462 1.85 2.773-.487.325-1.85-2.774zm-.693.462 1.85 2.774-.488.324-1.848-2.773zm-8.783 5.855 1.85 2.774-.487.324-1.85-2.773zm-.693.463 1.849 2.773-.487.324-1.849-2.773zm-.693.462 1.849 2.773-.487.325-1.849-2.774z",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#000",
+            d: "m6.475 12.286.693-.462zm9.36-6.24.81-.54zm1.502-1.002.694-.462z"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#fff",
+            fillRule: "evenodd",
+            d: "m18.166 4.784-.693.463-.27-.406.693-.462zm-1.386.925-.81.54-.27-.406.81-.54zm-9.476 6.317-.694.463-.27-.406.693-.462z",
+            clipRule: "evenodd"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("clipPath", { id: "a", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { fill: "#fff", d: "M1.906 2h20v13.333h-20z" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "filter",
+          {
+            id: "b",
+            width: 22.602,
+            height: 15.936,
+            x: 0.605,
+            y: 0.699,
+            colorInterpolationFilters: "sRGB",
+            filterUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "feColorMatrix",
+                {
+                  in: "SourceAlpha",
+                  result: "hardAlpha",
+                  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feOffset", {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feGaussianBlur", { stdDeviation: 0.65 }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feComposite", { in2: "hardAlpha", operator: "out" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "feBlend",
+                {
+                  in2: "BackgroundImageFix",
+                  result: "effect1_dropShadow_306_2477"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "feBlend",
+                {
+                  in: "SourceGraphic",
+                  in2: "effect1_dropShadow_306_2477",
+                  result: "shape"
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+);
+var Kr_default = SvgKr;
+
+// src/icons/X.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SvgX = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 30,
+    height: 30,
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          fill: "#000",
+          fillRule: "evenodd",
+          d: "M25.977 4.023a.94.94 0 0 1 0 1.328L5.352 25.976a.939.939 0 0 1-1.327-1.328L24.65 4.023a.94.94 0 0 1 1.327 0",
+          clipRule: "evenodd"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          fill: "#000",
+          fillRule: "evenodd",
+          d: "M4.023 4.023a.94.94 0 0 0 0 1.328L24.65 25.976a.939.939 0 0 0 1.327-1.328L5.351 4.023a.94.94 0 0 0-1.328 0",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var X_default = SvgX;
+
+// src/icons/theme/Tritanopia.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SvgTritanopia = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 28 29",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "rect",
+        {
+          width: 26.18,
+          height: 26.18,
+          x: 0.91,
+          y: 1.41,
+          stroke: "currentColor",
+          strokeWidth: 1.82,
+          rx: 13.09
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M8.64 7.152h5.21q1.508 0 2.532.513 1.026.513 1.528 1.405.513.892.513 2.02 0 1.333-.667 2.081-.666.74-1.753 1.036v.144q.717.04 1.415.492.698.45 1.148 1.282.452.819.452 1.938 0 1.158-.534 2.04-.522.882-1.64 1.395-1.118.502-2.81.502H8.641zm5.374 13.207q1.65 0 2.43-.635.79-.636.79-1.682 0-.758-.39-1.395a2.63 2.63 0 0 0-1.097-1.015q-.709-.38-1.63-.38h-3.63v5.107zm-.226-6.706q.8 0 1.456-.307.657-.319 1.036-.892.38-.585.38-1.344 0-1.024-.708-1.671-.708-.646-2.102-.646h-3.364v4.86z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeWidth: 1.517,
+          d: "m3.5 1.666 23.333 23.333"
+        }
+      )
+    ]
+  }
+);
+var Tritanopia_default = SvgTritanopia;
+
+// src/icons/theme/Default.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SvgDefault = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 31 31",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M30.5 15.5s-5.625-10.312-15-10.312S.5 15.5.5 15.5s5.625 10.313 15 10.313 15-10.313 15-10.313m-27.801 0q.16-.245.365-.54c.628-.9 1.554-2.098 2.746-3.29 2.417-2.417 5.716-4.607 9.69-4.607s7.273 2.19 9.69 4.607A24.6 24.6 0 0 1 28.3 15.5q-.16.245-.365.54c-.628.9-1.554 2.098-2.746 3.29-2.417 2.417-5.716 4.608-9.69 4.608s-7.273-2.19-9.69-4.608A24.6 24.6 0 0 1 2.7 15.5"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M15.5 10.813a4.688 4.688 0 1 0 0 9.375 4.688 4.688 0 0 0 0-9.375M8.938 15.5a6.562 6.562 0 1 1 13.124 0 6.562 6.562 0 0 1-13.125 0"
+        }
+      )
+    ]
+  }
+);
+var Default_default = SvgDefault;
+
+// src/icons/theme/Protanopia.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SvgProtanopia = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 28 29",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "rect",
+        {
+          width: 26.18,
+          height: 26.18,
+          x: 0.91,
+          y: 1.41,
+          stroke: "currentColor",
+          strokeWidth: 1.82,
+          rx: 13.09
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M9.252 7.152h5.045q1.692 0 2.83.585 1.14.575 1.682 1.61.554 1.024.554 2.379 0 1.507-.697 2.594-.688 1.086-2.072 1.569L19.937 22h-2.153l-3.107-5.773-.36.01h-3.219V22H9.252zm4.984 7.404q1.711 0 2.502-.728.8-.729.8-2.102 0-1.395-.8-2.164t-2.523-.769h-3.117v5.763z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeWidth: 1.517,
+          d: "m3.5 1.666 23.333 23.333"
+        }
+      )
+    ]
+  }
+);
+var Protanopia_default = SvgProtanopia;
+
+// src/icons/theme/Deuteranopia.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SvgDeuteranopia = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 15 15",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "rect",
+        {
+          width: 13.09,
+          height: 13.09,
+          x: 1.08,
+          y: 0.955,
+          stroke: "currentColor",
+          strokeWidth: 0.91,
+          rx: 6.545
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M9.51 5.894q-.245-.734-.789-1.144-.538-.415-1.312-.415-.667 0-1.205.343-.534.345-.846 1.01-.308.667-.308 1.6t.313 1.6q.313.665.861 1.01.549.343 1.246.343.626 0 1.103-.261a1.87 1.87 0 0 0 .748-.754q.271-.492.282-1.138H7.665v-.81h2.84v.8q0 .907-.39 1.594-.389.687-1.081 1.061-.687.37-1.564.37-.984 0-1.738-.462-.748-.466-1.164-1.328-.41-.866-.41-2.025 0-1.153.41-2.015.416-.866 1.154-1.333.738-.465 1.687-.466.774 0 1.42.307.646.303 1.071.851.426.548.564 1.262z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeWidth: 0.758,
+          d: "m2.375 1.082 11.667 11.667"
+        }
+      )
+    ]
+  }
+);
+var Deuteranopia_default = SvgDeuteranopia;
+
+// src/react/ThemeSwitcherPortal.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+var PORTAL_ID = "theme-switcher-portal";
+var portalEl = null;
+var activeOwner = null;
+function ensurePortal() {
+  if (typeof document === "undefined") throw new Error("No document");
+  if (portalEl && document.body.contains(portalEl)) return portalEl;
+  const existing = document.getElementById(PORTAL_ID);
+  portalEl = existing ?? Object.assign(document.createElement("div"), { id: PORTAL_ID });
+  if (!existing) document.body.appendChild(portalEl);
+  return portalEl;
+}
+function ThemeSwitcherPortal({
+  children
+}) {
+  const [container, setContainer] = (0, import_react2.useState)(null);
+  const ownerId = (0, import_react2.useRef)(Symbol("ThemeSwitcherPortal"));
+  (0, import_react2.useEffect)(() => {
+    const el = ensurePortal();
+    setContainer(el);
+    if (activeOwner === null) activeOwner = ownerId.current;
+    return () => {
+      if (activeOwner === ownerId.current) {
+        activeOwner = null;
+      }
+    };
+  }, []);
+  if (!container) return null;
+  const isPrimary = activeOwner === ownerId.current;
+  return (0, import_react_dom.createPortal)(isPrimary ? children : null, container);
+}
+
+// src/react/ThemeSwitcher.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var THEME_ICON = {
+  default: Default_default,
+  protanopia: Protanopia_default,
+  deuteranopia: Deuteranopia_default,
+  tritanopia: Tritanopia_default
+};
+function ThemeSwitcher({ options }) {
+  const { theme, updateTheme, language, updateLanguage } = useTheme();
+  const [hovered, setHovered] = (0, import_react3.useState)(null);
+  const list = (0, import_react3.useMemo)(
+    () => options?.length ? options : getThemeOptions(language),
+    [options, language]
+  );
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const wrapperRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const toggle = (e) => {
+    e.stopPropagation();
+    setIsOpen((prev) => !prev);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThemeSwitcherPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: wrapperRef, className: "z-[10000]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        onClick: toggle,
+        className: "fixed right-[25px] bottom-[25px] w-[60px] h-[60px] p-[10px] bg-[#ffffff] rounded-full flex justify-center items-center shadow-[0_0_3px_0_rgba(0,0,0,0.17)]",
+        children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(X_default, { className: "self-center" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Logo_default, { className: "self-center" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        role: "menu",
+        "aria-label": "Select theme",
+        className: "fixed bottom-[100px] right-[25px] flex-col bg-[#ffffff] rounded-[18px] w-[220px] gap-[11px]",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: list.map((opt) => {
+            const Icon = THEME_ICON[opt.key];
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitemradio",
+                  "aria-checked": theme === opt.key,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    updateTheme(opt.key);
+                  },
+                  onMouseEnter: () => setHovered(opt.key),
+                  onMouseLeave: () => setHovered(null),
+                  className: [
+                    "hover:cursor-pointer group text-[18px] text-[#3D4852] py-1 w-full h-[50px] text-center gap-[8px] flex items-center justify-center rounded-[18px] hover:bg-[#3D4852]",
+                    theme === opt.key ? "bg-[#3D4852] text-[#ffffff]" : ""
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      Icon,
+                      {
+                        width: 24,
+                        height: 24,
+                        className: `inline-block ${theme === opt.key || hovered === opt.key ? "text-white" : "text-[#3D4852]"}`
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "group-hover:text-[#ffffff]", children: opt.label })
+                  ]
+                },
+                opt.key
+              ),
+              opt.key !== "tritanopia" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "border-b-[0.5px] border-b-[#D9D9D9] w-full" })
+            ] }, opt.key);
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full border-[0.5px] border-[#B8B8B8]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-evenly items-center gap-[10px] px-[10px] my-[15px]", children: language === "English" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "div",
+            {
+              className: `hover:cursor-pointer flex text-[18px] text-[#3D4852] gap-[8px] items-center justify-center`,
+              onClick: () => updateLanguage("Korean"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Us_default, {}),
+                "English"
+              ]
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "div",
+            {
+              className: `hover:cursor-pointer flex text-[18px] text-[#3D4852] gap-[8px] items-center justify-center `,
+              onClick: () => updateLanguage("English"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Kr_default, {}),
+                "Korean"
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) });
+}

package/dist/client.d.cts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type TLanguage = 'English' | 'Korean';
+declare const THEME_KEYS: readonly ["default", "protanopia", "deuteranopia", "tritanopia"];
+type ThemeKey = (typeof THEME_KEYS)[number];
+type ThemeContextType = {
+    theme: ThemeKey;
+    language: TLanguage;
+    updateTheme: (k: ThemeKey) => void;
+    updateLanguage: (t: TLanguage) => void;
+};
+declare const useTheme: () => ThemeContextType;
+type ThemeProviderProps = {
+    children: ReactNode;
+};
+declare function ThemeProvider({ children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+type ThemeType = ThemeKey;
+declare const THEMES: Record<TLanguage, Record<"default" | "protanopia" | "deuteranopia" | "tritanopia", string>>;
+
+type Props = {
+    options?: {
+        key: ThemeKey;
+        label: string;
+    }[];
+};
+declare function ThemeSwitcher({ options }: Props): react_jsx_runtime.JSX.Element;
+
+export { THEMES, type TLanguage, ThemeProvider, ThemeSwitcher, type ThemeType, useTheme };

package/dist/client.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 type TLanguage = 'English' | 'Korean';
 declare const THEME_KEYS: readonly ["default", "protanopia", "deuteranopia", "tritanopia"];
@@ -10,9 +11,10 @@ type ThemeContextType = {
     updateLanguage: (t: TLanguage) => void;
 };
 declare const useTheme: () => ThemeContextType;
-declare function ThemeProvider({ children }: {
-    children: React.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+type ThemeProviderProps = {
+    children: ReactNode;
+};
+declare function ThemeProvider({ children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 type ThemeType = ThemeKey;
 declare const THEMES: Record<TLanguage, Record<"default" | "protanopia" | "deuteranopia" | "tritanopia", string>>;
 
@@ -21,8 +23,7 @@ type Props = {
         key: ThemeKey;
         label: string;
     }[];
-    className?: string;
 };
-declare function ThemeSwitcher({ options, className }: Props): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitcher({ options }: Props): react_jsx_runtime.JSX.Element;
 
 export { THEMES, type TLanguage, ThemeProvider, ThemeSwitcher, type ThemeType, useTheme };

package/dist/client.js

@@ -1,7 +1,13 @@
 "use client";
 
-// src/components/ThemeProvider.tsx
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+// src/react/ThemeProvider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
 import { jsx } from "react/jsx-runtime";
 var THEME_KEYS = [
   "default",
@@ -81,7 +87,7 @@ function ThemeProvider({ children }) {
 }
 var THEMES = THEME_LABEL;
 
-// src/components/ThemeSwitcher.tsx
+// src/react/ThemeSwitcher.tsx
 import { useEffect as useEffect3, useRef as useRef2, useState as useState3, useMemo as useMemo2 } from "react";
 
 // src/icons/Logo.tsx
@@ -539,7 +545,7 @@ var SvgDeuteranopia = (props) => /* @__PURE__ */ jsxs8(
 );
 var Deuteranopia_default = SvgDeuteranopia;
 
-// src/components/ThemeSwitcherPortal.tsx
+// src/react/ThemeSwitcherPortal.tsx
 import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 var PORTAL_ID = "theme-switcher-portal";
@@ -573,7 +579,7 @@ function ThemeSwitcherPortal({
   return createPortal(isPrimary ? children : null, container);
 }
 
-// src/components/ThemeSwitcher.tsx
+// src/react/ThemeSwitcher.tsx
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var THEME_ICON = {
   default: Default_default,
@@ -581,7 +587,7 @@ var THEME_ICON = {
   deuteranopia: Deuteranopia_default,
   tritanopia: Tritanopia_default
 };
-function ThemeSwitcher({ options, className }) {
+function ThemeSwitcher({ options }) {
   const { theme, updateTheme, language, updateLanguage } = useTheme();
   const [hovered, setHovered] = useState3(null);
   const list = useMemo2(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colbrush",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A React theme switching library that makes it easy to apply color-blind accessible UI themes",
   "homepage": "https://colbrush.vercel.app",
   "repository": {
@@ -75,6 +75,7 @@
     "svgr": "svgr src/assets --out-dir src/icons --typescript --expand-props end --svgo-config svgo.config.js",
     "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
     "build": "pnpm svgr && tsup --config tsup.config.ts && pnpm build:css",
-    "dev": "tsup --config tsup.config.ts --watch"
+    "dev": "tsup --config tsup.config.ts --watch",
+    "lint": "eslint ."
   }
 }