@vygruppen/spor-react 9.7.0 → 9.8.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.7.0 build
+> @vygruppen/spor-react@9.8.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,11 +10,11 @@
 ESM Build start
 DTS Build start
 ESM dist/index.mjs                      2.11 KB
-ESM dist/CountryCodeSelect-FPOWUHQG.mjs 1.19 KB
-ESM dist/chunk-QGMF2EAE.mjs             400.11 KB
-ESM ⚡️ Build success in 2270ms
-CJS dist/index.js 511.05 KB
-CJS ⚡️ Build success in 2272ms
-DTS ⚡️ Build success in 11445ms
-DTS dist/index.d.ts  355.89 KB
-DTS dist/index.d.mts 355.89 KB
+ESM dist/CountryCodeSelect-EKYAUNTI.mjs 1.19 KB
+ESM dist/chunk-3P7NVQKW.mjs             397.80 KB
+ESM ⚡️ Build success in 2067ms
+CJS dist/index.js 508.29 KB
+CJS ⚡️ Build success in 2068ms
+DTS ⚡️ Build success in 11221ms
+DTS dist/index.d.ts  337.50 KB
+DTS dist/index.d.mts 337.50 KB

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @vygruppen/spor-react
 
+## 9.8.0
+
+### Minor Changes
+
+- 37c8580: Card is deprecated
+
+  - Update styling for PressableCard
+  - Update styling for StaticCard
+  - Make Card deprecated, is replaced by the above components
+
 ## 9.7.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-FPOWUHQG.mjs → CountryCodeSelect-EKYAUNTI.mjs}

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

package/dist/{chunk-QGMF2EAE.mjs → chunk-3P7NVQKW.mjs}

@@ -1,7 +1,7 @@
 import tokens11__default from '@vygruppen/spor-design-tokens';
 import * as tokens11 from '@vygruppen/spor-design-tokens';
 export { tokens11 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, useRadio, useStyleConfig, chakra, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Box, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, 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, useRadioGroup, 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, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, useRadio, useStyleConfig, chakra, Box, Card, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, 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, useRadioGroup, 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, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, 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, 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 React73 from 'react';
 import React73__default, { useId, createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, Suspense, Children, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
@@ -837,6 +837,24 @@ var RadioCardGroup = ({
     }
   ));
 };
