@vygruppen/spor-react 12.13.5 → 12.14.1

package/dist/index.d.cts

@@ -2132,6 +2132,9 @@ declare const lineIconSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" |
             iconContainer: {
                 backgroundColor: "linjetag.altTransport";
             };
+            icon: {
+                color: "darkGrey";
+            };
         };
         walk: {
             title: {

package/dist/index.d.ts

@@ -2132,6 +2132,9 @@ declare const lineIconSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" |
             iconContainer: {
                 backgroundColor: "linjetag.altTransport";
             };
+            icon: {
+                color: "darkGrey";
+            };
         };
         walk: {
             title: {

package/dist/index.mjs

@@ -1208,15 +1208,7 @@ var ServiceAlert = forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx(Accordion$1.ItemContent, { asChild: true, children: /* @__PURE__ */ jsx(Stack, { flexDirection: "row", width: "100%", children: /* @__PURE__ */ jsx(
-            Accordion$1.ItemBody,
-            {
-              as: Stack,
-              width: contentWidth,
-              css: styles.itemBody,
-              children
-            }
-          ) }) })
+          /* @__PURE__ */ jsx(Accordion$1.ItemContent, { css: styles.itemContent, children: /* @__PURE__ */ jsx(Accordion$1.ItemBody, { maxWidth: contentWidth, css: styles.itemBody, children }) })
         ] })
       }
     );
@@ -1384,7 +1376,7 @@ var Field3 = React27.forwardRef(
           ]
         }
       ),
-      helperText && /* @__PURE__ */ jsx(Text3, { fontSize: "sm", color: "text.tertiary", children: helperText })
+      helperText && /* @__PURE__ */ jsx(Text3, { variant: "sm", color: "text.tertiary", children: helperText })
     ] });
   }
 );
