@ceed/cds 1.33.0 → 1.34.1

package/dist/index.cjs

@@ -157,6 +157,7 @@ __export(index_exports, {
   RadioGroup: () => RadioGroup,
   RadioList: () => RadioList,
   RadioTileGroup: () => RadioTileGroup,
+  SearchBar: () => SearchBar,
   Select: () => Select,
   Sheet: () => Sheet,
   Skeleton: () => import_joy61.Skeleton,
@@ -6974,6 +6975,92 @@ function RadioList(props) {
 }
 RadioList.displayName = "RadioList";
 
+// src/components/SearchBar/SearchBar.tsx
+var React43 = __toESM(require("react"));
+var import_styles = require("@mui/joy/styles");
+var import_Box5 = __toESM(require("@mui/joy/Box"));
+var import_SearchRounded = __toESM(require("@mui/icons-material/SearchRounded"));
+var import_CloseRounded = __toESM(require("@mui/icons-material/CloseRounded"));
+var SearchBarRoot = (0, import_styles.styled)(import_Box5.default, {
+  name: "SearchBar",
+  slot: "root",
+  shouldForwardProp: (prop) => prop !== "ownerState"
+})(({ theme, ownerState }) => ({
+  display: "inline-flex",
+  flexDirection: "row",
+  minWidth: "220px",
+  ...ownerState.showSelect && { maxWidth: "330px" },
+  backgroundColor: theme.vars.palette.background.surface,
+  borderRadius: theme.vars.radius.sm,
+  border: `1px solid ${theme.vars.palette.neutral.outlinedBorder}`,
+  overflow: "hidden",
+  flexShrink: 0
+}));
+var SearchBar = React43.forwardRef(function SearchBar2(inProps, ref) {
+  const props = (0, import_styles.useThemeProps)({ props: inProps, name: "SearchBar" });
+  const { showSelect = false, options, placeholder: placeholderProp, value, onChange, onSearch, ...other } = props;
+  const [selectVal, setSelectVal] = React43.useState(options?.[0]?.value ?? "");
+  const [isHovered, setIsHovered] = React43.useState(false);
+  const ownerState = { showSelect };
+  const selectedOption = options?.find((o) => o.value === selectVal);
+  const placeholder = placeholderProp ?? selectedOption?.placeholder ?? "";
+  const handleSearch = () => {
+    onSearch?.({ selectValue: showSelect ? selectVal : void 0, inputValue: value });
+  };
+  const handleClear = () => {
+    onChange("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+  return /* @__PURE__ */ React43.createElement(SearchBarRoot, { ref, ownerState, ...other }, showSelect && options && /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(
+    Select,
+    {
+      variant: "plain",
+      size: "sm",
+      color: "neutral",
+      value: selectVal,
+      options,
+      onChange: (_, newValue) => setSelectVal(newValue),
+      sx: { flex: 1, minWidth: "80px", maxWidth: "110px" },
+      slotProps: {
+        button: {
+          style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+        }
+      }
+    }
+  ), /* @__PURE__ */ React43.createElement(Divider, { orientation: "vertical", sx: { height: (theme) => theme.spacing(4), alignSelf: "center" } })), /* @__PURE__ */ React43.createElement(
+    Input,
+    {
+      variant: "plain",
+      size: "sm",
+      color: "neutral",
+      placeholder,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      onKeyDown: handleKeyDown,
+      sx: { flex: 1, minWidth: 0 },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      endDecorator: isHovered && value ? /* @__PURE__ */ React43.createElement(
+        IconButton,
+        {
+          variant: "plain",
+          size: "sm",
+          color: "neutral",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleClear,
+          "aria-label": "Clear"
+        },
+        /* @__PURE__ */ React43.createElement(import_CloseRounded.default, null)
+      ) : void 0
+    }
+  ), /* @__PURE__ */ React43.createElement(IconButton, { variant: "plain", size: "sm", color: "neutral", onClick: handleSearch, "aria-label": "Search" }, /* @__PURE__ */ React43.createElement(import_SearchRounded.default, null)));
+});
+SearchBar.displayName = "SearchBar";
+
 // src/components/Stepper/Stepper.tsx
 var import_react46 = __toESM(require("react"));
 var import_joy56 = require("@mui/joy");
@@ -7300,6 +7387,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
         }
       }
     },
