@vygruppen/spor-react 13.6.0 → 13.7.0

package/dist/index.d.cts

@@ -1769,7 +1769,7 @@ type Props = {
     openOnFocus?: boolean;
     ref?: React__default.Ref<HTMLInputElement | null>;
 } & Omit<ComboboxRootProps, "collection"> & FieldProps;
-declare function Autocomplete({ variant, children, css, label, leftIcon, onInputValueChange, invalid, helperText, errorText, required, filteredExternally, loading, disabled, emptyLabel, onFocus, openOnClick, openOnFocus, ref, ...rest }: Props): react_jsx_runtime.JSX.Element;
+declare function Autocomplete({ variant, children, css, label, leftIcon, onInputValueChange, invalid, helperText, errorText, required, filteredExternally, loading, disabled, emptyLabel, onFocus, openOnClick, openOnFocus, ref, size, ...rest }: Props): react_jsx_runtime.JSX.Element;
 declare const AutocompleteItemGroup: React__default.ForwardRefExoticComponent<Combobox$1.ItemGroupProps & React__default.RefAttributes<HTMLDivElement>>;
 declare const AutocompleteItemGroupLabel: React__default.ForwardRefExoticComponent<_chakra_ui_react.ComboboxItemGroupLabelProps & React__default.RefAttributes<HTMLDivElement>>;
 declare const AutocompleteItem: ({ children, ...props }: ComboboxItemProps) => react_jsx_runtime.JSX.Element;
@@ -2368,6 +2368,10 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
                     outline: "2px solid";
                     outlineColor: "outline.focus";
                 } | undefined;
+                "&:-webkit-autofill, &:-webkit-autofill:focus"?: {
+                    boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
+                    WebkitTextFillColor: "var(--spor-colors-text)";
+                } | undefined;
             };
         };
         floating: {
@@ -2389,6 +2393,10 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
                     outline: string;
                     outlineColor: string;
                 } | undefined;
+                "&:-webkit-autofill, &:-webkit-autofill:focus"?: {
+                    boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
+                    WebkitTextFillColor: "var(--spor-colors-text)";
+                } | undefined;
             };
         };
     };
@@ -2792,6 +2800,10 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
                 outline: "2px solid";
                 outlineColor: "outline.focus";
             } | undefined;
+            "&:-webkit-autofill, &:-webkit-autofill:focus"?: {
+                boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
+                WebkitTextFillColor: "var(--spor-colors-text)";
+            } | undefined;
         };
         floating: {
             boxShadow?: "sm" | undefined;
@@ -2811,6 +2823,10 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
                 outline: string;
                 outlineColor: string;
             } | undefined;
+            "&:-webkit-autofill, &:-webkit-autofill:focus"?: {
+                boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
+                WebkitTextFillColor: "var(--spor-colors-text)";
+            } | undefined;
         };
     };
 }>;
@@ -4297,8 +4313,9 @@ type ToastProps = {
     id?: string;
     action?: ToastAction;
     closable?: boolean;
+    inverted?: boolean;
 } & Pick<BoxProps, "width">;
-declare const createToast: ({ text, variant, id, duration, width, action, closable, }: ToastProps) => string;
+declare const createToast: ({ text, variant, id, duration, width, action, closable, inverted, }: ToastProps) => string;
 
 declare const Tooltip: React$1.FC<Tooltip$1.RootProps>;
 declare const TooltipTrigger: ({ ref, children, ...props }: Tooltip$1.TriggerProps & {

package/dist/index.d.ts

@@ -1769,7 +1769,7 @@ type Props = {
     openOnFocus?: boolean;
     ref?: React__default.Ref<HTMLInputElement | null>;
 } & Omit<ComboboxRootProps, "collection"> & FieldProps;
-declare function Autocomplete({ variant, children, css, label, leftIcon, onInputValueChange, invalid, helperText, errorText, required, filteredExternally, loading, disabled, emptyLabel, onFocus, openOnClick, openOnFocus, ref, ...rest }: Props): react_jsx_runtime.JSX.Element;
+declare function Autocomplete({ variant, children, css, label, leftIcon, onInputValueChange, invalid, helperText, errorText, required, filteredExternally, loading, disabled, emptyLabel, onFocus, openOnClick, openOnFocus, ref, size, ...rest }: Props): react_jsx_runtime.JSX.Element;
 declare const AutocompleteItemGroup: React__default.ForwardRefExoticComponent<Combobox$1.ItemGroupProps & React__default.RefAttributes<HTMLDivElement>>;
 declare const AutocompleteItemGroupLabel: React__default.ForwardRefExoticComponent<_chakra_ui_react.ComboboxItemGroupLabelProps & React__default.RefAttributes<HTMLDivElement>>;
 declare const AutocompleteItem: ({ children, ...props }: ComboboxItemProps) => react_jsx_runtime.JSX.Element;
@@ -2368,6 +2368,10 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
                     outline: "2px solid";
                     outlineColor: "outline.focus";
                 } | undefined;
+                "&:-webkit-autofill, &:-webkit-autofill:focus"?: {
+                    boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
+                    WebkitTextFillColor: "var(--spor-colors-text)";
+                } | undefined;
             };
         };
         floating: {
@@ -2389,6 +2393,10 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
                     outline: string;
                     outlineColor: string;
                 } | undefined;
+                "&:-webkit-autofill, &:-webkit-autofill:focus"?: {
+                    boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
+                    WebkitTextFillColor: "var(--spor-colors-text)";
+                } | undefined;
             };
         };
     };
@@ -2792,6 +2800,10 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
                 outline: "2px solid";
                 outlineColor: "outline.focus";
             } | undefined;
+            "&:-webkit-autofill, &:-webkit-autofill:focus"?: {
+                boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
+                WebkitTextFillColor: "var(--spor-colors-text)";
+            } | undefined;
         };
         floating: {
             boxShadow?: "sm" | undefined;
@@ -2811,6 +2823,10 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
                 outline: string;
                 outlineColor: string;
             } | undefined;
+            "&:-webkit-autofill, &:-webkit-autofill:focus"?: {
+                boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
+                WebkitTextFillColor: "var(--spor-colors-text)";
+            } | undefined;
         };
     };
 }>;
@@ -4297,8 +4313,9 @@ type ToastProps = {
     id?: string;
     action?: ToastAction;
     closable?: boolean;
+    inverted?: boolean;
 } & Pick<BoxProps, "width">;
-declare const createToast: ({ text, variant, id, duration, width, action, closable, }: ToastProps) => string;
+declare const createToast: ({ text, variant, id, duration, width, action, closable, inverted, }: ToastProps) => string;
 
 declare const Tooltip: React$1.FC<Tooltip$1.RootProps>;
 declare const TooltipTrigger: ({ ref, children, ...props }: Tooltip$1.TriggerProps & {

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';
@@ -3285,10 +3285,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 +3668,7 @@ function Autocomplete({
   openOnClick = true,
   openOnFocus = true,
   ref,
+  size = "md",
   ...rest
 }) {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -3707,7 +3727,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 +6701,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 +7404,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 +7427,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 +7604,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 +10385,7 @@ var inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.xs",
           paddingX: "1.5",
-          paddingY: "0",
+          height: 5,
           fontWeight: "normal",
           borderRadius: "xs"
         }
@@ -10357,17 +10394,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 +10412,7 @@ var inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.md",
           paddingX: "2",
-          paddingY: "3",
+          height: "8",
           fontWeight: "bold",
           borderRadius: "md"
         }
@@ -12273,6 +12309,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 +12317,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: {