@strapi/design-system 2.0.0-rc.18 → 2.0.0-rc.20

package/dist/index.mjs

@@ -14,13 +14,13 @@ import { CaretDown, Cross, CheckCircle, WarningCircle, Information, Loader as Lo
 import * as Avatar$1 from "@radix-ui/react-avatar";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as Checkbox from "@radix-ui/react-checkbox";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import * as AlertDialog from "@radix-ui/react-alert-dialog";
 import { useFloating, offset, shift, flip, autoUpdate } from "@floating-ui/react-dom";
 import { useFocusGuards } from "@radix-ui/react-focus-guards";
 import { FocusScope } from "@radix-ui/react-focus-scope";
 import { createPortal } from "react-dom";
 import { RemoveScroll } from "react-remove-scroll";
-import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { useCodeMirror } from "@uiw/react-codemirror";
 import { StateEffect, StateField } from "@codemirror/state";
@@ -585,9 +585,9 @@ const Trigger$7 = React.forwardRef(
     const { size } = useAccordion("Trigger");
     return /* @__PURE__ */ jsxs(AccordionTrigger, { $caretPosition: caretPosition, $size: size, ref: forwardedRef, ...restProps, children: [
       caretPosition === "left" ? /* @__PURE__ */ jsx(TriggerIcon, { $size: size, children: /* @__PURE__ */ jsx(CaretDown, { width: size === "S" ? "1.2rem" : "1.6rem", height: size === "S" ? "1.2rem" : "1.6rem" }) }) : null,
-      /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
-        Icon && size === "S" ? /* @__PURE__ */ jsx(IconBox$4, { children: /* @__PURE__ */ jsx(Icon, { ...iconProps }) }) : null,
-        /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", direction: "column", tag: "span", ref: forwardedRef, children: [
+      /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, overflow: "hidden", children: [
+        Icon && size === "S" ? /* @__PURE__ */ jsx(IconBox$2, { children: /* @__PURE__ */ jsx(Icon, { ...iconProps }) }) : null,
+        /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", direction: "column", tag: "span", ref: forwardedRef, overflow: "hidden", children: [
           /* @__PURE__ */ jsx(
             Typography,
             {
@@ -595,6 +595,7 @@ const Trigger$7 = React.forwardRef(
               ellipsis: true,
               variant: size === "M" ? "delta" : void 0,
               textAlign: "left",
+              width: "100%",
               children
             }
           ),
@@ -605,7 +606,7 @@ const Trigger$7 = React.forwardRef(
     ] });
   }
 );
-const IconBox$4 = styled(Box)`
+const IconBox$2 = styled(Box)`
   color: ${(props) => props.theme.colors.neutral500};
   display: flex;
 
@@ -640,6 +641,7 @@ const AccordionTrigger = styled(RadixAccordion.Trigger)`
   padding-block: ${(props) => props.$size === "S" ? props.theme.spaces[3] : props.theme.spaces[6]};
   cursor: pointer;
   color: ${(props) => props.theme.colors.neutral800};
+  overflow: hidden;
 
   &[data-disabled] {
     cursor: default;
@@ -701,7 +703,7 @@ const AccordionHeader = styled(RadixAccordion.Header)`
       & > ${AccordionTrigger} {
         color: ${(props) => props.theme.colors.primary600};
 
-        & ${IconBox$4} {
+        & ${IconBox$2} {
           color: ${(props) => props.theme.colors.primary600};
         }
 
@@ -1834,6 +1836,7 @@ const Viewport$2 = styled(Flex)`
   scrollbar-width: none;
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
+  z-index: ${(props) => props.theme.zIndices.popover};
 
   &::-webkit-scrollbar {
     display: none;
@@ -2883,6 +2886,61 @@ const CarouselSlide = ({ label, children, selected = false, ...props }) => /* @_
     children
   }
 );
+const ScrollAreaImpl$1 = React.forwardRef(
+  ({ children, viewportRef, ...restProps }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs(ScrollAreaRoot, { ref: forwardedRef, ...restProps, children: [
+      /* @__PURE__ */ jsx(ScrollAreaViewport, { ref: viewportRef, children }),
+      /* @__PURE__ */ jsx(Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(Thumb, {}) }),
+      /* @__PURE__ */ jsx(Scrollbar, { orientation: "horizontal", children: /* @__PURE__ */ jsx(Thumb, {}) })
+    ] });
+  }
+);
+const ScrollAreaRoot = styled(ScrollArea.Root)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+`;
+const ScrollAreaViewport = styled(ScrollArea.Viewport)`
+  min-width: 100%;
+`;
+const Scrollbar = styled(ScrollArea.Scrollbar)`
+  display: flex;
+  /* ensures no selection */
+  user-select: none;
+  /* disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+
+  &[data-orientation='vertical'] {
+    width: 0.4rem;
+    margin: 0.4rem;
+  }
+
+  &[data-orientation='horizontal'] {
+    flex-direction: column;
+    height: 0.4rem;
+    margin: 0.4rem;
+  }
+`;
+const Thumb = styled(ScrollArea.Thumb)`
+  position: relative;
+  flex: 1;
+  background-color: ${(props) => props.theme.colors.neutral150};
+  border-radius: 0.4rem;
+
+  /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    min-width: 44px;
+    min-height: 44px;
+  }
+`;
 const loaderSvg = "data:image/svg+xml,%3csvg%20width='63'%20height='63'%20viewBox='0%200%2063%2063'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M42.5563%2011.9816C39.484%2010.3071%2035.8575%209.29097%2032.3354%209.13521C28.6443%208.92888%2024.8295%209.72318%2021.3336%2011.4129C20.9123%2011.5901%2020.5376%2011.8101%2020.1722%2012.0249L20.0108%2012.1179C19.8774%2012.1951%2019.7441%2012.2724%2019.608%2012.3536C19.3253%2012.5146%2019.0492%2012.6744%2018.7544%2012.8792C18.5463%2013.0329%2018.3395%2013.1759%2018.1301%2013.323C17.5658%2013.7208%2016.9868%2014.1317%2016.4983%2014.5979C14.8476%2015.9524%2013.5571%2017.6075%2012.6071%2018.9214C10.4365%2022.1566%209.08622%2025.9567%208.80702%2029.6143L8.7764%2030.1588C8.73328%2030.9196%208.68476%2031.7057%208.75353%2032.4555C8.76648%2032.6084%208.7661%2032.7638%208.77506%2032.914C8.78895%2033.229%208.80152%2033.5373%208.846%2033.8672L9.07396%2035.4221C9.09756%2035.5764%209.1198%2035.7413%209.1633%2035.9263L9.65919%2037.9272L10.138%2039.2823C10.2729%2039.6673%2010.4158%2040.0751%2010.6%2040.43C12.0292%2043.637%2014.1425%2046.4578%2016.7063%2048.585C19.0508%2050.5296%2021.824%2052.0023%2024.7491%2052.8452L26.2371%2053.2376C26.3781%2053.2693%2026.4926%2053.2889%2026.6031%2053.3058L26.7775%2053.3311C27.0052%2053.3636%2027.2195%2053.3986%2027.4445%2053.435C27.8598%2053.5076%2028.2672%2053.5748%2028.7079%2053.6183L30.5641%2053.7229C30.9516%2053.7249%2031.3352%2053.7068%2031.7081%2053.6874C31.9039%2053.681%2032.0984%2053.6681%2032.3288%2053.662C34.5253%2053.4772%2036.5106%2053.0634%2038.0516%2052.4652C38.1769%2052.4171%2038.3008%2052.3796%2038.4234%2052.3355C38.6727%2052.2499%2038.9259%2052.167%2039.1432%2052.0599L40.8591%2051.2626L42.5702%2050.266C42.9009%2050.0682%2043.0205%2049.6414%2042.8282%2049.2984C42.632%2048.9526%2042.2034%2048.8308%2041.8634%2049.0166L40.1792%2049.9218L38.4995%2050.6224C38.3169%2050.6953%2038.121%2050.7534%2037.9224%2050.8155C37.7838%2050.8489%2037.6518%2050.8983%2037.5012%2050.9408C36.0711%2051.435%2034.2445%2051.7425%2032.244%2051.8346C32.0442%2051.8383%2031.8471%2051.8379%2031.654%2051.8403C31.3051%2051.8414%2030.9602%2051.8451%2030.6392%2051.8305L28.9177%2051.6725C28.5476%2051.619%2028.1695%2051.5427%2027.7848%2051.4678C27.5639%2051.4167%2027.3376%2051.3737%2027.1299%2051.3374L26.9529%2051.2987C26.8704%2051.2834%2026.7772%2051.2667%2026.7333%2051.2543L25.3466%2050.8322C22.7651%2049.9789%2020.33%2048.5729%2018.2942%2046.7557C16.1056%2044.7951%2014.3339%2042.2335%2013.1742%2039.3582C12.0276%2036.6013%2011.5988%2033.2792%2011.9716%2030.0076C12.3145%2027.0213%2013.3948%2024.1635%2015.1858%2021.5083C15.3034%2021.3339%2015.421%2021.1596%2015.5212%2021.0196C16.4309%2019.8688%2017.5408%2018.5589%2018.9483%2017.496C19.3367%2017.1525%2019.7862%2016.856%2020.2611%2016.5478C20.4878%2016.4009%2020.7079%2016.2553%2020.8907%2016.1306C21.0974%2016.0048%2021.3188%2015.8831%2021.5348%2015.7694C21.6761%2015.6975%2021.8162%2015.619%2021.9388%2015.5576L22.1002%2015.4646C22.4002%2015.3037%2022.6749%2015.1546%2022.9908%2015.039L24.1186%2014.5715C24.3399%2014.4844%2024.5718%2014.4159%2024.7997%2014.3447C24.953%2014.2982%2025.0982%2014.2635%2025.2635%2014.2078C25.786%2014.0182%2026.3283%2013.9112%2026.9105%2013.7965C27.117%2013.7571%2027.3302%2013.7163%2027.5608%2013.6585C27.7553%2013.611%2027.9737%2013.5969%2028.2082%2013.5762C28.364%2013.5603%2028.5172%2013.5483%2028.6318%2013.5333C28.7876%2013.5173%2028.9342%2013.5066%2029.0927%2013.4867C29.3285%2013.4555%2029.5456%2013.4347%2029.7494%2013.4337C30.0237%2013.44%2030.2994%2013.4357%2030.5777%2013.4274C31.0811%2013.421%2031.5579%2013.4197%2032.0318%2013.4914C34.9664%2013.7352%2037.7144%2014.6085%2040.2052%2016.0868C42.3489%2017.3655%2044.2716%2019.1525%2045.7607%2021.264C47.0255%2023.0628%2047.9756%2025.0528%2048.4928%2027.0393C48.572%2027.3176%2048.6299%2027.5931%2048.6839%2027.8659C48.7154%2028.0428%2048.7563%2028.2145%2048.7892%2028.3636C48.8037%2028.4541%2048.8208%2028.5406%2048.8445%2028.6258C48.8749%2028.7443%2048.8986%2028.864%2048.9116%2028.9651L48.9793%2029.6047C48.9922%2029.7748%2049.0132%2029.9331%2049.0301%2030.0887C49.0668%2030.3268%2049.0889%2030.5608%2049.0964%2030.7561L49.1083%2031.9001C49.1312%2032.3307%2049.089%2032.7116%2049.0522%2033.0673C49.0384%2033.2598%2049.0126%2033.4443%2049.0123%2033.5824C48.9961%2033.6926%2048.9918%2033.7935%2048.9836%2033.8917C48.9753%2034.0072%2048.9724%2034.1148%2048.9414%2034.2554L48.5449%2036.3059C48.3134%2037.8623%2049.3793%2039.3365%2050.9488%2039.5822C52.0417%2039.7601%2053.1536%2039.2819%2053.7711%2038.3664C54.0063%2038.0176%2054.1604%2037.6257%2054.2227%2037.2064L54.5217%2035.2574C54.5514%2035.0756%2054.572%2034.83%2054.5846%2034.5791L54.6028%2034.2338C54.6098%2034.0598%2054.6223%2033.8779%2054.6347%2033.6788C54.6734%2033.1052%2054.7163%2032.4479%2054.6619%2031.8058L54.5867%2030.4289C54.5622%2030.0952%2054.5097%2029.76%2054.4559%2029.4181C54.431%2029.2572%2054.4048%2029.0896%2054.3826%2028.9074L54.2687%2028.104C54.2332%2027.9244%2054.1804%2027.7273%2054.1329%2027.5396L54.0643%2027.2454C54.0195%2027.071%2053.9773%2026.8927%2053.9338%2026.7076C53.8455%2026.3309%2053.7479%2025.9422%2053.613%2025.5571C52.84%2023.0292%2051.5383%2020.5194%2049.8338%2018.2799C47.8544%2015.682%2045.3333%2013.5087%2042.5563%2011.9816Z'%20fill='%234945FF'/%3e%3c/svg%3e";
 const Loader = React.forwardRef(({ children, small = false, ...props }, ref) => {
   return /* @__PURE__ */ jsxs("div", { role: "alert", "aria-live": "assertive", ref, ...props, children: [
@@ -2909,7 +2967,7 @@ const Combobox = React.forwardRef(
     autocomplete,
     children,
     className,
-    clearLabel = "clear",
+    clearLabel = "Clear",
     creatable = false,
     createMessage = (value2) => `Create "${value2}"`,
     defaultFilterValue,
@@ -3055,19 +3113,14 @@ const Combobox = React.forwardRef(
             ] }),
             /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 3, children: [
               internalTextValue && onClear ? /* @__PURE__ */ jsx(
-                IconBox$3,
+                IconButton,
                 {
-                  tag: "button",
-                  hasRadius: true,
-                  background: "transparent",
-                  type: "button",
-                  padding: 0,
-                  color: "neutral600",
-                  borderStyle: "none",
+                  size: "XS",
+                  variant: "ghost",
                   onClick: handleClearClick,
                   "aria-disabled": disabled,
                   "aria-label": clearLabel,
-                  title: clearLabel,
+                  label: clearLabel,
                   ref: clearRef,
                   children: /* @__PURE__ */ jsx(Cross, {})
                 }
@@ -3075,7 +3128,7 @@ const Combobox = React.forwardRef(
               /* @__PURE__ */ jsx(DownIcon$1, { children: /* @__PURE__ */ jsx(CaretDown, { fill: "neutral500" }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Content$5, { sideOffset: 4, children: /* @__PURE__ */ jsxs(Viewport$1, { ref: viewportRef, children: [
+          /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Content$5, { sideOffset: 4, children: /* @__PURE__ */ jsx(ScrollAreaImpl$1, { children: /* @__PURE__ */ jsxs(Viewport$1, { ref: viewportRef, children: [
             children,
             creatable ? /* @__PURE__ */ jsx(
               Combobox$1.CreateItem,
@@ -3089,15 +3142,12 @@ const Combobox = React.forwardRef(
             !creatable && !loading ? /* @__PURE__ */ jsx(Combobox$1.NoValueFound, { asChild: true, children: /* @__PURE__ */ jsx(OptionBox, { $hasHover: false, children: /* @__PURE__ */ jsx(Typography, { children: noOptionsMessage(internalTextValue ?? "") }) }) }) : null,
             loading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(Loader, { small: true, children: loadingMessage }) }) : null,
             /* @__PURE__ */ jsx(Box, { id: intersectionId, width: "100%", height: "1px" })
-          ] }) }) })
+          ] }) }) }) })
         ]
       }
     );
   }
 );
-const IconBox$3 = styled(Box)`
-  padding: 0;
-`;
 const Trigger$5 = styled(Combobox$1.Trigger)`
   position: relative;
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
@@ -3549,60 +3599,6 @@ const Portal$1 = React.forwardRef(
   }
 );
 Portal$1.displayName = "Portal";
-const ScrollAreaImpl$1 = React.forwardRef(
-  ({ children, viewportRef, ...restProps }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs(ScrollAreaRoot, { ref: forwardedRef, ...restProps, children: [
-      /* @__PURE__ */ jsx(ScrollAreaViewport, { ref: viewportRef, children }),
-      /* @__PURE__ */ jsx(Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(Thumb, {}) }),
-      /* @__PURE__ */ jsx(Scrollbar, { orientation: "horizontal", children: /* @__PURE__ */ jsx(Thumb, {}) })
-    ] });
-  }
-);
-const ScrollAreaRoot = styled(ScrollArea.Root)`
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-`;
-const ScrollAreaViewport = styled(ScrollArea.Viewport)`
-  min-width: 100%;
-  padding-inline: 4px;
-`;
-const Scrollbar = styled(ScrollArea.Scrollbar)`
-  display: flex;
-  /* ensures no selection */
-  user-select: none;
-  /* disable browser handling of all panning and zooming gestures on touch devices */
-  touch-action: none;
-
-  &[data-orientation='vertical'] {
-    width: 0.4rem;
-  }
-
-  &[data-orientation='horizontal'] {
-    flex-direction: column;
-    height: 0.4rem;
-  }
-`;
-const Thumb = styled(ScrollArea.Thumb)`
-  position: relative;
-  flex: 1;
-  background-color: ${(props) => props.theme.colors.neutral150};
-  border-radius: var(--scrollbar-size);
-
-  /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-    min-width: 44px;
-    min-height: 44px;
-  }
-`;
 const SelectTrigger = React.forwardRef(
   ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, children, id, size = "M", withTags, ...restProps }, ref) => {
     const triggerRef = React.useRef(null);
@@ -3639,7 +3635,7 @@ const SelectTrigger = React.forwardRef(
           ] }),
           /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 3, children: [
             onClear ? /* @__PURE__ */ jsx(
-              IconBox$2,
+              IconBox$1,
               {
                 tag: "button",
                 hasRadius: true,
@@ -3661,7 +3657,7 @@ const SelectTrigger = React.forwardRef(
     ) });
   }
 );
-const IconBox$2 = styled(Box)`
+const IconBox$1 = styled(Box)`
   border: none;
   display: flex;
 
@@ -3782,11 +3778,11 @@ const StyledSelectItem = styled(Select.Item)`
 
   &:hover {
     background-color: ${({ theme }) => theme.colors.primary100};
+    cursor: pointer;
   }
 
   &[data-state='checked'] {
     font-weight: bold;
-    background-color: ${({ theme }) => theme.colors.primary100};
     color: ${({ theme }) => theme.colors.primary600};
     font-weight: bold;
   }
@@ -4056,16 +4052,14 @@ const DatePicker$1 = React.forwardRef(
             /* @__PURE__ */ jsx(Calendar, { fill: "neutral500", "aria-hidden": true }),
             /* @__PURE__ */ jsx(DatePickerTextInput, { ref, "aria-describedby": ariaDescription, id, name, ...restProps }),
             textValue && onClear ? /* @__PURE__ */ jsx(
-              IconBox$1,
+              IconButton,
               {
-                tag: "button",
-                hasRadius: true,
-                background: "transparent",
-                type: "button",
+                size: "XS",
+                variant: "ghost",
                 onClick: handleClearClick,
                 "aria-disabled": disabled,
                 "aria-label": clearLabel,
-                title: clearLabel,
+                label: clearLabel,
                 ref: clearRef,
                 children: /* @__PURE__ */ jsx(Cross, {})
               }
@@ -4186,12 +4180,6 @@ const TriggerElement = styled(Flex)`
 
   ${({ theme, $hasError }) => inputFocusStyle()({ theme, $hasError })};
 `;
-const IconBox$1 = styled(Box)`
-  border: none;
-  color: ${({ theme }) => theme.colors.neutral600};
-  padding: 0;
-  cursor: pointer;
-`;
 const DATE_PICKER_TEXT_INPUT_NAME = "DatePickerTextInput";
 const DatePickerTextInput = React.forwardRef(
   ({ placeholder, ...props }, forwardedRef) => {
@@ -5986,7 +5974,7 @@ const SearchbarInput = styled(Input$2)`
   ${inputFocusStyle()}
 `;
 const Searchbar = React.forwardRef(
-  ({ name, children, value = "", onClear, clearLabel, ...props }, ref) => {
+  ({ name, children, value = "", onClear, clearLabel = "Clear", ...props }, ref) => {
     const inputRef = React.useRef(null);
     const isCompleting = value.length > 0;
     const handleClear = (e) => {
@@ -6004,13 +5992,15 @@ const Searchbar = React.forwardRef(
           value,
           startAction: /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": true }),
           endAction: isCompleting ? /* @__PURE__ */ jsx(
-            Action$1,
+            IconButton,
             {
-              label: clearLabel,
               onClick: handleClear,
               onMouseDown: (e) => {
                 e.preventDefault();
               },
+              label: clearLabel,
+              size: "XS",
+              variant: "ghost",
               children: /* @__PURE__ */ jsx(CloseIcon, {})
             }
           ) : void 0,