@vygruppen/spor-react 3.8.1 → 4.0.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.8.1 build
+> @vygruppen/spor-react@4.0.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-HCSXVAA5.mjs".
 DTS Build start
-CJS dist/index.js 548.76 KB
-CJS ⚡️ Build success in 2577ms
-ESM dist/index.mjs                      2.09 KB
-ESM dist/CountryCodeSelect-UG3JHWO3.mjs 1.19 KB
-ESM dist/chunk-HCSXVAA5.mjs             438.31 KB
-ESM ⚡️ Build success in 2578ms
-DTS ⚡️ Build success in 12922ms
-DTS dist/index.d.ts  264.69 KB
-DTS dist/index.d.mts 264.69 KB
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-3SY4N6MP.mjs".
+CJS dist/index.js 550.61 KB
+CJS ⚡️ Build success in 3780ms
+ESM dist/index.mjs                      2.10 KB
+ESM dist/CountryCodeSelect-HCQZVKWU.mjs 1.19 KB
+ESM dist/chunk-3SY4N6MP.mjs             439.68 KB
+ESM ⚡️ Build success in 3781ms
+DTS ⚡️ Build success in 18223ms
+DTS dist/index.d.ts  264.40 KB
+DTS dist/index.d.mts 264.40 KB

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @vygruppen/spor-react
 
+## 4.0.1
+
+### Patch Changes
+
+- 0450ca0a: DatePicker, DateRangePicker: Fix visual regressions
+
+## 4.0.0
+
+### Major Changes
+
+- 8d9d381c: This major version removes a bunch of deprecated properties, and revamps our Datepicker component.
+
+  To migrate, please follow the following instructions:
+
+  DatePicker, DateRangePicker: `variant="simple"` and `variant="with-trigger"` has been removed (without a deprecation warning – sorry! 🙈). In their place, you'll find "base", "floating" and "ghost".
+
+  Button: The deprecated `variant="tertiary" is removed. To migrate, use `variant="secondary"` instead.
+
+  TextLink: The deprecated `variant="tertiary" is removed. To migrate, use `variant="secondary"` instead.
+
+  FloatingActionButton: The deprecated variants "green", "light" and "dark" are deprecated. To migrate, use "accent" for all three versions.
+
+  Tabs: The deprecated color schemes "dark", "light", "green" and "grey" are all removed. For "dark" and "green", please use "accent". For "light" and "grey", please use "default"
+
+### Minor Changes
+
+- 8d9d381c: Add new Portal component
+
+### Patch Changes
+
+- 7b828801: Drawer: added dark mode support
+- 342931bc: Popover: Add dark mode support
+
 ## 3.8.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-UG3JHWO3.mjs → CountryCodeSelect-HCQZVKWU.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-HCSXVAA5.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-3SY4N6MP.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-HCSXVAA5.mjs → chunk-3SY4N6MP.mjs}

@@ -1,5 +1,5 @@
 import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, Flex, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
-export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
+export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
@@ -3777,7 +3777,7 @@ var DatePicker = forwardRef$1(
     const onFieldClick = () => {
       state2.setOpen(true);
     };
-    const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles3.calendar }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(
+    const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { color: "darkGrey", sx: styles3.calendarPopover }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(
       Calendar,
       {
         ...calendarProps,
@@ -3785,37 +3785,53 @@ var DatePicker = forwardRef$1(
         showYearNavigation
       }
     ))));
