@ultraviolet/ui 3.8.1 → 3.9.0

package/dist/components/SelectInput/components/Dropdown.js

@@ -120,7 +120,8 @@ const CreateDropdown = ({
     setSelectedData,
     selectedData,
     searchInput,
-    setSearchInput
+    setSearchInput,
+    size
   } = useSelectInput();
   const focusedItemRef = useRef(null);
   useEffect(() => {
@@ -128,6 +129,17 @@ const CreateDropdown = ({
       focusedItemRef.current.focus();
     }
   }, [defaultSearchValue]);
+  const textVariant = useMemo(() => {
+    if (size === "large") {
+      return "body";
+    }
+    if (size === "medium") {
+      return "bodySmall";
+    }
+    return "caption";
+  }, [size]);
+  const textVariantSmall = size === "small" ? "captionStrong" : "bodySmallStrong";
+  const sizeVariantIcon = size === "small" ? "xsmall" : "small";
   const handleClickCustomValue = () => {
     const newOption = { label: searchInput, value: searchInput };
     addOption?.onClick(searchInput);
@@ -136,12 +148,19 @@ const CreateDropdown = ({
     setSearchInput("");
   };
   if (isEmpty && !addOption) {
-    return /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: dropdownEmptyState, gap: 2, children: emptyState ?? /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodyStrong", children: "No options" }) });
+    return /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: dropdownEmptyState, gap: 2, children: emptyState ?? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "p",
+        variant: size === "small" ? "bodySmallStrong" : "bodyStrong",
+        children: "No options"
+      }
+    ) });
   }
   if (isEmpty && addOption && searchable) {
     const text = /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
-      /* @__PURE__ */ jsx(PlusIcon, { sentiment: "primary", size: "small" }),
-      /* @__PURE__ */ jsxs(Text, { as: "span", sentiment: "primary", variant: "bodySmallStrong", children: [
+      /* @__PURE__ */ jsx(PlusIcon, { sentiment: "primary", size: sizeVariantIcon }),
+      /* @__PURE__ */ jsxs(Text, { as: "span", sentiment: "primary", variant: textVariantSmall, children: [
         addOption.text,
         " ",
         searchInput
@@ -172,7 +191,8 @@ const CreateDropdown = ({
           {
             descriptionDirection: "row",
             option,
-            optionalInfoPlacement: "left"
+            optionalInfoPlacement: "left",
+            textVariant
           }
         )
       }
@@ -272,17 +292,26 @@ const CreateDropdown = ({
                 descriptionDirection: "row",
                 option: {
                   label: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
-                    /* @__PURE__ */ jsx(PlusIcon, { sentiment: "primary", size: "small" }),
-                    /* @__PURE__ */ jsxs(Text, { as: "span", sentiment: "primary", variant: "bodySmallStrong", children: [
-                      addOption.text,
-                      " ",
-                      searchInput
-                    ] })
+                    /* @__PURE__ */ jsx(PlusIcon, { sentiment: "primary", size: sizeVariantIcon }),
+                    /* @__PURE__ */ jsxs(
+                      Text,
+                      {
+                        as: "span",
+                        sentiment: "primary",
+                        variant: textVariantSmall,
+                        children: [
+                          addOption.text,
+                          " ",
+                          searchInput
+                        ]
+                      }
+                    )
                   ] }),
                   searchText: searchInput,
                   value: `${addOption.text} ${searchInput}`
                 },
-                optionalInfoPlacement: "left"
+                optionalInfoPlacement: "left",
+                textVariant
               }
             )
           }
@@ -293,7 +322,12 @@ const CreateDropdown = ({
             "aria-disabled": false,
             "aria-label": "select-all",
             "aria-selected": selectedData.allSelected,
-            className: cn(dropdownItem({ selected: selectedData.allSelected })),
+            className: cn(
+              dropdownItem({
+                selected: selectedData.allSelected,
+                size: size === "small" ? "small" : "default"
+              })
+            ),
             "data-testid": "select-all",
             onClick: selectAllOptions,
             onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
@@ -310,7 +344,7 @@ const CreateDropdown = ({
                 tabIndex: -1,
                 value: "select-all",
                 children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-                  /* @__PURE__ */ jsx(Text, { as: "span", placement: "left", variant: "body", children: selectAll.label }),
+                  /* @__PURE__ */ jsx(Text, { as: "span", placement: "left", variant: textVariant, children: selectAll.label }),
                   /* @__PURE__ */ jsx(
                     Text,
                     {
@@ -318,7 +352,7 @@ const CreateDropdown = ({
                       placement: "left",
                       prominence: "weak",
                       sentiment: "neutral",
-                      variant: "bodySmall",
+                      variant: size === "small" ? "captionSmall" : "bodySmall",
                       children: selectAll.description
                     }
                   )
@@ -337,7 +371,8 @@ const CreateDropdown = ({
               className: cn(
                 dropdownItem({
                   disabled: !!option.disabled,
-                  selected: selectedData.selectedValues.includes(option.value) && !option.disabled
+                  selected: selectedData.selectedValues.includes(option.value) && !option.disabled,
+                  size: size === "small" ? "small" : "default"
                 })
               ),
               "data-testid": `option-${option.value}`,
@@ -377,13 +412,15 @@ const CreateDropdown = ({
                     }
                   },
                   tabIndex: -1,
+                  tooltip: option.tooltip,
                   value: option.value,
                   children: /* @__PURE__ */ jsx(
                     DisplayOption,
                     {
                       descriptionDirection,
                       option,
-                      optionalInfoPlacement
+                      optionalInfoPlacement,
+                      textVariant
                     }
                   )
                 }
@@ -392,7 +429,8 @@ const CreateDropdown = ({
                 {
                   descriptionDirection,
                   option,
-                  optionalInfoPlacement
+                  optionalInfoPlacement,
+                  textVariant
                 }
               )
             },
@@ -433,13 +471,13 @@ const CreateDropdown = ({
                   descriptionDirection: "row",
                   option: {
                     label: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
-                      /* @__PURE__ */ jsx(PlusIcon, { sentiment: "primary", size: "small" }),
+                      /* @__PURE__ */ jsx(PlusIcon, { sentiment: "primary", size: sizeVariantIcon }),
                       /* @__PURE__ */ jsxs(
                         Text,
                         {
                           as: "span",
                           sentiment: "primary",
-                          variant: "bodySmallStrong",
+                          variant: textVariantSmall,
                           children: [
                             addOption.text,
                             " ",
@@ -451,7 +489,8 @@ const CreateDropdown = ({
                     searchText: searchInput,
                     value: `${addOption.text} ${searchInput}`
                   },
-                  optionalInfoPlacement: "left"
+                  optionalInfoPlacement: "left",
+                  textVariant
                 }
               )
             }
@@ -463,7 +502,10 @@ const CreateDropdown = ({
               "aria-label": "select-all",
               "aria-selected": selectedData.allSelected,
               className: cn(
-                dropdownItem({ selected: selectedData.allSelected })
+                dropdownItem({
+                  selected: selectedData.allSelected,
+                  size: size === "small" ? "small" : "default"
+                })
               ),
               "data-testid": "select-all",
               id: "select-all",
@@ -483,7 +525,7 @@ const CreateDropdown = ({
                   tabIndex: -1,
                   value: "select-all",
                   children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-                    /* @__PURE__ */ jsx(Text, { as: "span", placement: "left", variant: "body", children: selectAll.label }),
+                    /* @__PURE__ */ jsx(Text, { as: "span", placement: "left", variant: textVariant, children: selectAll.label }),
                     /* @__PURE__ */ jsx(
                       Text,
                       {
@@ -491,7 +533,7 @@ const CreateDropdown = ({
                         placement: "left",
                         prominence: "weak",
                         sentiment: "neutral",
-                        variant: "bodySmall",
+                        variant: size === "small" ? "captionSmall" : "bodySmall",
                         children: selectAll.description
                       }
                     )
@@ -514,7 +556,9 @@ const CreateDropdown = ({
                     "button",
                     {
                       className: cn(
-                        selectAllGroup ? dropdownGroupSelectable : "",
+                        selectAllGroup ? dropdownGroupSelectable({
+                          size: size === "small" ? "small" : "default"
+                        }) : "",
                         dropdownGroup
                       ),
                       "data-selectgroup": selectAllGroup,
@@ -546,7 +590,7 @@ const CreateDropdown = ({
                               as: "span",
                               placement: "left",
                               sentiment: "neutral",
-                              variant: "caption",
+                              variant: size === "small" ? "captionSmall" : "caption",
                               children: group.toUpperCase()
                             }
                           )
@@ -557,7 +601,7 @@ const CreateDropdown = ({
                           as: "span",
                           placement: "left",
                           sentiment: "neutral",
-                          variant: "caption",
+                          variant: size === "small" ? "captionSmall" : "caption",
                           children: group.toUpperCase()
                         }
                       )
@@ -567,24 +611,24 @@ const CreateDropdown = ({
                 }
               ) : null,
               /* @__PURE__ */ jsxs(Stack, { gap: "0.25", id: "items", children: [
-                hasElements ? null : /* @__PURE__ */ jsx(
+                !hasElements && emptyStateGroup ? /* @__PURE__ */ jsx(
                   Text,
                   {
                     as: "span",
                     className: emptyStateGroupStyle,
                     prominence: "weak",
                     sentiment: "neutral",
-                    variant: "body",
+                    variant: textVariant,
                     children: emptyStateGroup
                   }
-                ),
+                ) : null,
                 errorGroup ? /* @__PURE__ */ jsx(
                   Text,
                   {
                     as: "span",
                     className: emptyStateGroupStyle,
                     sentiment: "danger",
-                    variant: "body",
+                    variant: textVariant,
                     children: errorGroup
                   }
                 ) : null,
@@ -598,6 +642,7 @@ const CreateDropdown = ({
                       className: cn(
                         dropdownItem({
                           disabled: !!option.disabled,
+                          size: size === "small" ? "small" : "default",
                           selected: selectedData.selectedValues.includes(
                             option.value
                           ) && !option.disabled
@@ -645,13 +690,15 @@ const CreateDropdown = ({
                             }
                           },
                           tabIndex: -1,
+                          tooltip: option.tooltip,
                           value: option.value,
                           children: /* @__PURE__ */ jsx(
                             DisplayOption,
                             {
                               descriptionDirection,
                               option,
-                              optionalInfoPlacement
+                              optionalInfoPlacement,
+                              textVariant
                             }
                           )
                         }
@@ -660,7 +707,8 @@ const CreateDropdown = ({
                         {
                           descriptionDirection,
                           option,
-                          optionalInfoPlacement
+                          optionalInfoPlacement,
+                          textVariant
                         }
                       )
                     },

package/dist/components/SelectInput/components/DropdownOption.d.ts

@@ -3,7 +3,8 @@ type DisplayOptionProps = {
     option: OptionType;
     descriptionDirection: 'row' | 'column';
     optionalInfoPlacement: 'left' | 'right';
+    textVariant: 'body' | 'bodySmall' | 'caption';
 };
-export declare const DisplayOption: ({ option, optionalInfoPlacement, descriptionDirection, }: DisplayOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DisplayOption: ({ option, optionalInfoPlacement, descriptionDirection, textVariant, }: DisplayOptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DropdownOption.d.ts.map

package/dist/components/SelectInput/components/DropdownOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/DropdownOption.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAO1C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,UAAU,CAAA;IAClB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;CACxC,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,0DAI3B,kBAAkB,4CAkKpB,CAAA"}
+{"version":3,"file":"DropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/DropdownOption.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAO1C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,UAAU,CAAA;IAClB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAA;CAC9C,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,uEAK3B,kBAAkB,4CA8KpB,CAAA"}

package/dist/components/SelectInput/components/DropdownOption.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { Stack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
 import { Tooltip } from "../../Tooltip/index.js";
@@ -7,8 +8,18 @@ import { dropdownInfoContainer, dropdownInfoTextItem, dropdownInfo } from "./dro
 const DisplayOption = ({
   option,
   optionalInfoPlacement,
-  descriptionDirection
+  descriptionDirection,
+  textVariant
 }) => {
+  const captionSize = useMemo(() => {
+    if (textVariant === "body") {
+      return "bodySmall";
+    }
+    if (textVariant === "bodySmall") {
+      return "caption";
+    }
+    return "captionSmall";
+  }, [textVariant]);
   if (descriptionDirection === "row" && optionalInfoPlacement === "left") {
     return /* @__PURE__ */ jsx(Tooltip, { disableAnimation: true, text: option.tooltip, children: /* @__PURE__ */ jsx(
       Stack,
@@ -32,7 +43,7 @@ const DisplayOption = ({
                   as: "span",
                   className: dropdownInfoTextItem,
                   placement: "left",
-                  variant: "body",
+                  variant: textVariant,
                   children: option.label
                 }
               ),
@@ -43,7 +54,7 @@ const DisplayOption = ({
                   placement: "left",
                   prominence: "weak",
                   sentiment: option.disabled ? void 0 : "neutral",
-                  variant: "bodySmall",
+                  variant: captionSize,
                   children: option.description
                 }
               ) : null
@@ -77,11 +88,11 @@ const DisplayOption = ({
                     as: "span",
                     className: dropdownInfoTextItem,
                     placement: "left",
-                    variant: "body",
+                    variant: textVariant,
                     children: option.label
                   }
                 ),
-                option.description ? /* @__PURE__ */ jsx(Text, { as: "span", placement: "left", variant: "bodySmall", children: option.description }) : null
+                option.description ? /* @__PURE__ */ jsx(Text, { as: "span", placement: "left", variant: captionSize, children: option.description }) : null
               ]
             }
           ),
@@ -114,7 +125,7 @@ const DisplayOption = ({
                     as: "span",
                     className: dropdownInfoTextItem,
                     placement: "left",
-                    variant: "body",
+                    variant: textVariant,
                     children: option.label
                   }
                 ),
@@ -125,7 +136,7 @@ const DisplayOption = ({
                     placement: "left",
                     prominence: "weak",
                     sentiment: option.disabled ? void 0 : "neutral",
-                    variant: "bodySmall",
+                    variant: captionSize,
                     children: option.description
                   }
                 ) : null
@@ -158,7 +169,7 @@ const DisplayOption = ({
                   as: "span",
                   className: dropdownInfoTextItem,
                   placement: "left",
-                  variant: "body",
+                  variant: textVariant,
                   children: option.label
                 }
               ),
@@ -173,7 +184,7 @@ const DisplayOption = ({
             placement: "left",
             prominence: "weak",
             sentiment: option.disabled ? void 0 : "neutral",
-            variant: "bodySmall",
+            variant: captionSize,
             children: option.description
           }
         ) : null

package/dist/components/SelectInput/components/SearchBarDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/SearchBarDropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAKpE,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,UAAU,CAAA;AAGpD,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,QAAQ,CAAA;IAC1B,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACtD,CAAA;AAqED,eAAO,MAAM,iBAAiB,GAAI,wDAI/B,cAAc,4CA6GhB,CAAA"}
+{"version":3,"file":"SearchBarDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/SearchBarDropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAKpE,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,UAAU,CAAA;AAGpD,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,QAAQ,CAAA;IAC1B,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACtD,CAAA;AAqED,eAAO,MAAM,iBAAiB,GAAI,wDAI/B,cAAc,4CAmHhB,CAAA"}

package/dist/components/SelectInput/components/SearchBarDropdown.js

@@ -61,7 +61,8 @@ const SearchBarDropdown = ({
     options,
     multiselect,
     setSelectedData,
-    selectedData
+    selectedData,
+    size
   } = useSelectInput();
   const handleChange = (search) => {
     if (search.length > 0) {
@@ -140,9 +141,15 @@ const SearchBarDropdown = ({
       onFocus: () => setSearchBarActive(true),
       onKeyDown: (event) => handleKeyDown(event, searchInput),
       placeholder,
-      prefix: /* @__PURE__ */ jsx(SearchIcon, { sentiment: "neutral", size: "small" }),
+      prefix: /* @__PURE__ */ jsx(
+        SearchIcon,
+        {
+          sentiment: "neutral",
+          size: size === "small" ? "xsmall" : "small"
+        }
+      ),
       ref: searchInputRef,
-      size: "medium",
+      size: size === "small" ? "small" : "medium",
       value: searchInput
     }
   );

package/dist/components/SelectInput/components/SelectBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/SelectBar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AA8BjD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAmID,QAAA,MAAM,SAAS,GAAI,uJAehB,cAAc,4CA8UhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/SelectBar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AA8BjD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAmID,QAAA,MAAM,SAAS,GAAI,uJAehB,cAAc,4CAyVhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/SelectInput/components/SelectBar.js

@@ -25,12 +25,12 @@ const DisplayValues = ({
   readOnly,
   overflowed,
   overflowAmount,
-  size,
   measureRef,
   lastElementMaxWidth,
   overflow,
   refPlusTag,
-  displayShadowCopy
+  displayShadowCopy,
+  textVariant
 }) => {
   const { multiselect, selectedData, setSelectedData, options, onChange } = useSelectInput();
   return multiselect ? /* @__PURE__ */ jsxs(
@@ -113,7 +113,7 @@ const DisplayValues = ({
       disabled,
       prominence: "default",
       sentiment: "neutral",
-      variant: size === "large" ? "body" : "bodySmall",
+      variant: textVariant,
       children: selectedData.selectedValues[0] ? findOptionInOptions(options, selectedData.selectedValues[0])?.label : null
     }
   );
@@ -280,6 +280,15 @@ const SelectBar = ({
     potentiallyNonOverflowedValues.length,
     selectedData.selectedValues
   ]);
+  const textVariant = useMemo(() => {
+    if (size === "large") {
+      return "body";
+    }
+    if (size === "medium") {
+      return "bodySmall";
+    }
+    return "caption";
+  }, [size]);
   return /* @__PURE__ */ jsx(Tooltip, { disableAnimation: true, text: tooltip, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -331,7 +340,7 @@ const SelectBar = ({
             readOnly,
             refPlusTag,
             refTag,
-            size
+            textVariant
           }
         ) : /* @__PURE__ */ jsx(
           Text,
@@ -341,7 +350,7 @@ const SelectBar = ({
             disabled,
             prominence: "weak",
             sentiment: "neutral",
-            variant: size === "large" ? "body" : "bodySmall",
+            variant: textVariant,
             children: placeholder
           }
         ),

package/dist/components/SelectInput/components/dropdown.css.d.ts

@@ -3,7 +3,14 @@ export declare const dropdown: string;
 export declare const dropdownContainer: string;
 export declare const dropdownContainerUnGrouped: string;
 export declare const dropdownGroup: string;
-export declare const dropdownGroupSelectable: string;
+export declare const dropdownGroupSelectable: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        small: {
+            paddingLeft: `var(--${string})`;
+        };
+        default: {};
+    };
+}>;
 export declare const dropdownGroupWrapper: string;
 export declare const emptyStateGroupStyle: string;
 export declare const dropdownItemBase: string;
@@ -13,6 +20,12 @@ export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<
             backgroundColor: `var(--${string})`;
         };
     };
+    size: {
+        default: {};
+        small: {
+            padding: `var(--${string})`;
+        };
+    };
     disabled: {
         true: {
             backgroundColor: `var(--${string})`;

package/dist/components/SelectInput/components/dropdown.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAQlC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAO/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAK3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;EAsCvB,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA;AAEF,eAAO,MAAM,cAAc,QAWzB,CAAA"}
+{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB;;;;;;;EAqBlC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAO/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAK3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CvB,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA;AAEF,eAAO,MAAM,cAAc,QAWzB,CAAA"}

package/dist/components/SelectInput/components/dropdown.css.js

@@ -5,19 +5,19 @@ var dropdown = "uv_5kpm8k1";
 var dropdownContainer = "uv_5kpm8k2";
 var dropdownContainerUnGrouped = "uv_5kpm8k3";
 var dropdownGroup = "uv_5kpm8k4";
-var dropdownGroupSelectable = "uv_5kpm8k5";
-var dropdownGroupWrapper = "uv_5kpm8k6";
-var emptyStateGroupStyle = "uv_5kpm8k7";
-var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k9 uv_5kpm8k8 uv_5kpm8k7", variantClassNames: { selected: { true: "uv_5kpm8ka" }, disabled: { true: "uv_5kpm8kb" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
-var footer = "uv_5kpm8kc";
-var dropdownCheckbox = "uv_5kpm8kd";
-var dropdownEmptyState = "uv_5kpm8ke";
-var dropdownLoadMore = "uv_5kpm8kf";
-var dropdownInfo = "uv_5kpm8kg";
-var dropdownInfoTextItem = "uv_5kpm8kh";
-var dropdownInfoContainer = "uv_5kpm8ki";
-var searchBar = "uv_5kpm8kj";
-var comboboxCreate = "uv_5kpm8kk uv_5kpm8k8 uv_5kpm8k7";
+var dropdownGroupSelectable = createRuntimeFn({ defaultClassName: "uv_5kpm8k5", variantClassNames: { size: { small: "uv_5kpm8k6", "default": "uv_5kpm8k7" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var dropdownGroupWrapper = "uv_5kpm8k8";
+var emptyStateGroupStyle = "uv_5kpm8k9";
+var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8kb uv_5kpm8ka uv_5kpm8k9", variantClassNames: { selected: { true: "uv_5kpm8kc" }, size: { "default": "uv_5kpm8kd", small: "uv_5kpm8ke" }, disabled: { true: "uv_5kpm8kf" } }, defaultVariants: { disabled: false, selected: false, size: "default" }, compoundVariants: [] });
+var footer = "uv_5kpm8kg";
+var dropdownCheckbox = "uv_5kpm8kh";
+var dropdownEmptyState = "uv_5kpm8ki";
+var dropdownLoadMore = "uv_5kpm8kj";
+var dropdownInfo = "uv_5kpm8kk";
+var dropdownInfoTextItem = "uv_5kpm8kl";
+var dropdownInfoContainer = "uv_5kpm8km";
+var searchBar = "uv_5kpm8kn";
+var comboboxCreate = "uv_5kpm8ko uv_5kpm8ka uv_5kpm8k9";
 export {
   comboboxCreate,
   dropdown,

package/dist/components/SelectInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/SelectInput/index.js

@@ -56,8 +56,9 @@ const SelectInput = ({
   const finalId = id ?? localId;
   const dropdownId = useId();
   const ref = useRef(null);
-  const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce(
-    (acc, current) => acc + current.filter((option) => !option.disabled).length,
+  const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce((acc, current) => acc + current.length, 0);
+  const numberOfDisabledOptions = Array.isArray(options) ? options.filter((option) => option.disabled).length : Object.values(options).reduce(
+    (acc, current) => acc + current.filter((option) => option.disabled).length,
     0
   );
   const finalDataTestId = dataTestId ?? `select-input-${name ?? "name"}`;
@@ -65,6 +66,7 @@ const SelectInput = ({
     SelectInputProvider,
     {
       multiselect,
+      numberOfDisabledOptions,
       numberOfOptions,
       onChange,
       onOpen,
@@ -72,6 +74,7 @@ const SelectInput = ({
       refSelect: ref,
       selectAll,
       selectAllGroup,
+      size,
       value,
       children: /* @__PURE__ */ jsxs(
         "div",
@@ -141,7 +144,7 @@ const SelectInput = ({
                 className: selectinputHelper,
                 prominence: "weak",
                 sentiment: "neutral",
-                variant: "caption",
+                variant: size === "small" ? "captionSmall" : "caption",
                 children: helper
               }
             ) : null,
@@ -152,7 +155,7 @@ const SelectInput = ({
                 className: selectinputHelper,
                 prominence: "default",
                 sentiment: error ? "danger" : "success",
-                variant: "caption",
+                variant: size === "small" ? "captionSmall" : "caption",
                 children: error || success
               }
             ) : null

package/dist/components/SelectableCard/IllustrationContainer.js

@@ -18,7 +18,7 @@ const IllustrationContainer = ({
   ) : null;
   useEffect(() => {
     if (illustration?.endsWith(".svg")) {
-      fetch(illustration).then((response) => response.text()).then((svg) => {
+      fetch(illustration).then(async (response) => response.text()).then((svg) => {
         const updatedSvg = svg.replace(
           /fill="[^"]*"/g,
           `fill="${theme.colors.neutral.backgroundStronger}"`