@strapi/design-system 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/index.mjs

@@ -6,7 +6,7 @@ import * as DismissibleLayerPrimitive from "@radix-ui/react-dismissable-layer";
 import { DateFormatter, getLocalTimeZone, today, minDate, maxDate, startOfMonth, startOfWeek, getDayOfWeek, isSameDay, endOfMonth, parseAbsolute, toCalendarDate, parseAbsoluteToLocal, toCalendarDateTime } from "@internationalized/date";
 import { useCallbackRef, Combobox as Combobox$1, Select, composeEventHandlers } from "@strapi/ui-primitives";
 import { composeEventHandlers as composeEventHandlers2, useCallbackRef as useCallbackRef2, useCollator, useFilter } from "@strapi/ui-primitives";
-import { Loader as Loader$1, CarretDown, Cross, CheckCircle, ExclamationMarkCircle, Information, ExternalLink, ChevronRight, ChevronLeft, Calendar, Clock, Search, Dot } from "@strapi/icons";
+import { Loader as Loader$1, CaretDown, Cross, CheckCircle, WarningCircle, Information, ExternalLink, ChevronRight, ChevronLeft, Calendar, Clock, Search } from "@strapi/icons";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { createPortal } from "react-dom";
 import { useFloating, offset, shift as shift$1, flip, autoUpdate } from "@floating-ui/react-dom";
