@vygruppen/spor-react 13.6.0 → 13.7.1

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { Accordion as Accordion$1, defineRecipe, chakra, Code as Code$1, Clipboard as Clipboard$1, RadioCard as RadioCard$1, defineStyle, Field, Dialog, createContext as createContext$1, Drawer as Drawer$1, List as List$1, Combobox, Fieldset as Fieldset$1, createListCollection, Select as Select$1, Popover as Popover$1, createToaster, Tabs as Tabs$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, IconButton as IconButton$1, defineConfig, Center, Box, ClientOnly, VisuallyHidden, useSlotRecipe, Stack, HStack, Progress, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, Separator as Separator$1, useFieldContext, PopoverAnchor, Portal, useDialogContext, Link, InputElement, Input as Input$1, useFilter, useListCollection, useCombobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Tag, ListItem as ListItem$1, Menu as Menu$1, useMenuContext as useMenuContext$1, NativeSelect as NativeSelect$1, useControllableState, RadioGroup as RadioGroup$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, ChakraProvider, Table as Table$1, Toaster as Toaster$1, Toast } 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, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineSlotRecipe, defineStyle, mergeConfigs, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import * as spor_icon_react_star from '@vygruppen/spor-icon-react';
-import { DropdownDownFill24Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, DropdownLeftFill18Icon, ArrowLeftFill24Icon, ErrorFill24Icon, ChangeDirectionOutline24Icon, CheckmarkFill18Icon, CloseOutline24Icon, CloseOutline18Icon, SearchOutline24Icon, SearchOutline18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, ArrowUpFill18Icon, ArrowDownFill18Icon, ChangeDirectionFill18Icon, CopyOutline18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon } from '@vygruppen/spor-icon-react';
+import { DropdownDownFill24Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, DropdownLeftFill18Icon, ArrowLeftFill24Icon, ErrorFill24Icon, ChangeDirectionOutline24Icon, CheckmarkFill18Icon, CloseOutline24Icon, CloseOutline18Icon, SearchOutline24Icon, SearchOutline18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, ArrowUpFill18Icon, ArrowDownFill18Icon, ChangeDirectionFill18Icon, CopyOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, LinkOutOutline30Icon } from '@vygruppen/spor-icon-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React14 from 'react';
 import React14__default, { createContext, useContext, useId, cloneElement, isValidElement, useRef, useEffect, useImperativeHandle, useState, useLayoutEffect, useMemo } from 'react';
@@ -673,58 +673,70 @@ var badgeRecipie = defineRecipe({
     alignItems: "center",
     justifyContent: "center",
     height: "fit-content",
-    gap: "0.5"
+    gap: "0.5",
+    outline: "1px solid",
+    outlineOffset: "-1px"
   },
   variants: {
     colorPalette: {
       neutral: {
         backgroundColor: "surface",
         color: "text",
+        outlineColor: "outline",
         "& svg": { color: "icon" }
       },
       grey: {
         backgroundColor: "surface.neutral",
         color: "text.neutral",
+        outlineColor: "outline.neutral",
         "& svg": { color: "icon.neutral" }
       },
       green: {
         backgroundColor: "surface.success",
         color: "text.success",
+        outlineColor: "outline.success",
         "& svg": { color: "icon.success" }
       },
       blue: {
         backgroundColor: "surface.info",
         color: "text.info",
+        outlineColor: "outline.info",
         "& svg": { color: "icon.info" }
       },
       cream: {
         backgroundColor: "surface.warning",
         color: "text.warning",
+        outlineColor: "outline.warning",
         "& svg": { color: "icon.warning" }
       },
       yellow: {
         backgroundColor: "surface.notice",
         color: "text.notice",
+        outlineColor: "outline.notice",
         "& svg": { color: "icon.notice" }
       },
       orange: {
         backgroundColor: "surface.caution",
         color: "text.caution",
+        outlineColor: "outline.caution",
         "& svg": { color: "icon.caution" }
       },
       red: {
         backgroundColor: "surface.critical",
         color: "text.critical",
+        outlineColor: "outline.critical",
         "& svg": { color: "icon.critical" }
       },
       brightRed: {
         backgroundColor: { _light: "brightRed", _dark: "brightRed" },
         color: { _light: "pink", _dark: "pink" },
+        outlineColor: "outline.error",
         "& svg": { color: { _light: "pink", _dark: "pink" } }
       },
       disabled: {
         backgroundColor: "surface.disabled",
         color: "text.disabled",
+        outlineColor: "outline.disabled",
         "& svg": { color: "icon.disabled" }
       }
     },
@@ -767,6 +779,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
         color: { _light: "icyBlue", _dark: "royal" },
+        outlineColor: { _light: "ocean", _dark: "cloudy" },
         "& svg": { color: { _light: "royal", _dark: "icyBlue" } }
       }
     },
