@strapi/design-system 2.0.0-rc.24 → 2.0.0-rc.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/components/Combobox/Combobox.d.ts.map +1 -1
  2. package/dist/components/DatePicker/DatePicker.d.ts +1 -0
  3. package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
  4. package/dist/components/DateTimePicker/DateTimePicker.d.ts.map +1 -1
  5. package/dist/components/Dialog/Dialog.d.ts.map +1 -1
  6. package/dist/components/Modal/Modal.d.ts.map +1 -1
  7. package/dist/components/Searchbar/Searchbar.d.ts.map +1 -1
  8. package/dist/components/Select/SelectParts.d.ts.map +1 -1
  9. package/dist/components/SimpleMenu/Menu.d.ts +3 -1
  10. package/dist/components/SimpleMenu/Menu.d.ts.map +1 -1
  11. package/dist/components/SimpleMenu/SimpleMenu.d.ts +3 -2
  12. package/dist/components/SimpleMenu/SimpleMenu.d.ts.map +1 -1
  13. package/dist/components/SimpleMenu/utils.d.ts +6 -0
  14. package/dist/components/SimpleMenu/utils.d.ts.map +1 -0
  15. package/dist/components/Textarea/Textarea.d.ts.map +1 -1
  16. package/dist/components/TimePicker/TimePicker.d.ts.map +1 -1
  17. package/dist/index.js +315 -299
  18. package/dist/index.js.map +1 -1
  19. package/dist/index.mjs +99 -85
  20. package/dist/index.mjs.map +1 -1
  21. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ const reactUseCallbackRef = require("@radix-ui/react-use-callback-ref");
5
5
  const date = require("@internationalized/date");
6
6
  const jsxRuntime = require("react/jsx-runtime");
7
7
  const Tooltip = require("@radix-ui/react-tooltip");
8
- const styledComponents = require("styled-components");
8
+ const styled = require("styled-components");
9
9
  const DismissibleLayerPrimitive = require("@radix-ui/react-dismissable-layer");
10
10
  const uiPrimitives = require("@strapi/ui-primitives");
11
11
  const RadixAccordion = require("@radix-ui/react-accordion");
@@ -32,6 +32,7 @@ const RadioGroup = require("@radix-ui/react-radio-group");
32
32
  const Switch = require("@radix-ui/react-switch");
33
33
  const Tabs$1 = require("@radix-ui/react-tabs");
34
34
  const lodash = require("lodash");
35
+ const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
35
36
  function _interopNamespace(e) {
36
37
  if (e && e.__esModule)
37
38
  return e;
@@ -52,6 +53,7 @@ function _interopNamespace(e) {
52
53
  }
53
54
  const React__namespace = /* @__PURE__ */ _interopNamespace(React);
54
55
  const Tooltip__namespace = /* @__PURE__ */ _interopNamespace(Tooltip);
56
+ const styled__default = /* @__PURE__ */ _interopDefault(styled);
55
57
  const DismissibleLayerPrimitive__namespace = /* @__PURE__ */ _interopNamespace(DismissibleLayerPrimitive);
56
58
  const RadixAccordion__namespace = /* @__PURE__ */ _interopNamespace(RadixAccordion);
57
59
  const Avatar__namespace = /* @__PURE__ */ _interopNamespace(Avatar$1);
@@ -356,7 +358,7 @@ const Box = forwardRef((props, ref) => {
356
358
  };
357
359
  return /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { as: AsComponent, ref, ...mappedProps, ...rest });
358
360
  });
