@vygruppen/spor-react 2.1.1 → 2.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.1.1 build
+> @vygruppen/spor-react@2.2.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,13 +9,13 @@
 CJS Build start
 ESM Build start
 DTS Build start
-"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-5HQ3SCBT.mjs".
 "toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
-ESM dist/index.mjs                      1.96 KB
-ESM dist/CountryCodeSelect-EO6T7EEK.mjs 351.43 KB
-ESM dist/chunk-5HQ3SCBT.mjs             400.22 KB
-ESM ⚡️ Build success in 4766ms
-CJS dist/index.js 876.65 KB
-CJS ⚡️ Build success in 4768ms
-DTS ⚡️ Build success in 17306ms
-DTS dist/index.d.ts 251.13 KB
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-2KP5MQG7.mjs".
+CJS dist/index.js 877.57 KB
+CJS ⚡️ Build success in 4302ms
+ESM dist/index.mjs                      2.00 KB
+ESM dist/CountryCodeSelect-MBBIVGTV.mjs 351.63 KB
+ESM dist/chunk-2KP5MQG7.mjs             400.28 KB
+ESM ⚡️ Build success in 4306ms
+DTS ⚡️ Build success in 16837ms
+DTS dist/index.d.ts 251.24 KB

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @vygruppen/spor-react
 
+## 2.2.0
+
+### Minor Changes
+
+- 5bd65c9e: Export some new transition components from Chakra
+
+  This change adds the following components:
+
+  - Fade
+  - ScaleFade
+  - Slide
+  - SldeFade
+  - Collapse
+
+### Patch Changes
+
+- Updated dependencies [fb1b899e]
+- Updated dependencies [a520757b]
+  - @vygruppen/spor-icon-react@3.1.0
+  - @vygruppen/spor-design-tokens@3.1.1
+
+## 2.1.2
+
+### Patch Changes
+
+- e405193d: Address some feedback from real life usage
+
 ## 2.1.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-EO6T7EEK.mjs → CountryCodeSelect-MBBIVGTV.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-5HQ3SCBT.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-2KP5MQG7.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs
@@ -6598,11 +6598,18 @@ var {
 } = index;
 
 // src/input/CountryCodeSelect.tsx
-var callingCodes = getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
+var prioritizedCountryCodes = [
+  { key: "+47", value: "+47" },
+  { key: "+46", value: "+46" },
+  { key: "+45", value: "+45" }
+];
+var sortedCallingCodes = getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
   key: `+${code}`,
   value: `+${code}`
