@strapi/design-system 2.0.0-rc.23 → 2.0.0-rc.25

package/dist/index.js

@@ -5,7 +5,7 @@ const reactUseCallbackRef = require("@radix-ui/react-use-callback-ref");
 const date = require("@internationalized/date");
 const jsxRuntime = require("react/jsx-runtime");
 const Tooltip = require("@radix-ui/react-tooltip");
-const styledComponents = require("styled-components");
+const styled = require("styled-components");
 const DismissibleLayerPrimitive = require("@radix-ui/react-dismissable-layer");
 const uiPrimitives = require("@strapi/ui-primitives");
 const RadixAccordion = require("@radix-ui/react-accordion");
@@ -32,6 +32,7 @@ const RadioGroup = require("@radix-ui/react-radio-group");
 const Switch = require("@radix-ui/react-switch");
 const Tabs$1 = require("@radix-ui/react-tabs");
 const lodash = require("lodash");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
   if (e && e.__esModule)
     return e;
@@ -52,6 +53,7 @@ function _interopNamespace(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const Tooltip__namespace = /* @__PURE__ */ _interopNamespace(Tooltip);
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const DismissibleLayerPrimitive__namespace = /* @__PURE__ */ _interopNamespace(DismissibleLayerPrimitive);
 const RadixAccordion__namespace = /* @__PURE__ */ _interopNamespace(RadixAccordion);
 const Avatar__namespace = /* @__PURE__ */ _interopNamespace(Avatar$1);
@@ -356,7 +358,7 @@ const Box = forwardRef((props, ref) => {
   };
   return /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { as: AsComponent, ref, ...mappedProps, ...rest });
 });