-    return /* @__PURE__ */ React69__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React69__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column", width }, /* @__PURE__ */ React69__default.createElement(
-      Popover,
+    return /* @__PURE__ */ React69__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React69__default.createElement(
+      Box,
       {
-        ...dialogProps,
-        isOpen: state2.isOpen,
-        onOpen: state2.open,
-        onClose: state2.close
+        position: "relative",
+        display: "inline-flex",
+        flexDirection: "column",
+        width
       },
-      /* @__PURE__ */ React69__default.createElement(InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React69__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React69__default.createElement(
-        StyledField,
+      /* @__PURE__ */ React69__default.createElement(
+        Popover,
         {
-          variant,
-          onClick: onFieldClick,
-          paddingX: 3,
-          minHeight
+          ...dialogProps,
+          isOpen: state2.isOpen,
+          onOpen: state2.open,
+          onClose: state2.close
         },
-        /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React69__default.createElement(CalendarTriggerButton, { variant, ref, ...buttonProps })),
-        /* @__PURE__ */ React69__default.createElement(
-          DateField,
+        /* @__PURE__ */ React69__default.createElement(InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React69__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React69__default.createElement(
+          StyledField,
           {
-            label: props.label,
-            labelProps,
-            name: props.name,
-            ...fieldProps
-          }
-        )
-      ))),
-      /* @__PURE__ */ React69__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
-      state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React69__default.createElement(Portal, null, popoverContent),
-      state2.isOpen && !props.isDisabled && !withPortal && popoverContent
-    )));
+            variant,
+            onClick: onFieldClick,
+            paddingX: 3,
+            minHeight
+          },
+          /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React69__default.createElement(
+            CalendarTriggerButton,
+            {
+              variant,
+              ref,
+              ...buttonProps
+            }
+          )),
+          /* @__PURE__ */ React69__default.createElement(
+            DateField,
+            {
+              label: props.label,
+              labelProps,
+              name: props.name,
+              ...fieldProps
+            }
+          )
+        ))),
+        /* @__PURE__ */ React69__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
+        state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React69__default.createElement(Portal, null, popoverContent),
+        state2.isOpen && !props.isDisabled && !withPortal && popoverContent
+      )
+    ));
   }
 );
 function RangeCalendar(props) {
@@ -3868,7 +3884,7 @@ function DateRangePicker({
   const onFieldClick = () => {
     state2.setOpen(true);
   };
-  const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { sx: styles3.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
+  const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { sx: styles3.calendarPopover, maxWidth: "none" }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
   return /* @__PURE__ */ React69__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React69__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React69__default.createElement(FormLabel, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React69__default.createElement(
     Popover,
     {
@@ -3887,7 +3903,16 @@ function DateRangePicker({
         onKeyPress: handleEnterClick,
         minHeight
       },
-      variant && /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React69__default.createElement(CalendarTriggerButton, { paddingLeft: 1, paddingRight: 1, variant, ref, ...buttonProps })),
+      variant && /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React69__default.createElement(
+        CalendarTriggerButton,
+        {
+          paddingLeft: 1,
+          paddingRight: 1,
+          variant,
+          ref,
+          ...buttonProps
+        }
+      )),
       /* @__PURE__ */ React69__default.createElement(
         DateField,
         {
@@ -5085,7 +5110,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-UG3JHWO3.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-HCQZVKWU.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -5696,7 +5721,7 @@ var Notch = forwardRef((props, ref) => {
     /* @__PURE__ */ React69__default.createElement(
       Center,
       {
-        background: `linear-gradient(to ${placement === "bottom" ? "bottom" : "top"}, white 0%, white 60%, transparent)`,
+        background: placement === "bottom" ? "bottom" : "top",
         padding: 2,
         borderRadius: "md"
       },
@@ -11522,26 +11547,6 @@ var config6 = defineStyleConfig$1({
         }
       }
     }),
-    /**
-     * @deprecated use `secondary` instead.
-     */
-    tertiary: {
-      backgroundColor: "mint",
-      color: "darkGrey",
-      fontWeight: "normal",
-      ...focusVisible({
-        focus: {
-          boxShadow: `inset 0 0 0 4px ${colors.mint}, inset 0 0 0 4px ${colors.mint}, inset 0 0 0 6px currentColor`
-        },
-        notFocus: { boxShadow: "none" }
-      }),
-      _hover: {
-        backgroundColor: "seaMist"
-      },
-      _active: {
-        backgroundColor: "lightGrey"
-      }
-    },
     additional: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
@@ -12170,7 +12175,7 @@ var config11 = defineStyleConfig$1({
       }
     }),
     _hover: {
-      backgroundColor: mode("seaMist", "pine")(props),
+      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
       _disabled: {
         color: "dimGrey"
       }
@@ -12214,6 +12219,7 @@ var parts4 = anatomy$1("datepicker").parts(
   "wrapper",
   "calendarTriggerButton",
   "arrow",
+  "calendarPopover",
   "calendar",
   "weekdays",
   "weekend",
@@ -12238,36 +12244,10 @@ var config13 = helpers6.defineMultiStyleConfig({
       paddingY: 0.5,
       alignItems: "center",
       _hover: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "white")(props),
-          borderWidth: 2
-        }),
         zIndex: zIndices2.docked
       },
-      _focusWithin: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2
-        })
-      },
-      _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2
-        })
-      },
       _disabled: {
-        pointerEvents: "none",
-        boxShadow: getBoxShadowString({
-          borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-          borderWidth: 1
-        }),
-        _focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-            borderWidth: 1
-          })
-        }
+        pointerEvents: "none"
       }
     },
     inputLabel: {
@@ -12329,12 +12309,13 @@ var config13 = helpers6.defineMultiStyleConfig({
     arrow: {
       [$arrowBackground.variable]: mode("white", colors.night)(props)
     },
-    calendar: {
+    calendarPopover: {
       backgroundColor: mode("white", "night")(props),
       color: mode("darkGrey", "white")(props),
       boxShadow: getBoxShadowString({
         borderWidth: 2,
-        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
+        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+        baseShadow: "md"
       })
     },
     weekdays: {
@@ -12418,6 +12399,41 @@ var config13 = helpers6.defineMultiStyleConfig({
   }),
   variants: {
     base: (props) => ({
+      wrapper: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        }),
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2
+          })
+        },
+        _focusWithin: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2
+          })
+        },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2
+          })
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1
+            })
+          }
+        }
+      },
       calendar: {
         backgroundColor: mode("white", "night")(props),
         color: mode("darkGrey", "white")(props),
@@ -12440,6 +12456,47 @@ var config13 = helpers6.defineMultiStyleConfig({
       }
     }),
     floating: (props) => ({
+      wrapper: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+          baseShadow: "sm"
+        }),
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2,
+            baseShadow: "sm"
+          })
+        },
+        _focusWithin: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2,
+            baseShadow: "sm"
+          })
+        },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2,
+            baseShadow: "sm"
+          })
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1,
+            baseShadow: "sm"
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1,
+              baseShadow: "sm"
+            })
+          }
+        }
+      },
       calendar: {
         backgroundColor: mode("white", "night")(props),
         color: mode("darkGrey", "white")(props),
@@ -12456,13 +12513,43 @@ var config13 = helpers6.defineMultiStyleConfig({
       }
     }),
     ghost: (props) => ({
+      wrapper: {
+        boxShadow: "none",
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2
+          })
+        },
+        _focusWithin: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2
+          })
+        },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2
+          })
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1
+            })
+          }
+        }
+      },
       calendar: {
         backgroundColor: mode("white", "night")(props),
         color: mode("darkGrey", "white")(props),
-        boxShadow: getBoxShadowString({
-          borderWidth: 2,
-          borderColor: mode("", "")(props)
-        })
+        boxShadow: "none"
       },
       dateCell: {
         color: mode("darkGrey", "white")(props),
@@ -12470,7 +12557,7 @@ var config13 = helpers6.defineMultiStyleConfig({
           backgroundColor: mode("seaMist", "pine")(props)
         },
         _selected: {
-          backgroundColor: mode("", "primaryGreen")(props),
+          backgroundColor: mode("transparent", "primaryGreen")(props),
           color: "darkGrey"
         }
       }
@@ -12519,7 +12606,8 @@ var config14 = helpers7.defineMultiStyleConfig({
   baseStyle: (props) => ({
     overlay: {
       backgroundColor: "blackAlpha.600",
-      zIndex: "modal"
+      zIndex: "modal",
+      color: "red"
     },
     dialogContainer: {
       display: "flex",
@@ -12529,8 +12617,8 @@ var config14 = helpers7.defineMultiStyleConfig({
       overflow: props.scrollBehavior === "inside" ? "hidden" : "auto"
     },
     dialog: {
-      background: "white",
-      color: "inherit",
+      backgroundColor: mode("white", "pine")(props),
+      color: mode("inherit", "white")(props),
       zIndex: "modal",
       maxHeight: props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : void 0,
       boxShadow: "md"
@@ -13510,47 +13598,6 @@ var config23 = defineStyleConfig$1({
         backgroundColor: mode("mint", "whiteAlpha.100")(props),
         color: mode("darkGrey", "white")(props)
       }
-    }),
-    /**
-     * @deprecated tertiary style will be deprecated in the future.
-     * Please use the secondary style instead.
-     */
-    tertiary: (props) => ({
-      color: "white",
-      ...focusVisible({
-        focus: {
-          color: "pine",
-          backgroundColor: "white",
-          boxShadow: getBoxShadowString({
-            borderColor: "white",
-            borderWidth: 3,
-            isInset: false
-          })
-        },
-        notFocus: {
-          color: "white",
-          boxShadow: "none",
-          backgroundColor: "transparent"
-        }
-      }),
-      _hover: {
-        color: "white",
-        backgroundColor: "whiteAlpha.200",
-        boxShadow: getBoxShadowString({
-          borderColor: props.theme.colors.whiteAlpha[200],
-          borderWidth: 3,
-          isInset: false
-        })
-      },
-      _active: {
-        color: "white",
-        backgroundColor: "whiteAlpha.400",
-        boxShadow: getBoxShadowString({
-          borderColor: props.theme.colors.whiteAlpha[400],
-          borderWidth: 3,
-          isInset: false
-        })
-      }
     })
   },
   defaultProps: {
@@ -13768,7 +13815,7 @@ var config26 = helpers17.defineMultiStyleConfig({
     },
     dialog: {
       borderRadius: "md",
-      background: mode("white", "night")(props),
+      background: mode("white", "pine")(props),
       color: mode("inherit", "white")(props),
       my: "3.75rem",
       zIndex: "modal",
@@ -13839,12 +13886,12 @@ var $arrowBg3 = cssVar$1("popper-arrow-bg");
 var $arrowShadowColor2 = cssVar$1("popper-arrow-shadow-color");
 var helpers18 = createMultiStyleConfigHelpers$1(popoverAnatomy.keys);
 var config27 = helpers18.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     popper: {
       zIndex: "popover"
     },
     content: {
-      [$popperBg2.variable]: `colors.darkTeal`,
+      [$popperBg2.variable]: mode(`colors.darkTeal`, `colors.pine`)(props),
       backgroundColor: $popperBg2.reference,
       [$arrowBg3.variable]: $popperBg2.reference,
       [$arrowShadowColor2.variable]: `colors.blackAlpha.300`,
@@ -13865,6 +13912,19 @@ var config27 = helpers18.defineMultiStyleConfig({
     },
     closeButton: {
       position: "absolute",
+      color: "white",
+      hover: "whiteAlpha.100",
+      ...focusVisible({
+        focus: {
+          boxShadow: getBoxShadowString({ borderColor: "azure" })
+        },
+        notFocus: {
+          boxShadow: "none"
+        }
+      }),
+      _active: {
+        backgroundColor: "whiteAlpha.200"
+      },
       borderRadius: "xs",
       top: 1,
       insetEnd: 1,
@@ -13872,7 +13932,7 @@ var config27 = helpers18.defineMultiStyleConfig({
       height: 2,
       padding: 1
     }
-  },
+  }),
   sizes: {
     sm: {
       content: {