@vygruppen/spor-react 12.3.5 → 12.4.1

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 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, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, 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';
+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, 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, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, 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 * as React28 from 'react';
@@ -4156,7 +4156,7 @@ var CountryCodeSelect = forwardRef((props, ref) => {
       lazyMount: true,
       "aria-label": t(texts15.countryCode),
       variant: "rightSideSquare",
-      children: callingCodes.items.map((code) => /* @__PURE__ */ jsx(SelectItem, { item: code, children: code.label }, code.label))
+      children: callingCodes.items.map((code) => /* @__PURE__ */ jsx(SelectItem, { as: "option", item: code, children: code.label }, code.label))
     }
   );
 });
@@ -4225,6 +4225,7 @@ var PhoneNumberInput = forwardRef((props, ref) => {
           {
             ref,
             type: "tel",
+            ...props,
             value: value.nationalNumber,
             invalid,
             errorText,
@@ -4238,7 +4239,6 @@ var PhoneNumberInput = forwardRef((props, ref) => {
             },
             variant,
             "data-state": "on",
-            ...props,
             label
           }
         )
@@ -4358,6 +4358,16 @@ var Select = React28.forwardRef(
     ) });
   }
 );
+var SelectLabel = (props) => {
+  const { value } = useSelectContext();
+  return /* @__PURE__ */ jsx(
+    Select$1.Label,
+    {
+      ...props,
+      "data-selected": value.length > 0 ? true : void 0
+    }
+  );
+};
 Select.displayName = "Select";
 var SelectItem = React28.forwardRef(
   (props, ref) => {
@@ -4365,7 +4375,7 @@ var SelectItem = React28.forwardRef(
     const recipe = useSlotRecipe({ key: "select" });
     const styles = recipe();
     return /* @__PURE__ */ jsxs(Select$1.Item, { item, ...rest, ref, css: styles.item, children: [
-      /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
         /* @__PURE__ */ jsx(Select$1.ItemText, { display: "flex", children }),
         description && /* @__PURE__ */ jsx(Box, { css: styles.itemDescription, children: description })
       ] }),
@@ -4430,7 +4440,6 @@ var SelectValueText = React28.forwardRef(function SelectValueText2(props, ref) {
     }
   );
 });
-var SelectLabel = Select$1.Label;
 var SelectItemText = Select$1.ItemText;
 var SelectRoot = Select$1.Root;
 var Switch = forwardRef(
@@ -7116,9 +7125,6 @@ var alertSlotRecipe = defineSlotRecipe({
       border: "sm"
     },
     description: {
-      display: "flex",
-      alignItems: "flex-start",
-      gap: 1.5,
       color: "text"
     },
     content: {
@@ -7129,7 +7135,8 @@ var alertSlotRecipe = defineSlotRecipe({
     },
     title: {
       fontWeight: "bold"
-    }
+    },
+    closeButton: {}
   },
   variants: {
     variant: {
@@ -9201,17 +9208,7 @@ var selectSlotRecipe = defineSlotRecipe({
       flexDirection: "column",
       position: "relative",
       cursor: "pointer",
-      zIndex: "dropdown",
-      "& [data-state='open']": {
-        "& + label": {
-          transform: ["scale(0.825) translateY(-10px)"]
-        }
-      },
-      "&:has(button span:not(:empty))": {
-        "& label": {
-          transform: ["scale(0.825) translateY(-10px)"]
-        }
-      }
+      zIndex: "dropdown"
     },
     label: {
       fontSize: ["mobile.sm", "desktop.sm"],
@@ -9219,7 +9216,11 @@ var selectSlotRecipe = defineSlotRecipe({
       left: 3,
       zIndex: 0,
       position: "absolute",
+      color: "text",
       marginY: 2,
+      _selected: {
+        transform: ["scale(0.825) translateY(-10px)"]
+      },
       transitionProperty: "transform",
       transitionDuration: "fast",
       transformOrigin: "top left",
@@ -9231,6 +9232,7 @@ var selectSlotRecipe = defineSlotRecipe({
       appearance: "none",
       width: "100%",
       height: 8,
+      color: "text",
       paddingY: 1.5,
       paddingX: 3,
       justifyContent: "space-between",
@@ -9281,7 +9283,8 @@ var selectSlotRecipe = defineSlotRecipe({
       _open: {
         animationStyle: "slide-fade-in",
         animationDuration: "fast",
-        zIndex: "popover"
+        zIndex: "popover",
+        outline: "none"
       },
       _closed: {
         animationStyle: "slide-fade-out",
@@ -9301,6 +9304,17 @@ var selectSlotRecipe = defineSlotRecipe({
       color: "ghost.text",
       cursor: "pointer",
       outline: "none",
+      "&[data-highlighted]:hover": {
+        outlineOffset: "2px",
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        backgroundColor: "ghost.surface.hover"
+      },
+      "&[data-highlighted]": {
+        outlineOffset: "2px",
+        outline: "2px solid",
+        outlineColor: "outline.focus"
+      },
       _active: {
         backgroundColor: "ghost.surface.active",
         color: "green"