@vygruppen/spor-react 12.14.0 → 12.14.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.14.0",
+  "version": "12.14.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,8 +47,8 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.2.0",
-    "@vygruppen/spor-icon-react": "4.2.1",
-    "@vygruppen/spor-loader": "0.7.0"
+    "@vygruppen/spor-loader": "0.7.0",
+    "@vygruppen/spor-icon-react": "4.2.1"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/alert/ServiceAlert.tsx

@@ -6,7 +6,6 @@ import {
   HStack,
   RecipeVariantProps,
   Span,
-  Stack,
   Text,
   useSlotRecipe,
 } from "@chakra-ui/react";
@@ -127,16 +126,10 @@ export const ServiceAlert = forwardRef<HTMLDivElement, ServiceAlertProps>(
             </HStack>
           </Accordion.ItemTrigger>
 
-          <Accordion.ItemContent asChild>
-            <Stack flexDirection="row" width="100%">
-              <Accordion.ItemBody
-                as={Stack}
-                width={contentWidth}
-                css={styles.itemBody}
-              >
-                {children}
-              </Accordion.ItemBody>
-            </Stack>
+          <Accordion.ItemContent css={styles.itemContent}>
+            <Accordion.ItemBody maxWidth={contentWidth} css={styles.itemBody}>
+              {children}
+            </Accordion.ItemBody>
           </Accordion.ItemContent>
         </Accordion.Item>
       </Accordion.Root>

package/src/datepicker/CalendarHeader.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Box, Flex } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { getLocalTimeZone } from "@internationalized/date";
 import {
   ArrowLeftOutline24Icon,
@@ -7,6 +7,8 @@ import {
 } from "@vygruppen/spor-icon-react";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
+import { Text } from "@/typography";
+
 import { createTexts, useTranslation } from "../i18n";
 import { CalendarNavigationButton } from "./CalendarNavigationButton";
 import { useCurrentLocale } from "./utils";
@@ -103,16 +105,16 @@ export const CalendarNavigator = ({
         icon={<ArrowLeftOutline24Icon />}
         aria-label={`${t(texts.previous)} ${t(texts[unit])}`}
       />
-      <Box
+      <Text
         role="heading"
-        fontSize="sm"
+        variant="md"
         fontWeight="bold"
         flex="1"
         textAlign="center"
         color={"core.text"}
       >
         {capitalize(title)}
-      </Box>
+      </Text>
       <CalendarNavigationButton
         onPress={onNext}
         isDisabled={isNextDisabled}

package/src/datepicker/DateField.tsx

@@ -63,11 +63,7 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
             position="absolute"
             paddingTop="2px"
           >
-            <Label
-              padding="0"
-              fontSize={["mobile.xs", "desktop.xs"]}
-              {...props.labelProps}
-            >
+            <Label padding="0" {...props.labelProps}>
               {props.label} <Field.RequiredIndicator />
             </Label>
           </Box>

package/src/input/Field.tsx

@@ -104,7 +104,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           )}
         </ChakraField.Root>
         {helperText && (
-          <Text fontSize="sm" color="text.tertiary">
+          <Text variant="sm" color="text.tertiary">
             {helperText}
           </Text>
         )}

package/src/input/ListBox.tsx

@@ -127,7 +127,11 @@ export function ItemDescription({ children }: { children: React.ReactNode }) {
   const recipe = useSlotRecipe({ key: "listbox" });
   const styles = recipe({});
   return (
-    <Box {...descriptionProps} css={styles} fontSize={"xs"}>
+    <Box
+      {...descriptionProps}
+      css={styles}
+      fontSize={["mobile.xs", "desktop.xs"]}
+    >
       {children}
     </Box>
   );
@@ -233,7 +237,7 @@ function ListBoxSection({ section, state }: ListBoxSectionProps) {
       >
         {section.rendered && (
           <Box
-            fontSize="mobile.xs"
+            fontSize={["mobile.sm", "desktop.sm"]}
             color={titleColor}
             paddingTop={1}
             marginTop={isFirstSection ? 0 : 2}

package/src/stepper/StepperStep.tsx

@@ -44,7 +44,6 @@ export const StepperStep = ({
       {disabled ? (
         <Text
           variant="xs"
-          fontSize="1rem"
           color={disabledTextColor}
           cursor="default"
           paddingX={2}

package/src/theme/slot-recipes/accordion.ts

@@ -22,13 +22,13 @@ export const 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",
@@ -37,7 +37,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
     },
     itemContent: {
       borderBottomRadius: "sm",
-      fontSize: ["mobile.sm", null, "desktop.sm"],
+      fontSize: ["mobile.sm", "desktop.sm"],
       color: "text",
       height: "auto",
       overflow: "hidden",
@@ -52,7 +52,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
     },
     itemBody: {
       paddingY: 2,
-      paddingX: [2, null, 3],
+      paddingX: [2, 3],
     },
     itemIndicator: {
       transition: "rotate 0.2s",

package/src/theme/slot-recipes/alert-service.ts

@@ -22,7 +22,8 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
-      padding: [2, null, null, 2],
+      padding: ["2", "3"],
+      paddingBottom: "1",
       borderBottomRadius: "md",
       borderTopRadius: "none",
       width: "full",
@@ -39,27 +40,41 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       },
     },
     itemTriggerTitle: {
-      fontSize: ["xs", null, null, "sm"],
+      fontSize: ["mobile.sm", "desktop.sm"],
     },
     notificationText: {
       fontWeight: "400",
-      fontSize: ["2xs", null, null, "xs"],
+      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",
+          paddingBottom: 0,
         },
       },
     },

package/src/theme/slot-recipes/choice-chip.ts

@@ -10,7 +10,6 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
       display: "inline-flex",
       alignItems: "center",
       boxAlign: "center",
-      fontSize: "xs",
       cursor: "pointer",
       transitionProperty: "all",
       borderRadius: "xl",
@@ -69,7 +68,6 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       gap: "1",
-      fontSize: "xs",
     },
   },
 
@@ -83,6 +81,10 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
           height: 5,
           paddingX: 1.5,
         },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "medium",
+        },
       },
       sm: {
         root: {
@@ -92,6 +94,10 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
           height: 6,
           paddingX: 2,
         },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "bold",
+        },
       },
       md: {
         root: {
@@ -101,6 +107,10 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
           height: 7,
           paddingX: 2,
         },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold",
+        },
       },
       lg: {
         root: {
@@ -110,6 +120,10 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
           height: 8,
           paddingX: 3,
         },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold",
+        },
       },
     },
 
@@ -176,7 +190,7 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
   },
 
   defaultVariants: {
-    size: "md",
+    size: "sm",
     variant: "core",
     chipType: "choice",
   },

package/src/theme/slot-recipes/datepicker.ts

@@ -37,7 +37,7 @@ export const datePickerSlotRecipe = defineSlotRecipe({
       },
     },
     inputLabel: {
-      fontSize: "mobile.xs",
+      fontSize: ["mobile.xs", "desktop.xs"],
       margin: 0,
       cursor: "text",
     },

package/src/theme/slot-recipes/line-icon.ts

@@ -74,6 +74,10 @@ export const lineIconSlotRecipe = defineSlotRecipe({
         iconContainer: {
           backgroundColor: "linjetag.altTransport",
         },
+        icon: {
+          // eslint-disable-next-line spor/use-semantic-tokens
+          color: "darkGrey",
+        },
       },
       walk: {
         title: {