359
- const StyledBox = styledComponents.styled.div`
361
+ const StyledBox = styled.styled.div`
360
362
  ${({ theme, ...props }) => {
361
363
  return handleResponsiveValues(
362
364
  {
@@ -422,7 +424,7 @@ const Flex = forwardRef((props, ref) => {
422
424
  };
423
425
  return /* @__PURE__ */ jsxRuntime.jsx(StyledFlex, { className, ref, ...mappedProps, ...rest });
424
426
  });
425
- const StyledFlex = styledComponents.styled(Box)`
427
+ const StyledFlex = styled.styled(Box)`
426
428
  ${({ theme, $display = "flex", $alignItems = "center", $direction = "row", ...props }) => handleResponsiveValues(
427
429
  {
428
430
  gap: props.$gap,
@@ -442,7 +444,7 @@ const EPSILON = "epsilon";
442
444
  const OMEGA = "omega";
443
445
  const PI = "pi";
444
446
  const SIGMA = "sigma";
445
- const ellipsis = styledComponents.css`
447
+ const ellipsis = styled.css`
446
448
  display: block;
447
449
  white-space: nowrap;
448
450
  overflow: hidden;
@@ -530,7 +532,7 @@ const Typography = forwardRef(
530
532
  return /* @__PURE__ */ jsxRuntime.jsx(StyledTypography, { ref, tag: "span", ...mappedProps, ...rest });
531
533
  }
532
534
  );
533
- const StyledTypography = styledComponents.styled(Box)`
535
+ const StyledTypography = styled.styled(Box)`
534
536
  ${variant}
535
537
  ${({ $ellipsis }) => $ellipsis ? ellipsis : ""}
536
538
 
@@ -552,17 +554,17 @@ const [AccordionProvider, useAccordion] = createContext("Accordion");
552
554
  const Root$8 = React__namespace.forwardRef(({ children, size = "S", ...props }, forwardedRef) => {
553
555
  return /* @__PURE__ */ jsxRuntime.jsx(AccordionRoot, { ref: forwardedRef, $size: size, collapsible: true, ...props, type: "single", children: /* @__PURE__ */ jsxRuntime.jsx(AccordionProvider, { size, children }) });
554
556
  });
555
- const AccordionRoot = styledComponents.styled(RadixAccordion__namespace.Root)`
557
+ const AccordionRoot = styled.styled(RadixAccordion__namespace.Root)`
556
558
  background-color: ${(props) => props.theme.colors.neutral0};
557
559
 
558
560
  ${(props) => {
559
561
  if (props.$size === "S") {
560
- return styledComponents.css`
562
+ return styled.css`
561
563
  border-radius: ${(props2) => props2.theme.borderRadius};
562
564
  border: solid 1px ${(props2) => props2.theme.colors.neutral200};
563
565
  `;
564
566
  } else {
565
- return styledComponents.css``;
567
+ return styled.css``;
566
568
  }
567
569
  }}
568
570
  `;
@@ -570,7 +572,7 @@ const Item$5 = React__namespace.forwardRef((props, forwardedRef) => {
570
572
  const { size } = useAccordion("Item");
571
573
  return /* @__PURE__ */ jsxRuntime.jsx(AccordionItem, { $size: size, "data-size": size, ref: forwardedRef, ...props });
572
574
  });
573
- const AccordionItem = styledComponents.styled(RadixAccordion__namespace.Item)`
575
+ const AccordionItem = styled.styled(RadixAccordion__namespace.Item)`
574
576
  overflow: hidden;
575
577
  margin: 1px 0;
576
578
 
@@ -618,7 +620,7 @@ const Trigger$7 = React__namespace.forwardRef(
618
620
  return /* @__PURE__ */ jsxRuntime.jsxs(AccordionTrigger, { $caretPosition: caretPosition, $size: size, ref: forwardedRef, ...restProps, children: [
619
621
  caretPosition === "left" ? /* @__PURE__ */ jsxRuntime.jsx(TriggerIcon, { $size: size, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { width: size === "S" ? "1.2rem" : "1.6rem", height: size === "S" ? "1.2rem" : "1.6rem" }) }) : null,
620
622
  /* @__PURE__ */ jsxRuntime.jsxs(Flex, { tag: "span", gap: 2, overflow: "hidden", children: [
621
- Icon && size === "S" ? /* @__PURE__ */ jsxRuntime.jsx(IconBox$2, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { ...iconProps }) }) : null,
623
+ Icon && size === "S" ? /* @__PURE__ */ jsxRuntime.jsx(IconBox$1, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { ...iconProps }) }) : null,
622
624
  /* @__PURE__ */ jsxRuntime.jsxs(Flex, { alignItems: "flex-start", direction: "column", tag: "span", ref: forwardedRef, overflow: "hidden", children: [
623
625
  /* @__PURE__ */ jsxRuntime.jsx(
624
626
  Typography,
@@ -638,7 +640,7 @@ const Trigger$7 = React__namespace.forwardRef(
638
640
  ] });
639
641
  }
640
642
  );
641
- const IconBox$2 = styledComponents.styled(Box)`
643
+ const IconBox$1 = styled.styled(Box)`
642
644
  color: ${(props) => props.theme.colors.neutral500};
643
645
  display: flex;
644
646
 
@@ -646,7 +648,7 @@ const IconBox$2 = styledComponents.styled(Box)`
646
648
  transition: ${(props) => props.theme.transitions.color};
647
649
  }
648
650
  `;
649
- const TriggerIcon = styledComponents.styled(Flex).attrs((props) => ({
651
+ const TriggerIcon = styled.styled(Flex).attrs((props) => ({
650
652
  ...props,
651
653
  tag: "span"
652
654
  }))`
@@ -663,7 +665,7 @@ const TriggerIcon = styledComponents.styled(Flex).attrs((props) => ({
663
665
  ${(props) => props.theme.transitions.backgroundColor};
664
666
  }
665
667
  `;
666
- const AccordionTrigger = styledComponents.styled(RadixAccordion__namespace.Trigger)`
668
+ const AccordionTrigger = styled.styled(RadixAccordion__namespace.Trigger)`
667
669
  display: flex;
668
670
  align-items: center;
669
671
  justify-content: ${(props) => props.$caretPosition === "left" ? "flex-start" : "space-between"};
@@ -697,7 +699,7 @@ const Actions = React__namespace.forwardRef((props, forwardedRef) => {
697
699
  const { size } = useAccordion("Trigger");
698
700
  return /* @__PURE__ */ jsxRuntime.jsx(ActionWrapper, { $size: size, ...props, ref: forwardedRef });
699
701
  });
700
- const ActionWrapper = styledComponents.styled(Flex).attrs((props) => ({
702
+ const ActionWrapper = styled.styled(Flex).attrs((props) => ({
701
703
  ...props,
702
704
  tag: "span"
703
705
  }))`
@@ -718,7 +720,7 @@ const ActionWrapper = styledComponents.styled(Flex).attrs((props) => ({
718
720
  const Header$2 = React__namespace.forwardRef(({ variant: variant2 = "primary", ...props }, forwardedRef) => {
719
721
  return /* @__PURE__ */ jsxRuntime.jsx(AccordionHeader, { $variant: variant2, ref: forwardedRef, ...props });
720
722
  });
721
- const AccordionHeader = styledComponents.styled(RadixAccordion__namespace.Header)`
723
+ const AccordionHeader = styled.styled(RadixAccordion__namespace.Header)`
722
724
  display: flex;
723
725
  align-items: center;
724
726
  background-color: ${(props) => props.$variant === "primary" ? props.theme.colors.neutral0 : props.theme.colors.neutral100};
@@ -735,7 +737,7 @@ const AccordionHeader = styledComponents.styled(RadixAccordion__namespace.Header
735
737
  & > ${AccordionTrigger} {
736
738
  color: ${(props) => props.theme.colors.primary600};
737
739
 
738
- & ${IconBox$2} {
740
+ & ${IconBox$1} {
739
741
  color: ${(props) => props.theme.colors.primary600};
740
742
  }
741
743
 
@@ -757,7 +759,7 @@ const AccordionHeader = styledComponents.styled(RadixAccordion__namespace.Header
757
759
  const Content$7 = React__namespace.forwardRef((props, forwardedRef) => {
758
760
  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { ref: forwardedRef, ...props });
759
761
  });
760
- const slideDown = styledComponents.keyframes`
762
+ const slideDown = styled.keyframes`
761
763
  from {
762
764
  height: 0;
763
765
  }
@@ -765,7 +767,7 @@ const slideDown = styledComponents.keyframes`
765
767
  height: var(--radix-accordion-content-height);
766
768
  }
767
769
  `;
768
- const slideUp = styledComponents.keyframes`
770
+ const slideUp = styled.keyframes`
769
771
  from {
770
772
  height: var(--radix-accordion-content-height);
771
773
  }
@@ -773,7 +775,7 @@ const slideUp = styledComponents.keyframes`
773
775
  height: 0;
774
776
  }
775
777
  `;
776
- const AccordionContent = styledComponents.styled(RadixAccordion__namespace.Content)`
778
+ const AccordionContent = styled.styled(RadixAccordion__namespace.Content)`
777
779
  overflow: hidden;
778
780
 
779
781
  @media (prefers-reduced-motion: no-preference) {
@@ -797,7 +799,7 @@ const Accordion = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
797
799
  Root: Root$8,
798
800
  Trigger: Trigger$7
799
801
  }, Symbol.toStringTag, { value: "Module" }));
800
- const focus = styledComponents.css`
802
+ const focus = styled.css`
801
803
  position: relative;
802
804
  outline: none;
803
805
 
@@ -833,7 +835,7 @@ const VisuallyHidden = ({ tag, ...props }) => {
833
835
  const AsComponent = tag || "span";
834
836
  return /* @__PURE__ */ jsxRuntime.jsx(Span, { ...props, as: AsComponent });
835
837
  };
836
- const Span = styledComponents.styled.span`
838
+ const Span = styled.styled.span`
837
839
  border: 0;
838
840
  clip: rect(0 0 0 0);
839
841
  height: 1px;
@@ -883,10 +885,10 @@ const handleIconColor = ({ theme, $variant }) => {
883
885
  }
884
886
  return theme.colors.primary700;
885
887
  };
886
- const CloseButton = styledComponents.styled(Box)`
888
+ const CloseButton = styled.styled(Box)`
887
889
  ${focus};
888
890
  `;
889
- const AlertIconWrapper = styledComponents.styled(Flex)`
891
+ const AlertIconWrapper = styled.styled(Flex)`
890
892
  svg {
891
893
  height: 100%;
892
894
  width: 100%;
@@ -905,7 +907,7 @@ const AlertIcon = ({ variant: variant2, ...props }) => {
905
907
  }
906
908
  return /* @__PURE__ */ jsxRuntime.jsx(icons.Information, { ...props });
907
909
  };
908
- const ActionBox = styledComponents.styled(Box)`
910
+ const ActionBox = styled.styled(Box)`
909
911
  & a > span {
910
912
  color: ${handleIconColor};
911
913
  }
@@ -1043,7 +1045,7 @@ const TRANSITIONS = {
1043
1045
  backgroundColor: `background-color ${TIMINGS["120"]} ${EASINGS.easeOutQuad}`
1044
1046
  };
1045
1047
  const ANIMATIONS = {
1046
- overlayFadeIn: styledComponents.keyframes`
1048
+ overlayFadeIn: styled.keyframes`
1047
1049
  from {
1048
1050
  opacity: 0;
1049
1051
  }
@@ -1051,7 +1053,7 @@ const ANIMATIONS = {
1051
1053
  opacity: 0.2;
1052
1054
  }
1053
1055
  `,
1054
- modalPopIn: styledComponents.keyframes`
1056
+ modalPopIn: styled.keyframes`
1055
1057
  from {
1056
1058
  transform:translate(-50%, -50%) scale(0.8);
1057
1059
  opacity: 0;
@@ -1061,7 +1063,7 @@ const ANIMATIONS = {
1061
1063
  opacity: 1;
1062
1064
  }
1063
1065
  `,
1064
- modalPopOut: styledComponents.keyframes`
1066
+ modalPopOut: styled.keyframes`
1065
1067
  from {
1066
1068
  transform: translate(-50%, -50%) scale(1);
1067
1069
  opacity: 1;
@@ -1071,7 +1073,7 @@ const ANIMATIONS = {
1071
1073
  opacity: 0;
1072
1074
  }
1073
1075
  `,
1074
- popIn: styledComponents.keyframes`
1076
+ popIn: styled.keyframes`
1075
1077
  from {
1076
1078
  transform: scale(0.8);
1077
1079
  opacity: 0;
@@ -1081,7 +1083,7 @@ const ANIMATIONS = {
1081
1083
  opacity: 1;
1082
1084
  }
1083
1085
  `,
1084
- popOut: styledComponents.keyframes`
1086
+ popOut: styled.keyframes`
1085
1087
  from {
1086
1088
  transform: scale(1);
1087
1089
  opacity: 1;
@@ -1091,7 +1093,7 @@ const ANIMATIONS = {
1091
1093
  opacity: 0;
1092
1094
  }
1093
1095
  `,
1094
- slideDownIn: styledComponents.keyframes`
1096
+ slideDownIn: styled.keyframes`
1095
1097
  from {
1096
1098
  opacity: 0;
1097
1099
  transform: translateY(-10px);
@@ -1101,7 +1103,7 @@ const ANIMATIONS = {
1101
1103
  transform: translateY(0);
1102
1104
  }
1103
1105
  `,
1104
- slideDownOut: styledComponents.keyframes`
1106
+ slideDownOut: styled.keyframes`
1105
1107
  from {
1106
1108
  opacity: 1;
1107
1109
  transform: translateY(0);
@@ -1111,7 +1113,7 @@ const ANIMATIONS = {
1111
1113
  transform: translateY(-10px);
1112
1114
  }
1113
1115
  `,
1114
- slideUpIn: styledComponents.keyframes`
1116
+ slideUpIn: styled.keyframes`
1115
1117
  from {
1116
1118
  opacity: 0;
1117
1119
  transform: translateY(10px);
@@ -1121,7 +1123,7 @@ const ANIMATIONS = {
1121
1123
  transform: translateY(0);
1122
1124
  }
1123
1125
  `,
1124
- slideUpOut: styledComponents.keyframes`
1126
+ slideUpOut: styled.keyframes`
1125
1127
  from {
1126
1128
  opacity: 1;
1127
1129
  transform: translateY(0);
@@ -1131,7 +1133,7 @@ const ANIMATIONS = {
1131
1133
  transform: translateY(10px);
1132
1134
  }
1133
1135
  `,
1134
- fadeIn: styledComponents.keyframes`
1136
+ fadeIn: styled.keyframes`
1135
1137
  from {
1136
1138
  opacity: 0;
1137
1139
  }
@@ -1139,7 +1141,7 @@ const ANIMATIONS = {
1139
1141
  opacity: 1;
1140
1142
  }
1141
1143
  `,
1142
- fadeOut: styledComponents.keyframes`
1144
+ fadeOut: styled.keyframes`
1143
1145
  from {
1144
1146
  opacity: 1;
1145
1147
  }
@@ -1182,7 +1184,7 @@ const Item$4 = React__namespace.forwardRef(
1182
1184
  ] });
1183
1185
  }
1184
1186
  );
1185
- const avatarStyles = styledComponents.css`
1187
+ const avatarStyles = styled.css`
1186
1188
  display: inline-flex;
1187
1189
  align-items: center;
1188
1190
  justify-content: center;
@@ -1192,13 +1194,13 @@ const avatarStyles = styledComponents.css`
1192
1194
  overflow: hidden;
1193
1195
  border-radius: 50%;
1194
1196
  `;
1195
- const imgStyles = styledComponents.css`
1197
+ const imgStyles = styled.css`
1196
1198
  width: 100%;
1197
1199
  height: 100%;
1198
1200
  object-fit: cover;
1199
1201
  border-radius: inherit;
1200
1202
  `;
1201
- const AvatarRoot = styledComponents.styled(Avatar__namespace.Root)`
1203
+ const AvatarRoot = styled.styled(Avatar__namespace.Root)`
1202
1204
  position: relative;
1203
1205
  z-index: 0;
1204
1206
  ${avatarStyles}
@@ -1208,16 +1210,16 @@ const AvatarRoot = styledComponents.styled(Avatar__namespace.Root)`
1208
1210
  background-color: ${(p) => p.theme.colors.primary600};
1209
1211
  color: ${(p) => p.theme.colors.neutral0};
1210
1212
  `;
1211
- const AvatarOverlay = styledComponents.styled(Box)`
1213
+ const AvatarOverlay = styled.styled(Box)`
1212
1214
  @media (prefers-reduced-motion: no-preference) {
1213
1215
  transition: opacity ${(props) => props.theme.motion.timings["200"]}
1214
1216
  ${(props) => props.theme.motion.easings.authenticMotion};
1215
1217
  }
1216
1218
  `;
1217
- const AvatarImage = styledComponents.styled(Avatar__namespace.Image)`
1219
+ const AvatarImage = styled.styled(Avatar__namespace.Image)`
1218
1220
  ${imgStyles}
1219
1221
  `;
1220
- const PreviewContent = styledComponents.styled(Tooltip__namespace.Content)`
1222
+ const PreviewContent = styled.styled(Tooltip__namespace.Content)`
1221
1223
  ${avatarStyles}
1222
1224
  width: ${SIZE * PREVIEW_SCALE / 10}rem;
1223
1225
  height: ${SIZE * PREVIEW_SCALE / 10}rem;
@@ -1227,13 +1229,13 @@ const PreviewContent = styledComponents.styled(Tooltip__namespace.Content)`
1227
1229
  ${(props) => props.theme.motion.easings.authenticMotion};
1228
1230
  }
1229
1231
  `;
1230
- const PreviewImg = styledComponents.styled.img`
1232
+ const PreviewImg = styled.styled.img`
1231
1233
  ${imgStyles}
1232
1234
  `;
1233
1235
  const Group$2 = React__namespace.forwardRef((props, forwarededRef) => {
1234
1236
  return /* @__PURE__ */ jsxRuntime.jsx(GroupFlex, { ...props, ref: forwarededRef, tag: "div" });
1235
1237
  });
1236
- const GroupFlex = styledComponents.styled(Flex)`
1238
+ const GroupFlex = styled.styled(Flex)`
1237
1239
  & > ${AvatarRoot} + ${AvatarRoot} {
1238
1240
  margin-left: -${SIZE / 10 / 2}rem;
1239
1241
  }
@@ -1269,16 +1271,16 @@ const Badge = ({
1269
1271
  }
1270
1272
  );
1271
1273
  };
1272
- const Base = styledComponents.styled(Flex)`
1274
+ const Base = styled.styled(Flex)`
1273
1275
  border-radius: ${({ theme, $size }) => $size === "S" ? "2px" : theme.borderRadius};
1274
1276
  ${({ $size, theme }) => {
1275
1277
  if ($size === "S") {
1276
- return styledComponents.css`
1278
+ return styled.css`
1277
1279
  padding-block: 0.3rem;
1278
1280
  padding-inline ${theme.spaces[1]}
1279
1281
  `;
1280
1282
  }
1281
- return styledComponents.css`
1283
+ return styled.css`
1282
1284
  padding-block: 0.7rem;
1283
1285
  padding-inline ${theme.spaces[2]}
1284
1286
  `;
@@ -1303,7 +1305,7 @@ const BaseLinkImpl = forwardRef(
1303
1305
  );
1304
1306
  }
1305
1307
  );
1306
- const BaseLink = styledComponents.styled(Box)`
1308
+ const BaseLink = styled.styled(Box)`
1307
1309
  text-decoration: none;
1308
1310
 
1309
1311
  &:visited {
@@ -1314,7 +1316,7 @@ const Divider$1 = () => {
1314
1316
  return /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true, paddingLeft: 1, paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "pi", textColor: "neutral500", children: "/" }) });
1315
1317
  };
1316
1318
  Divider$1.displayName = "Divider";
1317
- const AlignedList = styledComponents.styled(Flex)`
1319
+ const AlignedList = styled.styled(Flex)`
1318
1320
  // CrumbLinks do have padding-x, because they need to have a
1319
1321
  // interaction effect, which mis-aligns the breadcrumbs on the left.
1320
1322
  // This normalizes the behavior by moving the first item to left by
@@ -1350,7 +1352,7 @@ const Crumb = React__namespace.forwardRef(
1350
1352
  ) })
1351
1353
  );
1352
1354
  Crumb.displayName = "Crumb";
1353
- const StyledLink = styledComponents.styled(BaseLinkImpl)`
1355
+ const StyledLink = styled.styled(BaseLinkImpl)`
1354
1356
  border-radius: ${({ theme }) => theme.borderRadius};
1355
1357
  color: ${({ theme }) => theme.colors.neutral600};
1356
1358
  font-size: ${({ theme }) => theme.fontSizes[1]};
@@ -1444,7 +1446,7 @@ const getVariantColorName = (variant2) => {
1444
1446
  return `${variant2}`;
1445
1447
  };
1446
1448
  const getDisabledStyle = ({ theme }) => {
1447
- return styledComponents.css`
1449
+ return styled.css`
1448
1450
  border: 1px solid ${theme.colors.neutral200};
1449
1451
  background: ${theme.colors.neutral150};
1450
1452
  color: ${theme.colors.neutral600};
@@ -1453,45 +1455,45 @@ const getDisabledStyle = ({ theme }) => {
1453
1455
  };
1454
1456
  const getHoverStyle = ({ theme, $variant }) => {
1455
1457
  if ([...LIGHT_VARIANTS, SECONDARY].includes($variant)) {
1456
- return styledComponents.css`
1458
+ return styled.css`
1457
1459
  background-color: ${theme.colors.neutral0};
1458
1460
  `;
1459
1461
  }
1460
1462
  if ($variant === TERTIARY) {
1461
- return styledComponents.css`
1463
+ return styled.css`
1462
1464
  background-color: ${theme.colors.neutral100};
1463
1465
  `;
1464
1466
  }
1465
1467
  if ($variant === GHOST) {
1466
- return styledComponents.css`
1468
+ return styled.css`
1467
1469
  background-color: ${theme.colors.neutral100};
1468
1470
  `;
1469
1471
  }
1470
1472
  if ($variant === DEFAULT) {
1471
- return styledComponents.css`
1473
+ return styled.css`
1472
1474
  border: 1px solid ${theme.colors.buttonPrimary500};
1473
1475
  background: ${theme.colors.buttonPrimary500};
1474
1476
  `;
1475
1477
  }
1476
- return styledComponents.css`
1478
+ return styled.css`
1477
1479
  border: 1px solid ${theme.colors[`${getVariantColorName($variant)}500`]};
1478
1480
  background: ${theme.colors[`${getVariantColorName($variant)}500`]};
1479
1481
  `;
1480
1482
  };
1481
1483
  const getActiveStyle = ({ theme, $variant }) => {
1482
1484
  if ([...LIGHT_VARIANTS, SECONDARY].includes($variant)) {
1483
- return styledComponents.css`
1485
+ return styled.css`
1484
1486
  background-color: ${theme.colors.neutral0};
1485
1487
  border: 1px solid ${theme.colors[`${getVariantColorName($variant)}600`]};
1486
1488
  color: ${theme.colors[`${getVariantColorName($variant)}600`]};
1487
1489
  `;
1488
1490
  }
1489
1491
  if ($variant === TERTIARY || $variant === GHOST) {
1490
- return styledComponents.css`
1492
+ return styled.css`
1491
1493
  background-color: ${theme.colors.neutral150};
1492
1494
  `;
1493
1495
  }
1494
- return styledComponents.css`
1496
+ return styled.css`
1495
1497
  border: 1px solid ${theme.colors[`${getVariantColorName($variant)}600`]};
1496
1498
  background: ${theme.colors[`${getVariantColorName($variant)}600`]};
1497
1499
  `;
@@ -1501,21 +1503,21 @@ const getVariantStyle = ({ theme, $variant }) => {
1501
1503
  case DANGER_LIGHT:
1502
1504
  case SUCCESS_LIGHT:
1503
1505
  case SECONDARY: {
1504
- return styledComponents.css`
1506
+ return styled.css`
1505
1507
  border: 1px solid ${theme.colors[`${getVariantColorName($variant)}200`]};
1506
1508
  background: ${theme.colors[`${getVariantColorName($variant)}100`]};
1507
1509
  color: ${theme.colors[`${getVariantColorName($variant)}700`]};
1508
1510
  `;
1509
1511
  }
1510
1512
  case TERTIARY: {
1511
- return styledComponents.css`
1513
+ return styled.css`
1512
1514
  border: 1px solid ${theme.colors.neutral200};
1513
1515
  background: ${theme.colors.neutral0};
1514
1516
  color: ${theme.colors.neutral800};
1515
1517
  `;
1516
1518
  }
1517
1519
  case GHOST: {
1518
- return styledComponents.css`
1520
+ return styled.css`
1519
1521
  border: 1px solid transparent;
1520
1522
  background: transparent;
1521
1523
  color: ${theme.colors.neutral800};
@@ -1527,14 +1529,14 @@ const getVariantStyle = ({ theme, $variant }) => {
1527
1529
  }
1528
1530
  case SUCCESS:
1529
1531
  case DANGER: {
1530
- return styledComponents.css`
1532
+ return styled.css`
1531
1533
  border: 1px solid ${theme.colors[`${getVariantColorName($variant)}600`]};
1532
1534
  background: ${theme.colors[`${getVariantColorName($variant)}600`]};
1533
1535
  color: ${theme.colors.neutral0};
1534
1536
  `;
1535
1537
  }
1536
1538
  default: {
1537
- return styledComponents.css`
1539
+ return styled.css`
1538
1540
  border: 1px solid ${theme.colors.buttonPrimary600};
1539
1541
  background: ${theme.colors.buttonPrimary600};
1540
1542
  color: ${theme.colors.buttonNeutral0};
@@ -1590,7 +1592,7 @@ const Button = forwardRef(
1590
1592
  );
1591
1593
  }
1592
1594
  );
1593
- const rotation$2 = styledComponents.keyframes`
1595
+ const rotation$2 = styled.keyframes`
1594
1596
  from {
1595
1597
  transform: rotate(0deg);
1596
1598
  }
@@ -1598,11 +1600,11 @@ const rotation$2 = styledComponents.keyframes`
1598
1600
  transform: rotate(359deg);
1599
1601
  }
1600
1602
  `;
1601
- const LoaderAnimated = styledComponents.styled(icons.Loader)`
1603
+ const LoaderAnimated = styled.styled(icons.Loader)`
1602
1604
  animation: ${rotation$2} 2s infinite linear;
1603
1605
  will-change: transform;
1604
1606
  `;
1605
- const ButtonWrapper = styledComponents.styled(Flex)`
1607
+ const ButtonWrapper = styled.styled(Flex)`
1606
1608
  height: ${({ theme, $size }) => theme.sizes.button[$size]};
1607
1609
  text-decoration: none;
1608
1610
  ${getVariantStyle}
@@ -1656,7 +1658,7 @@ const TooltipImpl = React__namespace.forwardRef(
1656
1658
  );
1657
1659
  }
1658
1660
  );
1659
- const TooltipContent = styledComponents.styled(Tooltip__namespace.Content)`
1661
+ const TooltipContent = styled.styled(Tooltip__namespace.Content)`
1660
1662
  background-color: ${(props) => props.theme.colors.neutral900};
1661
1663
  color: ${(props) => props.theme.colors.neutral0};
1662
1664
  padding-inline: ${(props) => props.theme.spaces[2]};
@@ -1709,31 +1711,31 @@ const IconButton = forwardRef(
1709
1711
  return withTooltip ? /* @__PURE__ */ jsxRuntime.jsx(TooltipImpl, { label, children: component }) : component;
1710
1712
  }
1711
1713
  );
1712
- const IconButtonWrapper = styledComponents.styled(Flex)`
1714
+ const IconButtonWrapper = styled.styled(Flex)`
1713
1715
  text-decoration: none;
1714
1716
 
1715
1717
  ${(props) => {
1716
1718
  switch (props.$size) {
1717
1719
  case "XS": {
1718
- return styledComponents.css`
1719
- padding-block: 0.25rem;
1720
- padding-inline: 0.25rem;
1720
+ return styled.css`
1721
+ padding-block: 0.2rem;
1722
+ padding-inline: 0.2rem;
1721
1723
  `;
1722
1724
  }
1723
1725
  case "S": {
1724
- return styledComponents.css`
1726
+ return styled.css`
1725
1727
  padding-block: 0.7rem;
1726
1728
  padding-inline: 0.7rem;
1727
1729
  `;
1728
1730
  }
1729
1731
  case "M": {
1730
- return styledComponents.css`
1732
+ return styled.css`
1731
1733
  padding-block: 0.9rem;
1732
1734
  padding-inline: 0.9rem;
1733
1735
  `;
1734
1736
  }
1735
1737
  case "L": {
1736
- return styledComponents.css`
1738
+ return styled.css`
1737
1739
  padding-block: 1.1rem;
1738
1740
  padding-inline: 1.1rem;
1739
1741
  `;
@@ -1741,13 +1743,13 @@ const IconButtonWrapper = styledComponents.styled(Flex)`
1741
1743
  }
1742
1744
  }}
1743
1745
  ${getVariantStyle}
1744
- ${(props) => props.$variant === "tertiary" ? styledComponents.css`
1746
+ ${(props) => props.$variant === "tertiary" ? styled.css`
1745
1747
  color: ${props.theme.colors.neutral500};
1746
1748
  ` : ""}
1747
1749
 
1748
1750
  &:hover {
1749
1751
  ${getHoverStyle}
1750
- ${(props) => props.$variant === "tertiary" ? styledComponents.css`
1752
+ ${(props) => props.$variant === "tertiary" ? styled.css`
1751
1753
  color: ${props.theme.colors.neutral600};
1752
1754
  ` : ""}
1753
1755
  }
@@ -1767,7 +1769,7 @@ const IconButtonWrapper = styledComponents.styled(Flex)`
1767
1769
  border-color ${(props) => props.theme.motion.timings["200"]} ${(props) => props.theme.motion.easings.easeOutQuad};
1768
1770
  }
1769
1771
  `;
1770
- const IconButtonGroup = styledComponents.styled(Flex)`
1772
+ const IconButtonGroup = styled.styled(Flex)`
1771
1773
  & ${IconButtonWrapper}:first-child {
1772
1774
  border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
1773
1775
  }
@@ -1794,7 +1796,7 @@ const Link = forwardRef(
1794
1796
  ] });
1795
1797
  }
1796
1798
  );
1797
- const LinkWrapper$1 = styledComponents.styled(BaseLinkImpl)`
1799
+ const LinkWrapper$1 = styled.styled(BaseLinkImpl)`
1798
1800
  display: inline-flex;
1799
1801
  align-items: center;
1800
1802
  text-decoration: none;
@@ -1825,6 +1827,30 @@ const LinkWrapper$1 = styledComponents.styled(BaseLinkImpl)`
1825
1827
 
1826
1828
  ${focus};
1827
1829
  `;
1830
+ const getBackgroundColorHover = (variant2) => {
1831
+ switch (variant2) {
1832
+ case "danger":
1833
+ return "danger100";
1834
+ default:
1835
+ return "primary100";
1836
+ }
1837
+ };
1838
+ const getTextColor = (variant2, disabled) => {
1839
+ switch (variant2) {
1840
+ case "danger":
1841
+ return disabled ? "danger500" : "danger700";
1842
+ default:
1843
+ return disabled ? "neutral500" : "neutral800";
1844
+ }
1845
+ };
1846
+ const getIconColor = (variant2, disabled) => {
1847
+ switch (variant2) {
1848
+ case "danger":
1849
+ return disabled ? "danger500" : "danger700";
1850
+ default:
1851
+ return disabled ? "neutral300" : "neutral500";
1852
+ }
1853
+ };
1828
1854
  const MenuRoot = DropdownMenu__namespace.Root;
1829
1855
  const MenuTrigger = React__namespace.forwardRef(
1830
1856
  ({ label, endIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { width: "1.2rem", height: "1.2rem", "aria-hidden": true }), tag = Button, icon, ...rest }, ref) => {
@@ -1864,7 +1890,7 @@ const MenuContent = React__namespace.forwardRef(
1864
1890
  ) }) });
1865
1891
  }
1866
1892
  );
1867
- const Viewport$1 = styledComponents.styled(Flex)`
1893
+ const Viewport$1 = styled.styled(Flex)`
1868
1894
  scrollbar-width: none;
1869
1895
  -ms-overflow-style: none;
1870
1896
  -webkit-overflow-scrolling: touch;
@@ -1874,7 +1900,7 @@ const Viewport$1 = styledComponents.styled(Flex)`
1874
1900
  display: none;
1875
1901
  }
1876
1902
  `;
1877
- const DropdownMenuContent = styledComponents.styled(DropdownMenu__namespace.Content)`
1903
+ const DropdownMenuContent = styled.styled(DropdownMenu__namespace.Content)`
1878
1904
  @media (prefers-reduced-motion: no-preference) {
1879
1905
  animation-duration: ${(props) => props.theme.motion.timings["200"]};
1880
1906
 
@@ -1891,35 +1917,46 @@ const DropdownMenuContent = styledComponents.styled(DropdownMenu__namespace.Cont
1891
1917
  }
1892
1918
  }
1893
1919
  `;
1894
- const MenuItem$1 = ({ onSelect, disabled = false, isLink, startIcon, endIcon, isExternal, ...props }) => {
1920
+ const MenuItem$1 = ({
1921
+ onSelect,
1922
+ disabled = false,
1923
+ isLink,
1924
+ startIcon,
1925
+ endIcon,
1926
+ isExternal,
1927
+ variant: variant2 = "default",
1928
+ ...props
1929
+ }) => {
1895
1930
  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Item, { asChild: true, onSelect, disabled, children: isLink || isExternal ? /* @__PURE__ */ jsxRuntime.jsx(
1896
1931
  OptionLink,
1897
1932
  {
1898
- color: "neutral800",
1933
+ color: getTextColor(variant2, disabled),
1899
1934
  startIcon,
1900
1935
  endIcon,
1901
1936
  ...props,
1902
1937
  isExternal: isExternal ?? false,
1903
- children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { children: props.children })
1938
+ $variant: variant2,
1939
+ children: props.children
1904
1940
  }
1905
1941
  ) : /* @__PURE__ */ jsxRuntime.jsxs(
1906
1942
  OptionButton,
1907
1943
  {
1908
1944
  cursor: "pointer",
1909
- color: "neutral800",
1945
+ color: getTextColor(variant2, disabled),
1910
1946
  background: "transparent",
1911
1947
  borderStyle: "none",
1912
1948
  gap: 2,
1949
+ $variant: variant2,
1913
1950
  ...props,
1914
1951
  children: [
1915
- startIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { tag: "span", "aria-hidden": true, children: startIcon }),
1952
+ startIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { tag: "span", color: getIconColor(variant2, disabled), "aria-hidden": true, children: startIcon }),
1916
1953
  /* @__PURE__ */ jsxRuntime.jsx(Typography, { grow: 1, children: props.children }),
1917
- endIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { tag: "span", "aria-hidden": true, children: endIcon })
1954
+ endIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { tag: "span", color: getIconColor(variant2, disabled), "aria-hidden": true, children: endIcon })
1918
1955
  ]
1919
1956
  }
1920
1957
  ) });
1921
1958
  };
1922
- const getOptionStyle = ({ theme }) => styledComponents.css`
1959
+ const getOptionStyle = ({ theme, $variant }) => styled.css`
1923
1960
  text-align: left;
1924
1961
  width: 100%;
1925
1962
  border-radius: ${theme.borderRadius};
@@ -1927,11 +1964,10 @@ const getOptionStyle = ({ theme }) => styledComponents.css`
1927
1964
 
1928
1965
  &[aria-disabled='true'] {
1929
1966
  cursor: not-allowed;
1930
- color: ${theme.colors.neutral500};
1931
1967
  }
1932
1968
 
1933
1969
  &[data-highlighted] {
1934
- background-color: ${theme.colors.primary100};
1970
+ background-color: ${theme.colors[getBackgroundColorHover($variant)]};
1935
1971
  }
1936
1972
 
1937
1973
  &:focus-visible {
@@ -1942,10 +1978,10 @@ const getOptionStyle = ({ theme }) => styledComponents.css`
1942
1978
  }
1943
1979
  }
1944
1980
  `;
1945
- const OptionButton = styledComponents.styled(Flex)`
1946
- ${getOptionStyle}
1981
+ const OptionButton = styled.styled(Flex)`
1982
+ ${({ theme, $variant }) => getOptionStyle({ theme, $variant })}
1947
1983
  `;
1948
- const OptionLink = styledComponents.styled(Link)`
1984
+ const OptionLink = styled.styled(Link)`
1949
1985
  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
1950
1986
  color: ${({ theme, color }) => extractStyleFromTheme(theme.colors, color, void 0)};
1951
1987
  text-decoration: none;
@@ -1960,9 +1996,9 @@ const OptionLink = styledComponents.styled(Link)`
1960
1996
  fill: currentColor;
1961
1997
  }
1962
1998
 
1963
- ${getOptionStyle}
1999
+ ${({ theme, $variant }) => getOptionStyle({ theme, $variant })}
1964
2000
  `;
1965
- const StyledSeparator = styledComponents.styled(Box)`
2001
+ const StyledSeparator = styled.styled(Box)`
1966
2002
  /* Negative horizontal margin to compensate Menu.Content's padding */
1967
2003
  margin: ${({ theme }) => theme.spaces[1]} -${({ theme }) => theme.spaces[1]};
1968
2004
  width: calc(100% + ${({ theme }) => theme.spaces[2]});
@@ -1973,7 +2009,7 @@ const StyledSeparator = styledComponents.styled(Box)`
1973
2009
  `;
1974
2010
  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 }) }));
1975
2011
  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 }) }));