@@ -82,15 +82,19 @@ const Box = styled.div.withConfig({
   color: ${({ theme: theme2, color }) => extractStyleFromTheme(theme2.colors, color, void 0)};
 
   // Spaces
-  ${({ theme: theme2, padding }) => handleResponsiveValues("padding", padding, theme2)}
-  ${({ theme: theme2, paddingTop }) => handleResponsiveValues("padding-top", paddingTop, theme2)}
-  ${({ theme: theme2, paddingRight }) => handleResponsiveValues("padding-right", paddingRight, theme2)}
-  ${({ theme: theme2, paddingBottom }) => handleResponsiveValues("padding-bottom", paddingBottom, theme2)}
-  ${({ theme: theme2, paddingLeft }) => handleResponsiveValues("padding-left", paddingLeft, theme2)}
-  ${({ theme: theme2, marginLeft }) => handleResponsiveValues("margin-left", marginLeft, theme2)}
-  ${({ theme: theme2, marginRight }) => handleResponsiveValues("margin-right", marginRight, theme2)}
-  ${({ theme: theme2, marginTop }) => handleResponsiveValues("margin-top", marginTop, theme2)}
-  ${({ theme: theme2, marginBottom }) => handleResponsiveValues("margin-bottom", marginBottom, theme2)}
+  ${({ theme: theme2, padding }) => handleResponsiveValues("padding-block", padding, theme2)}
+  ${({ theme: theme2, padding }) => handleResponsiveValues("padding-inline", padding, theme2)}
+  ${({ theme: theme2, paddingTop }) => handleResponsiveValues("padding-block-start", paddingTop, theme2)}
+  ${({ theme: theme2, paddingRight }) => handleResponsiveValues("padding-inline-end", paddingRight, theme2)}
+  ${({ theme: theme2, paddingBottom }) => handleResponsiveValues("padding-block-end", paddingBottom, theme2)}
+  ${({ theme: theme2, paddingLeft }) => handleResponsiveValues("padding-inline-start", paddingLeft, theme2)}
+
+  ${({ theme: theme2, margin }) => handleResponsiveValues("margin-block", margin, theme2)}
+  ${({ theme: theme2, margin }) => handleResponsiveValues("margin-inline", margin, theme2)}
+  ${({ theme: theme2, marginLeft }) => handleResponsiveValues("margin-inline-start", marginLeft, theme2)}
+  ${({ theme: theme2, marginRight }) => handleResponsiveValues("margin-inline-end", marginRight, theme2)}
+  ${({ theme: theme2, marginTop }) => handleResponsiveValues("margin-block-start", marginTop, theme2)}
+  ${({ theme: theme2, marginBottom }) => handleResponsiveValues("margin-block-end", marginBottom, theme2)}
 
   // Responsive hiding
   ${({ theme: theme2, hiddenS }) => hiddenS ? `${theme2.mediaQueries.tablet} { display: none; }` : void 0}
@@ -373,18 +377,6 @@ const getBackground = ({
   }
   return boxBackground;
 };
-const IconWrapper$1 = styled(Box)`
-  path {
-    fill: ${({ color, theme: theme2 }) => extractStyleFromTheme(theme2.colors, color, void 0)};
-  }
-  ${({ theme: theme2, colors }) => colors(theme2)}
-`;
-const Icon = React.forwardRef(
-  ({ color = "neutral600", colors = () => "", ...restProps }, ref) => {
-    return /* @__PURE__ */ jsx(IconWrapper$1, { ref, color, colors, ...restProps });
-  }
-);
-Icon.displayName = "Icon";
 const getThemeSize = (type) => {
   return ({ theme: theme2, size }) => theme2.sizes[type][size];
 };
@@ -491,13 +483,10 @@ const ToggleButton = styled(TextButton)`
     max-width: 100%;
   }
 
-  svg {
+  & > svg {
     width: 1.4rem;
     height: 1.4rem;
-
-    path {
-      fill: ${({ theme: theme2, expanded }) => expanded ? theme2.colors.primary600 : theme2.colors.neutral500};
-    }
+    fill: ${({ theme: theme2, expanded }) => expanded ? theme2.colors.primary600 : theme2.colors.neutral500};
   }
 `;
 const FlexWithSize = styled(Flex)`
@@ -505,8 +494,8 @@ const FlexWithSize = styled(Flex)`
   border-radius: ${({ theme: theme2, expanded }) => expanded ? `${theme2.borderRadius} ${theme2.borderRadius} 0 0` : theme2.borderRadius};
 
   &:hover {
-    svg {
-      path {
+    ${ToggleButton} {
+      svg {
         fill: ${({ theme: theme2 }) => theme2.colors.primary600};
       }
     }
@@ -565,7 +554,7 @@ const AccordionToggle = ({
       background: iconColor,
       cursor: disabled ? "not-allowed" : "pointer",
       shrink: 0,
-      children: /* @__PURE__ */ jsx(Icon, { as: CarretDown, width: size === "M" ? `1.1rem` : `0.8rem`, color: expanded ? "primary600" : "neutral600" })
+      children: /* @__PURE__ */ jsx(CaretDown, { width: size === "M" ? `1.6rem` : `1.2rem`, fill: expanded ? "primary600" : "neutral600" })
     }
   );
   const stopPropagation = (e) => {
@@ -786,16 +775,30 @@ const handleIconColor = ({ theme: theme2, variant }) => {
   }
   return theme2.colors.primary700;
 };
+const VisuallyHidden = styled.div`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+`;
+const AccessibleIcon = ({ children, label }) => {
+  const child = React.Children.only(children);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    React.cloneElement(child, {
+      // accessibility
+      "aria-hidden": "true",
+      focusable: "false"
+      // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+    }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
+  ] });
+};
+AccessibleIcon.displayName = "AccessibleIcon";
 const CloseButton = styled(Box)`
-  svg {
-    height: 100%;
-    width: 100%;
-
-    path {
-      fill: ${({ theme: theme2 }) => theme2.colors.neutral700};
-    }
-  }
-
   ${buttonFocusStyle};
 `;
 const AlertIconWrapper = styled(Flex)`
@@ -813,7 +816,7 @@ const AlertIcon = ({ variant, ...props }) => {
     return /* @__PURE__ */ jsx(CheckCircle, { ...props });
   }
   if (variant === "danger" || variant === "warning") {
-    return /* @__PURE__ */ jsx(ExclamationMarkCircle, { ...props });
+    return /* @__PURE__ */ jsx(WarningCircle, { ...props });
   }
   return /* @__PURE__ */ jsx(Information, { ...props });
 };
@@ -872,12 +875,12 @@ const Alert = ({
             as: "button",
             background: "transparent",
             borderColor: void 0,
-            height: "1.2rem",
-            width: "1.2rem",
+            height: "1.6rem",
+            width: "1.6rem",
             marginTop: 1,
             onClick: onClose,
-            "aria-label": closeLabel,
-            children: /* @__PURE__ */ jsx(Cross, { "aria-hidden": true })
+            color: "neutral700",
+            children: /* @__PURE__ */ jsx(AccessibleIcon, { label: closeLabel, children: /* @__PURE__ */ jsx(Cross, {}) })
           }
         )
       ]
@@ -997,16 +1000,6 @@ const Badge = ({
   );
 };
 const BaseButtonWrapper = styled(Flex)`
-  > svg {
-    height: ${({ theme: theme2 }) => theme2.spaces[3]};
-    width: ${({ theme: theme2 }) => theme2.spaces[3]};
-
-    > g,
-    path {
-      fill: ${({ theme: theme2 }) => theme2.colors.neutral0};
-    }
-  }
-
   &[aria-disabled='true'] {
     pointer-events: none;
   }
@@ -1495,7 +1488,6 @@ const ButtonWrapper = styled(BaseButton)`
 
   svg {
     height: 1.2rem;
-    width: auto;
   }
 
   &[aria-disabled='true'] {
@@ -1602,7 +1594,7 @@ const Link = React.forwardRef(
 );
 const MenuRoot = DropdownMenu.Root;
 const MenuTrigger = React.forwardRef(
-  ({ size, endIcon = /* @__PURE__ */ jsx(CarretDown, { width: "0.6rem", height: "0.4rem", "aria-hidden": true }), ...props }, ref) => {
+  ({ size, endIcon = /* @__PURE__ */ jsx(CaretDown, { width: "0.6rem", height: "0.4rem", "aria-hidden": true }), ...props }, ref) => {
     return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button,
       {
@@ -2082,16 +2074,6 @@ const Portal$1 = React.forwardRef(
   }
 );
 Portal$1.displayName = "Portal";
-const VisuallyHidden = styled.div`
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-`;
 const TooltipWrapper = styled(Box)`
   /* z-index exist because of its position inside Modals */
   z-index: 4;
@@ -2168,7 +2150,9 @@ const Carousel = React.forwardRef(
           if (nextActionRef?.current) {
             nextActionRef.current.focus();
           }
-          onNext();
+          if (onNext) {
+            onNext();
+          }
           break;
         }
         case KeyboardKeys.LEFT: {
@@ -2176,7 +2160,9 @@ const Carousel = React.forwardRef(
           if (prevActionRef?.current) {
             prevActionRef.current.focus();
           }
-          onPrevious();
+          if (onPrevious) {
+            onPrevious();
+          }
           break;
         }
       }
@@ -2192,30 +2178,8 @@ const Carousel = React.forwardRef(
           position: "relative",
           children: [
             childrenArray && childrenArray.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                CarouselAction,
-                {
-                  as: "button",
-                  onClick: onPrevious,
-                  area: "startAction",
-                  ref: prevActionRef,
-                  "aria-label": previousLabel,
-                  type: "button",
-                  children: /* @__PURE__ */ jsx(Icon, { as: ChevronLeft, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CarouselAction,
-                {
-                  as: "button",
-                  onClick: onNext,
-                  area: "endAction",
-                  ref: nextActionRef,
-                  "aria-label": nextLabel,
-                  type: "button",
-                  children: /* @__PURE__ */ jsx(Icon, { as: ChevronRight, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" })
-                }
-              )
+              /* @__PURE__ */ jsx(CarouselAction, { as: "button", onClick: onPrevious, area: "startAction", ref: prevActionRef, type: "button", children: /* @__PURE__ */ jsx(AccessibleIcon, { label: previousLabel, children: /* @__PURE__ */ jsx(ChevronLeft, { width: "6px", height: "10px", fill: "neutral600" }) }) }),
+              /* @__PURE__ */ jsx(CarouselAction, { as: "button", onClick: onNext, area: "endAction", ref: nextActionRef, type: "button", children: /* @__PURE__ */ jsx(AccessibleIcon, { label: nextLabel, children: /* @__PURE__ */ jsx(ChevronRight, { width: "6px", height: "10px", fill: "neutral600" }) }) })
             ] }),
             /* @__PURE__ */ jsx(CarouselSlides, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: childrenArray }),
             actions
@@ -2680,8 +2644,8 @@ const commonTheme = {
   spaces: ["0px", "4px", "8px", "12px", "16px", "20px", "24px", "32px", "40px", "48px", "56px", "64px"],
   borderRadius: "4px",
   mediaQueries: {
-    tablet: `@media (max-width: 110rem)`,
-    mobile: `@media (max-width: 55rem)`
+    tablet: `@media (max-width: 1100px)`,
+    mobile: `@media (max-width: 550px)`
   },
   fontSizes: [`1.1rem`, `1.2rem`, `1.4rem`, "1.6rem", `1.8rem`, `3.2rem`],
   lineHeights: [1.14, 1.22, 1.25, 1.33, 1.43, 1.45, 1.5],
@@ -8437,7 +8401,7 @@ const ComboboxInput = React.forwardRef(
                   children: /* @__PURE__ */ jsx(Cross, {})
                 }
               ) : null,
-              /* @__PURE__ */ jsx(DownIcon$1, { children: /* @__PURE__ */ jsx(CarretDown, {}) })
+              /* @__PURE__ */ jsx(DownIcon$1, { children: /* @__PURE__ */ jsx(CaretDown, {}) })
             ] })
           ] }),
           /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Content$2, { sideOffset: 4, children: /* @__PURE__ */ jsxs(Viewport$2, { ref: viewportRef, children: [
@@ -8710,8 +8674,6 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     border: 0;
-    font-size: 100%;
-    font: inherit;
     vertical-align: baseline;
   }
   /* HTML5 display-role reset for older browsers */
@@ -8764,10 +8726,13 @@ const GlobalStyle = createGlobalStyle`
     outline: none;
   }
 
-  body,html{
-    height: 100%;
+  html {
     /* Sets 1rem === 10px */
     font-size: 62.5%;
+  }
+
+  body,html{
+    height: 100%;
     line-height: 1;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
@@ -8778,7 +8743,6 @@ const GlobalStyle = createGlobalStyle`
     border: none;
     background: none;
     color: inherit;
-    font-size: 100%;
     cursor: pointer;
     font: inherit;
   }
@@ -9071,7 +9035,7 @@ const SelectTrigger = React.forwardRef(
                 children: /* @__PURE__ */ jsx(Cross, {})
               }
             ) : null,
-            /* @__PURE__ */ jsx(DownIcon, { children: /* @__PURE__ */ jsx(CarretDown, {}) })
+            /* @__PURE__ */ jsx(DownIcon, { children: /* @__PURE__ */ jsx(CaretDown, {}) })
           ] })
         ]
       }
