mcr-design-systems 1.0.97 → 1.0.99

package/dist/components/Icon/generated/ListIcon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface ListIconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * List icon component
+ */
+export declare const ListIcon: React.FC<ListIconProps>;
+export default ListIcon;

package/dist/components/Icon/generated/ListIcon.js

@@ -0,0 +1,54 @@
+import { jsx as u } from "react/jsx-runtime";
+import f from "react";
+const M = ({
+  size: i = 24,
+  color: s = "currentColor",
+  className: r,
+  style: o,
+  onClick: C,
+  "aria-label": g,
+  title: c
+}) => {
+  const a = f.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 18C2 16.8954 2.89543 16 4 16C5.10457 16 6 16.8954 6 18C6 19.1046 5.10457 20 4 20C2.89543 20 2 19.1046 2 18ZM21 17C21.5523 17 22 17.4477 22 18C22 18.5177 21.6067 18.9438 21.1025 18.9951L21 19H9C8.44772 19 8 18.5523 8 18C8 17.4477 8.44772 17 9 17H21ZM2 12C2 10.8954 2.89543 10 4 10C5.10457 10 6 10.8954 6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12ZM21 11C21.5523 11 22 11.4477 22 12C22 12.5177 21.6067 12.9438 21.1025 12.9951L21 13H9C8.44772 13 8 12.5523 8 12C8 11.4477 8.44772 11 9 11H21ZM2 6C2 4.89543 2.89543 4 4 4C5.10457 4 6 4.89543 6 6C6 7.10457 5.10457 8 4 8C2.89543 8 2 7.10457 2 6ZM21 5C21.5523 5 22 5.44772 22 6C22 6.51768 21.6067 6.94379 21.1025 6.99512L21 7H9C8.44772 7 8 6.55228 8 6C8 5.44772 8.44772 5 9 5H21Z" fill="black"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const n = e.getAttribute("fill"), l = e.getAttribute("stroke");
+      n && n !== "none" && e.setAttribute("fill", s), l && l !== "none" && e.setAttribute("stroke", s);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, s, r]);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...o
+      },
+      onClick: C,
+      "aria-label": g || "list icon",
+      title: c,
+      dangerouslySetInnerHTML: { __html: a }
+    }
+  );
+};
+export {
+  M as ListIcon,
+  M as default
+};

package/dist/components/Icon/generated/ListSolidIcon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface ListSolidIconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * ListSolid icon component
+ */
+export declare const ListSolidIcon: React.FC<ListSolidIconProps>;
+export default ListSolidIcon;

package/dist/components/Icon/generated/ListSolidIcon.js