1976
- const StyledLabel = styledComponents.styled(Typography)`
2012
+ const StyledLabel = styled.styled(Typography)`
1977
2013
  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
1978
2014
  `;
1979
2015
  const MenuSubRoot = DropdownMenu__namespace.Sub;
@@ -1996,7 +2032,7 @@ const MenuSubTrigger = React__namespace.forwardRef(({ disabled = false, ...props
1996
2032
  }
1997
2033
  ) });
1998
2034
  });
1999
- const SubmenuTrigger = styledComponents.styled(OptionButton)`
2035
+ const SubmenuTrigger = styled.styled(OptionButton)`
2000
2036
  &[data-state='open'] {
2001
2037
  background-color: ${({ theme }) => theme.colors.primary100};
2002
2038
  }
@@ -2078,7 +2114,7 @@ const SimpleMenu = React__namespace.forwardRef(
2078
2114
  }
2079
2115
  );
2080
2116
  const MenuItem = Item$3;
2081
- const StyledButton = styledComponents.styled(SimpleMenu)`
2117
+ const StyledButton = styled.styled(SimpleMenu)`
2082
2118
  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
2083
2119
  height: unset;
2084
2120
 
@@ -2117,7 +2153,7 @@ const Card = React__namespace.forwardRef(({ id, ...props }, forwardedRef) => {
2117
2153
  const CardActionImpl = React__namespace.forwardRef(({ position, ...restProps }, forwardedRef) => {
2118
2154
  return /* @__PURE__ */ jsxRuntime.jsx(CardAction, { ref: forwardedRef, $position: position, ...restProps, direction: "row", gap: 2 });
2119
2155
  });
2120
- const CardAction = styledComponents.styled(Flex)`
2156
+ const CardAction = styled.styled(Flex)`
2121
2157
  position: absolute;
2122
2158
  top: ${({ theme }) => theme.spaces[3]};
2123
2159
  right: ${({ $position, theme }) => {
@@ -2136,7 +2172,7 @@ const CardAction = styledComponents.styled(Flex)`
2136
2172
  const CardAsset = ({ size = "M", children, ...props }) => {
2137
2173
  return /* @__PURE__ */ jsxRuntime.jsx(CardAssetWrapper, { $size: size, children: children ? children : /* @__PURE__ */ jsxRuntime.jsx(CardAssetImg, { ...props, "aria-hidden": true }) });
2138
2174
  };
2139
- const CardAssetImg = styledComponents.styled.img`
2175
+ const CardAssetImg = styled.styled.img`
2140
2176
  // inline flows is based on typography and displays an extra white space below the image