@@ -776,6 +789,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
         color: { _light: "mint", _dark: "jungle" },
+        outlineColor: { _light: "greenHaze", _dark: "coralGreen" },
         "& svg": { color: { _light: "mint", _dark: "jungle" } }
       }
     },
@@ -785,6 +799,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "carbon", _dark: "platinum" },
         color: { _light: "white", _dark: "darkGrey" },
+        outlineColor: { _light: "iron", _dark: "silver" },
         "& svg": { color: { _light: "white", _dark: "darkGrey" } }
       }
     },
@@ -795,6 +810,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "coffee", _dark: "blonde" },
         color: { _light: "cornsilk", _dark: "coffee" },
+        outlineColor: { _light: "bronze", _dark: "banana" },
         "& svg": { color: { _light: "cornsilk", _dark: "coffee" } }
       }
     },
@@ -804,6 +820,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "bronze", _dark: "banana" },
         color: { _light: "cornsilk", _dark: "coffee" },
+        outlineColor: { _light: "golden", _dark: "banana" },
         "& svg": { color: { _light: "cornsilk", _dark: "coffee" } }
       }
     },
@@ -813,6 +830,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "wood", _dark: "champagne" },
         color: { _light: "bisque", _dark: "wood" },
+        outlineColor: { _light: "russet", _dark: "saffron" },
         "& svg": { color: { _light: "bisque", _dark: "wood" } }
       }
     },
@@ -822,6 +840,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "burgundy", _dark: "lightRed" },
         color: { _light: "pink", _dark: "maroon" },
+        outlineColor: { _light: "crimson", _dark: "salmon" },
         "& svg": { color: { _light: "pink", _dark: "maroon" } }
       }
     },
@@ -831,6 +850,7 @@ var badgeRecipie = defineRecipe({
       inverted: true,
       css: {
         backgroundColor: { _light: "ink", _dark: "white" },
+        outlineColor: { _light: "whiteAlpha.400", _dark: "blackAlpha.400" },
         color: { _light: "white", _dark: "darkGrey" },
         "& svg": { color: { _light: "white", _dark: "darkGrey" } }
       }
@@ -1571,7 +1591,7 @@ var RadioCard = ({
     ),
     /* @__PURE__ */ jsxs(RadioCard$1.ItemControl, { id: itemControlId, "aria-hidden": true, children: [
       showIndicator && /* @__PURE__ */ jsx(RadioCard$1.ItemIndicator, {}),
-      children
+      /* @__PURE__ */ jsx(Flex, { direction: "column", children })
     ] })
   ] });
 };
