@vygruppen/spor-react 12.10.1 → 12.10.3

package/dist/index.mjs

@@ -1207,11 +1207,11 @@ var ServiceAlert = forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx(Accordion$1.ItemContent, { asChild: true, children: /* @__PURE__ */ jsx(Stack, { flexDirection: "row", justifyContent: "center", width: "100%", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Accordion$1.ItemContent, { asChild: true, children: /* @__PURE__ */ jsx(Stack, { flexDirection: "row", width: "100%", children: /* @__PURE__ */ jsx(
             Accordion$1.ItemBody,
             {
               as: Stack,
-              maxWidth: contentWidth,
+              width: contentWidth,
               css: styles.itemBody,
               children
             }
@@ -1806,7 +1806,11 @@ var DateField = forwardRef(
           css: styles.inputLabel,
           position: "absolute",
           paddingTop: "2px",
-          children: /* @__PURE__ */ jsx("label", { ...props.labelProps, children: props.label })
+          children: /* @__PURE__ */ jsxs(Label, { padding: "0", fontSize: "2xs", ...props.labelProps, children: [
+            props.label,
+            " ",
+            /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
+          ] })
         }
       ),
       /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
@@ -2142,21 +2146,21 @@ var TimeField = ({ state, ...props }) => {
         style: {
           marginBottom: 0,
           fontSize: "mobile.xs",
+          top: 0,
           cursor: "text",
+          left: "50%",
+          transform: "translateX(-50%)",
           position: "absolute",
-          paddingTop: "2px"
+          paddingTop: "2px",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          maxWidth: "80%"
         },
         children: props.label
       }
     ),
-    /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment) => /* @__PURE__ */ jsx(
-      DateTimeSegment,
-      {
-        segment,
-        state
-      },
-      JSON.stringify(segment)
-    )) }),
+    /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsx(DateTimeSegment, { segment, state }, index)) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -2238,6 +2242,7 @@ var TimePicker = ({
       "aria-disabled": isDisabled,
       "aria-live": "assertive",
       "aria-label": ariaLabel,
+      position: "relative",
       ...boxProps,
       children: [
         /* @__PURE__ */ jsx(
@@ -2251,7 +2256,8 @@ var TimePicker = ({
             icon: /* @__PURE__ */ jsx(DropdownLeftFill18Icon, {}),
             onClick: handleBackwardsClick,
             disabled: isDisabled,
-            style: isDisabled ? { backgroundColor: "transparent" } : {}
+            style: isDisabled ? { backgroundColor: "transparent" } : {},
+            zIndex: 1
           }
         ),
         /* @__PURE__ */ jsx(TimeField, { label, state, name }),
@@ -2266,7 +2272,8 @@ var TimePicker = ({
             icon: /* @__PURE__ */ jsx(DropdownRightFill18Icon, {}),
             onClick: handleForwardClick,
             disabled: isDisabled,
-            style: isDisabled ? { backgroundColor: "transparent" } : {}
+            style: isDisabled ? { backgroundColor: "transparent" } : {},
+            zIndex: 1
           }
         )
       ]
@@ -2385,11 +2392,11 @@ var DrawerBackTrigger = forwardRef((props, ref) => {
 });
 DrawerBackTrigger.displayName = "DrawerBackTrigger";
 var DrawerFullScreenHeader = forwardRef((props, ref) => {
-  const { backTrigger = true, title } = props;
+  const { backTrigger = true, closeTrigger = true, title } = props;
   return /* @__PURE__ */ jsx(Drawer$1.Header, { ...props, ref, asChild: true, children: /* @__PURE__ */ jsxs(Grid, { templateColumns: "1fr auto 1fr", height: "auto", paddingX: "8", children: [
     /* @__PURE__ */ jsx(GridItem, { width: "full", alignSelf: "center", children: backTrigger && /* @__PURE__ */ jsx(DrawerBackTrigger, {}) }),
     /* @__PURE__ */ jsx(GridItem, { width: "full", alignSelf: "end", asChild: true, children: title && /* @__PURE__ */ jsx(DrawerTitle, { children: title }) }),
-    /* @__PURE__ */ jsx(GridItem, { width: "full", alignSelf: "end", children: /* @__PURE__ */ jsx(DrawerCloseTrigger, { justifySelf: "end", top: "0" }) })
+    closeTrigger && /* @__PURE__ */ jsx(GridItem, { width: "full", alignSelf: "end", children: /* @__PURE__ */ jsx(DrawerCloseTrigger, { justifySelf: "end", top: "0" }) })
   ] }) });
 });
 DrawerFullScreenHeader.displayName = "DrawerFullScreenHeader";
@@ -2843,6 +2850,7 @@ var ListBox = (props) => {
       css: styles.root,
       "aria-busy": loading,
       maxWidth,
+      padding: "1",
       children: [
         state.collection.size === 0 && props.emptyContent,
         [...state.collection].map(
@@ -2900,7 +2908,18 @@ function Option({ item, state }) {
       { passive: false, once: true }
     );
   }, []);
-  return /* @__PURE__ */ jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsx(ListItem, { ...optionProps, ...dataFields, ref, css: styles.item, children: item.rendered }) });
+  return /* @__PURE__ */ jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsx(
+    ListItem,
+    {
+      ...optionProps,
+      ...dataFields,
+      ref,
+      css: styles.item,
+      padding: "1",
+      marginX: "0",
+      children: item.rendered
+    }
+  ) });
 }
 var OptionContext = React27__default.createContext({
   labelProps: {},
@@ -2917,25 +2936,34 @@ function ListBoxSection({ section, state }) {
   });
   const isFirstSection = section.key === state.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
-  return /* @__PURE__ */ jsx(List, { children: /* @__PURE__ */ jsxs(ListItem, { ...itemProps, listStyleType: "none", children: [
-    section.rendered && /* @__PURE__ */ jsx(
-      Box,
-      {
-        fontSize: "mobile.xs",
-        color: titleColor,
-        paddingX: 3,
-        paddingTop: 1,
-        marginTop: isFirstSection ? 0 : 2,
-        textTransform: "uppercase",
-        fontWeight: "bold",
-        ...headingProps,
-        children: section.rendered
-      }
-    ),
-    /* @__PURE__ */ jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
-      (item) => /* @__PURE__ */ jsx(Option, { item, state }, item.key)
-    ) })
-  ] }) });
+  return /* @__PURE__ */ jsx(List, { children: /* @__PURE__ */ jsxs(
+    ListItem,
+    {
+      ...itemProps,
+      listStyleType: "none",
+      marginLeft: "0",
+      paddingX: "1",
+      children: [
+        section.rendered && /* @__PURE__ */ jsx(
+          Box,
+          {
+            fontSize: "mobile.xs",
+            color: titleColor,
+            paddingTop: 1,
+            marginTop: isFirstSection ? 0 : 2,
+            marginLeft: "1",
+            textTransform: "uppercase",
+            fontWeight: "bold",
+            ...headingProps,
+            children: section.rendered
+          }
+        ),
+        /* @__PURE__ */ jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
+          (item) => /* @__PURE__ */ jsx(Option, { item, state }, item.key)
+        ) })
+      ]
+    }
+  ) });
 }
 var NativeSelect = React27.forwardRef(function NativeSelect2(props, ref) {
   const {
@@ -3327,54 +3355,43 @@ var PhoneNumberInput = forwardRef((props, ref) => {
       nationalNumber: value.nationalNumber
     });
   };
-  return /* @__PURE__ */ jsx(
-    AttachedInputs,
-    {
-      border: invalid ? "1px solid" : "none",
-      borderColor: invalid ? "outline.error" : "none",
-      outline: invalid ? "1px solid" : "none",
-      outlineColor: invalid ? "outline.error" : "none",
-      borderRadius: invalid ? "sm" : "none",
-      display: "grid",
-      gridTemplateColumns: "1fr 10fr",
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          CountryCodeSelect,
-          {
-            value: [value.countryCode],
-            onValueChange: handleCountryCodeChange,
-            height: "100%",
-            width: "6.25rem",
-            variant,
-            allowedCountryCodes,
-            "data-state": "on"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            ref,
-            type: "tel",
-            ...props,
-            value: value.nationalNumber,
-            invalid,
-            errorText,
-            onChange: (e) => {
-              const target = e.target;
-              const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
-              onChange({
-                countryCode: value.countryCode,
-                nationalNumber: strippedValue
-              });
-            },
-            variant,
-            "data-state": "on",
-            label
-          }
-        )
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxs(AttachedInputs, { display: "grid", gridTemplateColumns: "1fr 10fr", children: [
+    /* @__PURE__ */ jsx(
+      CountryCodeSelect,
+      {
+        value: [value.countryCode],
+        onValueChange: handleCountryCodeChange,
+        height: "100%",
+        width: "6.25rem",
+        variant,
+        allowedCountryCodes,
+        "data-state": "on",
+        invalid
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "tel",
+        ...props,
+        value: value.nationalNumber,
+        invalid,
+        errorText,
+        onChange: (e) => {
+          const target = e.target;
+          const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
+          onChange({
+            countryCode: value.countryCode,
+            nationalNumber: strippedValue
+          });
+        },
+        variant,
+        "data-state": "on",
+        label
+      }
+    )
+  ] });
 });
 PhoneNumberInput.displayName = "PhoneNumberInput";
 var texts16 = createTexts({
@@ -3612,9 +3629,9 @@ var Switch = forwardRef(
             checked: props.checked,
             css: styles.root,
             children: [
-              /* @__PURE__ */ jsx(Switch$1.Label, { children: label }),
               /* @__PURE__ */ jsx(Switch$1.HiddenInput, { ref }),
-              /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) })
+              /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) }),
+              /* @__PURE__ */ jsx(Switch$1.Label, { children: label })
             ]
           }
         )