2141
2177
  // switch to block is required in order to make the img stick the bottom of the container
2142
2178
  // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
@@ -2146,7 +2182,7 @@ const CardAssetImg = styledComponents.styled.img`
2146
2182
  max-width: 100%;
2147
2183
  object-fit: contain;
2148
2184
  `;
2149
- const CardAssetWrapper = styledComponents.styled.div`
2185
+ const CardAssetWrapper = styled.styled.div`
2150
2186
  display: flex;
2151
2187
  justify-content: center;
2152
2188
  height: ${({ $size }) => $size === "S" ? "8.8rem" : "16.4rem"};
@@ -2156,11 +2192,11 @@ const CardAssetWrapper = styledComponents.styled.div`
2156
2192
  border-top-left-radius: ${({ theme }) => theme.borderRadius};
2157
2193
  border-top-right-radius: ${({ theme }) => theme.borderRadius};
2158
2194
  `;
2159
- const CardBadgeWrapper = styledComponents.styled.div`
2195
+ const CardBadgeWrapper = styled.styled.div`
2160
2196
  margin-left: auto;
2161
2197
  flex-shrink: 0;
2162
2198
  `;
2163
- const BadgePosition = styledComponents.styled(Badge)`
2199
+ const BadgePosition = styled.styled(Badge)`
2164
2200
  margin-left: ${({ theme }) => theme.spaces[1]};
2165
2201
  `;
2166
2202
  const CardBadge = (props) => /* @__PURE__ */ jsxRuntime.jsx(CardBadgeWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(BadgePosition, { ...props }) });
@@ -2168,7 +2204,7 @@ const CardBody = (props) => {
2168
2204
  return /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { ...props, alignItems: "flex-start" }) });
2169
2205
  };
2170
2206
  const CheckIcon = ({ fill, ...props }) => {
2171
- const { colors } = styledComponents.useTheme();
2207
+ const { colors } = styled.useTheme();
2172
2208
  return /* @__PURE__ */ jsxRuntime.jsx(
2173
2209
  Box,
2174
2210
  {
@@ -2196,7 +2232,7 @@ const CheckboxEl = React__namespace.forwardRef(
2196
2232
  ] }) });
2197
2233
  }
2198
2234
  );
2199
- const CheckboxRoot = styledComponents.styled(Checkbox__namespace.Root)`
2235
+ const CheckboxRoot = styled.styled(Checkbox__namespace.Root)`
2200
2236
  background: ${(props) => props.theme.colors.neutral0};
2201
2237
  width: 2rem;
2202
2238
  height: 2rem;
@@ -2210,8 +2246,8 @@ const CheckboxRoot = styledComponents.styled(Checkbox__namespace.Root)`
2210
2246
  // this ensures the checkbox is always a square even in flex-containers.
2211
2247
  flex: 0 0 2rem;
2212
2248
 
2213
- &[data-state='checked'],
2214
- &[data-state='indeterminate'] {
2249
+ &[data-state='checked']:not([data-disabled]),
2250
+ &[data-state='indeterminate']:not([data-disabled]) {
2215
2251
  border: 1px solid ${(props) => props.theme.colors.primary600};
2216
2252
  background-color: ${(props) => props.theme.colors.primary600};
2217
2253
  }
@@ -2234,7 +2270,7 @@ const CheckboxRoot = styledComponents.styled(Checkbox__namespace.Root)`
2234
2270
  min-height: 44px;
2235
2271
  }
2236
2272
  `;
2237
- const CheckboxIndicator = styledComponents.styled(Checkbox__namespace.Indicator)`
2273
+ const CheckboxIndicator = styled.styled(Checkbox__namespace.Indicator)`
2238
2274
  display: inline-flex;
2239
2275
  pointer-events: auto !important;
2240
2276
  width: 100%;
@@ -2261,13 +2297,13 @@ const CardCheckbox = React__namespace.forwardRef((props, forwardedRef) => {
2261
2297
  const { id } = useCard();
2262
2298
  return /* @__PURE__ */ jsxRuntime.jsx(CardActionImpl, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxImpl, { "aria-labelledby": `${id}-title`, ...props, ref: forwardedRef }) });
2263
2299
  });
2264
- const BreakBox = styledComponents.styled(Box)`
2300
+ const BreakBox = styled.styled(Box)`
2265
2301
  word-break: break-all;
2266
2302
  `;
2267
2303
  const CardContent = ({ children, ...props }) => {
2268
2304
  return /* @__PURE__ */ jsxRuntime.jsx(BreakBox, { ...props, children });
2269
2305
  };
2270
- const CardHeaderWrapper = styledComponents.styled(Flex)`
2306
+ const CardHeaderWrapper = styled.styled(Flex)`
2271
2307
  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
2272
2308
  `;
2273
2309
  const CardHeader = (props) => {
@@ -2312,14 +2348,14 @@ const KeyboardKeys = {
2312
2348
  BACKSPACE: "Backspace",
2313
2349
  CLEAR: "Clear"
2314
2350
  };
2315
- const CarouselGrid = styledComponents.styled(Box)`
2351
+ const CarouselGrid = styled.styled(Box)`
2316
2352
  grid-template-columns: auto 1fr auto;
2317
2353
  grid-template-areas: 'startAction slides endAction';
2318
2354
  `;
2319
- const CarouselSlides = styledComponents.styled(Flex)`
2355
+ const CarouselSlides = styled.styled(Flex)`
2320
2356
  grid-area: slides;
2321
2357
  `;
2322
- const CarouselAction = styledComponents.styled(Box)`
2358
+ const CarouselAction = styled.styled(Box)`
2323
2359
  grid-area: ${({ $area }) => $area};
2324
2360
 
2325
2361
  &:focus svg path,
@@ -2593,7 +2629,7 @@ const extendTheme = (theme, overrides) => {
2593
2629
  const getThemeSize = (type) => {
2594
2630
  return ({ theme, size }) => theme.sizes[type][size];
2595
2631
  };
2596
- const inputFocusStyle = (rootElement = "&") => ({ theme, $hasError = false }) => styledComponents.css`
2632
+ const inputFocusStyle = (rootElement = "&") => ({ theme, $hasError = false }) => styled.css`
2597
2633
  outline: none;
2598
2634
  box-shadow: none;
2599
2635
  transition-property: border-color, box-shadow, fill;
@@ -2650,10 +2686,10 @@ const Label = React__namespace.forwardRef(({ children, action, ...props }, ref)
2650
2686
  }
2651
2687
  );
2652
2688
  });
2653
- const TypographyLabel = styledComponents.styled(Typography)`
2689
+ const TypographyLabel = styled.styled(Typography)`
2654
2690
  display: flex;
2655
2691
  `;
2656
- const LabelAction = styledComponents.styled(Flex)`
2692
+ const LabelAction = styled.styled(Flex)`
2657
2693
  line-height: 0;
2658
2694
  color: ${({ theme }) => theme.colors.neutral500};
2659
2695
  `;
@@ -2733,7 +2769,7 @@ const Input$2 = React__namespace.forwardRef(
2733
2769
  );
2734
2770
  }
2735
2771
  );
2736
- const InputElement = styledComponents.styled.input`
2772
+ const InputElement = styled.styled.input`
2737
2773
  border: none;
2738
2774
  border-radius: ${({ theme }) => theme.borderRadius};
2739
2775
  cursor: ${(props) => props["aria-disabled"] ? "not-allowed" : void 0};
@@ -2746,8 +2782,8 @@ const InputElement = styledComponents.styled.input`
2746
2782
  width: 100%;
2747
2783
  background: inherit;
2748
2784
 
2749
- ::placeholder {
2750
- color: ${({ theme }) => theme.colors.neutral500};
2785
+ &::placeholder {
2786
+ color: ${({ theme }) => theme.colors.neutral600};
2751
2787
  opacity: 1;
2752
2788
  }
2753
2789
 
@@ -2764,13 +2800,13 @@ const InputElement = styledComponents.styled.input`
2764
2800
  ${(props) => {
2765
2801
  switch (props.$size) {
2766
2802
  case "S":
2767
- return styledComponents.css`
2803
+ return styled.css`
2768
2804
  padding-inline-start: ${props.$hasLeftAction ? 0 : props.theme.spaces[4]};
2769
2805
  padding-inline-end: ${props.$hasRightAction ? 0 : props.theme.spaces[4]};
2770
2806
  padding-block: ${props.theme.spaces[1]};
2771
2807
  `;
2772
2808
  default:
2773
- return styledComponents.css`
2809
+ return styled.css`
2774
2810
  padding-inline-start: ${props.$hasLeftAction ? 0 : props.theme.spaces[4]};
2775
2811
  padding-inline-end: ${props.$hasRightAction ? 0 : props.theme.spaces[4]};
2776
2812
  padding-block: ${props.theme.spaces[2]};
@@ -2778,13 +2814,13 @@ const InputElement = styledComponents.styled.input`
2778
2814
  }
2779
2815
  }}
2780
2816
  `;
2781
- const EndAction = styledComponents.styled(Flex)`
2817
+ const EndAction = styled.styled(Flex)`
2782
2818
  position: absolute;
2783
2819
  right: ${({ theme }) => theme.spaces[4]};
2784
2820
  top: 50%;
2785
2821
  transform: translateY(-50%);
2786
2822
  `;
2787
- const InputWrapper = styledComponents.styled(Flex)`
2823
+ const InputWrapper = styled.styled(Flex)`
2788
2824
  border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
2789
2825
  border-radius: ${({ theme }) => theme.borderRadius};
2790
2826
  background: ${({ theme }) => theme.colors.neutral0};
@@ -2792,7 +2828,7 @@ const InputWrapper = styledComponents.styled(Flex)`
2792
2828
  position: relative;
2793
2829
 
2794
2830
  ${inputFocusStyle()}
2795
- ${({ theme, $disabled }) => $disabled ? styledComponents.css`
2831
+ ${({ theme, $disabled }) => $disabled ? styled.css`
2796
2832
  color: ${theme.colors.neutral600};
2797
2833
  background: ${theme.colors.neutral150};
2798
2834
  ` : void 0};
@@ -2824,7 +2860,7 @@ const Action$1 = React__namespace.forwardRef(({ label, children, ...props }, ref
2824
2860
  children: /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon, { label, children })
2825
2861
  }
2826
2862
  ));
2827
- const FieldActionWrapper = styledComponents.styled(Flex)`
2863
+ const FieldActionWrapper = styled.styled(Flex)`
2828
2864
  font-size: 1.6rem;
2829
2865
  padding: 0;
2830
2866
  `;
@@ -2894,7 +2930,7 @@ const CarouselActions = ({ horizontal = true, ...props }) => /* @__PURE__ */ jsx
2894
2930
  ...props
2895
2931
  }
2896
2932
  );
2897
- const StyledImage = styledComponents.styled(Box)`
2933
+ const StyledImage = styled.styled(Box)`
2898
2934
  ${ellipsis}
2899
2935
  `;
2900
2936
  const CarouselImage = (props) => {
@@ -2907,7 +2943,7 @@ const CarouselImage = (props) => {
2907
2943
  }
2908
2944
  return /* @__PURE__ */ jsxRuntime.jsx(StyledImage, { tag: "img", height: "100%", maxWidth: "100%", ...props, onError: handleImageError });
2909
2945
  };
2910
- const CarouselSlideFlex = styledComponents.styled(Flex)`
2946
+ const CarouselSlideFlex = styled.styled(Flex)`
2911
2947
  display: ${({ $selected }) => $selected ? "flex" : "none"};
2912
2948
  `;
2913
2949
  const CarouselSlide = ({ label, children, selected = false, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2934,16 +2970,16 @@ const ScrollAreaImpl$1 = React__namespace.forwardRef(
2934
2970
  ] });
2935
2971
  }
2936
2972
  );
2937
- const ScrollAreaRoot = styledComponents.styled(ScrollArea__namespace.Root)`
2973
+ const ScrollAreaRoot = styled.styled(ScrollArea__namespace.Root)`
2938
2974
  width: 100%;
2939
2975
  height: 100%;
2940
2976
  overflow: hidden;
2941
2977
  display: flex;
2942
2978
  `;
2943
- const ScrollAreaViewport = styledComponents.styled(ScrollArea__namespace.Viewport)`
2979
+ const ScrollAreaViewport = styled.styled(ScrollArea__namespace.Viewport)`
2944
2980
  min-width: 100%;
2945
2981
  `;
2946
- const Scrollbar = styledComponents.styled(ScrollArea__namespace.Scrollbar)`
2982
+ const Scrollbar = styled.styled(ScrollArea__namespace.Scrollbar)`
2947
2983
  display: flex;
2948
2984
  /* ensures no selection */
2949
2985
  user-select: none;
@@ -2961,7 +2997,7 @@ const Scrollbar = styledComponents.styled(ScrollArea__namespace.Scrollbar)`
2961
2997
  margin: 0.4rem;
2962
2998
  }
2963
2999
  `;
2964
- const Thumb = styledComponents.styled(ScrollArea__namespace.Thumb)`
3000
+ const Thumb = styled.styled(ScrollArea__namespace.Thumb)`
2965
3001
  position: relative;
2966
3002
  flex: 1;
2967
3003
  background-color: ${(props) => props.theme.colors.neutral150};
@@ -2987,7 +3023,7 @@ const Loader = React__namespace.forwardRef(({ children, small = false, ...props
2987
3023
  /* @__PURE__ */ jsxRuntime.jsx(LoaderImg, { src: loaderSvg, "aria-hidden": true, $small: small })
2988
3024
  ] });
2989
3025
  });
2990
- const rotation$1 = styledComponents.keyframes`
3026
+ const rotation$1 = styled.keyframes`
2991
3027
  from {
2992
3028
  transform: rotate(0deg);
2993
3029
  }
@@ -2995,7 +3031,7 @@ const rotation$1 = styledComponents.keyframes`
2995
3031
  transform: rotate(359deg);
2996
3032
  }
2997
3033
  `;
2998
- const LoaderImg = styledComponents.styled.img`
3034
+ const LoaderImg = styled.styled.img`
2999
3035
  animation: ${rotation$1} 1s infinite linear;
3000
3036
  will-change: transform;
3001
3037
  ${({ $small, theme }) => $small && `width: ${theme.spaces[6]}; height: ${theme.spaces[6]};`}
@@ -3199,7 +3235,7 @@ const Combobox = React__namespace.forwardRef(
3199
3235
  );
3200
3236
  }
3201
3237
  );
