@medusajs/dashboard 2.12.3-preview-20251217123836 → 2.12.3-snapshot-20251217081413

package/dist/app.mjs

@@ -1,6 +1,6 @@
 import {
   DashboardApp
-} from "./chunk-VFF5WB7C.mjs";
+} from "./chunk-FJR3D6EM.mjs";
 import "./chunk-2SSUH2HJ.mjs";
 import "./chunk-ONB3JEHR.mjs";
 import "./chunk-YCDDT44O.mjs";

package/dist/{chunk-VFF5WB7C.mjs → chunk-FJR3D6EM.mjs}

@@ -11517,7 +11517,7 @@ var en_default = {
     completion: {
       heading: "Translated fields",
       translated: "Translated",
-      toTranslate: "Missing",
+      toTranslate: "To be translated",
       footer: "Languages"
     }
   },
@@ -14744,7 +14744,7 @@ var es_default = {
     completion: {
       heading: "Textos traducidos",
       translated: "Traducidos",
-      toTranslate: "Faltantes",
+      toTranslate: "Por traducir",
       footer: "Idiomas"
     }
   },
@@ -95888,7 +95888,7 @@ function getRouteMap({
                   children: [
                     {
                       path: "create",
-                      lazy: () => import("./product-create-3O34JJLS.mjs")
+                      lazy: () => import("./product-create-DKBLOS3M.mjs")
                     },
                     {
                       path: "import",
@@ -95904,7 +95904,7 @@ function getRouteMap({
                   path: ":id",
                   errorElement: /* @__PURE__ */ jsx17(ErrorBoundary, {}),
                   lazy: async () => {
-                    const { Breadcrumb, loader } = await import("./product-detail-SYTLG5D3.mjs");
+                    const { Breadcrumb, loader } = await import("./product-detail-D2PJ64Q3.mjs");
                     return {
                       Component: Outlet4,
                       loader,
@@ -95916,11 +95916,11 @@ function getRouteMap({
                   children: [
                     {
                       path: "",
-                      lazy: () => import("./product-detail-SYTLG5D3.mjs"),
+                      lazy: () => import("./product-detail-D2PJ64Q3.mjs"),
                       children: [
                         {
                           path: "edit",
-                          lazy: () => import("./product-edit-W72S22NM.mjs")
+                          lazy: () => import("./product-edit-K6CAQD5H.mjs")
                         },
                         {
                           path: "edit-variant",
@@ -95932,11 +95932,11 @@ function getRouteMap({
                         },
                         {
                           path: "attributes",
-                          lazy: () => import("./product-attributes-MXDPSOWM.mjs")
+                          lazy: () => import("./product-attributes-S535VXSC.mjs")
                         },
                         {
                           path: "organization",
-                          lazy: () => import("./product-organization-SVXTCWIF.mjs")
+                          lazy: () => import("./product-organization-IQFN54D2.mjs")
                         },
                         {
                           path: "shipping-profile",
@@ -96648,7 +96648,7 @@ function getRouteMap({
                 },
                 {
                   path: "locales",
-                  lazy: () => import("./store-add-locales-GWCGIXHU.mjs")
+                  lazy: () => import("./store-add-locales-I4GX3KAY.mjs")
                 },
                 {
                   path: "metadata/edit",
@@ -97277,15 +97277,11 @@ function getRouteMap({
               children: [
                 {
                   path: "",
-                  lazy: () => import("./translation-list-FK7XYLHX.mjs")
+                  lazy: () => import("./translation-list-KSM4QA3K.mjs")
                 },
                 {
                   path: "edit",
                   lazy: () => import("./translations-edit-VRXZI5KW.mjs")
-                },
-                {
-                  path: "add-locales",
-                  lazy: () => import("./add-locales-GGNZCABB.mjs")
                 }
               ]
             },

package/dist/en.json

@@ -2538,7 +2538,7 @@
     "completion": {
       "heading": "Translated fields",
       "translated": "Translated",
-      "toTranslate": "Missing",
+      "toTranslate": "To be translated",
       "footer": "Languages"
     }
   },

package/dist/{product-attributes-MXDPSOWM.mjs → product-attributes-S535VXSC.mjs}

@@ -15,7 +15,7 @@ import {
 import {
   FormExtensionZone,
   useExtendableForm
-} from "./chunk-VFF5WB7C.mjs";
+} from "./chunk-FJR3D6EM.mjs";
 import "./chunk-2SSUH2HJ.mjs";
 import "./chunk-ONB3JEHR.mjs";
 import "./chunk-YCDDT44O.mjs";

package/dist/{product-create-3O34JJLS.mjs → product-create-DKBLOS3M.mjs}

@@ -63,7 +63,7 @@ import {
 import {
   FormExtensionZone,
   useExtendableForm
-} from "./chunk-VFF5WB7C.mjs";
+} from "./chunk-FJR3D6EM.mjs";
 import "./chunk-2SSUH2HJ.mjs";
 import "./chunk-ONB3JEHR.mjs";
 import "./chunk-YCDDT44O.mjs";

package/dist/{product-detail-SYTLG5D3.mjs → product-detail-D2PJ64Q3.mjs}

@@ -27,7 +27,7 @@ import {
 import "./chunk-DFFLVEZ5.mjs";
 import {
   getLinkedFields
-} from "./chunk-VFF5WB7C.mjs";
+} from "./chunk-FJR3D6EM.mjs";
 import "./chunk-2SSUH2HJ.mjs";
 import "./chunk-ONB3JEHR.mjs";
 import "./chunk-YCDDT44O.mjs";

package/dist/{product-edit-W72S22NM.mjs → product-edit-K6CAQD5H.mjs}

@@ -18,7 +18,7 @@ import {
 import {
   FormExtensionZone,
   useExtendableForm
-} from "./chunk-VFF5WB7C.mjs";
+} from "./chunk-FJR3D6EM.mjs";
 import "./chunk-2SSUH2HJ.mjs";
 import "./chunk-ONB3JEHR.mjs";
 import "./chunk-YCDDT44O.mjs";

package/dist/{product-organization-SVXTCWIF.mjs → product-organization-IQFN54D2.mjs}

@@ -20,7 +20,7 @@ import {
 import {
   FormExtensionZone,
   useExtendableForm
-} from "./chunk-VFF5WB7C.mjs";
+} from "./chunk-FJR3D6EM.mjs";
 import "./chunk-2SSUH2HJ.mjs";
 import "./chunk-ONB3JEHR.mjs";
 import "./chunk-YCDDT44O.mjs";

package/dist/{chunk-IKTGFXWR.mjs → store-add-locales-I4GX3KAY.mjs}

@@ -2,10 +2,19 @@ import {
   useLocalesTableColumns,
   useLocalesTableQuery
 } from "./chunk-XNIVMZHA.mjs";
+import "./chunk-MSDRGCRR.mjs";
+import "./chunk-P3UUX2T6.mjs";
+import "./chunk-LQTHYS2Z.mjs";
 import {
   _DataTable,
   useDataTable
 } from "./chunk-DTZXEQXZ.mjs";
+import "./chunk-HQKGZADC.mjs";
+import "./chunk-EMIHDNB7.mjs";
+import "./chunk-ZQJPHZKI.mjs";
+import "./chunk-C76H5USB.mjs";
+import "./chunk-DFFLVEZ5.mjs";
+import "./chunk-IUCDCPJU.mjs";
 import {
   KeyboundForm
 } from "./chunk-6HTZNHPT.mjs";
@@ -13,12 +22,51 @@ import {
   RouteFocusModal,
   useRouteModal
 } from "./chunk-D6UW7URG.mjs";
+import {
+  useFeatureFlag
+} from "./chunk-G4BWCU5P.mjs";
+import "./chunk-LPEUYMRK.mjs";
+import "./chunk-OC7BQLYI.mjs";
+import "./chunk-S4DMV3ZT.mjs";
+import "./chunk-535OVBXR.mjs";
+import "./chunk-OBQI23QM.mjs";
 import {
   useLocales
 } from "./chunk-GLBHPDR4.mjs";
+import "./chunk-I4OBEAOJ.mjs";
+import "./chunk-HI6URQ7H.mjs";
+import "./chunk-6CLQKVAU.mjs";
+import "./chunk-KI7TOXBR.mjs";
+import "./chunk-UJ2TMPV4.mjs";
+import "./chunk-23GTCEOV.mjs";
+import "./chunk-WAXMT4IY.mjs";
+import "./chunk-DYDGGABK.mjs";
+import "./chunk-LGNTHZ5Y.mjs";
+import "./chunk-CN7JXSGW.mjs";
+import "./chunk-5BQQRHQS.mjs";
+import "./chunk-HTCYX4VD.mjs";
+import "./chunk-5AFMB7XQ.mjs";
+import "./chunk-UWY5ZV66.mjs";
+import "./chunk-A63RZVX6.mjs";
+import "./chunk-HBXV7ENS.mjs";
+import "./chunk-CDORR33H.mjs";
+import "./chunk-4JQR6QNW.mjs";
+import "./chunk-FYWHE3W5.mjs";
+import "./chunk-OSHH5GAS.mjs";
+import "./chunk-2XTBDCGE.mjs";
+import "./chunk-3BF5SC66.mjs";
 import {
+  useStore,
   useUpdateStore
 } from "./chunk-VCSSQVPD.mjs";
+import "./chunk-HP2JH45P.mjs";
+import "./chunk-SQDIZZDW.mjs";
+import "./chunk-Z6BFNHEO.mjs";
+import "./chunk-HGRIOEAR.mjs";
+import "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import "./chunk-NFEK63OE.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
 
 // src/routes/store/store-add-locales/components/add-locales-form/add-locales-form.tsx
 import { z } from "zod";
@@ -188,6 +236,23 @@ var useColumns = () => {
   );
 };
 
+// src/routes/store/store-add-locales/store-add-locales.tsx
+import { useNavigate } from "react-router-dom";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StoreAddLocales = () => {
+  const isEnabled = useFeatureFlag("translation");
+  const navigate = useNavigate();
+  if (!isEnabled) {
+    navigate(-1);
+    return null;
+  }
+  const { store, isPending, isError, error } = useStore();
+  const ready = !!store && !isPending;
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx2(RouteFocusModal, { children: ready && /* @__PURE__ */ jsx2(AddLocalesForm, { store }) });
+};
 export {
-  AddLocalesForm
+  StoreAddLocales as Component
 };

package/dist/{translation-list-FK7XYLHX.mjs → translation-list-KSM4QA3K.mjs}

@@ -51,16 +51,9 @@ import { useTranslation as useTranslation4 } from "react-i18next";
 
 // src/routes/translations/translation-list/components/active-locales-section/active-locales-section.tsx
 import { PencilSquare, Language } from "@medusajs/icons";
-import {
-  Container,
-  Heading,
-  IconButton,
-  InlineTip,
-  Text,
-  Tooltip
-} from "@medusajs/ui";
+import { Container, Heading, IconButton, InlineTip, Text } from "@medusajs/ui";
 import { useTranslation } from "react-i18next";
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ActiveLocalesSection = ({
@@ -68,9 +61,8 @@ var ActiveLocalesSection = ({
 }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const [isHovered, setIsHovered] = useState(false);
   const handleManageLocales = useCallback(() => {
-    navigate("/settings/translations/add-locales");
+    navigate("/settings/store/locales");
   }, [navigate]);
   const renderLocales = useCallback(() => {
     const maxLocalesToDetail = 2;
@@ -85,28 +77,13 @@ var ActiveLocalesSection = ({
       /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("translations.activeLocales.heading") }),
       /* @__PURE__ */ jsx(IconButton, { variant: "transparent", onClick: handleManageLocales, children: /* @__PURE__ */ jsx(PencilSquare, {}) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "px-1 pb-1", children: hasLocales ? /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        open: isHovered,
-        content: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1 p-1", children: locales.map((locale) => /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: locale.name }, locale.code)) }),
-        children: /* @__PURE__ */ jsxs(
-          Container,
-          {
-            className: "bg-ui-bg-component border-r-1 flex items-center gap-x-4 px-[19px] py-2",
-            onMouseEnter: () => setIsHovered(true),
-            onMouseLeave: () => setIsHovered(false),
-            children: [
-              /* @__PURE__ */ jsx(IconAvatar, { className: "border-ui-border-base border", children: /* @__PURE__ */ jsx(Language, {}) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: t("translations.activeLocales.subtitle") }),
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", size: "small", children: renderLocales() })
-              ] })
-            ]
-          }
-        )
-      }
-    ) : /* @__PURE__ */ jsx(InlineTip, { label: "Tip", children: t("translations.activeLocales.noLocalesTip") }) })
+    /* @__PURE__ */ jsx("div", { className: "px-1 pb-1", children: hasLocales ? /* @__PURE__ */ jsxs(Container, { className: "bg-ui-bg-component flex items-center gap-x-4 px-6 py-2", children: [
+      /* @__PURE__ */ jsx(IconAvatar, { children: /* @__PURE__ */ jsx(Language, {}) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: t("translations.activeLocales.subtitle") }),
+        /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", size: "small", children: renderLocales() })
+      ] })
+    ] }) : /* @__PURE__ */ jsx(InlineTip, { label: "Tip", children: t("translations.activeLocales.noLocalesTip") }) })
   ] });
 };
 
@@ -134,15 +111,7 @@ var TranslationListSection = ({
           Link,
           {
             to: `/settings/translations/edit?reference=${entity.reference}`,
-            children: /* @__PURE__ */ jsx2(
-              Button,
-              {
-                variant: "secondary",
-                size: "small",
-                disabled: !hasLocales || !entity.totalCount,
-                children: "Edit"
-              }
-            )
+            children: /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "small", disabled: !hasLocales, children: "Edit" })
           }
         )
       ]
@@ -152,8 +121,8 @@ var TranslationListSection = ({
 };
 
 // src/routes/translations/translation-list/components/translations-completion-section/translations-completion-section.tsx
-import { Container as Container3, Divider, Heading as Heading2, Text as Text3, Tooltip as Tooltip2 } from "@medusajs/ui";
-import { useMemo, useState as useState2 } from "react";
+import { Container as Container3, Heading as Heading2, Text as Text3, Tooltip } from "@medusajs/ui";
+import { useMemo, useState } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var TranslationsCompletionSection = ({
@@ -161,7 +130,7 @@ var TranslationsCompletionSection = ({
   locales
 }) => {
   const { t } = useTranslation3();
-  const [hoveredLocale, setHoveredLocale] = useState2(null);
+  const [hoveredLocale, setHoveredLocale] = useState(null);
   const { translatedCount, totalCount } = Object.values(statistics).reduce(
     (acc, curr) => ({
       translatedCount: acc.translatedCount + curr.translated,
@@ -224,8 +193,7 @@ var TranslationsCompletionSection = ({
             className: "mr-0.5 h-full rounded-sm transition-all",
             style: {
               width: `${percentage}%`,
-              backgroundColor: "var(--tag-blue-icon)",
-              boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
+              backgroundColor: "var(--bg-interactive)"
             }
           }
         ),
@@ -234,8 +202,8 @@ var TranslationsCompletionSection = ({
           {
             className: "h-full flex-1 rounded-sm",
             style: {
-              backgroundColor: "var(--tag-blue-border)",
-              boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
+              backgroundColor: "var(--bg-interactive)",
+              opacity: 0.3
             }
           }
         )
@@ -244,8 +212,8 @@ var TranslationsCompletionSection = ({
         {
           className: "h-full w-full rounded-sm",
           style: {
-            backgroundColor: "var(--tag-blue-border)",
-            boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
+            backgroundColor: "var(--bg-interactive)",
+            opacity: 0.3
           }
         }
       ) }),
@@ -261,158 +229,117 @@ var TranslationsCompletionSection = ({
         ] })
       ] })
     ] }),
-    localeStats.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
-      /* @__PURE__ */ jsx3(Divider, { variant: "dashed" }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-3 px-6 pb-6 pt-4", children: [
-        /* @__PURE__ */ jsx3("div", { className: "flex h-32 w-full items-end gap-1", children: localeStats.map((locale) => {
-          const heightPercent = locale.total / maxTotal * 100;
-          const translatedPercent = locale.total > 0 ? locale.translated / locale.total * 100 : 0;
-          return /* @__PURE__ */ jsx3(
-            Tooltip2,
-            {
-              open: hoveredLocale === locale.code,
-              content: /* @__PURE__ */ jsxs3("div", { className: "flex min-w-[150px] flex-col gap-y-1 p-1", children: [
-                /* @__PURE__ */ jsx3(Text3, { size: "small", weight: "plus", children: locale.name }),
-                /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ jsx3(
-                      "div",
-                      {
-                        className: "h-2 w-2 rounded-full",
-                        style: {
-                          backgroundColor: "var(--tag-blue-icon)",
-                          boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx3(
-                      Text3,
-                      {
-                        size: "small",
-                        weight: "plus",
-                        className: "text-ui-fg-base",
-                        children: t("translations.completion.translated")
-                      }
-                    )
-                  ] }),
+    localeStats.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "border-ui-border-strong flex flex-col gap-y-3 border-t border-dashed px-6 pb-6 pt-4", children: [
+      /* @__PURE__ */ jsx3("div", { className: "flex h-32 w-full items-end gap-1", children: localeStats.map((locale) => {
+        const heightPercent = locale.total / maxTotal * 100;
+        const translatedPercent = locale.total > 0 ? locale.translated / locale.total * 100 : 0;
+        return /* @__PURE__ */ jsx3(
+          Tooltip,
+          {
+            open: hoveredLocale === locale.code,
+            content: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-1 p-1", children: [
+              /* @__PURE__ */ jsx3(Text3, { size: "small", weight: "plus", children: locale.name }),
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
                   /* @__PURE__ */ jsx3(
-                    Text3,
+                    "div",
                     {
-                      size: "small",
-                      weight: "plus",
-                      className: "text-ui-fg-base",
-                      children: locale.translated
+                      className: "h-2 w-2 rounded-full",
+                      style: { backgroundColor: "var(--bg-interactive)" }
                     }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ jsx3(
-                      "div",
-                      {
-                        className: "h-2 w-2 rounded-full",
-                        style: {
-                          backgroundColor: "var(--tag-blue-border)",
-                          boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx3(
-                      Text3,
-                      {
-                        size: "small",
-                        weight: "plus",
-                        className: "text-ui-fg-base",
-                        children: t("translations.completion.toTranslate")
-                      }
-                    )
-                  ] }),
+                  ),
                   /* @__PURE__ */ jsx3(
                     Text3,
                     {
                       size: "small",
                       weight: "plus",
-                      className: "text-ui-fg-base",
-                      children: locale.toTranslate
+                      className: "text-ui-fg-subtle",
+                      children: t("translations.completion.translated")
                     }
                   )
-                ] })
+                ] }),
+                /* @__PURE__ */ jsx3(Text3, { size: "small", weight: "plus", children: locale.translated })
               ] }),
-              children: /* @__PURE__ */ jsx3("div", { className: "flex h-full flex-1 items-end justify-center", children: /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  className: "flex w-full min-w-2 max-w-[96px] flex-col justify-end overflow-hidden rounded-t-sm transition-opacity",
-                  style: { height: `${heightPercent}%` },
-                  onMouseEnter: () => setHoveredLocale(locale.code),
-                  onMouseLeave: () => setHoveredLocale(null),
-                  children: translatedPercent === 0 ? /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: "h-2 w-2 rounded-full",
+                    style: {
+                      backgroundColor: "var(--bg-interactive)",
+                      opacity: 0.3
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  Text3,
+                  {
+                    size: "small",
+                    weight: "plus",
+                    className: "text-ui-fg-subtle",
+                    children: t("translations.completion.toTranslate")
+                  }
+                ),
+                /* @__PURE__ */ jsx3(Text3, { size: "small", weight: "plus", children: locale.toTranslate })
+              ] })
+            ] }),
+            children: /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: "flex min-w-2 flex-1 flex-col justify-end overflow-hidden rounded-t-sm transition-opacity",
+                style: { height: `${heightPercent}%` },
+                onMouseEnter: () => setHoveredLocale(locale.code),
+                onMouseLeave: () => setHoveredLocale(null),
+                children: [
+                  /* @__PURE__ */ jsx3(
                     "div",
                     {
-                      className: "w-full rounded-sm",
+                      className: "w-full rounded-t-sm",
                       style: {
-                        height: "100%",
-                        backgroundColor: "var(--tag-neutral-bg)",
-                        boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
+                        height: `${100 - translatedPercent}%`,
+                        backgroundColor: "var(--bg-interactive)",
+                        opacity: 0.3,
+                        minHeight: locale.toTranslate > 0 ? "2px" : "0"
                       }
                     }
-                  ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-                    /* @__PURE__ */ jsx3(
-                      "div",
-                      {
-                        className: "w-full rounded-sm",
-                        style: {
-                          height: `${100 - translatedPercent}%`,
-                          backgroundColor: "var(--tag-blue-border)",
-                          boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
-                          minHeight: locale.toTranslate > 0 ? "2px" : "0"
-                        }
-                      }
-                    ),
-                    translatedPercent > 0 && /* @__PURE__ */ jsx3(
-                      "div",
-                      {
-                        className: "mt-0.5 w-full rounded-sm",
-                        style: {
-                          height: `${translatedPercent}%`,
-                          backgroundColor: "var(--tag-blue-icon)",
-                          boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
-                          minHeight: locale.translated > 0 ? "2px" : "0"
-                        }
+                  ),
+                  translatedPercent > 0 && /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      className: "mt-0.5 w-full rounded-sm",
+                      style: {
+                        height: `${translatedPercent}%`,
+                        backgroundColor: "var(--bg-interactive)",
+                        minHeight: locale.translated > 0 ? "2px" : "0"
                       }
-                    )
-                  ] })
-                }
-              ) })
-            },
-            locale.code
-          );
-        }) }),
-        localeStatsCount < 9 && /* @__PURE__ */ jsx3("div", { className: "flex w-full gap-1", children: localeStats.map((locale) => /* @__PURE__ */ jsx3(
-          "div",
-          {
-            className: "flex flex-1 items-center justify-center",
-            children: /* @__PURE__ */ jsx3(
-              Text3,
-              {
-                size: "xsmall",
-                weight: "plus",
-                className: "text-ui-fg-subtle min-w-2 whitespace-normal break-words text-center leading-tight",
-                children: localeStatsCount < 6 ? locale.name : locale.code
+                    }
+                  )
+                ]
               }
             )
           },
           locale.code
-        )) }),
-        localeStatsCount > 9 && /* @__PURE__ */ jsx3(
-          Text3,
-          {
-            weight: "plus",
-            size: "xsmall",
-            className: "text-ui-fg-subtle text-center",
-            children: t("translations.completion.footer")
-          }
-        )
-      ] })
+        );
+      }) }),
+      localeStatsCount < 9 && /* @__PURE__ */ jsx3("div", { className: "flex w-full gap-1", children: localeStats.map((locale) => /* @__PURE__ */ jsx3(
+        Text3,
+        {
+          size: "xsmall",
+          weight: "plus",
+          className: "text-ui-fg-subtle min-w-2 flex-1 whitespace-normal break-words text-center leading-tight",
+          children: localeStatsCount < 6 ? locale.name : locale.code
+        },
+        locale.code
+      )) }),
+      localeStatsCount > 9 && /* @__PURE__ */ jsx3(
+        Text3,
+        {
+          weight: "plus",
+          size: "xsmall",
+          className: "text-ui-fg-subtle text-center",
+          children: t("translations.completion.footer")
+        }
+      )
     ] })
   ] });
 };