@vygruppen/spor-react 12.14.0 → 12.14.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.14.0 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.14.1 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-CJS dist/index.cjs           319.89 KB
+CJS dist/index.cjs           320.36 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       636.92 KB
+CJS dist/index.cjs.map       637.96 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2691ms
-ESM dist/index.mjs           298.29 KB
+CJS ⚡️ Build success in 2498ms
+ESM dist/index.mjs           298.78 KB
 ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       636.92 KB
+ESM dist/index.mjs.map       637.96 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2692ms
-DTS ⚡️ Build success in 18936ms
+ESM ⚡️ Build success in 2498ms
+DTS ⚡️ Build success in 19261ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        157.02 KB
+DTS dist/index.d.ts        157.08 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       157.02 KB
+DTS dist/index.d.cts       157.08 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@12.14.0 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.14.1 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-[dotenv@17.2.2] injecting env (0) from .env -- tip: 📡 version env with Radar: https://dotenvx.com/radar
+[dotenv@17.2.2] injecting env (0) from .env -- tip: ⚙️  suppress all logs with { quiet: true }
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @vygruppen/spor-react
 
+## 12.14.1
+
+### Patch Changes
+
+- f582d9c: Resolved padding and overflow issues in the ServiceAlert component
+
+  Also adjust some stylings that were inconsistent with figma for other components.
+
+- 86345da: Correct icon color for alt-transport LineTags.
+
 ## 12.14.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -1228,15 +1228,7 @@ var ServiceAlert = React27.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemContent, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { flexDirection: "row", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
-            react.Accordion.ItemBody,
-            {
-              as: react.Stack,
-              width: contentWidth,
-              css: styles.itemBody,
-              children
-            }
-          ) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemContent, { css: styles.itemContent, children: /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemBody, { maxWidth: contentWidth, css: styles.itemBody, children }) })
         ] })
       }
     );
@@ -1404,7 +1396,7 @@ var Field3 = React27__namespace.forwardRef(
           ]
         }
       ),
-      helperText && /* @__PURE__ */ jsxRuntime.jsx(Text3, { fontSize: "sm", color: "text.tertiary", children: helperText })
+      helperText && /* @__PURE__ */ jsxRuntime.jsx(Text3, { variant: "sm", color: "text.tertiary", children: helperText })
     ] });
   }
 );
@@ -1637,10 +1629,10 @@ var CalendarNavigator = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      react.Box,
+      Text3,
       {
         role: "heading",
-        fontSize: "sm",
+        variant: "md",
         fontWeight: "bold",
         flex: "1",
         textAlign: "center",
@@ -1821,19 +1813,11 @@ var DateField = React27.forwardRef(
           css: styles.inputLabel,
           position: "absolute",
           paddingTop: "2px",
-          children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Label,
-            {
-              padding: "0",
-              fontSize: ["mobile.xs", "desktop.xs"],
-              ...props.labelProps,
-              children: [
-                props.label,
-                " ",
-                /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
-              ]
-            }
-          )
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Label, { padding: "0", ...props.labelProps, children: [
+            props.label,
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
+          ] })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2948,7 +2932,15 @@ function ItemDescription({ children }) {
   const { descriptionProps } = useOptionContext();
   const recipe = react.useSlotRecipe({ key: "listbox" });
   const styles = recipe({});
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ...descriptionProps, css: styles, fontSize: "xs", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Box,
+    {
+      ...descriptionProps,
+      css: styles,
+      fontSize: ["mobile.xs", "desktop.xs"],
+      children
+    }
+  );
 }
 function Option({ item, state }) {
   const ref = React27.useRef(null);
@@ -3025,7 +3017,7 @@ function ListBoxSection({ section, state }) {
         section.rendered && /* @__PURE__ */ jsxRuntime.jsx(
           react.Box,
           {
-            fontSize: "mobile.xs",
+            fontSize: ["mobile.sm", "desktop.sm"],
             color: titleColor,
             paddingTop: 1,
             marginTop: isFirstSection ? 0 : 2,
@@ -5428,7 +5420,6 @@ var StepperStep = ({
       Text3,
       {
         variant: "xs",
-        fontSize: "1rem",
         color: disabledTextColor,
         cursor: "default",
         paddingX: 2,
@@ -6467,13 +6458,13 @@ var accordionSlotRecipe = react.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",
@@ -6482,7 +6473,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
     },
     itemContent: {
       borderBottomRadius: "sm",
-      fontSize: ["mobile.sm", null, "desktop.sm"],
+      fontSize: ["mobile.sm", "desktop.sm"],
       color: "text",
       height: "auto",
       overflow: "hidden",
@@ -6497,7 +6488,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
     },
     itemBody: {
       paddingY: 2,
-      paddingX: [2, null, 3]
+      paddingX: [2, 3]
     },
     itemIndicator: {
       transition: "rotate 0.2s",
@@ -6799,7 +6790,8 @@ var alertServiceSlotRecipe = react.defineSlotRecipe({
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
-      padding: [2, null, null, 2],
+      padding: ["2", "3"],
+      paddingBottom: "1",
       borderBottomRadius: "md",
       borderTopRadius: "none",
       width: "full",
@@ -6815,27 +6807,37 @@ var alertServiceSlotRecipe = react.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
         }
       }
     }
@@ -6980,7 +6982,6 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
       display: "inline-flex",
       alignItems: "center",
       boxAlign: "center",
-      fontSize: "xs",
       cursor: "pointer",
       transitionProperty: "all",
       borderRadius: "xl",
@@ -7033,8 +7034,7 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
     label: {
       display: "flex",
       alignItems: "center",
-      gap: "1",
-      fontSize: "xs"
+      gap: "1"
     }
   },
   variants: {
@@ -7046,6 +7046,10 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
           },
           height: 5,
           paddingX: 1.5
+        },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "medium"
         }
       },
       sm: {
@@ -7055,6 +7059,10 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
           },
           height: 6,
           paddingX: 2
+        },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "bold"
         }
       },
       md: {
@@ -7064,6 +7072,10 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
           },
           height: 7,
           paddingX: 2
+        },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold"
         }
       },
       lg: {
@@ -7073,6 +7085,10 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
           },
           height: 8,
           paddingX: 3
+        },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold"
         }
       }
     },
@@ -7132,7 +7148,7 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
     }
   },
   defaultVariants: {
-    size: "md",
+    size: "sm",
     variant: "core",
     chipType: "choice"
   }
@@ -7191,7 +7207,7 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
       }
     },
     inputLabel: {
-      fontSize: "mobile.xs",
+      fontSize: ["mobile.xs", "desktop.xs"],
       margin: 0,
       cursor: "text"
     },
@@ -8311,6 +8327,10 @@ var lineIconSlotRecipe = react.defineSlotRecipe({
       "alt-transport": {
         iconContainer: {
           backgroundColor: "linjetag.altTransport"
+        },
+        icon: {
+          // eslint-disable-next-line spor/use-semantic-tokens
+          color: "darkGrey"
         }
       },
       walk: {