@vygruppen/spor-react 10.5.0 → 10.6.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.5.0 build
+> @vygruppen/spor-react@10.6.1 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.16 KB
-ESM dist/CountryCodeSelect-QMX6VHNM.mjs 1.22 KB
-ESM dist/chunk-CHJ6LT66.mjs             424.51 KB
-ESM ⚡️ Build success in 2272ms
-CJS dist/index.js 537.90 KB
-CJS ⚡️ Build success in 2273ms
-DTS ⚡️ Build success in 15423ms
-DTS dist/index.d.ts  339.25 KB
-DTS dist/index.d.mts 339.25 KB
+ESM dist/CountryCodeSelect-SIB4RO26.mjs 1.22 KB
+ESM dist/chunk-RQ4CWVFZ.mjs             425.08 KB
+ESM ⚡️ Build success in 2278ms
+CJS dist/index.js 538.54 KB
+CJS ⚡️ Build success in 2279ms
+DTS ⚡️ Build success in 15683ms
+DTS dist/index.d.ts  339.80 KB
+DTS dist/index.d.mts 339.80 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 10.6.1
+
+### Patch Changes
+
+- 22459d4: Added outline color of ExpandableAlert like the design
+
+## 10.6.0
+
+### Minor Changes
+
+- be4754b: PhoneNumberInput: Added the option to display the input as optional
+
 ## 10.5.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-QMX6VHNM.mjs → CountryCodeSelect-SIB4RO26.mjs}

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

package/dist/{chunk-CHJ6LT66.mjs → chunk-RQ4CWVFZ.mjs}

@@ -1756,10 +1756,11 @@ var PhoneNumberInput = forwardRef(
     value: externalValue,
     onChange: externalOnChange,
     variant,
+    isOptional,
     ...boxProps
   }, ref) => {
     const { t: t2 } = useTranslation();
-    const label = externalLabel ?? t2(texts4.phoneNumber);
+    const label = externalLabel ?? isOptional ? t2(texts4.phoneNumberOptional) : t2(texts4.phoneNumber);
     const [value, onChange] = useControllableState({
       value: externalValue,
       onChange: externalOnChange,
@@ -1827,6 +1828,12 @@ var texts4 = createTexts({
     en: "Phone number",
     sv: "Telefonnummer"
   },
+  phoneNumberOptional: {
+    nb: "Telefonnummer (valgfritt)",
+    nn: "Telefonnummer (valgfritt)",
+    en: "Phone number (optional)",
+    sv: "Telefonnummer (valfritt)"
+  },
   countryCodeLabel: {
     nb: "Landskode",
     nn: "Landskode",
@@ -1834,7 +1841,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-QMX6VHNM.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-SIB4RO26.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -2808,7 +2815,7 @@ var ExpandableAlert = ({
       allowToggle: true,
       flexGrow: "1"
     },
-    /* @__PURE__ */ React85__default.createElement(AccordionItem, null, /* @__PURE__ */ React85__default.createElement(AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React85__default.createElement(
+    /* @__PURE__ */ React85__default.createElement(AccordionItem, { sx: styles3.accordion }, /* @__PURE__ */ React85__default.createElement(AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React85__default.createElement(
       Flex,
       {
         justifyContent: "space-between",
@@ -10758,7 +10765,7 @@ var config3 = helpers2.defineMultiStyleConfig({
 var alert_default = config3;
 
 // src/theme/components/alert-expandable.ts
-var parts2 = anatomy("alertExpandable").parts("container");
+var parts2 = anatomy("alertExpandable").parts("container", "accordion");
 var helpers3 = createMultiStyleConfigHelpers(parts2.keys);
 var config4 = helpers3.defineMultiStyleConfig({
   baseStyle: {
@@ -10778,6 +10785,9 @@ var config4 = helpers3.defineMultiStyleConfig({
   },
   variants: {
     info: {
+      accordion: {
+        outlineColor: "cloudy"
+      },
       container: {
         _hover: {
           outlineColor: "sky"
@@ -10788,6 +10798,9 @@ var config4 = helpers3.defineMultiStyleConfig({
       }
     },
     success: {
+      accordion: {
+        outlineColor: "coralGreen"
+      },
       container: {
         _hover: {
           outlineColor: "blueGreen"
@@ -10798,6 +10811,9 @@ var config4 = helpers3.defineMultiStyleConfig({
       }
     },
     warning: {
+      accordion: {
+        outlineColor: "primrose"
+      },
       container: {
         _hover: {
           outlineColor: "sunshine"
@@ -10808,6 +10824,9 @@ var config4 = helpers3.defineMultiStyleConfig({
       }
     },
     "alt-transport": {
+      accordion: {
+        outlineColor: "burntYellow"
+      },
       container: {
         _hover: {
           outlineColor: "golden"
@@ -10818,6 +10837,9 @@ var config4 = helpers3.defineMultiStyleConfig({
       }
     },
     error: {
+      accordion: {
+        outlineColor: "salmon"
+      },
       container: {
         _hover: {
           outlineColor: "apricot"

package/dist/index.d.mts

@@ -1356,6 +1356,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
     /** The optional value of the country code and phone number */
     value?: CountryCodeAndPhoneNumber;
     variant?: "base" | "floating";
+    isOptional?: boolean;
 };
 /**
  * A component for entering phone numbers.
@@ -2557,11 +2558,14 @@ declare const theme: {
             } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: "container"[];
+                    keys: ("container" | "accordion")[];
                 }>;
             } | undefined;
             variants?: {
                 info: {
+                    accordion: {
+                        outlineColor: string;
+                    };
                     container: {
                         _hover: {
                             outlineColor: string;
@@ -2572,6 +2576,9 @@ declare const theme: {
                     };
                 };
                 success: {
+                    accordion: {
+                        outlineColor: string;
+                    };
                     container: {
                         _hover: {
                             outlineColor: string;
@@ -2582,6 +2589,9 @@ declare const theme: {
                     };
                 };
                 warning: {
+                    accordion: {
+                        outlineColor: string;
+                    };
                     container: {
                         _hover: {
                             outlineColor: string;
@@ -2592,6 +2602,9 @@ declare const theme: {
                     };
                 };
                 "alt-transport": {
+                    accordion: {
+                        outlineColor: string;
+                    };
                     container: {
                         _hover: {
                             outlineColor: string;
@@ -2602,6 +2615,9 @@ declare const theme: {
                     };
                 };
                 error: {
+                    accordion: {
+                        outlineColor: string;
+                    };
                     container: {
                         _hover: {
                             outlineColor: string;
@@ -2627,7 +2643,7 @@ declare const theme: {
                 variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: "container"[];
+            parts: ("container" | "accordion")[];
         };
         AlertService: {
             baseStyle?: {

package/dist/index.d.ts

@@ -1356,6 +1356,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
     /** The optional value of the country code and phone number */
     value?: CountryCodeAndPhoneNumber;
     variant?: "base" | "floating";
+    isOptional?: boolean;
 };
 /**
  * A component for entering phone numbers.
@@ -2557,11 +2558,14 @@ declare const theme: {
             } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: "container"[];
+                    keys: ("container" | "accordion")[];
                 }>;
             } | undefined;
             variants?: {
                 info: {
+                    accordion: {
+                        outlineColor: string;
+                    };
                     container: {
                         _hover: {
                             outlineColor: string;
@@ -2572,6 +2576,9 @@ declare const theme: {
                     };
                 };
                 success: {
+                    accordion: {
+                        outlineColor: string;
+                    };
                     container: {
                         _hover: {
                             outlineColor: string;
@@ -2582,6 +2589,9 @@ declare const theme: {
                     };
                 };
                 warning: {
+                    accordion: {
+                        outlineColor: string;
+                    };
                     container: {
                         _hover: {
                             outlineColor: string;
@@ -2592,6 +2602,9 @@ declare const theme: {
                     };
                 };
                 "alt-transport": {
+                    accordion: {
+                        outlineColor: string;
+                    };
                     container: {
                         _hover: {
                             outlineColor: string;
@@ -2602,6 +2615,9 @@ declare const theme: {
                     };
                 };
                 error: {
+                    accordion: {
+                        outlineColor: string;
+                    };
                     container: {
                         _hover: {
                             outlineColor: string;
@@ -2627,7 +2643,7 @@ declare const theme: {
                 variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: "container"[];
+            parts: ("container" | "accordion")[];
         };
         AlertService: {
             baseStyle?: {

package/dist/index.js

@@ -1968,10 +1968,11 @@ var init_PhoneNumberInput = __esm({
         value: externalValue,
         onChange: externalOnChange,
         variant,
+        isOptional,
         ...boxProps
       }, ref) => {
         const { t: t2 } = useTranslation();
-        const label = externalLabel ?? t2(texts5.phoneNumber);
+        const label = externalLabel ?? isOptional ? t2(texts5.phoneNumberOptional) : t2(texts5.phoneNumber);
         const [value, onChange] = react.useControllableState({
           value: externalValue,
           onChange: externalOnChange,
@@ -2039,6 +2040,12 @@ var init_PhoneNumberInput = __esm({
         en: "Phone number",
         sv: "Telefonnummer"
       },
+      phoneNumberOptional: {
+        nb: "Telefonnummer (valgfritt)",
+        nn: "Telefonnummer (valgfritt)",
+        en: "Phone number (optional)",
+        sv: "Telefonnummer (valfritt)"
+      },
       countryCodeLabel: {
         nb: "Landskode",
         nn: "Landskode",
@@ -3315,7 +3322,7 @@ var init_ExpandableAlert = __esm({
           allowToggle: true,
           flexGrow: "1"
         },
-        /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React86__namespace.default.createElement(
+        /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionItem, { sx: styles3.accordion }, /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React86__namespace.default.createElement(
           react.Flex,
           {
             justifyContent: "space-between",
@@ -12140,7 +12147,7 @@ var init_alert_expandable = __esm({
   "src/theme/components/alert-expandable.ts"() {
     init_dist4();
     init_dist3();
-    parts2 = anatomy("alertExpandable").parts("container");
+    parts2 = anatomy("alertExpandable").parts("container", "accordion");
     helpers3 = createMultiStyleConfigHelpers(parts2.keys);
     config4 = helpers3.defineMultiStyleConfig({
       baseStyle: {
@@ -12160,6 +12167,9 @@ var init_alert_expandable = __esm({
       },
       variants: {
         info: {
+          accordion: {
+            outlineColor: "cloudy"
+          },
           container: {
             _hover: {
               outlineColor: "sky"
@@ -12170,6 +12180,9 @@ var init_alert_expandable = __esm({
           }
         },
         success: {
+          accordion: {
+            outlineColor: "coralGreen"
+          },
           container: {
             _hover: {
               outlineColor: "blueGreen"
@@ -12180,6 +12193,9 @@ var init_alert_expandable = __esm({
           }
         },
         warning: {
+          accordion: {
+            outlineColor: "primrose"
+          },
           container: {
             _hover: {
               outlineColor: "sunshine"
@@ -12190,6 +12206,9 @@ var init_alert_expandable = __esm({
           }
         },
         "alt-transport": {
+          accordion: {
+            outlineColor: "burntYellow"
+          },
           container: {
             _hover: {
               outlineColor: "golden"
@@ -12200,6 +12219,9 @@ var init_alert_expandable = __esm({
           }
         },
         error: {
+          accordion: {
+            outlineColor: "salmon"
+          },
           container: {
             _hover: {
               outlineColor: "apricot"

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, 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, FullScreenDrawer, 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, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, 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, VyLogoPride, 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-CHJ6LT66.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, 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, FullScreenDrawer, 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, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, 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, VyLogoPride, 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-RQ4CWVFZ.mjs';

package/package.json

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

package/src/alert/ExpandableAlert.tsx

@@ -54,7 +54,7 @@ export const ExpandableAlert = ({
         allowToggle
         flexGrow="1"
       >
-        <AccordionItem>
+        <AccordionItem sx={styles.accordion}>
           <AccordionButton sx={styles.container}>
             <Flex
               justifyContent="space-between"

package/src/input/PhoneNumberInput.tsx

@@ -25,6 +25,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
   /** The optional value of the country code and phone number */
   value?: CountryCodeAndPhoneNumber;
   variant?: "base" | "floating";
+  isOptional?: boolean;
 };
 /**
  * A component for entering phone numbers.
@@ -51,12 +52,16 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
       value: externalValue,
       onChange: externalOnChange,
       variant,
+      isOptional,
       ...boxProps
     },
     ref,
   ) => {
     const { t } = useTranslation();
-    const label = externalLabel ?? t(texts.phoneNumber);
+    const label =
+      externalLabel ?? isOptional
+        ? t(texts.phoneNumberOptional)
+        : t(texts.phoneNumber);
     const [value, onChange] = useControllableState({
       value: externalValue,
       onChange: externalOnChange,
@@ -125,6 +130,12 @@ const texts = createTexts({
     en: "Phone number",
     sv: "Telefonnummer",
   },
+  phoneNumberOptional: {
+    nb: "Telefonnummer (valgfritt)",
+    nn: "Telefonnummer (valgfritt)",
+    en: "Phone number (optional)",
+    sv: "Telefonnummer (valfritt)",
+  },
   countryCodeLabel: {
     nb: "Landskode",
     nn: "Landskode",

package/src/theme/components/alert-expandable.ts

@@ -1,7 +1,7 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
 
-const parts = anatomy("alertExpandable").parts("container");
+const parts = anatomy("alertExpandable").parts("container", "accordion");
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
@@ -22,6 +22,9 @@ const config = helpers.defineMultiStyleConfig({
   },
   variants: {
     info: {
+      accordion: {
+        outlineColor: "cloudy",
+      },
       container: {
         _hover: {
           outlineColor: "sky",
@@ -32,6 +35,9 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
     success: {
+      accordion: {
+        outlineColor: "coralGreen",
+      },
       container: {
         _hover: {
           outlineColor: "blueGreen",
@@ -42,6 +48,9 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
     warning: {
+      accordion: {
+        outlineColor: "primrose",
+      },
       container: {
         _hover: {
           outlineColor: "sunshine",
@@ -52,6 +61,9 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
     "alt-transport": {
+      accordion: {
+        outlineColor: "burntYellow",
+      },
       container: {
         _hover: {
           outlineColor: "golden",
@@ -62,6 +74,9 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
     error: {
+      accordion: {
+        outlineColor: "salmon",
+      },
       container: {
         _hover: {
           outlineColor: "apricot",