design-system-silkhaus 2.14.0-beta.tabbed-menu.2 → 2.14.0-beta.tabbed-menu.3

package/dist/index.js

@@ -38811,33 +38811,39 @@ const zY = ({
   const n = (a) => {
     r(a.link ? { value: a.value, link: a.link } : { value: a.value });
   };
-  return /* @__PURE__ */ f.jsx("div", { className: "ds-flex ds-flex-wrap ds-justify-center ds-gap-4", children: e.map((a) => /* @__PURE__ */ f.jsxs(
+  return /* @__PURE__ */ f.jsx("div", { className: "ds-flex ds-flex-wrap ds-justify-center ds-gap-4", children: e.map((a) => /* @__PURE__ */ f.jsx(
     "div",
     {
-      className: Ue(
-        "ds-group ds-flex ds-cursor-pointer ds-items-center ds-justify-center ds-gap-1 ds-rounded ds-px-2 ds-py-1 ds-desktop:ds-px-3 ds-desktop:ds-py-2",
+      className: Ue("ds-flex ds-desktop:ds-pb-2", {
+        "ds-desktop:ds-border-b-[3px] ds-desktop:ds-border-accentEggplant-100": t === a.value
+      }),
+      children: /* @__PURE__ */ f.jsxs(
+        "div",
         {
-          "ds-bg-accentEggplant-100 ds-desktop:ds-bg-transparent": t === a.value,
-          "hover:ds-bg-Fills-quintiary": t !== a.value
+          className: Ue(
+            "ds-group ds-flex ds-cursor-pointer ds-items-center ds-justify-center ds-gap-1 ds-rounded ds-px-2 ds-py-1 ds-desktop:ds-px-3 ds-desktop:ds-py-2",
+            { "ds-bg-accentEggplant-100 ds-desktop:ds-bg-transparent": t === a.value },
+            { "hover:ds-bg-Fills-quintiary": t !== a.value }
+          ),
+          onClick: () => n(a),
+          children: [
+            /* @__PURE__ */ f.jsx("span", { className: "ds-flex ds-size-4 ds-desktop:ds-h-[18px] ds-desktop:ds-w-[18px]", children: t === a.value ? /* @__PURE__ */ f.jsx(a.HoverIconComponent, { className: "ds-text-white ds-desktop:ds-text-accentEggplant-100" }) : /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
+              /* @__PURE__ */ f.jsx(a.IconComponent, { className: "ds-block group-hover:ds-hidden" }),
+              /* @__PURE__ */ f.jsx(a.HoverIconComponent, { className: "ds-hidden ds-text-black group-hover:ds-block" })
+            ] }) }),
+            /* @__PURE__ */ f.jsx(
+              "span",
+              {
+                className: Ue(
+                  "ds-desktop:ds_MediumSubheadEmphasized ds_xSmallCalloutEmphasized ds-flex",
+                  { "ds-text-white ds-desktop:ds-text-accentEggplant-100": t === a.value }
+                ),
+                children: a.label
+              }
+            )
+          ]
         }
-      ),
-      onClick: () => n(a),
-      children: [
-        /* @__PURE__ */ f.jsx("span", { className: "ds-flex ds-size-4 ds-desktop:ds-h-[18px] ds-desktop:ds-w-[18px]", children: t === a.value ? /* @__PURE__ */ f.jsx(a.HoverIconComponent, { className: "ds-text-white ds-desktop:ds-text-accentEggplant-100" }) : /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
-          /* @__PURE__ */ f.jsx(a.IconComponent, { className: "ds-block group-hover:ds-hidden" }),
-          /* @__PURE__ */ f.jsx(a.HoverIconComponent, { className: "ds-hidden ds-text-black group-hover:ds-block" })
-        ] }) }),
-        /* @__PURE__ */ f.jsx(
-          "span",
-          {
-            className: Ue(
-              "ds-desktop:ds_MediumSubheadEmphasized ds-tablet:ds_SmallCalloutEmphasized ds_xSmallCalloutEmphasized ds-flex",
-              { "ds-text-white ds-desktop:ds-text-accentEggplant-100": t === a.value }
-            ),
-            children: a.label
-          }
-        )
-      ]
+      )
     },
     a.value
   )) });