@@ -3680,16 +3697,9 @@ var PressableCard = forwardRef(
 PressableCard.displayName = "PressableCard";
 var RadioCard = forwardRef(
   (props, ref) => {
-    const { inputProps, children, value, ariaLabel } = props;
+    const { inputProps, children } = props;
     return /* @__PURE__ */ jsxs(RadioCard$1.Item, { ...props, children: [
-      /* @__PURE__ */ jsx(
-        RadioCard$1.ItemHiddenInput,
-        {
-          "aria-label": ariaLabel ?? value,
-          ref,
-          ...inputProps
-        }
-      ),
+      /* @__PURE__ */ jsx(RadioCard$1.ItemHiddenInput, { ref, ...inputProps }),
       /* @__PURE__ */ jsx(RadioCard$1.ItemControl, { children })
     ] });
   }
@@ -3976,18 +3986,42 @@ var TextLink = forwardRef(
     const isExternal = external ?? Boolean((href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")));
     const externalLabel = t ? t(texts18.externalLink) : texts18.externalLink.en;
     if (props.asChild && isValidElement(children)) {
-      return /* @__PURE__ */ jsx(Link, { href, ...props, ref, children: cloneElement(children, {
-        ...children.props,
-        children: /* @__PURE__ */ jsxs(Fragment, { children: [
-          children.props.children,
-          isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel, size: props.size })
-        ] })
-      }) });
+      return /* @__PURE__ */ jsx(
+        Link,
+        {
+          href,
+          ...props,
+          ref,
+          ...isExternal && {
+            target: "_blank",
+            rel: "noopener noreferrer"
+          },
+          children: cloneElement(children, {
+            ...children.props,
+            children: /* @__PURE__ */ jsxs(Fragment, { children: [
+              children.props.children,
+              isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel, size: props.size })
+            ] })
+          })
+        }
+      );
     }
-    return /* @__PURE__ */ jsxs(Link, { href, ...props, ref, children: [
-      children,
-      isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel, size: props.size })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href,
+        ...props,
+        ref,
+        ...isExternal && {
+          target: "_blank",
+          rel: "noopener noreferrer"
+        },
+        children: [
+          children,
+          isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel, size: props.size })
+        ]
+      }
+    );
   }
 );
 TextLink.displayName = "TextLink";