-const StyledBox = styledComponents.styled.div`
+const StyledBox = styled.styled.div`
   ${({ theme, ...props }) => {
   return handleResponsiveValues(
     {
@@ -422,7 +424,7 @@ const Flex = forwardRef((props, ref) => {
   };
   return /* @__PURE__ */ jsxRuntime.jsx(StyledFlex, { className, ref, ...mappedProps, ...rest });
 });
-const StyledFlex = styledComponents.styled(Box)`
+const StyledFlex = styled.styled(Box)`
   ${({ theme, $display = "flex", $alignItems = "center", $direction = "row", ...props }) => handleResponsiveValues(
   {
     gap: props.$gap,
@@ -442,7 +444,7 @@ const EPSILON = "epsilon";
 const OMEGA = "omega";
 const PI = "pi";
 const SIGMA = "sigma";
-const ellipsis = styledComponents.css`
+const ellipsis = styled.css`
   display: block;
   white-space: nowrap;
   overflow: hidden;
@@ -530,7 +532,7 @@ const Typography = forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(StyledTypography, { ref, tag: "span", ...mappedProps, ...rest });
   }
 );
-const StyledTypography = styledComponents.styled(Box)`
+const StyledTypography = styled.styled(Box)`
   ${variant}
   ${({ $ellipsis }) => $ellipsis ? ellipsis : ""}
 
@@ -552,17 +554,17 @@ const [AccordionProvider, useAccordion] = createContext("Accordion");
 const Root$8 = React__namespace.forwardRef(({ children, size = "S", ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionRoot, { ref: forwardedRef, $size: size, collapsible: true, ...props, type: "single", children: /* @__PURE__ */ jsxRuntime.jsx(AccordionProvider, { size, children }) });
 });
-const AccordionRoot = styledComponents.styled(RadixAccordion__namespace.Root)`
+const AccordionRoot = styled.styled(RadixAccordion__namespace.Root)`
   background-color: ${(props) => props.theme.colors.neutral0};
 
   ${(props) => {
   if (props.$size === "S") {
-    return styledComponents.css`
+    return styled.css`
         border-radius: ${(props2) => props2.theme.borderRadius};
         border: solid 1px ${(props2) => props2.theme.colors.neutral200};
       `;
   } else {
-    return styledComponents.css``;
+    return styled.css``;
   }
 }}
 `;
@@ -570,7 +572,7 @@ const Item$5 = React__namespace.forwardRef((props, forwardedRef) => {
   const { size } = useAccordion("Item");
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionItem, { $size: size, "data-size": size, ref: forwardedRef, ...props });
 });
-const AccordionItem = styledComponents.styled(RadixAccordion__namespace.Item)`
+const AccordionItem = styled.styled(RadixAccordion__namespace.Item)`
   overflow: hidden;
   margin: 1px 0;
 
@@ -638,7 +640,7 @@ const Trigger$7 = React__namespace.forwardRef(
     ] });
   }
 );
-const IconBox$2 = styledComponents.styled(Box)`
+const IconBox$2 = styled.styled(Box)`
   color: ${(props) => props.theme.colors.neutral500};
   display: flex;
 
@@ -646,7 +648,7 @@ const IconBox$2 = styledComponents.styled(Box)`
     transition: ${(props) => props.theme.transitions.color};
   }
 `;
-const TriggerIcon = styledComponents.styled(Flex).attrs((props) => ({
+const TriggerIcon = styled.styled(Flex).attrs((props) => ({
   ...props,
   tag: "span"
 }))`
@@ -663,7 +665,7 @@ const TriggerIcon = styledComponents.styled(Flex).attrs((props) => ({
       ${(props) => props.theme.transitions.backgroundColor};
   }
 `;
-const AccordionTrigger = styledComponents.styled(RadixAccordion__namespace.Trigger)`
+const AccordionTrigger = styled.styled(RadixAccordion__namespace.Trigger)`
   display: flex;
   align-items: center;
   justify-content: ${(props) => props.$caretPosition === "left" ? "flex-start" : "space-between"};
@@ -697,7 +699,7 @@ const Actions = React__namespace.forwardRef((props, forwardedRef) => {
   const { size } = useAccordion("Trigger");
   return /* @__PURE__ */ jsxRuntime.jsx(ActionWrapper, { $size: size, ...props, ref: forwardedRef });
 });
-const ActionWrapper = styledComponents.styled(Flex).attrs((props) => ({
+const ActionWrapper = styled.styled(Flex).attrs((props) => ({
   ...props,
   tag: "span"
 }))`
@@ -718,7 +720,7 @@ const ActionWrapper = styledComponents.styled(Flex).attrs((props) => ({
 const Header$2 = React__namespace.forwardRef(({ variant: variant2 = "primary", ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionHeader, { $variant: variant2, ref: forwardedRef, ...props });
 });
-const AccordionHeader = styledComponents.styled(RadixAccordion__namespace.Header)`
+const AccordionHeader = styled.styled(RadixAccordion__namespace.Header)`
   display: flex;
   align-items: center;
   background-color: ${(props) => props.$variant === "primary" ? props.theme.colors.neutral0 : props.theme.colors.neutral100};
@@ -757,7 +759,7 @@ const AccordionHeader = styledComponents.styled(RadixAccordion__namespace.Header
 const Content$7 = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { ref: forwardedRef, ...props });
 });
-const slideDown = styledComponents.keyframes`
+const slideDown = styled.keyframes`
   from {
     height: 0;
   }
@@ -765,7 +767,7 @@ const slideDown = styledComponents.keyframes`
     height: var(--radix-accordion-content-height);
   }
 `;
-const slideUp = styledComponents.keyframes`
+const slideUp = styled.keyframes`
   from {
     height: var(--radix-accordion-content-height);
   }
@@ -773,7 +775,7 @@ const slideUp = styledComponents.keyframes`
     height: 0;
   }
 `;
-const AccordionContent = styledComponents.styled(RadixAccordion__namespace.Content)`
+const AccordionContent = styled.styled(RadixAccordion__namespace.Content)`
   overflow: hidden;
 
   @media (prefers-reduced-motion: no-preference) {
@@ -797,7 +799,7 @@ const Accordion = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
   Root: Root$8,
   Trigger: Trigger$7
 }, Symbol.toStringTag, { value: "Module" }));
-const focus = styledComponents.css`
+const focus = styled.css`
   position: relative;
   outline: none;
 
@@ -833,7 +835,7 @@ const VisuallyHidden = ({ tag, ...props }) => {
   const AsComponent = tag || "span";
   return /* @__PURE__ */ jsxRuntime.jsx(Span, { ...props, as: AsComponent });
 };
-const Span = styledComponents.styled.span`
+const Span = styled.styled.span`
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -883,10 +885,10 @@ const handleIconColor = ({ theme, $variant }) => {
   }
   return theme.colors.primary700;
 };
-const CloseButton = styledComponents.styled(Box)`
+const CloseButton = styled.styled(Box)`
   ${focus};
 `;
-const AlertIconWrapper = styledComponents.styled(Flex)`
+const AlertIconWrapper = styled.styled(Flex)`
   svg {
     height: 100%;
     width: 100%;
@@ -905,7 +907,7 @@ const AlertIcon = ({ variant: variant2, ...props }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(icons.Information, { ...props });
 };
-const ActionBox = styledComponents.styled(Box)`
+const ActionBox = styled.styled(Box)`
   & a > span {
     color: ${handleIconColor};
   }
@@ -1043,7 +1045,7 @@ const TRANSITIONS = {
   backgroundColor: `background-color ${TIMINGS["120"]} ${EASINGS.easeOutQuad}`
 };
 const ANIMATIONS = {
-  overlayFadeIn: styledComponents.keyframes`
+  overlayFadeIn: styled.keyframes`
     from {
       opacity: 0;
     }
@@ -1051,7 +1053,7 @@ const ANIMATIONS = {
       opacity: 0.2;
     }
   `,
-  modalPopIn: styledComponents.keyframes`
+  modalPopIn: styled.keyframes`
     from {
       transform:translate(-50%, -50%)  scale(0.8);
       opacity: 0;
@@ -1061,7 +1063,7 @@ const ANIMATIONS = {
       opacity: 1;
     }
   `,
-  modalPopOut: styledComponents.keyframes`
+  modalPopOut: styled.keyframes`
     from {
       transform: translate(-50%, -50%) scale(1);
       opacity: 1;
@@ -1071,7 +1073,7 @@ const ANIMATIONS = {
       opacity: 0;
     }
   `,
-  popIn: styledComponents.keyframes`
+  popIn: styled.keyframes`
     from {
       transform: scale(0.8);
       opacity: 0;
@@ -1081,7 +1083,7 @@ const ANIMATIONS = {
       opacity: 1;
     }
   `,
-  popOut: styledComponents.keyframes`
+  popOut: styled.keyframes`
     from {
       transform: scale(1);
       opacity: 1;
@@ -1091,7 +1093,7 @@ const ANIMATIONS = {
       opacity: 0;
     }
   `,
-  slideDownIn: styledComponents.keyframes`
+  slideDownIn: styled.keyframes`
     from {
       opacity: 0;
       transform: translateY(-10px);
@@ -1101,7 +1103,7 @@ const ANIMATIONS = {
       transform: translateY(0);
     }
   `,
-  slideDownOut: styledComponents.keyframes`
+  slideDownOut: styled.keyframes`
     from {
       opacity: 1;
       transform: translateY(0);
@@ -1111,7 +1113,7 @@ const ANIMATIONS = {
       transform: translateY(-10px);
     }
   `,
-  slideUpIn: styledComponents.keyframes`
+  slideUpIn: styled.keyframes`
     from {
       opacity: 0;
       transform: translateY(10px);
@@ -1121,7 +1123,7 @@ const ANIMATIONS = {
       transform: translateY(0);
     }
   `,
-  slideUpOut: styledComponents.keyframes`
+  slideUpOut: styled.keyframes`
     from {
       opacity: 1;
       transform: translateY(0);
@@ -1131,7 +1133,7 @@ const ANIMATIONS = {
       transform: translateY(10px);
     }
   `,
-  fadeIn: styledComponents.keyframes`
+  fadeIn: styled.keyframes`
     from {
       opacity: 0;
     }
@@ -1139,7 +1141,7 @@ const ANIMATIONS = {
       opacity: 1;
     }
   `,
-  fadeOut: styledComponents.keyframes`
+  fadeOut: styled.keyframes`
     from {
       opacity: 1;
     }
@@ -1182,7 +1184,7 @@ const Item$4 = React__namespace.forwardRef(
     ] });
   }
 );
-const avatarStyles = styledComponents.css`
+const avatarStyles = styled.css`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1192,13 +1194,13 @@ const avatarStyles = styledComponents.css`
   overflow: hidden;
   border-radius: 50%;
 `;
-const imgStyles = styledComponents.css`
+const imgStyles = styled.css`
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
 `;
-const AvatarRoot = styledComponents.styled(Avatar__namespace.Root)`
+const AvatarRoot = styled.styled(Avatar__namespace.Root)`
   position: relative;
   z-index: 0;
   ${avatarStyles}
@@ -1208,16 +1210,16 @@ const AvatarRoot = styledComponents.styled(Avatar__namespace.Root)`
   background-color: ${(p) => p.theme.colors.primary600};
   color: ${(p) => p.theme.colors.neutral0};
 `;
-const AvatarOverlay = styledComponents.styled(Box)`
+const AvatarOverlay = styled.styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     transition: opacity ${(props) => props.theme.motion.timings["200"]}
       ${(props) => props.theme.motion.easings.authenticMotion};
   }
 `;
-const AvatarImage = styledComponents.styled(Avatar__namespace.Image)`
+const AvatarImage = styled.styled(Avatar__namespace.Image)`
   ${imgStyles}
 `;
-const PreviewContent = styledComponents.styled(Tooltip__namespace.Content)`
+const PreviewContent = styled.styled(Tooltip__namespace.Content)`
   ${avatarStyles}
   width: ${SIZE * PREVIEW_SCALE / 10}rem;
   height: ${SIZE * PREVIEW_SCALE / 10}rem;
@@ -1227,13 +1229,13 @@ const PreviewContent = styledComponents.styled(Tooltip__namespace.Content)`
       ${(props) => props.theme.motion.easings.authenticMotion};
   }
 `;
-const PreviewImg = styledComponents.styled.img`
+const PreviewImg = styled.styled.img`
   ${imgStyles}
 `;
 const Group$2 = React__namespace.forwardRef((props, forwarededRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(GroupFlex, { ...props, ref: forwarededRef, tag: "div" });
 });
-const GroupFlex = styledComponents.styled(Flex)`
+const GroupFlex = styled.styled(Flex)`
   & > ${AvatarRoot} + ${AvatarRoot} {
     margin-left: -${SIZE / 10 / 2}rem;
   }
@@ -1269,16 +1271,16 @@ const Badge = ({
     }
   );
 };
-const Base = styledComponents.styled(Flex)`
+const Base = styled.styled(Flex)`
   border-radius: ${({ theme, $size }) => $size === "S" ? "2px" : theme.borderRadius};
   ${({ $size, theme }) => {
   if ($size === "S") {
-    return styledComponents.css`
+    return styled.css`
         padding-block: 0.3rem;
         padding-inline ${theme.spaces[1]}
       `;
   }
-  return styledComponents.css`
+  return styled.css`
       padding-block: 0.7rem;
       padding-inline ${theme.spaces[2]}
     `;
@@ -1303,7 +1305,7 @@ const BaseLinkImpl = forwardRef(
     );
   }
 );
-const BaseLink = styledComponents.styled(Box)`
+const BaseLink = styled.styled(Box)`
   text-decoration: none;
 
   &:visited {
@@ -1314,7 +1316,7 @@ const Divider$1 = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true, paddingLeft: 1, paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "pi", textColor: "neutral500", children: "/" }) });
 };
 Divider$1.displayName = "Divider";
-const AlignedList = styledComponents.styled(Flex)`
+const AlignedList = styled.styled(Flex)`
   // CrumbLinks do have padding-x, because they need to have a
   // interaction effect, which mis-aligns the breadcrumbs on the left.
   // This normalizes the behavior by moving the first item to left by
@@ -1350,7 +1352,7 @@ const Crumb = React__namespace.forwardRef(
   ) })
 );
 Crumb.displayName = "Crumb";
-const StyledLink = styledComponents.styled(BaseLinkImpl)`
+const StyledLink = styled.styled(BaseLinkImpl)`
   border-radius: ${({ theme }) => theme.borderRadius};
   color: ${({ theme }) => theme.colors.neutral600};
   font-size: ${({ theme }) => theme.fontSizes[1]};
@@ -1444,7 +1446,7 @@ const getVariantColorName = (variant2) => {
   return `${variant2}`;
 };
 const getDisabledStyle = ({ theme }) => {
-  return styledComponents.css`
+  return styled.css`
     border: 1px solid ${theme.colors.neutral200};
     background: ${theme.colors.neutral150};
     color: ${theme.colors.neutral600};
@@ -1453,45 +1455,45 @@ const getDisabledStyle = ({ theme }) => {
 };
 const getHoverStyle = ({ theme, $variant }) => {
   if ([...LIGHT_VARIANTS, SECONDARY].includes($variant)) {
-    return styledComponents.css`
+    return styled.css`
       background-color: ${theme.colors.neutral0};
     `;
   }
   if ($variant === TERTIARY) {
-    return styledComponents.css`
+    return styled.css`
       background-color: ${theme.colors.neutral100};
     `;
   }
   if ($variant === GHOST) {
-    return styledComponents.css`
+    return styled.css`
       background-color: ${theme.colors.neutral100};
     `;
   }
   if ($variant === DEFAULT) {
-    return styledComponents.css`
+    return styled.css`
       border: 1px solid ${theme.colors.buttonPrimary500};
       background: ${theme.colors.buttonPrimary500};
     `;
   }
-  return styledComponents.css`
+  return styled.css`
     border: 1px solid ${theme.colors[`${getVariantColorName($variant)}500`]};
     background: ${theme.colors[`${getVariantColorName($variant)}500`]};
   `;
 };
 const getActiveStyle = ({ theme, $variant }) => {
   if ([...LIGHT_VARIANTS, SECONDARY].includes($variant)) {
-    return styledComponents.css`
+    return styled.css`
       background-color: ${theme.colors.neutral0};
       border: 1px solid ${theme.colors[`${getVariantColorName($variant)}600`]};
       color: ${theme.colors[`${getVariantColorName($variant)}600`]};
     `;
   }
   if ($variant === TERTIARY || $variant === GHOST) {
-    return styledComponents.css`
+    return styled.css`
       background-color: ${theme.colors.neutral150};
     `;
   }
-  return styledComponents.css`
+  return styled.css`
     border: 1px solid ${theme.colors[`${getVariantColorName($variant)}600`]};
     background: ${theme.colors[`${getVariantColorName($variant)}600`]};
   `;
@@ -1501,21 +1503,21 @@ const getVariantStyle = ({ theme, $variant }) => {
     case DANGER_LIGHT:
     case SUCCESS_LIGHT:
     case SECONDARY: {
-      return styledComponents.css`
+      return styled.css`
         border: 1px solid ${theme.colors[`${getVariantColorName($variant)}200`]};
         background: ${theme.colors[`${getVariantColorName($variant)}100`]};
         color: ${theme.colors[`${getVariantColorName($variant)}700`]};
       `;
     }
     case TERTIARY: {
-      return styledComponents.css`
+      return styled.css`
         border: 1px solid ${theme.colors.neutral200};
         background: ${theme.colors.neutral0};
         color: ${theme.colors.neutral800};
       `;
     }
     case GHOST: {
-      return styledComponents.css`
+      return styled.css`
         border: 1px solid transparent;
         background: transparent;
         color: ${theme.colors.neutral800};
@@ -1527,14 +1529,14 @@ const getVariantStyle = ({ theme, $variant }) => {
     }
     case SUCCESS:
     case DANGER: {
-      return styledComponents.css`
+      return styled.css`
         border: 1px solid ${theme.colors[`${getVariantColorName($variant)}600`]};
         background: ${theme.colors[`${getVariantColorName($variant)}600`]};
         color: ${theme.colors.neutral0};
       `;
     }
     default: {
-      return styledComponents.css`
+      return styled.css`
         border: 1px solid ${theme.colors.buttonPrimary600};
         background: ${theme.colors.buttonPrimary600};
         color: ${theme.colors.buttonNeutral0};
@@ -1590,7 +1592,7 @@ const Button = forwardRef(
     );
   }
 );
-const rotation$2 = styledComponents.keyframes`
+const rotation$2 = styled.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -1598,11 +1600,11 @@ const rotation$2 = styledComponents.keyframes`
     transform: rotate(359deg);
   }
 `;
-const LoaderAnimated = styledComponents.styled(icons.Loader)`
+const LoaderAnimated = styled.styled(icons.Loader)`
   animation: ${rotation$2} 2s infinite linear;
   will-change: transform;
 `;
-const ButtonWrapper = styledComponents.styled(Flex)`
+const ButtonWrapper = styled.styled(Flex)`
   height: ${({ theme, $size }) => theme.sizes.button[$size]};
   text-decoration: none;
   ${getVariantStyle}
@@ -1656,7 +1658,7 @@ const TooltipImpl = React__namespace.forwardRef(
     );
   }
 );
-const TooltipContent = styledComponents.styled(Tooltip__namespace.Content)`
+const TooltipContent = styled.styled(Tooltip__namespace.Content)`
   background-color: ${(props) => props.theme.colors.neutral900};
   color: ${(props) => props.theme.colors.neutral0};
   padding-inline: ${(props) => props.theme.spaces[2]};
@@ -1709,31 +1711,31 @@ const IconButton = forwardRef(
     return withTooltip ? /* @__PURE__ */ jsxRuntime.jsx(TooltipImpl, { label, children: component }) : component;
   }
 );
