@vygruppen/spor-react 13.0.2 → 13.1.0

package/dist/index.d.ts

@@ -2,13 +2,13 @@ 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, ComboboxItemProps, Combobox as Combobox$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCardRootProps, Fieldset as Fieldset$1, Input as Input$1, ListRootProps, MenuRootProps, MenuCheckboxItemProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuItemGroupProps as MenuItemGroupProps$1, MenuRadioItemProps, MenuRadioItemGroupProps, MenuSeparatorProps, MenuTriggerItemProps as MenuTriggerItemProps$1, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, SelectLabelProps, 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, TableBodyProps as TableBodyProps$1, TableColumnHeaderProps as TableColumnHeaderProps$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, 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, CheckboxCardRootProps, Fieldset as Fieldset$1, 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';
 export { Time } from '@internationalized/date';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { AriaCalendarProps, DateValue, AriaRangeCalendarProps, AriaButtonProps, AriaDatePickerProps, AriaDateRangePickerProps, RangeCalendarProps as RangeCalendarProps$1, AriaComboBoxProps, AriaListBoxProps } from 'react-aria';
+import { AriaButtonProps, AriaCalendarProps, DateValue, AriaRangeCalendarProps, AriaDatePickerProps, AriaDateRangePickerProps, RangeCalendarProps as RangeCalendarProps$1, AriaComboBoxProps, AriaListBoxProps } from 'react-aria';
 import { CalendarState as CalendarState$1, RangeCalendarState as RangeCalendarState$1, ListState, SelectState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 import { ThemeProviderProps } from 'next-themes';
@@ -25,10 +25,10 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
             };
             itemTrigger: {
                 "&:hover": {
-                    background: "ghost.surface.hover";
+                    background: "surface.ghost.hover";
                 };
                 "&:active": {
-                    backgroundColor: "ghost.surface.active";
+                    backgroundColor: "surface.ghost.active";
                 };
             };
         };
