@vygruppen/spor-react 12.14.0 → 12.14.2

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

@@ -1,4 +1,4 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, useDialogContext, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxCard, Fieldset as Fieldset$1, InputElement, Input as Input$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, VisuallyHidden, defineConfig, CheckboxGroup as CheckboxGroup$1, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
+import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, useDialogContext, Drawer as Drawer$1, usePopoverContext, Checkbox as Checkbox$1, CheckboxCard, Fieldset as Fieldset$1, InputElement, Input as Input$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, VisuallyHidden, defineConfig, CheckboxGroup as CheckboxGroup$1, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, InformationFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React27 from 'react';
@@ -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,19 +1793,11 @@ var DateField = forwardRef(
           css: styles.inputLabel,
           position: "absolute",
           paddingTop: "2px",
-          children: /* @__PURE__ */ jsxs(
-            Label,
-            {
-              padding: "0",
-              fontSize: ["mobile.xs", "desktop.xs"],
-              ...props.labelProps,
-              children: [
-                props.label,
-                " ",
-                /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
-              ]
-            }
-          )
+          children: /* @__PURE__ */ jsxs(Label, { padding: "0", ...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(
@@ -2371,6 +2355,20 @@ var DialogTitle = Dialog.Title;
 var DialogDescription = Dialog.Description;
 var DialogTrigger = Dialog.Trigger;
 var DialogActionTrigger = Dialog.ActionTrigger;
+var ResponsiveButton = ({ label, icon, ...props }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { display: ["none", "flex"], leftIcon: icon, ...props, children: label }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        display: ["flex", "none"],
+        "aria-label": label,
+        icon,
+        ...props
+      }
+    )
+  ] });
+};
 var [RootDrawerProvider, useRootDrawerProps] = createContext$1({
   name: "RootDrawerProvider"
 });
@@ -2417,20 +2415,37 @@ CloseDrawerLine.displayName = "CloseDrawerLine";
 var DrawerCloseTrigger = forwardRef(function DrawerCloseTrigger2(props, ref) {
   const { size } = useRootDrawerProps();
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(Drawer$1.CloseTrigger, { ref, ...props, asChild: true, children: size === "full" ? /* @__PURE__ */ jsx(Button, { variant: "ghost", leftIcon: /* @__PURE__ */ jsx(CloseFill24Icon, {}), children: t(texts12.close) }) : /* @__PURE__ */ jsx(CloseButton, { size: "md" }) });
+  return /* @__PURE__ */ jsx(Drawer$1.CloseTrigger, { ref, ...props, asChild: true, children: size === "full" ? /* @__PURE__ */ jsx(
+    ResponsiveButton,
+    {
+      variant: "ghost",
+      icon: /* @__PURE__ */ jsx(CloseFill24Icon, {}),
+      label: t(texts12.close)
+    }
+  ) : /* @__PURE__ */ jsx(CloseButton, { size: "md" }) });
 });
 var DrawerBackTrigger = forwardRef((props, ref) => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(Drawer$1.CloseTrigger, { asChild: true, ...props, ref, top: "0", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", leftIcon: /* @__PURE__ */ jsx(ArrowLeftFill24Icon, {}), children: t(texts12.back) }) });
+  return /* @__PURE__ */ jsx(Drawer$1.CloseTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsx(
+    ResponsiveButton,
+    {
+      variant: "ghost",
+      icon: /* @__PURE__ */ jsx(ArrowLeftFill24Icon, {}),
+      label: t(texts12.back)
+    }
+  ) });
 });
 DrawerBackTrigger.displayName = "DrawerBackTrigger";
 var DrawerFullScreenHeader = forwardRef((props, ref) => {
   const { backTrigger = true, closeTrigger = true, children } = 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: children && /* @__PURE__ */ jsx(DrawerTitle, { children }) }),
-    closeTrigger && /* @__PURE__ */ jsx(GridItem, { width: "full", alignSelf: "end", children: /* @__PURE__ */ jsx(DrawerCloseTrigger, { justifySelf: "end", top: "0" }) })
-  ] }) });
+  return /* @__PURE__ */ jsxs(Drawer$1.Header, { ...props, ref, children: [
+    /* @__PURE__ */ jsx(Box, { children: backTrigger && /* @__PURE__ */ jsx(DrawerBackTrigger, {}) }),
+    /* @__PURE__ */ jsx(DrawerTitle, { children }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      " ",
+      closeTrigger && /* @__PURE__ */ jsx(DrawerCloseTrigger, {})
+    ] })
+  ] });
 });
 DrawerFullScreenHeader.displayName = "DrawerFullScreenHeader";
 var Drawer = (props) => {
@@ -2928,7 +2943,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);
@@ -3005,7 +3028,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,
@@ -3679,7 +3702,7 @@ var Switch = forwardRef(
             children: [
               /* @__PURE__ */ jsx(Switch$1.HiddenInput, { ref }),
               /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) }),
-              /* @__PURE__ */ jsx(Switch$1.Label, { children: label })
+              label && /* @__PURE__ */ jsx(Switch$1.Label, { children: label })
             ]
           }
         )
@@ -5408,7 +5431,6 @@ var StepperStep = ({
       Text3,
       {
         variant: "xs",
-        fontSize: "1rem",
         color: disabledTextColor,
         cursor: "default",
         paddingX: 2,
@@ -6447,13 +6469,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",
@@ -6462,7 +6484,7 @@ var accordionSlotRecipe = defineSlotRecipe({
     },
     itemContent: {
       borderBottomRadius: "sm",
-      fontSize: ["mobile.sm", null, "desktop.sm"],
+      fontSize: ["mobile.sm", "desktop.sm"],
       color: "text",
       height: "auto",
       overflow: "hidden",
@@ -6477,7 +6499,7 @@ var accordionSlotRecipe = defineSlotRecipe({
     },
     itemBody: {
       paddingY: 2,
-      paddingX: [2, null, 3]
+      paddingX: [2, 3]
     },
     itemIndicator: {
       transition: "rotate 0.2s",
@@ -6779,7 +6801,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",
@@ -6795,27 +6818,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
         }
       }
     }
@@ -6960,7 +6993,6 @@ var choiceChipSlotRecipe = defineSlotRecipe({
       display: "inline-flex",
       alignItems: "center",
       boxAlign: "center",
-      fontSize: "xs",
       cursor: "pointer",
       transitionProperty: "all",
       borderRadius: "xl",
@@ -7013,8 +7045,7 @@ var choiceChipSlotRecipe = defineSlotRecipe({
     label: {
       display: "flex",
       alignItems: "center",
-      gap: "1",
-      fontSize: "xs"
+      gap: "1"
     }
   },
   variants: {
@@ -7026,6 +7057,10 @@ var choiceChipSlotRecipe = defineSlotRecipe({
           },
           height: 5,
           paddingX: 1.5
+        },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "medium"
         }
       },
       sm: {
@@ -7035,6 +7070,10 @@ var choiceChipSlotRecipe = defineSlotRecipe({
           },
           height: 6,
           paddingX: 2
+        },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "bold"
         }
       },
       md: {
@@ -7044,6 +7083,10 @@ var choiceChipSlotRecipe = defineSlotRecipe({
           },
           height: 7,
           paddingX: 2
+        },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold"
         }
       },
       lg: {
@@ -7053,6 +7096,10 @@ var choiceChipSlotRecipe = defineSlotRecipe({
           },
           height: 8,
           paddingX: 3
+        },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold"
         }
       }
     },
@@ -7112,7 +7159,7 @@ var choiceChipSlotRecipe = defineSlotRecipe({
     }
   },
   defaultVariants: {
-    size: "md",
+    size: "sm",
     variant: "core",
     chipType: "choice"
   }
@@ -7171,7 +7218,7 @@ var datePickerSlotRecipe = defineSlotRecipe({
       }
     },
     inputLabel: {
-      fontSize: "mobile.xs",
+      fontSize: ["mobile.xs", "desktop.xs"],
       margin: 0,
       cursor: "text"
     },
@@ -7645,7 +7692,8 @@ var drawerSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      paddingX: ["3", null, null, "5"],
+      paddingX: ["2", null, null, "5"],
+      gap: "1",
       paddingBottom: "1"
     },
     body: {
@@ -8291,6 +8339,10 @@ var lineIconSlotRecipe = defineSlotRecipe({
       "alt-transport": {
         iconContainer: {
           backgroundColor: "linjetag.altTransport"
+        },
+        icon: {
+          // eslint-disable-next-line spor/use-semantic-tokens
+          color: "darkGrey"
         }
       },
       walk: {