@@ -0,0 +1,59 @@
+import { jsx as f } from "react/jsx-runtime";
+import C from "react";
+const A = ({
+  size: i = 24,
+  color: r = "currentColor",
+  className: l,
+  style: s,
+  onClick: d,
+  "aria-label": c,
+  title: a
+}) => {
+  const u = C.useMemo(() => {
+    const e = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 12C8 11.4477 8.44772 11 9 11L21 11C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13L9 13C8.44772 13 8 12.5523 8 12Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6C8 5.44772 8.44772 5 9 5L21 5C21.5523 5 22 5.44772 22 6C22 6.55229 21.5523 7 21 7L9 7C8.44772 7 8 6.55228 8 6Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 18C8 17.4477 8.44772 17 9 17L21 17C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19L9 19C8.44772 19 8 18.5523 8 18Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 10.8954 2.89543 10 4 10C5.10457 10 6 10.8954 6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 4.89543 2.89543 4 4 4C5.10457 4 6 4.89543 6 6C6 7.10457 5.10457 8 4 8C2.89543 8 2 7.10457 2 6Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 18C2 16.8954 2.89543 16 4 16C5.10457 16 6 16.8954 6 18C6 19.1046 5.10457 20 4 20C2.89543 20 2 19.1046 2 18Z" fill="black"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!e) return "";
+    if (e.setAttribute("width", i.toString()), e.setAttribute("height", i.toString()), e.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((t) => {
+      const n = t.getAttribute("fill"), o = t.getAttribute("stroke");
+      n && n !== "none" && t.setAttribute("fill", r), o && o !== "none" && t.setAttribute("stroke", r);
+    }), l) {
+      const t = e.getAttribute("class") || "";
+      e.setAttribute(
+        "class",
+        `${t} ${l}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(e);
+  }, [i, r, l]);
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: l,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...s
+      },
+      onClick: d,
+      "aria-label": c || "list icon",
+      title: a,
+      dangerouslySetInnerHTML: { __html: u }
+    }
+  );
+};
+export {
+  A as ListSolidIcon,
+  A as default
+};

package/dist/components/Icon/generated/Map01Icon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface Map01IconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * Map01 icon component
+ */
+export declare const Map01Icon: React.FC<Map01IconProps>;
+export default Map01Icon;

package/dist/components/Icon/generated/Map01Icon.js

@@ -0,0 +1,54 @@
+import { jsx as f } from "react/jsx-runtime";
+import p from "react";
+const C = ({
+  size: i = 24,
+  color: n = "currentColor",
+  className: r,
+  style: o,
+  onClick: g,
+  "aria-label": a,
+  title: c
+}) => {
+  const u = p.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.62207 1.07424C8.90449 0.958904 9.22706 0.978122 9.49609 1.13186L15.959 4.82522L21.4453 1.16799C21.7521 0.963464 22.1466 0.944286 22.4717 1.11819C22.7968 1.29221 23 1.63123 23 2.00002V18C23 18.3344 22.8329 18.6466 22.5547 18.8321L16.5547 22.8321C16.2395 23.0422 15.8328 23.0561 15.5039 22.8682L9 19.1514L2.49609 22.8682C2.18663 23.045 1.80634 23.0441 1.49805 22.8653C1.18973 22.6863 1 22.3565 1 22V6.00002C1 5.64117 1.19233 5.3099 1.50391 5.13186L8.50391 1.13186L8.62207 1.07424ZM3 6.5801V20.2764L8 17.419V3.72268L3 6.5801ZM10 17.419L15 20.2764V6.5801L10 3.72268V17.419ZM17 6.53518V20.1309L21 17.4649V3.86819L17 6.53518Z" fill="black"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const s = e.getAttribute("fill"), l = e.getAttribute("stroke");
+      s && s !== "none" && e.setAttribute("fill", n), l && l !== "none" && e.setAttribute("stroke", n);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, n, r]);
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...o
+      },
+      onClick: g,
+      "aria-label": a || "map-01 icon",
+      title: c,
+      dangerouslySetInnerHTML: { __html: u }
+    }
+  );
+};
+export {
+  C as Map01Icon,
+  C as default
+};

package/dist/components/Icon/generated/Map01SolidIcon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface Map01SolidIconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * Map01Solid icon component
+ */
+export declare const Map01SolidIcon: React.FC<Map01SolidIconProps>;
+export default Map01SolidIcon;

package/dist/components/Icon/generated/Map01SolidIcon.js

@@ -0,0 +1,56 @@
+import { jsx as f } from "react/jsx-runtime";
+import u from "react";
+const v = ({
+  size: i = 24,
+  color: l = "currentColor",
+  className: r,
+  style: o,
+  onClick: C,
+  "aria-label": a,
+  title: g
+}) => {
+  const c = u.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2.79822C8 2.34553 8 2.11918 7.9049 1.98792C7.82194 1.87342 7.69439 1.79939 7.55381 1.78417C7.39266 1.76673 7.19614 1.87903 6.80309 2.10363L1.50386 5.13176C1.19229 5.3098 1 5.64114 1 6V22C1 22.3565 1.18976 22.686 1.49807 22.8649C1.80639 23.0438 2.18664 23.0451 2.49614 22.8682L7.19382 20.1839C7.48744 20.0161 7.63425 19.9322 7.74106 19.8143C7.83556 19.71 7.90697 19.5869 7.95064 19.4531C8 19.3019 8 19.1328 8 18.7947L8 2.79822Z" fill="black"/>
+<path d="M10 18.7947C10 19.1328 10 19.3019 10.0494 19.4531C10.093 19.5869 10.1644 19.71 10.2589 19.8143C10.3658 19.9322 10.5126 20.0161 10.8062 20.1839L13.8031 21.8964C14.1961 22.121 14.3927 22.2333 14.5538 22.2158C14.6944 22.2006 14.8219 22.1266 14.9049 22.0121C15 21.8808 15 21.6545 15 21.2018L15 5.20534C15 4.86716 15 4.69808 14.9506 4.54686C14.907 4.41306 14.8356 4.29 14.7411 4.1857C14.6342 4.06782 14.4874 3.98393 14.1938 3.81615L11.1969 2.10363C10.8039 1.87903 10.6073 1.76673 10.4462 1.78417C10.3056 1.79939 10.1781 1.87342 10.0951 1.98792C10 2.11918 10 2.34553 10 2.79822L10 18.7947Z" fill="black"/>
+<path d="M23 2C23 1.63121 22.797 1.29235 22.4719 1.11833C22.1467 0.944308 21.7522 0.96338 21.4453 1.16795L17.7125 3.6565C17.452 3.83016 17.3217 3.91699 17.2275 4.03171C17.144 4.13327 17.0814 4.25029 17.0431 4.37608C17 4.51817 17 4.67471 17 4.98778L17 21.0404C17 21.526 17 21.7687 17.1012 21.9026C17.1894 22.0192 17.3243 22.0913 17.4702 22.1C17.6377 22.11 17.8397 21.9754 18.2438 21.706L22.5547 18.8321C22.8329 18.6466 23 18.3344 23 18V2Z" fill="black"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const n = e.getAttribute("fill"), s = e.getAttribute("stroke");
+      n && n !== "none" && e.setAttribute("fill", l), s && s !== "none" && e.setAttribute("stroke", l);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, l, r]);
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...o
+      },
+      onClick: C,
+      "aria-label": a || "map-01 icon",
+      title: g,
+      dangerouslySetInnerHTML: { __html: c }
+    }
+  );
+};
+export {
+  v as Map01SolidIcon,
+  v as default
+};

package/dist/components/Icon/generated/NavigationPointer01Icon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface NavigationPointer01IconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * NavigationPointer01 icon component
+ */
+export declare const NavigationPointer01Icon: React.FC<NavigationPointer01IconProps>;
+export default NavigationPointer01Icon;

package/dist/components/Icon/generated/NavigationPointer01Icon.js

@@ -0,0 +1,54 @@
+import { jsx as u } from "react/jsx-runtime";
+import L from "react";
+const A = ({
+  size: i = 24,
+  color: n = "currentColor",
+  className: r,
+  style: l,
+  onClick: g,
+  "aria-label": a,
+  title: c
+}) => {
+  const C = L.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.6475 1.4745C20.8077 1.42796 21.1095 1.34853 21.4473 1.41786L21.5947 1.4579L21.7578 1.52235C22.0739 1.67093 22.328 1.92603 22.4766 2.24208L22.542 2.40517L22.5811 2.55165C22.6507 2.88992 22.572 3.1921 22.5254 3.35243C22.4647 3.56151 22.3651 3.8124 22.2676 4.06239L15.6777 20.9501C15.5688 21.2293 15.4633 21.5026 15.3604 21.7108C15.2751 21.8833 15.0848 22.2496 14.6914 22.454C14.2576 22.6792 13.7412 22.6788 13.3076 22.453C12.9143 22.2481 12.7247 21.8813 12.6397 21.7089C12.5369 21.5005 12.4319 21.2275 12.3232 20.9481L9.72657 14.2724L3.05079 11.6767C2.77163 11.5681 2.49932 11.4629 2.29102 11.3602C2.11857 11.2752 1.75183 11.0856 1.54688 10.6923C1.32087 10.2585 1.3204 9.74157 1.54591 9.30751C1.75037 8.91412 2.11669 8.72478 2.28907 8.63954C2.49726 8.5366 2.76968 8.4311 3.04884 8.32216L19.9365 1.73134C20.1866 1.63375 20.4383 1.53525 20.6475 1.4745ZM4.25489 9.99794L10.5342 12.4403C10.5895 12.4618 10.7156 12.5069 10.8496 12.5809L10.9844 12.6649L11.083 12.7411C11.1462 12.7946 11.2043 12.8537 11.2578 12.9169L11.334 13.0155L11.419 13.1493C11.4932 13.2836 11.5381 13.4105 11.5596 13.4657L14.001 19.744L20.2393 3.75966L4.25489 9.99794Z" fill="black"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const s = e.getAttribute("fill"), o = e.getAttribute("stroke");
+      s && s !== "none" && e.setAttribute("fill", n), o && o !== "none" && e.setAttribute("stroke", n);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, n, r]);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...l
+      },
+      onClick: g,
+      "aria-label": a || "navigation-pointer-01 icon",
+      title: c,
+      dangerouslySetInnerHTML: { __html: C }
+    }
+  );
+};
+export {
+  A as NavigationPointer01Icon,
+  A as default
+};

package/dist/components/Icon/generated/NavigationPointer01SolidIcon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface NavigationPointer01SolidIconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * NavigationPointer01Solid icon component
+ */
+export declare const NavigationPointer01SolidIcon: React.FC<NavigationPointer01SolidIconProps>;
+export default NavigationPointer01SolidIcon;

package/dist/components/Icon/generated/NavigationPointer01SolidIcon.js

@@ -0,0 +1,54 @@
+import { jsx as C } from "react/jsx-runtime";
+import f from "react";
+const S = ({
+  size: i = 24,
+  color: n = "currentColor",
+  className: r,
+  style: l,
+  onClick: g,
+  "aria-label": a,
+  title: c
+}) => {
+  const u = f.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5951 1.4575C21.1993 1.32529 20.8308 1.4209 20.6476 1.47411C20.448 1.5321 20.2101 1.625 19.9714 1.7182L3.01429 8.3356C2.74746 8.43969 2.48901 8.54051 2.28953 8.63914C2.11718 8.72436 1.75084 8.91405 1.54635 9.30766C1.32085 9.74172 1.32115 10.2585 1.54717 10.6923C1.75212 11.0856 2.11868 11.2749 2.29113 11.3599C2.49072 11.4583 2.74924 11.5588 3.01619 11.6626L9.72748 14.2725L12.3374 20.9837C12.4412 21.2507 12.5417 21.5093 12.6401 21.7089C12.7251 21.8813 12.9144 22.2479 13.3077 22.4528C13.7415 22.6788 14.2583 22.6791 14.6923 22.4536C15.086 22.2492 15.2756 21.8828 15.3609 21.7105C15.4595 21.511 15.5603 21.2526 15.6644 20.9858L22.2818 4.02861C22.375 3.7899 22.4679 3.55198 22.5259 3.35235C22.5791 3.16916 22.6747 2.8007 22.5425 2.40493C22.3931 1.95779 22.0422 1.60688 21.5951 1.4575Z" fill="black"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const o = e.getAttribute("fill"), s = e.getAttribute("stroke");
+      o && o !== "none" && e.setAttribute("fill", n), s && s !== "none" && e.setAttribute("stroke", n);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, n, r]);
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...l
+      },
+      onClick: g,
+      "aria-label": a || "navigation-pointer-01 icon",
+      title: c,
+      dangerouslySetInnerHTML: { __html: u }
+    }
+  );
+};
+export {
+  S as NavigationPointer01SolidIcon,
+  S as default
+};

package/dist/components/Icon/generated/Tag01Icon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface Tag01IconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * Tag01 icon component
+ */
+export declare const Tag01Icon: React.FC<Tag01IconProps>;
+export default Tag01Icon;

package/dist/components/Icon/generated/Tag01Icon.js

@@ -0,0 +1,54 @@
+import { jsx as u } from "react/jsx-runtime";
+import f from "react";
+const L = ({
+  size: i = 24,
+  color: C = "currentColor",
+  className: r,
+  style: l,
+  onClick: o,
+  "aria-label": g,
+  title: a
+}) => {
+  const c = f.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.67478 1.0001C10.1162 1.00009 10.5001 0.993807 10.872 1.0831C11.1781 1.1566 11.4709 1.27803 11.7392 1.44248C12.0653 1.64238 12.3323 1.91841 12.6445 2.23057L20.3135 9.89853C20.8957 10.4808 21.375 10.96 21.7324 11.381C22.0973 11.8108 22.3932 12.2458 22.5615 12.7638C22.8225 13.5671 22.8225 14.4331 22.5615 15.2364C22.3932 15.7544 22.0973 16.1894 21.7324 16.6192C21.375 17.0402 20.8957 17.5194 20.3135 18.1017L18.1015 20.3126C17.5192 20.8949 17.0401 21.3751 16.6191 21.7325C16.1892 22.0974 15.7542 22.3933 15.2363 22.5616C14.4329 22.8227 13.567 22.8227 12.7636 22.5616C12.2457 22.3933 11.8107 22.0974 11.3808 21.7325C10.9599 21.3751 10.4807 20.8959 9.89841 20.3136L2.23044 12.6446C1.91828 12.3325 1.64225 12.0655 1.44236 11.7394C1.2779 11.471 1.15648 11.1782 1.08298 10.8722C0.993685 10.5002 0.999972 10.1164 0.999975 9.6749V5.20029C0.999975 4.65674 0.998901 4.18846 1.03025 3.80478C1.06256 3.40953 1.13437 3.01609 1.32712 2.63779C1.6147 2.07357 2.07345 1.61482 2.63767 1.32725C3.01597 1.13449 3.4094 1.06268 3.80466 1.03037C4.18833 0.999023 4.65662 1.0001 5.20017 1.0001H9.67478ZM8.1533 6.50791C8.9097 6.58471 9.49997 7.22343 9.49997 8.0001C9.49997 8.82852 8.8284 9.5001 7.99997 9.5001C7.22331 9.5001 6.58458 8.90982 6.50779 8.15342L6.49997 8.0001L6.50779 7.84678C6.58458 7.09037 7.22331 6.5001 7.99997 6.5001L8.1533 6.50791ZM2.99997 9.6749C2.99998 10.2114 3.00612 10.3171 3.02732 10.4054C3.05182 10.5073 3.09264 10.605 3.14744 10.6944C3.19489 10.7718 3.26534 10.8514 3.64451 11.2306L11.3135 18.8985C11.919 19.5041 12.3306 19.9159 12.6748 20.2081C13.01 20.4927 13.2149 20.605 13.3818 20.6593C13.7835 20.7898 14.2165 20.7898 14.6181 20.6593C14.785 20.605 14.99 20.4927 15.3252 20.2081C15.6694 19.9159 16.081 19.5041 16.6865 18.8985L18.8984 16.6866C19.5039 16.0811 19.9157 15.6695 20.208 15.3253C20.4925 14.9901 20.6049 14.7852 20.6592 14.6183C20.7897 14.2166 20.7897 13.7836 20.6592 13.3819C20.6049 13.215 20.4925 13.0101 20.208 12.6749C19.9157 12.3307 19.5039 11.9191 18.8984 11.3136L11.2304 3.64463C10.8513 3.26546 10.7717 3.19501 10.6943 3.14756C10.6049 3.09276 10.5072 3.05194 10.4052 3.02744C10.3169 3.00624 10.2113 3.0001 9.67478 3.0001H5.20017C4.62362 3.0001 4.25109 3.00136 3.96775 3.02451C3.69616 3.04671 3.59531 3.08428 3.54587 3.10947C3.3579 3.20531 3.20519 3.35803 3.10935 3.546C3.08416 3.59543 3.04659 3.69628 3.02439 3.96787C3.00124 4.25121 2.99997 4.62374 2.99997 5.20029V9.6749Z" fill="black"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const n = e.getAttribute("fill"), s = e.getAttribute("stroke");
+      n && n !== "none" && e.setAttribute("fill", C), s && s !== "none" && e.setAttribute("stroke", C);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, C, r]);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...l
+      },
+      onClick: o,
+      "aria-label": g || "tag-01 icon",
+      title: a,
+      dangerouslySetInnerHTML: { __html: c }
+    }
+  );
+};
+export {
+  L as Tag01Icon,
+  L as default
+};

package/dist/components/Icon/generated/Tag01SolidIcon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface Tag01SolidIconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * Tag01Solid icon component
+ */
+export declare const Tag01SolidIcon: React.FC<Tag01SolidIconProps>;
+export default Tag01SolidIcon;

package/dist/components/Icon/generated/Tag01SolidIcon.js

@@ -0,0 +1,54 @@
+import { jsx as u } from "react/jsx-runtime";
+import f from "react";
+const A = ({
+  size: i = 24,
+  color: l = "currentColor",
+  className: r,
+  style: o,
+  onClick: C,
+  "aria-label": g,
+  title: a
+}) => {
+  const c = f.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.32696 2.63813C1.61458 2.07364 2.07352 1.6147 2.63801 1.32708C3.01639 1.13429 3.40961 1.06297 3.80495 1.03067C4.17952 1.00007 4.6343 1.00008 5.16144 1.0001L9.75781 1.00005C10.1647 0.999672 10.5234 0.999338 10.8719 1.08299C11.178 1.15648 11.4706 1.2777 11.739 1.44218C12.0446 1.62942 12.298 1.88332 12.5855 2.17131L20.3422 9.92807C20.9114 10.4973 21.3812 10.967 21.7326 11.381C22.0976 11.8109 22.3932 12.246 22.5616 12.764C22.8226 13.5674 22.8226 14.4328 22.5616 15.2362C22.3932 15.7542 22.0976 16.1893 21.7326 16.6192C21.3812 17.0332 20.9114 17.5029 20.3422 18.0721L18.072 20.3423C17.5028 20.9115 17.033 21.3813 16.6191 21.7327C16.1892 22.0977 15.7541 22.3934 15.236 22.5617C14.4327 22.8227 13.5673 22.8227 12.7639 22.5617C12.2459 22.3934 11.8108 22.0977 11.3809 21.7327C10.9669 21.3813 10.4972 20.9115 9.92796 20.3423L2.17119 12.5856C1.8832 12.2981 1.62929 12.0447 1.44206 11.7392C1.27757 11.4708 1.15636 11.1781 1.08287 10.872C0.999215 10.5236 0.99955 10.1648 0.999928 9.75792L0.999979 5.16156C0.999961 4.63441 0.999946 4.17965 1.03055 3.80507C1.06285 3.40973 1.13417 3.01651 1.32696 2.63813ZM8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6Z" fill="black"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const n = e.getAttribute("fill"), s = e.getAttribute("stroke");
+      n && n !== "none" && e.setAttribute("fill", l), s && s !== "none" && e.setAttribute("stroke", l);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, l, r]);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...o
+      },
+      onClick: C,
+      "aria-label": g || "tag-01 icon",
+      title: a,
+      dangerouslySetInnerHTML: { __html: c }
+    }
+  );
+};
+export {
+  A as Tag01SolidIcon,
+  A as default
+};

package/dist/components/Icon/helper/index.d.ts

@@ -1 +1 @@
-export type IconName = 'activity' | 'activity-heart' | 'alarm-clock' | 'alarm-clock-check' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'align-left' | 'align-right' | 'bank-note-03' | 'bell-01' | 'building-02' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'credit-card-02' | 'dots-vertical' | 'download-01' | 'edit-02' | 'eye' | 'eye-off' | 'file-06' | 'filter-funnel-01' | 'folder-shield' | 'gift-02' | 'headphones-02' | 'heart' | 'help-circle' | 'home-02' | 'image-03' | 'info-circle' | 'link-external-01' | 'loading-01' | 'log-out-01' | 'marker-pin-01' | 'marker-pin-02' | 'message-question-square' | 'minus' | 'plus' | 'refresh-cw-01' | 'sale-03' | 'search-lg' | 'search-md' | 'shield-tick' | 'trash-01' | 'user-01' | 'user-03' | 'x-circle' | 'x-close';
+export type IconName = 'activity' | 'activity-heart' | 'alarm-clock' | 'alarm-clock-check' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'align-left' | 'align-right' | 'bank-note-03' | 'bell-01' | 'building-02' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'credit-card-02' | 'dots-vertical' | 'download-01' | 'edit-02' | 'eye' | 'eye-off' | 'file-06' | 'filter-funnel-01' | 'folder-shield' | 'gift-02' | 'headphones-02' | 'heart' | 'help-circle' | 'home-02' | 'image-03' | 'info-circle' | 'link-external-01' | 'list' | 'loading-01' | 'log-out-01' | 'map-01' | 'marker-pin-01' | 'marker-pin-02' | 'message-question-square' | 'minus' | 'navigation-pointer-01' | 'plus' | 'refresh-cw-01' | 'sale-03' | 'search-lg' | 'search-md' | 'shield-tick' | 'tag-01' | 'trash-01' | 'user-01' | 'user-03' | 'x-circle' | 'x-close';

package/dist/components/Icon/helper/mapicon.js

@@ -112,7 +112,15 @@ const i = {
   "gift-02": () => import("../generated/Gift02Icon.js"),
   "gift-02-solid": () => import("../generated/Gift02SolidIcon.js"),
   "home-02": () => import("../generated/Home02Icon.js"),
-  "home-02-solid": () => import("../generated/Home02SolidIcon.js")
+  "home-02-solid": () => import("../generated/Home02SolidIcon.js"),
+  "navigation-pointer-01": () => import("../generated/NavigationPointer01Icon.js"),
+  "navigation-pointer-01-solid": () => import("../generated/NavigationPointer01SolidIcon.js"),
+  list: () => import("../generated/ListIcon.js"),
+  "list-solid": () => import("../generated/ListSolidIcon.js"),
+  "map-01": () => import("../generated/Map01Icon.js"),
+  "map-01-solid": () => import("../generated/Map01SolidIcon.js"),
+  "tag-01": () => import("../generated/Tag01Icon.js"),
+  "tag-01-solid": () => import("../generated/Tag01SolidIcon.js")
 };
 export {
   i as MAP_ICON

package/dist/components/Popover/index.d.ts

@@ -33,6 +33,10 @@ export interface PopoverProps extends PopoverVariants {
      * Popover placement relative to anchor
      */
     placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    /**
+     * Alignment of the popover relative to anchor
+     */
+    alignment?: 'start' | 'center' | 'end';
     /**
      * Offset from anchor element in pixels
      */
@@ -66,5 +70,6 @@ export interface PopoverProps extends PopoverVariants {
      * Whether to show the arrow indicator
      */
     showArrow?: boolean;
+    container?: HTMLElement | null;
 }
 export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/index.js

@@ -1,61 +1,63 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import * as m from "react";
-import { Root as T, Anchor as V, Portal as G, Content as I } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
-import { cn as J } from "../../shared/utils/cn.js";
-import { dataTestId as K } from "../../shared/utils/dataTestId.js";
-import { popoverVariants as M } from "./helper/variants.js";
-import b from "../Button/index.js";
-const Q = m.forwardRef(
+import { Root as G, Anchor as I, Portal as J, Content as K } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
+import { cn as M } from "../../shared/utils/cn.js";
+import { dataTestId as Q } from "../../shared/utils/dataTestId.js";
+import { popoverVariants as U } from "./helper/variants.js";
+import C from "../Button/index.js";
+const X = m.forwardRef(
   ({
     isOpen: l = !1,
-    onClose: C,
+    onClose: x,
     anchorEl: n,
     boundingClientRect: d,
     children: u,
-    className: x,
-    size: N,
+    className: N,
+    size: P,
     placement: p = "auto",
-    offset: P = 8,
+    offset: R = 8,
     "data-testid": v,
     leadingIcon: c,
     title: f,
     description: h,
     actions: i,
-    showArrow: R = !0,
-    ...k
-  }, A) => {
-    const [g, B] = m.useState({ side: "bottom", align: "center" }), {
-      content: z,
-      arrow: j,
-      header: D,
-      description: H,
-      actions: S
-    } = M({ size: N, hasIcon: !!c });
+    showArrow: k = !0,
+    alignment: g = "center",
+    container: A,
+    ...B
+  }, z) => {
+    const [y, j] = m.useState({ side: "bottom", align: "center" }), {
+      content: D,
+      arrow: H,
+      header: S,
+      description: W,
+      actions: q
+    } = U({ size: P, hasIcon: !!c });
     if (m.useEffect(() => {
       if (!l || !n && !d) return;
       const e = d || n?.getBoundingClientRect();
       if (!e) return;
-      const w = window.innerWidth, y = window.innerHeight;
-      let o = "bottom", r = "center";
+      const b = window.innerWidth, w = window.innerHeight;
+      let o = "bottom", r = "end";
       if (p !== "auto")
         o = p;
       else {
-        const q = y - e.bottom, F = e.top, L = w - e.right, O = e.left;
-        q >= 200 ? o = "bottom" : F >= 200 ? o = "top" : L >= 280 ? o = "right" : O >= 280 ? o = "left" : o = "bottom";
+        const L = w - e.bottom, O = e.top, T = b - e.right, V = e.left;
+        L >= 200 ? o = "bottom" : O >= 200 ? o = "top" : T >= 280 ? o = "right" : V >= 280 ? o = "left" : o = "bottom";
       }
-      o === "top" || o === "bottom" ? e.left < 100 ? r = "start" : e.right > w - 100 ? r = "end" : r = "center" : e.top < 100 ? r = "start" : e.bottom > y - 100 ? r = "end" : r = "center", B({ side: o, align: r });
+      o === "top" || o === "bottom" ? e.left < 100 ? r = "start" : e.right > b - 100 ? r = "end" : r = "center" : e.top < 100 ? r = "start" : e.bottom > w - 100 ? r = "end" : r = "center", g && (r = g), j({ side: o, align: r });
     }, [l, n, d, p]), !l) return null;
     const s = d || n?.getBoundingClientRect();
     if (!s)
       return console.warn("Popover requires either anchorEl or boundingClientRect"), null;
-    const W = f || h || i || c;
+    const F = f || h || i || c;
     return /* @__PURE__ */ a(
-      T,
+      G,
       {
         open: l,
-        onOpenChange: (e) => !e && C?.(),
+        onOpenChange: (e) => !e && x?.(),
         children: [
-          /* @__PURE__ */ t(V, { asChild: !0, children: /* @__PURE__ */ t(
+          /* @__PURE__ */ t(I, { asChild: !0, children: /* @__PURE__ */ t(
             "div",
             {
               style: {
@@ -70,30 +72,30 @@ const Q = m.forwardRef(
               }
             }
           ) }),
-          /* @__PURE__ */ t(G, { children: /* @__PURE__ */ a(
-            I,
+          /* @__PURE__ */ t(J, { container: A || document.body, children: /* @__PURE__ */ a(
+            K,
             {
               "data-slot": "popover-content",
-              side: g.side,
-              align: g.align,
-              sideOffset: P,
-              className: J(z(), x),
+              side: y.side,
+              align: y.align,
+              sideOffset: R,
+              className: M(D(), N),
               onOpenAutoFocus: (e) => e.preventDefault(),
               onInteractOutside: (e) => {
                 n?.contains(e.target) && e.preventDefault();
               },
-              ref: A,
-              ...v ? K(v) : {},
-              ...k,
+              ref: z,
+              ...v ? Q(v) : {},
+              ...B,
               children: [
-                W ? /* @__PURE__ */ a("div", { className: "flex gap-xs", children: [
+                F ? /* @__PURE__ */ a("div", { className: "flex gap-xs", children: [
                   c && /* @__PURE__ */ t("div", { children: c }),
                   /* @__PURE__ */ a("div", { children: [
-                    f && /* @__PURE__ */ t("div", { className: D(), children: f && /* @__PURE__ */ t("div", { children: f }) }),
-                    h && /* @__PURE__ */ t("div", { className: H(), children: h }),
-                    i && /* @__PURE__ */ a("div", { className: S(), children: [
+                    f && /* @__PURE__ */ t("div", { className: S(), children: f && /* @__PURE__ */ t("div", { children: f }) }),
+                    h && /* @__PURE__ */ t("div", { className: W(), children: h }),
+                    i && /* @__PURE__ */ a("div", { className: q(), children: [
                       i.secondary && /* @__PURE__ */ t(
-                        b,
+                        C,
                         {
                           type: "button",
                           onClick: i.secondary.onClick,
@@ -103,7 +105,7 @@ const Q = m.forwardRef(
                         }
                       ),
                       i.primary && /* @__PURE__ */ t(
-                        b,
+                        C,
                         {
                           type: "button",
                           onClick: i.primary.onClick,
@@ -119,7 +121,7 @@ const Q = m.forwardRef(
                   // Render custom children only
                   u
                 ),
-                R && /* @__PURE__ */ t("div", { className: j() })
+                k && /* @__PURE__ */ t("div", { className: H() })
               ]
             }
           ) })
@@ -128,7 +130,7 @@ const Q = m.forwardRef(
     );
   }
 );
-Q.displayName = "Popover";
+X.displayName = "Popover";
 export {
-  Q as Popover
+  X as Popover
 };

package/dist/components/Tab/helper/variants.js

@@ -1,7 +1,7 @@
 import { tv as e } from "../../../node_modules/tailwind-variants/dist/index.js";
 const a = e({
   base: [
-    "inline-flex items-center justify-center",
+    "inline-flex items-center justify-center relative",
     "font-medium transition-colors cursor-pointer",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-active focus-visible:ring-offset-2",
     "disabled:pointer-events-none disabled:text-fg-neutral-disabled"
@@ -34,41 +34,57 @@ const a = e({
     orientation: "horizontal"
   },
   compoundVariants: [
-    // Horizontal default and underlined variants
+    // Horizontal default and underlined variants - active border
     {
       orientation: "horizontal",
       variant: ["default", "underlined"],
-      className: "border-b-2 border-transparent"
+      state: "active",
+      className: [
+        "border-b-2 border-transparent relative overflow-visible",
+        'after:content-[""] after:absolute after:bottom-[-2px] after:left-1/2 after:-translate-x-1/2',
+        "after:h-[2px] after:bg-fg-brand-rest after:z-10",
+        "after:w-[80%]"
+        // Adjust this percentage to match content width
+      ]
     },
+    // Horizontal default and underlined variants - hover state
     {
       orientation: "horizontal",
       variant: ["default", "underlined"],
       state: "default",
-      className: "hover:border-neutral"
-    },
-    {
-      orientation: "horizontal",
-      variant: ["default", "underlined"],
-      state: "active",
-      className: "border-active"
+      className: [
+        "border-b-2 border-transparent relative overflow-visible",
+        'after:content-[""] after:absolute after:bottom-[-2px] after:left-1/2 after:-translate-x-1/2',
+        "after:h-[2px] after:bg-transparent after:transition-colors after:z-10",
+        "after:w-[80%]",
+        "hover:after:bg-bg-neutral-hover hover:after:opacity-50"
+      ]
     },
-    // Vertical default and underlined variants
+    // Vertical default and underlined variants - active border  
     {
       orientation: "vertical",
       variant: ["default", "underlined"],
-      className: "border-l-2 border-transparent"
+      state: "active",
+      className: [
+        "border-l-2 border-transparent relative overflow-visible",
+        'after:content-[""] after:absolute after:left-[-2px] after:top-1/2 after:-translate-y-1/2',
+        "after:w-[2px] after:bg-fg-brand-rest after:z-10",
+        "after:h-[80%]"
+        // Shorter than button height, similar to horizontal
+      ]
     },
+    // Vertical default and underlined variants - hover state
     {
       orientation: "vertical",
       variant: ["default", "underlined"],
       state: "default",
-      className: "hover:border-neutral"
-    },
-    {
-      orientation: "vertical",
-      variant: ["default", "underlined"],
-      state: "active",
-      className: "border-active"
+      className: [
+        "border-l-2 border-transparent relative overflow-visible",
+        'after:content-[""] after:absolute after:left-[-2px] after:top-1/2 after:-translate-y-1/2',
+        "after:w-[2px] after:bg-transparent after:transition-colors after:z-10",
+        "after:h-[80%]",
+        "hover:after:bg-fg-brand-rest hover:after:opacity-50"
+      ]
     },
     {
       variant: "pills",
@@ -96,7 +112,7 @@ const a = e({
     }
   ]
 }), r = e({
-  base: ["inline-flex items-center"],
+  base: ["inline-flex items-center relative"],
   variants: {
     variant: {
       default: "gap-0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcr-design-systems",
   "private": false,
-  "version": "1.0.97",
+  "version": "1.0.99",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",