3202
- const Trigger$5 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
3238
+ const Trigger$5 = styled.styled(uiPrimitives.Combobox.Trigger)`
3203
3239
  position: relative;
3204
3240
  border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
3205
3241
  border-radius: ${({ theme }) => theme.borderRadius};
@@ -3213,13 +3249,13 @@ const Trigger$5 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
3213
3249
  ${(props) => {
3214
3250
  switch (props.$size) {
3215
3251
  case "S":
3216
- return styledComponents.css`
3252
+ return styled.css`
3217
3253
  padding-inline-start: ${({ theme }) => theme.spaces[4]};
3218
3254
  padding-inline-end: ${({ theme }) => theme.spaces[3]};
3219
3255
  padding-block: ${({ theme }) => theme.spaces[1]};
3220
3256
  `;
3221
3257
  default:
3222
- return styledComponents.css`
3258
+ return styled.css`
3223
3259
  padding-inline-start: ${({ theme }) => theme.spaces[4]};
3224
3260
  padding-inline-end: ${({ theme }) => theme.spaces[3]};
3225
3261
  padding-block: ${({ theme }) => theme.spaces[2]};
@@ -3240,7 +3276,7 @@ const Trigger$5 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
3240
3276
 
3241
3277
  ${({ theme, $hasError }) => inputFocusStyle()({ theme, $hasError })};
3242
3278
  `;
3243
- const TextInput$1 = styledComponents.styled(uiPrimitives.Combobox.TextInput)`
3279
+ const TextInput$1 = styled.styled(uiPrimitives.Combobox.TextInput)`
3244
3280
  width: 100%;
3245
3281
  font-size: 1.4rem;
3246
3282
  line-height: 2.2rem;
@@ -3253,11 +3289,16 @@ const TextInput$1 = styledComponents.styled(uiPrimitives.Combobox.TextInput)`
3253
3289
  outline: none;
3254
3290
  }
3255
3291
 
3292
+ &::placeholder {
3293
+ color: ${({ theme }) => theme.colors.neutral600};
3294
+ opacity: 1;
3295
+ }
3296
+
3256
3297
  &[aria-disabled='true'] {
3257
3298
  cursor: inherit;
3258
3299
  }
3259
3300
  `;
3260
- const DownIcon$1 = styledComponents.styled(uiPrimitives.Combobox.Icon)`
3301
+ const DownIcon$1 = styled.styled(uiPrimitives.Combobox.Icon)`
3261
3302
  border: none;
3262
3303
  background: transparent;
3263
3304
  padding: 0;
@@ -3268,7 +3309,7 @@ const DownIcon$1 = styledComponents.styled(uiPrimitives.Combobox.Icon)`
3268
3309
  cursor: inherit;
3269
3310
  }
3270
3311
  `;
3271
- const Content$5 = styledComponents.styled(uiPrimitives.Combobox.Content)`
3312
+ const Content$5 = styled.styled(uiPrimitives.Combobox.Content)`
3272
3313
  background: ${({ theme }) => theme.colors.neutral0};
3273
3314
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
3274
3315
  border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -3300,7 +3341,7 @@ const Content$5 = styledComponents.styled(uiPrimitives.Combobox.Content)`
3300
3341
  }
3301
3342
  }
3302
3343
  `;
3303
- const ComboboxCreateItem = styledComponents.styled(uiPrimitives.Combobox.CreateItem)`
3344
+ const ComboboxCreateItem = styled.styled(uiPrimitives.Combobox.CreateItem)`
3304
3345
  && {
3305
3346
  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
3306
3347
  background: ${({ theme }) => theme.colors.neutral0};
@@ -3336,7 +3377,7 @@ const ComboboxCreateItem = styledComponents.styled(uiPrimitives.Combobox.CreateI
3336
3377
  background: ${({ theme }) => theme.colors.neutral150};
3337
3378
  }
3338
3379
  `;
3339
- const ScrollAreaCombobox = styledComponents.styled(ScrollAreaImpl$1)`
3380
+ const ScrollAreaCombobox = styled.styled(ScrollAreaImpl$1)`
3340
3381
  padding: ${({ theme }) => theme.spaces[1]};
3341
3382
  `;
3342
3383
  const Option = React__namespace.forwardRef(
@@ -3344,7 +3385,7 @@ const Option = React__namespace.forwardRef(
3344
3385
  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 }) }) }) });
3345
3386
  }
3346
3387
  );
3347
- const OptionBox = styledComponents.styled.div`
3388
+ const OptionBox = styled.styled.div`
3348
3389
  width: 100%;
3349
3390
  border: none;
3350
3391
  text-align: left;
@@ -3371,29 +3412,27 @@ const OptionBox = styledComponents.styled.div`
3371
3412
  font-weight: bold;
3372
3413
  }
3373
3414
  `;
3415
+ const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
3374
3416
  const Root$5 = AlertDialog__namespace.Root;
3375
3417
  const Trigger$4 = React__namespace.forwardRef((props, forwardedRef) => {
3376
3418
  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog__namespace.Trigger, { ...props, asChild: true, ref: forwardedRef });
3377
3419
  });
3378
3420
  const Content$4 = React__namespace.forwardRef((props, forwardedRef) => {
3379
- return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog__namespace.Portal, { children: [
3380
- /* @__PURE__ */ jsxRuntime.jsx(Overlay$1, {}),
3381
- /* @__PURE__ */ jsxRuntime.jsx(ContentImpl$1, { ref: forwardedRef, ...props })
3382
- ] });
3421
+ return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Overlay$1, { children: /* @__PURE__ */ jsxRuntime.jsx(ContentImpl$1, { ref: forwardedRef, ...props }) }) });
3383
3422
  });
3384
- const Overlay$1 = styledComponents.styled(AlertDialog__namespace.Overlay)`
3385
- background-color: ${(props) => props.theme.colors.neutral800};
3423
+ const Overlay$1 = styled.styled(AlertDialog__namespace.Overlay)`
3424
+ background: ${(props) => setOpacity(props.theme.colors.neutral800, 0.2)};
3386
3425
  position: fixed;
3387
3426
  inset: 0;
3388
3427
  z-index: ${(props) => props.theme.zIndices.overlay};
3389
- opacity: 0.2;
3428
+ will-change: opacity;
3390
3429
 
3391
3430
  @media (prefers-reduced-motion: no-preference) {
3392
3431
  animation: ${ANIMATIONS.overlayFadeIn} ${(props) => props.theme.motion.timings["200"]}
3393
3432
  ${(props) => props.theme.motion.easings.authenticMotion};
3394
3433
  }
3395
3434
  `;
3396
- const ContentImpl$1 = styledComponents.styled(AlertDialog__namespace.Content)`
3435
+ const ContentImpl$1 = styled.styled(AlertDialog__namespace.Content)`
3397
3436
  max-width: 42rem;
3398
3437
  height: min-content;
3399
3438
  width: 100%;
@@ -3429,7 +3468,7 @@ const ContentImpl$1 = styledComponents.styled(AlertDialog__namespace.Content)`
3429
3468
  const Header$1 = React__namespace.forwardRef(({ children, ...restProps }, forwardedRef) => {
3430
3469
  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 }) });
3431
3470
  });
3432
- const Title$1 = styledComponents.styled(Typography)`
3471
+ const Title$1 = styled.styled(Typography)`
3433
3472
  display: flex;
3434
3473
  justify-content: center;
3435
3474
  border-bottom: solid 1px ${(props) => props.theme.colors.neutral150};
@@ -3462,7 +3501,7 @@ const Description = React__namespace.forwardRef((props, forwardedRef) => {
3462
3501
  const Footer$1 = React__namespace.forwardRef((props, forwardedRef) => {
3463
3502
  return /* @__PURE__ */ jsxRuntime.jsx(Foot$1, { ref: forwardedRef, gap: 2, padding: 4, justifyContent: "space-between", ...props, tag: "footer" });
3464
3503
  });
3465
- const Foot$1 = styledComponents.styled(Flex)`
3504
+ const Foot$1 = styled.styled(Flex)`
3466
3505
  border-top: solid 1px ${(props) => props.theme.colors.neutral150};
3467
3506
  flex: 1;
3468
3507
  `;
@@ -3548,8 +3587,8 @@ const LiveRegions = () => {
3548
3587
  /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", "aria-live": "assertive", id: LiveRegionIds.Alert, "aria-relevant": "all" })
3549
3588
  ] });
3550
3589
  };
3551
- const GlobalStyle = styledComponents.createGlobalStyle`
3552
- ${styledComponents.css`
3590
+ const GlobalStyle = styled.createGlobalStyle`
3591
+ ${styled.css`
3553
3592
  *,
3554
3593
  *::before,