-})).filter((code) => code.key !== "+47");
-callingCodes.unshift({ key: "+47", value: "+47" });
+})).filter(
+  (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key)
+);
+var callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
 var CountryCodeSelect = (props) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ React.createElement(

package/dist/{chunk-5HQ3SCBT.mjs → chunk-2KP5MQG7.mjs}

@@ -1,5 +1,5 @@
 import { forwardRef, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Stack as Stack$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useFormControlContext, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel, InputGroup, 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, useBreakpointValue, Popover, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, useFormControlProps, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, 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, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, SimpleGrid, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, 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, 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 };
@@ -4442,7 +4442,7 @@ var PhoneNumberInput = forwardRef(
       onChange: externalOnChange,
       defaultValue: {
         countryCode: "+47",
-        phoneNumber: ""
+        nationalNumber: ""
       }
     });
     return /* @__PURE__ */ React48__default.createElement(AttachedInputs, { ...boxProps }, /* @__PURE__ */ React48__default.createElement(
@@ -4466,7 +4466,7 @@ var PhoneNumberInput = forwardRef(
           value: value.countryCode,
           onChange: (countryCode) => onChange({
             countryCode,
-            phoneNumber: value.phoneNumber
+            nationalNumber: value.nationalNumber
           }),
           name: name ? `${name}-country-code` : "country-code",
           height: "100%",
@@ -4478,11 +4478,11 @@ var PhoneNumberInput = forwardRef(
       {
         ref,
         label: t2(texts12.phoneNumber),
-        value: value.phoneNumber,
+        value: value.nationalNumber,
         name: name ? `${name}-phone-number` : "phone-number",
         onChange: (e) => onChange({
           countryCode: value.countryCode,
-          phoneNumber: e.target.value
+          nationalNumber: e.target.value
         }),
         position: "relative",
         left: "-1px"
@@ -4498,7 +4498,7 @@ var texts12 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React48__default.lazy(() => import('./CountryCodeSelect-EO6T7EEK.mjs'));
+var LazyCountryCodeSelect = React48__default.lazy(() => import('./CountryCodeSelect-MBBIVGTV.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React48__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { AccordionProps as AccordionProps$1, AccordionItemProps, BoxProps, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, As, StackProps as StackProps$1, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
-export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, Center, CenterProps, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
+export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, Center, CenterProps, Collapse, CollapseProps, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
 export { tokens };
@@ -962,7 +962,7 @@ declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs
 
 type CountryCodeAndPhoneNumber = {
     countryCode: string;
-    phoneNumber: string;
+    nationalNumber: string;
 };
 type PhoneNumberInputProps = BoxProps & {
     /** The root name.

package/dist/index.js

@@ -11598,16 +11598,23 @@ __export(CountryCodeSelect_exports, {
   CountryCodeSelect: () => CountryCodeSelect,
   default: () => CountryCodeSelect_default
 });
-var callingCodes, CountryCodeSelect, CountryCodeSelect_default, texts12;
+var prioritizedCountryCodes, sortedCallingCodes, callingCodes, CountryCodeSelect, CountryCodeSelect_default, texts12;
 var init_CountryCodeSelect = __esm({
   "src/input/CountryCodeSelect.tsx"() {
     init_src();
     init_index_esm();
-    callingCodes = getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
+    prioritizedCountryCodes = [
+      { key: "+47", value: "+47" },
+      { key: "+46", value: "+46" },
+      { key: "+45", value: "+45" }
+    ];
+    sortedCallingCodes = getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
       key: `+${code}`,
       value: `+${code}`
-    })).filter((code) => code.key !== "+47");
-    callingCodes.unshift({ key: "+47", value: "+47" });
+    })).filter(
+      (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key)
+    );
+    callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
     CountryCodeSelect = (props) => {
       const { t: t2 } = exports.useTranslation();
       return /* @__PURE__ */ React48__namespace.default.createElement(
@@ -11645,7 +11652,7 @@ var init_PhoneNumberInput = __esm({
           onChange: externalOnChange,
           defaultValue: {
             countryCode: "+47",
-            phoneNumber: ""
+            nationalNumber: ""
           }
         });
         return /* @__PURE__ */ React48__namespace.default.createElement(exports.AttachedInputs, { ...boxProps }, /* @__PURE__ */ React48__namespace.default.createElement(
@@ -11669,7 +11676,7 @@ var init_PhoneNumberInput = __esm({
               value: value.countryCode,
               onChange: (countryCode) => onChange({
                 countryCode,
-                phoneNumber: value.phoneNumber
+                nationalNumber: value.nationalNumber
               }),
               name: name ? `${name}-country-code` : "country-code",
               height: "100%",
@@ -11681,11 +11688,11 @@ var init_PhoneNumberInput = __esm({
           {
             ref,
             label: t2(texts13.phoneNumber),
-            value: value.phoneNumber,
+            value: value.nationalNumber,
             name: name ? `${name}-phone-number` : "phone-number",
             onChange: (e) => onChange({
               countryCode: value.countryCode,
-              phoneNumber: e.target.value
+              nationalNumber: e.target.value
             }),
             position: "relative",
             left: "-1px"
@@ -22298,6 +22305,10 @@ var init_toast2 = __esm({
     init_useToast();
   }
 });
+var init_transition = __esm({
+  "src/transition/index.ts"() {
+  }
+});
 var init_externals = __esm({
   "src/util/externals.tsx"() {
   }
@@ -22333,6 +22344,7 @@ var init_src = __esm({
     init_table();
     init_theme();
     init_toast2();
+    init_transition();
     init_typography();
     init_util();
   }
@@ -22363,6 +22375,10 @@ Object.defineProperty(exports, 'Center', {
   enumerable: true,
   get: function () { return react.Center; }
 });
+Object.defineProperty(exports, 'Collapse', {
+  enumerable: true,
+  get: function () { return react.Collapse; }
+});
 Object.defineProperty(exports, 'Container', {
   enumerable: true,
   get: function () { return react.Container; }
@@ -22387,6 +22403,10 @@ Object.defineProperty(exports, 'DrawerOverlay', {
   enumerable: true,
   get: function () { return react.DrawerOverlay; }
 });
+Object.defineProperty(exports, 'Fade', {
+  enumerable: true,
+  get: function () { return react.Fade; }
+});
 Object.defineProperty(exports, 'Flex', {
   enumerable: true,
   get: function () { return react.Flex; }
@@ -22483,10 +22503,22 @@ Object.defineProperty(exports, 'PopoverTrigger', {
   enumerable: true,
   get: function () { return react.PopoverTrigger; }
 });
+Object.defineProperty(exports, 'ScaleFade', {
+  enumerable: true,
+  get: function () { return react.ScaleFade; }
+});
 Object.defineProperty(exports, 'SimpleGrid', {
   enumerable: true,
   get: function () { return react.SimpleGrid; }
 });
+Object.defineProperty(exports, 'Slide', {
+  enumerable: true,
+  get: function () { return react.Slide; }
+});
+Object.defineProperty(exports, 'SlideFade', {
+  enumerable: true,
+  get: function () { return react.SlideFade; }
+});
 Object.defineProperty(exports, 'Spacer', {
   enumerable: true,
   get: function () { return react.Spacer; }

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, 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, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-5HQ3SCBT.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, 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, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, 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, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-2KP5MQG7.mjs';

package/package.json

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

package/src/index.tsx

@@ -22,5 +22,6 @@ export * from "./tab";
 export * from "./table";
 export * from "./theme";
 export * from "./toast";
+export * from "./transition";
 export * from "./typography";
 export * from "./util";

package/src/input/CountryCodeSelect.tsx

@@ -9,14 +9,22 @@ import {
 
 import { getSupportedCallingCodes } from "awesome-phonenumber";
 
-const callingCodes = getSupportedCallingCodes()
+const prioritizedCountryCodes = [
+  { key: "+47", value: "+47" },
+  { key: "+46", value: "+46" },
+  { key: "+45", value: "+45" },
+];
+
+const sortedCallingCodes = getSupportedCallingCodes()
   .sort((a, b) => Number(a) - Number(b))
   .map((code) => ({
     key: `+${code}`,
     value: `+${code}`,
   }))
-  .filter((code) => code.key !== "+47"); // We're adding Norway to the top
-callingCodes.unshift({ key: "+47", value: "+47" }); // Norway
+  .filter(
+    (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key)
+  );
+const callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
 
 type CountryCodeSelectProps = {
   value: string;

package/src/input/PhoneNumberInput.tsx

@@ -10,7 +10,7 @@ import { AttachedInputs } from "./AttachedInputs";
 
 type CountryCodeAndPhoneNumber = {
   countryCode: string;
-  phoneNumber: string;
+  nationalNumber: string;
 };
 type PhoneNumberInputProps = BoxProps & {
   /** The root name.
@@ -51,7 +51,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
       onChange: externalOnChange,
       defaultValue: {
         countryCode: "+47",
-        phoneNumber: "",
+        nationalNumber: "",
       },
     });
     return (
@@ -74,7 +74,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
             onChange={(countryCode) =>
               onChange({
                 countryCode: countryCode as string,
-                phoneNumber: value.phoneNumber,
+                nationalNumber: value.nationalNumber,
               })
             }
             name={name ? `${name}-country-code` : "country-code"}
@@ -85,12 +85,12 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
         <Input
           ref={ref}
           label={t(texts.phoneNumber)}
-          value={value.phoneNumber}
+          value={value.nationalNumber}
           name={name ? `${name}-phone-number` : "phone-number"}
           onChange={(e) =>
             onChange({
               countryCode: value.countryCode,
-              phoneNumber: e.target.value,
+              nationalNumber: e.target.value,
             })
           }
           position="relative"

package/src/transition/index.ts

@@ -0,0 +1,8 @@
+export { Collapse, Fade, ScaleFade, Slide, SlideFade } from "@chakra-ui/react";
+export type {
+  CollapseProps,
+  FadeProps,
+  ScaleFadeProps,
+  SlideFadeProps,
+  SlideProps,
+} from "@chakra-ui/react";