fds-vue-core 8.2.3 → 8.3.0

package/dist/fds-vue-core.es.js

@@ -86,6 +86,8 @@ const en = {
   "FdsPhonenumber.invalidPhone": "Enter a valid phone number",
   "FdsPhonenumber.noCountryResults": "No country matches your search",
   "FdsPhonenumber.phoneNumber": "Phone number",
+  "FdsSsn.invalidSsn": "Enter a valid personal identity number",
+  "FdsSsn.label": "Personal identity number",
   "FdsSearchSelectPro.loadingMore": "Loading more...",
   "FdsSearchSelectPro.showMore": "Show more",
   "FdsSearchSelectPro.unspecified": "Unspecified",
@@ -159,6 +161,8 @@ const sv = {
   "FdsPhonenumber.invalidPhone": "Ange ett giltigt telefonnummer",
   "FdsPhonenumber.noCountryResults": "Inget land matchar sökningen",
   "FdsPhonenumber.phoneNumber": "Telefonnummer",
+  "FdsSsn.invalidSsn": "Ange ett giltigt personnummer",
+  "FdsSsn.label": "Personnummer",
   "FdsSearchSelectPro.loadingMore": "Hämtar fler...",
   "FdsSearchSelectPro.showMore": "Visa fler",
   "FdsSearchSelectPro.unspecified": "Ospecificerat",
@@ -748,8 +752,8 @@ const icons = {
       </defs>
     </svg>`
 };
-const _hoisted_1$A = ["innerHTML"];
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _hoisted_1$B = ["innerHTML"];
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "FdsIcon",
   props: {
     name: {},
@@ -782,11 +786,11 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("span", mergeProps({
         class: "flex items-center justify-center align-middle",
         style: { width: pixelSize.value, height: pixelSize.value }
-      }, rootAttrs.value, { innerHTML: svgHtml.value }), null, 16, _hoisted_1$A);
+      }, rootAttrs.value, { innerHTML: svgHtml.value }), null, 16, _hoisted_1$B);
     };
   }
 });
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "FdsButtonIcon",
   props: {
     icon: {},
@@ -830,12 +834,12 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         class: buttonClasses.value,
         onClick
       }), [
-        !__props.loading ? (openBlock(), createBlock(_sfc_main$M, {
+        !__props.loading ? (openBlock(), createBlock(_sfc_main$N, {
           key: 0,
           size: iconSize.value,
           name: __props.icon,
           "aria-hidden": "true"
-        }, null, 8, ["size", "name"])) : (openBlock(), createBlock(_sfc_main$M, {
+        }, null, 8, ["size", "name"])) : (openBlock(), createBlock(_sfc_main$N, {
           key: 1,
           size: iconSize.value,
           name: "spinner",
@@ -846,7 +850,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$z = { class: "flex items-start gap-2" };
+const _hoisted_1$A = { class: "flex items-start gap-2" };
 const _hoisted_2$q = { class: "h-7 flex items-center" };
 const _hoisted_3$l = { class: "leading-7" };
 const _hoisted_4$j = { class: "relative h-7" };
@@ -854,7 +858,7 @@ const _hoisted_5$h = {
   key: 1,
   class: "fds-block-alert-slot mb-0-last-child"
 };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "FdsBlockAlert",
   props: {
     visible: { type: Boolean, default: true },
@@ -910,9 +914,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
               key: 0,
               class: normalizeClass(["font-bold w-full justify-between items-start flex gap-2", { "mb-2": (isExpanded.value || !__props.collapsable) && unref(hasSlot) }])
             }, [
-              createElementVNode("div", _hoisted_1$z, [
+              createElementVNode("div", _hoisted_1$A, [
                 createElementVNode("div", _hoisted_2$q, [
-                  createVNode(_sfc_main$M, {
+                  createVNode(_sfc_main$N, {
                     name: "alert",
                     size: 24,
                     class: "fill-yellow-700"
@@ -921,13 +925,13 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
                 createElementVNode("span", _hoisted_3$l, toDisplayString(__props.heading), 1)
               ]),
               createElementVNode("div", _hoisted_4$j, [
-                __props.closeable ? (openBlock(), createBlock(_sfc_main$L, mergeProps({
+                __props.closeable ? (openBlock(), createBlock(_sfc_main$M, mergeProps({
                   key: 0,
                   icon: "cross",
                   size: 28,
                   onClick: handleClose
                 }, { "aria-label": closeLabel.value }, { class: ["fill-gray-900! hover:bg-gray-100 active:bg-gray-200"] }), null, 16)) : createCommentVNode("", true),
-                __props.collapsable ? (openBlock(), createBlock(_sfc_main$L, mergeProps({
+                __props.collapsable ? (openBlock(), createBlock(_sfc_main$M, mergeProps({
                   key: 1,
                   icon: "arrowDown",
                   size: 28,
@@ -950,7 +954,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$y = ["id"];
+const _hoisted_1$z = ["id"];
 const _hoisted_2$p = {
   key: 0,
   class: "flex items-start justify-between gap-4 mb-4"
@@ -958,7 +962,7 @@ const _hoisted_2$p = {
 const _hoisted_3$k = { class: "flex items-center gap-3" };
 const _hoisted_4$i = { class: "flex items-start gap-3 leading-8" };
 const _hoisted_5$g = { class: "mb-0-last-child" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "FdsBlockContent",
   props: {
     heading: { default: void 0 },
@@ -1015,11 +1019,11 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_5$g, [
           renderSlot(_ctx.$slots, "default")
         ])
-      ], 16, _hoisted_1$y);
+      ], 16, _hoisted_1$z);
     };
   }
 });
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "FdsSticker",
   props: {
     variant: { default: "blue" },
@@ -1067,7 +1071,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$x = { class: "leading-6 w-full flex justify-between gap-4" };
+const _hoisted_1$y = { class: "leading-6 w-full flex justify-between gap-4" };
 const _hoisted_2$o = {
   key: 0,
   class: "flex items-center mr-4"
@@ -1079,7 +1083,7 @@ const _hoisted_5$f = {
   class: "w-full flex mt-2"
 };
 const _hoisted_6$b = ["aria-hidden"];
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1151,12 +1155,12 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           createElementVNode("span", {
             class: normalizeClass(buttonRowClasses.value)
           }, [
-            createElementVNode("span", _hoisted_1$x, [
+            createElementVNode("span", _hoisted_1$y, [
               createElementVNode("span", {
                 class: normalizeClass(["flex items-center", { "inline-flex items-start": __props.icon }])
               }, [
                 __props.icon ? (openBlock(), createElementBlock("span", _hoisted_2$o, [
-                  createVNode(_sfc_main$M, {
+                  createVNode(_sfc_main$N, {
                     name: __props.icon,
                     size: 24,
                     class: normalizeClass(["fill-blue-500", [{ "fill-gray-500": __props.disabled }, __props.iconClass]])
@@ -1169,7 +1173,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
                 ])
               ], 2),
               createElementVNode("span", _hoisted_4$h, [
-                __props.stickerText && __props.stickerColor ? (openBlock(), createBlock(_sfc_main$I, {
+                __props.stickerText && __props.stickerColor ? (openBlock(), createBlock(_sfc_main$J, {
                   key: 0,
                   variant: __props.stickerColor
                 }, {
@@ -1178,7 +1182,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 1
                 }, 8, ["variant"])) : createCommentVNode("", true),
-                createVNode(_sfc_main$M, {
+                createVNode(_sfc_main$N, {
                   name: "arrowDown",
                   size: 24,
                   class: normalizeClass(["transition-transform duration-200 fill-blue-500 min-w-6 min-h-6", { "rotate-180": isOpen.value, "fill-gray-500": __props.disabled }])
@@ -1202,7 +1206,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$w = ["id"];
+const _hoisted_1$x = ["id"];
 const _hoisted_2$n = {
   key: 0,
   class: "flex items-start gap-4"
@@ -1227,7 +1231,7 @@ const _hoisted_13$2 = { class: "flex items-start gap-3" };
 const _hoisted_14$2 = { class: "mb-0-last-child" };
 const smallIconSize = 24;
 const largeIconSize = 48;
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "FdsBlockInfo",
   props: {
     heading: { default: void 0 },
@@ -1260,7 +1264,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         class: contentClasses.value
       }, rootAttrs.value), [
         __props.iconSize === "large" && __props.icon ? (openBlock(), createElementBlock("div", _hoisted_2$n, [
-          createVNode(_sfc_main$M, {
+          createVNode(_sfc_main$N, {
             name: __props.icon,
             size: largeIconSize,
             class: "fill-blue-500"
@@ -1285,7 +1289,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("header", _hoisted_10$4, [
               createElementVNode("div", _hoisted_11$4, [
-                __props.icon && __props.iconSize === "small" ? (openBlock(), createBlock(_sfc_main$M, {
+                __props.icon && __props.iconSize === "small" ? (openBlock(), createBlock(_sfc_main$N, {
                   key: 0,
                   name: __props.icon,
                   size: smallIconSize,
@@ -1302,16 +1306,16 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "default")
           ])
         ]))
-      ], 16, _hoisted_1$w);
+      ], 16, _hoisted_1$x);
     };
   }
 });
-const _hoisted_1$v = { class: "mb-0-last-child" };
+const _hoisted_1$w = { class: "mb-0-last-child" };
 const _hoisted_2$m = {
   key: 0,
   class: "flex items-end"
 };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1424,7 +1428,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(["flex w-full flex-1", contentClasses.value])
           }, [
-            __props.icon ? (openBlock(), createBlock(_sfc_main$M, {
+            __props.icon ? (openBlock(), createBlock(_sfc_main$N, {
               key: 0,
               name: __props.icon,
               size: 24,
@@ -1443,7 +1447,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 class: normalizeClass(slotWrapperClasses.value)
               }, [
-                createElementVNode("div", _hoisted_1$v, [
+                createElementVNode("div", _hoisted_1$w, [
                   renderSlot(_ctx.$slots, "default")
                 ]),
                 unref(hasStickerSlot) ? (openBlock(), createElementBlock("div", _hoisted_2$m, [
@@ -1452,7 +1456,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
               ], 2)
             ], 2)
           ], 2),
-          __props.variant === "link" ? (openBlock(), createBlock(_sfc_main$M, {
+          __props.variant === "link" ? (openBlock(), createBlock(_sfc_main$N, {
             key: 0,
             name: "arrowRight",
             size: 24,
@@ -1464,8 +1468,8 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$u = ["aria-label"];
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _hoisted_1$v = ["aria-label"];
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "FdsSpinner",
   props: {
     size: { default: "48px" },
@@ -1545,13 +1549,13 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           key: 0,
           class: normalizeClass(__props.labelPosition === "bottom" ? "font-bold" : "")
         }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$u);
+      ], 16, _hoisted_1$v);
     };
   }
 });
-const _hoisted_1$t = ["aria-disabled"];
+const _hoisted_1$u = ["aria-disabled"];
 const elBase$2 = "box-border appearance-none inline-flex items-center justify-center w-fit min-h-0 shadow-none p-0.5 text-base select-none m-0 rounded-md text-left align-middle no-underline transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1636,7 +1640,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           onClick
         }), {
           default: withCtx(() => [
-            __props.loading ? (openBlock(), createBlock(_sfc_main$E, {
+            __props.loading ? (openBlock(), createBlock(_sfc_main$F, {
               key: 0,
               class: "mr-2",
               size: "24px",
@@ -1646,7 +1650,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               class: normalizeClass(iconOrderClasses.value),
               "aria-hidden": "true"
             }, [
-              createVNode(_sfc_main$M, {
+              createVNode(_sfc_main$N, {
                 class: normalizeClass(iconFillClass2.value),
                 name: __props.icon,
                 size: __props.iconSize
@@ -1656,15 +1660,15 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 16, ["type", "disabled", "data-testid", "class"]))
-      ], 10, _hoisted_1$t);
+      ], 10, _hoisted_1$u);
     };
   }
 });
-const _hoisted_1$s = {
+const _hoisted_1$t = {
   key: 0,
   class: "flex items-center gap-2 h-7"
 };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "FdsButtonCopy",
   props: {
     value: { default: "" },
@@ -1726,10 +1730,10 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return isCopied.value ? (openBlock(), createElementBlock("div", _hoisted_1$s, [
-        createVNode(_sfc_main$M, { name: "bigSuccess" }),
+      return isCopied.value ? (openBlock(), createElementBlock("div", _hoisted_1$t, [
+        createVNode(_sfc_main$N, { name: "bigSuccess" }),
         createElementVNode("span", null, toDisplayString(props.copiedText), 1)
-      ])) : (openBlock(), createBlock(_sfc_main$D, {
+      ])) : (openBlock(), createBlock(_sfc_main$E, {
         key: 1,
         type: "button",
         disabled: props.disabled,
@@ -5020,8 +5024,8 @@ function useDownload() {
     isDownloading
   };
 }
-const _hoisted_1$r = ["disabled", "aria-disabled"];
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _hoisted_1$s = ["disabled", "aria-disabled"];
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "FdsButtonDownload",
   props: {
     loading: { type: Boolean, default: false },
@@ -5122,23 +5126,23 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           class: normalizeClass(iconOrderClasses.value),
           "aria-hidden": "true"
         }, [
-          createVNode(_sfc_main$M, {
+          createVNode(_sfc_main$N, {
             class: normalizeClass(iconFillClass2.value),
             name: "download",
             size: 24
           }, null, 8, ["class"])
         ], 2),
         createTextVNode(" " + toDisplayString(__props.text), 1)
-      ], 16, _hoisted_1$r);
+      ], 16, _hoisted_1$s);
     };
   }
 });
-const _hoisted_1$q = ["aria-disabled"];
+const _hoisted_1$r = ["aria-disabled"];
 const _hoisted_2$l = { key: 2 };
 const elBase$1 = "fds-button-primary box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
 const variantClasses$1 = "bg-blue-600 border border-blue-600 text-white hover:bg-blue-700";
 const iconFillClass$1 = "fill-white";
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -5221,7 +5225,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           onClick
         }), {
           default: withCtx(() => [
-            __props.loading ? (openBlock(), createBlock(_sfc_main$E, {
+            __props.loading ? (openBlock(), createBlock(_sfc_main$F, {
               key: 0,
               size: __props.size === "sm" ? "18px" : "24px",
               color: "inherit"
@@ -5230,7 +5234,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
               class: normalizeClass(iconOrderClasses.value),
               "aria-hidden": "true"
             }, [
-              createVNode(_sfc_main$M, {
+              createVNode(_sfc_main$N, {
                 class: normalizeClass(iconFillClass$1),
                 name: __props.icon,
                 size: __props.iconSize
@@ -5240,16 +5244,16 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 16, ["type", "disabled", "data-testid", "class"]))
-      ], 10, _hoisted_1$q);
+      ], 10, _hoisted_1$r);
     };
   }
 });
-const _hoisted_1$p = ["aria-disabled"];
+const _hoisted_1$q = ["aria-disabled"];
 const _hoisted_2$k = { key: 2 };
 const elBase = "fds-button-secondary box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
 const variantClasses = "bg-white border-2 border-blue-500 text-blue-600 hover:bg-blue_t-100 hover:border-blue-500 hover:text-blue-600 active:bg-blue_t-200 active:border-blue-500 active:text-blue-600";
 const iconFillClass = "fill-blue-500";
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -5333,7 +5337,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           onClick
         }), {
           default: withCtx(() => [
-            __props.loading ? (openBlock(), createBlock(_sfc_main$E, {
+            __props.loading ? (openBlock(), createBlock(_sfc_main$F, {
               key: 0,
               size: __props.size === "sm" ? "18px" : "24px",
               color: "inherit"
@@ -5342,7 +5346,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               class: normalizeClass(iconOrderClasses.value),
               "aria-hidden": "true"
             }, [
-              createVNode(_sfc_main$M, {
+              createVNode(_sfc_main$N, {
                 class: normalizeClass(iconFillClass),
                 name: __props.icon,
                 size: __props.iconSize
@@ -5352,7 +5356,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 16, ["type", "disabled", "data-testid", "class"]))
-      ], 10, _hoisted_1$p);
+      ], 10, _hoisted_1$q);
     };
   }
 });
@@ -5674,8 +5678,8 @@ function useViewportBreakpoint() {
     breakpoints
   };
 }
-const _hoisted_1$o = ["title"];
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = ["title"];
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "FdsBreakpointIndicator",
   props: {
     popoverClass: {}
@@ -5714,7 +5718,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           class: "px-2 py-1 rounded text-xs bg-white bg-opacity-20 text-black hover:bg-opacity-30 cursor-pointer",
           title: `${unref(windowWidth)}px`,
           onClick: toggleBreakpointList
-        }, toDisplayString(unref(currentBreakpoint)), 9, _hoisted_1$o),
+        }, toDisplayString(unref(currentBreakpoint)), 9, _hoisted_1$p),
         showBreakpointList.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(["absolute bottom-full left-0 mb-2 rounded-lg shadow-lg p-2 text-xs font-mono whitespace-nowrap z-10", __props.popoverClass])
@@ -5794,9 +5798,9 @@ function useDevModePoEditor() {
     setI18nKeysVisibility
   };
 }
-const _hoisted_1$n = ["for"];
+const _hoisted_1$o = ["for"];
 const _hoisted_2$j = ["value", "disabled", "required"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -5967,14 +5971,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(props.label), 1)
             ], 64)) : createCommentVNode("", true)
           ], 2)) : createCommentVNode("", true)
-        ], 16, _hoisted_1$n)
+        ], 16, _hoisted_1$o)
       ], 2);
     };
   }
 });
-const _hoisted_1$m = ["for"];
+const _hoisted_1$n = ["for"];
 const _hoisted_2$i = ["value", "checked", "disabled", "required"];
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6105,7 +6109,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(props.label), 1)
             ], 64)) : createCommentVNode("", true)
           ], 2)) : createCommentVNode("", true)
-        ], 16, _hoisted_1$m)
+        ], 16, _hoisted_1$n)
       ], 2);
     };
   }
@@ -6122,7 +6126,7 @@ function classValueToString(value) {
   }
   return String(value);
 }
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6153,7 +6157,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$l = {
+const _hoisted_1$m = {
   key: 0,
   class: "absolute bottom-full right-0 mb-3 z-60 flex min-w-54 flex-col font-normal"
 };
@@ -6169,7 +6173,7 @@ const _hoisted_5$d = {
 };
 const _hoisted_6$9 = { key: 2 };
 const OVERLAY_OPEN_KEY = "devModeOverlayOpen";
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "FdsDevModeOverlay",
   props: {
     environment: { default: null },
@@ -6236,11 +6240,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       () => checkToggles.value.length > 0 || radioToggles.value.length > 0 || buttonToggles.value.length > 0 || canToggleI18nKeys.value || showLocaleSwitcher.value
     );
     return (_ctx, _cache) => {
-      return hasContent.value ? (openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return hasContent.value ? (openBlock(), createElementBlock("div", _hoisted_1$m, [
         isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
           createElementVNode("div", _hoisted_3$h, [
             createElementVNode("div", null, [
-              unref(canToggleI18nKeys) ? (openBlock(), createBlock(_sfc_main$x, {
+              unref(canToggleI18nKeys) ? (openBlock(), createBlock(_sfc_main$y, {
                 key: 0,
                 checked: unref(showingTranslationKeys),
                 onChange: unref(setI18nKeysVisibility),
@@ -6252,7 +6256,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                 _: 1
               }, 8, ["checked", "onChange"])) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment, null, renderList(checkToggles.value, (toggle) => {
-                return openBlock(), createBlock(_sfc_main$x, {
+                return openBlock(), createBlock(_sfc_main$y, {
                   key: `${toggle.key}-${toggle.checked}`,
                   checked: toggle.checked,
                   class: "mb-0!",
@@ -6267,7 +6271,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             ]),
             radioToggles.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$f, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(radioToggles.value, (toggle) => {
-                return openBlock(), createBlock(_sfc_main$w, {
+                return openBlock(), createBlock(_sfc_main$x, {
                   key: `${toggle.key}-${toggle.checked}`,
                   name: toggle.group,
                   value: toggle.value,
@@ -6284,7 +6288,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true),
             buttonToggles.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5$d, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(buttonToggles.value, (toggle) => {
-                return openBlock(), createBlock(_sfc_main$D, {
+                return openBlock(), createBlock(_sfc_main$E, {
                   key: toggle.key,
                   size: "sm",
                   block: "",
@@ -6295,7 +6299,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true),
             showLocaleSwitcher.value ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(localeOptions.value, (localeCode) => {
-                return openBlock(), createBlock(_sfc_main$w, {
+                return openBlock(), createBlock(_sfc_main$x, {
                   key: localeCode,
                   name: "fds-dev-mode-locale",
                   value: localeCode,
@@ -6319,13 +6323,13 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value),
             class: "flex w-full cursor-pointer justify-between gap-2 px-3 py-2 active:bg-gray-100"
           }, [
-            createVNode(_sfc_main$v, { class: "mb-0!" }, {
+            createVNode(_sfc_main$w, { class: "mb-0!" }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref(t)("FdsDevMode.overlay.quickSettings")), 1)
               ]),
               _: 1
             }),
-            createVNode(_sfc_main$M, {
+            createVNode(_sfc_main$N, {
               name: isOpen.value ? "arrowUp" : "arrowDown",
               size: 20,
               class: "fill-gray-700"
@@ -6336,10 +6340,10 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = { class: "flex justify-between mb-4" };
+const _hoisted_1$l = { class: "flex justify-between mb-4" };
 const _hoisted_2$g = { class: "flex items-center gap-2" };
 const _hoisted_3$g = { class: "mb-0-last-child" };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "FdsModal",
   props: {
     open: { type: Boolean, default: false },
@@ -6568,9 +6572,9 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             createElementVNode("div", {
               class: normalizeClass(__props.resizable ? "overflow-auto flex-1 min-h-0" : "")
             }, [
-              createElementVNode("div", _hoisted_1$k, [
+              createElementVNode("div", _hoisted_1$l, [
                 createElementVNode("div", _hoisted_2$g, [
-                  iconName.value ? (openBlock(), createBlock(_sfc_main$M, {
+                  iconName.value ? (openBlock(), createBlock(_sfc_main$N, {
                     key: 0,
                     name: iconName.value,
                     size: 24,
@@ -6581,7 +6585,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(headerTitleClasses.value)
                   }, toDisplayString(__props.heading), 3)
                 ]),
-                !__props.strict ? (openBlock(), createBlock(_sfc_main$L, mergeProps({
+                !__props.strict ? (openBlock(), createBlock(_sfc_main$M, mergeProps({
                   key: 0,
                   icon: "cross",
                   size: 28,
@@ -9843,7 +9847,7 @@ try {
   globalThis.IMask = IMask;
 } catch {
 }
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -9874,15 +9878,15 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = ["for", "id"];
-const _hoisted_2$f = ["type", "required", "disabled", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "placeholder", "pattern", "searchIcon"];
-const _hoisted_3$f = { class: "whitespace-pre text-base leading-6 tabular-nums" };
+const _hoisted_1$k = ["for", "id"];
+const _hoisted_2$f = { class: "relative" };
+const _hoisted_3$f = ["type", "required", "disabled", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "placeholder", "pattern", "searchIcon"];
 const _hoisted_4$e = {
   key: 0,
   class: "text-red-700 font-bold mt-1"
 };
-const maskFieldPaddingClasses = "px-3 py-[calc(0.75rem-1px)]";
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const inputPaddingClasses = "px-3 py-[calc(0.75rem-1px)]";
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -9898,7 +9902,6 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     labelLeft: { type: Boolean, default: false },
     clearButton: { type: Boolean, default: false },
     mask: { default: void 0 },
-    displayChar: { default: void 0 },
     modelValue: {},
     value: { default: void 0 },
     type: {},
@@ -9933,7 +9936,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     "modelValue": { default: void 0, required: false },
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["input", "change", "clearInput", "update:value", "keyup", "keyup.enter", "blur"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ mergeModels(["input", "autocomplete", "clearInput", "update:value", "keyup", "keyup.enter", "blur"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     const modelValue = useModel(__props, "modelValue");
     const props = __props;
@@ -10014,86 +10017,26 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       return "pr-40";
     });
     const externalClass = computed(() => props.class ?? attrs.class);
-    const maskDisplayValue = ref("");
-    const maskPlaceholderChar = ref("");
-    const resolvedPlaceholderChar = computed(() => props.displayChar ?? props.maskOptions?.placeholderChar ?? null);
-    const useMaskPlaceholderStyle = computed(() => {
-      if (!props.mask || !resolvedPlaceholderChar.value) return false;
-      const lazy = props.maskOptions?.lazy ?? (props.displayChar ? false : true);
-      return !lazy;
-    });
-    const maskFieldWrapperClasses = computed(() => {
-      if (!useMaskPlaceholderStyle.value) return void 0;
-      return [
-        "rounded-md border border-gray-500 bg-white bg-clip-padding",
-        props.disabled && "outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent",
-        isInvalid.value ? "outline-2 -outline-offset-2 outline-red-600" : "focus-within:outline-2 focus-within:outline-blue-500 focus-within:outline-offset-0",
-        "focus-within:border-transparent"
-      ];
-    });
-    const maskOverlayClasses = computed(() => [
-      "pointer-events-none absolute inset-0 z-[3] flex items-center",
-      maskFieldPaddingClasses,
-      inputPaddingRight.value
+    const inputClasses = computed(() => [
+      "block rounded-md border border-gray-500",
+      maxlength.value ? "" : "w-full",
+      inputPaddingClasses,
+      inputPaddingRight.value,
+      "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
+      showDateIcon.value && "[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:pointer-events-none",
+      props.disabled ? "text-gray-800 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "text-gray-900 bg-white",
+      isInvalid.value && "outline-2 outline-red-600",
+      props.inputClass
     ]);
-    const maskDisplayChars = computed(() => {
-      const display = maskDisplayValue.value;
-      const placeholder = maskPlaceholderChar.value || resolvedPlaceholderChar.value;
-      if (!display || !placeholder) return [];
-      return [...display].map((char) => ({
-        char,
-        isPlaceholder: char === placeholder
-      }));
-    });
-    function maskCharStyle(isPlaceholder) {
-      if (isPlaceholder) {
-        return { color: props.disabled ? "var(--color-gray-500)" : "var(--color-gray-400)" };
-      }
-      return { color: props.disabled ? "var(--color-gray-800)" : "var(--color-gray-900)" };
-    }
-    const inputClasses = computed(() => {
-      const shared = [
-        "block rounded-md",
-        maxlength.value ? "" : "w-full",
-        inputPaddingRight.value,
-        showDateIcon.value && "[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:pointer-events-none",
-        props.inputClass
-      ];
-      if (useMaskPlaceholderStyle.value) {
-        return [
-          ...shared,
-          "relative z-[2] border-0 bg-transparent shadow-none focus:outline-none",
-          maskFieldPaddingClasses,
-          "text-base leading-6 tabular-nums",
-          props.disabled ? "cursor-not-allowed" : ""
-        ];
-      }
-      return [
-        ...shared,
-        "rounded-md border border-gray-500",
-        maskFieldPaddingClasses,
-        "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
-        props.disabled ? "text-gray-800 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "text-gray-900 bg-white",
-        isInvalid.value && "outline-2 outline-red-600"
-      ];
-    });
     const inputStyle = computed(() => {
-      const size = maxlength.value ? {
+      if (!maxlength.value) return void 0;
+      return {
         width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
         maxWidth: "100%"
-      } : {};
-      if (!useMaskPlaceholderStyle.value) {
-        return size;
-      }
-      return {
-        ...size,
-        color: "transparent",
-        WebkitTextFillColor: "transparent",
-        caretColor: props.disabled ? "#1f2937" : "#111827"
       };
     });
     const rightIconsContainerClasses = computed(() => [
-      "absolute z-10 flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end",
+      "absolute flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end",
       showClearButton.value ? "right-2" : "right-3"
     ]);
     const inputBindings = computed(() => ({
@@ -10113,7 +10056,6 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       internalValue.value = "";
       if (maskInstance) {
         maskInstance.value = "";
-        nextTick(syncMaskDisplay);
       }
       emit("clearInput");
     }
@@ -10143,57 +10085,25 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     }
     const inputRef = ref(null);
     let maskInstance = null;
-    function getMaskEmittedValue(instance) {
-      if (!instance) return "";
-      const raw = String(instance.value ?? "");
-      if (!useMaskPlaceholderStyle.value) return raw;
-      const placeholder = instance.masked?.placeholderChar ?? resolvedPlaceholderChar.value;
-      if (!placeholder) return raw;
-      return raw.split(placeholder).join("").replace(/\s+$/, "");
-    }
-    function syncMaskDisplay() {
-      if (!inputRef.value) {
-        maskDisplayValue.value = "";
-        maskPlaceholderChar.value = "";
-        return;
-      }
-      maskPlaceholderChar.value = maskInstance?.masked?.placeholderChar ?? resolvedPlaceholderChar.value ?? "";
-      maskDisplayValue.value = maskInstance?.displayValue ?? inputRef.value.value ?? maskInstance?.value ?? "";
-    }
     const createMask2 = () => {
       if (maskInstance) {
         maskInstance.destroy();
         maskInstance = null;
       }
       if (props.mask && inputRef.value) {
-        const maskConfig = {
+        maskInstance = IMask(inputRef.value, {
           mask: props.mask,
           ...props.maskOptions,
-          ...props.displayChar ? {
-            placeholderChar: props.displayChar,
-            lazy: props.maskOptions?.lazy ?? false
-          } : {}
-        };
-        maskInstance = IMask(inputRef.value, maskConfig);
+          lazy: props.maskOptions?.lazy ?? true
+        });
         if (internalValue.value) {
           maskInstance.value = internalValue.value;
         }
         maskInstance.on("accept", () => {
           if (maskInstance) {
-            internalValue.value = getMaskEmittedValue(maskInstance);
-            nextTick(syncMaskDisplay);
+            internalValue.value = maskInstance.value;
           }
         });
-        maskInstance.on("complete", () => {
-          nextTick(syncMaskDisplay);
-        });
-        nextTick(() => {
-          syncMaskDisplay();
-          nextTick(syncMaskDisplay);
-        });
-      } else {
-        maskDisplayValue.value = "";
-        maskPlaceholderChar.value = "";
       }
     };
     onMounted(() => {
@@ -10222,7 +10132,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       return props.meta ? metaId.value : void 0;
     });
     watch(
-      () => [props.mask, props.displayChar, props.maskOptions],
+      () => [props.mask, props.maskOptions],
       () => {
         nextTick(() => {
           createMask2();
@@ -10230,13 +10140,23 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       },
       { deep: true }
     );
+    function shouldSyncMaskFromModel(newValue, currentMaskedValue) {
+      if (newValue === void 0) {
+        return false;
+      }
+      if (document.activeElement !== inputRef.value) {
+        return true;
+      }
+      const newDigits = String(newValue).replace(/\D/g, "");
+      const currentDigits = String(currentMaskedValue ?? "").replace(/\D/g, "");
+      return newDigits !== currentDigits;
+    }
     watch(
       () => props.value,
       (newValue) => {
-        if (maskInstance && newValue !== void 0 && newValue !== getMaskEmittedValue(maskInstance)) {
-          if (document.activeElement !== inputRef.value) {
+        if (maskInstance && newValue !== void 0 && newValue !== maskInstance.value) {
+          if (shouldSyncMaskFromModel(newValue, maskInstance.value)) {
             maskInstance.value = newValue;
-            nextTick(syncMaskDisplay);
           }
         }
       }
@@ -10244,10 +10164,9 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     watch(
       () => modelValue.value,
       (newValue) => {
-        if (maskInstance && newValue !== void 0 && newValue !== getMaskEmittedValue(maskInstance)) {
-          if (document.activeElement !== inputRef.value) {
+        if (maskInstance && newValue !== void 0 && newValue !== maskInstance.value) {
+          if (shouldSyncMaskFromModel(newValue, maskInstance.value)) {
             maskInstance.value = newValue;
-            nextTick(syncMaskDisplay);
           }
         }
       }
@@ -10267,8 +10186,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
               for: inputId.value,
               id: labelId.value,
               class: ["block font-bold text-gray-900 cursor-pointer", { "mb-0": props.meta, "mb-1": !props.meta }]
-            }, labelAttrs.value), toDisplayString(props.label), 17, _hoisted_1$j)) : createCommentVNode("", true),
-            props.meta ? (openBlock(), createBlock(_sfc_main$s, {
+            }, labelAttrs.value), toDisplayString(props.label), 17, _hoisted_1$k)) : createCommentVNode("", true),
+            props.meta ? (openBlock(), createBlock(_sfc_main$t, {
               key: 1,
               id: metaId.value,
               class: normalizeClass({ "mb-1": !props.labelLeft })
@@ -10282,9 +10201,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass({ "flex-1": props.labelLeft })
           }, [
-            createElementVNode("div", {
-              class: normalizeClass(["relative", maskFieldWrapperClasses.value])
-            }, [
+            createElementVNode("div", _hoisted_2$f, [
               createElementVNode("input", mergeProps({
                 ref_key: "inputRef",
                 ref: inputRef,
@@ -10305,30 +10222,17 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
               }, inputBindings.value, {
                 onInput: handleInputChange,
                 onChange: handleInputChange,
-                onBlur: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("blur", $event)),
-                onKeyup: _cache[1] || (_cache[1] = (ev) => {
+                onAutocomplete: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("autocomplete", $event)),
+                onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("blur", $event)),
+                onKeyup: _cache[2] || (_cache[2] = (ev) => {
                   _ctx.$emit("keyup", ev);
                   if (ev.key === "Enter") _ctx.$emit("keyup.enter", ev);
                 })
-              }), null, 16, _hoisted_2$f),
-              useMaskPlaceholderStyle.value ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: normalizeClass(maskOverlayClasses.value),
-                "aria-hidden": "true"
-              }, [
-                createElementVNode("span", _hoisted_3$f, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(maskDisplayChars.value, (item, index) => {
-                    return openBlock(), createElementBlock("span", {
-                      key: index,
-                      style: normalizeStyle(maskCharStyle(item.isPlaceholder))
-                    }, toDisplayString(item.char), 5);
-                  }), 128))
-                ])
-              ], 2)) : createCommentVNode("", true),
+              }), null, 16, _hoisted_3$f),
               createElementVNode("div", {
                 class: normalizeClass(rightIconsContainerClasses.value)
               }, [
-                showDateIcon.value ? (openBlock(), createBlock(_sfc_main$L, {
+                showDateIcon.value ? (openBlock(), createBlock(_sfc_main$M, {
                   key: 0,
                   "aria-label": dateButtonLabel.value,
                   onClick: onDateIconClick,
@@ -10336,29 +10240,29 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                   size: 28,
                   class: "fill-blue-500"
                 }, null, 8, ["aria-label"])) : createCommentVNode("", true),
-                isInvalid.value ? (openBlock(), createBlock(_sfc_main$M, {
+                isInvalid.value ? (openBlock(), createBlock(_sfc_main$N, {
                   key: 1,
                   name: "alert",
                   class: "fill-red-700"
                 })) : createCommentVNode("", true),
-                isValid2.value ? (openBlock(), createBlock(_sfc_main$M, {
+                isValid2.value ? (openBlock(), createBlock(_sfc_main$N, {
                   key: 2,
                   name: "bigSuccess"
                 })) : createCommentVNode("", true),
-                props.searchIcon ? (openBlock(), createBlock(_sfc_main$M, {
+                props.searchIcon ? (openBlock(), createBlock(_sfc_main$N, {
                   key: 3,
                   name: "search",
                   size: 24,
                   class: "fill-blue-500"
                 })) : createCommentVNode("", true),
-                showClearButton.value ? (openBlock(), createBlock(_sfc_main$L, mergeProps({
+                showClearButton.value ? (openBlock(), createBlock(_sfc_main$M, mergeProps({
                   key: 4,
                   icon: "cross"
                 }, { "aria-label": clearButtonLabel.value }, {
                   onClick: onClear,
                   size: 30
                 }), null, 16)) : createCommentVNode("", true),
-                showPasswordToggle.value ? (openBlock(), createBlock(_sfc_main$D, {
+                showPasswordToggle.value ? (openBlock(), createBlock(_sfc_main$E, {
                   key: 5,
                   icon: showPassword.value ? "viewOff" : "viewOn",
                   text: showPassword.value ? passwordButtonHideLabel.value : passwordButtonShowLabel.value,
@@ -10366,11 +10270,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["icon", "text"])) : createCommentVNode("", true)
               ], 2),
               showTodaySuffixInField.value ? (openBlock(), createElementBlock("span", {
-                key: 1,
+                key: 0,
                 class: normalizeClass(todaySuffixClasses.value),
                 style: normalizeStyle(todaySuffixStyle.value)
               }, toDisplayString(todayLabel.value), 7)) : createCommentVNode("", true)
-            ], 2)
+            ])
           ], 2)
         ], 2),
         showInvalidMessage.value ? (openBlock(), createElementBlock("div", _hoisted_4$e, toDisplayString(props.invalidMessage), 1)) : createCommentVNode("", true)
@@ -10378,7 +10282,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "FdsTabs",
   props: {
     block: { type: Boolean, default: false },
@@ -10411,7 +10315,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -10526,7 +10430,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = { class: "space-y-6" };
+const _hoisted_1$j = { class: "space-y-6" };
 const _hoisted_2$e = {
   key: 0,
   class: "text-sm text-gray-600"
@@ -10625,7 +10529,7 @@ const _hoisted_59 = {
   class: "mt-2"
 };
 const _hoisted_60 = { class: "mt-4 flex justify-end gap-3" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "FdsDevModeStorage",
   props: {
     open: { type: Boolean, default: false },
@@ -10798,7 +10702,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       loadStorageEntries();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         open: isOpen.value,
         heading: "DevTools",
         size: "xl",
@@ -10808,31 +10712,31 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         onClose: _cache[11] || (_cache[11] = () => handleOpenChange(false))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$i, [
-            createVNode(_sfc_main$q, {
+          createElementVNode("div", _hoisted_1$j, [
+            createVNode(_sfc_main$r, {
               variant: "secondary",
               class: "flex-wrap overflow-visible! *:w-auto!"
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$p, {
+                createVNode(_sfc_main$q, {
                   label: unref(t)("FdsDevModeStorage.tabs.localStorage"),
                   active: activeTab.value === "local",
                   as: "button",
                   onClick: _cache[0] || (_cache[0] = ($event) => activeTab.value = "local")
                 }, null, 8, ["label", "active"]),
-                createVNode(_sfc_main$p, {
+                createVNode(_sfc_main$q, {
                   label: unref(t)("FdsDevModeStorage.tabs.sessionStorage"),
                   active: activeTab.value === "session",
                   as: "button",
                   onClick: _cache[1] || (_cache[1] = ($event) => activeTab.value = "session")
                 }, null, 8, ["label", "active"]),
-                createVNode(_sfc_main$p, {
+                createVNode(_sfc_main$q, {
                   label: unref(t)("FdsDevModeStorage.tabs.cookies"),
                   active: activeTab.value === "cookies",
                   as: "button",
                   onClick: _cache[2] || (_cache[2] = ($event) => activeTab.value = "cookies")
                 }, null, 8, ["label", "active"]),
-                createVNode(_sfc_main$p, {
+                createVNode(_sfc_main$q, {
                   label: unref(t)("FdsDevModeStorage.tabs.actions"),
                   active: activeTab.value === "actions",
                   as: "button",
@@ -10841,7 +10745,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            activeTab.value === "local" ? (openBlock(), createBlock(_sfc_main$G, {
+            activeTab.value === "local" ? (openBlock(), createBlock(_sfc_main$H, {
               key: 0,
               heading: unref(t)("FdsDevModeStorage.tabs.localStorage"),
               icon: "information",
@@ -10895,12 +10799,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   localEditKey.value ? (openBlock(), createElementBlock("div", _hoisted_18, [
-                    createVNode(_sfc_main$z, {
+                    createVNode(_sfc_main$A, {
                       text: unref(t)("FdsDevModeStorage.actions.delete"),
                       size: "sm",
                       onClick: deleteLocalEntry
                     }, null, 8, ["text"]),
-                    createVNode(_sfc_main$A, {
+                    createVNode(_sfc_main$B, {
                       text: unref(t)("FdsDevModeStorage.actions.save"),
                       size: "sm",
                       onClick: saveLocalEntry
@@ -10909,7 +10813,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 ])
               ]),
               _: 1
-            }, 8, ["heading"])) : activeTab.value === "session" ? (openBlock(), createBlock(_sfc_main$G, {
+            }, 8, ["heading"])) : activeTab.value === "session" ? (openBlock(), createBlock(_sfc_main$H, {
               key: 1,
               heading: unref(t)("FdsDevModeStorage.tabs.sessionStorage"),
               icon: "information",
@@ -10963,12 +10867,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   sessionEditKey.value ? (openBlock(), createElementBlock("div", _hoisted_35, [
-                    createVNode(_sfc_main$z, {
+                    createVNode(_sfc_main$A, {
                       text: unref(t)("FdsDevModeStorage.actions.delete"),
                       size: "sm",
                       onClick: deleteSessionEntry
                     }, null, 8, ["text"]),
-                    createVNode(_sfc_main$A, {
+                    createVNode(_sfc_main$B, {
                       text: unref(t)("FdsDevModeStorage.actions.save"),
                       size: "sm",
                       onClick: saveSessionEntry
@@ -10977,7 +10881,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 ])
               ]),
               _: 1
-            }, 8, ["heading"])) : activeTab.value === "cookies" ? (openBlock(), createBlock(_sfc_main$G, {
+            }, 8, ["heading"])) : activeTab.value === "cookies" ? (openBlock(), createBlock(_sfc_main$H, {
               key: 2,
               heading: unref(t)("FdsDevModeStorage.tabs.cookies"),
               icon: "information",
@@ -11031,12 +10935,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   cookieEditKey.value ? (openBlock(), createElementBlock("div", _hoisted_52, [
-                    createVNode(_sfc_main$z, {
+                    createVNode(_sfc_main$A, {
                       text: unref(t)("FdsDevModeStorage.actions.delete"),
                       size: "sm",
                       onClick: deleteCookieEntry
                     }, null, 8, ["text"]),
-                    createVNode(_sfc_main$A, {
+                    createVNode(_sfc_main$B, {
                       text: unref(t)("FdsDevModeStorage.actions.save"),
                       size: "sm",
                       onClick: saveCookieEntry
@@ -11045,7 +10949,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 ])
               ]),
               _: 1
-            }, 8, ["heading"])) : activeTab.value === "actions" ? (openBlock(), createBlock(_sfc_main$G, {
+            }, 8, ["heading"])) : activeTab.value === "actions" ? (openBlock(), createBlock(_sfc_main$H, {
               key: 3,
               heading: unref(t)("FdsDevModeStorage.tabs.actions"),
               icon: "information",
@@ -11063,14 +10967,14 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                           createElementVNode("div", _hoisted_57, toDisplayString(action.label), 1),
                           action.description ? (openBlock(), createElementBlock("div", _hoisted_58, toDisplayString(action.description), 1)) : createCommentVNode("", true)
                         ]),
-                        createVNode(_sfc_main$z, {
+                        createVNode(_sfc_main$A, {
                           text: action.label,
                           size: "sm",
                           onClick: ($event) => runAction(index, action)
                         }, null, 8, ["text", "onClick"])
                       ]),
                       action.input ? (openBlock(), createElementBlock("div", _hoisted_59, [
-                        createVNode(_sfc_main$r, {
+                        createVNode(_sfc_main$s, {
                           type: action.input.type ?? "text",
                           modelValue: getActionInputValue(index, action.input.defaultValue),
                           placeholder: action.input.placeholder,
@@ -11084,11 +10988,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["heading"])) : createCommentVNode("", true),
             createElementVNode("div", _hoisted_60, [
-              createVNode(_sfc_main$z, {
+              createVNode(_sfc_main$A, {
                 text: unref(t)("FdsDevModeStorage.actions.refresh"),
                 onClick: refreshStorageEntries
               }, null, 8, ["text"]),
-              createVNode(_sfc_main$A, {
+              createVNode(_sfc_main$B, {
                 text: unref(t)("FdsDevModeStorage.actions.close"),
                 onClick: _cache[10] || (_cache[10] = ($event) => handleOpenChange(false))
               }, null, 8, ["text"])
@@ -11100,11 +11004,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$h = { class: "relative px-2 py-1" };
+const _hoisted_1$i = { class: "relative px-2 py-1" };
 const _hoisted_2$d = { class: "flex flex-col sm:flex-row items-center gap-2 sm:gap-1" };
 const _hoisted_3$d = { class: "flex items-center gap-1" };
 const _hoisted_4$c = { class: "flex items-center gap-1" };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "FdsDevMode",
   props: /* @__PURE__ */ mergeModels({
     environment: { default: null },
@@ -11266,8 +11170,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           onMousedown: _cache[1] || (_cache[1] = //@ts-ignore
           (...args) => unref(onDragStart) && unref(onDragStart)(...args))
         }, [
-          createElementVNode("div", _hoisted_1$h, [
-            unref(isDevMode) ? (openBlock(), createBlock(_sfc_main$u, {
+          createElementVNode("div", _hoisted_1$i, [
+            unref(isDevMode) ? (openBlock(), createBlock(_sfc_main$v, {
               key: 0,
               environment: __props.environment,
               toggles: overlayToggles.value,
@@ -11277,7 +11181,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             }, null, 8, ["environment", "toggles"])) : createCommentVNode("", true),
             createElementVNode("div", _hoisted_2$d, [
               createElementVNode("div", _hoisted_3$d, [
-                createVNode(_sfc_main$y, { "popover-class": envBannerClasses.value }, null, 8, ["popover-class"]),
+                createVNode(_sfc_main$z, { "popover-class": envBannerClasses.value }, null, 8, ["popover-class"]),
                 createElementVNode("span", null, toDisplayString(unref(environmentText)), 1)
               ]),
               createElementVNode("div", _hoisted_4$c, [
@@ -11286,13 +11190,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   (...args) => unref(toggleDevMode) && unref(toggleDevMode)(...args)),
                   class: "py-1 px-2 rounded text-xs font-bold bg-white bg-opacity-20 text-black hover:bg-opacity-30 min-w-[120px] cursor-pointer"
                 }, toDisplayString(devModeButtonText.value), 1),
-                createVNode(_sfc_main$L, {
+                createVNode(_sfc_main$M, {
                   icon: "settings",
                   size: 24,
                   class: normalizeClass(envBannerFillColor.value),
                   onClick: openStorageModal
                 }, null, 8, ["class"]),
-                createVNode(_sfc_main$L, {
+                createVNode(_sfc_main$M, {
                   onClick: handleEnvBanner,
                   icon: "cross",
                   size: 24,
@@ -11302,7 +11206,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             ])
           ])
         ], 38)) : createCommentVNode("", true),
-        createVNode(_sfc_main$o, {
+        createVNode(_sfc_main$p, {
           open: isStorageModalOpen.value,
           "onUpdate:open": _cache[2] || (_cache[2] = ($event) => isStorageModalOpen.value = $event),
           customActions: __props.customActions
@@ -11311,8 +11215,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = { class: "flex justify-between gap-6 w-full" };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = { class: "flex justify-between gap-6 w-full" };
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "FdsExitModal",
   props: {
     showExitConfirmModal: {},
@@ -11327,7 +11231,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     const props = __props;
     const isOpen = computed(() => props.showExitConfirmModal.value);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         heading: props.heading,
         size: "sm",
         open: isOpen.value,
@@ -11335,13 +11239,13 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         onClose: props.cancelExit
       }, {
         "modal-footer": withCtx(() => [
-          createElementVNode("div", _hoisted_1$g, [
-            createVNode(_sfc_main$z, {
+          createElementVNode("div", _hoisted_1$h, [
+            createVNode(_sfc_main$A, {
               text: props.stayText,
               onClick: props.cancelExit,
               block: ""
             }, null, 8, ["text", "onClick"]),
-            createVNode(_sfc_main$z, {
+            createVNode(_sfc_main$A, {
               text: props.leaveText,
               onClick: props.confirmExit,
               block: ""
@@ -11376,12 +11280,12 @@ function debounce(fn, delayMs) {
   };
   return debounced;
 }
-const _hoisted_1$f = ["id"];
+const _hoisted_1$g = ["id"];
 const _hoisted_2$c = { class: "flex items-center justify-start gap-1 w-[100px]" };
 const _hoisted_3$c = { class: "flex items-center justify-center w-auto gap-2 order-0 sm:order-0" };
 const _hoisted_4$b = { class: "whitespace-nowrap" };
 const _hoisted_5$b = { class: "flex items-center justify-end gap-1 order-2 sm:order-0 w-[100px]" };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "FdsPagination",
   props: {
     current: {},
@@ -11471,11 +11375,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         id: inputId.value
       }, rootAttrs.value), [
         createElementVNode("div", _hoisted_2$c, [
-          __props.loading && loadingIndicator.value === "start" ? (openBlock(), createBlock(_sfc_main$E, {
+          __props.loading && loadingIndicator.value === "start" ? (openBlock(), createBlock(_sfc_main$F, {
             key: 0,
             size: "32px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$L, mergeProps({ key: 1 }, { "aria-disabled": __props.current === 1 }, {
+          })) : (openBlock(), createBlock(_sfc_main$M, mergeProps({ key: 1 }, { "aria-disabled": __props.current === 1 }, {
             type: "button",
             "aria-label": firstPageLabel.value,
             icon: "first",
@@ -11484,11 +11388,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             class: [{ "hidden!": __props.current === 1 }, "w-8 h-8 sm:w-12 sm:h-12"],
             onClick: _cache[0] || (_cache[0] = ($event) => handlePagination("start"))
           }), null, 16, ["aria-label", "disabled", "class"])),
-          __props.loading && loadingIndicator.value === "prev" ? (openBlock(), createBlock(_sfc_main$E, {
+          __props.loading && loadingIndicator.value === "prev" ? (openBlock(), createBlock(_sfc_main$F, {
             key: 2,
             size: "24px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$L, mergeProps({ key: 3 }, { "aria-disabled": __props.current === 1 }, {
+          })) : (openBlock(), createBlock(_sfc_main$M, mergeProps({ key: 3 }, { "aria-disabled": __props.current === 1 }, {
             type: "button",
             "aria-label": prevPageLabel.value,
             icon: "arrowLeft",
@@ -11499,14 +11403,14 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           }), null, 16, ["aria-label", "disabled", "class"]))
         ]),
         createElementVNode("div", _hoisted_3$c, [
-          __props.loading && loadingIndicator.value === "input" ? (openBlock(), createBlock(_sfc_main$E, {
+          __props.loading && loadingIndicator.value === "input" ? (openBlock(), createBlock(_sfc_main$F, {
             key: 0,
             size: "24px",
             color: "blue",
             label: loadingLabel.value,
             "label-position": "right"
           }, null, 8, ["label"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            createVNode(_sfc_main$r, {
+            createVNode(_sfc_main$s, {
               style: { "text-align": "center" },
               value: inputValue.value,
               type: "text",
@@ -11520,11 +11424,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           ], 64))
         ]),
         createElementVNode("div", _hoisted_5$b, [
-          __props.loading && loadingIndicator.value === "next" ? (openBlock(), createBlock(_sfc_main$E, {
+          __props.loading && loadingIndicator.value === "next" ? (openBlock(), createBlock(_sfc_main$F, {
             key: 0,
             size: "24px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$L, mergeProps({
+          })) : (openBlock(), createBlock(_sfc_main$M, mergeProps({
             key: 1,
             type: "button",
             "aria-label": nextPageLabel.value,
@@ -11535,11 +11439,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             class: [{ "hidden!": __props.current === __props.max }, "w-8 h-8 sm:w-12 sm:h-12"],
             onClick: _cache[2] || (_cache[2] = ($event) => handlePagination("next"))
           }), null, 16, ["aria-label", "disabled", "class"])),
-          __props.loading && loadingIndicator.value === "end" ? (openBlock(), createBlock(_sfc_main$E, {
+          __props.loading && loadingIndicator.value === "end" ? (openBlock(), createBlock(_sfc_main$F, {
             key: 2,
             size: "24px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$L, mergeProps({
+          })) : (openBlock(), createBlock(_sfc_main$M, mergeProps({
             key: 3,
             type: "button",
             "aria-label": lastPageLabel.value,
@@ -11551,11 +11455,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             onClick: _cache[3] || (_cache[3] = ($event) => handlePagination("end"))
           }), null, 16, ["aria-label", "disabled", "class"]))
         ])
-      ], 16, _hoisted_1$f);
+      ], 16, _hoisted_1$g);
     };
   }
 });
-const _hoisted_1$e = { class: "inline-flex" };
+const _hoisted_1$f = { class: "inline-flex" };
 const _hoisted_2$b = ["onKeydown"];
 const _hoisted_3$b = ["aria-label"];
 const _hoisted_4$a = { class: "mb-1 flex items-start justify-between gap-2" };
@@ -11565,7 +11469,7 @@ const _hoisted_6$7 = {
   class: "flex items-center gap-2"
 };
 const _hoisted_7$7 = { class: "mb-0! min-w-0 grow whitespace-normal wrap-break-word" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "FdsPopover",
   props: {
     open: { type: Boolean, default: false },
@@ -11673,7 +11577,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       return attrs;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createElementVNode("span", {
           class: normalizeClass(triggerClasses.value),
           style: normalizeStyle(triggerStyle.value)
@@ -11701,13 +11605,13 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         }, { ...popoverAttrs.value, popover: "auto" }), [
           __props.label ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             createElementVNode("div", _hoisted_4$a, [
-              createVNode(_sfc_main$v, { class: "mb-0! min-w-0 grow balance-text whitespace-normal" }, {
+              createVNode(_sfc_main$w, { class: "mb-0! min-w-0 grow balance-text whitespace-normal" }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(__props.label), 1)
                 ]),
                 _: 1
               }),
-              createVNode(_sfc_main$L, {
+              createVNode(_sfc_main$M, {
                 icon: "cross",
                 size: 28,
                 "aria-label": __props.closeAriaLabel,
@@ -11725,7 +11629,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(__props.body), 1)
               ])
             ]),
-            createVNode(_sfc_main$L, {
+            createVNode(_sfc_main$M, {
               icon: "cross",
               size: 28,
               "aria-label": __props.closeAriaLabel,
@@ -11810,7 +11714,7 @@ function useIsPid(value) {
     isPid
   };
 }
-const _hoisted_1$d = { class: "relative block" };
+const _hoisted_1$e = { class: "relative block" };
 const _hoisted_2$a = {
   key: 0,
   class: "relative"
@@ -11830,7 +11734,7 @@ const _hoisted_10$2 = {
   class: "block m-0 list-none p-0"
 };
 const _hoisted_11$2 = { class: "p-4" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "FdsSearchSelect",
   props: {
     items: { default: () => [] },
@@ -12220,10 +12124,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         ref: componentRef,
         class: "fds-search-select block mb-6"
       }, rootAttrs.value), [
-        createElementVNode("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_1$e, [
           !singleItemName.value.length ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
             createElementVNode("div", _hoisted_3$a, [
-              createVNode(_sfc_main$r, mergeProps({
+              createVNode(_sfc_main$s, mergeProps({
                 ref_key: "inputComponentRef",
                 ref: inputComponentRef,
                 label: __props.label,
@@ -12257,7 +12161,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(listWrapperStyle.value)
           }, [
             __props.loading ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
-              createVNode(_sfc_main$E, {
+              createVNode(_sfc_main$F, {
                 color: "blue",
                 size: "48px"
               })
@@ -12301,7 +12205,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   ], 42, _hoisted_7$6);
                 }), 128))
               ], 32),
-              __props.page !== void 0 && totalPages.value !== null && totalPages.value > 1 ? (openBlock(), createBlock(_sfc_main$l, {
+              __props.page !== void 0 && totalPages.value !== null && totalPages.value > 1 ? (openBlock(), createBlock(_sfc_main$m, {
                 key: 2,
                 current: __props.page,
                 max: totalPages.value,
@@ -12649,7 +12553,7 @@ const useSearchSelectProItems = ({
     syncSelectedItemsWithItems
   };
 };
-const _hoisted_1$c = { class: "relative block" };
+const _hoisted_1$d = { class: "relative block" };
 const _hoisted_2$9 = { class: "relative" };
 const _hoisted_3$9 = { class: "relative" };
 const _hoisted_4$8 = { class: "flex items-center gap-2" };
@@ -12669,7 +12573,7 @@ const _hoisted_12 = {
 };
 const _hoisted_13 = { class: "p-3 flex items-center gap-2" };
 const _hoisted_14 = { key: 0 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "FdsSearchSelectPro",
   props: {
     items: { default: () => [] },
@@ -13329,10 +13233,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         ref: componentRef,
         class: "fds-search-select block mb-6"
       }, rootAttrs.value), [
-        createElementVNode("div", _hoisted_1$c, [
+        createElementVNode("div", _hoisted_1$d, [
           createElementVNode("div", _hoisted_2$9, [
             createElementVNode("div", _hoisted_3$9, [
-              createVNode(_sfc_main$r, mergeProps({
+              createVNode(_sfc_main$s, mergeProps({
                 ref_key: "inputComponentRef",
                 ref: inputComponentRef,
                 label: __props.label,
@@ -13368,19 +13272,19 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 class: normalizeClass([headerClasses.value, "flex items-center justify-between gap-3 min-h-[53px]"])
               }, [
                 createElementVNode("div", _hoisted_4$8, [
-                  createVNode(_sfc_main$s, null, {
+                  createVNode(_sfc_main$t, null, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(searchTerm.value && searchTerm.value.length ? `${totalMatchingItems.value} ${__props.searchContext.linkWord} ${totalCount.value} ${__props.searchContext.context}` : `${totalCount.value} ${__props.searchContext.context}`), 1)
                     ]),
                     _: 1
                   }),
-                  isSearching.value ? (openBlock(), createBlock(_sfc_main$E, {
+                  isSearching.value ? (openBlock(), createBlock(_sfc_main$F, {
                     key: 0,
                     color: "blue",
                     size: "20px"
                   })) : createCommentVNode("", true)
                 ]),
-                __props.multiple && __props.showSelectedToggle && selectedItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$x, {
+                __props.multiple && __props.showSelectedToggle && selectedItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$y, {
                   key: 0,
                   label: `${__props.selectedToggleLabel} (${selectedItems.value.length})`,
                   checked: showSelectedOnly.value,
@@ -13415,7 +13319,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                       class: normalizeClass([labelClasses.value, listItemClasses.value]),
                       style: normalizeStyle(unref(optionPaddingStyle)(item))
                     }, [
-                      __props.multiple ? (openBlock(), createBlock(_sfc_main$x, {
+                      __props.multiple ? (openBlock(), createBlock(_sfc_main$y, {
                         key: 0,
                         id: `search-select-radio-${index}`,
                         name: `search-select-checkbox-group-${inputId}`,
@@ -13432,7 +13336,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                           }, null, 8, _hoisted_8$3)
                         ]),
                         _: 2
-                      }, 1032, ["id", "name", "checked", "onChange"])) : (openBlock(), createBlock(_sfc_main$w, {
+                      }, 1032, ["id", "name", "checked", "onChange"])) : (openBlock(), createBlock(_sfc_main$x, {
                         key: 1,
                         id: `search-select-radio-${index}`,
                         name: "search-select-radio-group",
@@ -13467,7 +13371,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                       _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => !__props.loadingMore && handleLoadMore(), ["prevent"]), ["space"]))
                     ]
                   }, [
-                    createVNode(_sfc_main$L, {
+                    createVNode(_sfc_main$M, {
                       icon: "sync",
                       loading: __props.loadingMore,
                       "aria-label": __props.loadingMore ? resolvedLoadingMoreLabel.value : resolvedLoadMoreLabel.value,
@@ -13481,7 +13385,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ], 64)) : (openBlock(), createElementBlock("ul", _hoisted_12, [
               createElementVNode("li", _hoisted_13, [
                 !isSearching.value ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(__props.noResultPrompt), 1)) : createCommentVNode("", true),
-                isSearching.value ? (openBlock(), createBlock(_sfc_main$E, {
+                isSearching.value ? (openBlock(), createBlock(_sfc_main$F, {
                   key: 1,
                   color: "blue",
                   size: "20px"
@@ -13994,7 +13898,7 @@ const useTreeState = (options = {}) => {
     isEmptySearchResult
   };
 };
-const _hoisted_1$b = { class: "flex items-start" };
+const _hoisted_1$c = { class: "flex items-start" };
 const _hoisted_2$8 = { class: "flex-1 flex" };
 const _hoisted_3$8 = ["innerHTML"];
 const _hoisted_4$7 = { key: 1 };
@@ -14008,7 +13912,7 @@ const _hoisted_8$2 = ["onClick"];
 const _hoisted_9$1 = { key: 0 };
 const popoverWidth = 327;
 const popoverHeight = 80;
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "TreeNode"
   },
@@ -14226,8 +14130,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(indent.value),
           class: normalizeClass("pt-2 pb-2")
         }, [
-          createElementVNode("div", _hoisted_1$b, [
-            hasChildrenNodes.value ? (openBlock(), createBlock(_sfc_main$L, mergeProps({
+          createElementVNode("div", _hoisted_1$c, [
+            hasChildrenNodes.value ? (openBlock(), createBlock(_sfc_main$M, mergeProps({
               key: 0,
               onClick: _cache[0] || (_cache[0] = ($event) => unref(treeState)?.toggleExpandNode(props.nodeId))
             }, { "aria-label": props.title ? childrenToggleAriaLabel(props.title) : void 0 }, {
@@ -14240,7 +14144,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               style: normalizeStyle({ minWidth: `${__props.indentation}px` })
             }, null, 4)) : createCommentVNode("", true),
             createElementVNode("div", _hoisted_2$8, [
-              createVNode(_sfc_main$x, {
+              createVNode(_sfc_main$y, {
                 id: `checkbox-${props.nodeId}`,
                 checked: nodeIsSelected.value,
                 indeterminate: nodeIsIndeterminate.value,
@@ -14259,7 +14163,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               }, 8, ["id", "checked", "indeterminate"])
             ]),
             shouldShowPopoverActions.value ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
-              createVNode(_sfc_main$L, mergeProps({
+              createVNode(_sfc_main$M, mergeProps({
                 ref_key: "triggerRef",
                 ref: triggerRef,
                 icon: "more",
@@ -14307,7 +14211,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                             },
                             class: "cursor-pointer"
                           }, [
-                            createVNode(_sfc_main$w, {
+                            createVNode(_sfc_main$x, {
                               modelValue: selectedOption.value,
                               "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedOption.value = $event),
                               id: `tree-popover-${props.nodeId}-${option.value}`,
@@ -14319,7 +14223,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                           ], 8, _hoisted_8$2);
                         }), 64))
                       ]),
-                      createVNode(_sfc_main$L, mergeProps({
+                      createVNode(_sfc_main$M, mergeProps({
                         icon: "cross",
                         id: "tree-popover-close-button",
                         size: 24,
@@ -14366,7 +14270,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = { key: 0 };
+const _hoisted_1$b = { key: 0 };
 const _hoisted_2$7 = {
   key: 0,
   class: "text-xl"
@@ -14375,7 +14279,7 @@ const _hoisted_3$7 = {
   key: 1,
   class: "text-xl"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "FdsTreeView",
   props: {
     nodeExpandIcon: {},
@@ -14469,7 +14373,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           ref: searchContainerRef,
           class: "pb-4"
         }, [
-          createVNode(_sfc_main$r, {
+          createVNode(_sfc_main$s, {
             value: unref(treeState)?.searchTerm?.value ?? "",
             onInput: _cache[0] || (_cache[0] = ($event) => unref(treeState)?.setSearchTerm($event.target.value)),
             class: "w-full",
@@ -14482,11 +14386,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             ])]),
             _: 1
           }, 8, ["value", "label"]),
-          props.searchCountTemplate || props.searchCountTemplateUnfiltered ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
+          props.searchCountTemplate || props.searchCountTemplateUnfiltered ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
             props.searchCountTemplate && unref(treeState)?.searchTerm?.value && String(unref(treeState)?.searchTerm?.value || "").trim().length >= (unref(treeState)?.triggerLength ?? 1) ? (openBlock(), createElementBlock("h2", _hoisted_2$7, toDisplayString(props.searchCountTemplate.replace("[[filteredNodes]]", unref(treeState)?.filteredMatchCount.value.toString()).replace("[[totalNodes]]", totalNodeCount.value.toString())), 1)) : (openBlock(), createElementBlock("h2", _hoisted_3$7, toDisplayString(props.searchCountTemplateUnfiltered?.replace("[[totalNodes]]", totalNodeCount.value.toString()).replace("[[totalNodes]]", totalNodeCount.value.toString())), 1))
           ])) : createCommentVNode("", true)
         ], 512)) : createCommentVNode("", true),
-        unref(treeState)?.isEmptySearchResult?.value ? (openBlock(), createBlock(_sfc_main$J, {
+        unref(treeState)?.isEmptySearchResult?.value ? (openBlock(), createBlock(_sfc_main$K, {
           key: 1,
           class: "mt-4"
         }, {
@@ -14494,7 +14398,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             createTextVNode(toDisplayString(props.searchResultNoMatchesTitle), 1)
           ]),
           default: withCtx(() => [
-            createVNode(_sfc_main$s, null, {
+            createVNode(_sfc_main$t, null, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(props.searchResultNoMatchesBody), 1)
               ]),
@@ -14506,7 +14410,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(["rounded-md", { "overflow-x-auto bg-white-solid": props.horizontalScroll }])
         }, [
-          props.data && !unref(treeState)?.isEmptySearchResult?.value ? (openBlock(), createBlock(_sfc_main$h, {
+          props.data && !unref(treeState)?.isEmptySearchResult?.value ? (openBlock(), createBlock(_sfc_main$i, {
             key: 0,
             style: { container: "bg-white-solid px-3 py-2" },
             nodes: props.data.children || [],
@@ -14537,8 +14441,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = { key: 1 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = { key: 1 };
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "FdsTruncatedText",
   props: {
     open: { type: Boolean, default: false },
@@ -14586,7 +14490,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", mergeProps({ class: "block mb-4" }, rootAttrs.value), [
         hasContent.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("span", null, toDisplayString(truncatedText.value), 1),
-          isTruncated.value ? (openBlock(), createBlock(_sfc_main$D, {
+          isTruncated.value ? (openBlock(), createBlock(_sfc_main$E, {
             key: 0,
             icon: isOpen.value ? "arrowUp" : "arrowDown",
             iconPos: "right",
@@ -14594,7 +14498,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             onClick: toggleComponent,
             class: "inline! ml-2"
           }, null, 8, ["icon", "text"])) : createCommentVNode("", true)
-        ], 64)) : (openBlock(), createElementBlock("div", _hoisted_1$9, [
+        ], 64)) : (openBlock(), createElementBlock("div", _hoisted_1$a, [
           renderSlot(_ctx.$slots, "default")
         ]))
       ], 16);
@@ -16177,8 +16081,8 @@ const checkIfDateIsBeforeToday = (date) => {
   return isAfter(startOfToday, startOfDate);
 };
 const checkIfDateIsEnabled = (date, enabledDates) => enabledDates.some((enabledDate) => isSameDay(enabledDate, date));
-const _hoisted_1$8 = ["disabled", "aria-label"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = ["disabled", "aria-label"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "WeekDay",
   props: {
     date: {},
@@ -16241,23 +16145,23 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         createElementVNode("span", {
           class: normalizeClass(weekdayLabelClasses.value)
         }, [
-          __props.isToday ? (openBlock(), createBlock(_sfc_main$s, { key: 0 }, {
+          __props.isToday ? (openBlock(), createBlock(_sfc_main$t, { key: 0 }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref(t)("FdsWeekCalendar.today")), 1)
             ]),
             _: 1
-          })) : (openBlock(), createBlock(_sfc_main$s, { key: 1 }, {
+          })) : (openBlock(), createBlock(_sfc_main$t, { key: 1 }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(weekdayLabel.value), 1)
             ]),
             _: 1
           }))
         ], 2)
-      ], 10, _hoisted_1$8);
+      ], 10, _hoisted_1$9);
     };
   }
 });
-const _hoisted_1$7 = { class: "mb-6" };
+const _hoisted_1$8 = { class: "mb-6" };
 const _hoisted_2$6 = { class: "max-w-[487px]" };
 const _hoisted_3$6 = { class: "mb-3 flex w-full flex-row items-center" };
 const _hoisted_4$6 = { class: "m-0 font-bold text-gray-800" };
@@ -16268,7 +16172,7 @@ const _hoisted_7$3 = {
   class: "mt-6 flex w-full flex-row items-center gap-2"
 };
 const _hoisted_8$1 = { class: "m-0 font-bold text-blue-700" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "FdsWeekCalendar",
   props: {
     loading: { default: void 0 },
@@ -16401,18 +16305,18 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const isWeekDayDisabled = (weekDay) => checkIfDateIsBeforeToday(weekDay) || !checkIfDateIsEnabled(weekDay, props.enabledDates);
     const isTodayDate = (weekDay) => isSameDay(weekDay, /* @__PURE__ */ new Date());
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("section", _hoisted_1$7, [
+      return openBlock(), createElementBlock("section", _hoisted_1$8, [
         createElementVNode("div", _hoisted_2$6, [
           createElementVNode("div", _hoisted_3$6, [
             createElementVNode("p", _hoisted_4$6, toDisplayString(weekText.value), 1),
             createElementVNode("div", _hoisted_5$6, [
-              createVNode(_sfc_main$L, {
+              createVNode(_sfc_main$M, {
                 icon: "arrowLeft",
                 disabled: disableLastWeekInteraction.value,
                 "aria-label": unref(t)("FdsWeekCalendar.previousWeek"),
                 onClick: decrementWeek
               }, null, 8, ["disabled", "aria-label"]),
-              createVNode(_sfc_main$L, {
+              createVNode(_sfc_main$M, {
                 icon: "arrowRight",
                 disabled: disableNextWeekInteraction.value,
                 "aria-label": unref(t)("FdsWeekCalendar.nextWeek"),
@@ -16433,7 +16337,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   class: "flex flex-row flex-nowrap items-center justify-start gap-x-px"
                 }, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(visibleWeekDays.value, (weekDay, _index) => {
-                    return openBlock(), createBlock(_sfc_main$e, {
+                    return openBlock(), createBlock(_sfc_main$f, {
                       key: `current-${weekDay.toISOString()}-${_index}`,
                       date: weekDay,
                       disabled: isWeekDayDisabled(weekDay),
@@ -16448,7 +16352,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             }, 8, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
           ]),
           __props.loading?.loading ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
-            createVNode(_sfc_main$E),
+            createVNode(_sfc_main$F),
             createElementVNode("p", _hoisted_8$1, toDisplayString(__props.loading.label), 1)
           ])) : createCommentVNode("", true)
         ])
@@ -16456,7 +16360,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -16502,7 +16406,7 @@ const hasStepLabelOverlap = (labels, minGapBeforeHidePx = STEP_LABEL_MIN_GAP_BEF
   }
   return false;
 };
-const _hoisted_1$6 = { class: "mb-6" };
+const _hoisted_1$7 = { class: "mb-6" };
 const _hoisted_2$5 = {
   key: 0,
   class: "mb-0"
@@ -16515,7 +16419,7 @@ const _hoisted_4$5 = { class: "h-[2px] absolute top-[22px] left-[50%] bg-white-s
 const _hoisted_5$5 = { class: "flex justify-between list-none mb-8 p-0" };
 const _hoisted_6$2 = ["onClick", "disabled"];
 const _hoisted_7$2 = { key: 0 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "FdsWizard",
   props: {
     routes: {},
@@ -16871,12 +16775,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         createElementVNode("nav", {
           class: normalizeClass([__props.wizardClass, "mx-auto"])
         }, [
-          createElementVNode("header", _hoisted_1$6, [
+          createElementVNode("header", _hoisted_1$7, [
             createElementVNode("h1", {
               ref: "mainHeader",
               tabindex: "-1"
             }, toDisplayString(mainHeading.value), 513),
-            mainLead.value || subCategories.value.length > 0 ? (openBlock(), createBlock(_sfc_main$c, { key: 0 }, {
+            mainLead.value || subCategories.value.length > 0 ? (openBlock(), createBlock(_sfc_main$d, { key: 0 }, {
               default: withCtx(() => [
                 mainLead.value ? (openBlock(), createElementBlock("p", _hoisted_2$5, toDisplayString(mainLead.value), 1)) : createCommentVNode("", true),
                 subCategories.value.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_3$5, [
@@ -16885,7 +16789,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       key: subCat.id,
                       class: "list-inside list-disc mb-2"
                     }, [
-                      createVNode(_sfc_main$c, { class: "inline!" }, {
+                      createVNode(_sfc_main$d, { class: "inline!" }, {
                         default: withCtx(() => [
                           createTextVNode(toDisplayString(subCat.name), 1)
                         ]),
@@ -16929,7 +16833,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       createElementVNode("span", {
                         class: normalizeClass(["relative mb-6 flex flex-col items-center text-blue-600 font-bold justify-center transition-all duration-200 ease-in-out rounded-full w-[44px] h-[44px] bg-white-solid", setStepClasses(entry.index)])
                       }, [
-                        entry.index >= internalCompletedTo.value + 1 ? (openBlock(), createElementBlock("span", _hoisted_7$2, toDisplayString(entry.index + 1), 1)) : (openBlock(), createBlock(_sfc_main$M, {
+                        entry.index >= internalCompletedTo.value + 1 ? (openBlock(), createElementBlock("span", _hoisted_7$2, toDisplayString(entry.index + 1), 1)) : (openBlock(), createBlock(_sfc_main$N, {
                           key: 1,
                           name: "checkmark",
                           size: 24
@@ -18613,6 +18517,11 @@ function parsePhoneNumber$1() {
 function getCountries$1(metadata2) {
   return new Metadata(metadata2).getCountries();
 }
+function getExampleNumber$1(country, examples2, metadata2) {
+  if (examples2[country]) {
+    return new PhoneNumber$1(country, examples2[country], metadata2);
+  }
+}
 class PhoneNumber2 extends PhoneNumber$1 {
   constructor(number) {
     super(number, metadata);
@@ -18627,6 +18536,9 @@ function getCountries() {
 function getCountryCallingCode() {
   return withMetadataArgument(getCountryCallingCode$1, arguments);
 }
+function getExampleNumber() {
+  return withMetadataArgument(getExampleNumber$1, arguments);
+}
 function resolveDisplayLocale(locale) {
   const trimmed = locale.trim();
   if (!trimmed) {
@@ -18700,7 +18612,91 @@ function filterCountryOptions(options, query) {
     return option.label.toLowerCase().includes(normalizedQuery) || option.countryName.toLowerCase().includes(normalizedQuery) || option.value.toLowerCase().includes(normalizedQuery) || dialCode.includes(normalizedQuery) || `+${dialCode}`.includes(normalizedQuery);
   });
 }
-const _hoisted_1$5 = { class: "relative w-full" };
+const examples = { "AC": "40123", "AD": "312345", "AE": "501234567", "AF": "701234567", "AG": "2684641234", "AI": "2642351234", "AL": "672123456", "AM": "77123456", "AO": "923123456", "AR": "91123456789", "AS": "6847331234", "AT": "664123456", "AU": "412345678", "AW": "5601234", "AX": "412345678", "AZ": "401234567", "BA": "61123456", "BB": "2462501234", "BD": "1812345678", "BE": "450001234", "BF": "70123456", "BG": "43012345", "BH": "36001234", "BI": "79561234", "BJ": "0195123456", "BL": "690001234", "BM": "4413701234", "BN": "7123456", "BO": "71234567", "BQ": "3181234", "BR": "11961234567", "BS": "2423591234", "BT": "17123456", "BW": "71123456", "BY": "294911911", "BZ": "6221234", "CA": "5062345678", "CC": "412345678", "CD": "991234567", "CF": "70012345", "CG": "061234567", "CH": "781234567", "CI": "0123456789", "CK": "71234", "CL": "221234567", "CM": "671234567", "CN": "13123456789", "CO": "3211234567", "CR": "83123456", "CU": "51234567", "CV": "9911234", "CW": "95181234", "CX": "412345678", "CY": "96123456", "CZ": "601123456", "DE": "15123456789", "DJ": "77831001", "DK": "34412345", "DM": "7672251234", "DO": "8092345678", "DZ": "551234567", "EC": "991234567", "EE": "51234567", "EG": "1001234567", "EH": "650123456", "ER": "7123456", "ES": "612345678", "ET": "911234567", "FI": "412345678", "FJ": "7012345", "FK": "51234", "FM": "3501234", "FO": "211234", "FR": "612345678", "GA": "06031234", "GB": "7400123456", "GD": "4734031234", "GE": "555123456", "GF": "694201234", "GG": "7781123456", "GH": "231234567", "GI": "57123456", "GL": "221234", "GM": "3012345", "GN": "601123456", "GP": "690001234", "GQ": "222123456", "GR": "6912345678", "GT": "51234567", "GU": "6713001234", "GW": "955012345", "GY": "6091234", "HK": "51234567", "HN": "91234567", "HR": "921234567", "HT": "34101234", "HU": "201234567", "ID": "812345678", "IE": "850123456", "IL": "502345678", "IM": "7924123456", "IN": "8123456789", "IO": "3801234", "IQ": "7912345678", "IR": "9123456789", "IS": "6111234", "IT": "3123456789", "JE": "7797712345", "JM": "8762101234", "JO": "790123456", "JP": "9012345678", "KE": "712123456", "KG": "700123456", "KH": "91234567", "KI": "72001234", "KM": "3212345", "KN": "8697652917", "KP": "1921234567", "KR": "1020000000", "KW": "50012345", "KY": "3453231234", "KZ": "7710009998", "LA": "2023123456", "LB": "71123456", "LC": "7582845678", "LI": "660234567", "LK": "712345678", "LR": "770123456", "LS": "50123456", "LT": "61234567", "LU": "628123456", "LV": "21234567", "LY": "912345678", "MA": "650123456", "MC": "612345678", "MD": "62112345", "ME": "60123456", "MF": "690001234", "MG": "321234567", "MH": "2351234", "MK": "72345678", "ML": "65012345", "MM": "92123456", "MN": "88123456", "MO": "66123456", "MP": "6702345678", "MQ": "696201234", "MR": "22123456", "MS": "6644923456", "MT": "96961234", "MU": "52512345", "MV": "7712345", "MW": "991234567", "MX": "2221234567", "MY": "123456789", "MZ": "821234567", "NA": "811234567", "NC": "751234", "NE": "93123456", "NF": "381234", "NG": "8021234567", "NI": "81234567", "NL": "612345678", "NO": "40612345", "NP": "9841234567", "NR": "5551234", "NU": "8884012", "NZ": "211234567", "OM": "92123456", "PA": "61234567", "PE": "912345678", "PF": "87123456", "PG": "70123456", "PH": "9051234567", "PK": "3012345678", "PL": "512345678", "PM": "551234", "PR": "7872345678", "PS": "599123456", "PT": "912345678", "PW": "6201234", "PY": "961456789", "QA": "33123456", "RE": "692123456", "RO": "712034567", "RS": "601234567", "RU": "9123456789", "RW": "720123456", "SA": "512345678", "SB": "7421234", "SC": "2510123", "SD": "911231234", "SE": "701234567", "SG": "81234567", "SH": "51234", "SI": "31234567", "SJ": "41234567", "SK": "912123456", "SL": "25123456", "SM": "66661212", "SN": "701234567", "SO": "71123456", "SR": "7412345", "SS": "977123456", "ST": "9812345", "SV": "70123456", "SX": "7215205678", "SY": "944567890", "SZ": "76123456", "TA": "8999", "TC": "6492311234", "TD": "63012345", "TG": "90112345", "TH": "812345678", "TJ": "917123456", "TK": "7290", "TL": "77212345", "TM": "66123456", "TN": "20123456", "TO": "7715123", "TR": "5012345678", "TT": "8682911234", "TV": "901234", "TW": "912345678", "TZ": "621234567", "UA": "501234567", "UG": "712345678", "US": "2015550123", "UY": "94231234", "UZ": "912345678", "VA": "3123456789", "VC": "7844301234", "VE": "4121234567", "VG": "2843001234", "VI": "3406421234", "VN": "912345678", "VU": "5912345", "WF": "821234", "WS": "7212345", "XK": "43201234", "YE": "712345678", "YT": "639012345", "ZA": "711234567", "ZM": "955123456", "ZW": "712345678" };
+const maskCache = /* @__PURE__ */ new Map();
+const getPhoneMaskForCountry = (countryIso2) => {
+  const country = countryIso2.trim().toUpperCase();
+  const cached = maskCache.get(country);
+  if (cached) {
+    return cached;
+  }
+  const example = getExampleNumber(country, examples);
+  if (!example) {
+    return void 0;
+  }
+  const groups = example.formatNational().split(/\D+/).filter(Boolean).map((part) => part.length);
+  const mask = groups.map((size) => "0".repeat(size)).join(" ");
+  maskCache.set(country, mask);
+  return mask;
+};
+const nationalDigitsForMask = (parsed) => parsed.formatNational().replace(/\D/g, "");
+const tryParseForCountry = (candidate, country) => {
+  const parsed = parsePhoneNumber(candidate, country) ?? parsePhoneNumber(candidate);
+  if (!parsed?.isValid() || parsed.country !== country) {
+    return void 0;
+  }
+  return parsed;
+};
+const shouldNormalizePhoneInput = (value, countryIso2) => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return false;
+  }
+  if (trimmed.includes("+") || trimmed.startsWith("00")) {
+    return true;
+  }
+  const digits = trimmed.replace(/\D/g, "");
+  const mask = getPhoneMaskForCountry(countryIso2);
+  if (!mask) {
+    return false;
+  }
+  const maxDigits = (mask.match(/0/g) ?? []).length;
+  if (digits.length > maxDigits) {
+    return true;
+  }
+  try {
+    const callingCode = getCountryCallingCode(countryIso2);
+    if (digits.startsWith(callingCode) && digits.length > maxDigits - 1) {
+      return true;
+    }
+  } catch {
+    return false;
+  }
+  return false;
+};
+const normalizeNationalPhoneInput = (value, countryIso2) => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  const country = countryIso2.trim().toUpperCase();
+  const digits = trimmed.replace(/\D/g, "");
+  const candidates = /* @__PURE__ */ new Set([trimmed]);
+  if (digits) {
+    candidates.add(digits);
+    candidates.add(`+${digits}`);
+  }
+  for (const candidate of candidates) {
+    const parsed = tryParseForCountry(candidate, country);
+    if (parsed) {
+      return nationalDigitsForMask(parsed);
+    }
+  }
+  try {
+    const callingCode = getCountryCallingCode(country);
+    if (digits.startsWith(callingCode) && digits.length > callingCode.length) {
+      const withoutCode = digits.slice(callingCode.length);
+      const parsed = tryParseForCountry(withoutCode, country) ?? tryParseForCountry(`0${withoutCode}`, country);
+      if (parsed) {
+        return nationalDigitsForMask(parsed);
+      }
+    }
+  } catch {
+    return trimmed;
+  }
+  return trimmed;
+};
+const _hoisted_1$6 = { class: "relative w-full" };
 const _hoisted_2$4 = { class: "absolute left-3 top-1/2 -translate-y-1/2 text-xl leading-none" };
 const _hoisted_3$4 = ["aria-expanded", "aria-label", "aria-controls", "aria-activedescendant", "value", "disabled"];
 const _hoisted_4$4 = ["disabled"];
@@ -18714,7 +18710,7 @@ const _hoisted_9 = {
 };
 const _hoisted_10 = { class: "text-gray-600" };
 const _hoisted_11 = { "aria-hidden": "true" };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "FdsPhonenumberCountryPicker",
   props: /* @__PURE__ */ mergeModels({
     items: {},
@@ -18987,7 +18983,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         ref: rootRef,
         class: normalizeClass(["relative w-32", props.class])
       }, [
-        createElementVNode("div", _hoisted_1$5, [
+        createElementVNode("div", _hoisted_1$6, [
           !dropdownOpen.value ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: normalizeClass(dialPreviewClasses.value),
@@ -19025,7 +19021,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             "aria-hidden": "true",
             onMousedown: withModifiers(onArrowPointerDown, ["prevent"])
           }, [
-            createVNode(_sfc_main$M, {
+            createVNode(_sfc_main$N, {
               name: "arrowDown",
               size: 24,
               class: normalizeClass(arrowClasses.value)
@@ -19067,7 +19063,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   createElementVNode("span", _hoisted_10, "(" + toDisplayString(unref(t)("common.plus")) + toDisplayString(option.countryCode) + ")", 1)
                 ]),
                 createElementVNode("span", _hoisted_11, [
-                  option.value === country.value ? (openBlock(), createBlock(_sfc_main$M, {
+                  option.value === country.value ? (openBlock(), createBlock(_sfc_main$N, {
                     key: 0,
                     name: "check",
                     size: 24,
@@ -19082,7 +19078,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const INVALID_RESULT = {
+const INVALID_RESULT$1 = {
   isValid: false,
   phoneNumber: null,
   countryIso2: null,
@@ -19125,12 +19121,12 @@ function runPhoneValidation(value, countryIso2) {
       return toValidationResult(parsed);
     }
   }
-  return INVALID_RESULT;
+  return INVALID_RESULT$1;
 }
 function validatePhoneNumber(nationalNumber, countryIso2) {
   const trimmed = nationalNumber.trim();
   if (!trimmed) {
-    return INVALID_RESULT;
+    return INVALID_RESULT$1;
   }
   return runPhoneValidation(trimmed, countryIso2);
 }
@@ -19140,7 +19136,7 @@ function getPhoneValidationState(nationalNumber, countryIso2) {
   }
   return validatePhoneNumber(nationalNumber, countryIso2).isValid;
 }
-const _hoisted_1$4 = { class: "w-full mb-6" };
+const _hoisted_1$5 = { class: "w-full mb-6" };
 const _hoisted_2$3 = {
   key: 1,
   class: "font-thin mb-1"
@@ -19154,7 +19150,7 @@ const _hoisted_5$3 = {
   key: 3,
   class: "text-red-700 font-bold mt-1"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -19184,12 +19180,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     autocomplete: { default: "tel" },
     required: { type: Boolean, default: false },
     placeholder: { default: void 0 },
-    maxlength: { default: void 0 },
-    minlength: { default: void 0 },
     name: { default: void 0 },
     autofocus: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    pattern: { default: void 0 }
+    readonly: { type: Boolean, default: false }
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {},
@@ -19198,7 +19191,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels(["update:modelValue", "update:country", "update:e164", "valid", "noCountryResults", "blur"], ["update:modelValue", "update:country"]),
   setup(__props, { emit: __emit }) {
-    const [nationalNumber, modelModifiers] = useModel(__props, "modelValue");
+    const [nationalNumber] = useModel(__props, "modelValue");
     const country = useModel(__props, "country");
     const attrs = useAttrs();
     const props = __props;
@@ -19217,12 +19210,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       autocomplete: props.autocomplete,
       required: props.required,
       placeholder: props.placeholder,
-      maxlength: props.maxlength,
-      minlength: props.minlength,
       name: props.name,
       autofocus: props.autofocus,
       readonly: props.readonly,
-      pattern: props.pattern,
+      inputmode: "tel",
       ...inputAttrs.value
     }));
     const countryItems = computed(() => {
@@ -19233,6 +19224,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         props.defaultCountry
       );
     });
+    const phoneMask = computed(() => getPhoneMaskForCountry(country.value ?? props.defaultCountry));
+    const phoneMaskOptions = computed(() => ({
+      prepare: (value) => applyPhoneNormalization(value, country.value ?? props.defaultCountry)
+    }));
     const committedValid = ref(null);
     const resolvedLabel = computed(() => props.label === void 0 ? t("FdsPhonenumber.phoneNumber") : props.label);
     const resolvedInvalidMessage = computed(
@@ -19256,6 +19251,18 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       const result2 = validatePhoneNumber(nationalNumber.value ?? "", country.value ?? "SE");
       emit("update:e164", result2.isValid && result2.phoneNumber ? result2.phoneNumber : "");
     }
+    function applyPhoneNormalization(value, countryCode = country.value ?? props.defaultCountry) {
+      if (!shouldNormalizePhoneInput(value, countryCode)) {
+        return value;
+      }
+      return normalizeNationalPhoneInput(value, countryCode);
+    }
+    watch(nationalNumber, (value) => {
+      const normalized = applyPhoneNormalization(value ?? "");
+      if (normalized !== (value ?? "")) {
+        nationalNumber.value = normalized;
+      }
+    });
     watch(country, () => {
       if (committedValid.value === null) {
         return;
@@ -19263,6 +19270,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       runValidation();
     });
     function handleBlur(ev) {
+      const normalized = applyPhoneNormalization(nationalNumber.value ?? "");
+      if (normalized !== (nationalNumber.value ?? "")) {
+        nationalNumber.value = normalized;
+      }
       runValidation();
       emit("blur", ev);
     }
@@ -19271,14 +19282,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       emit("noCountryResults", value);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
         resolvedLabel.value ? (openBlock(), createElementBlock("label", {
           key: 0,
           class: normalizeClass(["block font-bold text-gray-900 cursor-pointer", { "mb-0": __props.meta, "mb-1": !__props.meta }])
         }, toDisplayString(resolvedLabel.value), 3)) : createCommentVNode("", true),
         __props.meta ? (openBlock(), createElementBlock("div", _hoisted_2$3, toDisplayString(__props.meta), 1)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3$3, [
-          createVNode(_sfc_main$a, {
+          createVNode(_sfc_main$b, {
             modelValue: country.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => country.value = $event),
             items: countryItems.value,
@@ -19289,18 +19300,18 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["mb-0! shrink-0", __props.selectClass ?? ""]),
             onNoCountryResults
           }, null, 8, ["modelValue", "items", "valid", "disabled", "ariaLabel", "data-testid", "class"]),
-          createVNode(_sfc_main$r, mergeProps({
+          createVNode(_sfc_main$s, mergeProps({
             modelValue: unref(nationalNumber),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(nationalNumber) ? nationalNumber.value = $event : null),
-            modelModifiers: unref(modelModifiers),
-            type: "tel",
+            mask: phoneMask.value,
+            "mask-options": phoneMaskOptions.value,
             valid: displayValid.value,
             disabled: __props.disabled,
             optional: __props.optional,
             ariaLabel: unref(t)("FdsPhonenumber.phoneNumber"),
             "data-testid": __props.dataTestid ? `${__props.dataTestid}-number` : void 0,
             class: ["mb-0! min-w-0 flex-1", __props.inputClass ?? ""]
-          }, forwardedInputProps.value, { onBlur: handleBlur }), null, 16, ["modelValue", "modelModifiers", "valid", "disabled", "optional", "ariaLabel", "data-testid", "class"])
+          }, forwardedInputProps.value, { onBlur: handleBlur }), null, 16, ["modelValue", "mask", "mask-options", "valid", "disabled", "optional", "ariaLabel", "data-testid", "class"])
         ]),
         noCountryResults.value ? (openBlock(), createElementBlock("div", _hoisted_4$3, toDisplayString(unref(t)("FdsPhonenumber.noCountryResults")), 1)) : createCommentVNode("", true),
         showInvalidMessage.value ? (openBlock(), createElementBlock("div", _hoisted_5$3, toDisplayString(resolvedInvalidMessage.value), 1)) : createCommentVNode("", true)
@@ -19308,6 +19319,474 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const SSN_MASK = "000000000000";
+const SSN_INTERIM_MASK = "XXXXXXXXXXXX";
+const SSN_INTERIM_MASK_OPTIONS = {
+  lazy: true,
+  definitions: {
+    X: /[0-9A-Za-z]/
+  }
+};
+function getSsnMask(allowInterimNumber) {
+  return allowInterimNumber ? SSN_INTERIM_MASK : SSN_MASK;
+}
+function getSsnMaskOptions(allowInterimNumber) {
+  return allowInterimNumber ? SSN_INTERIM_MASK_OPTIONS : { lazy: true };
+}
+var PersonnummerError = class extends Error {
+  constructor() {
+    super("Invalid swedish personal identity number");
+  }
+};
+var compareAsc = (dateLeft, dateRight) => {
+  const diff = dateLeft.getTime() - dateRight.getTime();
+  return diff < 0 ? -1 : diff > 0 ? 1 : diff;
+};
+var diffInYears = (dateLeft, dateRight) => {
+  const sign = compareAsc(dateLeft, dateRight);
+  const yearDiff = Math.abs(dateLeft.getFullYear() - dateRight.getFullYear());
+  dateLeft.setFullYear(dateLeft.getFullYear() - sign * yearDiff);
+  const isLastYearNotFull = compareAsc(dateLeft, dateRight) === -sign;
+  const result2 = sign * (yearDiff - +isLastYearNotFull);
+  return result2 === 0 ? 0 : result2;
+};
+var luhn = (str) => {
+  let sum = 0;
+  str += "";
+  for (let i = 0, l = str.length; i < l; i++) {
+    let v = parseInt(str[i]);
+    v *= 2 - i % 2;
+    if (v > 9) {
+      v -= 9;
+    }
+    sum += v;
+  }
+  return Math.ceil(sum / 10) * 10 - sum;
+};
+var testDate = (year, month, day) => {
+  month -= 1;
+  const date = new Date(year, month, day);
+  return !(date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day);
+};
+var Personnummer = class {
+  /**
+   * Personnummer constructor.
+   *
+   * @param {string} pin
+   * @param {object} options
+   */
+  constructor(pin, options) {
+    this._century = "";
+    this._fullYear = "";
+    this._year = "";
+    this._month = "";
+    this._day = "";
+    this._sep = "";
+    this._num = "";
+    this._check = "";
+    this.parse(pin, {
+      allowCoordinationNumber: true,
+      allowInterimNumber: false,
+      ...options
+    });
+  }
+  /**
+   * Get century.
+   *
+   * @return {string}
+   */
+  get century() {
+    return this._century;
+  }
+  /**
+   * Get age.
+   *
+   * @return {string}
+   */
+  get fullYear() {
+    return this._fullYear;
+  }
+  /**
+   * Get age.
+   *
+   * @return {string}
+   */
+  get year() {
+    return this._year;
+  }
+  /**
+   * Get month.
+   *
+   * @return {string}
+   */
+  get month() {
+    return this._month;
+  }
+  /**
+   * Get day.
+   *
+   * @return {string}
+   */
+  get day() {
+    return this._day;
+  }
+  /**
+   * Get sep.
+   *
+   * @return {string}
+   */
+  get sep() {
+    return this._sep;
+  }
+  /**
+   * Get num.
+   *
+   * @return {string}
+   */
+  get num() {
+    return this._num;
+  }
+  /**
+   * Get check.
+   *
+   * @return {string}
+   */
+  get check() {
+    return this._check;
+  }
+  /**
+   * Parse personnummer.
+   *
+   * @param {string} pin
+   * @param {object} options
+   *
+   * @return {Personnummer}
+   */
+  static parse(pin, options) {
+    return new Personnummer(pin, options);
+  }
+  /**
+   * Validate a Swedish personal identity number.
+   *
+   * @param {string} str
+   * @param {object} options
+   *
+   * @return {boolean}
+   */
+  static valid(pin, options) {
+    try {
+      Personnummer.parse(pin, options);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  /**
+   * Parse personnummer and set class properties.
+   *
+   * @param {string} pin
+   * @param {object} options
+   */
+  parse(pin, options) {
+    if (pin.length < 10 || pin.length > 13) {
+      throw new PersonnummerError();
+    }
+    const reg = /^(\d{2}){0,1}(\d{2})(\d{2})(\d{2})([+-]?)((?!000)\d{3}|[TRSUWXJKLMN]\d{2})(\d)$/;
+    const match2 = reg.exec(pin);
+    if (!match2) {
+      throw new PersonnummerError();
+    }
+    const century = match2[1];
+    const year = match2[2];
+    const month = match2[3];
+    const day = match2[4];
+    const sep = match2[5];
+    const num = match2[6];
+    const check = match2[7];
+    if (typeof century === "undefined" || !century.length) {
+      const d = /* @__PURE__ */ new Date();
+      let baseYear = 0;
+      if (sep === "+") {
+        this._sep = "+";
+        baseYear = d.getFullYear() - 100;
+      } else {
+        this._sep = "-";
+        baseYear = d.getFullYear();
+      }
+      this._century = ("" + (baseYear - (baseYear - parseInt(year)) % 100)).substr(0, 2);
+    } else {
+      this._century = century;
+      if ((/* @__PURE__ */ new Date()).getFullYear() - parseInt(century + year, 10) < 100) {
+        this._sep = "-";
+      } else {
+        this._sep = "+";
+      }
+    }
+    this._year = year;
+    this._fullYear = this._century + year;
+    this._month = month;
+    this._day = day;
+    this._num = num;
+    this._check = check;
+    if (!this.valid()) {
+      throw new PersonnummerError();
+    }
+    if (!(options == null ? void 0 : options.allowCoordinationNumber) && this.isCoordinationNumber()) {
+      throw new PersonnummerError();
+    }
+    if (!(options == null ? void 0 : options.allowInterimNumber) && this.isInterimNumber()) {
+      throw new PersonnummerError();
+    }
+  }
+  /**
+   * Validate a Swedish personal identity number.
+   *
+   * @return {boolean}
+   */
+  valid() {
+    const valid = luhn(
+      this.year + this.month + this.day + this.num.replace(/[TRSUWXJKLMN]/, "1")
+    ) === +this.check && !!this.check;
+    if (valid && testDate(parseInt(this.century + this.year), +this.month, +this.day)) {
+      return valid;
+    }
+    return valid && testDate(parseInt(this.century + this.year), +this.month, +this.day - 60);
+  }
+  /**
+   * Format a Swedish personal identity number as one of the official formats,
+   * A long format or a short format.
+   *
+   * If the input number could not be parsed a empty string will be returned.
+   *
+   * @param {boolean} longFormat
+   *
+   * @return {string}
+   */
+  format(longFormat = false) {
+    if (longFormat) {
+      return `${this.century}${this.year}${this.month}${this.day}${this.num}${this.check}`;
+    }
+    return `${this.year}${this.month}${this.day}${this.sep}${this.num}${this.check}`;
+  }
+  /**
+   * Get age from a Swedish personal identity number.
+   *
+   * @return {number}
+   */
+  getAge() {
+    const date = this.getDate();
+    return diffInYears(new Date(Date.now()), date);
+  }
+  /**
+   * Get date from a Swedish personal identity number.
+   *
+   * @return {Date}
+   */
+  getDate() {
+    let ageDay = +this.day;
+    if (this.isCoordinationNumber()) {
+      ageDay -= 60;
+    }
+    const ageDate = this.century + this.year + "-" + this.month + "-" + (ageDay < 10 ? "0" + ageDay : ageDay);
+    return new Date(ageDate);
+  }
+  /**
+   * Check if a Swedish personal identity number is a interim number or not.
+   *
+   * @return {boolean}
+   */
+  isInterimNumber() {
+    return /[TRSUWXJKLMN]/.test(this.num[0]);
+  }
+  /**
+   * Check if a Swedish personal identity number is a coordination number or not.
+   *
+   * @return {boolean}
+   */
+  isCoordinationNumber() {
+    return testDate(
+      parseInt(this.century + this.year),
+      +this.month,
+      +this.day - 60
+    );
+  }
+  /**
+   * Check if a Swedish personal identity number is for a female.
+   *
+   * @return {boolean}
+   */
+  isFemale() {
+    return !this.isMale();
+  }
+  /**
+   * Check if a Swedish personal identity number is for a male.
+   *
+   * @return {boolean}
+   */
+  isMale() {
+    const sexDigit = parseInt(this.num.substr(-1));
+    return sexDigit % 2 === 1;
+  }
+};
+var src_default = Personnummer;
+const INVALID_RESULT = {
+  isValid: false,
+  digits: null
+};
+const DEFAULT_SSN_VALIDATION_OPTIONS = {
+  allowCoordinationNumber: true,
+  allowInterimNumber: true
+};
+function resolveSsnValidationOptions(options) {
+  return {
+    ...DEFAULT_SSN_VALIDATION_OPTIONS,
+    ...options
+  };
+}
+function stripSsnSeparators(value) {
+  return normalizePidSearchValue(value);
+}
+function validateSsnNumber(value, options) {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return INVALID_RESULT;
+  }
+  const resolvedOptions = resolveSsnValidationOptions(options);
+  const isValid2 = src_default.valid(trimmed, resolvedOptions);
+  return {
+    isValid: isValid2,
+    digits: isValid2 ? stripSsnSeparators(trimmed) : null
+  };
+}
+function validateSsn(value, options) {
+  return validateSsnNumber(value, options).isValid;
+}
+function getSsnValidationState(value, options) {
+  if (!value.trim()) {
+    return null;
+  }
+  return validateSsn(value, options);
+}
+const _hoisted_1$4 = { class: "w-full" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "FdsSsn",
+  props: /* @__PURE__ */ mergeModels({
+    label: { default: void 0 },
+    meta: { default: void 0 },
+    optional: { type: Boolean, default: false },
+    valid: { type: [Boolean, null], default: void 0 },
+    invalidMessage: { default: void 0 },
+    modelValue: {},
+    allowCoordinationNumber: { type: Boolean, default: true },
+    allowInterimNumber: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    dataTestid: { default: void 0 },
+    onValid: {},
+    onBlur: {},
+    "onUpdate:modelValue": {},
+    id: { default: void 0 },
+    autocomplete: { default: "off" },
+    required: { type: Boolean, default: false },
+    placeholder: { default: void 0 },
+    name: { default: void 0 },
+    autofocus: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    inputClass: { default: void 0 }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "valid", "blur"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const modelValue = useModel(__props, "modelValue");
+    const attrs = useAttrs();
+    const props = __props;
+    const emit = __emit;
+    const { t } = useFdsI18n();
+    const inputAttrs = computed(() => {
+      const { class: _class, style, ...rest } = attrs;
+      return {
+        ...rest,
+        ...style == null ? {} : { style }
+      };
+    });
+    const forwardedInputProps = computed(() => ({
+      id: props.id,
+      autocomplete: props.autocomplete,
+      required: props.required,
+      placeholder: props.placeholder,
+      name: props.name,
+      autofocus: props.autofocus,
+      readonly: props.readonly,
+      inputmode: props.allowInterimNumber ? "text" : "numeric",
+      ...inputAttrs.value
+    }));
+    const validationOptions = computed(
+      () => ({
+        allowCoordinationNumber: props.allowCoordinationNumber,
+        allowInterimNumber: props.allowInterimNumber
+      })
+    );
+    const ssnMask = computed(() => getSsnMask(props.allowInterimNumber));
+    const ssnMaskOptions = computed(() => getSsnMaskOptions(props.allowInterimNumber));
+    const committedValid = ref(null);
+    const resolvedLabel = computed(() => props.label === void 0 ? t("FdsSsn.label") : props.label);
+    const resolvedInvalidMessage = computed(
+      () => props.invalidMessage === void 0 ? t("FdsSsn.invalidSsn") : props.invalidMessage
+    );
+    const displayValid = computed(() => {
+      if (props.valid === false) return false;
+      if (props.valid === true) return true;
+      if (committedValid.value === false) return false;
+      if (committedValid.value === true) return true;
+      return props.valid;
+    });
+    function normalizeValue2() {
+      const normalized = stripSsnSeparators(modelValue.value ?? "");
+      if (normalized !== (modelValue.value ?? "")) {
+        modelValue.value = normalized;
+      }
+    }
+    function runValidation() {
+      const validationState = getSsnValidationState(modelValue.value ?? "", validationOptions.value);
+      committedValid.value = validationState;
+      emit("valid", validationState);
+    }
+    watch([() => props.allowCoordinationNumber, () => props.allowInterimNumber], () => {
+      if (committedValid.value === null) {
+        return;
+      }
+      runValidation();
+    });
+    function handleBlur(ev) {
+      normalizeValue2();
+      runValidation();
+      emit("blur", ev);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createVNode(_sfc_main$s, mergeProps({
+          modelValue: modelValue.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+          mask: ssnMask.value,
+          "mask-options": ssnMaskOptions.value,
+          label: resolvedLabel.value,
+          meta: __props.meta,
+          valid: displayValid.value,
+          disabled: __props.disabled,
+          optional: __props.optional,
+          "invalid-message": resolvedInvalidMessage.value,
+          ariaLabel: resolvedLabel.value,
+          "data-testid": __props.dataTestid,
+          class: __props.inputClass
+        }, forwardedInputProps.value, { onBlur: handleBlur }), null, 16, ["modelValue", "mask", "mask-options", "label", "meta", "valid", "disabled", "optional", "invalid-message", "ariaLabel", "data-testid", "class"])
+      ]);
+    };
+  }
+});
 const _hoisted_1$3 = ["for"];
 const _hoisted_2$2 = {
   key: 1,
@@ -19436,7 +19915,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             [vModelSelect, internalValue.value]
           ]),
           createElementVNode("div", _hoisted_6, [
-            createVNode(_sfc_main$M, {
+            createVNode(_sfc_main$N, {
               name: "arrowDown",
               size: 24,
               class: normalizeClass({
@@ -19603,12 +20082,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(validationIconClasses.value)
           }, [
-            isInvalid.value ? (openBlock(), createBlock(_sfc_main$M, {
+            isInvalid.value ? (openBlock(), createBlock(_sfc_main$N, {
               key: 0,
               name: "alert",
               class: "fill-red-600"
             })) : createCommentVNode("", true),
-            isValid2.value ? (openBlock(), createBlock(_sfc_main$M, {
+            isValid2.value ? (openBlock(), createBlock(_sfc_main$N, {
               key: 1,
               name: "bigSuccess"
             })) : createCommentVNode("", true)
@@ -19699,7 +20178,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           unref(hasSlot) ? (openBlock(), createElementBlock("span", _hoisted_2, [
             renderSlot(_ctx.$slots, "default")
           ])) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.heading), 1)),
-          createVNode(_sfc_main$M, {
+          createVNode(_sfc_main$N, {
             name: iconName.value,
             size: "24px",
             class: "fill-blue-500 ml-1"
@@ -19931,7 +20410,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({ class: wrapperClasses.value }, rootAttrs.value), [
-        __props.loading ? (openBlock(), createBlock(_sfc_main$E, {
+        __props.loading ? (openBlock(), createBlock(_sfc_main$F, {
           key: 0,
           size: "24px",
           color: "blue",
@@ -20220,97 +20699,101 @@ const FdsVueCorePlugin = {
     if (options?.i18n) {
       app.provide(FDS_VUE_CORE_I18N_KEY, options.i18n);
     }
-    app.component("FdsTreeView", _sfc_main$g);
-    app.component("FdsButtonPrimary", _sfc_main$A);
-    app.component("FdsButtonSecondary", _sfc_main$z);
-    app.component("FdsButtonMinor", _sfc_main$D);
-    app.component("FdsButtonIcon", _sfc_main$L);
-    app.component("FdsButtonCopy", _sfc_main$C);
-    app.component("FdsButtonDownload", _sfc_main$B);
-    app.component("FdsDevMode", _sfc_main$n);
-    app.component("FdsIcon", _sfc_main$M);
-    app.component("FdsSpinner", _sfc_main$E);
-    app.component("FdsRadio", _sfc_main$w);
-    app.component("FdsCheckbox", _sfc_main$x);
+    app.component("FdsTreeView", _sfc_main$h);
+    app.component("FdsButtonPrimary", _sfc_main$B);
+    app.component("FdsButtonSecondary", _sfc_main$A);
+    app.component("FdsButtonMinor", _sfc_main$E);
+    app.component("FdsButtonIcon", _sfc_main$M);
+    app.component("FdsButtonCopy", _sfc_main$D);
+    app.component("FdsButtonDownload", _sfc_main$C);
+    app.component("FdsDevMode", _sfc_main$o);
+    app.component("FdsIcon", _sfc_main$N);
+    app.component("FdsSpinner", _sfc_main$F);
+    app.component("FdsRadio", _sfc_main$x);
+    app.component("FdsCheckbox", _sfc_main$y);
     app.component("FdsTextarea", _sfc_main$7);
-    app.component("FdsPhonenumber", _sfc_main$9);
+    app.component("FdsPhonenumber", _sfc_main$a);
+    app.component("FdsSsn", _sfc_main$9);
     app.component("FdsSelect", _sfc_main$8);
     app.component("FdsTable", _sfc_main$6);
     app.component("FdsTableHead", _sfc_main$5);
-    app.component("FdsInput", _sfc_main$r);
-    app.component("FdsBlockContent", _sfc_main$J);
-    app.component("FdsBlockInfo", _sfc_main$G);
-    app.component("FdsBlockAlert", _sfc_main$K);
-    app.component("FdsBlockExpander", _sfc_main$H);
-    app.component("FdsBlockLink", _sfc_main$F);
-    app.component("FdsSticker", _sfc_main$I);
-    app.component("FdsTabs", _sfc_main$q);
-    app.component("FdsTabsItem", _sfc_main$p);
-    app.component("FdsModal", _sfc_main$t);
-    app.component("FdsPagination", _sfc_main$l);
-    app.component("FdsPopover", _sfc_main$k);
-    app.component("FdsSearchSelect", _sfc_main$j);
-    app.component("FdsSearchSelectPro", _sfc_main$i);
-    app.component("FdsTruncatedText", _sfc_main$f);
-    app.component("FdsWizard", _sfc_main$b);
-    app.component("FdsWeekCalendar", _sfc_main$d);
+    app.component("FdsInput", _sfc_main$s);
+    app.component("FdsBlockContent", _sfc_main$K);
+    app.component("FdsBlockInfo", _sfc_main$H);
+    app.component("FdsBlockAlert", _sfc_main$L);
+    app.component("FdsBlockExpander", _sfc_main$I);
+    app.component("FdsBlockLink", _sfc_main$G);
+    app.component("FdsSticker", _sfc_main$J);
+    app.component("FdsTabs", _sfc_main$r);
+    app.component("FdsTabsItem", _sfc_main$q);
+    app.component("FdsModal", _sfc_main$u);
+    app.component("FdsPagination", _sfc_main$m);
+    app.component("FdsPopover", _sfc_main$l);
+    app.component("FdsSearchSelect", _sfc_main$k);
+    app.component("FdsSearchSelectPro", _sfc_main$j);
+    app.component("FdsTruncatedText", _sfc_main$g);
+    app.component("FdsWizard", _sfc_main$c);
+    app.component("FdsWeekCalendar", _sfc_main$e);
     app.component("FdsH1", _sfc_main$4);
     app.component("FdsH2", _sfc_main$3);
     app.component("FdsH3", _sfc_main$2);
     app.component("FdsHr", _sfc_main$1);
-    app.component("FdsLabel", _sfc_main$v);
-    app.component("FdsLead", _sfc_main$c);
-    app.component("FdsMeta", _sfc_main$s);
+    app.component("FdsLabel", _sfc_main$w);
+    app.component("FdsLead", _sfc_main$d);
+    app.component("FdsMeta", _sfc_main$t);
     app.component("FdsListHeading", _sfc_main);
   }
 };
 export {
   FDS_VUE_CORE_I18N_KEY,
-  _sfc_main$K as FdsBlockAlert,
-  _sfc_main$J as FdsBlockContent,
-  _sfc_main$H as FdsBlockExpander,
-  _sfc_main$G as FdsBlockInfo,
-  _sfc_main$F as FdsBlockLink,
-  _sfc_main$C as FdsButtonCopy,
-  _sfc_main$B as FdsButtonDownload,
-  _sfc_main$L as FdsButtonIcon,
-  _sfc_main$D as FdsButtonMinor,
-  _sfc_main$A as FdsButtonPrimary,
-  _sfc_main$z as FdsButtonSecondary,
-  _sfc_main$x as FdsCheckbox,
-  _sfc_main$n as FdsDevMode,
-  _sfc_main$m as FdsExitModal,
+  _sfc_main$L as FdsBlockAlert,
+  _sfc_main$K as FdsBlockContent,
+  _sfc_main$I as FdsBlockExpander,
+  _sfc_main$H as FdsBlockInfo,
+  _sfc_main$G as FdsBlockLink,
+  _sfc_main$D as FdsButtonCopy,
+  _sfc_main$C as FdsButtonDownload,
+  _sfc_main$M as FdsButtonIcon,
+  _sfc_main$E as FdsButtonMinor,
+  _sfc_main$B as FdsButtonPrimary,
+  _sfc_main$A as FdsButtonSecondary,
+  _sfc_main$y as FdsCheckbox,
+  _sfc_main$o as FdsDevMode,
+  _sfc_main$n as FdsExitModal,
   _sfc_main$4 as FdsH1,
   _sfc_main$3 as FdsH2,
   _sfc_main$2 as FdsH3,
   _sfc_main$1 as FdsHr,
-  _sfc_main$M as FdsIcon,
-  _sfc_main$r as FdsInput,
-  _sfc_main$v as FdsLabel,
-  _sfc_main$c as FdsLead,
+  _sfc_main$N as FdsIcon,
+  _sfc_main$s as FdsInput,
+  _sfc_main$w as FdsLabel,
+  _sfc_main$d as FdsLead,
   _sfc_main as FdsListHeading,
-  _sfc_main$s as FdsMeta,
-  _sfc_main$t as FdsModal,
-  _sfc_main$l as FdsPagination,
-  _sfc_main$9 as FdsPhonenumber,
-  _sfc_main$k as FdsPopover,
-  _sfc_main$w as FdsRadio,
-  _sfc_main$j as FdsSearchSelect,
-  _sfc_main$i as FdsSearchSelectPro,
+  _sfc_main$t as FdsMeta,
+  _sfc_main$u as FdsModal,
+  _sfc_main$m as FdsPagination,
+  _sfc_main$a as FdsPhonenumber,
+  _sfc_main$l as FdsPopover,
+  _sfc_main$x as FdsRadio,
+  _sfc_main$k as FdsSearchSelect,
+  _sfc_main$j as FdsSearchSelectPro,
   _sfc_main$8 as FdsSelect,
-  _sfc_main$E as FdsSpinner,
-  _sfc_main$I as FdsSticker,
+  _sfc_main$F as FdsSpinner,
+  _sfc_main$9 as FdsSsn,
+  _sfc_main$J as FdsSticker,
   _sfc_main$6 as FdsTable,
   _sfc_main$5 as FdsTableHead,
-  _sfc_main$q as FdsTabs,
-  _sfc_main$p as FdsTabsItem,
+  _sfc_main$r as FdsTabs,
+  _sfc_main$q as FdsTabsItem,
   _sfc_main$7 as FdsTextarea,
-  _sfc_main$g as FdsTreeView,
-  _sfc_main$f as FdsTruncatedText,
-  _sfc_main$d as FdsWeekCalendar,
-  _sfc_main$b as FdsWizard,
+  _sfc_main$h as FdsTreeView,
+  _sfc_main$g as FdsTruncatedText,
+  _sfc_main$e as FdsWeekCalendar,
+  _sfc_main$c as FdsWizard,
   PID_MASK,
   PID_MASK_OPTIONS,
+  SSN_INTERIM_MASK,
+  SSN_MASK,
   bankid,
   buildCountryOptions,
   capitalizeFirstLetter,
@@ -20322,6 +20805,9 @@ export {
   formatPidWithDash,
   getExitGuardWizardId,
   getPhoneValidationState,
+  getSsnMask,
+  getSsnMaskOptions,
+  getSsnValidationState,
   isPidString,
   isRelativeHref,
   logoFeelgoodColored,
@@ -20333,6 +20819,7 @@ export {
   shouldBlockNavigation,
   shouldBlockWizardExit,
   sortCountryOptionsByName,
+  stripSsnSeparators,
   teardownRouterLinkInterceptor,
   useBoldQuery,
   useDevMode,
@@ -20347,6 +20834,8 @@ export {
   useRouteScrollPositions,
   useTreeState,
   useViewportBreakpoint,
-  validatePhoneNumber
+  validatePhoneNumber,
+  validateSsn,
+  validateSsnNumber
 };
 //# sourceMappingURL=fds-vue-core.es.js.map