@@ -10459,7 +10423,7 @@ const EmptyStateLayout = ({
       hasRadius,
       shadow,
       children: [
-        /* @__PURE__ */ jsx(EmptyStateIconWrapper, { paddingBottom: 6, "aria-hidden": true, children: icon }),
+        icon ? /* @__PURE__ */ jsx(EmptyStateIconWrapper, { paddingBottom: 6, "aria-hidden": true, children: icon }) : null,
         /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", as: "p", textAlign: "center", textColor: "neutral600", children: content }) }),
         action
       ]
@@ -10476,7 +10440,7 @@ const Grid = (props) => {
   return /* @__PURE__ */ jsx(GridWrapper, { gap, gridCols, ...rest });
 };
 const GridItem = styled(Box)`
-  grid-column: span ${({ col }) => col};
+  grid-column: span ${({ col }) => col ?? 1};
   max-width: 100%;
 
   ${({ theme: theme2 }) => theme2.mediaQueries.tablet} {
@@ -10551,40 +10515,25 @@ const IconButtonWrapper = styled(BaseButton)`
 }};
   height: ${({ theme: theme2, size }) => theme2.sizes.button[size]};
   width: ${({ theme: theme2, size }) => theme2.sizes.button[size]};
-
-  svg {
-    g,
-    path {
-      fill: ${({ theme: theme2, variant }) => {
+  color: ${({ theme: theme2, variant }) => {
   if (variant === VARIANT_SECONDARY) {
     return theme2.colors.primary500;
   }
   return theme2.colors.neutral500;
 }};
-    }
-  }
 
-  :hover,
-  :focus {
-    svg {
-      g,
-      path {
-        fill: ${({ theme: theme2, variant }) => {
+  &:hover,
+  &:focus {
+    color: ${({ theme: theme2, variant }) => {
   if (variant === VARIANT_SECONDARY) {
     return theme2.colors.primary600;
   }
   return theme2.colors.neutral600;
 }};
-      }
-    }
   }
 
   &[aria-disabled='true'] {
-    svg {
-      path {
-        fill: ${({ theme: theme2 }) => theme2.colors.neutral600};
-      }
-    }
+    color: ${({ theme: theme2 }) => theme2.colors.neutral600};
   }
 `;
 const IconButtonGroup = styled(Flex)`
@@ -10600,38 +10549,20 @@ const IconButtonGroup = styled(Flex)`
   & ${IconButtonWrapper} {
     border-radius: 0;
     border-left: none;
-
-    svg {
-      path {
-        fill: ${({ theme: theme2 }) => theme2.colors.neutral700};
-      }
-    }
+    color: ${({ theme: theme2 }) => theme2.colors.neutral700};
 
     &:hover {
       background-color: ${({ theme: theme2 }) => theme2.colors.neutral100};
-
-      svg {
-        path {
-          fill: ${({ theme: theme2 }) => theme2.colors.neutral800};
-        }
-      }
+      color: ${({ theme: theme2 }) => theme2.colors.neutral800};
     }
 
     &:active {
       background-color: ${({ theme: theme2 }) => theme2.colors.neutral150};
-      svg {
-        path {
-          fill: ${({ theme: theme2 }) => theme2.colors.neutral900};
-        }
-      }
+      color: ${({ theme: theme2 }) => theme2.colors.neutral900};
     }
 
     &[aria-disabled='true'] {
-      svg {
-        path {
-          fill: ${({ theme: theme2 }) => theme2.colors.neutral600};
-        }
-      }
+      color: ${({ theme: theme2 }) => theme2.colors.neutral600};
     }
   }
 `;
@@ -22086,6 +22017,14 @@ const NavBrand = React.forwardRef(
     ] }) }) });
   }
 );