@@ -6678,13 +6712,13 @@ var alertServiceSlotRecipe = defineSlotRecipe({
       textWrap: "nowrap"
     },
     itemBody: {
-      paddingInline: 2,
+      marginX: "auto",
+      padding: "0 !important",
       paddingBottom: ["0.5", null, null, "1"],
       color: "text.inverted",
       "& > p": {
         gap: 2,
         width: "full",
-        justifyContent: "center",
         borderBottom: "1px dashed",
         borderColor: "outline.inverted",
         paddingBottom: "3",
@@ -7478,7 +7512,7 @@ var drawerSlotRecipe = defineSlotRecipe({
       maxHeight: "100dvh",
       color: "inherit",
       boxShadow: "lg",
-      minHeight: ["50vh", null, null, "auto"],
+      minHeight: ["10rem", null, null, "auto"],
       _open: {
         animationDuration: "slowest",
         animationTimingFunction: "ease-in-smooth"
@@ -7492,16 +7526,16 @@ var drawerSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      paddingX: "5",
+      paddingX: ["3", null, null, "5"],
       paddingBottom: "1"
     },
     body: {
-      paddingX: "5",
+      paddingX: ["3", null, null, "5"],
       paddingY: ["1", null, null, "2"],
       flex: "1",
       overflow: "auto",
       fontSize: ["xs", null, null, "sm"],
-      minHeight: ["12", null, null, "auto"]
+      minHeight: ["2", null, null, "auto"]
     },
     footer: {
       display: "flex",
@@ -7518,8 +7552,8 @@ var drawerSlotRecipe = defineSlotRecipe({
     },
     closeTrigger: {
       position: "absolute",
-      top: "2",
-      insetEnd: "2"
+      top: "0",
+      right: "0"
     }
   },
   variants: {
@@ -9046,29 +9080,20 @@ var selectSlotRecipe = defineSlotRecipe({
       },
       floating: {
         control: {
-          backgroundColor: {
-            _light: "bg",
-            _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`
-          },
           outline: "1px solid",
           outlineColor: "floating.outline",
           _hover: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.hover",
-            backgroundColor: {
-              _light: "floating.surface.hover",
-              _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`
-            }
+            outline: "2px solid",
+            outlineColor: "floating.outline"
           },
           _active: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.active",
-            backgroundColor: "floating.surface.active"
+            backgroundColor: "brand.surface.active"
+          },
+          _disabled: {
+            pointerEvents: "none",
+            color: "text.disabled",
+            backgroundColor: "surface.disabled"
           }
-        },
-        selectContent: {
-          outline: "1px solid",
-          outlineColor: "floating.outline"
         }
       }
     },
@@ -9190,7 +9215,7 @@ var switchSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       display: "inline-flex",
-      gap: "2.5",
+      gap: "2",
       alignItems: "center",
       position: "relative",
       verticalAlign: "middle",