@@ -1617,10 +1609,10 @@ var CalendarNavigator = ({
       }
     ),
     /* @__PURE__ */ jsx(
-      Box,
+      Text3,
       {
         role: "heading",
-        fontSize: "sm",
+        variant: "md",
         fontWeight: "bold",
         flex: "1",
         textAlign: "center",
@@ -1801,7 +1793,7 @@ var DateField = forwardRef(
           css: styles.inputLabel,
           position: "absolute",
           paddingTop: "2px",
-          children: /* @__PURE__ */ jsxs(Label, { padding: "0", fontSize: "2xs", ...props.labelProps, children: [
+          children: /* @__PURE__ */ jsxs(Label, { padding: "0", ...props.labelProps, children: [
             props.label,
             " ",
             /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
@@ -1894,6 +1886,7 @@ var StyledField = forwardRef(
         ref,
         "aria-invalid": invalid,
         "aria-disabled": isDisabled,
+        fontSize: ["mobile.md", "desktop.md"],
         children
       }
     );
@@ -2146,29 +2139,41 @@ function DateRangePicker({
     ] })
   ] }) });
 }
+
+// src/util/slugify.tsx
+function slugify(text, maxLength = 50) {
+  if (!text) {
+    return text;
+  }
+  if (Array.isArray(text)) {
+    text = text.join(" ");
+  }
+  if (maxLength < 1) {
+    throw new Error("The maxLength parameter must be a positive number");
+  }
+  return text.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[\u00C6\u00E6]/g, "ae").replaceAll(/[\u00D8\u00F8]/g, "oe").replaceAll(/[\u00C5\u00E5]/g, "aa").toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^\w-]+/g, "").replaceAll(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").slice(0, Math.max(0, maxLength));
+}
 var TimeField = ({ state, ...props }) => {
   const ref = useRef(null);
   const { labelProps, fieldProps } = useTimeField(props, state, ref);
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(
-      "label",
+      chakra.label,
       {
         ...labelProps,
         htmlFor: fieldProps.id,
-        style: {
-          marginBottom: 0,
-          fontSize: "mobile.xs",
-          top: 0,
-          cursor: "text",
-          left: "50%",
-          transform: "translateX(-50%)",
-          position: "absolute",
-          paddingTop: "2px",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          maxWidth: "80%"
-        },
+        marginBottom: 0,
+        fontSize: ["mobile.xs", "desktop.xs"],
+        top: 0,
+        cursor: "text",
+        left: "50%",
+        transform: "translateX(-50%)",
+        position: "absolute",
+        paddingTop: "2px",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        maxWidth: "80%",
         children: props.label
       }
     ),
@@ -2907,7 +2912,15 @@ function ItemDescription({ children }) {
   const { descriptionProps } = useOptionContext();
   const recipe = useSlotRecipe({ key: "listbox" });
   const styles = recipe({});
-  return /* @__PURE__ */ jsx(Box, { ...descriptionProps, css: styles, fontSize: "xs", children });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...descriptionProps,
+      css: styles,
+      fontSize: ["mobile.xs", "desktop.xs"],
+      children
+    }
+  );
 }
 function Option({ item, state }) {
   const ref = useRef(null);
@@ -2984,7 +2997,7 @@ function ListBoxSection({ section, state }) {
         section.rendered && /* @__PURE__ */ jsx(
           Box,
           {
-            fontSize: "mobile.xs",
+            fontSize: ["mobile.sm", "desktop.sm"],
             color: titleColor,
             paddingTop: 1,
             marginTop: isFirstSection ? 0 : 2,
@@ -5387,7 +5400,6 @@ var StepperStep = ({
       Text3,
       {
         variant: "xs",
-        fontSize: "1rem",
         color: disabledTextColor,
         cursor: "default",
         paddingX: 2,
@@ -5819,22 +5831,6 @@ var linkRecipe = defineRecipe({
     size: "sm"
   }
 });
-
-// src/util/slugify.tsx
-function slugify(text, maxLength = 50) {
-  if (!text) {
-    return text;
-  }
-  if (Array.isArray(text)) {
-    text = text.join(" ");
-  }
-  if (maxLength < 1) {
-    throw new Error("The maxLength parameter must be a positive number");
-  }
-  return text.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[\u00C6\u00E6]/g, "ae").replaceAll(/[\u00D8\u00F8]/g, "oe").replaceAll(/[\u00C5\u00E5]/g, "aa").toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^\w-]+/g, "").replaceAll(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").slice(0, Math.max(0, maxLength));
-}
-
-// src/theme/recipes/pressable-card.ts
 var pressableCardRecipe = defineRecipe({
   base: {
     appearance: "none",
@@ -6442,13 +6438,13 @@ var accordionSlotRecipe = defineSlotRecipe({
       textAlign: "left",
       width: "full",
       alignItems: "center",
-      fontSize: ["mobile.sm", null, "desktop.sm"],
+      fontSize: ["mobile.sm", "desktop.sm"],
       fontFamily: "body",
       fontWeight: "bold",
       outlineOffset: "-2px",
-      paddingX: [2, null, 3],
-      paddingY: [1, null, 1.5],
-      minHeight: [6, null, 7],
+      paddingX: [2, 3],
+      paddingY: [1, 1.5],
+      minHeight: [6, 7],
       cursor: "pointer",
       _disabled: {
         pointerEvents: "none",
@@ -6457,7 +6453,7 @@ var accordionSlotRecipe = defineSlotRecipe({
     },
     itemContent: {
       borderBottomRadius: "sm",
-      fontSize: ["mobile.sm", null, "desktop.sm"],
+      fontSize: ["mobile.sm", "desktop.sm"],
       color: "text",
       height: "auto",
       overflow: "hidden",
@@ -6472,7 +6468,7 @@ var accordionSlotRecipe = defineSlotRecipe({
     },
     itemBody: {
       paddingY: 2,
-      paddingX: [2, null, 3]
+      paddingX: [2, 3]
     },
     itemIndicator: {
       transition: "rotate 0.2s",
@@ -6774,7 +6770,8 @@ var alertServiceSlotRecipe = defineSlotRecipe({
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
-      padding: [2, null, null, 2],
+      padding: ["2", "3"],
+      paddingBottom: "1",
       borderBottomRadius: "md",
       borderTopRadius: "none",
       width: "full",
@@ -6790,27 +6787,37 @@ var alertServiceSlotRecipe = defineSlotRecipe({
       }
     },
     itemTriggerTitle: {
-      fontSize: ["xs", null, null, "sm"]
+      fontSize: ["mobile.sm", "desktop.sm"]
     },
     notificationText: {
       fontWeight: "400",
-      fontSize: ["2xs", null, null, "xs"],
-      textWrap: "nowrap"
+      fontSize: ["mobile.xs", "desktop.xs"],
+      textWrap: "nowrap",
+      color: "alert.service.text.secondary"
+    },
+    itemContent: {
+      paddingX: ["2", "3"],
+      paddingBottom: ["2", "3"],
+      paddingTop: ["1", "2"]
     },
     itemBody: {
       marginX: "auto",
       padding: "0 !important",
-      paddingBottom: ["0.5", null, null, "1"],
-      color: "text.inverted",
+      color: "alert.service.text.secondary",
+      gap: 0,
+      flexDirection: "column",
+      display: "flex",
       "& > p": {
-        gap: 2,
         width: "full",
         borderBottom: "1px dashed",
         borderColor: "outline.inverted",
-        paddingBottom: "3",
-        paddingTop: "2",
+        paddingY: ["1", "1.5"],
+        _first: {
+          paddingTop: 0
+        },
         _last: {
-          borderBottom: "none"
+          borderBottom: "none",
+          paddingBottom: 0
         }
       }
     }
@@ -6955,7 +6962,6 @@ var choiceChipSlotRecipe = defineSlotRecipe({
       display: "inline-flex",
       alignItems: "center",
       boxAlign: "center",
-      fontSize: "xs",
       cursor: "pointer",
       transitionProperty: "all",
       borderRadius: "xl",
@@ -7008,8 +7014,7 @@ var choiceChipSlotRecipe = defineSlotRecipe({
     label: {
       display: "flex",
       alignItems: "center",
-      gap: "1",
-      fontSize: "xs"
+      gap: "1"
     }
   },
   variants: {
@@ -7021,6 +7026,10 @@ var choiceChipSlotRecipe = defineSlotRecipe({
           },
           height: 5,
           paddingX: 1.5
+        },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "medium"
         }
       },
       sm: {
@@ -7030,6 +7039,10 @@ var choiceChipSlotRecipe = defineSlotRecipe({
           },
           height: 6,
           paddingX: 2
+        },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "bold"
         }
       },
       md: {
@@ -7039,6 +7052,10 @@ var choiceChipSlotRecipe = defineSlotRecipe({
           },
           height: 7,
           paddingX: 2
+        },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold"
         }
       },
       lg: {
@@ -7048,6 +7065,10 @@ var choiceChipSlotRecipe = defineSlotRecipe({
           },
           height: 8,
           paddingX: 3
+        },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold"
         }
       }
     },
@@ -7107,7 +7128,7 @@ var choiceChipSlotRecipe = defineSlotRecipe({
     }
   },
   defaultVariants: {
-    size: "md",
+    size: "sm",
     variant: "core",
     chipType: "choice"
   }
@@ -7166,7 +7187,7 @@ var datePickerSlotRecipe = defineSlotRecipe({
       }
     },
     inputLabel: {
-      fontSize: "mobile.xs",
+      fontSize: ["mobile.xs", "desktop.xs"],
       margin: 0,
       cursor: "text"
     },
@@ -8286,6 +8307,10 @@ var lineIconSlotRecipe = defineSlotRecipe({
       "alt-transport": {
         iconContainer: {
           backgroundColor: "linjetag.altTransport"
+        },
+        icon: {
+          // eslint-disable-next-line spor/use-semantic-tokens
+          color: "darkGrey"
         }
       },
       walk: {
@@ -10072,17 +10097,21 @@ var fontSizes = defineTokens.fontSizes({
   "2xl": { value: tokens23__default.size.font.xl.desktop },
   "3xl": { value: tokens23__default.size.font.xxl.desktop },
   mobile: {
+    "2xs": { value: tokens23__default.size.font["2xs"].mobile },
     xs: { value: tokens23__default.size.font.xs.mobile },
     sm: { value: tokens23__default.size.font.sm.mobile },
     md: { value: tokens23__default.size.font.md.mobile },
+    "md-lg": { value: tokens23__default.size.font["md-lg"].mobile },
     lg: { value: tokens23__default.size.font.lg.mobile },
     xl: { value: tokens23__default.size.font.xl.mobile },
     xxl: { value: tokens23__default.size.font.xxl.mobile }
   },
   desktop: {
+    "2xs": { value: tokens23__default.size.font["2xs"].desktop },
     xs: { value: tokens23__default.size.font.xs.desktop },
     sm: { value: tokens23__default.size.font.sm.desktop },
     md: { value: tokens23__default.size.font.md.desktop },
+    "md-lg": { value: tokens23__default.size.font["md-lg"].desktop },
     lg: { value: tokens23__default.size.font.lg.desktop },
     xl: { value: tokens23__default.size.font.xl.desktop },
     xxl: { value: tokens23__default.size.font.xxl.desktop }
@@ -10652,6 +10681,18 @@ var textStyles = defineTextStyles({
       lineHeight: tokens23__default.font.style.lg["line-height"]
     }
   },
+  "md-lg": {
+    value: {
+      fontSize: [
+        tokens23__default.font.style["md-lg"]["font-size"].mobile,
+        null,
+        null,
+        tokens23__default.font.style["md-lg"]["font-size"].desktop
+      ],
+      fontFamily: tokens23__default.font.style["md-lg"]["font-family"],
+      lineHeight: tokens23__default.font.style["md-lg"]["line-height"]
+    }
+  },
   md: {
     value: {
       fontSize: [
@@ -10687,6 +10728,18 @@ var textStyles = defineTextStyles({
       fontFamily: tokens23__default.font.style.xs["font-family"],
       lineHeight: tokens23__default.font.style.xs["line-height"]
     }
+  },
+  "2xs": {
+    value: {
+      fontSize: [
+        tokens23__default.font.style["2xs"]["font-size"].mobile,
+        null,
+        null,
+        tokens23__default.font.style["2xs"]["font-size"].desktop
+      ],
+      fontFamily: tokens23__default.font.style["2xs"]["font-family"],
+      lineHeight: tokens23__default.font.style["2xs"]["line-height"]
+    }
   }
 });
 var generateTheme = (brand) => {