@@ -2089,18 +2109,17 @@ var Field3 = ({
         id,
         gap,
         children: [
-          label && !floatingLabel && /* @__PURE__ */ jsx(Label, { asChild: labelAsChild, "aria-hidden": true, css: styles.label, children: renderLabelWithIndicator(label, labelAsChild) }),
-          children,
+          label && !floatingLabel && /* @__PURE__ */ jsx(Label, { asChild: labelAsChild, css: styles.label, children: renderLabelWithIndicator(label, labelAsChild) }),
           label && floatingLabel && /* @__PURE__ */ jsx(
             FloatingLabel,
             {
               "data-float": shouldFloat ? true : void 0,
               asChild: labelAsChild,
-              "aria-hidden": true,
               css: styles.label,
               children: renderLabelWithIndicator(label, labelAsChild)
             }
           ),
+          children,
           errorText && /* @__PURE__ */ jsx(Field.ErrorText, { "aria-live": "polite", children: errorText })
         ]
       }
@@ -3285,10 +3304,29 @@ var texts14 = createTexts({
 var ExternalIcon = ({
   label,
   size
-}) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  size === "lg" || size === "md" ? /* @__PURE__ */ jsx(LinkOutOutline24Icon, { "aria-hidden": true, display: "inline" }) : /* @__PURE__ */ jsx(LinkOutOutline18Icon, { "aria-hidden": true, display: "inline" }),
-  /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
-] });
+}) => {
+  const getIcon = () => {
+    switch (size) {
+      case "lg": {
+        return /* @__PURE__ */ jsx(LinkOutOutline30Icon, { "aria-hidden": true, display: "inline" });
+      }
+      case "md": {
+        return /* @__PURE__ */ jsx(LinkOutOutline24Icon, { "aria-hidden": true, display: "inline" });
+      }
+      case "sm": {
+        return /* @__PURE__ */ jsx(LinkOutOutline18Icon, { "aria-hidden": true, display: "inline" });
+      }
+      default: {
+        return /* @__PURE__ */ jsx(LinkOutOutline24Icon, { "aria-hidden": true, display: "inline" });
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("span", { style: { whiteSpace: "nowrap" }, children: [
+    "\u2060",
+    getIcon(),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
+  ] });
+};
 var TextLink = ({
   ref,
   children,
@@ -3649,6 +3687,7 @@ function Autocomplete({
   openOnClick = true,
   openOnFocus = true,
   ref,
+  size = "md",
   ...rest
 }) {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -3707,7 +3746,8 @@ function Autocomplete({
             onFocus == null ? void 0 : onFocus(event);
             if (openOnFocus && filteredChildren.length > 0)
               combobox.setOpen(true);
-          }
+          },
+          size
         }
       ) }),
       /* @__PURE__ */ jsx(Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsx(Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts16.clearValue), children: /* @__PURE__ */ jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
@@ -6680,31 +6720,38 @@ var createToast = ({
   duration = 6e3,
   width = "sm",
   action,
-  closable = false
+  closable = false,
+  inverted = false
 }) => toaster.create({
   description: text,
   type: variant,
   id: id ?? crypto.randomUUID(),
   duration,
   action,
-  meta: { width },
+  meta: { width, inverted },
   closable
 });
 var Toaster = () => {
   return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Toaster$1, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
-    var _a6;
+    var _a6, _b5;
     return /* @__PURE__ */ jsxs(
       Toast.Root,
       {
         width: { md: (_a6 = toast.meta) == null ? void 0 : _a6.width },
-        border: "sm",
-        borderColor: `outline.${toast.type}`,
-        boxShadow: "sm",
+        "data-inverted": ((_b5 = toast.meta) == null ? void 0 : _b5.inverted) ? "" : void 0,
         role: "alert",
         children: [
           /* @__PURE__ */ jsx(AlertIcon, { variant: toast.type }),
           /* @__PURE__ */ jsx(Stack, { gap: "1", flex: "1", maxWidth: "100%", children: /* @__PURE__ */ jsx(Toast.Description, { children: toast.description }) }),
-          toast.action && /* @__PURE__ */ jsx(Toast.ActionTrigger, { onClick: toast.action.onClick, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", children: toast.action.label }) }),
+          toast.action && /* @__PURE__ */ jsx(Toast.ActionTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "xs",
+              onClick: toast.action.onClick,
+              children: toast.action.label
+            }
+          ) }),
           toast.closable && /* @__PURE__ */ jsx(Toast.CloseTrigger, { children: /* @__PURE__ */ jsx(CloseButton, { size: "xs" }) })
         ]
       }
@@ -7376,6 +7423,10 @@ var inputRecipe = defineRecipe({
         _focus: {
           outline: "2px solid",
           outlineColor: "outline.focus"
+        },
+        "&:-webkit-autofill, &:-webkit-autofill:focus": {
+          boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset",
+          WebkitTextFillColor: "var(--spor-colors-text)"
         }
       },
       floating: {
@@ -7395,6 +7446,10 @@ var inputRecipe = defineRecipe({
         focus: {
           outline: "1px solid",
           outlineColor: "outline.focus"
+        },
+        "&:-webkit-autofill, &:-webkit-autofill:focus": {
+          boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset",
+          WebkitTextFillColor: "var(--spor-colors-text)"
         }
       }
     },
@@ -7568,13 +7623,14 @@ var separatorRecipe = defineRecipe({
         borderStyle: "solid"
       },
       dashed: {
+        "--dash-color": "var(--spor-colors-outline)",
         borderImageSlice: 1,
         borderImageSource: `repeating-linear-gradient(
             var(--gradient-direction),
-            var(--spor-colors-outline-disabled) 0,
-            var(--spor-colors-outline-disabled) var(--dash-size),
+            var(--dash-color) 0,
+            var(--dash-color) var(--dash-size),
             transparent var(--dash-size),
-            transparent calc(var(--dash-size) + var(--dash-gap))
+            transparent calc(var(--dash-size) + var(--dash-gap))         
           )`
       }
     },
@@ -10348,7 +10404,7 @@ var inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.xs",
           paddingX: "1.5",
-          paddingY: "0",
+          height: 5,
           fontWeight: "normal",
           borderRadius: "xs"
         }
@@ -10357,17 +10413,16 @@ var inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.sm",
           paddingX: "2",
-          paddingY: "0.5",
+          height: 6,
           fontWeight: "bold",
           borderRadius: "9px"
         }
       },
       md: {
         root: {
-          padding: 5,
           fontSize: "desktop.md",
           paddingX: "2",
-          paddingY: "1",
+          height: 7,
           fontWeight: "bold",
           borderRadius: "sm"
         }
@@ -10376,7 +10431,7 @@ var inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.md",
           paddingX: "2",
-          paddingY: "3",
+          height: "8",
           fontWeight: "bold",
           borderRadius: "md"
         }
@@ -11533,6 +11588,11 @@ var selectSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.error"
       }
     },
+    valueText: {
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden"
+    },
     itemText: {
       flex: "1",
       alignItems: "center"
@@ -12273,6 +12333,7 @@ var toastSlotRecipe = defineSlotRecipe({
       translate: "var(--x) var(--y)",
       opacity: "var(--opacity)",
       willChange: "translate, opacity, scale",
+      outline: "1px solid",
       borderRadius: "sm",
       transition: "translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms",
       transitionTimingFunction: "cubic-bezier(0.21, 1.02, 0.73, 1)",
@@ -12280,16 +12341,52 @@ var toastSlotRecipe = defineSlotRecipe({
         transition: "translate 400ms, scale 400ms, opacity 200ms",
         transitionTimingFunction: "cubic-bezier(0.06, 0.71, 0.55, 1)"
       },
-      boxShadow: "xl",
+      boxShadow: "sm",
       color: "text",
       "&[data-type=success]": {
-        backgroundColor: "surface.success"
+        backgroundColor: "surface.success",
+        outlineColor: "outline.success"
       },
       "&[data-type=error]": {
-        backgroundColor: "surface.critical"
+        backgroundColor: "surface.critical",
+        outlineColor: "outline.critical"
       },
       "&[data-type=info]": {
-        backgroundColor: "surface.info"
+        backgroundColor: "surface.info",
+        outlineColor: "outline.info"
+      },
+      "&[data-inverted][data-type=success]": {
+        backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
+        color: { _light: "mint", _dark: "jungle" },
+        outlineColor: { _light: "greenHaze", _dark: "coralGreen" },
+        "& path:first-of-type": {
+          fill: { _light: "mint", _dark: "jungle" }
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "darkTeal", _dark: "seaMist" }
+        }
+      },
+      "&[data-inverted][data-type=error]": {
+        backgroundColor: { _light: "burgundy", _dark: "lightRed" },
+        color: { _light: "pink", _dark: "maroon" },
+        outlineColor: { _light: "crimson", _dark: "salmon" },
+        "& path:first-of-type": {
+          fill: { _light: "pink", _dark: "maroon" }
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "burgundy", _dark: "lightRed" }
+        }
+      },
+      "&[data-inverted][data-type=info]": {
+        backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
+        color: { _light: "icyBlue", _dark: "royal" },
+        outlineColor: { _light: "ocean", _dark: "cloudy" },
+        "& path:first-of-type": {
+          fill: { _light: "icyBlue", _dark: "navy" }
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "darkBlue", _dark: "lightBlue" }
+        }
       }
     },
     title: {