3555
3594
  *::after {
@@ -3686,7 +3725,7 @@ const DesignSystemProvider = ({
3686
3725
  window.getComputedStyle(css).opacity;
3687
3726
  document.head.removeChild(css);
3688
3727
  }, [theme]);
3689
- return /* @__PURE__ */ jsxRuntime.jsx(Provider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(styledComponents.ThemeProvider, { theme, children: [
3728
+ return /* @__PURE__ */ jsxRuntime.jsx(Provider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(styled.ThemeProvider, { theme, children: [
3690
3729
  /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Provider, { ...tooltipConfig, children }),
3691
3730
  /* @__PURE__ */ jsxRuntime.jsx(LiveRegions, {}),
3692
3731
  /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {})
@@ -3735,18 +3774,14 @@ const SelectTrigger = React__namespace.forwardRef(
3735
3774
  ] }),
3736
3775
  /* @__PURE__ */ jsxRuntime.jsxs(Flex, { tag: "span", gap: 3, children: [
3737
3776
  onClear ? /* @__PURE__ */ jsxRuntime.jsx(
3738
- IconBox$1,
3777
+ IconButton,
3739
3778
  {
3740
- tag: "button",
3741
- hasRadius: true,
3742
- background: "transparent",
3743
- role: "button",
3744
- tabIndex: 0,
3779
+ size: "XS",
3780
+ variant: "ghost",
3745
3781
  onClick: handleClearClick,
3746
3782
  "aria-disabled": disabled,
3747
3783
  "aria-label": clearLabel,
3748
- title: clearLabel,
3749
- cursor: "pointer",
3784
+ label: clearLabel,
3750
3785
  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
3751
3786
  }
3752
3787
  ) : null,
@@ -3757,31 +3792,18 @@ const SelectTrigger = React__namespace.forwardRef(
3757
3792
  ) });
3758
3793
  }
3759
3794
  );
3760
- const IconBox$1 = styledComponents.styled(Box)`
3761
- border: none;
3762
- display: flex;
3763
-
3764
- svg {
3765
- height: 1.1rem;
3766
- width: 1.1rem;
3767
- }
3768
-
3769
- svg path {
3770
- fill: ${({ theme }) => theme.colors.neutral500};
3771
- }
3772
- `;
3773
- const StyledTrigger = styledComponents.styled(Flex)`
3795
+ const StyledTrigger = styled.styled(Flex)`
3774
3796
  border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
3775
3797
  ${(props) => {
3776
3798
  switch (props.$size) {
3777
3799
  case "S":
3778
- return styledComponents.css`
3800
+ return styled.css`
3779
3801
  padding-block: ${props.theme.spaces[1]};
3780
3802
  padding-inline-start: ${props.$withTags ? props.theme.spaces[1] : props.theme.spaces[4]};
3781
3803
  padding-inline-end: ${props.theme.spaces[3]};
3782
3804
  `;
3783
3805
  default:
3784
- return styledComponents.css`
3806
+ return styled.css`
3785
3807
  padding-block: ${props.$withTags ? "0.3rem" : props.theme.spaces[2]};
3786
3808
  padding-inline-start: ${props.$withTags ? props.theme.spaces[1] : props.theme.spaces[4]};
3787
3809
  padding-inline-end: ${props.theme.spaces[3]};
@@ -3801,19 +3823,20 @@ const StyledTrigger = styledComponents.styled(Flex)`
3801
3823
 
3802
3824
  ${({ theme, $hasError }) => inputFocusStyle()({ theme, $hasError })};
3803
3825
  `;
3804
- const DownIcon = styledComponents.styled(uiPrimitives.Select.Icon)`
3826
+ const DownIcon = styled.styled(uiPrimitives.Select.Icon)`
3805
3827
  display: flex;
3806
3828
  & > svg {
3807
3829
  fill: ${({ theme }) => theme.colors.neutral500};
3808
3830
  }
3809
3831
  `;
3810
3832
  const SelectValue = React__namespace.forwardRef(({ children, placeholder, ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ValueType, { ref, ellipsis: true, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { placeholder, children }) }));
3811
- const ValueType = styledComponents.styled(Typography)`
3833
+ const ValueType = styled.styled(Typography)`
3812
3834
  flex: 1;
3813
3835
  font-size: 1.4rem;
3814
3836
  line-height: 2.2rem;
3837
+ min-height: 2.2rem;
3815
3838
  `;
3816
- const StyledValue = styledComponents.styled(uiPrimitives.Select.Value)`
3839
+ const StyledValue = styled.styled(uiPrimitives.Select.Value)`
3817
3840
  display: flex;
3818
3841
  gap: ${({ theme }) => theme.spaces[1]};
3819
3842
  flex-wrap: wrap;
@@ -3821,7 +3844,7 @@ const StyledValue = styledComponents.styled(uiPrimitives.Select.Value)`
3821
3844
  const SelectContent = React__namespace.forwardRef((props, ref) => {
3822
3845
  return /* @__PURE__ */ jsxRuntime.jsx(StyledContent, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaImpl$1, { children: props.children }) });
3823
3846
  });
3824
- const StyledContent = styledComponents.styled(uiPrimitives.Select.Content)`
3847
+ const StyledContent = styled.styled(uiPrimitives.Select.Content)`
3825
3848
  background: ${({ theme }) => theme.colors.neutral0};
3826
3849
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
3827
3850
  border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -3847,11 +3870,11 @@ const StyledContent = styledComponents.styled(uiPrimitives.Select.Content)`
3847
3870
  }
3848
3871
  }
3849
3872
  `;
3850
- const SelectViewport = styledComponents.styled(uiPrimitives.Select.Viewport)`
3873
+ const SelectViewport = styled.styled(uiPrimitives.Select.Viewport)`
3851
3874
  padding: ${({ theme }) => theme.spaces[1]};
3852
3875
  `;
3853
3876
  const SelectItem = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledSelectItem, { ref, ...props }));
3854
- const itemStyles = styledComponents.css`
3877
+ const itemStyles = styled.css`
3855
3878
  width: 100%;
3856
3879
  border: none;
3857
3880
  text-align: left;
@@ -3873,19 +3896,13 @@ const itemStyles = styledComponents.css`
3873
3896
  cursor: pointer;
3874
3897
  }
3875
3898
  `;
3876
- const StyledSelectItem = styledComponents.styled(uiPrimitives.Select.Item)`
3899
+ const StyledSelectItem = styled.styled(uiPrimitives.Select.Item)`
3877
3900
  ${itemStyles}
3878
3901
 
3879
3902
  &:hover {
3880
3903
  background-color: ${({ theme }) => theme.colors.primary100};
3881
3904
  cursor: pointer;
3882
3905
  }
3883
-
3884
- &[data-state='checked'] {
3885
- font-weight: bold;
3886
- color: ${({ theme }) => theme.colors.primary600};
3887
- font-weight: bold;
3888
- }
3889
3906
  `;
3890
3907
  const Root$4 = uiPrimitives.Select.Root;
3891
3908
  const Trigger$3 = SelectTrigger;
@@ -4012,7 +4029,7 @@ const SingleSelectOption = React__namespace.forwardRef(
4012
4029
  const DEFAULT_PAST_RANGE = 200;
4013
4030
  const DEFAULT_FUTURE_RANGE = 15;
4014
4031
  const [DatePickerProvider, useDatePickerContext] = createContext("DatePicker");
4015
- const DatePicker$1 = React__namespace.forwardRef(
4032
+ const DatePicker = React__namespace.forwardRef(
4016
4033
  ({
4017
4034
  /**
4018
4035
  * DatePickerCalendar props
@@ -4141,6 +4158,7 @@ const DatePicker$1 = React__namespace.forwardRef(
4141
4158
  onTextValueChange: setTextValue,
4142
4159
  onTriggerChange: setTrigger,
4143
4160
  onValueChange: setValue,
4161
+ onClear,
4144
4162
  required,
4145
4163
  textInput,
4146
4164
  textValue,
@@ -4218,6 +4236,7 @@ const DatePickerTrigger = React__namespace.forwardRef(
4218
4236
  ref: composedRefs,
4219
4237
  $hasError: hasError,
4220
4238
  $size: size,
4239
+ $hasOnClear: Boolean(context.onClear),
4221
4240
  ...restProps,
4222
4241
  hasRadius: true,
4223
4242
  gap: 3,
@@ -4246,17 +4265,18 @@ const DatePickerTrigger = React__namespace.forwardRef(
4246
4265
  );
4247
4266
  }
4248
4267
  );
4249
- const TriggerElement = styledComponents.styled(Flex)`
4268
+ const TriggerElement = styled.styled(Flex)`
4269
+ min-width: ${({ $hasOnClear }) => $hasOnClear ? "160px" : "130px"};
4250
4270
  border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
4251
4271
  ${(props) => {
4252
4272
  switch (props.$size) {
4253
4273
  case "S":
4254
- return styledComponents.css`
4274
+ return styled.css`
4255
4275
  padding-block: ${props.theme.spaces[1]};
4256
4276
  padding-inline: ${props.theme.spaces[3]};
4257
4277
  `;
4258
4278
  default:
4259
- return styledComponents.css`
4279
+ return styled.css`
4260
4280
  padding-block: ${props.theme.spaces[2]};
4261
4281
  padding-inline: ${props.theme.spaces[3]};
4262
4282
  `;
@@ -4459,7 +4479,7 @@ function constrainValue(date$1, minValue, maxValue) {
4459
4479
  }
4460
4480
  return date$1;
4461
4481
  }
4462
- const Input$1 = styledComponents.styled.input`
4482
+ const Input$1 = styled.styled.input`
4463
4483
  width: 100%;
4464
4484
  font-size: 1.4rem;
4465
4485
  line-height: 2.2rem;
@@ -4471,6 +4491,11 @@ const Input$1 = styledComponents.styled.input`
4471
4491
  outline: none;
4472
4492
  }
4473
4493
 
4494
+ &::placeholder {
4495
+ color: ${({ theme }) => theme.colors.neutral600};
4496
+ opacity: 1;
4497
+ }
4498
+
4474
4499
  &[aria-disabled='true'] {
4475
4500
  cursor: inherit;
4476
4501
  }
@@ -4561,7 +4586,7 @@ const DatePickerContentImpl = React__namespace.forwardRef(
4561
4586
  ) });
4562
4587
  }
4563
4588
  );
4564
- const ContentElement = styledComponents.styled(Box)`
4589
+ const ContentElement = styled.styled(Box)`
4565
4590
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
4566
4591
  z-index: ${({ theme }) => theme.zIndices.popover};
4567
4592
  border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -4675,7 +4700,7 @@ const makeGetDatesInWeek = (from, locale) => (weekIndex) => {
4675
4700
  }
4676
4701
  return dates;
4677
4702
  };
4678
- const ToolbarFlex = styledComponents.styled(Flex)`
4703
+ const ToolbarFlex = styled.styled(Flex)`
4679
4704
  div[role='combobox'] {
4680
4705
  border: 1px solid transparent;
4681
4706
  background: transparent;
@@ -4695,7 +4720,7 @@ const DatePickerHeaderCell = React__namespace.forwardRef(
4695
4720
  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) }) });
4696
4721
  }
4697
4722
  );
4698
- const Th$1 = styledComponents.styled(Box)`
4723
+ const Th$1 = styled.styled(Box)`
4699
4724
  border-radius: ${({ theme }) => theme.borderRadius};
4700
4725
  text-transform: capitalize;
4701
4726
  `;
@@ -4758,7 +4783,7 @@ const DatePickerCalendarCell = React__namespace.forwardRef(
4758
4783
  );
4759
4784
  }
4760
4785
  );
4761
- const Cell = styledComponents.styled(Box)`
4786
+ const Cell = styled.styled(Box)`
4762
4787
  text-align: center;
4763
4788
  padding: 0.7rem;
4764
4789
  // Trick to prevent the outline from overflowing because of the general outline-offset
@@ -4786,7 +4811,10 @@ const isNotAlphabeticalCharacter = (str) => {
4786
4811
  function escapeForRegex(str = "") {
4787
4812
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
4788
4813
  }
4789
- const TimePicker$1 = React__namespace.forwardRef(
4814
+ const TimePickerCombobox = styled__default.default(Combobox)`
4815
+ min-width: ${({ onClear }) => onClear ? "160px" : "130px"};
4816
+ `;
4817
+ const TimePicker = React__namespace.forwardRef(
4790
4818
  ({ step = 15, value: valueProp, defaultValue, onChange, ...restProps }, forwardedRef) => {
4791
4819
  const context = useDesignSystem("TimePicker");
4792
4820
  const [textValue, setTextValue] = React__namespace.useState("");
@@ -4852,7 +4880,7 @@ const TimePicker$1 = React__namespace.forwardRef(
4852
4880
  const escapedSeparator = escapeForRegex(separator);
4853
4881
  const pattern = `\\d{2}${escapedSeparator}\\d{2}`;
4854
4882
  return /* @__PURE__ */ jsxRuntime.jsx(
4855
- Combobox,
4883
+ TimePickerCombobox,
4856
4884
  {
4857
4885
  ...restProps,
4858
4886
  ref: forwardedRef,
@@ -4873,14 +4901,6 @@ const TimePicker$1 = React__namespace.forwardRef(
4873
4901
  );
4874
4902
  }
4875
4903
  );
4876
- const DatePicker = styledComponents.styled(DatePicker$1)`
4877
- flex: 1 1 70%;
4878
- min-width: 120px;
4879
- `;
4880
- const TimePicker = styledComponents.styled(TimePicker$1)`
4881
- flex: 1 1 30%;
4882
- min-width: 140px;
4883
- `;
4884
4904
  const DateTimePicker = React__namespace.forwardRef(
4885
4905
  ({
4886
4906
  clearLabel = "clear",
@@ -4949,8 +4969,8 @@ const DateTimePicker = React__namespace.forwardRef(
4949
4969
  const composedRefs = useComposedRefs(DatePickerElement2, forwardedRef);
4950
4970
  const { error, id, labelNode } = useField("DateTimePicker");
4951
4971
  const hasError = Boolean(error) || hasErrorProp;
4952
- return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { "aria-labelledby": labelNode ? `${id}-label` : void 0, role: "group", flex: "1", gap: 1, children: [
4953
- /* @__PURE__ */ jsxRuntime.jsx(Root$6, { children: /* @__PURE__ */ jsxRuntime.jsx(
4972
+ return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { "aria-labelledby": labelNode ? `${id}-label` : void 0, role: "group", flex: "1", gap: 1, wrap: "wrap", children: [
4973
+ /* @__PURE__ */ jsxRuntime.jsx(Root$6, { flex: "1", children: /* @__PURE__ */ jsxRuntime.jsx(
4954
4974
  DatePicker,
4955
4975
  {
4956
4976
  ...props,
@@ -4965,7 +4985,7 @@ const DateTimePicker = React__namespace.forwardRef(
4965
4985
  "aria-label": dateLabel
4966
4986
  }
4967
4987
  ) }),
4968
- /* @__PURE__ */ jsxRuntime.jsx(Root$6, { children: /* @__PURE__ */ jsxRuntime.jsx(
4988
+ /* @__PURE__ */ jsxRuntime.jsx(Root$6, { flex: "1", children: /* @__PURE__ */ jsxRuntime.jsx(
4969
4989
  TimePicker,
4970
4990
  {
4971
4991
  size,
@@ -5004,13 +5024,13 @@ const Divider = React__namespace.forwardRef((props, forwardedRef) => {
5004
5024
  }
5005
5025
  );
5006
5026
  });
5007
- const DividerImpl = styledComponents.styled(Box)`
5027
+ const DividerImpl = styled.styled(Box)`
5008
5028
  height: 1px;
5009
5029
  border: none;
5010
5030
  /* If contained in a Flex parent we want to prevent the Divider to shink */
5011
5031
  flex-shrink: 0;
5012
5032
  `;
5013
- const EmptyStateIconWrapper = styledComponents.styled(Box)`
5033
+ const EmptyStateIconWrapper = styled.styled(Box)`
5014
5034
  svg {
5015
5035
  height: 8.8rem;
5016
5036
  }
@@ -5180,7 +5200,7 @@ const JSONInput = React__namespace.forwardRef(
5180
5200
  );
5181
5201
  }
5182
5202
  );
5183
- const JSONInputContainer = styledComponents.styled(Flex)`
5203
+ const JSONInputContainer = styled.styled(Flex)`
5184
5204
  line-height: ${({ theme }) => theme.lineHeights[2]};
5185
5205
 
5186
5206
  .cm-editor {
@@ -5228,7 +5248,7 @@ const LinkButton = forwardRef(
5228
5248
  );
5229
5249
  }
5230
5250
  );
5231
- const MainWrapper = styledComponents.styled(Box)`
5251
+ const MainWrapper = styled.styled(Box)`
5232
5252
  // To prevent global outline on focus visible to force an outline when Main is focused
5233
5253
  &:focus-visible {
5234
5254
  outline: none;
@@ -5237,7 +5257,7 @@ const MainWrapper = styledComponents.styled(Box)`
5237
5257
  const Main = ({ labelledBy = "main-content-title", ...props }) => {
5238
5258
  return /* @__PURE__ */ jsxRuntime.jsx(MainWrapper, { "aria-labelledby": labelledBy, tag: "main", id: "main-content", tabIndex: -1, ...props });
5239
5259
  };
5240
- const AnchorBox = styledComponents.styled(Box)`
5260
+ const AnchorBox = styled.styled(Box)`
5241
5261
  text-decoration: none;
5242
5262
 
5243
5263
  &:focus {
@@ -5268,17 +5288,13 @@ const Trigger$2 = React__namespace.forwardRef((props, forwardedRef) => {
5268
5288
  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Trigger, { ...props, asChild: true, ref: forwardedRef });
5269
5289
  });
5270
5290
  const Content$2 = React__namespace.forwardRef((props, forwardedRef) => {
5271
- return /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
5272
- /* @__PURE__ */ jsxRuntime.jsx(Overlay, {}),
5273
- /* @__PURE__ */ jsxRuntime.jsx(ContentImpl, { ref: forwardedRef, ...props })
5274
- ] });
5291
+ return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Overlay, { children: /* @__PURE__ */ jsxRuntime.jsx(ContentImpl, { ref: forwardedRef, ...props }) }) });
5275
5292
  });
5276
- const Overlay = styledComponents.styled(Dialog__namespace.Overlay)`
5277
- background-color: ${(props) => props.theme.colors.neutral800};
5293
+ const Overlay = styled.styled(Dialog__namespace.Overlay)`
5294
+ background: ${(props) => setOpacity(props.theme.colors.neutral800, 0.2)};
5278
5295
  position: fixed;
5279
5296
  inset: 0;
5280
5297
  z-index: ${(props) => props.theme.zIndices.overlay};
5281
- opacity: 0.2;
5282
5298
  will-change: opacity;
5283
5299
 
5284
5300
  @media (prefers-reduced-motion: no-preference) {
@@ -5286,7 +5302,7 @@ const Overlay = styledComponents.styled(Dialog__namespace.Overlay)`
5286
5302
  ${(props) => props.theme.motion.easings.authenticMotion};
5287
5303
  }
5288
5304
  `;
5289
- const ContentImpl = styledComponents.styled(Dialog__namespace.Content)`
5305
+ const ContentImpl = styled.styled(Dialog__namespace.Content)`
5290
5306
  max-width: 83rem;
5291
5307
  max-height: 90vh;
5292
5308
  height: auto;
@@ -5306,6 +5322,11 @@ const ContentImpl = styledComponents.styled(Dialog__namespace.Content)`
5306
5322
  box-shadow: ${(props) => props.theme.shadows.popupShadow};
5307
5323
  z-index: ${(props) => props.theme.zIndices.modal};
5308
5324
 
5325
+ > form {
5326
+ display: flex;
5327
+ flex-direction: column;
5328
+ overflow: hidden;
5329
+ }
5309
5330
  @media (prefers-reduced-motion: no-preference) {
5310
5331
  &[data-state='open'] {
5311
5332
  animation-duration: ${(props) => props.theme.motion.timings["200"]};
@@ -5344,7 +5365,7 @@ const Header = React__namespace.forwardRef(
5344
5365
  );
5345
5366
  }
5346
5367
  );
5347
- const Head = styledComponents.styled(Flex)`
5368
+ const Head = styled.styled(Flex)`
5348
5369
  border-bottom: solid 1px ${(props) => props.theme.colors.neutral150};
5349
5370
  `;
5350
5371
  const Title = React__namespace.forwardRef((props, forwardedRef) => {
@@ -5353,8 +5374,8 @@ const Title = React__namespace.forwardRef((props, forwardedRef) => {
5353
5374
  const Body = React__namespace.forwardRef(({ children, ...restProps }, forwardedRef) => {
5354
5375
  return /* @__PURE__ */ jsxRuntime.jsx(BodyScroll, { ref: forwardedRef, ...restProps, children });
5355
5376
  });
5356
- const BodyScroll = styledComponents.styled(ScrollAreaImpl$1)`
5357
- padding-inline: ${(props) => props.theme.spaces[8]};
5377
+ const BodyScroll = styled.styled(ScrollAreaImpl$1)`
5378
+ padding-inline: ${(props) => props.theme.spaces[7]};
5358
5379
 
5359
5380
  & > div {
5360
5381
  padding-block: ${(props) => props.theme.spaces[8]};
@@ -5384,7 +5405,7 @@ const Footer = React__namespace.forwardRef((props, forwardedRef) => {
5384
5405
  }
5385
5406
  );
5386
5407
  });
5387
- const Foot = styledComponents.styled(Flex)`
5408
+ const Foot = styled.styled(Flex)`
5388
5409
  border-top: solid 1px ${(props) => props.theme.colors.neutral150};
5389
5410
  flex: 1;
5390
5411
  `;
@@ -5519,7 +5540,7 @@ const NumberInput = React__namespace.forwardRef(
5519
5540
  );
5520
5541
  }
5521
5542
  );
5522
- const ArrowButton = styledComponents.styled.button`
5543
+ const ArrowButton = styled.styled.button`
5523
5544
  display: flex;
5524
5545
  justify-content: center;
5525
5546
  align-items: center;
@@ -5591,7 +5612,7 @@ const NextLink = forwardRef(
5591
5612
  ] });
5592
5613
  }
5593
5614
  );
5594
- const LinkWrapper = styledComponents.styled(BaseLinkImpl)`
5615
+ const LinkWrapper = styled.styled(BaseLinkImpl)`
5595
5616
  padding: ${({ theme }) => theme.spaces[3]};
5596
5617
  border-radius: ${({ theme }) => theme.borderRadius};
5597
5618
  box-shadow: ${({ $active, theme }) => $active ? theme.shadows.filterShadow : void 0};
@@ -5600,7 +5621,7 @@ const LinkWrapper = styledComponents.styled(BaseLinkImpl)`
5600
5621
 
5601
5622
  ${focus}
5602
5623
  `;
5603
- const ActionLinkWrapper = styledComponents.styled(LinkWrapper)`
5624
+ const ActionLinkWrapper = styled.styled(LinkWrapper)`
5604
5625
  font-size: 1.1rem;
5605
5626
 
5606
5627
  svg path {
@@ -5628,7 +5649,7 @@ const PageLink = forwardRef(
5628
5649
  ] });
5629
5650
  }
5630
5651
  );
5631
- const PageLinkWrapper = styledComponents.styled(LinkWrapper)`
5652
+ const PageLinkWrapper = styled.styled(LinkWrapper)`
5632
5653
  color: ${({ theme, $active }) => $active ? theme.colors.primary700 : theme.colors.neutral800};
5633
5654
  background: ${({ theme, $active }) => $active ? theme.colors.neutral0 : void 0};
5634
5655
 
@@ -5647,7 +5668,7 @@ const Trigger$1 = React__namespace.forwardRef((props, forwardedRef) => {
5647
5668
  const Content$1 = React__namespace.forwardRef((props, forwardedRef) => {
5648
5669
  return /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { sideOffset: 4, side: "bottom", align: "start", ...props, ref: forwardedRef }) });
5649
5670
  });
5650
- const PopoverContent = styledComponents.styled(Popover__namespace.Content)`
5671
+ const PopoverContent = styled.styled(Popover__namespace.Content)`
5651
5672
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
5652
5673
  z-index: ${({ theme }) => theme.zIndices.popover};
5653
5674
  background-color: ${(props) => props.theme.colors.neutral0};
@@ -5698,7 +5719,7 @@ const ScrollAreaImpl = React__namespace.forwardRef(
5698
5719
  ] });
5699
5720
  }
5700
5721
  );
5701
- const PopoverScrollArea = styledComponents.styled(ScrollAreaImpl$1)`
5722
+ const PopoverScrollArea = styled.styled(ScrollAreaImpl$1)`
5702
5723
  height: 20rem;
5703
5724
  `;
5704
5725
  const Popover = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -5713,7 +5734,7 @@ const ProgressBar = React__namespace.forwardRef(
5713
5734
  return /* @__PURE__ */ jsxRuntime.jsx(ProgressRoot, { ref: forwardedRef, $size: size, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { style: { transform: `translate3D(-${100 - (value ?? 0)}%, 0, 0)` } }) });
5714
5735
  }
5715
5736
  );
5716
- const ProgressRoot = styledComponents.styled(Progress__namespace.Root)`
5737
+ const ProgressRoot = styled.styled(Progress__namespace.Root)`
5717
5738
  position: relative;
5718
5739
  overflow: hidden;
5719
5740
  width: ${(props) => props.$size === "S" ? "7.8rem" : "10.2rem"};
@@ -5725,7 +5746,7 @@ const ProgressRoot = styledComponents.styled(Progress__namespace.Root)`
5725
5746
  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
5726
5747
  transform: translateZ(0);
5727
5748
  `;
5728
- const ProgressIndicator = styledComponents.styled(Progress__namespace.Indicator)`
5749
+ const ProgressIndicator = styled.styled(Progress__namespace.Indicator)`
5729
5750
  background-color: ${({ theme }) => theme.colors.neutral0};
5730
5751
  border-radius: ${({ theme }) => theme.borderRadius};
5731
5752
  width: 100%;
@@ -5739,7 +5760,7 @@ const ProgressIndicator = styledComponents.styled(Progress__namespace.Indicator)
5739
5760
  const Group = React__namespace.forwardRef((props, forwardedRef) => {
5740
5761
  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupRoot, { ref: forwardedRef, ...props });
5741
5762
  });
5742
- const RadioGroupRoot = styledComponents.styled(RadioGroup__namespace.Root)`
5763
+ const RadioGroupRoot = styled.styled(RadioGroup__namespace.Root)`
5743
5764
  display: flex;
5744
5765
  flex-direction: column;
5745
5766
  gap: ${(props) => props.theme.spaces[3]};
@@ -5751,7 +5772,7 @@ const Item$1 = React__namespace.forwardRef(({ children, id: idProp, ...restProps
5751
5772
  /* @__PURE__ */ jsxRuntime.jsx(Typography, { tag: "label", htmlFor: id, children })
5752
5773
  ] });
5753
5774
  });
5754
- const RadioGroupItem = styledComponents.styled(RadioGroup__namespace.Item)`
5775
+ const RadioGroupItem = styled.styled(RadioGroup__namespace.Item)`
5755
5776
  background: ${(props) => props.theme.colors.neutral0};
5756
5777
  width: 2rem;
5757
5778
  height: 2rem;
@@ -5789,7 +5810,7 @@ const RadioGroupItem = styledComponents.styled(RadioGroup__namespace.Item)`
5789
5810
  min-height: 44px;
5790
5811
  }
5791
5812
  `;
5792
- const RadioGroupIndicator = styledComponents.styled(RadioGroup__namespace.Indicator)`
5813
+ const RadioGroupIndicator = styled.styled(RadioGroup__namespace.Indicator)`
5793
5814
  display: flex;
5794
5815
  align-items: center;
5795
5816
  justify-content: center;
@@ -6050,19 +6071,19 @@ const RawTr = ({ children, ...props }) => {
6050
6071
  });
6051
6072
  return /* @__PURE__ */ jsxRuntime.jsx(Box, { tag: "tr", ...props, children: childrenClone });
6052
6073
  };
6053
- const CloseIcon = styledComponents.styled(icons.Cross)`
6074
+ const CloseIcon = styled.styled(icons.Cross)`
6054
6075
  font-size: 0.5rem;
6055
6076
  path {
6056
6077
  fill: ${({ theme }) => theme.colors.neutral500};
6057
6078
  }
6058
6079
  `;
6059
- const SearchIcon = styledComponents.styled(icons.Search)`
6080
+ const SearchIcon = styled.styled(icons.Search)`
6060
6081
  font-size: 1rem;
6061
6082
  path {
6062
6083
  fill: ${({ theme }) => theme.colors.neutral500};
6063
6084
  }
6064
6085
  `;
6065
- const SearchbarWrapper = styledComponents.styled.div`
6086
+ const SearchbarWrapper = styled.styled.div`
6066
6087
  border-radius: ${({ theme }) => theme.borderRadius};
6067
6088
  border: 1px solid ${({ theme }) => theme.colors.neutral150}
6068
6089
 
@@ -6072,16 +6093,12 @@ const SearchbarWrapper = styledComponents.styled.div`
6072
6093
  }
6073
6094
  }
6074
6095
  `;
6075
- const SearchbarInput = styledComponents.styled(Input$2)`
6096
+ const SearchbarInput = styled.styled(Input$2)`
6076
6097
  border: 1px solid ${({ theme }) => theme.colors.neutral150}
6077
6098
  height: 16px;
6078
6099
  padding: 0 0 0 8px;
6079
6100
  color: ${({ theme }) => theme.colors.neutral800};
6080
-
6081
- &::placeholder {
6082
- color: ${({ theme }) => theme.colors.neutral500};
6083
- }
6084
-
6101
+
6085
6102
  &:hover {
6086
6103
  button {
6087
6104
  cursor: pointer;
@@ -6129,7 +6146,7 @@ const Searchbar = React__namespace.forwardRef(
6129
6146
  }
6130
6147
  );
6131
6148
  const SearchForm = (props) => /* @__PURE__ */ jsxRuntime.jsx("form", { ...props, role: "search" });
6132
- const ButtonBox$1 = styledComponents.styled(Box)`
6149
+ const ButtonBox$1 = styled.styled(Box)`
6133
6150
  display: inline-flex;
6134
6151
  border: none;
6135
6152
 
@@ -6183,7 +6200,7 @@ const Tag = ({ children, icon, label, disabled = false, onClick, ...props }) =>
6183
6200
  }
6184
6201
  );
6185
6202
  };
6186
- const TagText = styledComponents.styled(Typography)`
6203
+ const TagText = styled.styled(Typography)`
6187
6204
  color: inherit;
6188
6205
  border-right: 1px solid ${({ theme, $disabled }) => $disabled ? theme.colors.neutral300 : theme.colors.primary200};
6189
6206
  padding-right: ${({ theme }) => theme.spaces[2]};
@@ -6348,7 +6365,7 @@ const MultiSelectNested = ({ options, ...props }) => {
6348
6365
  return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectOption, { value: opt.value, children: opt.label }, opt.value);
6349
6366
  }) });
6350
6367
  };
6351
- const NestedOption = styledComponents.styled(MultiSelectOption)`
6368
+ const NestedOption = styled.styled(MultiSelectOption)`
6352
6369
  padding-left: ${({ theme }) => theme.spaces[7]};
6353
6370
  `;
6354
6371
  const getPadding = (size) => {
@@ -6385,7 +6402,7 @@ const SUBNAV_WIDTH = `23.2rem`;
6385
6402
  const SubNav = React__namespace.forwardRef(({ ...props }, ref) => {
6386
6403
  return /* @__PURE__ */ jsxRuntime.jsx(SubNavWrapper, { ref, ...props, tag: "nav" });
6387
6404
  });
6388
- const SubNavWrapper = styledComponents.styled(Box)`
6405
+ const SubNavWrapper = styled.styled(Box)`
6389
6406
  width: ${SUBNAV_WIDTH};
6390
6407
  background: ${({ theme }) => theme.colors.neutral100};
6391
6408
  position: sticky;
@@ -6395,7 +6412,7 @@ const SubNavWrapper = styledComponents.styled(Box)`
6395
6412
  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
6396
6413
  z-index: 1;
6397
6414
  `;
6398
- const CustomDivider = styledComponents.styled(Divider)`
6415
+ const CustomDivider = styled.styled(Divider)`
6399
6416
  width: 2.4rem;
6400
6417
  background-color: ${({ theme }) => theme.colors.neutral200};
6401
6418
  `;
@@ -6495,13 +6512,13 @@ const SubNavLink = forwardRef(
6495
6512
  );
6496
6513
  }
6497
6514
  );
6498
- const CustomBullet = styledComponents.styled.span`
6515
+ const CustomBullet = styled.styled.span`
6499
6516
  width: 0.4rem;
6500
6517
  height: 0.4rem;
6501
6518
  background-color: ${({ theme, $active }) => $active ? theme.colors.primary600 : theme.colors.neutral600};
6502
6519
  border-radius: 50%;
6503
6520
  `;
6504
- const SubNavLinkWrapper = styledComponents.styled(BaseLinkImpl)`
6521
+ const SubNavLinkWrapper = styled.styled(BaseLinkImpl)`
6505
6522
  display: flex;
6506
6523
  align-items: center;
6507
6524
  justify-content: space-between;
@@ -6513,7 +6530,7 @@ const SubNavLinkWrapper = styledComponents.styled(BaseLinkImpl)`
6513
6530
 
6514
6531
  &.active {
6515
6532
  ${({ theme }) => {
6516
- return styledComponents.css`
6533
+ return styled.css`
6517
6534
  background-color: ${theme.colors.primary100};
6518
6535
  border-right: 2px solid ${theme.colors.primary600};
6519
6536
  color: ${theme.colors.primary700};
@@ -6530,13 +6547,13 @@ const SubNavLinkWrapper = styledComponents.styled(BaseLinkImpl)`
6530
6547
  outline-offset: -2px;
6531
6548
  }
6532
6549
  `;
6533
- const IconWrapper = styledComponents.styled.div`
6550
+ const IconWrapper = styled.styled.div`
6534
6551
  svg {
6535
6552
  height: 1.6rem;
6536
6553
  width: 1.6rem;
6537
6554
  }
6538
6555
  `;
6539
- const SubNavLinkSectionButton = styledComponents.styled.button`
6556
+ const SubNavLinkSectionButton = styled.styled.button`
6540
6557
  border: none;
6541
6558
  padding: 0;
6542
6559
  background: transparent;
@@ -6603,7 +6620,7 @@ const SubNavSectionLabel = ({
6603
6620
  }
6604
6621
  return /* @__PURE__ */ jsxRuntime.jsx(Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) });
6605
6622
  };
6606
- const SubNavSectionWrapper = styledComponents.styled(Box)`
6623
+ const SubNavSectionWrapper = styled.styled(Box)`
6607
6624
  & > svg {
6608
6625
  height: 0.4rem;
6609
6626
  fill: ${({ theme }) => theme.colors.neutral500};
@@ -6694,7 +6711,7 @@ const SwitchImpl = React__namespace.forwardRef(
6694
6711
  ] });
6695
6712
  }
6696
6713
  );
6697
- const SwitchRoot = styledComponents.styled(Switch__namespace.Root)`
6714
+ const SwitchRoot = styled.styled(Switch__namespace.Root)`
6698
6715
  width: 4rem;
6699
6716
  height: 2.4rem;
6700
6717
  border-radius: 1.2rem;
@@ -6712,7 +6729,7 @@ const SwitchRoot = styledComponents.styled(Switch__namespace.Root)`
6712
6729
  transition: ${(props) => props.theme.transitions.backgroundColor};
6713
6730
  }
6714
6731
  `;
6715
- const SwitchThumb = styledComponents.styled(Switch__namespace.Thumb)`
6732
+ const SwitchThumb = styled.styled(Switch__namespace.Thumb)`
6716
6733
  display: block;
6717
6734
  height: 1.6rem;
6718
6735
  width: 1.6rem;
@@ -6729,7 +6746,7 @@ const SwitchThumb = styledComponents.styled(Switch__namespace.Thumb)`
6729
6746
  ${(props) => props.theme.motion.easings.authenticMotion};
6730
6747
  }
6731
6748
  `;
6732
- const LabelTypography = styledComponents.styled(Typography)`
6749
+ const LabelTypography = styled.styled(Typography)`
6733
6750
  color: ${(props) => props.theme.colors.danger600};
6734
6751
 
6735
6752
  &[data-state='checked'] {
@@ -6746,7 +6763,7 @@ const Root$1 = React__namespace.forwardRef(
6746
6763
  return /* @__PURE__ */ jsxRuntime.jsx(TabsProvider, { disabled, hasError, variant: variant2, children: /* @__PURE__ */ jsxRuntime.jsx(TabsRoot, { ref: forwardedRef, ...props }) });
6747
6764
  }
6748
6765
  );
6749
- const TabsRoot = styledComponents.styled(Tabs__namespace.Root)`
6766
+ const TabsRoot = styled.styled(Tabs__namespace.Root)`
6750
6767
  width: 100%;
6751
6768
  position: relative;
6752
6769
  `;
@@ -6754,7 +6771,7 @@ const List = React__namespace.forwardRef((props, forwardedRef) => {
6754
6771
  const { variant: variant2 } = useTabs("List");
6755
6772
  return /* @__PURE__ */ jsxRuntime.jsx(TabsList, { ref: forwardedRef, ...props, $variant: variant2 });
6756
6773
  });
6757
- const TabsList = styledComponents.styled(Tabs__namespace.List)`
6774
+ const TabsList = styled.styled(Tabs__namespace.List)`
6758
6775
  display: flex;
6759
6776
  align-items: ${(props) => props.$variant === "regular" ? "flex-end" : "unset"};
6760
6777
  position: relative;
@@ -6771,7 +6788,7 @@ const Trigger = React__namespace.forwardRef(
6771
6788
  ] });
6772
6789
  }
6773
6790
  );
6774
- const TabBar = styledComponents.styled.span`
6791
+ const TabBar = styled.styled.span`
6775
6792
  display: block;
6776
6793
  width: 100%;
6777
6794
  background-color: currentColor;
@@ -6781,8 +6798,8 @@ const TabBar = styledComponents.styled.span`
6781
6798
  opacity: 0;
6782
6799
  height: 0.2rem;
6783
6800
  `;
6784
- const TriggerTypography = styledComponents.styled(Typography)``;
6785
- const TabsTrigger = styledComponents.styled(Tabs__namespace.Trigger)`
6801
+ const TriggerTypography = styled.styled(Typography)``;
6802
+ const TabsTrigger = styled.styled(Tabs__namespace.Trigger)`
6786
6803
  position: relative;
6787
6804
  color: ${(props) => props.$hasError ? props.theme.colors.danger600 : props.theme.colors.neutral600};
6788
6805
  cursor: pointer;
@@ -6790,7 +6807,7 @@ const TabsTrigger = styledComponents.styled(Tabs__namespace.Trigger)`
6790
6807
 
6791
6808
  ${(props) => {
6792
6809
  if (props.$variant === "simple") {
6793
- return styledComponents.css`
6810
+ return styled.css`
6794
6811
  padding-block: ${(props2) => props2.theme.spaces[4]};
6795
6812
  padding-inline: ${(props2) => props2.theme.spaces[4]};
6796
6813
 
@@ -6807,7 +6824,7 @@ const TabsTrigger = styledComponents.styled(Tabs__namespace.Trigger)`
6807
6824
  }
6808
6825
  `;
6809
6826
  } else {
6810
- return styledComponents.css`
6827
+ return styled.css`
6811
6828
  padding-block: ${(props2) => props2.theme.spaces[3]};
6812
6829
  padding-inline: ${(props2) => props2.theme.spaces[3]};
6813
6830
  flex: 1;
@@ -6842,12 +6859,12 @@ const Content = React__namespace.forwardRef((props, forwardedRef) => {
6842
6859
  const { variant: variant2 } = useTabs("Content");
6843
6860
  return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { $variant: variant2, ref: forwardedRef, ...props });
6844
6861
  });
6845
- const TabsContent = styledComponents.styled(Tabs__namespace.Content)`
6862
+ const TabsContent = styled.styled(Tabs__namespace.Content)`
6846
6863
  ${(props) => {
6847
6864
  if (props.$variant === "simple") {
6848
- return styledComponents.css``;
6865
+ return styled.css``;
6849
6866
  } else {
6850
- return styledComponents.css`
6867
+ return styled.css`
6851
6868
  position: relative;
6852
6869
  z-index: 1;
6853
6870
  background-color: ${(props2) => props2.theme.colors.neutral0};
@@ -6862,15 +6879,15 @@ const Tabs = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
6862
6879
  Root: Root$1,
6863
6880
  Trigger
6864
6881
  }, Symbol.toStringTag, { value: "Module" }));
6865
- const TableContainer = styledComponents.styled(Box)`
6882
+ const TableContainer = styled.styled(Box)`
6866
6883
  overflow: hidden;
6867
6884
  border: 1px solid ${({ theme }) => theme.colors.neutral150};
6868
6885
  `;
6869
- const TableWrapper = styledComponents.styled(RawTable)`
6886
+ const TableWrapper = styled.styled(RawTable)`
6870
6887
  width: 100%;
6871
6888
  white-space: nowrap;
6872
6889
  `;
6873
- const TableBox = styledComponents.styled(Box)`
6890
+ const TableBox = styled.styled(Box)`
6874
6891
  &:before {
6875
6892
  // TODO: make sure to add a token for this weird stuff
6876
6893
  background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
@@ -6896,7 +6913,7 @@ const TableBox = styledComponents.styled(Box)`
6896
6913
  top: 0;
6897
6914
  }
6898
6915
  `;
6899
- const ScrollContainer = styledComponents.styled(Box)`
6916
+ const ScrollContainer = styled.styled(Box)`
6900
6917
  overflow-x: auto;
6901
6918
  `;
6902
6919
  const Table = React__namespace.forwardRef(({ footer, ...props }, forwardedRef) => {
@@ -6926,7 +6943,7 @@ const Table = React__namespace.forwardRef(({ footer, ...props }, forwardedRef) =
6926
6943
  footer
6927
6944
  ] });
6928
6945
  });
6929
- const TbodyWrapper = styledComponents.styled(RawTbody)`
6946
+ const TbodyWrapper = styled.styled(RawTbody)`
6930
6947
  & tr:last-of-type {
6931
6948
  border-bottom: none;
6932
6949
  }
@@ -6934,13 +6951,13 @@ const TbodyWrapper = styledComponents.styled(RawTbody)`
6934
6951
  const Tbody = ({ children, ...props }) => {
6935
6952
  return /* @__PURE__ */ jsxRuntime.jsx(TbodyWrapper, { ...props, children });
6936
6953
  };
6937
- const TheadWrapper = styledComponents.styled(RawThead)`
6954
+ const TheadWrapper = styled.styled(RawThead)`
6938
6955
  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
6939
6956
  `;
6940
6957
  const Thead = ({ children, ...props }) => {
6941
6958
  return /* @__PURE__ */ jsxRuntime.jsx(TheadWrapper, { ...props, children });
6942
6959
  };
6943
- const TrWrapper = styledComponents.styled(RawTr)`
6960
+ const TrWrapper = styled.styled(RawTr)`
6944
6961
  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
6945
6962
 
6946
6963
  & td,
@@ -6963,7 +6980,7 @@ const TrWrapper = styledComponents.styled(RawTr)`
6963
6980
  const Tr = (props) => {
6964
6981
  return /* @__PURE__ */ jsxRuntime.jsx(TrWrapper, { ...props });
6965
6982
  };
6966
- const CellWrapper = styledComponents.styled(RawTd)`
6983
+ const CellWrapper = styled.styled(RawTd)`
6967
6984
  vertical-align: middle;
6968
6985
  text-align: left;
6969
6986
  outline-offset: -4px;
@@ -6984,7 +7001,7 @@ const Th = React__namespace.forwardRef(({ children, action, ...props }, forwarde
6984
7001
  const Td = React__namespace.forwardRef(({ children, ...props }, forwardedRef) => {
6985
7002
  return /* @__PURE__ */ jsxRuntime.jsx(CellWrapper, { color: "neutral800", ref: forwardedRef, ...props, children });
6986
7003
  });
6987
- const IconBox = styledComponents.styled(Box)`
7004
+ const IconBox = styled.styled(Box)`
6988
7005
  height: 2.4rem;
6989
7006
  width: 2.4rem;
6990
7007
  border-radius: 50%;
@@ -7001,7 +7018,7 @@ const IconBox = styledComponents.styled(Box)`
7001
7018
  fill: ${({ theme }) => theme.colors.primary600};
7002
7019
  }
