@vygruppen/spor-react 8.0.0 → 8.0.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@8.0.0 build
+> @vygruppen/spor-react@8.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
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-5VZ5S46A.mjs".
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
 DTS Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-EGC6XZHT.mjs".
-CJS dist/index.js 500.06 KB
-CJS ⚡️ Build success in 2156ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-NCM6JIBM.mjs 1.19 KB
-ESM dist/chunk-EGC6XZHT.mjs             392.96 KB
-ESM ⚡️ Build success in 2158ms
-DTS ⚡️ Build success in 10577ms
+ESM dist/CountryCodeSelect-SCMCRKY4.mjs 1.19 KB
+ESM dist/chunk-5VZ5S46A.mjs             393.00 KB
+ESM ⚡️ Build success in 2110ms
+CJS dist/index.js 500.11 KB
+CJS ⚡️ Build success in 2110ms
+DTS ⚡️ Build success in 10383ms
 DTS dist/index.d.ts  268.53 KB
 DTS dist/index.d.mts 268.53 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 8.0.1
+
+### Patch Changes
+
+- 0488e4a: Tooltip, Nudge: Fix some bugs
+
 ## 8.0.0
 
 ### Major Changes

package/dist/{CountryCodeSelect-NCM6JIBM.mjs → CountryCodeSelect-SCMCRKY4.mjs}

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

package/dist/{chunk-EGC6XZHT.mjs → chunk-5VZ5S46A.mjs}

@@ -3429,7 +3429,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-NCM6JIBM.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-SCMCRKY4.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4115,7 +4115,7 @@ var Nudge = ({
     }
     return null;
   }
