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

package/dist/index.js

@@ -105,15 +105,19 @@ const Box = styled__default.default.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}
@@ -396,18 +400,6 @@ const getBackground = ({
   }
   return boxBackground;
 };
-const IconWrapper$1 = styled__default.default(Box)`
-  path {
-    fill: ${({ color, theme: theme2 }) => extractStyleFromTheme(theme2.colors, color, void 0)};
-  }
-  ${({ theme: theme2, colors }) => colors(theme2)}
-`;
-const Icon = React__namespace.forwardRef(
-  ({ color = "neutral600", colors = () => "", ...restProps }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$1, { ref, color, colors, ...restProps });
-  }
-);
-Icon.displayName = "Icon";
 const getThemeSize = (type) => {
   return ({ theme: theme2, size }) => theme2.sizes[type][size];
 };
@@ -514,13 +506,10 @@ const ToggleButton = styled__default.default(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__default.default(Flex)`
@@ -528,8 +517,8 @@ const FlexWithSize = styled__default.default(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};
       }
     }
@@ -588,7 +577,7 @@ const AccordionToggle = ({
       background: iconColor,
       cursor: disabled ? "not-allowed" : "pointer",
       shrink: 0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: icons.CarretDown, width: size === "M" ? `1.1rem` : `0.8rem`, color: expanded ? "primary600" : "neutral600" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { width: size === "M" ? `1.6rem` : `1.2rem`, fill: expanded ? "primary600" : "neutral600" })
     }
   );
   const stopPropagation = (e) => {
@@ -809,16 +798,30 @@ const handleIconColor = ({ theme: theme2, variant }) => {
   }
   return theme2.colors.primary700;
 };
+const VisuallyHidden = styled__default.default.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__namespace.Children.only(children);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    React__namespace.cloneElement(child, {
+      // accessibility
+      "aria-hidden": "true",
+      focusable: "false"
+      // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { children: label })
+  ] });
+};
+AccessibleIcon.displayName = "AccessibleIcon";
 const CloseButton = styled__default.default(Box)`
-  svg {
-    height: 100%;
-    width: 100%;
-
-    path {
-      fill: ${({ theme: theme2 }) => theme2.colors.neutral700};
-    }
-  }
-
   ${buttonFocusStyle};
 `;
 const AlertIconWrapper = styled__default.default(Flex)`
@@ -836,7 +839,7 @@ const AlertIcon = ({ variant, ...props }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(icons.CheckCircle, { ...props });
   }
   if (variant === "danger" || variant === "warning") {
-    return /* @__PURE__ */ jsxRuntime.jsx(icons.ExclamationMarkCircle, { ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(icons.WarningCircle, { ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(icons.Information, { ...props });
 };
@@ -895,12 +898,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__ */ jsxRuntime.jsx(icons.Cross, { "aria-hidden": true })
+            color: "neutral700",
+            children: /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon, { label: closeLabel, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) })
           }
         )
       ]
@@ -1020,16 +1023,6 @@ const Badge = ({
   );
 };
 const BaseButtonWrapper = styled__default.default(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;
   }
@@ -1518,7 +1511,6 @@ const ButtonWrapper = styled__default.default(BaseButton)`
 
   svg {
     height: 1.2rem;
-    width: auto;
   }
 
   &[aria-disabled='true'] {
@@ -1625,7 +1617,7 @@ const Link = React__namespace.forwardRef(
 );
 const MenuRoot = DropdownMenu__namespace.Root;
 const MenuTrigger = React__namespace.forwardRef(
-  ({ size, endIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.CarretDown, { width: "0.6rem", height: "0.4rem", "aria-hidden": true }), ...props }, ref) => {
+  ({ size, endIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { width: "0.6rem", height: "0.4rem", "aria-hidden": true }), ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
@@ -2105,16 +2097,6 @@ const Portal$1 = React__namespace.forwardRef(
   }
 );
 Portal$1.displayName = "Portal";
-const VisuallyHidden = styled__default.default.div`
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-`;
 const TooltipWrapper = styled__default.default(Box)`
   /* z-index exist because of its position inside Modals */
   z-index: 4;
@@ -2191,7 +2173,9 @@ const Carousel = React__namespace.forwardRef(
           if (nextActionRef?.current) {
             nextActionRef.current.focus();
           }
-          onNext();
+          if (onNext) {
+            onNext();
+          }
           break;
         }
         case KeyboardKeys.LEFT: {
@@ -2199,7 +2183,9 @@ const Carousel = React__namespace.forwardRef(
           if (prevActionRef?.current) {
             prevActionRef.current.focus();
           }
-          onPrevious();
+          if (onPrevious) {
+            onPrevious();
+          }
           break;
         }
       }