7003
7020
  `;
7004
- const ButtonBox = styledComponents.styled(Box)`
7021
+ const ButtonBox = styled.styled(Box)`
7005
7022
  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
7006
7023
  display: block;
7007
7024
  width: 100%;
@@ -7038,7 +7055,7 @@ const TextButton = forwardRef(
7038
7055
  );
7039
7056
  }
7040
7057
  );
7041
- const rotation = styledComponents.keyframes`
7058
+ const rotation = styled.keyframes`
7042
7059
  from {
7043
7060
  transform: rotate(0deg);
7044
7061
  }
@@ -7046,12 +7063,12 @@ const rotation = styledComponents.keyframes`
7046
7063
  transform: rotate(359deg);
7047
7064
  }
7048
7065
  `;
7049
- const LoadingWrapper = styledComponents.styled.span`
7066
+ const LoadingWrapper = styled.styled.span`
7050
7067
  display: flex;
7051
7068
  animation: ${rotation} 2s infinite linear;
7052
7069
  will-change: transform;
7053
7070
  `;
7054
- const TextButtonWrapper = styledComponents.styled(Flex)`
7071
+ const TextButtonWrapper = styled.styled(Flex)`
7055
7072
  border: none;
7056
7073
  background-color: transparent;
7057
7074
  color: ${(props) => props.theme.colors.primary600};
