@digitalservicebund/ris-ui 3.21.0 → 3.21.2

package/dist/primevue/index.js

@@ -1,11 +1,11 @@
 import { t as e } from "../tags-Dde6Li6m.js";
 const S = {
-  root: ({ props: r, instance: l }) => {
-    const t = e`relative inline-flex max-w-full cursor-pointer items-center justify-center gap-8 text-center focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800 focus-visible:not-focus-visible:outline-none active:outline-none disabled:cursor-not-allowed disabled:outline-hidden`, o = e`rounded-full`, s = r.severity ?? "primary", i = e`bg-blue-800 text-white hover:bg-blue-700 active:bg-blue-500 active:text-blue-800 disabled:bg-gray-400 disabled:text-gray-600`, a = e`border-2 border-blue-800 bg-white text-blue-800 hover:bg-blue-200 focus-visible:bg-blue-200 active:bg-blue-400 disabled:border-blue-500 disabled:text-blue-500 disabled:hover:bg-white`, n = e`border-2 border-red-800 bg-white text-red-800 hover:bg-red-100 focus-visible:bg-red-100 focus-visible:outline-red-800 active:border-red-800 active:bg-red-400 disabled:border-red-500 disabled:text-red-500 disabled:hover:bg-white`, b = e`border border-blue-500 bg-white font-normal text-blue-800 hover:bg-gray-200 focus-visible:bg-gray-200 active:border-white active:bg-white disabled:border-blue-500 disabled:text-blue-500 disabled:hover:bg-white`, g = e`border-2 border-transparent bg-transparent text-blue-800 underline hover:border-gray-500 hover:bg-white focus-visible:border-gray-500 active:border-blue-600 active:bg-blue-400 disabled:bg-transparent disabled:text-gray-500`, c = r.size ?? "normal";
+  root: ({ props: r, instance: t }) => {
+    const l = e`relative inline-flex max-w-full cursor-pointer items-center justify-center gap-8 text-center focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800 focus-visible:not-focus-visible:outline-none active:outline-none disabled:cursor-not-allowed disabled:outline-hidden`, o = e`rounded-full`, s = r.severity ?? "primary", i = e`bg-blue-800 text-white hover:bg-blue-700 active:bg-blue-500 active:text-blue-800 disabled:bg-gray-400 disabled:text-gray-600`, a = e`border-2 border-blue-800 bg-white text-blue-800 hover:bg-blue-200 focus-visible:bg-blue-200 active:bg-blue-400 disabled:border-blue-500 disabled:text-blue-500 disabled:hover:bg-white`, n = e`border-2 border-red-800 bg-white text-red-800 hover:bg-red-100 focus-visible:bg-red-100 active:border-red-800 active:bg-red-300 disabled:border-red-500 disabled:text-red-500 disabled:hover:bg-white`, b = e`border border-blue-500 bg-white font-normal text-blue-800 hover:bg-gray-200 focus-visible:bg-gray-200 active:border-white active:bg-white disabled:border-blue-500 disabled:text-blue-500 disabled:hover:bg-white`, g = e`border-2 border-transparent bg-transparent text-blue-800 underline hover:border-gray-500 hover:bg-white focus-visible:border-gray-500 active:border-blue-600 active:bg-blue-400 disabled:bg-transparent disabled:text-gray-500`, c = r.size ?? "normal";
     let u = e`ris-body2-bold h-40 py-4`, d = e`ris-body2-bold h-48 py-4`, f = e`ris-body1-bold h-64 py-4`;
-    return l.hasIcon && !r.label ? (u = e`${u} w-40 px-4`, d = e`${d} w-48 px-4`, f = e`${f} w-64 px-4`) : (u = e`${u} px-12`, d = e`${d} px-16`, f = e`${f} px-24`), {
+    return t.hasIcon && !r.label ? (u = e`${u} w-40 px-4`, d = e`${d} w-48 px-4`, f = e`${f} w-64 px-4`) : (u = e`${u} px-12`, d = e`${d} px-16`, f = e`${f} px-24`), {
       class: {
-        [t]: !0,
+        [l]: !0,
         [o]: r.rounded,
         [u]: c === "small",
         [d]: c === "normal",
@@ -29,24 +29,23 @@ const S = {
     }
   }),
   loadingIcon: ({ props: r }) => {
-    const l = r.size ?? "normal", t = e`h-[1.34em] w-[1.34em]`, o = e`h-24 w-24`;
+    const t = r.size ?? "normal", l = e`h-[1.34em] w-[1.34em]`, o = e`h-24 w-24`;
     return {
       class: {
         [e`animate-spin`]: !0,
-        [t]: l === "normal",
-        [o]: l === "large"
+        [l]: t === "normal",
+        [o]: t === "large"
       }
     };
   }
 }, h = {
   root: ({ props: r }) => {
-    const l = r.size === "large", t = e`[&+label]:ris-label1-regular relative inline-block h-24 min-h-24 w-24 min-w-24 [&+label]:ml-8`, o = l ? e`[&+label]:ris-label1-regular` : e`[&+label]:ris-label2-regular`;
+    const t = r.size === "large";
     return {
       class: [
-        t,
-        o,
+        e`[&+label]:ris-label1-regular relative inline-block h-24 min-h-24 w-24 min-w-24 [&+label]:ml-8`,
         {
-          [e`h-32 min-h-32 w-32 min-w-32`]: l
+          [e`h-32 min-h-32 w-32 min-w-32`]: t
         }
       ]
     };
@@ -115,12 +114,12 @@ const S = {
   }
 }, y = e`[&+small]:ris-label3-regular border-2 border-blue-800 bg-white placeholder:text-gray-800 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline-4 hover:-outline-offset-4 hover:outline-blue-800 focus-visible:outline-4 focus-visible:-outline-offset-4 focus-visible:outline-blue-800 disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-hidden aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-hidden [&+small]:mt-4 [&+small]:flex [&+small]:items-center [&+small]:gap-4 [&+small]:text-gray-900 [&[aria-invalid="true"]+small]:text-red-900`, k = e`ris-body2-regular h-48 px-16 py-4`, A = e`ris-body1-regular h-64 px-24 py-4`, B = {
   root: ({ props: r }) => {
-    const l = e`[[type=password]]:w-full [&[type=password]:not(:placeholder-shown)]:text-[1.75rem] [&[type=password]:not(:placeholder-shown)]:tracking-[0.25rem]`, t = e`w-full`;
+    const t = e`[[type=password]]:w-full [&[type=password]:not(:placeholder-shown)]:text-[1.75rem] [&[type=password]:not(:placeholder-shown)]:tracking-[0.25rem]`, l = e`w-full`;
     return {
       class: {
         [y]: !0,
-        [t]: !!r.fluid,
-        [l]: !0,
+        [l]: !!r.fluid,
+        [t]: !0,
         [k]: !r.size || r.size === "small",
         [A]: r.size === "large"
       },
@@ -135,11 +134,11 @@ const S = {
     class: e`focus-visible:outline-none`
   },
   item: ({ context: r }) => {
-    const l = e`relative h-48 border-l-4 border-l-transparent pr-12 pl-16 after:absolute after:right-16 after:-bottom-1 after:left-12 after:border-b after:border-gray-300 after:content-[''] last:after:border-b-0 hover:border-l-blue-400 hover:bg-blue-100`, t = e`bg-blue-200 -outline-offset-4 outline-blue-800 not-hover:outline-4 hover:bg-blue-200`;
+    const t = e`relative h-48 border-l-4 border-l-transparent pr-12 pl-16 after:absolute after:right-16 after:-bottom-1 after:left-12 after:border-b after:border-gray-300 after:content-[''] last:after:border-b-0 hover:border-l-blue-400 hover:bg-blue-100 active:border-l-blue-800 active:bg-blue-300`, l = e`bg-blue-200 -outline-offset-4 outline-blue-800 not-hover:outline-4 hover:bg-blue-200`;
     return {
       class: {
-        [l]: !0,
-        [t]: r.focused
+        [t]: !0,
+        [l]: r.focused
       }
     };
   },
@@ -150,8 +149,8 @@ const S = {
     class: e`flex items-center gap-8`
   }
 }, I = {
-  root: ({ props: r, instance: l }) => {
-    const t = e`ris-body1-regular border-l-4 px-20 py-14`, o = r.severity ?? "info", s = e`border-l-green-800 bg-green-200`, i = e`border-l-blue-800 bg-blue-200`, a = e`border-l-yellow-800 bg-yellow-200`, n = e`border-l-red-800 bg-red-200`, b = !!l.$slots.icon, c = {
+  root: ({ props: r, instance: t }) => {
+    const l = e`ris-body1-regular border-l-4 px-20 py-14`, o = r.severity ?? "info", s = e`border-l-green-800 bg-green-200`, i = e`border-l-blue-800 bg-blue-200`, a = e`border-l-yellow-800 bg-yellow-200`, n = e`border-l-red-800 bg-red-200`, b = !!t.$slots.icon, c = {
       success: "var(--ris-icon-success)",
       info: "var(--ris-icon-info)",
       warn: "var(--ris-icon-warn)",
@@ -159,7 +158,7 @@ const S = {
     }[o], u = e`bg-size-[1.25rem] bg-position-[1rem_1.125rem] bg-no-repeat pl-44`;
     return {
       class: {
-        [t]: !0,
+        [l]: !0,
         [s]: o === "success",
         [i]: o === "info",
         [a]: o === "warn",
@@ -178,20 +177,20 @@ const S = {
     class: e`flex-1`
   },
   closeButton: ({ props: r }) => {
-    const l = e`mt-4 inline-flex h-20 w-20 flex-none items-center justify-center p-2 leading-none outline-offset-4 outline-blue-800 focus-visible:outline-4`, t = r.severity ?? "info", o = e`text-green-800 hover:bg-green-400 active:bg-green-500`, s = e`text-blue-800 hover:bg-blue-400 active:bg-blue-500`, i = e`text-black hover:bg-yellow-400 active:bg-yellow-500`, a = e`text-red-800 hover:bg-red-400 active:bg-red-500`;
+    const t = e`mt-4 inline-flex h-20 w-20 flex-none items-center justify-center p-2 leading-none outline-offset-4 outline-blue-800 focus-visible:outline-4`, l = r.severity ?? "info", o = e`text-green-800 hover:bg-green-400 active:bg-green-500`, s = e`text-blue-800 hover:bg-blue-400 active:bg-blue-500`, i = e`text-black hover:bg-yellow-400 active:bg-yellow-500`, a = e`text-red-800 hover:bg-red-400 active:bg-red-500`;
     return {
       class: {
-        [l]: !0,
-        [o]: t === "success",
-        [s]: t === "info",
-        [i]: t === "warn",
-        [a]: t === "error"
+        [t]: !0,
+        [o]: l === "success",
+        [s]: l === "info",
+        [i]: l === "warn",
+        [a]: l === "error"
       }
     };
   }
-}, T = {
-  // All styling moved to inputText.ts
 }, F = {
+  // All styling moved to inputText.ts
+}, T = {
   root: {
     class: e`mx-auto inline-block h-28 w-28 animate-spin`
   },
@@ -200,11 +199,11 @@ const S = {
   }
 }, E = {
   root: ({ props: r }) => {
-    const l = r.size === "small";
+    const t = r.size === "small";
     return {
       class: [
-        e`relative inline-block [&+label]:ml-8`,
-        l ? e`[&+label]:ris-label2-regular h-24 w-24` : e`[&+label]:ris-label1-regular h-32 w-32`
+        e`[&+label]:ris-label1-regular relative inline-block [&+label]:ml-8`,
+        t ? e`h-24 w-24` : e`h-32 w-32`
       ]
     };
   },
@@ -215,22 +214,22 @@ const S = {
     class: e`pointer-events-none absolute inset-0 flex items-center justify-center text-transparent peer-checked:text-blue-800 peer-disabled:text-gray-600 peer-aria-[invalid]:text-red-800`
   },
   icon: ({ props: r }) => {
-    const l = r.size === "small";
+    const t = r.size === "small";
     return {
       class: [
         e`rounded-full bg-current`,
-        l ? e`h-12 w-12` : e`h-16 w-16`
+        t ? e`h-12 w-12` : e`h-16 w-16`
       ]
     };
   }
 }, v = e`w-full`, V = {
-  root: ({ props: r, state: l }) => {
-    const t = e`ris-body2-regular flex min-h-48 border-2 bg-white py-4 pr-4 pl-16 -outline-offset-4 outline-blue-800 placeholder:text-gray-800 has-focus-visible:outline-4`, o = e`cursor-pointer border-blue-800`, s = e`outline-4`, i = e`hover:outline-4`, a = e`aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-hidden`, n = e`cursor-not-allowed border-blue-500 text-blue-500 disabled:outline-hidden`;
+  root: ({ props: r, state: t }) => {
+    const l = e`ris-body2-regular flex min-h-48 border-2 bg-white py-4 pr-4 pl-16 -outline-offset-4 outline-blue-800 placeholder:text-gray-800 has-focus-visible:outline-4`, o = e`cursor-pointer border-blue-800`, s = e`outline-4`, i = e`hover:outline-4`, a = e`aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-hidden`, n = e`cursor-not-allowed border-blue-500 text-blue-500 disabled:outline-hidden`;
     return {
       class: {
-        [t]: !0,
+        [l]: !0,
         [o]: !r.disabled,
-        [s]: l.focused && !r.disabled,
+        [s]: t.focused && !r.disabled,
         [i]: !r.disabled,
         [v]: !!r.fluid,
         [a]: r.invalid,
@@ -270,11 +269,11 @@ const S = {
   }
 }, j = {
   root: ({ props: r }) => {
-    const l = e`ris-body1-regular [&+small]:ris-label3-regular min-h-56 border-2 border-blue-800 bg-white px-14 pt-8 pb-12 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline hover:outline-4 hover:-outline-offset-4 hover:outline-blue-800 focus-visible:outline focus-visible:outline-4 focus-visible:-outline-offset-4 focus-visible:outline-blue-800 disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-hidden aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-hidden [&+small]:mt-2 [&+small]:flex [&+small]:items-center [&+small]:gap-4 [&+small]:text-gray-900 [&[aria-invalid="true"]+small]:text-red-900`, t = e`w-full`;
+    const t = e`ris-body1-regular [&+small]:ris-label3-regular min-h-56 border-2 border-blue-800 bg-white px-14 pt-8 pb-12 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline hover:outline-4 hover:-outline-offset-4 hover:outline-blue-800 focus-visible:outline focus-visible:outline-4 focus-visible:-outline-offset-4 focus-visible:outline-blue-800 disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-hidden aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-hidden [&+small]:mt-2 [&+small]:flex [&+small]:items-center [&+small]:gap-4 [&+small]:text-gray-900 [&[aria-invalid="true"]+small]:text-red-900`, l = e`w-full`;
     return {
       class: {
-        [l]: !0,
-        [t]: !!r.fluid
+        [t]: !0,
+        [l]: !!r.fluid
       }
     };
   }
@@ -283,14 +282,14 @@ const S = {
     class: e`max-w-lg`
   },
   message: ({ props: r }) => {
-    const l = e`mb-8 flex w-full flex-row items-center gap-8 border-l-4 p-16`, t = r.message?.severity, o = e`border-l-green-900 bg-green-200`, s = e`border-l-red-900 bg-red-200`, i = e`border-l-yellow-900 bg-yellow-200`, a = e`border-l-blue-900 bg-blue-200`;
+    const t = e`mb-8 flex w-full flex-row items-center gap-8 border-l-4 p-16`, l = r.message?.severity, o = e`border-l-green-900 bg-green-200`, s = e`border-l-red-900 bg-red-200`, i = e`border-l-yellow-900 bg-yellow-200`, a = e`border-l-blue-900 bg-blue-200`;
     return {
       class: {
-        [l]: !0,
-        [o]: t === "success",
-        [s]: t === "error",
-        [i]: t === "warn",
-        [a]: t === "info"
+        [t]: !0,
+        [o]: l === "success",
+        [s]: l === "error",
+        [i]: l === "warn",
+        [a]: l === "info"
       }
     };
   },
@@ -298,14 +297,14 @@ const S = {
     class: e`flex w-full flex-row items-start justify-between gap-10`
   },
   messageIcon: ({ props: r }) => {
-    const l = e`mt-2 h-20 w-20 flex-none shrink-0`, t = r.message?.severity ?? "info", o = e`text-green-800`, s = e`text-red-800`, i = e`text-black`, a = e`text-blue-800`;
+    const t = e`mt-2 h-20 w-20 flex-none shrink-0`, l = r.message?.severity ?? "info", o = e`text-green-800`, s = e`text-red-800`, i = e`text-black`, a = e`text-blue-800`;
     return {
       class: {
-        [l]: !0,
-        [o]: t === "success",
-        [s]: t === "error",
-        [i]: t === "warn",
-        [a]: t === "info"
+        [t]: !0,
+        [o]: l === "success",
+        [s]: l === "error",
+        [i]: l === "warn",
+        [a]: l === "info"
       }
     };
   },
@@ -319,14 +318,14 @@ const S = {
     class: e`ris-label2-regular`
   },
   closeButton: ({ props: r }) => {
-    const l = e`p-2 outline-offset-4 outline-blue-800 focus-visible:outline-4`, t = r.message?.severity ?? "info", o = e`hover:bg-green-400`, s = e`hover:bg-red-400`, i = e`hover:bg-yellow-400`, a = e`hover:bg-blue-400`;
+    const t = e`p-2 outline-offset-4 outline-blue-800 focus-visible:outline-4`, l = r.message?.severity ?? "info", o = e`hover:bg-green-400`, s = e`hover:bg-red-400`, i = e`hover:bg-yellow-400`, a = e`hover:bg-blue-400`;
     return {
       class: {
-        [l]: !0,
-        [o]: t === "success",
-        [s]: t === "error",
-        [i]: t === "warn",
-        [a]: t === "info"
+        [t]: !0,
+        [o]: l === "success",
+        [s]: l === "error",
+        [i]: l === "warn",
+        [a]: l === "info"
       }
     };
   },
@@ -334,13 +333,13 @@ const S = {
     class: e`text-black`
   }
 }, _ = {
-  root: ({ props: r, state: l }) => {
-    const t = e`group ris-body2-regular [&+small]:ris-label3-regular relative inline-flex h-48 items-center justify-between border-2 bg-white py-4 pr-6 pl-16 [&+small]:mt-2 [&+small]:flex [&+small]:items-center [&+small]:gap-4 [&+small]:text-gray-900 [&[aria-invalid="true"]+small]:text-red-900`, o = e`cursor-pointer border-blue-800`, s = e`outline-4 -outline-offset-4 outline-blue-800`, i = e`hover:outline-4 hover:-outline-offset-4 hover:outline-blue-800`, a = e`cursor-not-allowed border-blue-500 text-blue-500 disabled:outline-hidden`, n = e`border-red-800 bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:active:outline-hidden aria-[invalid]:disabled:outline-hidden`, b = e`w-full`;
+  root: ({ props: r, state: t }) => {
+    const l = e`group ris-body2-regular [&+small]:ris-label3-regular relative inline-flex h-48 items-center justify-between border-2 bg-white py-4 pr-6 pl-16 [&+small]:mt-2 [&+small]:flex [&+small]:items-center [&+small]:gap-4 [&+small]:text-gray-900 [&[aria-invalid="true"]+small]:text-red-900`, o = e`cursor-pointer border-blue-800`, s = e`outline-4 -outline-offset-4 outline-blue-800`, i = e`hover:outline-4 hover:-outline-offset-4 hover:outline-blue-800`, a = e`cursor-not-allowed border-blue-500 text-blue-500 disabled:outline-hidden`, n = e`border-red-800 bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:active:outline-hidden aria-[invalid]:disabled:outline-hidden`, b = e`w-full`;
     return {
       class: {
-        [t]: !0,
+        [l]: !0,
         [o]: !r.disabled,
-        [s]: (l.focused || l.overlayVisible) && !r.disabled,
+        [s]: (t.focused || t.overlayVisible) && !r.disabled,
         [i]: !r.disabled,
         [b]: !!r.fluid,
         [a]: r.disabled,
@@ -349,14 +348,14 @@ const S = {
       "aria-invalid": r.invalid ? "true" : null
     };
   },
-  dropdown: ({ state: r, props: l }) => {
-    const t = e`ml-8 p-10`, o = e`text-blue-800 group-hover:bg-blue-200`, s = e`bg-blue-800 text-white`, i = e`text-blue-500`;
+  dropdown: ({ state: r, props: t }) => {
+    const l = e`ml-8 p-10`, o = e`text-blue-800 group-hover:bg-blue-200`, s = e`bg-blue-800 text-white`, i = e`text-blue-500`;
     return {
       class: {
-        [t]: !0,
-        [o]: !(r.focused || r.overlayVisible || l.disabled),
-        [s]: (r.focused || r.overlayVisible) && !l.disabled,
-        [i]: l.disabled
+        [l]: !0,
+        [o]: !(r.focused || r.overlayVisible || t.disabled),
+        [s]: (r.focused || r.overlayVisible) && !t.disabled,
+        [i]: t.disabled
       }
     };
   },
@@ -369,13 +368,13 @@ const S = {
   overlay: {
     class: e`bg-white`
   },
-  option: ({ context: r, props: l }) => {
-    const t = e`ris-body2-regular relative h-full min-h-48 w-full cursor-pointer px-16 py-12 after:absolute after:right-8 after:-bottom-1 after:left-8 after:border-b after:border-gray-300 after:content-[''] last:after:border-b-0 hover:bg-gray-100`, o = e`bg-gray-100`, s = e`flex items-center gap-16`;
+  option: ({ context: r, props: t }) => {
+    const l = e`ris-body2-regular relative h-full min-h-48 w-full cursor-pointer px-16 py-12 after:absolute after:right-8 after:-bottom-1 after:left-8 after:border-b after:border-gray-300 after:content-[''] last:after:border-b-0 hover:bg-gray-100`, o = e`bg-gray-100`, s = e`flex items-center gap-16`;
     return {
       class: {
-        [t]: !0,
+        [l]: !0,
         [o]: r.focused,
-        [s]: l.checkmark
+        [s]: t.checkmark
       }
     };
   },
@@ -386,13 +385,13 @@ const S = {
     class: e`order-1`
   }
 }, P = {
-  root: ({ props: r, state: l }) => {
-    const t = e`ris-body2-regular [&+small]:ris-label3-regular relative inline-flex min-h-48 items-center justify-start border-2 bg-white py-2 pr-12 pl-12 [&+small]:mt-2 [&+small]:flex [&+small]:items-center [&+small]:gap-4 [&+small]:text-gray-900 [&[aria-invalid="true"]+small]:text-red-900`, o = e`cursor-pointer border-blue-800`, s = e`has-focus-visible:outline-4 has-focus-visible:-outline-offset-4 has-focus-visible:outline-blue-800`, i = e`hover:outline-4 hover:-outline-offset-4 hover:outline-blue-800`, a = e`cursor-not-allowed border-blue-500 text-blue-500 disabled:outline-hidden`, n = e`border-red-800 bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:active:outline-hidden aria-[invalid]:disabled:outline-hidden`, b = e`w-full`;
+  root: ({ props: r, state: t }) => {
+    const l = e`ris-body2-regular [&+small]:ris-label3-regular relative inline-flex min-h-48 items-center justify-start border-2 bg-white py-2 pr-12 pl-12 [&+small]:mt-2 [&+small]:flex [&+small]:items-center [&+small]:gap-4 [&+small]:text-gray-900 [&[aria-invalid="true"]+small]:text-red-900`, o = e`cursor-pointer border-blue-800`, s = e`has-focus-visible:outline-4 has-focus-visible:-outline-offset-4 has-focus-visible:outline-blue-800`, i = e`hover:outline-4 hover:-outline-offset-4 hover:outline-blue-800`, a = e`cursor-not-allowed border-blue-500 text-blue-500 disabled:outline-hidden`, n = e`border-red-800 bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:active:outline-hidden aria-[invalid]:disabled:outline-hidden`, b = e`w-full`;
     return {
       class: {
-        [t]: !0,
+        [l]: !0,
         [o]: !r.disabled,
-        [s]: l.focused && !r.disabled,
+        [s]: t.focused && !r.disabled,
         [i]: !r.disabled,
         [b]: !!r.fluid,
         [a]: r.disabled,
@@ -426,11 +425,11 @@ const S = {
     class: e`hidden`
   },
   option: ({ context: r }) => {
-    const l = e`ris-body2-regular relative flex h-full min-h-48 w-full cursor-pointer border-l-4 border-transparent py-16 pr-24 pl-20 after:absolute after:right-8 after:-bottom-1 after:left-8 after:border-b after:border-gray-300 after:content-[''] last:after:border-b-0 hover:bg-gray-100`, t = e`border-l-4 border-solid border-l-blue-800 bg-gray-100`;
+    const t = e`ris-body2-regular relative flex h-full min-h-48 w-full cursor-pointer border-l-4 border-transparent py-16 pr-24 pl-20 after:absolute after:right-8 after:-bottom-1 after:left-8 after:border-b after:border-gray-300 after:content-[''] last:after:border-b-0 hover:bg-gray-100`, l = e`border-l-4 border-solid border-l-blue-800 bg-gray-100`;
     return {
       class: {
-        [l]: !0,
-        [t]: r.focused
+        [t]: !0,
+        [l]: r.focused
       }
     };
   }
@@ -480,11 +479,11 @@ const S = {
     class: e`focus-visible:outline-none`
   },
   itemContent: ({ context: r }) => {
-    const l = e`group flex h-48 items-center border-l-4 border-transparent py-8 pr-20 pl-10`, t = e`${x} not-[:hover]:outline-4`;
+    const t = e`group flex h-48 items-center border-l-4 border-transparent py-8 pr-20 pl-10`, l = e`${x} not-[:hover]:outline-4`;
     return {
       class: {
-        [l]: !0,
-        [t]: r.focused,
+        [t]: !0,
+        [l]: r.focused,
         [m]: !0,
         [p]: r.active,
         [w]: !r.active
@@ -496,11 +495,11 @@ const S = {
     class: e`mb-24 last:mb-0 focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800 [&>ul:first-of-type]:border-l-0`
   },
   nodeContent: ({ context: r }) => {
-    const l = e`group ris-label2-bold flex w-full border-l-4 border-transparent py-10 pr-20 pl-10 text-blue-800`, t = e`cursor-pointer select-none`, o = e`focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800`, s = e`border-l-blue-800 bg-blue-200 text-black`, i = e`hover:bg-blue-200`, a = e`hover:bg-blue-300`;
+    const t = e`group ris-label2-bold flex w-full border-l-4 border-transparent py-10 pr-20 pl-10 text-blue-800`, l = e`cursor-pointer select-none`, o = e`focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800`, s = e`border-l-blue-800 bg-blue-200 text-black`, i = e`hover:bg-blue-200`, a = e`hover:bg-blue-300`;
     return {
       class: {
-        [l]: !0,
         [t]: !0,
+        [l]: !0,
         [s]: r.selected,
         [i]: !r.selected,
         [a]: r.selected,
@@ -509,29 +508,29 @@ const S = {
     };
   },
   nodeToggleButton: ({ context: r }) => {
-    const l = e`h-20 w-20 justify-center border-0 bg-transparent text-gray-900 group-hover:text-black hover:text-black`, t = r.leaf ? e`hidden` : e`inline-flex`;
+    const t = e`h-20 w-20 justify-center border-0 bg-transparent text-gray-900 group-hover:text-black hover:text-black`, l = r.leaf ? e`hidden` : e`inline-flex`;
     return {
       class: {
-        [l]: !0,
-        [t]: r.leaf
+        [t]: !0,
+        [l]: r.leaf
       }
     };
   },
   nodeChildren: () => {
-    const r = e`m-0 list-none border-l border-gray-600 p-0 pl-36 [&:not(ul)]:pl-0 [&>ul:first-of-type]:border-0`, l = e`focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800`;
+    const r = e`m-0 list-none border-l border-gray-600 p-0 pl-36 [&:not(ul)]:pl-0 [&>ul:first-of-type]:border-0`, t = e`focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800`;
     return {
       class: {
         [r]: !0,
-        [l]: !0
+        [t]: !0
       }
     };
   },
   nodeLabel: ({ context: r }) => {
-    const l = e`group flex w-full flex-col items-start outline-none *:w-full *:outline-none group-hover:text-black [&>*:first-child]:group-hover:underline [&>*:last-child]:group-hover:no-underline`, t = e`text-black [&>*:last-child:is(span)]:text-gray-900`, o = e`[&>*:last-child]:group-hover:text-black`;
+    const t = e`group flex w-full flex-col items-start outline-none *:w-full *:outline-none group-hover:text-black [&>*:first-child]:group-hover:underline [&>*:last-child]:group-hover:no-underline`, l = e`text-black [&>*:last-child:is(span)]:text-gray-900`, o = e`[&>*:last-child]:group-hover:text-black`;
     return {
       class: {
-        [l]: !0,
-        [t]: r.selected,
+        [t]: !0,
+        [l]: r.selected,
         [o]: r.selected
       }
     };
@@ -614,11 +613,11 @@ const S = {
   }
 }, O = {
   root: ({ context: r }) => {
-    const l = e`ris-body2-bold h-64 border-b-4 border-b-transparent py-4 pr-24 pl-20 outline-0 -outline-offset-4 outline-blue-800 focus-visible:outline-4`, t = e`z-10 bg-[var(--p-tabs-tab-active-background)] text-black shadow-[-1px_-1px_0_0_var(--p-tabs-tab-border-color),1px_-1px_0_0_var(--p-tabs-tab-border-color)]`, o = e`cursor-pointer text-blue-800 hover:border-b-blue-800`;
+    const t = e`ris-body2-bold h-64 border-b-4 border-b-transparent py-4 pr-24 pl-20 outline-0 -outline-offset-4 outline-blue-800 focus-visible:outline-4`, l = e`z-10 bg-[var(--p-tabs-tab-active-background)] text-black shadow-[-1px_-1px_0_0_var(--p-tabs-tab-border-color),1px_-1px_0_0_var(--p-tabs-tab-border-color)]`, o = e`cursor-pointer text-blue-800 hover:border-b-blue-800`;
     return {
       class: {
-        [l]: !0,
-        [t]: r.active,
+        [t]: !0,
+        [l]: r.active,
         [o]: !r.active
       }
     };
@@ -633,11 +632,11 @@ const S = {
   }
 }, Y = {
   arrow: ({ context: r }) => {
-    const l = e`absolute h-0 w-0 border-[7px] border-solid`, t = e`-mr-[7px] border-b-0 border-t-gray-900 border-r-transparent border-l-transparent`, o = e`-mt-[7px] border-l-0 border-t-transparent border-r-gray-900 border-b-transparent`, s = e`-ml-[7px] border-t-0 border-r-transparent border-b-gray-900 border-l-transparent`, i = e`-mt-[7px] border-r-0 border-t-transparent border-b-transparent border-l-gray-900`, a = !r.top && !r.right && !r.bottom && !r.left;
+    const t = e`absolute h-0 w-0 border-[7px] border-solid`, l = e`-mr-[7px] border-b-0 border-t-gray-900 border-r-transparent border-l-transparent`, o = e`-mt-[7px] border-l-0 border-t-transparent border-r-gray-900 border-b-transparent`, s = e`-ml-[7px] border-t-0 border-r-transparent border-b-gray-900 border-l-transparent`, i = e`-mt-[7px] border-r-0 border-t-transparent border-b-transparent border-l-gray-900`, a = !r.top && !r.right && !r.bottom && !r.left;
     return {
       class: {
-        [l]: !0,
-        [t]: r.top,
+        [t]: !0,
+        [l]: r.top,
         [o]: r.right || a,
         [s]: r.bottom,
         [i]: r.left
@@ -815,8 +814,8 @@ const S = {
   inputText: B,
   menu: C,
   message: I,
-  password: T,
-  progressSpinner: F,
+  password: F,
+  progressSpinner: T,
   radioButton: E,
   textarea: j,
   toast: R,