@@ -36,7 +36,7 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
             item: {
                 outline: "solid";
                 outlineWidth: string;
-                outlineColor: "core.outline";
+                outlineColor: "outline.core";
             };
             itemTrigger: {
                 _expanded: {
@@ -44,12 +44,12 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                 };
                 "&:hover": {
                     outlineWidth: string;
-                    outlineColor: "core.outline";
+                    outlineColor: "outline.core";
                     outline: "2px solid";
                     outlineOffset: number;
                 };
                 "&:active": {
-                    backgroundColor: "core.surface.active";
+                    backgroundColor: "surface.core.active";
                     outlineWidth: string;
                     outline: "none";
                 };
@@ -62,7 +62,7 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
             item: {
                 borderRadius: "none";
                 borderBottom: "1px solid";
-                borderBottomColor: "floating.outline.active";
+                borderBottomColor: "outline.neutral";
             };
         };
         floating: {
@@ -70,7 +70,7 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                 outline: "1px solid";
                 outlineWidth: string;
                 boxShadow: "sm";
-                outlineColor: "floating.outline";
+                outlineColor: "outline.floating";
             };
             itemTrigger: {
                 _expanded: {
@@ -79,11 +79,11 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                 "&:hover": {
                     outlineWidth: string;
                     outline: "1px solid";
-                    outlineColor: "floating.outline.hover";
+                    outlineColor: "outline.floating.hover";
                     outlineOffset: number;
                 };
                 "&:active": {
-                    backgroundColor: "floating.surface.active";
+                    backgroundColor: "surface.floating.active";
                     outlineWidth: string;
                     outline: "none";
                 };
@@ -213,117 +213,117 @@ declare const alertExpandableSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"
     variant: {
         important: {
             itemContent: {
-                color: "alert.important.text.secondary";
+                color: "text.warning.subtle";
             };
             itemTrigger: {
                 "&:hover": {
-                    bg: "alert.important.surface.hover";
+                    bg: "surface.warning.hover";
                     outline: "1px solid";
-                    outlineColor: "alert.important.outline.hover";
+                    outlineColor: "outline.warning.hover";
                     outlineOffset: "0px";
                 };
                 "&:active": {
-                    bg: "alert.important.surface.active";
+                    bg: "surface.warning.active";
                 };
             };
             root: {
-                borderColor: "alert.important.outline";
-                bg: "alert.important.surface";
+                borderColor: "outline.warning";
+                bg: "surface.warning";
             };
             title: {
-                color: "alert.important.text";
+                color: "text.warning";
             };
         };
         success: {
             itemContent: {
-                color: "alert.success.text.secondary";
+                color: "text.success.subtle";
             };
             itemTrigger: {
                 "&:hover": {
-                    bg: "alert.success.surface.hover";
+                    bg: "surface.success.hover";
                     outline: "1px solid";
                     outlineOffset: "0px";
-                    outlineColor: "alert.success.outline.hover";
+                    outlineColor: "outline.success.hover";
                     "&:active": {
-                        bg: "alert.success.surface.active";
+                        bg: "surface.success.active";
                     };
                 };
             };
             root: {
-                borderColor: "alert.success.outline";
-                bg: "alert.success.surface";
+                borderColor: "outline.success";
+                bg: "surface.success";
             };
             title: {
-                color: "alert.success.text";
+                color: "text.success";
             };
         };
         alt: {
             itemContent: {
-                color: "alert.alt.text.secondary";
+                color: "text.notice.subtle";
             };
             itemTrigger: {
                 "&:hover": {
-                    bg: "alert.alt.surface.hover";
+                    bg: "surface.notice.hover";
                     outlineOffset: "0px";
                     outline: "1px solid";
-                    outlineColor: "alert.alt.outline.hover";
+                    outlineColor: "outline.notice.hover";
                     "&:active": {
-                        bg: "alert.alt.surface.active";
+                        bg: "surface.notice.active";
                     };
                 };
             };
             root: {
-                borderColor: "alert.alt.outline";
-                bg: "alert.alt.surface";
+                borderColor: "outline.notice";
+                bg: "surface.notice";
             };
             title: {
-                color: "alert.alt.text";
+                color: "text.notice";
             };
         };
         info: {
             itemContent: {
-                color: "alert.info.text.secondary";
+                color: "text.info.subtle";
             };
             itemTrigger: {
                 "&:hover": {
-                    bg: "alert.info.surface.hover";
+                    bg: "surface.info.hover";
                     outlineOffset: "0px";
                     outline: "1px solid";
-                    outlineColor: "alert.info.outline.hover";
+                    outlineColor: "outline.info.hover";
                     "&:active": {
-                        bg: "alert.info.surface.active";
+                        bg: "surface.info.active";
                     };
                 };
             };
             root: {
-                borderColor: "alert.info.outline";
-                bg: "alert.info.surface";
+                borderColor: "outline.info";
+                bg: "surface.info";
             };
             title: {
-                color: "alert.info.text";
+                color: "text.info";
             };
         };
         error: {
             itemContent: {
-                color: "alert.error.text.secondary";
+                color: "text.critical.subtle";
             };
             itemTrigger: {
                 "&:hover": {
-                    bg: "alert.error.surface.hover";
+                    bg: "surface.critical.hover";
                     outlineOffset: "0px";
                     outline: "1px solid";
-                    outlineColor: "alert.error.outline.hover";
+                    outlineColor: "outline.critical.hover";
                     "&:active": {
-                        bg: "alert.error.surface.active";
+                        bg: "surface.critical.active";
                     };
                 };
             };
             root: {
-                borderColor: "alert.error.outline";
-                bg: "alert.error.surface";
+                borderColor: "outline.critical";
+                bg: "surface.critical";
             };
             title: {
-                color: "alert.error.text";
+                color: "text.critical";
             };
         };
     };
@@ -427,40 +427,40 @@ declare const Breadcrumb: ({ ref, children, css, ...props }: BreadcrumbRootProps
 declare const buttonRecipe: _chakra_ui_react.RecipeDefinition<{
     variant: {
         primary: {
-            background: "brand.surface";
-            color: "brand.text";
+            background: "surface.brand";
+            color: "text.brand";
             fontWeight: "bold";
             _hover: {
-                background: "brand.surface.hover";
+                background: "surface.brand.hover";
                 _active: {
-                    background: "brand.surface.active";
+                    background: "surface.brand.active";
                 };
             };
         };
         secondary: {
-            background: "accent.surface";
-            color: "accent.text";
+            background: "surface.accent";
+            color: "text.accent";
             fontWeight: "bold";
             _hover: {
-                background: "accent.surface.hover";
+                background: "surface.accent.hover";
                 _active: {
-                    background: "accent.surface.active";
+                    background: "surface.accent.active";
                 };
             };
         };
         tertiary: {
-            color: "core.text";
+            color: "text.core";
             outline: "solid";
             fontWeight: "normal";
             outlineWidth: string;
-            outlineColor: "core.outline";
+            outlineColor: "outline.core";
             _hover: {
                 outlineWidth: string;
-                outlineColor: "core.outline.hover";
+                outlineColor: "outline.core.hover";
                 _active: {
-                    background: "core.surface.active";
+                    background: "surface.core.active";
                     outlineWidth: string;
-                    outlineColor: "core.outline";
+                    outlineColor: "outline.core";
                 };
             };
             _focus: {
@@ -468,28 +468,28 @@ declare const buttonRecipe: _chakra_ui_react.RecipeDefinition<{
             };
         };
         ghost: {
-            color: "ghost.text";
+            color: "text.ghost";
             fontWeight: "bold";
             _hover: {
-                background: "ghost.surface.hover";
+                background: "surface.ghost.hover";
                 _active: {
-                    background: "ghost.surface.active";
+                    background: "surface.ghost.active";
                 };
             };
         };
         floating: {
-            color: "floating.text";
-            background: "floating.surface";
+            color: "text.floating";
+            background: "surface.floating";
             fontWeight: "bold";
             border: "sm";
-            borderColor: "floating.outline";
+            borderColor: "outline.floating";
             boxShadow: "0px 1px 3px 0px var(--spor-colors-surface-disabled, rgba(0, 0, 0, 0.10))";
             _hover: {
-                borderColor: "floating.outline.hover";
+                borderColor: "outline.floating.hover";
                 _active: {
-                    background: "core.surface.active";
+                    background: "surface.core.active";
                     boxShadow: "none";
-                    borderColor: "floating.outline";
+                    borderColor: "outline.floating";
                 };
             };
         };
@@ -663,12 +663,12 @@ declare const floatingActionButtonSlotRecipe: _chakra_ui_react.SlotRecipeDefinit
     variant: {
         brand: {
             root: {
-                backgroundColor: "brand.surface";
-                color: "brand.text";
+                backgroundColor: "surface.brand";
+                color: "text.brand";
                 _hover: {
-                    backgroundColor: "brand.surface.hover";
+                    backgroundColor: "surface.brand.hover";
                     _active: {
-                        backgroundColor: "brand.surface.active";
+                        backgroundColor: "surface.brand.active";
                     };
                 };
             };
@@ -677,29 +677,29 @@ declare const floatingActionButtonSlotRecipe: _chakra_ui_react.SlotRecipeDefinit
             root: {
                 backgroundColor: "transparent";
                 outline: "1px solid";
-                outlineColor: "core.outline";
-                color: "core.text";
+                outlineColor: "outline.core";
+                color: "text.core";
                 _hover: {
                     backgroundColor: "transparent";
                     outline: "2px solid";
-                    outlineColor: "core.outline";
+                    outlineColor: "outline.core";
                     _active: {
                         outline: "1px solid";
-                        outlineColor: "core.outline";
-                        backgroundColor: "core.surface.active";
+                        outlineColor: "outline.core";
+                        backgroundColor: "surface.core.active";
                     };
                 };
             };
         };
         accent: {
             root: {
-                backgroundColor: "accent.surface";
-                color: "accent.text";
+                backgroundColor: "surface.accent";
+                color: "text.accent";
                 _hover: {
-                    backgroundColor: "accent.surface.hover";
-                    color: "accent.text";
+                    backgroundColor: "surface.accent.hover";
+                    color: "text.accent";
                     _active: {
-                        backgroundColor: "accent.surface.active";
+                        backgroundColor: "surface.accent.active";
                     };
                 };
             };
@@ -847,29 +847,29 @@ declare const pressableCardRecipe: _chakra_ui_react.RecipeDefinition<{
             boxShadow: "0px 1px 3px 0px var(--shadow-color)";
             shadowColor: "surface.disabled";
             border: "sm";
-            borderColor: "floating.outline";
-            backgroundColor: "floating.surface";
+            borderColor: "outline.floating";
+            backgroundColor: "surface.floating";
             _hover: {
                 boxShadow: "0px 2px 6px 0px var(--shadow-color)";
-                backgroundColor: "floating.surface.hover";
-                borderColor: "floating.outline.hover";
+                backgroundColor: "surface.floating.hover";
+                borderColor: "outline.floating.hover";
                 _active: {
                     boxShadow: "none";
-                    backgroundColor: "floating.surface.active";
-                    borderColor: "floating.outline.active";
+                    backgroundColor: "surface.floating.active";
+                    borderColor: "outline.neutral";
                 };
             };
         };
         core: {
-            outlineColor: "core.outline";
+            outlineColor: "outline.core";
             outlineWidth: string;
             outlineStyle: "solid";
             _hover: {
-                outlineColor: "core.outline.hover";
+                outlineColor: "outline.core.hover";
                 outlineWidth: string;
                 outlineStyle: "solid";
                 _active: {
-                    backgroundColor: "core.surface.active";
+                    backgroundColor: "surface.core.active";
                     outlineWidth: string;
                 };
             };
@@ -877,12 +877,12 @@ declare const pressableCardRecipe: _chakra_ui_react.RecipeDefinition<{
         accent: {
             boxShadow: "0px 1px 3px 0px var(--shadow-color)";
             shadowColor: "surface.disabled";
-            background: "alert.success.surface";
+            background: "surface.success";
             _hover: {
-                background: "alert.success.surface.hover";
+                background: "surface.success.hover";
                 boxShadow: "0px 2px 6px 0px var(--shadow-color)";
                 _active: {
-                    background: "alert.success.surface.active";
+                    background: "surface.success.active";
                     boxShadow: "none";
                 };
             };
@@ -928,15 +928,15 @@ declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
     variant: {
         core: {
             item: {
-                outlineColor: "core.outline";
+                outlineColor: "outline.core";
                 outlineWidth: string;
                 outlineStyle: "solid";
                 _hover: {
-                    outlineColor: "core.outline.hover";
+                    outlineColor: "outline.core.hover";
                     outlineWidth: string;
                     outlineStyle: "solid";
                     _active: {
-                        backgroundColor: "core.surface.active";
+                        backgroundColor: "surface.core.active";
                         outlineWidth: string;
                     };
                 };
@@ -944,7 +944,7 @@ declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                     outlineColor: "outline.focus";
                     outlineWidth: string;
                     outlineStyle: "solid";
-                    backgroundColor: "core.surface.active";
+                    backgroundColor: "surface.core.active";
                     _focusVisible: {
                         outlineStyle: "double";
                         outlineWidth: `calc(3 * ${string})`;
@@ -957,15 +957,15 @@ declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                 boxShadow: "0px 1px 3px 0px var(--shadow-color)";
                 shadowColor: "surface.disabled";
                 border: "sm";
-                borderColor: "floating.outline";
-                background: "floating.surface";
+                borderColor: "outline.floating";
+                background: "surface.floating";
                 _hover: {
-                    background: "floating.surface.hover";
-                    borderColor: "floating.outline.hover";
+                    background: "surface.floating.hover";
+                    borderColor: "outline.floating.hover";
                     boxShadow: "0px 2px 6px 0px var(--shadow-color)";
                     _active: {
-                        background: "floating.surface.active";
-                        borderColor: "floating.outline.active";
+                        background: "surface.floating.active";
+                        borderColor: "outline.neutral";
                         boxShadow: "none";
                     };
                 };
@@ -973,7 +973,7 @@ declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                     outlineColor: "outline.focus";
                     outlineWidth: string;
                     outlineStyle: "solid";
-                    backgroundColor: "core.surface.active";
+                    backgroundColor: "surface.core.active";
                     _focusVisible: {
                         outlineStyle: "double";
                         outlineWidth: `calc(3 * ${string})`;
@@ -1028,29 +1028,29 @@ declare const Separator: ({ ref, ...props }: SeparatorProps & {
 declare const staticCardRecipe: _chakra_ui_react.RecipeDefinition<{
     colorPalette: {
         white: {
-            backgroundColor: "surface.color.neutral";
+            backgroundColor: "surface";
             color: "text";
         };
         grey: {
-            backgroundColor: "surface.color.grey";
+            backgroundColor: "surface.neutral";
         };
         yellow: {
-            backgroundColor: "surface.color.cream";
+            backgroundColor: "surface.warning";
         };
         darkYellow: {
-            backgroundColor: "surface.color.yellow";
+            backgroundColor: "surface.notice";
         };
         red: {
-            backgroundColor: "surface.color.red";
+            backgroundColor: "surface.critical";
         };
         green: {
-            backgroundColor: "surface.color.green";
+            backgroundColor: "surface.success";
         };
         blue: {
-            backgroundColor: "surface.color.blue";
+            backgroundColor: "surface.info";
         };
         orange: {
-            backgroundColor: "surface.color.orange";
+            backgroundColor: "surface.caution";
         };
     };
 }>;
@@ -1163,14 +1163,14 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
         core: {
             wrapper: {
                 outline: "1px solid";
-                outlineColor: "core.outline";
+                outlineColor: "outline.core";
                 _hover: {
                     outline: "2px solid";
-                    outlineColor: "core.outline.hover";
+                    outlineColor: "outline.core.hover";
                     _active: {
-                        backgroundColor: "ghost.surface.active";
+                        backgroundColor: "surface.ghost.active";
                         outline: "1px solid";
-                        outlineColor: "core.outline";
+                        outlineColor: "outline.core";
                     };
                     "&[data-active]": {
                         outline: "2px solid";
@@ -1188,17 +1188,17 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
         };
         floating: {
             wrapper: {
-                bg: "floating.surface";
+                bg: "surface.floating";
                 outline: "1px solid";
-                outlineColor: "floating.outline";
+                outlineColor: "outline.floating";
                 boxShadow: "sm";
                 _hover: {
                     outline: "1px solid";
-                    outlineColor: "floating.outline.hover";
+                    outlineColor: "outline.floating.hover";
                     _active: {
-                        backgroundColor: "ghost.surface.active";
+                        backgroundColor: "surface.ghost.active";
                         outline: "1px solid";
-                        outlineColor: "core.outline";
+                        outlineColor: "outline.core";
                     };
                     "&[data-active]": {
                         outline: "2px solid";
@@ -1218,11 +1218,11 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
             wrapper: {
                 _hover: {
                     outline: "2px solid";
-                    outlineColor: "core.outline.hover";
+                    outlineColor: "outline.core.hover";
                     _active: {
-                        backgroundColor: "ghost.surface.active";
+                        backgroundColor: "surface.ghost.active";
                         outline: "1px solid";
-                        outlineColor: "core.outline";
+                        outlineColor: "outline.core";
                     };
                     "&[data-active]": {
                         outline: "2px solid";
@@ -1909,18 +1909,27 @@ declare const Input: ({ ref, startElement, endElement, label, invalid, helperTex
     ref?: React__default.Ref<HTMLInputElement | null>;
 }) => react_jsx_runtime.JSX.Element;
 
+type InputChipProps = TagRootProps & {
+    startIcon?: IconComponent;
+    endIcon?: IconComponent;
+    onClick?: VoidFunction;
+};
+declare const InputChip: ({ startIcon, endIcon, children, ref, ...rest }: InputChipProps & {
+    ref?: React__default.Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+
 declare const listBoxSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "description" | "label", {
     variant: {
         core: {
             root: {
                 outline: "1px solid";
-                outlineColor: "core.outline";
+                outlineColor: "outline.core";
             };
         };
         floating: {
             root: {
                 outline: "1px solid";
-                outlineColor: "floating.outline";
+                outlineColor: "outline.floating";
             };
         };
     };
@@ -2063,14 +2072,14 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
             field: {
                 backgroundColor?: "transparent" | undefined;
                 outline?: "1px solid" | undefined;
-                outlineColor?: "core.outline" | undefined;
+                outlineColor?: "outline.core" | undefined;
                 _hover?: {
                     outline: "2px solid";
-                    outlineColor: "core.outline.hover";
+                    outlineColor: "outline.core.hover";
                     _active: {
                         outline: "1px solid";
                         outlineColor: "outline.disabled";
-                        backgroundColor: "core.surface.active";
+                        backgroundColor: "surface.core.active";
                     };
                 } | undefined;
                 _focus?: {
@@ -2082,17 +2091,17 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
         floating: {
             field: {
                 boxShadow?: "sm" | undefined;
-                bg?: "floating.surface" | undefined;
+                bg?: "surface.floating" | undefined;
                 outline?: "1px solid" | undefined;
-                outlineColor?: "floating.outline" | undefined;
+                outlineColor?: "outline.floating" | undefined;
                 _hover?: {
                     outline: "1px solid";
-                    outlineColor: "floating.outline.hover";
+                    outlineColor: "outline.floating.hover";
                 } | undefined;
                 _active?: {
                     outline: "1px solid";
-                    outlineColor: "floating.outline.active";
-                    backgroundColor: "floating.surface.active";
+                    outlineColor: "outline.neutral";
+                    backgroundColor: "surface.floating.active";
                 } | undefined;
                 focus?: {
                     outline: string;
@@ -2354,9 +2363,12 @@ type SelectItemProps = Select$1.ItemProps & {
     children: React$1.ReactNode;
     description?: React$1.ReactNode;
 };
-declare const SelectItem: ({ ref, ...props }: SelectItemProps & {
-    ref?: React$1.Ref<HTMLDivElement>;
-}) => react_jsx_runtime.JSX.Element;
+declare const SelectItem: {
+    ({ ref, ...props }: SelectItemProps & {
+        ref?: React$1.Ref<HTMLDivElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 type SelectItemGroupProps = Select$1.ItemGroupProps & {
     label: React$1.ReactNode;
     children: React$1.ReactNode;
@@ -2383,6 +2395,7 @@ type SelectValueTextProps = Omit<Select$1.ValueTextProps, "children"> & {
     children?(items: CollectionItem[]): React$1.ReactNode;
     placeholder?: string;
     withPlaceholder?: boolean;
+    multiple?: boolean;
 };
 declare const SelectValueText: ({ ref, ...props }: SelectValueTextProps & {
     ref?: React$1.Ref<HTMLSpanElement>;
@@ -2464,14 +2477,14 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
         core: {
             backgroundColor?: "transparent" | undefined;
             outline?: "1px solid" | undefined;
-            outlineColor?: "core.outline" | undefined;
+            outlineColor?: "outline.core" | undefined;
             _hover?: {
                 outline: "2px solid";
-                outlineColor: "core.outline.hover";
+                outlineColor: "outline.core.hover";
                 _active: {
                     outline: "1px solid";
                     outlineColor: "outline.disabled";
-                    backgroundColor: "core.surface.active";
+                    backgroundColor: "surface.core.active";
                 };
             } | undefined;
             _focus?: {
@@ -2481,17 +2494,17 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
         };
         floating: {
             boxShadow?: "sm" | undefined;
-            bg?: "floating.surface" | undefined;
+            bg?: "surface.floating" | undefined;
             outline?: "1px solid" | undefined;
-            outlineColor?: "floating.outline" | undefined;
+            outlineColor?: "outline.floating" | undefined;
             _hover?: {
                 outline: "1px solid";
-                outlineColor: "floating.outline.hover";
+                outlineColor: "outline.floating.hover";
             } | undefined;
             _active?: {
                 outline: "1px solid";
-                outlineColor: "floating.outline.active";
-                backgroundColor: "floating.surface.active";
+                outlineColor: "outline.neutral";
+                backgroundColor: "surface.floating.active";
             } | undefined;
             focus?: {
                 outline: string;
@@ -3201,7 +3214,7 @@ declare const skeletonRecipe: _chakra_ui_react.RecipeDefinition<{
         };
         none: {
             animation: "none";
-            background: "surface.color.grey";
+            background: "surface.neutral";
         };
     };
 }>;
@@ -3256,14 +3269,14 @@ declare const mediaControllerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"
         play: {
             root: {
                 padding: number;
-                color: "brand.text";
-                backgroundColor: "brand.surface";
+                color: "text.brand";
+                backgroundColor: "surface.brand";
                 _hover: {
-                    color: "brand.text";
-                    backgroundColor: "brand.surface.hover";
+                    color: "text.brand";
+                    backgroundColor: "surface.brand.hover";
                     _active: {
-                        color: "brand.text";
-                        backgroundColor: "brand.surface.active";
+                        color: "text.brand";
+                        backgroundColor: "surface.brand.active";
                     };
                 };
                 _disabled: {
@@ -3276,9 +3289,9 @@ declare const mediaControllerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"
         jumpSkip: {
             root: {
                 _hover: {
-                    backgroundColor: "ghost.surface.hover";
+                    backgroundColor: "surface.ghost.hover";
                     _active: {
-                        backgroundColor: "ghost.surface.active";
+                        backgroundColor: "surface.ghost.active";
                     };
                 };
                 _disabled: {
@@ -3514,7 +3527,7 @@ declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" |
         };
         accent: {
             root: {
-                backgroundColor: "accent.bg";
+                backgroundColor: "bg.accent";
             };
             stepButton: {
                 color: {
@@ -3522,13 +3535,13 @@ declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" |
                     _dark: "whiteAlpha.900";
                 };
                 _disabled: {
-                    color: "core.text";
+                    color: "text.core";
                 };
                 _currentStep: {
-                    color: "accent.text";
+                    color: "text.accent";
                 };
                 _hover: {
-                    backgroundColor: "accent.surface.hover";
+                    backgroundColor: "surface.accent.hover";
                     _disabled: {
                         backgroundColor: "transparent";
                     };
@@ -3536,7 +3549,7 @@ declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" |
             };
             backButton: {
                 _hover: {
-                    backgroundColor: "brand.surface.hover";
+                    backgroundColor: "surface.brand.hover";
                 };
             };
         };
@@ -3632,26 +3645,26 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
     variant: {
         core: {
             list: {
-                color: "core.text";
+                color: "text.core";
                 border: "sm";
             };
             trigger: {
-                color: "core.text";
+                color: "text.core";
                 border: "md";
                 borderColor: "transparent";
                 _hover: {
                     outline: "2px solid";
-                    outlineColor: "core.outline.hover";
+                    outlineColor: "outline.core.hover";
                     outlineOffset: "-2px";
                 };
                 _active: {
-                    backgroundColor: "brand.surface.active";
-                    color: "brand.text";
+                    backgroundColor: "surface.brand.active";
+                    color: "text.brand";
                     outline: "none";
                 };
                 _selected: {
-                    backgroundColor: "brand.surface";
-                    color: "brand.text";
+                    backgroundColor: "surface.brand";
+                    color: "text.brand";
                     _hover: {
                         outline: "none";
                     };
@@ -3664,28 +3677,28 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
         };
         accent: {
             list: {
-                backgroundColor: "accent.bg";
-                color: "accent.text";
+                backgroundColor: "bg.accent";
+                color: "text.accent";
             };
             trigger: {
-                color: "accent.text";
+                color: "text.accent";
                 _disabled: {
                     backgroundColor: "surface.disabled";
                     color: "icon.disabled";
                 };
                 _hover: {
-                    backgroundColor: "accent.surface.hover";
+                    backgroundColor: "surface.accent.hover";
                     _active: {
-                        backgroundColor: "brand.surface.active";
-                        color: "brand.text";
+                        backgroundColor: "surface.brand.active";
+                        color: "text.brand";
                     };
                 };
                 _selected: {
-                    backgroundColor: "brand.surface";
-                    color: "brand.text";
+                    backgroundColor: "surface.brand";
+                    color: "text.brand";
                     _hover: {
-                        backgroundColor: "brand.surface.hover";
-                        color: "brand.text";
+                        backgroundColor: "surface.brand.hover";
+                        color: "text.brand";
                         outline: "none";
                     };
                 };
@@ -3733,7 +3746,7 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                 paddingX: number;
                 _focus: {
                     border: "md";
-                    borderColor: "accent.surface";
+                    borderColor: "surface.accent";
                 };
             };
         };
@@ -3799,10 +3812,10 @@ declare const tableSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "b
                 backgroundColor: "bg";
             };
             header: {
-                backgroundColor: "bg.tertiary";
+                backgroundColor: "bg.brand";
             };
             columnHeader: {
-                color: "text.secondary";
+                color: "text.highlight";
             };
         };
         grey: {
@@ -4102,4 +4115,4 @@ declare const Text: ({ ref, ...props }: TextProps & {
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, type AlertProps, AttachedInputs, type AttachedInputsProps, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, type BadgeProps, Brand, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariantProps, Calendar, CalendarCell, CalendarGrid, CalendarHeader, type CalendarMode, CalendarProvider, type CalendarValue, CardSelect, CardSelectContent, CardSelectTrigger, type CardSelectTriggerProps, CargonetLogo, type CargonetLogoProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, ChoiceChip, type ChoiceChipProps, Clipboard, ClipboardButton, CloseButton, type CloseButtonProps, CloseDrawerLine, Code, ColorInlineLoader, type ColorInlineLoaderProps, type ColorMode, ColorModeButton, ColorModeIcon, ColorModeProvider, type ColorModeProviderProps, ColorSpinner, type ColorSpinnerProps, Combobox, type ComboboxProps, ContentLoader, type ContentLoaderProps, type CountryCodeAndPhoneNumber, DarkFullScreenLoader, DarkInlineLoader, type DarkInlineLoaderProps, DarkSpinner, type DarkSpinnerProps, DatePicker, type DatePickerVariantProps, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field, type FieldBaseProps, FieldErrorText, FieldLabel, type FieldProps, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, type GroupVariantProps, Heading, type HeadingProps, IconButton, type IconButtonProps, InfoTag, type InfoTagProps, Input, type InputProps, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, type LightInlineLoaderProps, LightSpinner, type LightSpinnerProps, LineIcon, type LineIconProps, type LinkProps, List, ListBox, ListIndicator, ListItem, type MediaControllerVariantProps, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, type MenuItemGroupProps, type MenuItemProps, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, type MenuTriggerItemProps, type MenuTriggerProps, NativeSelect, type NativeSelectdProps, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, type NudgeProps, NudgeTrigger, NudgeWizardStep, NumericStepper, type NumericStepperProps, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, type PasswordInputProps, type PasswordVisibilityProps, PhoneNumberInput, PlayPauseButton, Popover, PopoverContent, type PopoverProps, PopoverTrigger, PressableCard, ProgressBar, type ProgressBarProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorVariantProps, ProgressLoader, type ProgressLoaderProps, type ProgressLoaderVariantProps, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, type RadioProps, RangeCalendar, ScrollCalendar, SearchInput, type SearchInputProps, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, type SelectProps, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, SkipButton, type SpinnerProps, SporProvider, StaticCard, type StaticCardProps, Stepper, StepperStep, type StepperVariantProps, SvgBox, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableColumnHeader, type TableColumnHeaderProps, type TableProps, Tabs, TabsContent, TabsIndicator, TabsList, type TabsProps, TabsTrigger, Text, TextLink, type TextProps, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, type TooltipProps, TooltipTrigger, type TranslationObject, type Translations, TravelTag, type TravelTagProps, type UseColorModeReturn, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, type AlertProps, AttachedInputs, type AttachedInputsProps, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, type BadgeProps, Brand, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariantProps, Calendar, CalendarCell, CalendarGrid, CalendarHeader, type CalendarMode, CalendarProvider, type CalendarValue, CardSelect, CardSelectContent, CardSelectTrigger, type CardSelectTriggerProps, CargonetLogo, type CargonetLogoProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, ChoiceChip, type ChoiceChipProps, Clipboard, ClipboardButton, CloseButton, type CloseButtonProps, CloseDrawerLine, Code, ColorInlineLoader, type ColorInlineLoaderProps, type ColorMode, ColorModeButton, ColorModeIcon, ColorModeProvider, type ColorModeProviderProps, ColorSpinner, type ColorSpinnerProps, Combobox, type ComboboxProps, ContentLoader, type ContentLoaderProps, type CountryCodeAndPhoneNumber, DarkFullScreenLoader, DarkInlineLoader, type DarkInlineLoaderProps, DarkSpinner, type DarkSpinnerProps, DatePicker, type DatePickerVariantProps, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field, type FieldBaseProps, FieldErrorText, FieldLabel, type FieldProps, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, type GroupVariantProps, Heading, type HeadingProps, IconButton, type IconButtonProps, InfoTag, type InfoTagProps, Input, InputChip, type InputChipProps, type InputProps, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, type LightInlineLoaderProps, LightSpinner, type LightSpinnerProps, LineIcon, type LineIconProps, type LinkProps, List, ListBox, ListIndicator, ListItem, type MediaControllerVariantProps, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, type MenuItemGroupProps, type MenuItemProps, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, type MenuTriggerItemProps, type MenuTriggerProps, NativeSelect, type NativeSelectdProps, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, type NudgeProps, NudgeTrigger, NudgeWizardStep, NumericStepper, type NumericStepperProps, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, type PasswordInputProps, type PasswordVisibilityProps, PhoneNumberInput, PlayPauseButton, Popover, PopoverContent, type PopoverProps, PopoverTrigger, PressableCard, ProgressBar, type ProgressBarProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorVariantProps, ProgressLoader, type ProgressLoaderProps, type ProgressLoaderVariantProps, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, type RadioProps, RangeCalendar, ScrollCalendar, SearchInput, type SearchInputProps, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, type SelectProps, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, SkipButton, type SpinnerProps, SporProvider, StaticCard, type StaticCardProps, Stepper, StepperStep, type StepperVariantProps, SvgBox, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableColumnHeader, type TableColumnHeaderProps, type TableProps, Tabs, TabsContent, TabsIndicator, TabsList, type TabsProps, TabsTrigger, Text, TextLink, type TextProps, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, type TooltipProps, TooltipTrigger, type TranslationObject, type Translations, TravelTag, type TravelTagProps, type UseColorModeReturn, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };