@vygruppen/spor-react 10.6.1 → 10.6.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.6.1 build
+> @vygruppen/spor-react@10.6.2 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
+CJS dist/index.js 538.50 KB
+CJS ⚡️ Build success in 2340ms
 ESM dist/index.mjs                      2.16 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
+ESM dist/CountryCodeSelect-ANPDQEJN.mjs 1.22 KB
+ESM dist/chunk-CILVSJHM.mjs             425.04 KB
+ESM ⚡️ Build success in 2341ms
+DTS ⚡️ Build success in 16295ms
+DTS dist/index.d.ts  339.85 KB
+DTS dist/index.d.mts 339.85 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 10.6.2
+
+### Patch Changes
+
+- 297ab85: ServiceAlert: Fix bug with border
+
 ## 10.6.1
 
 ### Patch Changes

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

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

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

@@ -1841,7 +1841,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-SIB4RO26.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-ANPDQEJN.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -2868,14 +2868,14 @@ var ServiceAlert = ({
   variant = "service";
   const { t: t2 } = useTranslation();
   const styles3 = useMultiStyleConfig("AlertService");
-  return /* @__PURE__ */ React85__default.createElement(Box, { flexDirection: "column", sx: styles3.box }, /* @__PURE__ */ React85__default.createElement(
+  return /* @__PURE__ */ React85__default.createElement(
     BaseAlert,
     {
       variant,
       ...boxProps,
       paddingX: 0,
       paddingY: 0,
-      sx: styles3.box
+      sx: styles3.outerBox
     },
     /* @__PURE__ */ React85__default.createElement(
       Accordion$1,
@@ -2883,7 +2883,9 @@ var ServiceAlert = ({
         onChange: (expandedIndex) => onToggle(expandedIndex === 0),
         defaultIndex: defaultOpen ? 0 : -1,
         allowToggle: true,
-        flexGrow: "1"
+        flexGrow: 1,
+        sx: { outline: "none" },
+        variant
       },
       /* @__PURE__ */ React85__default.createElement(AccordionItem, null, /* @__PURE__ */ React85__default.createElement(AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React85__default.createElement(
         Stack$1,
@@ -2891,14 +2893,14 @@ var ServiceAlert = ({
           flexDirection: "row",
           justifyContent: "center",
           width: "100%",
-          paddingX: "12px"
+          paddingX: 2
         },
         /* @__PURE__ */ React85__default.createElement(
           Flex,
           {
             justifyContent: "space-between",
             alignItems: "center",
-            flexGrow: "1",
+            flexGrow: 1,
             maxWidth: contentWidth
           },
           /* @__PURE__ */ React85__default.createElement(Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React85__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React85__default.createElement(
@@ -2919,11 +2921,11 @@ var ServiceAlert = ({
           /* @__PURE__ */ React85__default.createElement(Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React85__default.createElement(Text, { sx: styles3.notificationText }, t2(texts12.notification(notification))), /* @__PURE__ */ React85__default.createElement(AccordionIcon, { color: "white" }))
         )
       )), /* @__PURE__ */ React85__default.createElement(AccordionPanel, { sx: styles3.serviceMessageContent }, /* @__PURE__ */ React85__default.createElement(Stack$1, { flexDirection: "row", justifyContent: "center", width: "100%" }, /* @__PURE__ */ React85__default.createElement(
-        Flex,
+        Stack$1,
         {
-          justifyContent: "space-between",
+          justifyContent: "center",
           alignItems: "center",
-          flexGrow: "1",
+          flexGrow: 1,
           maxWidth: contentWidth,
           flexFlow: "column",
           gap: 2,
@@ -2940,7 +2942,7 @@ var ServiceAlert = ({
         children
       ))))
     )
-  ));
+  );
 };
 var texts12 = createTexts({
   notification: (notification) => {
@@ -10869,7 +10871,7 @@ var alert_expandable_default = config4;
 // src/theme/components/alert-service.ts
 var parts3 = anatomy("alertService").parts(
   "container",
-  "box",
+  "outerBox",
   "notificationText",
   "serviceMessageContent"
 );
@@ -10883,7 +10885,7 @@ var config5 = helpers4.defineMultiStyleConfig({
       transitionProperty: "outline, border-radius",
       transitionDuration: "fast",
       borderTopRadius: "none",
-      borderBottomRadius: "18px",
+      borderBottomRadius: "md",
       _hover: {
         outline: "2px solid",
         outlineColor: "blueGreen"
@@ -10893,12 +10895,13 @@ var config5 = helpers4.defineMultiStyleConfig({
         outlineColor: "pine"
       }
     },
-    box: {
+    outerBox: {
       outline: "1px solid",
       outlineColor: "blueGreen",
       backgroundColor: "darkTeal",
-      borderBottomRadius: "1.125rem",
-      borderTopRadius: "none"
+      borderBottomRadius: "md",
+      borderTopRadius: "none",
+      width: "100%"
     },
     notificationText: {
       color: "white",

package/dist/index.d.mts

@@ -2664,12 +2664,13 @@ declare const theme: {
                         outlineColor: string;
                     };
                 };
-                box: {
+                outerBox: {
                     outline: string;
                     outlineColor: string;
                     backgroundColor: string;
                     borderBottomRadius: string;
                     borderTopRadius: string;
+                    width: string;
                 };
                 notificationText: {
                     color: string;
@@ -2686,12 +2687,12 @@ declare const theme: {
             } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                    keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
                 }>;
             } | undefined;
             variants?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                    keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
                 }>;
             } | undefined;
             defaultProps?: {
@@ -2699,7 +2700,7 @@ declare const theme: {
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+            parts: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
         };
         Badge: {
             baseStyle?: (({ colorScheme }: _chakra_ui_styled_system.StyleFunctionProps) => {

package/dist/index.d.ts

@@ -2664,12 +2664,13 @@ declare const theme: {
                         outlineColor: string;
                     };
                 };
-                box: {
+                outerBox: {
                     outline: string;
                     outlineColor: string;
                     backgroundColor: string;
                     borderBottomRadius: string;
                     borderTopRadius: string;
+                    width: string;
                 };
                 notificationText: {
                     color: string;
@@ -2686,12 +2687,12 @@ declare const theme: {
             } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                    keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
                 }>;
             } | undefined;
             variants?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                    keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
                 }>;
             } | undefined;
             defaultProps?: {
@@ -2699,7 +2700,7 @@ declare const theme: {
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+            parts: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
         };
         Badge: {
             baseStyle?: (({ colorScheme }: _chakra_ui_styled_system.StyleFunctionProps) => {

package/dist/index.js

@@ -3390,14 +3390,14 @@ var init_ServiceAlert = __esm({
       variant = "service";
       const { t: t2 } = useTranslation();
       const styles3 = react.useMultiStyleConfig("AlertService");
-      return /* @__PURE__ */ React86__namespace.default.createElement(react.Box, { flexDirection: "column", sx: styles3.box }, /* @__PURE__ */ React86__namespace.default.createElement(
+      return /* @__PURE__ */ React86__namespace.default.createElement(
         BaseAlert,
         {
           variant,
           ...boxProps,
           paddingX: 0,
           paddingY: 0,
-          sx: styles3.box
+          sx: styles3.outerBox
         },
         /* @__PURE__ */ React86__namespace.default.createElement(
           react.Accordion,
@@ -3405,7 +3405,9 @@ var init_ServiceAlert = __esm({
             onChange: (expandedIndex) => onToggle(expandedIndex === 0),
             defaultIndex: defaultOpen ? 0 : -1,
             allowToggle: true,
-            flexGrow: "1"
+            flexGrow: 1,
+            sx: { outline: "none" },
+            variant
           },
           /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React86__namespace.default.createElement(
             react.Stack,
@@ -3413,14 +3415,14 @@ var init_ServiceAlert = __esm({
               flexDirection: "row",
               justifyContent: "center",
               width: "100%",
-              paddingX: "12px"
+              paddingX: 2
             },
             /* @__PURE__ */ React86__namespace.default.createElement(
               react.Flex,
               {
                 justifyContent: "space-between",
                 alignItems: "center",
-                flexGrow: "1",
+                flexGrow: 1,
                 maxWidth: contentWidth
               },
               /* @__PURE__ */ React86__namespace.default.createElement(react.Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React86__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React86__namespace.default.createElement(
@@ -3441,11 +3443,11 @@ var init_ServiceAlert = __esm({
               /* @__PURE__ */ React86__namespace.default.createElement(react.Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React86__namespace.default.createElement(react.Text, { sx: styles3.notificationText }, t2(texts13.notification(notification))), /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionIcon, { color: "white" }))
             )
           )), /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionPanel, { sx: styles3.serviceMessageContent }, /* @__PURE__ */ React86__namespace.default.createElement(react.Stack, { flexDirection: "row", justifyContent: "center", width: "100%" }, /* @__PURE__ */ React86__namespace.default.createElement(
-            react.Flex,
+            react.Stack,
             {
-              justifyContent: "space-between",
+              justifyContent: "center",
               alignItems: "center",
-              flexGrow: "1",
+              flexGrow: 1,
               maxWidth: contentWidth,
               flexFlow: "column",
               gap: 2,
@@ -3462,7 +3464,7 @@ var init_ServiceAlert = __esm({
             children
           ))))
         )
-      ));
+      );
     };
     texts13 = createTexts({
       notification: (notification) => {
@@ -12258,7 +12260,7 @@ var init_alert_service = __esm({
     init_dist3();
     parts3 = anatomy("alertService").parts(
       "container",
-      "box",
+      "outerBox",
       "notificationText",
       "serviceMessageContent"
     );
@@ -12272,7 +12274,7 @@ var init_alert_service = __esm({
           transitionProperty: "outline, border-radius",
           transitionDuration: "fast",
           borderTopRadius: "none",
-          borderBottomRadius: "18px",
+          borderBottomRadius: "md",
           _hover: {
             outline: "2px solid",
             outlineColor: "blueGreen"
@@ -12282,12 +12284,13 @@ var init_alert_service = __esm({
             outlineColor: "pine"
           }
         },
-        box: {
+        outerBox: {
           outline: "1px solid",
           outlineColor: "blueGreen",
           backgroundColor: "darkTeal",
-          borderBottomRadius: "1.125rem",
-          borderTopRadius: "none"
+          borderBottomRadius: "md",
+          borderTopRadius: "none",
+          width: "100%"
         },
         notificationText: {
           color: "white",

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-RQ4CWVFZ.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-CILVSJHM.mjs';

package/package.json

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

package/src/alert/ServiceAlert.tsx

@@ -60,92 +60,92 @@ export const ServiceAlert = ({
   const { t } = useTranslation();
   const styles = useMultiStyleConfig("AlertService");
   return (
-    <Box flexDirection="column" sx={styles.box}>
-      <BaseAlert
+    <BaseAlert
+      variant={variant}
+      {...boxProps}
+      paddingX={0}
+      paddingY={0}
+      sx={styles.outerBox}
+    >
+      <Accordion
+        onChange={(expandedIndex) => onToggle(expandedIndex === 0)}
+        defaultIndex={defaultOpen ? 0 : -1}
+        allowToggle
+        flexGrow={1}
+        sx={{ outline: "none" }}
         variant={variant}
-        {...boxProps}
-        paddingX={0}
-        paddingY={0}
-        sx={styles.box}
       >
-        <Accordion
-          onChange={(expandedIndex) => onToggle(expandedIndex === 0)}
-          defaultIndex={defaultOpen ? 0 : -1}
-          allowToggle
-          flexGrow="1"
-        >
-          <AccordionItem>
-            <AccordionButton sx={styles.container}>
-              <Stack
-                flexDirection="row"
-                justifyContent="center"
-                width="100%"
-                paddingX="12px"
+        <AccordionItem>
+          <AccordionButton sx={styles.container}>
+            <Stack
+              flexDirection="row"
+              justifyContent="center"
+              width="100%"
+              paddingX={2}
+            >
+              <Flex
+                justifyContent="space-between"
+                alignItems="center"
+                flexGrow={1}
+                maxWidth={contentWidth}
               >
-                <Flex
-                  justifyContent="space-between"
-                  alignItems="center"
-                  flexGrow="1"
-                  maxWidth={contentWidth}
-                >
-                  <Flex as={headingLevel} alignItems="center">
-                    <AlertIcon variant={variant} />
+                <Flex as={headingLevel} alignItems="center">
+                  <AlertIcon variant={variant} />
 
-                    <Box
-                      as="span"
-                      sx={{
-                        // Truncate the title to one line
-                        display: "-webkit-box",
-                        overflow: "hidden",
-                        WebkitLineClamp: "1",
-                        WebkitBoxOrient: "vertical",
-                      }}
-                      color="white"
-                    >
-                      {title}
-                    </Box>
-                  </Flex>
+                  <Box
+                    as="span"
+                    sx={{
+                      // Truncate the title to one line
+                      display: "-webkit-box",
+                      overflow: "hidden",
+                      WebkitLineClamp: "1",
+                      WebkitBoxOrient: "vertical",
+                    }}
+                    color="white"
+                  >
+                    {title}
+                  </Box>
+                </Flex>
 
-                  <Flex alignItems="center">
-                    {notification && (
-                      <Text sx={styles.notificationText}>
-                        {t(texts.notification(notification))}
-                      </Text>
-                    )}
+                <Flex alignItems="center">
+                  {notification && (
+                    <Text sx={styles.notificationText}>
+                      {t(texts.notification(notification))}
+                    </Text>
+                  )}
 
-                    <AccordionIcon color="white" />
-                  </Flex>
+                  <AccordionIcon color="white" />
                 </Flex>
-              </Stack>
-            </AccordionButton>
+              </Flex>
+            </Stack>
+          </AccordionButton>
 
-            <AccordionPanel sx={styles.serviceMessageContent}>
-              <Stack flexDirection="row" justifyContent="center" width="100%">
-                <Flex
-                  justifyContent="space-between"
-                  alignItems="center"
-                  flexGrow="1"
-                  maxWidth={contentWidth}
-                  flexFlow="column"
-                  gap={2}
-                  sx={{
-                    p: {
-                      padding: "0.8rem 0",
-                      borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)",
-                    },
-                    "p:last-child": {
-                      borderBottom: "none",
-                    },
-                  }}
-                >
-                  {children}
-                </Flex>
+          <AccordionPanel sx={styles.serviceMessageContent}>
+            <Stack flexDirection="row" justifyContent="center" width="100%">
+              <Stack
+                justifyContent="center"
+                alignItems="center"
+                flexGrow={1}
+                maxWidth={contentWidth}
+                flexFlow="column"
+                gap={2}
+                sx={{
+                  p: {
+                    padding: "0.8rem 0",
+                    borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)",
+                  },
+                  "p:last-child": {
+                    borderBottom: "none",
+                  },
+                }}
+              >
+                {children}
               </Stack>
-            </AccordionPanel>
-          </AccordionItem>
-        </Accordion>
-      </BaseAlert>
-    </Box>
+            </Stack>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </BaseAlert>
   );
 };
 

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

@@ -3,7 +3,7 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
 
 const parts = anatomy("alertService").parts(
   "container",
-  "box",
+  "outerBox",
   "notificationText",
   "serviceMessageContent",
 );
@@ -18,7 +18,7 @@ const config = helpers.defineMultiStyleConfig({
       transitionProperty: "outline, border-radius",
       transitionDuration: "fast",
       borderTopRadius: "none",
-      borderBottomRadius: "18px",
+      borderBottomRadius: "md",
       _hover: {
         outline: "2px solid",
         outlineColor: "blueGreen",
@@ -28,12 +28,13 @@ const config = helpers.defineMultiStyleConfig({
         outlineColor: "pine",
       },
     },
-    box: {
+    outerBox: {
       outline: "1px solid",
       outlineColor: "blueGreen",
       backgroundColor: "darkTeal",
-      borderBottomRadius: "1.125rem",
+      borderBottomRadius: "md",
       borderTopRadius: "none",
+      width: "100%",
     },
     notificationText: {
       color: "white",