@vygruppen/spor-react 5.4.0 → 6.0.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@5.4.0 build
+> @vygruppen/spor-react@6.0.0 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-S2IJI3LY.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-GAHDJA6T.mjs".
+CJS dist/index.js 507.31 KB
+CJS ⚡️ Build success in 2004ms
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-HHNSD6TX.mjs 1.19 KB
-ESM dist/chunk-S2IJI3LY.mjs             397.83 KB
-ESM ⚡️ Build success in 2102ms
-CJS dist/index.js 507.24 KB
-CJS ⚡️ Build success in 2103ms
-DTS ⚡️ Build success in 12028ms
+ESM dist/CountryCodeSelect-EM747ZM6.mjs 1.19 KB
+ESM dist/chunk-GAHDJA6T.mjs             397.90 KB
+ESM ⚡️ Build success in 2005ms
+DTS ⚡️ Build success in 12323ms
 DTS dist/index.d.ts  265.18 KB
 DTS dist/index.d.mts 265.18 KB

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @vygruppen/spor-react
 
+## 6.0.0
+
+### Major Changes
+
+- d8be7e4: CardSelect: _Breaking change_: We have changed some variant prop names, so it's aligned with the rest of the design system.
+  To migrate,. old "outline" has become "base" and old "card" is now "floating".
+
+## 5.5.0
+
+### Minor Changes
+
+- 9be3b2c: cardSelect: darkmode quick fix for background color
+
+### Patch Changes
+
+- 762592e: Breadcrumb: Fixed a darkmode bug where the arrow icons between crumbs were always black
+
 ## 5.4.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-HHNSD6TX.mjs → CountryCodeSelect-EM747ZM6.mjs}

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

package/dist/{chunk-S2IJI3LY.mjs → chunk-GAHDJA6T.mjs}

@@ -1,7 +1,7 @@
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
-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, useColorMode, 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';
+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, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, 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, 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, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React69 from 'react';
 import React69__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
@@ -1535,10 +1535,11 @@ var StaticAlert = ({ children, ...props }) => {
   return /* @__PURE__ */ React69__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React69__default.createElement(AlertIcon, { variant: props.variant }), children);
 };
 var Breadcrumb = (props) => {
+  const iconColor = useColorModeValue("blackAlpha.400", "whiteAlpha.400");
   return /* @__PURE__ */ React69__default.createElement(
     Breadcrumb$1,
     {
-      separator: /* @__PURE__ */ React69__default.createElement(DropdownRightFill18Icon, { color: "blackAlpha.400" }),
+      separator: /* @__PURE__ */ React69__default.createElement(DropdownRightFill18Icon, { color: iconColor }),
       ...props
     }
   );
@@ -3426,7 +3427,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-HHNSD6TX.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-EM747ZM6.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.mts

@@ -649,10 +649,10 @@ type CardSelectProps = BoxProps & {
     /** The design of the trigger button.
      *
      * - `ghost` is a transparent button with text
-     * - `outline` is a button with a border and text
-     * - `card` is a button with a drop shadow (like a card) and text
+     * - `base` is a button with a border and text
+     * - `floating` is a button with a drop shadow (like a card) and text
      */
-    variant: "ghost" | "outline" | "card";
+    variant: "base" | "ghost" | "floating";
     /** The size of the trigger button */
     size: "sm" | "md" | "lg";
     /** Whether the card select is open / active, if controlled */

package/dist/index.d.ts

@@ -649,10 +649,10 @@ type CardSelectProps = BoxProps & {
     /** The design of the trigger button.
      *
      * - `ghost` is a transparent button with text
-     * - `outline` is a button with a border and text
-     * - `card` is a button with a drop shadow (like a card) and text
+     * - `base` is a button with a border and text
+     * - `floating` is a button with a drop shadow (like a card) and text
      */
-    variant: "ghost" | "outline" | "card";
+    variant: "base" | "ghost" | "floating";
     /** The size of the trigger button */
     size: "sm" | "md" | "lg";
     /** Whether the card select is open / active, if controlled */

package/dist/index.js

@@ -1093,10 +1093,11 @@ exports.Breadcrumb = void 0; exports.BreadcrumbItem = void 0; exports.Breadcrumb
 var init_Breadcrumb = __esm({
   "src/breadcrumb/Breadcrumb.tsx"() {
     exports.Breadcrumb = (props) => {
+      const iconColor = react.useColorModeValue("blackAlpha.400", "whiteAlpha.400");
       return /* @__PURE__ */ React69__namespace.default.createElement(
         react.Breadcrumb,
         {
-          separator: /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, { color: "blackAlpha.400" }),
+          separator: /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, { color: iconColor }),
           ...props
         }
       );

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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-S2IJI3LY.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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-GAHDJA6T.mjs';

package/package.json

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

package/src/breadcrumb/Breadcrumb.tsx

@@ -6,6 +6,7 @@ import {
 } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
 import React from "react";
+import { useColorModeValue } from "@chakra-ui/react";
 
 type BreadcrumbProps = ChakraBreadcrumbProps;
 /**
@@ -25,9 +26,10 @@ type BreadcrumbProps = ChakraBreadcrumbProps;
  * ```
  */
 export const Breadcrumb = (props: BreadcrumbProps) => {
+  const iconColor = useColorModeValue("blackAlpha.400", "whiteAlpha.400");
   return (
     <ChakraBreadcrumb
-      separator={<DropdownRightFill18Icon color="blackAlpha.400" />}
+      separator={<DropdownRightFill18Icon color={iconColor} />}
       {...props}
     />
   );

package/src/input/CardSelect.tsx

@@ -21,10 +21,10 @@ type CardSelectProps = BoxProps & {
   /** The design of the trigger button.
    *
    * - `ghost` is a transparent button with text
-   * - `outline` is a button with a border and text
-   * - `card` is a button with a drop shadow (like a card) and text
+   * - `base` is a button with a border and text
+   * - `floating` is a button with a drop shadow (like a card) and text
    */
-  variant: "ghost" | "outline" | "card";
+  variant: "base" | "ghost" | "floating";
   /** The size of the trigger button */
   size: "sm" | "md" | "lg";
   /** Whether the card select is open / active, if controlled */