@myelmut/design-system 0.1.43 → 0.1.45

package/dist/index.es.js

@@ -718,15 +718,16 @@ const _t = ({ videoId: e, alt: t, className: a, placeholderImageMobile: r, hasSo
 }, ee = {
   vertical: "absolute right-0 bottom-0 left-0 z-1 max-h-34 w-full",
   horizontal: "max-md:h-full max-md:w-19 md:w-full"
-}, Ut = ({ label: e, layout: t = "vertical", illustration: a, disabled: r, className: n = "", illustrationClassName: o = "", ...c }) => {
-  const m = s(
+}, Ut = ({ label: e, layout: t = "vertical", illustration: a, disabled: r, className: n = "", illustrationClassName: o = "", isActive: c = !1, ...m }) => {
+  const g = s(
     "relative md:px-5 md:py-6 flex md:flex-col items-center overflow-hidden rounded-input bg-beige-dark text-claret-violet-dark transition-all duration-300 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50",
     "after:absolute after:content-[''] after:border after:rounded-input after:border-beige-ultra-dark after:inset-0 after:z-0 hover:after:border-claret-violet-dark after:transition-colors after:duration-300 focus-visible:after:border-claret-violet-dark",
     "md:rounded-illustrated-card-button md:after:rounded-illustrated-card-button md:w-51.25 md:aspect-4/5",
     o1[t],
+    c && "after:border-claret-violet-dark",
     n
   );
-  return /* @__PURE__ */ d("button", { className: m, disabled: r, ...c, tabIndex: r ? -1 : 0, children: [
+  return /* @__PURE__ */ d("button", { className: g, disabled: r, ...m, tabIndex: r ? -1 : 0, children: [
     /* @__PURE__ */ l("span", { className: "flex flex-col gap-2.5", children: /* @__PURE__ */ l("span", { className: "text-sm-mobile w-full font-semibold md:text-xl", children: e }) }),
     /* @__PURE__ */ l("div", { className: s("md:absolute md:right-0 md:bottom-0 md:left-0 md:z-1 md:h-34 md:w-full", ee[t]), children: /* @__PURE__ */ l("img", { src: a, alt: e, className: s("w-full origin-top object-contain md:absolute md:top-0 md:right-0 md:left-0 md:z-1 md:scale-120", ee[t], o), loading: "lazy", decoding: "async" }) })
   ] });
@@ -758,13 +759,13 @@ const _t = ({ videoId: e, alt: t, className: a, placeholderImageMobile: r, hasSo
         type: "button",
         disabled: r,
         className: s(
-          "focus-visible:outline-claret-violet-dark relative z-1 flex h-full flex-1 cursor-pointer items-center gap-3 rounded-full p-1 transition-colors duration-600 ease-in-out focus-visible:outline-2 md:gap-6 md:p-1.5",
+          "focus-visible:outline-claret-violet-dark relative z-1 flex h-full flex-1 cursor-pointer items-center gap-3 rounded-full p-1 transition-colors duration-600 ease-in-out focus-visible:outline-2 md:gap-6 md:py-1.5",
           p === 0 ? "pe-6 md:pe-11" : "flex-row-reverse ps-6 md:ps-11",
           a === u.value && "text-beige-dark"
         ),
         onClick: () => c(u.value),
         children: [
-          /* @__PURE__ */ l("span", { className: "bg-lavender-blue-dark block h-9 w-9 flex-shrink-0 overflow-hidden rounded-full md:h-17 md:w-17", children: u.image && /* @__PURE__ */ l("img", { src: u.image, alt: u.label, className: "h-full w-full object-cover", loading: "lazy", decoding: "async" }) }),
+          /* @__PURE__ */ l("span", { className: "bg-lavender-blue-dark block h-9 w-9 shrink-0 overflow-hidden rounded-full md:h-17 md:w-17", children: u.image && /* @__PURE__ */ l("img", { src: u.image, alt: u.label, className: "h-full w-full object-cover", loading: "lazy", decoding: "async" }) }),
           /* @__PURE__ */ l(C, { size: "button", variant: "span", className: s(h, u.labelMobile && "hidden md:block"), children: u.label }),
           /* @__PURE__ */ l(C, { size: "button", variant: "span", className: s(h, u.labelMobile && "block md:hidden"), children: u.labelMobile })
         ]
@@ -839,7 +840,7 @@ const _t = ({ videoId: e, alt: t, className: a, placeholderImageMobile: r, hasSo
           }
         ),
         /* @__PURE__ */ l(Q, { name: n, options: A, value: u, onChange: B, disabled: g, isOpen: y, className: s("border-0 pe-9.5", y && "h-full", b && "pt-0") }),
-        /* @__PURE__ */ l(me, { className: s("absolute top-4.5 right-3 z-20 w-3 transition-transform duration-300", y && "rotate-180", g && "opacity-40") })
+        /* @__PURE__ */ l(me, { onClick: () => L(!y), className: s("pointer-cursor absolute top-4.5 right-3 z-20 w-3 transition-transform duration-300", y && "rotate-180", g && "opacity-40") })
       ] })
     ] }),
     /* @__PURE__ */ l(T, { id: `${t}-error`, hasError: m, message: c })
@@ -863,8 +864,9 @@ const _t = ({ videoId: e, alt: t, className: a, placeholderImageMobile: r, hasSo
     },
     [b]
   ), x = a ? `${e}-option-${a}` : void 0, E = s(
-    "rounded-input border-claret-violet-dark transition-duration-3000 will-change-height max-h-0 h-0 w-full overflow-auto border bg-white px-3 py-2.5 opacity-0 transition-all md:min-w-max",
+    "rounded-input border-claret-violet-dark transition-duration-3000 will-change-height will-change-max-height w-full overflow-auto border bg-white px-3 py-2.5 opacity-0 transition-all md:min-w-max",
     g && "max-h-33 h-auto opacity-100",
+    !g && "max-h-0 h-0",
     o
   );
   return /* @__PURE__ */ d("ul", { tabIndex: -1, "aria-activedescendant": x, role: "listbox", className: E, ref: u, children: [
@@ -1560,8 +1562,8 @@ const b2 = ({ content: e, className: t }) => /* @__PURE__ */ d("div", { classNam
   large: "p-6 h-80 md:h-112.5 justify-between rounded-card w-60"
 }, y2 = ({ variant: e = "primary", size: t = "large", value: a, metric: r, description: n, className: o }) => /* @__PURE__ */ d("div", { className: s("border-claret-violet-dark flex flex-col border", Lt[e], Et[t], o), children: [
   /* @__PURE__ */ d("p", { className: "leading-none", children: [
-    /* @__PURE__ */ l(I, { size: "display-lg", className: "hidden md:inline", children: a }),
     /* @__PURE__ */ l(I, { size: "display-xl", className: "inline md:hidden", children: a }),
+    /* @__PURE__ */ l(I, { size: "display-lg", className: "hidden md:inline", children: a }),
     /* @__PURE__ */ l(I, { size: "display-md", children: r })
   ] }),
   /* @__PURE__ */ l(C, { size: "md", className: "hidden md:block", children: n }),