@vygruppen/spor-react 12.10.1 → 12.10.2

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(
@@ -2149,14 +2153,7 @@ var TimeField = ({ state, ...props }) => {
         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",
       {
@@ -2843,6 +2840,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 +2898,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 +2926,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 +3345,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 +3619,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 })
             ]
           }
         )
@@ -6678,13 +6685,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",
@@ -9046,29 +9053,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 +9188,7 @@ var switchSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       display: "inline-flex",
-      gap: "2.5",
+      gap: "2",
       alignItems: "center",
       position: "relative",
       verticalAlign: "middle",