+const NavCondense = ({ children, ...props }) => {
+  const condensed = useMainNav();
+  const Icon = condensed ? ChevronRight : ChevronLeft;
+  return /* @__PURE__ */ jsxs(NavCondenseWrapper, { as: "button", condensed, ...props, children: [
+    /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, fill: "neutral600" }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children })
+  ] });
+};
 const NavCondenseWrapper = styled(Flex).attrs((props) => ({
   justifyContent: "center",
   ...props
@@ -22106,13 +22045,6 @@ const NavCondenseWrapper = styled(Flex).attrs((props) => ({
     height: 0.9rem;
   }
 `;
-const NavCondense = ({ children, ...props }) => {
-  const condensed = useMainNav();
-  return /* @__PURE__ */ jsxs(NavCondenseWrapper, { as: "button", condensed, ...props, children: [
-    /* @__PURE__ */ jsx(Icon, { as: condensed ? ChevronRight : ChevronLeft, "aria-hidden": true, color: "neutral600" }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children })
-  ] });
-};
 const NavFooter = ({ children }) => {
   return /* @__PURE__ */ jsx(Box, { position: "relative", children });
 };
@@ -22449,7 +22381,7 @@ const NumberInput = React.forwardRef(
                 tabIndex: -1,
                 type: "button",
                 "data-testid": "ArrowUp",
-                children: /* @__PURE__ */ jsx(Icon, { as: CarretDown, color: "neutral500" })
+                children: /* @__PURE__ */ jsx(CaretDown, { fill: "neutral500" })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -22461,7 +22393,7 @@ const NumberInput = React.forwardRef(
                 tabIndex: -1,
                 type: "button",
                 "data-testid": "ArrowDown",
-                children: /* @__PURE__ */ jsx(Icon, { as: CarretDown, color: "neutral500" })
+                children: /* @__PURE__ */ jsx(CaretDown, { fill: "neutral500" })
               }
             )
           ] }),
@@ -23463,21 +23395,20 @@ const SubNavLinkWrapper = styled(Box)`
     outline-offset: -2px;
   }
 `;
-const CustomBullet = styled(Dot)`
-  width: 1.2rem;
+const CustomBullet = styled.span`
+  width: 0.4rem;
   height: 0.4rem;
-  * {
-    fill: ${({ theme: theme2, $active }) => $active ? theme2.colors.primary600 : theme2.colors.neutral600};
-  }
+  background-color: ${({ theme: theme2, $active }) => $active ? theme2.colors.primary600 : theme2.colors.neutral600};
+  border-radius: 50%;
 `;
 const IconWrapper = styled.div`
   svg {
-    height: 1.2rem;
-    width: 1.2rem;
+    height: 1.6rem;
+    width: 1.6rem;
   }
 `;
 const SubNavLink = React.forwardRef(
-  ({ children, icon = null, withBullet = false, as = BaseLink, isSubSectionChild = false, ...props }, ref) => {
+  ({ active, children, icon = null, withBullet = false, as = BaseLink, isSubSectionChild = false, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       SubNavLinkWrapper,
       {
@@ -23491,7 +23422,7 @@ const SubNavLink = React.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs(Flex, { children: [
-            icon ? /* @__PURE__ */ jsx(IconWrapper, { children: icon }) : /* @__PURE__ */ jsx(CustomBullet, {}),
+            icon ? /* @__PURE__ */ jsx(IconWrapper, { children: icon }) : /* @__PURE__ */ jsx(CustomBullet, { $active: active }),
             /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsx(Typography, { as: "span", children }) })
           ] }),
           withBullet && /* @__PURE__ */ jsx(Box, { as: Flex, paddingRight: 4, children: /* @__PURE__ */ jsx(CustomBullet, { $active: true }) })
@@ -23500,14 +23431,6 @@ const SubNavLink = React.forwardRef(
     );
   }
 );
-const SubNavLinkSectionWrapper = styled(Box)`
-  svg {
-    height: 0.4rem;
-    path {
-      fill: ${({ theme: theme2 }) => theme2.colors.neutral700};
-    }
-  }
-`;
 const SubNavLinkSectionButton = styled.button`
   border: none;
   padding: 0;
@@ -23515,12 +23438,6 @@ const SubNavLinkSectionButton = styled.button`
   display: flex;
   align-items: center;
 `;
-const DropDownIconWrapper$1 = styled.div`
-  display: flex;
-  align-items: center;
-  width: 1.2rem;
-  transform: rotateX(${({ rotated }) => rotated ? "0deg" : "180deg"});
-`;
 const SubNavLinkSection = ({ label, children, id }) => {
   const [isOpen, setOpenLinks] = React.useState(true);
   const listId = useId(id);
@@ -23528,8 +23445,17 @@ const SubNavLinkSection = ({ label, children, id }) => {
     setOpenLinks((prev) => !prev);
   };
   return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(SubNavLinkSectionWrapper, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "space-between", children: /* @__PURE__ */ jsxs(SubNavLinkSectionButton, { onClick: handleClick, "aria-expanded": isOpen, "aria-controls": listId, children: [
-      /* @__PURE__ */ jsx(DropDownIconWrapper$1, { rotated: isOpen, children: /* @__PURE__ */ jsx(CarretDown, { "aria-hidden": true }) }),
+    /* @__PURE__ */ jsx(Box, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "space-between", children: /* @__PURE__ */ jsxs(SubNavLinkSectionButton, { onClick: handleClick, "aria-expanded": isOpen, "aria-controls": listId, children: [
+      /* @__PURE__ */ jsx(
+        CaretDown,
+        {
+          width: "1.2rem",
+          height: "1.2rem",
+          "aria-hidden": true,
+          fill: "neutral700",
+          style: { transform: `rotateX(${isOpen ? "0deg" : "180deg"})` }
+        }
+      ),
       /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsx(Typography, { as: "span", fontWeight: "semiBold", textColor: "neutral800", children: label }) })
     ] }) }) }),
     isOpen && /* @__PURE__ */ jsx("ul", { id: listId, children: React.Children.map(children, (child, index) => {
@@ -23566,7 +23492,7 @@ const SubNavSectionLabel = ({
         textAlign: "left",
         children: [
           /* @__PURE__ */ jsx(Box, { paddingRight: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }),
-          collapsable && /* @__PURE__ */ jsx(DropDownIconWrapper, { rotated: ariaExpanded, children: /* @__PURE__ */ jsx(CarretDown, { "aria-hidden": true }) })
+          collapsable && /* @__PURE__ */ jsx(DropDownIconWrapper, { rotated: ariaExpanded, children: /* @__PURE__ */ jsx(CaretDown, { "aria-hidden": true }) })
         ]
       }
     );
@@ -24361,6 +24287,7 @@ const ClearButton = styled(TextButton)`
   margin-left: auto;
 `;
 export {
+  AccessibleIcon,
   Accordion,
   AccordionContent,
   AccordionGroup,
@@ -24428,7 +24355,6 @@ export {
   GridItem,
   GridLayout,
   HeaderLayout,
-  Icon,
   IconButton,
   IconButtonGroup,
   Initials,