-const IconButtonWrapper = styledComponents.styled(Flex)`
+const IconButtonWrapper = styled.styled(Flex)`
   text-decoration: none;
 
   ${(props) => {
   switch (props.$size) {
     case "XS": {
-      return styledComponents.css`
+      return styled.css`
           padding-block: 0.25rem;
           padding-inline: 0.25rem;
         `;
     }
     case "S": {
-      return styledComponents.css`
+      return styled.css`
           padding-block: 0.7rem;
           padding-inline: 0.7rem;
         `;
     }
     case "M": {
-      return styledComponents.css`
+      return styled.css`
           padding-block: 0.9rem;
           padding-inline: 0.9rem;
         `;
     }
     case "L": {
-      return styledComponents.css`
+      return styled.css`
           padding-block: 1.1rem;
           padding-inline: 1.1rem;
         `;
@@ -1741,13 +1743,13 @@ const IconButtonWrapper = styledComponents.styled(Flex)`
   }
 }}
   ${getVariantStyle}
-  ${(props) => props.$variant === "tertiary" ? styledComponents.css`
+  ${(props) => props.$variant === "tertiary" ? styled.css`
           color: ${props.theme.colors.neutral500};
         ` : ""}
 
   &:hover {
     ${getHoverStyle}
-    ${(props) => props.$variant === "tertiary" ? styledComponents.css`
+    ${(props) => props.$variant === "tertiary" ? styled.css`
             color: ${props.theme.colors.neutral600};
           ` : ""}
   }
@@ -1767,7 +1769,7 @@ const IconButtonWrapper = styledComponents.styled(Flex)`
       border-color ${(props) => props.theme.motion.timings["200"]} ${(props) => props.theme.motion.easings.easeOutQuad};
   }
 `;
-const IconButtonGroup = styledComponents.styled(Flex)`
+const IconButtonGroup = styled.styled(Flex)`
   & ${IconButtonWrapper}:first-child {
     border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
   }
@@ -1794,7 +1796,7 @@ const Link = forwardRef(
     ] });
   }
 );
-const LinkWrapper$1 = styledComponents.styled(BaseLinkImpl)`
+const LinkWrapper$1 = styled.styled(BaseLinkImpl)`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
@@ -1864,7 +1866,7 @@ const MenuContent = React__namespace.forwardRef(
     ) }) });
   }
 );
-const Viewport$1 = styledComponents.styled(Flex)`
+const Viewport$1 = styled.styled(Flex)`
   scrollbar-width: none;
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
@@ -1874,7 +1876,7 @@ const Viewport$1 = styledComponents.styled(Flex)`
     display: none;
   }
 `;
-const DropdownMenuContent = styledComponents.styled(DropdownMenu__namespace.Content)`
+const DropdownMenuContent = styled.styled(DropdownMenu__namespace.Content)`
   @media (prefers-reduced-motion: no-preference) {
     animation-duration: ${(props) => props.theme.motion.timings["200"]};
 
@@ -1919,7 +1921,7 @@ const MenuItem$1 = ({ onSelect, disabled = false, isLink, startIcon, endIcon, is
     }
   ) });
 };
-const getOptionStyle = ({ theme }) => styledComponents.css`
+const getOptionStyle = ({ theme }) => styled.css`
   text-align: left;
   width: 100%;
   border-radius: ${theme.borderRadius};
@@ -1942,10 +1944,10 @@ const getOptionStyle = ({ theme }) => styledComponents.css`
     }
   }
 `;
-const OptionButton = styledComponents.styled(Flex)`
+const OptionButton = styled.styled(Flex)`
   ${getOptionStyle}
 `;
-const OptionLink = styledComponents.styled(Link)`
+const OptionLink = styled.styled(Link)`
   /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
   color: ${({ theme, color }) => extractStyleFromTheme(theme.colors, color, void 0)};
   text-decoration: none;
@@ -1962,7 +1964,7 @@ const OptionLink = styledComponents.styled(Link)`
 
   ${getOptionStyle}
 `;
-const StyledSeparator = styledComponents.styled(Box)`
+const StyledSeparator = styled.styled(Box)`
   /* Negative horizontal margin to compensate Menu.Content's padding */
   margin: ${({ theme }) => theme.spaces[1]} -${({ theme }) => theme.spaces[1]};
   width: calc(100% + ${({ theme }) => theme.spaces[2]});
@@ -1973,7 +1975,7 @@ const StyledSeparator = styledComponents.styled(Box)`
 `;
 const MenuSeparator = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Separator, { ...props, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { height: "1px", shrink: 0, background: "neutral150", ref }) }));
 const MenuLabel = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Label, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { ref, variant: "sigma", textColor: "neutral600", ...props }) }));
-const StyledLabel = styledComponents.styled(Typography)`
+const StyledLabel = styled.styled(Typography)`
   padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
 `;
 const MenuSubRoot = DropdownMenu__namespace.Sub;
@@ -1996,7 +1998,7 @@ const MenuSubTrigger = React__namespace.forwardRef(({ disabled = false, ...props
     }
   ) });
 });
-const SubmenuTrigger = styledComponents.styled(OptionButton)`
+const SubmenuTrigger = styled.styled(OptionButton)`
   &[data-state='open'] {
     background-color: ${({ theme }) => theme.colors.primary100};
   }
@@ -2078,7 +2080,7 @@ const SimpleMenu = React__namespace.forwardRef(
   }
 );
 const MenuItem = Item$3;
-const StyledButton = styledComponents.styled(SimpleMenu)`
+const StyledButton = styled.styled(SimpleMenu)`
   padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
   height: unset;
 
@@ -2117,7 +2119,7 @@ const Card = React__namespace.forwardRef(({ id, ...props }, forwardedRef) => {
 const CardActionImpl = React__namespace.forwardRef(({ position, ...restProps }, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(CardAction, { ref: forwardedRef, $position: position, ...restProps, direction: "row", gap: 2 });
 });
-const CardAction = styledComponents.styled(Flex)`
+const CardAction = styled.styled(Flex)`
   position: absolute;
   top: ${({ theme }) => theme.spaces[3]};
   right: ${({ $position, theme }) => {
@@ -2136,7 +2138,7 @@ const CardAction = styledComponents.styled(Flex)`
 const CardAsset = ({ size = "M", children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(CardAssetWrapper, { $size: size, children: children ? children : /* @__PURE__ */ jsxRuntime.jsx(CardAssetImg, { ...props, "aria-hidden": true }) });
 };
-const CardAssetImg = styledComponents.styled.img`
+const CardAssetImg = styled.styled.img`
   // inline flows is based on typography and displays an extra white space below the image
   // switch to block is required in order to make the img stick the bottom of the container
   // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
@@ -2146,7 +2148,7 @@ const CardAssetImg = styledComponents.styled.img`
   max-width: 100%;
   object-fit: contain;
 `;
-const CardAssetWrapper = styledComponents.styled.div`
+const CardAssetWrapper = styled.styled.div`
   display: flex;
   justify-content: center;
   height: ${({ $size }) => $size === "S" ? "8.8rem" : "16.4rem"};
@@ -2156,11 +2158,11 @@ const CardAssetWrapper = styledComponents.styled.div`
   border-top-left-radius: ${({ theme }) => theme.borderRadius};
   border-top-right-radius: ${({ theme }) => theme.borderRadius};
 `;
-const CardBadgeWrapper = styledComponents.styled.div`
+const CardBadgeWrapper = styled.styled.div`
   margin-left: auto;
   flex-shrink: 0;
 `;
-const BadgePosition = styledComponents.styled(Badge)`
+const BadgePosition = styled.styled(Badge)`
   margin-left: ${({ theme }) => theme.spaces[1]};
 `;
 const CardBadge = (props) => /* @__PURE__ */ jsxRuntime.jsx(CardBadgeWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(BadgePosition, { ...props }) });
@@ -2168,7 +2170,7 @@ const CardBody = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { ...props, alignItems: "flex-start" }) });
 };
 const CheckIcon = ({ fill, ...props }) => {
-  const { colors } = styledComponents.useTheme();
+  const { colors } = styled.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
@@ -2196,7 +2198,7 @@ const CheckboxEl = React__namespace.forwardRef(
     ] }) });
   }
 );
-const CheckboxRoot = styledComponents.styled(Checkbox__namespace.Root)`
+const CheckboxRoot = styled.styled(Checkbox__namespace.Root)`
   background: ${(props) => props.theme.colors.neutral0};
   width: 2rem;
   height: 2rem;
@@ -2234,7 +2236,7 @@ const CheckboxRoot = styledComponents.styled(Checkbox__namespace.Root)`
     min-height: 44px;
   }
 `;
-const CheckboxIndicator = styledComponents.styled(Checkbox__namespace.Indicator)`
+const CheckboxIndicator = styled.styled(Checkbox__namespace.Indicator)`
   display: inline-flex;
   pointer-events: auto !important;
   width: 100%;
@@ -2261,13 +2263,13 @@ const CardCheckbox = React__namespace.forwardRef((props, forwardedRef) => {
   const { id } = useCard();
   return /* @__PURE__ */ jsxRuntime.jsx(CardActionImpl, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxImpl, { "aria-labelledby": `${id}-title`, ...props, ref: forwardedRef }) });
 });
-const BreakBox = styledComponents.styled(Box)`
+const BreakBox = styled.styled(Box)`
   word-break: break-all;
 `;
 const CardContent = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(BreakBox, { ...props, children });
 };
-const CardHeaderWrapper = styledComponents.styled(Flex)`
+const CardHeaderWrapper = styled.styled(Flex)`
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
 const CardHeader = (props) => {
@@ -2312,14 +2314,14 @@ const KeyboardKeys = {
   BACKSPACE: "Backspace",
   CLEAR: "Clear"
 };
-const CarouselGrid = styledComponents.styled(Box)`
+const CarouselGrid = styled.styled(Box)`
   grid-template-columns: auto 1fr auto;
   grid-template-areas: 'startAction slides endAction';
 `;