+    SearchBar: {},
     JoyTypography: {
       defaultProps: {
         levelMapping: {

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { useTheme, useColorScheme, useThemeProps, ButtonGroup, alertClasses, boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, tabsClasses, tabListClasses, tabPanelClasses, accordionClasses, accordionDetailsClasses, accordionGroupClasses as accordionsClasses, accordionSummaryClasses, AutocompleteListbox, AutocompleteOption, autocompleteClasses, autocompleteListboxClasses, autocompleteOptionClasses, avatarClasses, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, breadcrumbsClasses, Card, cardClasses, CardActions, cardActionsClasses, CardContent, cardContentClasses, CardCover, cardCoverClasses, CardOverflow, cardOverflowClasses, Chip, chipClasses, CircularProgress, circularProgressClasses, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, stepClasses, StepButton, stepButtonClasses, stepperClasses, Skeleton, skeletonClasses, styled, } from '@mui/joy';
 export type { ButtonProps, Theme } from '@mui/joy';
-export { Autocomplete, Accordion, Alert, Accordions, AccordionDetails, AccordionSummary, Avatar, AvatarGroup, Box, Breadcrumbs, Button, Calendar, Checkbox, Container, CurrencyInput, DataTable, DatePicker, DateRangePicker, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Drawer, Dropdown, extendTheme, FilterableCheckboxGroup, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, IconMenuButton, InfoSign, Input, Markdown, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, MonthPicker, MonthRangePicker, NavigationGroup, NavigationItem, Navigator, Pagination, PercentageInput, Radio, RadioGroup, RadioTileGroup, RadioList, Select, Step, StepIndicator, Stepper, Option, Sheet, Stack, Switch, theme, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, Uploader, } from './components';
+export { Autocomplete, Accordion, Alert, Accordions, AccordionDetails, AccordionSummary, Avatar, AvatarGroup, Box, Breadcrumbs, Button, Calendar, Checkbox, Container, CurrencyInput, DataTable, DatePicker, DateRangePicker, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Drawer, Dropdown, extendTheme, FilterableCheckboxGroup, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, IconMenuButton, InfoSign, Input, Markdown, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, MonthPicker, MonthRangePicker, NavigationGroup, NavigationItem, Navigator, Pagination, PercentageInput, Radio, RadioGroup, RadioTileGroup, RadioList, SearchBar, Select, Step, StepIndicator, Stepper, Option, Sheet, Stack, Switch, theme, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, Uploader, } from './components';

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   useTheme as useTheme2,
   useColorScheme,
-  useThemeProps as useThemeProps9,
+  useThemeProps as useThemeProps10,
   ButtonGroup,
   alertClasses,
   boxClasses,
@@ -96,7 +96,7 @@ import {
   stepperClasses,
   Skeleton as Skeleton2,
   skeletonClasses,
-  styled as styled31
+  styled as styled32
 } from "@mui/joy";
 
 // src/components/Accordions/Accordions.tsx
@@ -6876,23 +6876,109 @@ function RadioList(props) {
 }
 RadioList.displayName = "RadioList";
 
+// src/components/SearchBar/SearchBar.tsx
+import * as React43 from "react";
+import { styled as styled27, useThemeProps as useThemeProps9 } from "@mui/joy/styles";
+import Box2 from "@mui/joy/Box";
+import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+var SearchBarRoot = styled27(Box2, {
+  name: "SearchBar",
+  slot: "root",
+  shouldForwardProp: (prop) => prop !== "ownerState"
+})(({ theme, ownerState }) => ({
+  display: "inline-flex",
+  flexDirection: "row",
+  minWidth: "220px",
+  ...ownerState.showSelect && { maxWidth: "330px" },
+  backgroundColor: theme.vars.palette.background.surface,
+  borderRadius: theme.vars.radius.sm,
+  border: `1px solid ${theme.vars.palette.neutral.outlinedBorder}`,
+  overflow: "hidden",
+  flexShrink: 0
+}));
+var SearchBar = React43.forwardRef(function SearchBar2(inProps, ref) {
+  const props = useThemeProps9({ props: inProps, name: "SearchBar" });
+  const { showSelect = false, options, placeholder: placeholderProp, value, onChange, onSearch, ...other } = props;
+  const [selectVal, setSelectVal] = React43.useState(options?.[0]?.value ?? "");
+  const [isHovered, setIsHovered] = React43.useState(false);
+  const ownerState = { showSelect };
+  const selectedOption = options?.find((o) => o.value === selectVal);
+  const placeholder = placeholderProp ?? selectedOption?.placeholder ?? "";
+  const handleSearch = () => {
+    onSearch?.({ selectValue: showSelect ? selectVal : void 0, inputValue: value });
+  };
+  const handleClear = () => {
+    onChange("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+  return /* @__PURE__ */ React43.createElement(SearchBarRoot, { ref, ownerState, ...other }, showSelect && options && /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(
+    Select,
+    {
+      variant: "plain",
+      size: "sm",
+      color: "neutral",
+      value: selectVal,
+      options,
+      onChange: (_, newValue) => setSelectVal(newValue),
+      sx: { flex: 1, minWidth: "80px", maxWidth: "110px" },
+      slotProps: {
+        button: {
+          style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+        }
+      }
+    }
+  ), /* @__PURE__ */ React43.createElement(Divider, { orientation: "vertical", sx: { height: (theme) => theme.spacing(4), alignSelf: "center" } })), /* @__PURE__ */ React43.createElement(
+    Input,
+    {
+      variant: "plain",
+      size: "sm",
+      color: "neutral",
+      placeholder,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      onKeyDown: handleKeyDown,
+      sx: { flex: 1, minWidth: 0 },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      endDecorator: isHovered && value ? /* @__PURE__ */ React43.createElement(
+        IconButton,
+        {
+          variant: "plain",
+          size: "sm",
+          color: "neutral",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleClear,
+          "aria-label": "Clear"
+        },
+        /* @__PURE__ */ React43.createElement(CloseRoundedIcon, null)
+      ) : void 0
+    }
+  ), /* @__PURE__ */ React43.createElement(IconButton, { variant: "plain", size: "sm", color: "neutral", onClick: handleSearch, "aria-label": "Search" }, /* @__PURE__ */ React43.createElement(SearchRoundedIcon, null)));
+});
+SearchBar.displayName = "SearchBar";
+
 // src/components/Stepper/Stepper.tsx
-import React43 from "react";
+import React44 from "react";
 import {
   Stepper as JoyStepper,
   Step as JoyStep,
   StepIndicator as JoyStepIndicator,
   stepClasses,
   stepIndicatorClasses,
-  styled as styled27
+  styled as styled28
 } from "@mui/joy";
 import CheckIcon from "@mui/icons-material/Check";
 import { motion as motion27 } from "framer-motion";
-var Step = styled27(JoyStep)({});
+var Step = styled28(JoyStep)({});
 Step.displayName = "Step";
-var StepIndicator = styled27(JoyStepIndicator)({});
+var StepIndicator = styled28(JoyStepIndicator)({});
 StepIndicator.displayName = "StepIndicator";
-var StyledStepper = styled27(JoyStepper)(({ theme }) => ({
+var StyledStepper = styled28(JoyStepper)(({ theme }) => ({
   "--StepIndicator-size": "24px",
   "--Step-gap": theme.spacing(2),
   "--joy-palette-success-solidBg": "var(--joy-palette-success-400)",
@@ -6913,7 +6999,7 @@ function Stepper(props) {
     stepOrientation = "horizontal"
   } = props;
   const effectiveStepOrientation = orientation === "vertical" ? "horizontal" : stepOrientation;
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     MotionStepper,
     {
       orientation,
@@ -6952,23 +7038,23 @@ function Stepper(props) {
       const completed = activeStep > i + 1;
       const disabled = activeStep < i + 1;
       const hasContent = step.label || step.extraContent;
-      return /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement(
         Step,
         {
           key: `step-${i}`,
-          indicator: /* @__PURE__ */ React43.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ React43.createElement(CheckIcon, null) : step.indicatorContent),
+          indicator: /* @__PURE__ */ React44.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ React44.createElement(CheckIcon, null) : step.indicatorContent),
           active,
           completed,
           disabled,
           orientation: effectiveStepOrientation
         },
-        hasContent && /* @__PURE__ */ React43.createElement(
+        hasContent && /* @__PURE__ */ React44.createElement(
           Stack_default,
           {
             sx: orientation === "horizontal" && effectiveStepOrientation === "vertical" ? { alignItems: "center" } : {}
           },
-          step.label && /* @__PURE__ */ React43.createElement(Typography_default, { level: "title-sm" }, step.label),
-          step.extraContent && /* @__PURE__ */ React43.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
+          step.label && /* @__PURE__ */ React44.createElement(Typography_default, { level: "title-sm" }, step.label),
+          step.extraContent && /* @__PURE__ */ React44.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
         )
       );
     })
@@ -6977,11 +7063,11 @@ function Stepper(props) {
 Stepper.displayName = "Stepper";
 
 // src/components/Switch/Switch.tsx
-import React44 from "react";
-import { Switch as JoySwitch, styled as styled28, switchClasses } from "@mui/joy";
+import React45 from "react";
+import { Switch as JoySwitch, styled as styled29, switchClasses } from "@mui/joy";
 import { motion as motion28 } from "framer-motion";
 var MotionSwitch = motion28(JoySwitch);
-var StyledThumb = styled28(motion28.div)({
+var StyledThumb = styled29(motion28.div)({
   "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
   display: "inline-flex",
   justifyContent: "center",
@@ -6999,14 +7085,14 @@ var StyledThumb = styled28(motion28.div)({
     right: "var(--Switch-thumbOffset)"
   }
 });
-var Thumb = (props) => /* @__PURE__ */ React44.createElement(StyledThumb, { ...props, layout: true, transition: spring });
+var Thumb = (props) => /* @__PURE__ */ React45.createElement(StyledThumb, { ...props, layout: true, transition: spring });
 var spring = {
   type: "spring",
   stiffness: 700,
   damping: 30
 };
 var Switch = (props) => {
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(
     MotionSwitch,
     {
       ...props,
@@ -7020,21 +7106,21 @@ var Switch = (props) => {
 Switch.displayName = "Switch";
 
 // src/components/Tabs/Tabs.tsx
-import React45, { forwardRef as forwardRef11 } from "react";
+import React46, { forwardRef as forwardRef12 } from "react";
 import {
   Tabs as JoyTabs,
   Tab as JoyTab,
   TabList as JoyTabList,
   TabPanel as JoyTabPanel,
-  styled as styled29,
+  styled as styled30,
   tabClasses
 } from "@mui/joy";
-var StyledTabs = styled29(JoyTabs)(({ theme }) => ({
+var StyledTabs = styled30(JoyTabs)(({ theme }) => ({
   backgroundColor: theme.palette.background.body
 }));
 var Tabs = StyledTabs;
 Tabs.displayName = "Tabs";
-var StyledTab = styled29(JoyTab)(({ theme }) => ({
+var StyledTab = styled30(JoyTab)(({ theme }) => ({
   gap: theme.spacing(2),
   [`&:not(.${tabClasses.selected})`]: {
     color: theme.palette.neutral[700]
@@ -7043,15 +7129,15 @@ var StyledTab = styled29(JoyTab)(({ theme }) => ({
     backgroundColor: theme.palette.background.body
   }
 }));
-var Tab = forwardRef11(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
-  return /* @__PURE__ */ React45.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
+var Tab = forwardRef12(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
+  return /* @__PURE__ */ React46.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
 });
 Tab.displayName = "Tab";
 var TabList = JoyTabList;
 var TabPanel = JoyTabPanel;
 
 // src/components/ThemeProvider/ThemeProvider.tsx
-import React46 from "react";
+import React47 from "react";
 import {
   CssBaseline,
   CssVarsProvider,
@@ -7222,6 +7308,7 @@ var defaultTheme = extendTheme({
         }
       }
     },
+    SearchBar: {},
     JoyTypography: {
       defaultProps: {
         levelMapping: {
@@ -7307,13 +7394,13 @@ var defaultTheme = extendTheme({
 });
 function ThemeProvider(props) {
   const theme = props.theme || defaultTheme;
-  return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React46.createElement(CssBaseline, null), props.children));
+  return /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React47.createElement(CssBaseline, null), props.children));
 }
 ThemeProvider.displayName = "ThemeProvider";
 
 // src/components/Uploader/Uploader.tsx
-import React47, { useCallback as useCallback18, useEffect as useEffect13, useMemo as useMemo15, useRef as useRef12, useState as useState16 } from "react";
-import { styled as styled30, Input as Input2 } from "@mui/joy";
+import React48, { useCallback as useCallback18, useEffect as useEffect13, useMemo as useMemo15, useRef as useRef12, useState as useState17 } from "react";
+import { styled as styled31, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
 import MuiClearIcon from "@mui/icons-material/ClearRounded";
@@ -7335,7 +7422,7 @@ var esmFiles = {
     "@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
   )
 };
-var VisuallyHiddenInput = styled30(Input2)({
+var VisuallyHiddenInput = styled31(Input2)({
   width: "1px",
   height: "1px",
   overflow: "hidden",
@@ -7344,18 +7431,18 @@ var VisuallyHiddenInput = styled30(Input2)({
   clipPath: "inset(50%)",
   position: "absolute"
 });
-var PreviewRoot = styled30(Stack_default, {
+var PreviewRoot = styled31(Stack_default, {
   name: "Uploader",
   slot: "PreviewRoot"
 })({});
-var UploadCard = styled30(Card, {
+var UploadCard = styled31(Card, {
   name: "Uploader",
   slot: "UploadCard"
 })(({ theme }) => ({
   padding: theme.spacing(2.5),
   border: `1px solid ${theme.palette.neutral.outlinedBorder}`
 }));
-var UploadFileIcon = styled30(MuiUploadFileIcon, {
+var UploadFileIcon = styled31(MuiUploadFileIcon, {
   name: "Uploader",
   slot: "UploadFileIcon"
 })(({ theme }) => ({
@@ -7363,7 +7450,7 @@ var UploadFileIcon = styled30(MuiUploadFileIcon, {
   width: "32px",
   height: "32px"
 }));
-var ClearIcon2 = styled30(MuiClearIcon, {
+var ClearIcon2 = styled31(MuiClearIcon, {
   name: "Uploader",
   slot: "ClearIcon"
 })(({ theme }) => ({
@@ -7389,7 +7476,7 @@ var getFileSize = (n) => {
 };
 var Preview = (props) => {
   const { files, uploaded, onDelete } = props;
-  return /* @__PURE__ */ React47.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ React47.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ React47.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ React47.createElement(UploadFileIcon, null), /* @__PURE__ */ React47.createElement(Stack_default, { flex: "1", sx: { overflow: "hidden" } }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ React48.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ React48.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ React48.createElement(UploadFileIcon, null), /* @__PURE__ */ React48.createElement(Stack_default, { flex: "1", sx: { overflow: "hidden" } }, /* @__PURE__ */ React48.createElement(
     Typography_default,
     {
       level: "body-sm",
@@ -7401,15 +7488,15 @@ var Preview = (props) => {
       }
     },
     file.name
-  ), !!file.size && /* @__PURE__ */ React47.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ React47.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React47.createElement(ClearIcon2, null))))));
+  ), !!file.size && /* @__PURE__ */ React48.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ React48.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React48.createElement(ClearIcon2, null))))));
 };
-var UploaderRoot = styled30(Stack_default, {
+var UploaderRoot = styled31(Stack_default, {
   name: "Uploader",
   slot: "root"
 })(({ theme }) => ({
   gap: theme.spacing(2)
 }));
-var FileDropZone = styled30(Sheet_default, {
+var FileDropZone = styled31(Sheet_default, {
   name: "Uploader",
   slot: "dropZone",
   shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
@@ -7430,7 +7517,7 @@ var FileDropZone = styled30(Sheet_default, {
     }
   })
 );
-var UploaderIcon = styled30(MuiFileUploadIcon, {
+var UploaderIcon = styled31(MuiFileUploadIcon, {
   name: "Uploader",
   slot: "iconContainer",
   shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
@@ -7444,7 +7531,7 @@ var UploaderIcon = styled30(MuiFileUploadIcon, {
     }
   })
 );
-var Uploader = React47.memo(
+var Uploader = React48.memo(
   (props) => {
     const {
       accept,
@@ -7463,10 +7550,10 @@ var Uploader = React47.memo(
     } = props;
     const dropZoneRef = useRef12(null);
     const inputRef = useRef12(null);
-    const [errorText, setErrorText] = useState16();
-    const [files, setFiles] = useState16([]);
-    const [uploaded, setUploaded] = useState16(props.uploaded || []);
-    const [previewState, setPreviewState] = useState16("idle");
+    const [errorText, setErrorText] = useState17();
+    const [files, setFiles] = useState17([]);
+    const [uploaded, setUploaded] = useState17(props.uploaded || []);
+    const [previewState, setPreviewState] = useState17("idle");
     const accepts = useMemo15(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
     const parsedAccepts = useMemo15(
       () => accepts.flatMap((type) => {
@@ -7634,7 +7721,7 @@ var Uploader = React47.memo(
     const handleUploaderButtonClick = useCallback18(() => {
       inputRef.current?.click();
     }, []);
-    const uploader = /* @__PURE__ */ React47.createElement(
+    const uploader = /* @__PURE__ */ React48.createElement(
       FileDropZone,
       {
         state: previewState,
@@ -7643,8 +7730,8 @@ var Uploader = React47.memo(
         ref: dropZoneRef,
         onClick: handleUploaderButtonClick
       },
-      /* @__PURE__ */ React47.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React47.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText), disabled })),
-      /* @__PURE__ */ React47.createElement(
+      /* @__PURE__ */ React48.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React48.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText), disabled })),
+      /* @__PURE__ */ React48.createElement(
         VisuallyHiddenInput,
         {
           disabled,
@@ -7667,7 +7754,7 @@ var Uploader = React47.memo(
         }
       )
     );
-    return /* @__PURE__ */ React47.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ React47.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ React47.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ React47.createElement(FormHelperText_default, null, /* @__PURE__ */ React47.createElement(Stack_default, null, errorText && /* @__PURE__ */ React47.createElement("div", null, errorText), /* @__PURE__ */ React47.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ React47.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
+    return /* @__PURE__ */ React48.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ React48.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ React48.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ React48.createElement(FormHelperText_default, null, /* @__PURE__ */ React48.createElement(Stack_default, null, errorText && /* @__PURE__ */ React48.createElement("div", null, errorText), /* @__PURE__ */ React48.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ React48.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
   }
 );
 Uploader.displayName = "Uploader";
@@ -7749,6 +7836,7 @@ export {
   RadioGroup,
   RadioList,
   RadioTileGroup,
+  SearchBar,
   Select,
   Sheet,
   Skeleton2 as Skeleton,
@@ -7833,7 +7921,7 @@ export {
   stepButtonClasses,
   stepClasses2 as stepClasses,
   stepperClasses,
-  styled31 as styled,
+  styled32 as styled,
   switchClasses2 as switchClasses,
   tabListClasses,
   tabPanelClasses,
@@ -7845,5 +7933,5 @@ export {
   typographyClasses,
   useColorScheme,
   useTheme2 as useTheme,
-  useThemeProps9 as useThemeProps
+  useThemeProps10 as useThemeProps
 };

package/dist/llms.txt

@@ -39,6 +39,7 @@
 - [Radio](./components/inputs/RadioButton.md)
 - [RadioList](./components/inputs/RadioList.md)
 - [RadioTileGroup](./components/inputs/RadioTileGroup.md)
+- [SearchBar](./components/inputs/SearchBar.md)
 - [Select](./components/inputs/Select.md)
 - [Slider](./components/inputs/Slider.md)
 - [Switch](./components/inputs/Switch.md)