@vygruppen/spor-react 12.4.12 → 12.4.14

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group as Group$1, 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, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, InputElement, 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, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, 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, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-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 React28 from 'react';
 import React28__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, isValidElement, useState, useMemo, useLayoutEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1436,7 +1436,7 @@ var Field3 = React28.forwardRef(
     } = props;
     const recipe = useSlotRecipe({ key: "field" });
     const styles = recipe();
-    return /* @__PURE__ */ jsxs(Stack, { gap: "2", ref, ...rest, width: "100%", children: [
+    return /* @__PURE__ */ jsxs(Stack, { gap: "2", ref, ...rest, children: [
       /* @__PURE__ */ jsxs(
         Field.Root,
         {
@@ -3144,8 +3144,8 @@ var Combobox = (props) => {
   const {
     label,
     loading,
-    lefticon,
-    righticon,
+    leftIcon,
+    rightIcon,
     borderBottomLeftRadius = "sm",
     borderBottomRightRadius = "sm",
     borderTopLeftRadius = "sm",
@@ -3194,7 +3194,7 @@ var Combobox = (props) => {
     paddingLeft,
     paddingX,
     paddingY,
-    lefticon
+    leftIcon
   };
   const {
     inputProps: { ...inputProps },
@@ -3231,6 +3231,7 @@ var Combobox = (props) => {
         borderBottomRightRadius: state.isOpen && !loading ? 0 : borderBottomRightRadius,
         _active: { backgroundColor: "core.surface.active" },
         ...inputProps,
+        startElement: leftIcon,
         endElement: loading ? /* @__PURE__ */ jsx(
           ColorSpinner,
           {
@@ -3244,7 +3245,7 @@ var Combobox = (props) => {
               }
             }
           }
-        ) : righticon,
+        ) : rightIcon,
         placeholder: ""
       }
     ),
@@ -4854,8 +4855,11 @@ var getDeviationLevelIcon = ({
     }
   }
 };
-var ExternalIcon = ({ label }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(LinkOutOutline24Icon, { "aria-hidden": true }),
+var ExternalIcon = ({
+  label,
+  size
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  size === "lg" || size === "md" ? /* @__PURE__ */ jsx(LinkOutOutline24Icon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(LinkOutOutline18Icon, { "aria-hidden": true }),
   /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
 ] });
 var TextLink = forwardRef(
@@ -4868,13 +4872,13 @@ var TextLink = forwardRef(
         ...children.props,
         children: /* @__PURE__ */ jsxs(Fragment, { children: [
           children.props.children,
-          isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel })
+          isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel, size: props.size })
         ] })
       }) });
     }
     return /* @__PURE__ */ jsxs(Link, { href, ...props, ref, children: [
       children,
-      isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel })
+      isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel, size: props.size })
     ] });
   }
 );
@@ -6586,6 +6590,7 @@ var linkRecipe = defineRecipe({
     paddingY: "0",
     color: "inherit",
     display: "inline-flex",
+    alignItems: "center",
     gap: "0",
     position: "relative",
     boxDecorationBreak: "clone",
@@ -6627,7 +6632,25 @@ var linkRecipe = defineRecipe({
           }
         }
       }
+    },
+    size: {
+      xs: {
+        fontSize: { base: "mobile.xs", sm: "desktop.xs" }
+      },
+      sm: {
+        fontSize: { base: "mobile.sm", sm: "desktop.sm" }
+      },
+      md: {
+        fontSize: { base: "mobile.md", sm: "desktop.md" }
+      },
+      lg: {
+        fontSize: { base: "mobile.lg", sm: "desktop.lg" }
+      }
     }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "sm"
   }
 });
 var _a3, _b2;