-const CarouselSlides = styledComponents.styled(Flex)`
+const CarouselSlides = styled.styled(Flex)`
   grid-area: slides;
 `;
-const CarouselAction = styledComponents.styled(Box)`
+const CarouselAction = styled.styled(Box)`
   grid-area: ${({ $area }) => $area};
 
   &:focus svg path,
@@ -2593,7 +2595,7 @@ const extendTheme = (theme, overrides) => {
 const getThemeSize = (type) => {
   return ({ theme, size }) => theme.sizes[type][size];
 };
-const inputFocusStyle = (rootElement = "&") => ({ theme, $hasError = false }) => styledComponents.css`
+const inputFocusStyle = (rootElement = "&") => ({ theme, $hasError = false }) => styled.css`
     outline: none;
     box-shadow: none;
     transition-property: border-color, box-shadow, fill;
@@ -2650,10 +2652,10 @@ const Label = React__namespace.forwardRef(({ children, action, ...props }, ref)
     }
   );
 });
-const TypographyLabel = styledComponents.styled(Typography)`
+const TypographyLabel = styled.styled(Typography)`
   display: flex;
 `;
-const LabelAction = styledComponents.styled(Flex)`
+const LabelAction = styled.styled(Flex)`
   line-height: 0;
   color: ${({ theme }) => theme.colors.neutral500};
 `;
@@ -2733,7 +2735,7 @@ const Input$2 = React__namespace.forwardRef(
     );
   }
 );
-const InputElement = styledComponents.styled.input`
+const InputElement = styled.styled.input`
   border: none;
   border-radius: ${({ theme }) => theme.borderRadius};
   cursor: ${(props) => props["aria-disabled"] ? "not-allowed" : void 0};
@@ -2746,8 +2748,8 @@ const InputElement = styledComponents.styled.input`
   width: 100%;
   background: inherit;
 
-  ::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
     opacity: 1;
   }
 
@@ -2764,13 +2766,13 @@ const InputElement = styledComponents.styled.input`
   ${(props) => {
   switch (props.$size) {
     case "S":
-      return styledComponents.css`
+      return styled.css`
           padding-inline-start: ${props.$hasLeftAction ? 0 : props.theme.spaces[4]};
           padding-inline-end: ${props.$hasRightAction ? 0 : props.theme.spaces[4]};
           padding-block: ${props.theme.spaces[1]};
         `;
     default:
-      return styledComponents.css`
+      return styled.css`
           padding-inline-start: ${props.$hasLeftAction ? 0 : props.theme.spaces[4]};
           padding-inline-end: ${props.$hasRightAction ? 0 : props.theme.spaces[4]};
           padding-block: ${props.theme.spaces[2]};
@@ -2778,13 +2780,13 @@ const InputElement = styledComponents.styled.input`
   }
 }}
 `;
-const EndAction = styledComponents.styled(Flex)`
+const EndAction = styled.styled(Flex)`
   position: absolute;
   right: ${({ theme }) => theme.spaces[4]};
   top: 50%;
   transform: translateY(-50%);
 `;
-const InputWrapper = styledComponents.styled(Flex)`
+const InputWrapper = styled.styled(Flex)`
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
   border-radius: ${({ theme }) => theme.borderRadius};
   background: ${({ theme }) => theme.colors.neutral0};
@@ -2792,7 +2794,7 @@ const InputWrapper = styledComponents.styled(Flex)`
   position: relative;
 
   ${inputFocusStyle()}
-  ${({ theme, $disabled }) => $disabled ? styledComponents.css`
+  ${({ theme, $disabled }) => $disabled ? styled.css`
           color: ${theme.colors.neutral600};
           background: ${theme.colors.neutral150};
         ` : void 0};
@@ -2824,7 +2826,7 @@ const Action$1 = React__namespace.forwardRef(({ label, children, ...props }, ref
     children: /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon, { label, children })
   }
 ));
-const FieldActionWrapper = styledComponents.styled(Flex)`
+const FieldActionWrapper = styled.styled(Flex)`
   font-size: 1.6rem;
   padding: 0;
 `;
@@ -2894,7 +2896,7 @@ const CarouselActions = ({ horizontal = true, ...props }) => /* @__PURE__ */ jsx
     ...props
   }
 );
-const StyledImage = styledComponents.styled(Box)`
+const StyledImage = styled.styled(Box)`
   ${ellipsis}
 `;
 const CarouselImage = (props) => {
@@ -2907,11 +2909,14 @@ const CarouselImage = (props) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(StyledImage, { tag: "img", height: "100%", maxWidth: "100%", ...props, onError: handleImageError });
 };
+const CarouselSlideFlex = styled.styled(Flex)`
+  display: ${({ $selected }) => $selected ? "flex" : "none"};
+`;
 const CarouselSlide = ({ label, children, selected = false, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  Flex,
+  CarouselSlideFlex,
   {
+    $selected: selected,
     alignItems: "center",
-    display: selected ? "flex" : "none",
     role: "group",
     "aria-roledescription": "slide",
     "aria-label": label,
@@ -2931,16 +2936,16 @@ const ScrollAreaImpl$1 = React__namespace.forwardRef(
     ] });
   }
 );
-const ScrollAreaRoot = styledComponents.styled(ScrollArea__namespace.Root)`
+const ScrollAreaRoot = styled.styled(ScrollArea__namespace.Root)`
   width: 100%;
   height: 100%;
   overflow: hidden;
   display: flex;
 `;
-const ScrollAreaViewport = styledComponents.styled(ScrollArea__namespace.Viewport)`
+const ScrollAreaViewport = styled.styled(ScrollArea__namespace.Viewport)`
   min-width: 100%;
 `;
-const Scrollbar = styledComponents.styled(ScrollArea__namespace.Scrollbar)`
+const Scrollbar = styled.styled(ScrollArea__namespace.Scrollbar)`
   display: flex;
   /* ensures no selection */
   user-select: none;
@@ -2958,7 +2963,7 @@ const Scrollbar = styledComponents.styled(ScrollArea__namespace.Scrollbar)`
     margin: 0.4rem;
   }
 `;
-const Thumb = styledComponents.styled(ScrollArea__namespace.Thumb)`
+const Thumb = styled.styled(ScrollArea__namespace.Thumb)`
   position: relative;
   flex: 1;
   background-color: ${(props) => props.theme.colors.neutral150};
@@ -2984,7 +2989,7 @@ const Loader = React__namespace.forwardRef(({ children, small = false, ...props
     /* @__PURE__ */ jsxRuntime.jsx(LoaderImg, { src: loaderSvg, "aria-hidden": true, $small: small })
   ] });
 });
-const rotation$1 = styledComponents.keyframes`
+const rotation$1 = styled.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -2992,7 +2997,7 @@ const rotation$1 = styledComponents.keyframes`
     transform: rotate(359deg);
   }
 `;
-const LoaderImg = styledComponents.styled.img`
+const LoaderImg = styled.styled.img`
   animation: ${rotation$1} 1s infinite linear;
   will-change: transform;
   ${({ $small, theme }) => $small && `width: ${theme.spaces[6]}; height: ${theme.spaces[6]};`}
@@ -3005,6 +3010,7 @@ const Combobox = React__namespace.forwardRef(
     className,
     clearLabel = "Clear",
     creatable = false,
+    creatableDisabled = false,
     creatableStartIcon,
     createMessage = (value2) => `Create "${value2}"`,
     defaultFilterValue,
@@ -3176,17 +3182,26 @@ const Combobox = React__namespace.forwardRef(
               loading ? /* @__PURE__ */ jsxRuntime.jsx(Flex, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { small: true, children: loadingMessage }) }) : null,
               /* @__PURE__ */ jsxRuntime.jsx(Box, { id: intersectionId, width: "100%", height: "1px" })
             ] }),
-            creatable ? /* @__PURE__ */ jsxRuntime.jsx(ComboboxCreateItem, { onPointerUp: handleCreateItemClick, onClick: handleCreateItemClick, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(OptionBox, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 2, children: [
-              creatableStartIcon && /* @__PURE__ */ jsxRuntime.jsx(Box, { tag: "span", "aria-hidden": true, display: "inline-flex", children: creatableStartIcon }),
-              /* @__PURE__ */ jsxRuntime.jsx(Typography, { children: createMessage(internalTextValue ?? "") })
-            ] }) }) }) : null
+            creatable ? /* @__PURE__ */ jsxRuntime.jsx(
+              ComboboxCreateItem,
+              {
+                onPointerUp: handleCreateItemClick,
+                onClick: handleCreateItemClick,
+                disabled: creatableDisabled,
+                asChild: true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(OptionBox, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 2, children: [
+                  creatableStartIcon && /* @__PURE__ */ jsxRuntime.jsx(Box, { tag: "span", "aria-hidden": true, display: "inline-flex", children: creatableStartIcon }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { children: createMessage(internalTextValue ?? "") })
+                ] }) })
+              }
+            ) : null
           ] }) }) })
         ]
       }
     );
   }
 );
-const Trigger$5 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
+const Trigger$5 = styled.styled(uiPrimitives.Combobox.Trigger)`
   position: relative;
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
   border-radius: ${({ theme }) => theme.borderRadius};
@@ -3200,13 +3215,13 @@ const Trigger$5 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
   ${(props) => {
   switch (props.$size) {
     case "S":
-      return styledComponents.css`
+      return styled.css`
           padding-inline-start: ${({ theme }) => theme.spaces[4]};
           padding-inline-end: ${({ theme }) => theme.spaces[3]};
           padding-block: ${({ theme }) => theme.spaces[1]};
         `;
     default:
-      return styledComponents.css`
+      return styled.css`
           padding-inline-start: ${({ theme }) => theme.spaces[4]};
           padding-inline-end: ${({ theme }) => theme.spaces[3]};
           padding-block: ${({ theme }) => theme.spaces[2]};