@@ -7105,18 +7122,17 @@ const Textarea = React__namespace.forwardRef(
7105
7122
  ) });
7106
7123
  }
7107
7124
  );
7108
- const Wrapper$1 = styledComponents.styled(Box)`
7125
+ const Wrapper$1 = styled.styled(Box)`
7109
7126
  height: 10.5rem;
7110
7127
  ${inputFocusStyle()}
7111
7128
  `;
7112
- const TextareaElement = styledComponents.styled(Box)`
7129
+ const TextareaElement = styled.styled(Box)`
7113
7130
  border: none;
7114
7131
  resize: none;
7115
7132
 
7116
- ::placeholder {
7117
- color: ${({ theme }) => theme.colors.neutral500};
7133
+ &::placeholder {
7134
+ color: ${({ theme }) => theme.colors.neutral600};
7118
7135
  font-size: ${({ theme }) => theme.fontSizes[2]};
7119
- color: ${({ theme }) => theme.colors.neutral500};
7120
7136
  opacity: 1;
7121
7137
  }
7122
7138
 
@@ -7240,13 +7256,13 @@ const Toggle = React__namespace.forwardRef(
7240
7256
  );
7241
7257
  }
7242
7258
  );
7243
- const ToggleWrapper = styledComponents.styled(Flex)`
7259
+ const ToggleWrapper = styled.styled(Flex)`
7244
7260
  ${inputFocusStyle()}
7245
7261
  `;
7246
- const ToggleOption = styledComponents.styled(Flex)`
7262
+ const ToggleOption = styled.styled(Flex)`
7247
7263
  padding-block: 0.6rem;
7248
7264
  `;
7249
- const Input = styledComponents.styled.input`
7265
+ const Input = styled.styled.input`
7250
7266
  height: 100%;
7251
7267
  left: 0;
7252
7268
  opacity: 0;
@@ -7259,7 +7275,7 @@ const Root = forwardRef((props, forwardedRef) => {
7259
7275
  const { gap = 0, gridCols = 12, ...rest } = props;
7260
7276
  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ref: forwardedRef, $gap: gap, $gridCols: gridCols, ...rest });
7261
7277
  });
7262
- const Wrapper = styledComponents.styled(Box)`
7278
+ const Wrapper = styled.styled(Box)`
7263
7279
  display: grid;
7264
7280
  grid-template-columns: repeat(${({ $gridCols }) => $gridCols}, 1fr);
7265
7281
  ${({ theme, $gap }) => handleResponsiveValues({ gap: $gap }, theme)}
@@ -7267,7 +7283,7 @@ const Wrapper = styledComponents.styled(Box)`
7267
7283
  const ItemImpl = forwardRef(
7268
7284
  ({ col, s, xs, m, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(Item, { ref: forwardedRef, $col: col, $s: s, $xs: xs, $m: m, ...props })
7269
7285
  );
7270
- const Item = styledComponents.styled(Flex)`
7286
+ const Item = styled.styled(Flex)`
7271
7287
  grid-column: span ${({ $xs }) => $xs ?? 12};
7272
7288
  max-width: 100%;
7273
7289
 
@@ -7482,7 +7498,7 @@ exports.ComboboxOption = Option;
7482
7498
  exports.Crumb = Crumb;
7483
7499
  exports.CrumbLink = CrumbLink;
7484
7500
  exports.CrumbSimpleMenu = CrumbSimpleMenu;
7485
- exports.DatePicker = DatePicker$1;
7501
+ exports.DatePicker = DatePicker;
7486
7502
  exports.DateTimePicker = DateTimePicker;
7487
7503
  exports.DesignSystemProvider = DesignSystemProvider;
7488
7504
  exports.Dialog = Dialog;
@@ -7551,7 +7567,7 @@ exports.TextInput = TextInput;
7551
7567
  exports.Textarea = Textarea;
7552
7568
  exports.Th = Th;
7553
7569
  exports.Thead = Thead;
7554
- exports.TimePicker = TimePicker$1;
7570
+ exports.TimePicker = TimePicker;
7555
7571
  exports.Toggle = Toggle;
7556
7572
  exports.Tooltip = TooltipImpl;
7557
7573
  exports.Tr = Tr;