@vygruppen/spor-react 13.3.0 → 13.3.2

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode, ComponentProps, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, Combobox as Combobox$1, ComboboxItemProps, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, CheckboxCardRootProps, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, MenuRadioItemGroupProps, MenuRadioItemProps, MenuItemGroupProps as MenuItemGroupProps$1, MenuCheckboxItemProps, MenuSeparatorProps, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, TableColumnHeaderProps as TableColumnHeaderProps$1, TableBodyProps as TableBodyProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, AccordionItemProps, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, Combobox as Combobox$1, ComboboxItemProps, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, CheckboxCardRootProps, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, MenuRadioItemGroupProps, MenuRadioItemProps, MenuItemGroupProps as MenuItemGroupProps$1, MenuCheckboxItemProps, MenuSeparatorProps, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, TableColumnHeaderProps as TableColumnHeaderProps$1, TableBodyProps as TableBodyProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { AspectRatio, Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, ClientOnly, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Icon, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, SystemConfig, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnGroup, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, 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 { IconComponent } from '@vygruppen/spor-icon-react';
 import { CalendarDate, DateDuration, DateValue as DateValue$1 } from '@internationalized/date';
@@ -122,7 +122,7 @@ type AccordionItemContentProps = Accordion$1.ItemContentProps & {
 type ExpandableProps = Omit<AccordionProps & AccordionItemTriggerProps, "title"> & HeadingLevel & {
     title: ReactNode;
 };
-type ExpandableItemProps = HeadingLevel & {
+type ExpandableItemProps = HeadingLevel & Omit<AccordionItemProps, "title"> & {
     value: string;
     title: ReactNode;
     children?: React.ReactNode;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode, ComponentProps, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, Combobox as Combobox$1, ComboboxItemProps, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, CheckboxCardRootProps, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, MenuRadioItemGroupProps, MenuRadioItemProps, MenuItemGroupProps as MenuItemGroupProps$1, MenuCheckboxItemProps, MenuSeparatorProps, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, TableColumnHeaderProps as TableColumnHeaderProps$1, TableBodyProps as TableBodyProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, AccordionItemProps, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, Combobox as Combobox$1, ComboboxItemProps, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, CheckboxCardRootProps, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, MenuRadioItemGroupProps, MenuRadioItemProps, MenuItemGroupProps as MenuItemGroupProps$1, MenuCheckboxItemProps, MenuSeparatorProps, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, TableColumnHeaderProps as TableColumnHeaderProps$1, TableBodyProps as TableBodyProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { AspectRatio, Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, ClientOnly, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Icon, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, SystemConfig, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnGroup, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, 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 { IconComponent } from '@vygruppen/spor-icon-react';
 import { CalendarDate, DateDuration, DateValue as DateValue$1 } from '@internationalized/date';
@@ -122,7 +122,7 @@ type AccordionItemContentProps = Accordion$1.ItemContentProps & {
 type ExpandableProps = Omit<AccordionProps & AccordionItemTriggerProps, "title"> & HeadingLevel & {
     title: ReactNode;
 };
-type ExpandableItemProps = HeadingLevel & {
+type ExpandableItemProps = HeadingLevel & Omit<AccordionItemProps, "title"> & {
     value: string;
     title: ReactNode;
     children?: React.ReactNode;

package/dist/index.mjs

@@ -680,74 +680,52 @@ var badgeRecipie = defineRecipe({
       neutral: {
         backgroundColor: "surface",
         color: "text",
-        "& svg": {
-          color: "icon"
-        }
+        "& svg": { color: "icon" }
       },
       grey: {
         backgroundColor: "surface.neutral",
         color: "text.neutral",
-        "& svg": {
-          color: "icon.neutral"
-        }
+        "& svg": { color: "icon.neutral" }
       },
       green: {
         backgroundColor: "surface.success",
         color: "text.success",
-        "& svg": {
-          color: "icon.success"
-        }
+        "& svg": { color: "icon.success" }
       },
       blue: {
         backgroundColor: "surface.info",
         color: "text.info",
-        "& svg": {
-          color: "icon.info"
-        }
+        "& svg": { color: "icon.info" }
       },
       cream: {
         backgroundColor: "surface.warning",
         color: "text.warning",
-        "& svg": {
-          color: "icon.warning"
-        }
+        "& svg": { color: "icon.warning" }
       },
       yellow: {
         backgroundColor: "surface.notice",
         color: "text.notice",
-        "& svg": {
-          color: "icon.notice"
-        }
+        "& svg": { color: "icon.notice" }
       },
       orange: {
         backgroundColor: "surface.caution",
         color: "text.caution",
-        "& svg": {
-          color: "icon.caution"
-        }
+        "& svg": { color: "icon.caution" }
       },
       red: {
         backgroundColor: "surface.critical",
         color: "text.critical",
-        "& svg": {
-          color: "icon.critical"
-        }
+        "& svg": { color: "icon.critical" }
       },
       brightRed: {
-        backgroundColor: {
-          _light: "brightRed",
-          _dark: "brightRed"
-        },
-        color: {
-          _light: "pink",
-          _dark: "pink"
-        },
-        "& svg": {
-          color: {
-            _light: "pink",
-            _dark: "pink"
-          }
-        }
+        backgroundColor: { _light: "brightRed", _dark: "brightRed" },
+        color: { _light: "pink", _dark: "pink" },
+        "& svg": { color: { _light: "pink", _dark: "pink" } }
+      },
+      disabled: {
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        "& svg": { color: "icon.disabled" }
       }
     },
     size: {
@@ -773,11 +751,7 @@ var badgeRecipie = defineRecipe({
         borderRadius: "xs"
       }
     },
-    attached: {
-      true: {
-        borderBottomRadius: "none"
-      }
-    },
+    attached: { true: { borderBottomRadius: "none" } },
     inverted: { true: {} }
   },
   defaultVariants: {
@@ -791,60 +765,27 @@ var badgeRecipie = defineRecipe({
       colorPalette: "blue",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "darkBlue",
-          _dark: "lightBlue"
-        },
-        color: {
-          _light: "icyBlue",
-          _dark: "royal"
-        },
-        "& svg": {
-          color: {
-            _light: "royal",
-            _dark: "icyBlue"
-          }
-        }
+        backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
+        color: { _light: "icyBlue", _dark: "royal" },
+        "& svg": { color: { _light: "royal", _dark: "icyBlue" } }
       }
     },
     {
       colorPalette: "green",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "darkTeal",
-          _dark: "seaMist"
-        },
-        color: {
-          _light: "mint",
-          _dark: "jungle"
-        },
-        "& svg": {
-          color: {
-            _light: "mint",
-            _dark: "jungle"
-          }
-        }
+        backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
+        color: { _light: "mint", _dark: "jungle" },
+        "& svg": { color: { _light: "mint", _dark: "jungle" } }
       }
     },
     {
       colorPalette: "grey",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "carbon",
-          _dark: "platinum"
-        },
-        color: {
-          _light: "white",
-          _dark: "darkGrey"
-        },
-        "& svg": {
-          color: {
-            _light: "white",
-            _dark: "darkGrey"
-          }
-        }
+        backgroundColor: { _light: "carbon", _dark: "platinum" },
+        color: { _light: "white", _dark: "darkGrey" },
+        "& svg": { color: { _light: "white", _dark: "darkGrey" } }
       }
     },
     {
@@ -852,80 +793,36 @@ var badgeRecipie = defineRecipe({
       colorPalette: "cream",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "coffee",
-          _dark: "blonde"
-        },
-        color: {
-          _light: "cornsilk",
-          _dark: "coffee"
-        },
-        "& svg": {
-          color: {
-            _light: "cornsilk",
-            _dark: "coffee"
-          }
-        }
+        backgroundColor: { _light: "coffee", _dark: "blonde" },
+        color: { _light: "cornsilk", _dark: "coffee" },
+        "& svg": { color: { _light: "cornsilk", _dark: "coffee" } }
       }
     },
     {
       colorPalette: "yellow",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "bronze",
-          _dark: "banana"
-        },
-        color: {
-          _light: "cornsilk",
-          _dark: "coffee"
-        },
-        "& svg": {
-          color: {
-            _light: "cornsilk",
-            _dark: "coffee"
-          }
-        }
+        backgroundColor: { _light: "bronze", _dark: "banana" },
+        color: { _light: "cornsilk", _dark: "coffee" },
+        "& svg": { color: { _light: "cornsilk", _dark: "coffee" } }
       }
     },
     {
       colorPalette: "orange",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "wood",
-          _dark: "champagne"
-        },
-        color: {
-          _light: "bisque",
-          _dark: "wood"
-        },
-        "& svg": {
-          color: {
-            _light: "bisque",
-            _dark: "wood"
-          }
-        }
+        backgroundColor: { _light: "wood", _dark: "champagne" },
+        color: { _light: "bisque", _dark: "wood" },
+        "& svg": { color: { _light: "bisque", _dark: "wood" } }
       }
     },
     {
       colorPalette: "red",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "burgundy",
-          _dark: "lightRed"
-        },
-        color: {
-          _light: "pink",
-          _dark: "maroon"
-        },
-        "& svg": {
-          color: {
-            _light: "pink",
-            _dark: "maroon"
-          }
-        }
+        backgroundColor: { _light: "burgundy", _dark: "lightRed" },
+        color: { _light: "pink", _dark: "maroon" },
+        "& svg": { color: { _light: "pink", _dark: "maroon" } }
       }
     },
     {
@@ -933,20 +830,9 @@ var badgeRecipie = defineRecipe({
       colorPalette: "neutral",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "ink",
-          _dark: "white"
-        },
-        color: {
-          _light: "white",
-          _dark: "darkGrey"
-        },
-        "& svg": {
-          color: {
-            _light: "white",
-            _dark: "darkGrey"
-          }
-        }
+        backgroundColor: { _light: "ink", _dark: "white" },
+        color: { _light: "white", _dark: "darkGrey" },
+        "& svg": { color: { _light: "white", _dark: "darkGrey" } }
       }
     }
   ]
@@ -9051,7 +8937,7 @@ var datePickerSlotRecipe = defineSlotRecipe({
     },
     dateTimeSegment: {
       _focus: {
-        backgroundColor: "surface.ghost.active",
+        backgroundColor: "surface.floating.active",
         color: "text"
       }
     },
@@ -11051,6 +10937,7 @@ var popoverSlotRecipe = defineSlotRecipe({
       outline: "0",
       transformOrigin: "var(--transform-origin)",
       maxHeight: "var(--available-height)",
+      maxWidth: "var(--available-width)",
       _open: {
         animationStyle: "scale-fade-in",
         animationDuration: "fast"