@@ -3227,7 +3242,7 @@ const Trigger$5 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
 
   ${({ theme, $hasError }) => inputFocusStyle()({ theme, $hasError })};
 `;
-const TextInput$1 = styledComponents.styled(uiPrimitives.Combobox.TextInput)`
+const TextInput$1 = styled.styled(uiPrimitives.Combobox.TextInput)`
   width: 100%;
   font-size: 1.4rem;
   line-height: 2.2rem;
@@ -3240,11 +3255,16 @@ const TextInput$1 = styledComponents.styled(uiPrimitives.Combobox.TextInput)`
     outline: none;
   }
 
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
+    opacity: 1;
+  }
+
   &[aria-disabled='true'] {
     cursor: inherit;
   }
 `;
-const DownIcon$1 = styledComponents.styled(uiPrimitives.Combobox.Icon)`
+const DownIcon$1 = styled.styled(uiPrimitives.Combobox.Icon)`
   border: none;
   background: transparent;
   padding: 0;
@@ -3255,7 +3275,7 @@ const DownIcon$1 = styledComponents.styled(uiPrimitives.Combobox.Icon)`
     cursor: inherit;
   }
 `;
-const Content$5 = styledComponents.styled(uiPrimitives.Combobox.Content)`
+const Content$5 = styled.styled(uiPrimitives.Combobox.Content)`
   background: ${({ theme }) => theme.colors.neutral0};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -3287,7 +3307,7 @@ const Content$5 = styledComponents.styled(uiPrimitives.Combobox.Content)`
     }
   }
 `;
-const ComboboxCreateItem = styledComponents.styled(uiPrimitives.Combobox.CreateItem)`
+const ComboboxCreateItem = styled.styled(uiPrimitives.Combobox.CreateItem)`
   && {
     border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
     background: ${({ theme }) => theme.colors.neutral0};
@@ -3299,7 +3319,18 @@ const ComboboxCreateItem = styledComponents.styled(uiPrimitives.Combobox.CreateI
   }
   &&:hover,
   &&[data-highlighted] {
-    background-color: transparent;
+    background: ${({ theme }) => theme.colors.neutral0};
+  }
+  &&[data-disabled] {
+    color: ${({ theme }) => theme.colors.neutral600};
+    background: ${({ theme }) => theme.colors.neutral150};
+    cursor: not-allowed;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &&[data-disabled]:hover {
+    background: ${({ theme }) => theme.colors.neutral150};
+    color: ${({ theme }) => theme.colors.neutral600};
   }
   && > div {
     padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
@@ -3308,8 +3339,11 @@ const ComboboxCreateItem = styledComponents.styled(uiPrimitives.Combobox.CreateI
   &&[data-highlighted] > div {
     background-color: ${({ theme }) => theme.colors.primary100};
   }
+  &&[data-disabled] > div:hover {
+    background: ${({ theme }) => theme.colors.neutral150};
+  }
 `;
-const ScrollAreaCombobox = styledComponents.styled(ScrollAreaImpl$1)`
+const ScrollAreaCombobox = styled.styled(ScrollAreaImpl$1)`
   padding: ${({ theme }) => theme.spaces[1]};
 `;
 const Option = React__namespace.forwardRef(
@@ -3317,7 +3351,7 @@ const Option = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(uiPrimitives.Combobox.ComboboxItem, { asChild: true, value, disabled, textValue, children: /* @__PURE__ */ jsxRuntime.jsx(OptionBox, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(uiPrimitives.Combobox.ItemText, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { children }) }) }) });
   }
 );
-const OptionBox = styledComponents.styled.div`
+const OptionBox = styled.styled.div`
   width: 100%;
   border: none;
   text-align: left;
@@ -3354,7 +3388,7 @@ const Content$4 = React__namespace.forwardRef((props, forwardedRef) => {
     /* @__PURE__ */ jsxRuntime.jsx(ContentImpl$1, { ref: forwardedRef, ...props })
   ] });
 });
-const Overlay$1 = styledComponents.styled(AlertDialog__namespace.Overlay)`
+const Overlay$1 = styled.styled(AlertDialog__namespace.Overlay)`
   background-color: ${(props) => props.theme.colors.neutral800};
   position: fixed;
   inset: 0;
@@ -3366,7 +3400,7 @@ const Overlay$1 = styledComponents.styled(AlertDialog__namespace.Overlay)`
       ${(props) => props.theme.motion.easings.authenticMotion};
   }
 `;
-const ContentImpl$1 = styledComponents.styled(AlertDialog__namespace.Content)`
+const ContentImpl$1 = styled.styled(AlertDialog__namespace.Content)`
   max-width: 42rem;
   height: min-content;
   width: 100%;
@@ -3402,7 +3436,7 @@ const ContentImpl$1 = styledComponents.styled(AlertDialog__namespace.Content)`
 const Header$1 = React__namespace.forwardRef(({ children, ...restProps }, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog__namespace.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Title$1, { tag: "h2", variant: "beta", ref: forwardedRef, padding: 6, fontWeight: "bold", ...restProps, children }) });
 });
-const Title$1 = styledComponents.styled(Typography)`
+const Title$1 = styled.styled(Typography)`
   display: flex;
   justify-content: center;
   border-bottom: solid 1px ${(props) => props.theme.colors.neutral150};
@@ -3435,7 +3469,7 @@ const Description = React__namespace.forwardRef((props, forwardedRef) => {
 const Footer$1 = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Foot$1, { ref: forwardedRef, gap: 2, padding: 4, justifyContent: "space-between", ...props, tag: "footer" });
 });
-const Foot$1 = styledComponents.styled(Flex)`
+const Foot$1 = styled.styled(Flex)`
   border-top: solid 1px ${(props) => props.theme.colors.neutral150};
   flex: 1;
 `;
@@ -3521,8 +3555,8 @@ const LiveRegions = () => {
     /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", "aria-live": "assertive", id: LiveRegionIds.Alert, "aria-relevant": "all" })
   ] });
 };
-const GlobalStyle = styledComponents.createGlobalStyle`
-${styledComponents.css`
+const GlobalStyle = styled.createGlobalStyle`
+${styled.css`
   *,
   *::before,
   *::after {
@@ -3659,7 +3693,7 @@ const DesignSystemProvider = ({
     window.getComputedStyle(css).opacity;
     document.head.removeChild(css);
   }, [theme]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Provider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(styledComponents.ThemeProvider, { theme, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Provider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(styled.ThemeProvider, { theme, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Provider, { ...tooltipConfig, children }),
     /* @__PURE__ */ jsxRuntime.jsx(LiveRegions, {}),
     /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {})
@@ -3730,7 +3764,7 @@ const SelectTrigger = React__namespace.forwardRef(
     ) });
   }
 );
-const IconBox$1 = styledComponents.styled(Box)`
+const IconBox$1 = styled.styled(Box)`
   border: none;
   display: flex;
 
@@ -3743,18 +3777,18 @@ const IconBox$1 = styledComponents.styled(Box)`
     fill: ${({ theme }) => theme.colors.neutral500};
   }
 `;
-const StyledTrigger = styledComponents.styled(Flex)`
+const StyledTrigger = styled.styled(Flex)`
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
   ${(props) => {
   switch (props.$size) {
     case "S":
-      return styledComponents.css`
+      return styled.css`
           padding-block: ${props.theme.spaces[1]};
           padding-inline-start: ${props.$withTags ? props.theme.spaces[1] : props.theme.spaces[4]};
           padding-inline-end: ${props.theme.spaces[3]};
         `;
     default:
-      return styledComponents.css`
+      return styled.css`
           padding-block: ${props.$withTags ? "0.3rem" : props.theme.spaces[2]};
           padding-inline-start: ${props.$withTags ? props.theme.spaces[1] : props.theme.spaces[4]};
           padding-inline-end: ${props.theme.spaces[3]};
@@ -3774,19 +3808,19 @@ const StyledTrigger = styledComponents.styled(Flex)`
 
   ${({ theme, $hasError }) => inputFocusStyle()({ theme, $hasError })};
 `;
-const DownIcon = styledComponents.styled(uiPrimitives.Select.Icon)`
+const DownIcon = styled.styled(uiPrimitives.Select.Icon)`
   display: flex;
   & > svg {
     fill: ${({ theme }) => theme.colors.neutral500};
   }
 `;
 const SelectValue = React__namespace.forwardRef(({ children, placeholder, ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ValueType, { ref, ellipsis: true, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { placeholder, children }) }));
-const ValueType = styledComponents.styled(Typography)`
+const ValueType = styled.styled(Typography)`
   flex: 1;
   font-size: 1.4rem;
   line-height: 2.2rem;
 `;
-const StyledValue = styledComponents.styled(uiPrimitives.Select.Value)`
+const StyledValue = styled.styled(uiPrimitives.Select.Value)`
   display: flex;
   gap: ${({ theme }) => theme.spaces[1]};
   flex-wrap: wrap;
@@ -3794,7 +3828,7 @@ const StyledValue = styledComponents.styled(uiPrimitives.Select.Value)`
 const SelectContent = React__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledContent, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaImpl$1, { children: props.children }) });
 });
-const StyledContent = styledComponents.styled(uiPrimitives.Select.Content)`
+const StyledContent = styled.styled(uiPrimitives.Select.Content)`
   background: ${({ theme }) => theme.colors.neutral0};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -3820,11 +3854,11 @@ const StyledContent = styledComponents.styled(uiPrimitives.Select.Content)`
     }
   }
 `;
-const SelectViewport = styledComponents.styled(uiPrimitives.Select.Viewport)`
+const SelectViewport = styled.styled(uiPrimitives.Select.Viewport)`
   padding: ${({ theme }) => theme.spaces[1]};
 `;
 const SelectItem = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledSelectItem, { ref, ...props }));
-const itemStyles = styledComponents.css`
+const itemStyles = styled.css`
   width: 100%;
   border: none;
   text-align: left;
@@ -3846,7 +3880,7 @@ const itemStyles = styledComponents.css`
     cursor: pointer;
   }
 `;