@@ -2215,30 +2201,8 @@ const Carousel = React__namespace.forwardRef(
           position: "relative",
           children: [
             childrenArray && childrenArray.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CarouselAction,
-                {
-                  as: "button",
-                  onClick: onPrevious,
-                  area: "startAction",
-                  ref: prevActionRef,
-                  "aria-label": previousLabel,
-                  type: "button",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: icons.ChevronLeft, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CarouselAction,
-                {
-                  as: "button",
-                  onClick: onNext,
-                  area: "endAction",
-                  ref: nextActionRef,
-                  "aria-label": nextLabel,
-                  type: "button",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: icons.ChevronRight, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" })
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx(CarouselAction, { as: "button", onClick: onPrevious, area: "startAction", ref: prevActionRef, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon, { label: previousLabel, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeft, { width: "6px", height: "10px", fill: "neutral600" }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(CarouselAction, { as: "button", onClick: onNext, area: "endAction", ref: nextActionRef, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon, { label: nextLabel, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRight, { width: "6px", height: "10px", fill: "neutral600" }) }) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(CarouselSlides, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: childrenArray }),
             actions
@@ -2703,8 +2667,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],
@@ -8460,7 +8424,7 @@ const ComboboxInput = React__namespace.forwardRef(
                   children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
                 }
               ) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(DownIcon$1, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CarretDown, {}) })
+              /* @__PURE__ */ jsxRuntime.jsx(DownIcon$1, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, {}) })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(uiPrimitives.Combobox.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Content$2, { sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(Viewport$2, { ref: viewportRef, children: [
@@ -8733,8 +8697,6 @@ const GlobalStyle = styled.createGlobalStyle`
     margin: 0;
     padding: 0;
     border: 0;
-    font-size: 100%;
-    font: inherit;
     vertical-align: baseline;
   }
   /* HTML5 display-role reset for older browsers */
@@ -8787,10 +8749,13 @@ const GlobalStyle = styled.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;
   }
@@ -8801,7 +8766,6 @@ const GlobalStyle = styled.createGlobalStyle`
     border: none;
     background: none;
     color: inherit;
-    font-size: 100%;
     cursor: pointer;
     font: inherit;
   }
@@ -9094,7 +9058,7 @@ const SelectTrigger = React__namespace.forwardRef(
                 children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
               }
             ) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(DownIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CarretDown, {}) })
+            /* @__PURE__ */ jsxRuntime.jsx(DownIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, {}) })
           ] })
         ]
       }
@@ -10482,7 +10446,7 @@ const EmptyStateLayout = ({
       hasRadius,
       shadow,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(EmptyStateIconWrapper, { paddingBottom: 6, "aria-hidden": true, children: icon }),
+        icon ? /* @__PURE__ */ jsxRuntime.jsx(EmptyStateIconWrapper, { paddingBottom: 6, "aria-hidden": true, children: icon }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "delta", as: "p", textAlign: "center", textColor: "neutral600", children: content }) }),
         action
       ]
@@ -10499,7 +10463,7 @@ const Grid = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(GridWrapper, { gap, gridCols, ...rest });
 };
 const GridItem = styled__default.default(Box)`
-  grid-column: span ${({ col }) => col};
+  grid-column: span ${({ col }) => col ?? 1};
   max-width: 100%;
 
   ${({ theme: theme2 }) => theme2.mediaQueries.tablet} {
@@ -10574,40 +10538,25 @@ const IconButtonWrapper = styled__default.default(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__default.default(Flex)`
@@ -10623,38 +10572,20 @@ const IconButtonGroup = styled__default.default(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};
     }
   }
 `;
@@ -22109,6 +22040,14 @@ const NavBrand = React__namespace.forwardRef(
     ] }) }) });
   }
 );
+const NavCondense = ({ children, ...props }) => {
+  const condensed = useMainNav();
+  const Icon = condensed ? icons.ChevronRight : icons.ChevronLeft;
+  return /* @__PURE__ */ jsxRuntime.jsxs(NavCondenseWrapper, { as: "button", condensed, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true, fill: "neutral600" }),
+    /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { children })
+  ] });
+};
 const NavCondenseWrapper = styled__default.default(Flex).attrs((props) => ({
   justifyContent: "center",
   ...props
@@ -22129,13 +22068,6 @@ const NavCondenseWrapper = styled__default.default(Flex).attrs((props) => ({
     height: 0.9rem;
   }
 `;
-const NavCondense = ({ children, ...props }) => {
-  const condensed = useMainNav();
-  return /* @__PURE__ */ jsxRuntime.jsxs(NavCondenseWrapper, { as: "button", condensed, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: condensed ? icons.ChevronRight : icons.ChevronLeft, "aria-hidden": true, color: "neutral600" }),
-    /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { children })
-  ] });
-};
 const NavFooter = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { position: "relative", children });
 };