+var StaticCard = forwardRef(
+  ({ colorScheme = "white", children, ...props }, ref) => {
+    const styles3 = useStyleConfig("StaticCard", {
+      colorScheme
+    });
+    return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props, ref }, children, /* @__PURE__ */ React73__default.createElement(Card, null));
+  }
+);
+var PressableCard = ({
+  children,
+  as = "button",
+  size: size2 = "sm",
+  variant = "base",
+  ...props
+}) => {
+  const styles3 = useStyleConfig("PressableCard", { variant, size: size2 });
+  return /* @__PURE__ */ React73__default.createElement(Box, { as, __css: styles3, ...props }, children);
+};
 var AccordionContext = React73__default.createContext(null);
 var AccordionProvider = ({
   size: size2,
@@ -1606,8 +1624,11 @@ var Breadcrumb = (props) => {
 };
 var BreadcrumbItem = BreadcrumbItem$1;
 var BreadcrumbLink = BreadcrumbLink$1;
-var Card = forwardRef(
+var Card2 = forwardRef(
   ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
+    console.warn(
+      "Warning: Card is deprecated. Use `StaticCard` or `PressableCard` instead."
+    );
     const styles3 = useStyleConfig("Card", {
       colorScheme,
       size: size2
@@ -1615,20 +1636,6 @@ var Card = forwardRef(
     return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props, ref }, children);
   }
 );
-var StaticCard = ({ colorScheme, ...props }) => {
-  const styles3 = useStyleConfig("StaticCard", { colorScheme });
-  return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props });
-};
-var PressableCard = ({
-  children,
-  as = "button",
-  size: size2 = "sm",
-  variant = "base",
-  ...props
-}) => {
-  const styles3 = useStyleConfig("PressableCard", { variant, size: size2 });
-  return /* @__PURE__ */ React73__default.createElement(Box, { as, __css: styles3, ...props }, children);
-};
 var Badge = forwardRef(
   ({ icon, colorScheme = "grey", children, ...props }, ref) => {
     return /* @__PURE__ */ React73__default.createElement(
@@ -2631,7 +2638,7 @@ var CardSelect = forwardRef(
         placement
       },
       /* @__PURE__ */ React73__default.createElement(
-        Card,
+        Card2,
         {
           colorScheme: "white",
           size: "lg",
@@ -3421,7 +3428,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-FPOWUHQG.mjs'));
+var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-EKYAUNTI.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React73__default.createElement(Radio$1, { ...props, ref });
 });
@@ -9882,6 +9889,12 @@ function baseBorder(state2, props) {
         )(props)
       };
     }
+    case "active": {
+      return {
+        outline: "2px solid",
+        outlineColor: mode("base.outline.light", "base.outline.dark")(props)
+      };
+    }
     case "invalid": {
       return {
         outline: "2px solid",
@@ -13637,7 +13650,6 @@ var config43 = defineStyleConfig$1({
     fontSize: "inherit",
     display: "block",
     borderRadius: "md",
-    // Except for white cards, all cards are light mode always
     color: "text.default.light",
     ...focusVisibleStyles(props),
     ...getColorSchemeBaseProps2(props)
@@ -13649,12 +13661,8 @@ var getColorSchemeBaseProps2 = (props) => {
   switch (props.colorScheme) {
     case "white":
       return {
-        ...baseBorder("default", props),
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
-        )(props),
-        color: "inherit"
+        backgroundColor: "white",
+        color: "darkGrey"
       };
     case "grey":
       return {
@@ -13689,8 +13697,7 @@ var getColorSchemeBaseProps2 = (props) => {
     }
     default:
       return {
-        backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "default",
-        ...baseText("default", props)
+        backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "default"
       };
   }
 };
@@ -13702,156 +13709,52 @@ var config44 = defineStyleConfig$1({
     fontSize: "inherit",
     display: "block",
     borderRadius: "md",
-    ...getColorSchemeBaseProps3(props),
-    ...getColorSchemeClickableProps2(props),
     ...focusVisibleStyles(props),
-    ...getColorSchemeActiveProps2(props),
-    _hover: getColorSchemeHoverProps2(props),
     _disabled: {
       ...baseBackground("disabled", props),
-      ...baseBorder("disabled", props),
       ...baseText("disabled", props),
+      outline: "none",
       pointerEvents: "none"
     }
   }),
   variants: {
     base: (props) => ({
-      ...baseBackground("default", props),
+      ...baseBorder("default", props),
       _hover: {
-        ...baseBackground("hover", props)
+        ...baseBorder("hover", props)
       },
       _active: {
-        ...baseBackground("active", props)
+        ...baseBackground("active", props),
+        ...baseBorder("active", props)
       }
     }),
     accent: (props) => ({
       ...accentBackground("default", props),
+      boxShadow: "sm",
       _hover: {
-        ...accentBackground("hover", props)
+        ...accentBackground("hover", props),
+        boxShadow: "sm"
       },
       _active: {
-        ...accentBackground("active", props)
+        ...accentBackground("active", props),
+        boxShadow: "none"
       }
     }),
     floating: (props) => ({
       ...floatingBackground("default", props),
-      _hover: {
-        ...floatingBackground("hover", props)
-      },
-      _active: {
-        ...floatingBackground("active", props)
-      }
-    })
-  },
-  sizes: {
-    sm: {
       boxShadow: "sm",
       _hover: {
+        ...floatingBackground("hover", props),
         boxShadow: "md"
       },
       _active: {
+        ...floatingBackground("active", props),
         boxShadow: "none"
       }
-    },
-    lg: {
-      boxShadow: "md",
-      _hover: {
-        boxShadow: "lg"
-      },
-      _active: {
-        boxShadow: "sm"
-      }
-    }
+    })
   }
 });
 var pressable_card_default = config44;
-var getColorSchemeBaseProps3 = (props) => {
-  switch (props.colorScheme) {
-    case "default":
-      return {
-        ...baseBorder("default", props),
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
-        )(props),
-        color: "inherit"
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props)
-        },
-        _active: {
-          ...accentBackground("active", props)
-        }
-      };
-  }
-};
-function getColorSchemeClickableProps2(props) {
-  switch (props.colorScheme) {
-    case "default":
-      return {
-        ...floatingBorder("default", props)
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props)
-        },
-        _active: {
-          ...accentBackground("active", props)
-        }
-      };
-  }
-}
-var getColorSchemeHoverProps2 = (props) => {
-  switch (props.colorScheme) {
-    case "default":
-      return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`
-        )(props),
-        ...floatingBorder("hover", props)
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props)
-        },
-        _active: {
-          ...accentBackground("active", props)
-        }
-      };
-  }
-};
-var getColorSchemeActiveProps2 = (props) => {
-  const { colorScheme } = props;
-  switch (colorScheme) {
-    case "default":
-      return {
-        backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
-        ...floatingBorder("active", props)
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props)
-        },
-        _active: {
-          ...accentBackground("active", props)
-        }
-      };
-  }
-};
 var fontFaces = `
 @font-face {
   font-family: ${tokens11__default.asset.font["vy-sans"]["light"].name};
@@ -14214,4 +14117,4 @@ function slugify(text, maxLength = 50) {
   return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[\u00C6\u00E6]/g, "ae").replace(/[\u00D8\u00F8]/g, "oe").replace(/[\u00C5\u00E5]/g, "aa").toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").substring(0, maxLength);
 }
 
-export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, FullScreenDrawer, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, Tooltip, TravelTag, VyLogo, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, useSize, useToast, useTranslation };
+export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card2 as Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, FullScreenDrawer, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, Tooltip, TravelTag, VyLogo, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, useSize, useToast, useTranslation };