-const StyledSelectItem = styledComponents.styled(uiPrimitives.Select.Item)`
+const StyledSelectItem = styled.styled(uiPrimitives.Select.Item)`
   ${itemStyles}
 
   &:hover {
@@ -3985,7 +4019,7 @@ const SingleSelectOption = React__namespace.forwardRef(
 const DEFAULT_PAST_RANGE = 200;
 const DEFAULT_FUTURE_RANGE = 15;
 const [DatePickerProvider, useDatePickerContext] = createContext("DatePicker");
-const DatePicker$1 = React__namespace.forwardRef(
+const DatePicker = React__namespace.forwardRef(
   ({
     /**
      * DatePickerCalendar props
@@ -4114,6 +4148,7 @@ const DatePicker$1 = React__namespace.forwardRef(
         onTextValueChange: setTextValue,
         onTriggerChange: setTrigger,
         onValueChange: setValue,
+        onClear,
         required,
         textInput,
         textValue,
@@ -4191,6 +4226,7 @@ const DatePickerTrigger = React__namespace.forwardRef(
             ref: composedRefs,
             $hasError: hasError,
             $size: size,
+            $hasOnClear: Boolean(context.onClear),
             ...restProps,
             hasRadius: true,
             gap: 3,
@@ -4219,17 +4255,18 @@ const DatePickerTrigger = React__namespace.forwardRef(
     );
   }
 );
-const TriggerElement = styledComponents.styled(Flex)`
+const TriggerElement = styled.styled(Flex)`
+  min-width: ${({ $hasOnClear }) => $hasOnClear ? "160px" : "130px"};
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
   ${(props) => {
   switch (props.$size) {
     case "S":
-      return styledComponents.css`
+      return styled.css`
           padding-block: ${props.theme.spaces[1]};
           padding-inline: ${props.theme.spaces[3]};
         `;
     default:
-      return styledComponents.css`
+      return styled.css`
           padding-block: ${props.theme.spaces[2]};
           padding-inline: ${props.theme.spaces[3]};
         `;
@@ -4432,7 +4469,7 @@ function constrainValue(date$1, minValue, maxValue) {
   }
   return date$1;
 }
-const Input$1 = styledComponents.styled.input`
+const Input$1 = styled.styled.input`
   width: 100%;
   font-size: 1.4rem;
   line-height: 2.2rem;
@@ -4444,6 +4481,11 @@ const Input$1 = styledComponents.styled.input`
     outline: none;
   }
 
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
+    opacity: 1;
+  }
+
   &[aria-disabled='true'] {
     cursor: inherit;
   }
@@ -4534,7 +4576,7 @@ const DatePickerContentImpl = React__namespace.forwardRef(
     ) });
   }
 );
-const ContentElement = styledComponents.styled(Box)`
+const ContentElement = styled.styled(Box)`
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   z-index: ${({ theme }) => theme.zIndices.popover};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -4648,7 +4690,7 @@ const makeGetDatesInWeek = (from, locale) => (weekIndex) => {
   }
   return dates;
 };
-const ToolbarFlex = styledComponents.styled(Flex)`
+const ToolbarFlex = styled.styled(Flex)`
   div[role='combobox'] {
     border: 1px solid transparent;
     background: transparent;
@@ -4668,7 +4710,7 @@ const DatePickerHeaderCell = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(Th$1, { tag: "th", role: "gridcell", ref: forwardedRef, ...props, height: "2.4rem", width: "3.2rem", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "pi", fontWeight: "bold", color: "neutral800", children: children.slice(0, 2) }) });
   }
 );
-const Th$1 = styledComponents.styled(Box)`
+const Th$1 = styled.styled(Box)`
   border-radius: ${({ theme }) => theme.borderRadius};
   text-transform: capitalize;
 `;
@@ -4731,7 +4773,7 @@ const DatePickerCalendarCell = React__namespace.forwardRef(
     );
   }
 );
-const Cell = styledComponents.styled(Box)`
+const Cell = styled.styled(Box)`
   text-align: center;
   padding: 0.7rem;
   // Trick to prevent the outline from overflowing because of the general outline-offset
@@ -4759,7 +4801,10 @@ const isNotAlphabeticalCharacter = (str) => {
 function escapeForRegex(str = "") {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-const TimePicker$1 = React__namespace.forwardRef(
+const TimePickerCombobox = styled__default.default(Combobox)`
+  min-width: ${({ onClear }) => onClear ? "160px" : "130px"};
+`;
+const TimePicker = React__namespace.forwardRef(
   ({ step = 15, value: valueProp, defaultValue, onChange, ...restProps }, forwardedRef) => {
     const context = useDesignSystem("TimePicker");
     const [textValue, setTextValue] = React__namespace.useState("");
@@ -4825,7 +4870,7 @@ const TimePicker$1 = React__namespace.forwardRef(
     const escapedSeparator = escapeForRegex(separator);
     const pattern = `\\d{2}${escapedSeparator}\\d{2}`;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Combobox,
+      TimePickerCombobox,
       {
         ...restProps,
         ref: forwardedRef,
@@ -4846,14 +4891,6 @@ const TimePicker$1 = React__namespace.forwardRef(
     );
   }
 );
-const DatePicker = styledComponents.styled(DatePicker$1)`
-  flex: 1 1 70%;
-  min-width: 120px;
-`;
-const TimePicker = styledComponents.styled(TimePicker$1)`
-  flex: 1 1 30%;
-  min-width: 140px;
-`;
 const DateTimePicker = React__namespace.forwardRef(
   ({
     clearLabel = "clear",
@@ -4922,8 +4959,8 @@ const DateTimePicker = React__namespace.forwardRef(
     const composedRefs = useComposedRefs(DatePickerElement2, forwardedRef);
     const { error, id, labelNode } = useField("DateTimePicker");
     const hasError = Boolean(error) || hasErrorProp;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { "aria-labelledby": labelNode ? `${id}-label` : void 0, role: "group", flex: "1", gap: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Root$6, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { "aria-labelledby": labelNode ? `${id}-label` : void 0, role: "group", flex: "1", gap: 1, wrap: "wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Root$6, { flex: "1", children: /* @__PURE__ */ jsxRuntime.jsx(
         DatePicker,
         {
           ...props,
@@ -4938,7 +4975,7 @@ const DateTimePicker = React__namespace.forwardRef(
           "aria-label": dateLabel
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Root$6, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Root$6, { flex: "1", children: /* @__PURE__ */ jsxRuntime.jsx(
         TimePicker,
         {
           size,
@@ -4977,13 +5014,13 @@ const Divider = React__namespace.forwardRef((props, forwardedRef) => {
     }
   );
 });
-const DividerImpl = styledComponents.styled(Box)`
+const DividerImpl = styled.styled(Box)`
   height: 1px;
   border: none;
   /* If contained in a Flex parent we want to prevent the Divider to shink */
   flex-shrink: 0;
 `;
-const EmptyStateIconWrapper = styledComponents.styled(Box)`
+const EmptyStateIconWrapper = styled.styled(Box)`
   svg {
     height: 8.8rem;
   }
@@ -5153,7 +5190,7 @@ const JSONInput = React__namespace.forwardRef(
     );
   }
 );
-const JSONInputContainer = styledComponents.styled(Flex)`
+const JSONInputContainer = styled.styled(Flex)`
   line-height: ${({ theme }) => theme.lineHeights[2]};
 
   .cm-editor {
@@ -5201,7 +5238,7 @@ const LinkButton = forwardRef(
     );
   }
 );
-const MainWrapper = styledComponents.styled(Box)`
+const MainWrapper = styled.styled(Box)`
   // To prevent global outline on focus visible to force an outline when Main is focused
   &:focus-visible {
     outline: none;
@@ -5210,7 +5247,7 @@ const MainWrapper = styledComponents.styled(Box)`
 const Main = ({ labelledBy = "main-content-title", ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(MainWrapper, { "aria-labelledby": labelledBy, tag: "main", id: "main-content", tabIndex: -1, ...props });
 };
-const AnchorBox = styledComponents.styled(Box)`
+const AnchorBox = styled.styled(Box)`
   text-decoration: none;
 
   &:focus {
@@ -5236,22 +5273,19 @@ const SkipToContent = ({ children }) => {
     }
   );
 };
+const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
 const Root$3 = Dialog__namespace.Root;
 const Trigger$2 = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Trigger, { ...props, asChild: true, ref: forwardedRef });
 });
 const Content$2 = React__namespace.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Overlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(ContentImpl, { ref: forwardedRef, ...props })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Overlay, { children: /* @__PURE__ */ jsxRuntime.jsx(ContentImpl, { ref: forwardedRef, ...props }) }) });
 });
-const Overlay = styledComponents.styled(Dialog__namespace.Overlay)`
-  background-color: ${(props) => props.theme.colors.neutral800};
+const Overlay = styled.styled(Dialog__namespace.Overlay)`
+  background: ${(props) => setOpacity(props.theme.colors.neutral800, 0.2)};
   position: fixed;
   inset: 0;
   z-index: ${(props) => props.theme.zIndices.overlay};
-  opacity: 0.2;
   will-change: opacity;
 
   @media (prefers-reduced-motion: no-preference) {
@@ -5259,7 +5293,7 @@ const Overlay = styledComponents.styled(Dialog__namespace.Overlay)`
       ${(props) => props.theme.motion.easings.authenticMotion};
   }
 `;
-const ContentImpl = styledComponents.styled(Dialog__namespace.Content)`
+const ContentImpl = styled.styled(Dialog__namespace.Content)`
   max-width: 83rem;
   max-height: 90vh;
   height: auto;
@@ -5279,6 +5313,11 @@ const ContentImpl = styledComponents.styled(Dialog__namespace.Content)`
   box-shadow: ${(props) => props.theme.shadows.popupShadow};
   z-index: ${(props) => props.theme.zIndices.modal};
 
+  > form {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
   @media (prefers-reduced-motion: no-preference) {
     &[data-state='open'] {
       animation-duration: ${(props) => props.theme.motion.timings["200"]};
@@ -5317,7 +5356,7 @@ const Header = React__namespace.forwardRef(
     );
   }
 );
-const Head = styledComponents.styled(Flex)`
+const Head = styled.styled(Flex)`
   border-bottom: solid 1px ${(props) => props.theme.colors.neutral150};
 `;
 const Title = React__namespace.forwardRef((props, forwardedRef) => {
@@ -5326,11 +5365,15 @@ const Title = React__namespace.forwardRef((props, forwardedRef) => {
 const Body = React__namespace.forwardRef(({ children, ...restProps }, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(BodyScroll, { ref: forwardedRef, ...restProps, children });
 });
-const BodyScroll = styledComponents.styled(ScrollAreaImpl$1)`
-  padding-inline: ${(props) => props.theme.spaces[8]};
+const BodyScroll = styled.styled(ScrollAreaImpl$1)`
+  padding-inline: ${(props) => props.theme.spaces[7]};
 
   & > div {
     padding-block: ${(props) => props.theme.spaces[8]};
+    /* Add negative margin and padding to avoid cropping the box shadow when the inputs are focused */
+    margin: 0 -2px 0 -2px;
+    padding-left: 2px;
+    padding-right: 2px;
 
     & > div {
       // the scroll area component applies a display: table to the child, which we don't want.
@@ -5353,7 +5396,7 @@ const Footer = React__namespace.forwardRef((props, forwardedRef) => {
     }
   );
 });
-const Foot = styledComponents.styled(Flex)`
+const Foot = styled.styled(Flex)`
   border-top: solid 1px ${(props) => props.theme.colors.neutral150};
   flex: 1;
 `;
@@ -5488,7 +5531,7 @@ const NumberInput = React__namespace.forwardRef(
     );
   }
 );
-const ArrowButton = styledComponents.styled.button`
+const ArrowButton = styled.styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -5560,7 +5603,7 @@ const NextLink = forwardRef(
     ] });
   }
 );
-const LinkWrapper = styledComponents.styled(BaseLinkImpl)`
+const LinkWrapper = styled.styled(BaseLinkImpl)`
   padding: ${({ theme }) => theme.spaces[3]};
   border-radius: ${({ theme }) => theme.borderRadius};
   box-shadow: ${({ $active, theme }) => $active ? theme.shadows.filterShadow : void 0};
@@ -5569,7 +5612,7 @@ const LinkWrapper = styledComponents.styled(BaseLinkImpl)`
 
   ${focus}
 `;
-const ActionLinkWrapper = styledComponents.styled(LinkWrapper)`
+const ActionLinkWrapper = styled.styled(LinkWrapper)`
   font-size: 1.1rem;
 
   svg path {
@@ -5597,7 +5640,7 @@ const PageLink = forwardRef(
     ] });
   }
 );