-  return /* @__PURE__ */ React69__default.createElement(DarkMode, null, /* @__PURE__ */ React69__default.createElement(
+  return /* @__PURE__ */ React69__default.createElement(
     Popover,
     {
       arrowSize: 12,
@@ -4124,8 +4124,8 @@ var Nudge = ({
       ...props
     },
     /* @__PURE__ */ React69__default.createElement(PopoverAnchor, null, children),
-    /* @__PURE__ */ React69__default.createElement(PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, null), /* @__PURE__ */ React69__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React69__default.createElement(PopoverBody, { margin: 1 }, /* @__PURE__ */ React69__default.createElement(Box, { marginRight: 4 }, content), /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React69__default.createElement(ButtonGroup, null, /* @__PURE__ */ React69__default.createElement(Button, { variant: "tertiary", size: "xs" }, t2(texts20.close)), /* @__PURE__ */ React69__default.createElement(Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts20.showMe))))))
-  ));
+    /* @__PURE__ */ React69__default.createElement(PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React69__default.createElement(DarkMode, null, /* @__PURE__ */ React69__default.createElement(PopoverArrow, null), /* @__PURE__ */ React69__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React69__default.createElement(PopoverBody, { margin: 1 }, /* @__PURE__ */ React69__default.createElement(Box, { marginRight: 4 }, content), /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React69__default.createElement(ButtonGroup, null, /* @__PURE__ */ React69__default.createElement(Button, { variant: "tertiary", size: "xs" }, t2(texts20.close)), /* @__PURE__ */ React69__default.createElement(Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts20.showMe)))))))
+  );
 };
 var texts20 = createTexts({
   close: {
@@ -12611,10 +12611,10 @@ var config27 = helpers18.defineMultiStyleConfig({
       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`,
+      [$arrowShadowColor2.variable]: "blackAlpha.300",
       color: "white",
       borderRadius: "sm",
       padding: 1.5,
@@ -12634,15 +12634,15 @@ var config27 = helpers18.defineMultiStyleConfig({
       position: "absolute",
       color: "white",
       ...focusVisibleStyles(props),
+      _hover: {
+        backgroundColor: "whiteAlpha.100"
+      },
       _active: {
         backgroundColor: "whiteAlpha.200"
       },
       borderRadius: "sm",
       top: 2,
-      right: 2,
-      width: 2,
-      height: 2,
-      padding: 1
+      right: 1
     }
   }),
   sizes: {

package/dist/index.d.mts

@@ -4563,15 +4563,15 @@ declare const theme: {
                     clipPath: string;
                 };
                 closeButton: {
+                    _hover: {
+                        backgroundColor: string;
+                    };
                     _active: {
                         backgroundColor: string;
                     };
                     borderRadius: string;
                     top: number;
                     right: number;
-                    width: number;
-                    height: number;
-                    padding: number;
                     _focusVisible: {
                         outlineWidth: string;
                         outlineColor: string;

package/dist/index.d.ts

@@ -4563,15 +4563,15 @@ declare const theme: {
                     clipPath: string;
                 };
                 closeButton: {
+                    _hover: {
+                        backgroundColor: string;
+                    };
                     _active: {
                         backgroundColor: string;
                     };
                     borderRadius: string;
                     top: number;
                     right: number;
-                    width: number;
-                    height: number;
-                    padding: number;
                     _focusVisible: {
                         outlineWidth: string;
                         outlineColor: string;

package/dist/index.js

@@ -4927,7 +4927,7 @@ var init_Nudge = __esm({
         }
         return null;
       }
-      return /* @__PURE__ */ React69__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React69__namespace.default.createElement(
+      return /* @__PURE__ */ React69__namespace.default.createElement(
         react.Popover,
         {
           arrowSize: 12,
@@ -4936,8 +4936,8 @@ var init_Nudge = __esm({
           ...props
         },
         /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverAnchor, null, children),
-        /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, { margin: 1 }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginRight: 4 }, content), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React69__namespace.default.createElement(exports.ButtonGroup, null, /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "tertiary", size: "xs" }, t2(texts21.close)), /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts21.showMe))))))
-      ));
+        /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React69__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, { margin: 1 }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginRight: 4 }, content), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React69__namespace.default.createElement(exports.ButtonGroup, null, /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "tertiary", size: "xs" }, t2(texts21.close)), /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts21.showMe)))))))
+      );
     };
     texts21 = createTexts({
       close: {
@@ -14226,10 +14226,10 @@ var init_popover = __esm({
           zIndex: "popover"
         },
         content: {
-          [$popperBg2.variable]: `colors.darkTeal`,
+          [$popperBg2.variable]: themeTools.mode("colors.darkTeal", "colors.pine")(props),
           backgroundColor: $popperBg2.reference,
           [$arrowBg3.variable]: $popperBg2.reference,
-          [$arrowShadowColor2.variable]: `colors.blackAlpha.300`,
+          [$arrowShadowColor2.variable]: "blackAlpha.300",
           color: "white",
           borderRadius: "sm",
           padding: 1.5,
@@ -14249,15 +14249,15 @@ var init_popover = __esm({
           position: "absolute",
           color: "white",
           ...focusVisibleStyles(props),
+          _hover: {
+            backgroundColor: "whiteAlpha.100"
+          },
           _active: {
             backgroundColor: "whiteAlpha.200"
           },
           borderRadius: "sm",
           top: 2,
-          right: 2,
-          width: 2,
-          height: 2,
-          padding: 1
+          right: 1
         }
       }),
       sizes: {

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-EGC6XZHT.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-5VZ5S46A.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/nudge/Nudge.tsx

@@ -98,15 +98,15 @@ export const Nudge = ({
     return null;
   }
   return (
-    <DarkMode>
-      <Popover
-        arrowSize={12}
-        arrowShadowColor="none"
-        defaultIsOpen={true}
-        {...props}
-      >
-        <PopoverAnchor>{children}</PopoverAnchor>
-        <PopoverContent borderRadius="sm">
+    <Popover
+      arrowSize={12}
+      arrowShadowColor="none"
+      defaultIsOpen={true}
+      {...props}
+    >
+      <PopoverAnchor>{children}</PopoverAnchor>
+      <PopoverContent borderRadius="sm">
+        <DarkMode>
           <PopoverArrow />
           <PopoverCloseButton />
           <PopoverBody margin={1}>
@@ -124,9 +124,9 @@ export const Nudge = ({
               )}
             </Box>
           </PopoverBody>
-        </PopoverContent>
-      </Popover>
-    </DarkMode>
+        </DarkMode>
+      </PopoverContent>
+    </Popover>
   );
 };
 

package/src/theme/components/popover.ts

@@ -1,6 +1,6 @@
 import { popoverAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { cssVar } from "@chakra-ui/theme-tools";
+import { cssVar, mode } from "@chakra-ui/theme-tools";
 import { focusVisibleStyles } from "../utils/focus-util";
 
 const $popperBg = cssVar("popper-bg");
@@ -15,10 +15,10 @@ const config = helpers.defineMultiStyleConfig({
       zIndex: "popover",
     },
     content: {
-      [$popperBg.variable]: `colors.darkTeal`,
+      [$popperBg.variable]: mode("colors.darkTeal", "colors.pine")(props),
       backgroundColor: $popperBg.reference,
       [$arrowBg.variable]: $popperBg.reference,
-      [$arrowShadowColor.variable]: `colors.blackAlpha.300`,
+      [$arrowShadowColor.variable]: "blackAlpha.300",
       color: "white",
       borderRadius: "sm",
       padding: 1.5,
@@ -39,15 +39,15 @@ const config = helpers.defineMultiStyleConfig({
       position: "absolute",
       color: "white",
       ...focusVisibleStyles(props),
+      _hover: {
+        backgroundColor: "whiteAlpha.100",
+      },
       _active: {
         backgroundColor: "whiteAlpha.200",
       },
       borderRadius: "sm",
       top: 2,
-      right: 2,
-      width: 2,
-      height: 2,
-      padding: 1,
+      right: 1,
     },
   }),
   sizes: {