@@ -22472,7 +22404,7 @@ const NumberInput = React__namespace.forwardRef(
                 tabIndex: -1,
                 type: "button",
                 "data-testid": "ArrowUp",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: icons.CarretDown, color: "neutral500" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { fill: "neutral500" })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -22484,7 +22416,7 @@ const NumberInput = React__namespace.forwardRef(
                 tabIndex: -1,
                 type: "button",
                 "data-testid": "ArrowDown",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: icons.CarretDown, color: "neutral500" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { fill: "neutral500" })
               }
             )
           ] }),
@@ -23486,21 +23418,20 @@ const SubNavLinkWrapper = styled__default.default(Box)`
     outline-offset: -2px;
   }
 `;
-const CustomBullet = styled__default.default(icons.Dot)`
-  width: 1.2rem;
+const CustomBullet = styled__default.default.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__default.default.div`
   svg {
-    height: 1.2rem;
-    width: 1.2rem;
+    height: 1.6rem;
+    width: 1.6rem;
   }
 `;
 const SubNavLink = React__namespace.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__ */ jsxRuntime.jsxs(
       SubNavLinkWrapper,
       {
@@ -23514,7 +23445,7 @@ const SubNavLink = React__namespace.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { children: [
-            icon ? /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(CustomBullet, {}),
+            icon ? /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(CustomBullet, { $active: active }),
             /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", children }) })
           ] }),
           withBullet && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: Flex, paddingRight: 4, children: /* @__PURE__ */ jsxRuntime.jsx(CustomBullet, { $active: true }) })
@@ -23523,14 +23454,6 @@ const SubNavLink = React__namespace.forwardRef(
     );
   }
 );
-const SubNavLinkSectionWrapper = styled__default.default(Box)`
-  svg {
-    height: 0.4rem;
-    path {
-      fill: ${({ theme: theme2 }) => theme2.colors.neutral700};
-    }
-  }
-`;
 const SubNavLinkSectionButton = styled__default.default.button`
   border: none;
   padding: 0;
@@ -23538,12 +23461,6 @@ const SubNavLinkSectionButton = styled__default.default.button`
   display: flex;
   align-items: center;
 `;
-const DropDownIconWrapper$1 = styled__default.default.div`
-  display: flex;
-  align-items: center;
-  width: 1.2rem;
-  transform: rotateX(${({ rotated }) => rotated ? "0deg" : "180deg"});
-`;
 const SubNavLinkSection = ({ label, children, id }) => {
   const [isOpen, setOpenLinks] = React__namespace.useState(true);
   const listId = useId(id);
@@ -23551,8 +23468,17 @@ const SubNavLinkSection = ({ label, children, id }) => {
     setOpenLinks((prev) => !prev);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SubNavLinkSectionWrapper, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { justifyContent: "space-between", children: /* @__PURE__ */ jsxRuntime.jsxs(SubNavLinkSectionButton, { onClick: handleClick, "aria-expanded": isOpen, "aria-controls": listId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DropDownIconWrapper$1, { rotated: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { justifyContent: "space-between", children: /* @__PURE__ */ jsxRuntime.jsxs(SubNavLinkSectionButton, { onClick: handleClick, "aria-expanded": isOpen, "aria-controls": listId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        icons.CaretDown,
+        {
+          width: "1.2rem",
+          height: "1.2rem",
+          "aria-hidden": true,
+          fill: "neutral700",
+          style: { transform: `rotateX(${isOpen ? "0deg" : "180deg"})` }
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", fontWeight: "semiBold", textColor: "neutral800", children: label }) })
     ] }) }) }),
     isOpen && /* @__PURE__ */ jsxRuntime.jsx("ul", { id: listId, children: React__namespace.Children.map(children, (child, index) => {
@@ -23589,7 +23515,7 @@ const SubNavSectionLabel = ({
         textAlign: "left",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }),
-          collapsable && /* @__PURE__ */ jsxRuntime.jsx(DropDownIconWrapper, { rotated: ariaExpanded, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true }) })
+          collapsable && /* @__PURE__ */ jsxRuntime.jsx(DropDownIconWrapper, { rotated: ariaExpanded, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { "aria-hidden": true }) })
         ]
       }
     );
@@ -24399,6 +24325,7 @@ Object.defineProperty(exports, "useFilter", {
   enumerable: true,
   get: () => uiPrimitives.useFilter
 });
+exports.AccessibleIcon = AccessibleIcon;
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
 exports.AccordionGroup = AccordionGroup;
@@ -24466,7 +24393,6 @@ exports.Grid = Grid;
 exports.GridItem = GridItem;
 exports.GridLayout = GridLayout;
 exports.HeaderLayout = HeaderLayout;
-exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.IconButtonGroup = IconButtonGroup;
 exports.Initials = Initials;