-const PageLinkWrapper = styledComponents.styled(LinkWrapper)`
+const PageLinkWrapper = styled.styled(LinkWrapper)`
   color: ${({ theme, $active }) => $active ? theme.colors.primary700 : theme.colors.neutral800};
   background: ${({ theme, $active }) => $active ? theme.colors.neutral0 : void 0};
 
@@ -5616,7 +5659,7 @@ const Trigger$1 = React__namespace.forwardRef((props, forwardedRef) => {
 const Content$1 = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { sideOffset: 4, side: "bottom", align: "start", ...props, ref: forwardedRef }) });
 });
-const PopoverContent = styledComponents.styled(Popover__namespace.Content)`
+const PopoverContent = styled.styled(Popover__namespace.Content)`
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   z-index: ${({ theme }) => theme.zIndices.popover};
   background-color: ${(props) => props.theme.colors.neutral0};
@@ -5667,7 +5710,7 @@ const ScrollAreaImpl = React__namespace.forwardRef(
     ] });
   }
 );
-const PopoverScrollArea = styledComponents.styled(ScrollAreaImpl$1)`
+const PopoverScrollArea = styled.styled(ScrollAreaImpl$1)`
   height: 20rem;
 `;
 const Popover = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -5682,7 +5725,7 @@ const ProgressBar = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(ProgressRoot, { ref: forwardedRef, $size: size, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { style: { transform: `translate3D(-${100 - (value ?? 0)}%, 0, 0)` } }) });
   }
 );
-const ProgressRoot = styledComponents.styled(Progress__namespace.Root)`
+const ProgressRoot = styled.styled(Progress__namespace.Root)`
   position: relative;
   overflow: hidden;
   width: ${(props) => props.$size === "S" ? "7.8rem" : "10.2rem"};
@@ -5694,7 +5737,7 @@ const ProgressRoot = styledComponents.styled(Progress__namespace.Root)`
   /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
   transform: translateZ(0);
 `;
-const ProgressIndicator = styledComponents.styled(Progress__namespace.Indicator)`
+const ProgressIndicator = styled.styled(Progress__namespace.Indicator)`
   background-color: ${({ theme }) => theme.colors.neutral0};
   border-radius: ${({ theme }) => theme.borderRadius};
   width: 100%;
@@ -5708,7 +5751,7 @@ const ProgressIndicator = styledComponents.styled(Progress__namespace.Indicator)
 const Group = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupRoot, { ref: forwardedRef, ...props });
 });
-const RadioGroupRoot = styledComponents.styled(RadioGroup__namespace.Root)`
+const RadioGroupRoot = styled.styled(RadioGroup__namespace.Root)`
   display: flex;
   flex-direction: column;
   gap: ${(props) => props.theme.spaces[3]};
@@ -5720,7 +5763,7 @@ const Item$1 = React__namespace.forwardRef(({ children, id: idProp, ...restProps
     /* @__PURE__ */ jsxRuntime.jsx(Typography, { tag: "label", htmlFor: id, children })
   ] });
 });
-const RadioGroupItem = styledComponents.styled(RadioGroup__namespace.Item)`
+const RadioGroupItem = styled.styled(RadioGroup__namespace.Item)`
   background: ${(props) => props.theme.colors.neutral0};
   width: 2rem;
   height: 2rem;
@@ -5758,7 +5801,7 @@ const RadioGroupItem = styledComponents.styled(RadioGroup__namespace.Item)`
     min-height: 44px;
   }
 `;
-const RadioGroupIndicator = styledComponents.styled(RadioGroup__namespace.Indicator)`
+const RadioGroupIndicator = styled.styled(RadioGroup__namespace.Indicator)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6019,19 +6062,19 @@ const RawTr = ({ children, ...props }) => {
   });
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { tag: "tr", ...props, children: childrenClone });
 };
-const CloseIcon = styledComponents.styled(icons.Cross)`
+const CloseIcon = styled.styled(icons.Cross)`
   font-size: 0.5rem;
   path {
     fill: ${({ theme }) => theme.colors.neutral500};
   }
 `;
-const SearchIcon = styledComponents.styled(icons.Search)`
+const SearchIcon = styled.styled(icons.Search)`
   font-size: 1rem;
   path {
     fill: ${({ theme }) => theme.colors.neutral500};
   }
 `;
-const SearchbarWrapper = styledComponents.styled.div`
+const SearchbarWrapper = styled.styled.div`
   border-radius: ${({ theme }) => theme.borderRadius};
   border: 1px solid ${({ theme }) => theme.colors.neutral150}
 
@@ -6041,16 +6084,12 @@ const SearchbarWrapper = styledComponents.styled.div`
     }
   }
 `;
-const SearchbarInput = styledComponents.styled(Input$2)`
+const SearchbarInput = styled.styled(Input$2)`
   border: 1px solid ${({ theme }) => theme.colors.neutral150}
   height: 16px;
   padding: 0 0 0 8px;
   color: ${({ theme }) => theme.colors.neutral800};
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
-  }
-
+  
   &:hover {
     button {
       cursor: pointer;
@@ -6098,7 +6137,7 @@ const Searchbar = React__namespace.forwardRef(
   }
 );
 const SearchForm = (props) => /* @__PURE__ */ jsxRuntime.jsx("form", { ...props, role: "search" });
-const ButtonBox$1 = styledComponents.styled(Box)`
+const ButtonBox$1 = styled.styled(Box)`
   display: inline-flex;
   border: none;
 
@@ -6152,7 +6191,7 @@ const Tag = ({ children, icon, label, disabled = false, onClick, ...props }) =>
     }
   );
 };
-const TagText = styledComponents.styled(Typography)`
+const TagText = styled.styled(Typography)`
   color: inherit;
   border-right: 1px solid ${({ theme, $disabled }) => $disabled ? theme.colors.neutral300 : theme.colors.primary200};
   padding-right: ${({ theme }) => theme.spaces[2]};
@@ -6317,7 +6356,7 @@ const MultiSelectNested = ({ options, ...props }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectOption, { value: opt.value, children: opt.label }, opt.value);
   }) });
 };
-const NestedOption = styledComponents.styled(MultiSelectOption)`
+const NestedOption = styled.styled(MultiSelectOption)`
   padding-left: ${({ theme }) => theme.spaces[7]};
 `;
 const getPadding = (size) => {
@@ -6354,7 +6393,7 @@ const SUBNAV_WIDTH = `23.2rem`;
 const SubNav = React__namespace.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(SubNavWrapper, { ref, ...props, tag: "nav" });
 });
-const SubNavWrapper = styledComponents.styled(Box)`
+const SubNavWrapper = styled.styled(Box)`
   width: ${SUBNAV_WIDTH};
   background: ${({ theme }) => theme.colors.neutral100};
   position: sticky;
@@ -6364,7 +6403,7 @@ const SubNavWrapper = styledComponents.styled(Box)`
   border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
   z-index: 1;
 `;
-const CustomDivider = styledComponents.styled(Divider)`
+const CustomDivider = styled.styled(Divider)`
   width: 2.4rem;
   background-color: ${({ theme }) => theme.colors.neutral200};
 `;
@@ -6464,13 +6503,13 @@ const SubNavLink = forwardRef(
     );
   }
 );
-const CustomBullet = styledComponents.styled.span`
+const CustomBullet = styled.styled.span`
   width: 0.4rem;
   height: 0.4rem;
   background-color: ${({ theme, $active }) => $active ? theme.colors.primary600 : theme.colors.neutral600};
   border-radius: 50%;
 `;
-const SubNavLinkWrapper = styledComponents.styled(BaseLinkImpl)`
+const SubNavLinkWrapper = styled.styled(BaseLinkImpl)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -6482,7 +6521,7 @@ const SubNavLinkWrapper = styledComponents.styled(BaseLinkImpl)`
 
   &.active {
     ${({ theme }) => {
-  return styledComponents.css`
+  return styled.css`
         background-color: ${theme.colors.primary100};
         border-right: 2px solid ${theme.colors.primary600};
         color: ${theme.colors.primary700};
@@ -6499,13 +6538,13 @@ const SubNavLinkWrapper = styledComponents.styled(BaseLinkImpl)`
     outline-offset: -2px;
   }
 `;
-const IconWrapper = styledComponents.styled.div`
+const IconWrapper = styled.styled.div`
   svg {
     height: 1.6rem;
     width: 1.6rem;
   }
 `;
-const SubNavLinkSectionButton = styledComponents.styled.button`
+const SubNavLinkSectionButton = styled.styled.button`
   border: none;
   padding: 0;
   background: transparent;
@@ -6572,7 +6611,7 @@ const SubNavSectionLabel = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) });
 };
-const SubNavSectionWrapper = styledComponents.styled(Box)`
+const SubNavSectionWrapper = styled.styled(Box)`
   & > svg {
     height: 0.4rem;
     fill: ${({ theme }) => theme.colors.neutral500};
@@ -6663,7 +6702,7 @@ const SwitchImpl = React__namespace.forwardRef(
     ] });
   }
 );
-const SwitchRoot = styledComponents.styled(Switch__namespace.Root)`
+const SwitchRoot = styled.styled(Switch__namespace.Root)`
   width: 4rem;
   height: 2.4rem;
   border-radius: 1.2rem;
@@ -6681,7 +6720,7 @@ const SwitchRoot = styledComponents.styled(Switch__namespace.Root)`
     transition: ${(props) => props.theme.transitions.backgroundColor};
   }
 `;
-const SwitchThumb = styledComponents.styled(Switch__namespace.Thumb)`
+const SwitchThumb = styled.styled(Switch__namespace.Thumb)`
   display: block;
   height: 1.6rem;
   width: 1.6rem;
@@ -6698,7 +6737,7 @@ const SwitchThumb = styledComponents.styled(Switch__namespace.Thumb)`
       ${(props) => props.theme.motion.easings.authenticMotion};
   }
 `;
-const LabelTypography = styledComponents.styled(Typography)`
+const LabelTypography = styled.styled(Typography)`
   color: ${(props) => props.theme.colors.danger600};
 
   &[data-state='checked'] {
@@ -6715,7 +6754,7 @@ const Root$1 = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(TabsProvider, { disabled, hasError, variant: variant2, children: /* @__PURE__ */ jsxRuntime.jsx(TabsRoot, { ref: forwardedRef, ...props }) });
   }
 );
-const TabsRoot = styledComponents.styled(Tabs__namespace.Root)`
+const TabsRoot = styled.styled(Tabs__namespace.Root)`
   width: 100%;
   position: relative;
 `;
@@ -6723,7 +6762,7 @@ const List = React__namespace.forwardRef((props, forwardedRef) => {
   const { variant: variant2 } = useTabs("List");
   return /* @__PURE__ */ jsxRuntime.jsx(TabsList, { ref: forwardedRef, ...props, $variant: variant2 });
 });
-const TabsList = styledComponents.styled(Tabs__namespace.List)`
+const TabsList = styled.styled(Tabs__namespace.List)`
   display: flex;
   align-items: ${(props) => props.$variant === "regular" ? "flex-end" : "unset"};
   position: relative;
@@ -6740,7 +6779,7 @@ const Trigger = React__namespace.forwardRef(
     ] });
   }
 );
-const TabBar = styledComponents.styled.span`
+const TabBar = styled.styled.span`
   display: block;
   width: 100%;
   background-color: currentColor;
@@ -6750,8 +6789,8 @@ const TabBar = styledComponents.styled.span`
   opacity: 0;
   height: 0.2rem;
 `;
-const TriggerTypography = styledComponents.styled(Typography)``;
-const TabsTrigger = styledComponents.styled(Tabs__namespace.Trigger)`
+const TriggerTypography = styled.styled(Typography)``;
+const TabsTrigger = styled.styled(Tabs__namespace.Trigger)`
   position: relative;
   color: ${(props) => props.$hasError ? props.theme.colors.danger600 : props.theme.colors.neutral600};
   cursor: pointer;
@@ -6759,7 +6798,7 @@ const TabsTrigger = styledComponents.styled(Tabs__namespace.Trigger)`
 
   ${(props) => {
   if (props.$variant === "simple") {
-    return styledComponents.css`
+    return styled.css`
         padding-block: ${(props2) => props2.theme.spaces[4]};
         padding-inline: ${(props2) => props2.theme.spaces[4]};
 
@@ -6776,7 +6815,7 @@ const TabsTrigger = styledComponents.styled(Tabs__namespace.Trigger)`
         }
       `;
   } else {
-    return styledComponents.css`
+    return styled.css`
         padding-block: ${(props2) => props2.theme.spaces[3]};
         padding-inline: ${(props2) => props2.theme.spaces[3]};
         flex: 1;
@@ -6811,12 +6850,12 @@ const Content = React__namespace.forwardRef((props, forwardedRef) => {
   const { variant: variant2 } = useTabs("Content");
   return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { $variant: variant2, ref: forwardedRef, ...props });
 });
-const TabsContent = styledComponents.styled(Tabs__namespace.Content)`
+const TabsContent = styled.styled(Tabs__namespace.Content)`
   ${(props) => {
   if (props.$variant === "simple") {
-    return styledComponents.css``;
+    return styled.css``;
   } else {
-    return styledComponents.css`
+    return styled.css`
         position: relative;
         z-index: 1;
         background-color: ${(props2) => props2.theme.colors.neutral0};
@@ -6831,15 +6870,15 @@ const Tabs = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   Root: Root$1,
   Trigger
 }, Symbol.toStringTag, { value: "Module" }));
-const TableContainer = styledComponents.styled(Box)`
+const TableContainer = styled.styled(Box)`
   overflow: hidden;
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
-const TableWrapper = styledComponents.styled(RawTable)`
+const TableWrapper = styled.styled(RawTable)`
   width: 100%;
   white-space: nowrap;
 `;
-const TableBox = styledComponents.styled(Box)`
+const TableBox = styled.styled(Box)`
   &:before {
     // TODO: make sure to add a token for this weird stuff
     background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
@@ -6865,7 +6904,7 @@ const TableBox = styledComponents.styled(Box)`
     top: 0;
   }
 `;
-const ScrollContainer = styledComponents.styled(Box)`
+const ScrollContainer = styled.styled(Box)`
   overflow-x: auto;
 `;
 const Table = React__namespace.forwardRef(({ footer, ...props }, forwardedRef) => {
@@ -6895,7 +6934,7 @@ const Table = React__namespace.forwardRef(({ footer, ...props }, forwardedRef) =
     footer
   ] });
 });
-const TbodyWrapper = styledComponents.styled(RawTbody)`
+const TbodyWrapper = styled.styled(RawTbody)`
   & tr:last-of-type {
     border-bottom: none;
   }
@@ -6903,13 +6942,13 @@ const TbodyWrapper = styledComponents.styled(RawTbody)`
 const Tbody = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TbodyWrapper, { ...props, children });
 };
-const TheadWrapper = styledComponents.styled(RawThead)`
+const TheadWrapper = styled.styled(RawThead)`
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
 const Thead = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TheadWrapper, { ...props, children });
 };
-const TrWrapper = styledComponents.styled(RawTr)`
+const TrWrapper = styled.styled(RawTr)`
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
 
   & td,
@@ -6932,7 +6971,7 @@ const TrWrapper = styledComponents.styled(RawTr)`
 const Tr = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TrWrapper, { ...props });
 };
-const CellWrapper = styledComponents.styled(RawTd)`
+const CellWrapper = styled.styled(RawTd)`
   vertical-align: middle;
   text-align: left;
   outline-offset: -4px;
@@ -6953,7 +6992,7 @@ const Th = React__namespace.forwardRef(({ children, action, ...props }, forwarde
 const Td = React__namespace.forwardRef(({ children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(CellWrapper, { color: "neutral800", ref: forwardedRef, ...props, children });
 });
-const IconBox = styledComponents.styled(Box)`
+const IconBox = styled.styled(Box)`
   height: 2.4rem;
   width: 2.4rem;
   border-radius: 50%;
@@ -6970,7 +7009,7 @@ const IconBox = styledComponents.styled(Box)`
     fill: ${({ theme }) => theme.colors.primary600};
   }
 `;
-const ButtonBox = styledComponents.styled(Box)`
+const ButtonBox = styled.styled(Box)`
   border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
   display: block;
   width: 100%;
@@ -7007,7 +7046,7 @@ const TextButton = forwardRef(
     );
   }
 );
-const rotation = styledComponents.keyframes`
+const rotation = styled.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -7015,12 +7054,12 @@ const rotation = styledComponents.keyframes`
     transform: rotate(359deg);
   }
 `;
-const LoadingWrapper = styledComponents.styled.span`
+const LoadingWrapper = styled.styled.span`
   display: flex;
   animation: ${rotation} 2s infinite linear;
   will-change: transform;
 `;
-const TextButtonWrapper = styledComponents.styled(Flex)`
+const TextButtonWrapper = styled.styled(Flex)`
   border: none;
   background-color: transparent;
   color: ${(props) => props.theme.colors.primary600};
@@ -7074,18 +7113,17 @@ const Textarea = React__namespace.forwardRef(
     ) });
   }
 );
-const Wrapper$1 = styledComponents.styled(Box)`
+const Wrapper$1 = styled.styled(Box)`
   height: 10.5rem;
   ${inputFocusStyle()}
 `;
-const TextareaElement = styledComponents.styled(Box)`
+const TextareaElement = styled.styled(Box)`
   border: none;
   resize: none;
 
-  ::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
     font-size: ${({ theme }) => theme.fontSizes[2]};
-    color: ${({ theme }) => theme.colors.neutral500};
     opacity: 1;
   }
 
@@ -7209,13 +7247,13 @@ const Toggle = React__namespace.forwardRef(
     );
   }
 );
-const ToggleWrapper = styledComponents.styled(Flex)`
+const ToggleWrapper = styled.styled(Flex)`
   ${inputFocusStyle()}
 `;
-const ToggleOption = styledComponents.styled(Flex)`
+const ToggleOption = styled.styled(Flex)`
   padding-block: 0.6rem;
 `;
-const Input = styledComponents.styled.input`
+const Input = styled.styled.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -7228,7 +7266,7 @@ const Root = forwardRef((props, forwardedRef) => {
   const { gap = 0, gridCols = 12, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ref: forwardedRef, $gap: gap, $gridCols: gridCols, ...rest });
 });
-const Wrapper = styledComponents.styled(Box)`
+const Wrapper = styled.styled(Box)`
   display: grid;
   grid-template-columns: repeat(${({ $gridCols }) => $gridCols}, 1fr);
   ${({ theme, $gap }) => handleResponsiveValues({ gap: $gap }, theme)}
@@ -7236,7 +7274,7 @@ const Wrapper = styledComponents.styled(Box)`
 const ItemImpl = forwardRef(
   ({ col, s, xs, m, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(Item, { ref: forwardedRef, $col: col, $s: s, $xs: xs, $m: m, ...props })
 );
-const Item = styledComponents.styled(Flex)`
+const Item = styled.styled(Flex)`
   grid-column: span ${({ $xs }) => $xs ?? 12};
   max-width: 100%;
 
@@ -7451,7 +7489,7 @@ exports.ComboboxOption = Option;
 exports.Crumb = Crumb;
 exports.CrumbLink = CrumbLink;
 exports.CrumbSimpleMenu = CrumbSimpleMenu;
-exports.DatePicker = DatePicker$1;
+exports.DatePicker = DatePicker;
 exports.DateTimePicker = DateTimePicker;
 exports.DesignSystemProvider = DesignSystemProvider;
 exports.Dialog = Dialog;
@@ -7520,7 +7558,7 @@ exports.TextInput = TextInput;
 exports.Textarea = Textarea;
 exports.Th = Th;
 exports.Thead = Thead;
-exports.TimePicker = TimePicker$1;
+exports.TimePicker = TimePicker;
 exports.Toggle = Toggle;
 exports.Tooltip = TooltipImpl;
 exports.Tr = Tr;