@clickhouse/click-ui 0.0.206 → 0.0.208

package/dist/click-ui.bundled.es.js

@@ -1271,6 +1271,7 @@ const Blog = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 7v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z", clipRule: "evenodd" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m13.75 10.25-6 6" })
 ] });
+const Bold = (props) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M6.75 12H13.75C15.683 12 17.25 13.567 17.25 15.5V15.5C17.25 17.433 15.683 19 13.75 19H6.75V5H12.583C14.516 5 16.083 6.567 16.083 8.5V8.5C16.083 10.433 14.516 12 12.583 12", stroke: "#161517", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) });
 const Book = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 16.37a6.368 6.368 0 0 0-7.495-1.12c-.684.364-1.509-.085-1.509-.86V5.295c0-.637.294-1.249.812-1.618A6.367 6.367 0 0 1 12 4.364a6.367 6.367 0 0 1 8.191-.687c.518.37.813.981.813 1.618v9.095c0 .775-.826 1.225-1.509.86A6.368 6.368 0 0 0 12 16.37Z", clipRule: "evenodd" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4.505 19.387A6.368 6.368 0 0 1 12 20.507a6.368 6.368 0 0 1 7.495-1.12M12 16.37V4.363" })
@@ -1638,6 +1639,7 @@ const Integrations = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M10 9.056C9.094 7.818 7.652 7 6 7v0a5 5 0 0 0-5 5v0a5 5 0 0 0 5 5v0a5.299 5.299 0 0 0 4.543-2.572L12 12l1.457-2.428A5.299 5.299 0 0 1 18 7v0a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5v0c-1.652 0-3.094-.818-4-2.056" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m9.93 6.028.521 2.954-2.954.52" })
 ] });
+const Italic = (props) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M14.1821 18H5.45508H9.43508L14.5651 6H18.5451H9.81808", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) });
 const Key = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx("path", { d: "M15.0312 9.34226C15.0312 9.13526 14.8633 8.96826 14.6562 8.96826C14.4492 8.96926 14.2812 9.13726 14.2812 9.34426C14.2812 9.55126 14.4492 9.71926 14.6562 9.71826C14.8633 9.71826 15.0312 9.55026 15.0312 9.34326", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.499 14.7852L11.469 15.8172H9.637V17.2862H8.172V19.1222L6.798 20.5002H3.5V17.1952L9.223 11.4592C8.417 9.36524 8.849 6.90324 10.534 5.21424C12.814 2.92924 16.511 2.92924 18.791 5.21424C21.071 7.49924 21.071 11.2042 18.791 13.4902C17.089 15.1942 14.601 15.6242 12.499 14.7852Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -1682,6 +1684,22 @@ const LineInCircle = (props) => {
     /* @__PURE__ */ jsx("path", { d: "M8 16L16 8", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 };
+const ListBulleted = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M8.99902 6.43673H20.0036", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M20.0036 12.0002H8.99902", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8.99902 17.5632H20.0036", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M4.49728 5.93652C4.22102 5.93652 3.99707 6.16047 3.99707 6.43673C3.99707 6.71299 4.22102 6.93694 4.49728 6.93694C4.77354 6.93694 4.99749 6.71299 4.99749 6.43673C4.99749 6.16047 4.77354 5.93652 4.49728 5.93652", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M4.49728 11.5C4.22102 11.5 3.99707 11.724 3.99707 12.0002C3.99707 12.2765 4.22102 12.5004 4.49728 12.5004C4.77354 12.5004 4.99749 12.2765 4.99749 12.0002C4.99749 11.724 4.77354 11.5 4.49728 11.5", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M4.49728 17.063C4.22102 17.063 3.99707 17.2869 3.99707 17.5632C3.99707 17.8395 4.22102 18.0634 4.49728 18.0634C4.77354 18.0634 4.99749 17.8395 4.99749 17.5632C4.99749 17.2869 4.77354 17.063 4.49728 17.063", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+] });
+const ListNumbered = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 4H20", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11.1504 9H20.0004", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M6.5 9H4H5.25V4L4 5.25", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11 15H20", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11.1504 20H20.0004", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 15H6.5V17L4 18.5V20H6.75", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+] });
 const Loading = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.25, d: "M7.625 8.875H4.5V5.75" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19.5 12A7.495 7.495 0 0 0 5.188 8.875" }),
@@ -1900,6 +1918,10 @@ const TreeStructure = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", heig
   ] }),
   /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_7969_2214", children: /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
 ] });
+const Underline = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M6 20H18", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M17 4V11C17 13.761 14.761 16 12 16C9.239 16 7 13.761 7 11V4", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+] });
 const Upgrade = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_10418_503", fill: "white", children: /* @__PURE__ */ jsx("path", { d: "M16.1664 17.8179H7.83984V18.8864H16.1664V17.8179Z" }) }),
   /* @__PURE__ */ jsx("path", { d: "M7.83984 17.8179V16.5322H6.55413V17.8179H7.83984ZM16.1664 17.8179H17.4521V16.5322H16.1664V17.8179ZM16.1664 18.8864V20.1721H17.4521V18.8864H16.1664ZM7.83984 18.8864H6.55413V20.1721H7.83984V18.8864ZM7.83984 19.1036H16.1664V16.5322H7.83984V19.1036ZM14.8807 17.8179V18.8864H17.4521V17.8179H14.8807ZM16.1664 17.6007H7.83984V20.1721H16.1664V17.6007ZM9.12556 18.8864V17.8179H6.55413V18.8864H9.12556Z", fill: "white", mask: "url(#path-1-inside-1_10418_503)" }),
@@ -1939,6 +1961,7 @@ const ICONS_MAP = {
   bell: Bell,
   beta: Beta,
   blog: Blog,
+  bold: Bold,
   book: Book,
   brackets: Brackets,
   briefcase: Briefcase,
@@ -2013,6 +2036,7 @@ const ICONS_MAP = {
   information: InformationIcon,
   "insert-row": InsertRowIcon,
   integrations: Integrations,
+  italic: Italic,
   key: Key,
   keys: Keys,
   lifebuoy: Lifebuoy,
@@ -2020,6 +2044,8 @@ const ICONS_MAP = {
   "light-bulb-on": LightBulbOn,
   lightening: Lightening,
   "line-in-circle": LineInCircle,
+  "list-bulleted": ListBulleted,
+  "list-numbered": ListNumbered,
   loading: LoadingFlipped,
   "loading-animated": LoadingAnimated,
   lock: Lock,
@@ -2067,6 +2093,7 @@ const ICONS_MAP = {
   taxi: Taxi,
   trash: Trash,
   "tree-structure": TreeStructure,
+  underline: Underline,
   upgrade: Upgrade,
   upload: Upload,
   url: Url,
@@ -17000,7 +17027,6 @@ const Wrapper$3 = pt.div.withConfig({
       resize: ${$resize};
       overflow: auto;
     `}
-    padding: 0 ${theme2.click.field.space.x};
     ${$error ? `
       font: ${theme2.click.field.typography.fieldText.error};
       border: 1px solid ${theme2.click.field.color.stroke.error};
@@ -17084,9 +17110,13 @@ const InputWrapper = ({
 const InputElement = pt.input.withConfig({
   componentId: "sc-1pvd2nj-2"
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
-  theme: theme2
+  theme: theme2,
+  $hasStartContent,
+  $hasEndContent
 }) => `
     padding: ${theme2.click.field.space.y} 0;
+    padding-left: ${$hasStartContent ? "0" : theme2.click.field.space.x};
+    padding-right: ${$hasEndContent ? "0" : theme2.click.field.space.x};
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
@@ -17116,26 +17146,21 @@ const TextAreaElement = pt.textarea.withConfig({
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
   theme: theme2
 }) => `
-    padding: ${theme2.click.field.space.y} 0;
+    padding: ${theme2.click.field.space.y} ${theme2.click.field.space.x};
     align-self: stretch;
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
   `);
-pt(InputWrapper).withConfig({
-  componentId: "sc-1pvd2nj-5"
-})(["resize:vertical;overflow:auto;color:red;"]);
 const IconButton = pt.button.withConfig({
-  componentId: "sc-1pvd2nj-6"
+  componentId: "sc-1pvd2nj-5"
 })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
-  theme: theme2,
-  $show
+  theme: theme2
 }) => `
       padding: ${theme2.click.field.space.y} 0;
-      visibility: ${$show ? "visible" : "hidden"};
   `);
 pt.svg.withConfig({
-  componentId: "sc-1pvd2nj-7"
+  componentId: "sc-1pvd2nj-6"
 })(["", ""], ({
   theme: theme2
 }) => `
@@ -17146,6 +17171,29 @@ pt.svg.withConfig({
       padding-right: ${theme2.click.field.space.x};
     }
   `);
+const InputStartContent = pt.div.withConfig({
+  componentId: "sc-1pvd2nj-7"
+})(["", ""], ({
+  theme: theme2
+}) => `
+    padding-left: ${theme2.click.field.space.x};
+    cursor: text;
+    gap: ${theme2.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
+const InputEndContent = pt.div.withConfig({
+  componentId: "sc-1pvd2nj-8"
+})(["", ""], ({
+  theme: theme2
+}) => `
+    padding-right: ${theme2.click.field.space.x};
+    gap: ${theme2.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
 const locale = "en-US";
 const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
   day: "2-digit",
@@ -17171,8 +17219,8 @@ const DatePickerInput = ({
   const defaultId = useId();
   const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
   return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
-    /* @__PURE__ */ jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+    /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
+    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: true, "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
   ] });
 };
 const weekdayFormatter = new Intl.DateTimeFormat(locale, {
@@ -35092,9 +35140,10 @@ const PasswordField = forwardRef(({
   const onChange = (e) => {
     onChangeProp(e.target.value, e);
   };
+  const hasEndContent = value.length > 0;
   return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsx(InputElement, { ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
-    /* @__PURE__ */ jsx(IconButton, { disabled, onClick: togglePasswordViewer, $show: value.length > 0, children: /* @__PURE__ */ jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) })
+    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: false, $hasEndContent: hasEndContent, ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
+    hasEndContent && /* @__PURE__ */ jsx(InputEndContent, { children: /* @__PURE__ */ jsx(IconButton, { disabled, onClick: togglePasswordViewer, children: /* @__PURE__ */ jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) }) })
   ] });
 });
 const CustomSelect = pt.div.withConfig({
@@ -35253,7 +35302,7 @@ const ProgressContainer = pt.div.withConfig({
   $progress,
   $type
 }) => `
-    background: ${$completed ? theme2.click.field.color.background.default : `linear-gradient(to right, ${theme2.global.color.accent.default} 0%, ${theme2.global.color.accent.default} ${$progress}%, ${theme2.click.field.color.background.default} ${$progress}%,  ${theme2.click.field.color.background.default} 100%)`};
+    background: ${$completed && $type === "default" ? theme2.click.field.color.background.default : `linear-gradient(to right, ${theme2.global.color.accent.default} 0%, ${theme2.global.color.accent.default} ${$progress}%, ${theme2.click.field.color.background.default} ${$progress}%,  ${theme2.click.field.color.background.default} 100%)`};
     background-size: calc(100% + 2px);
     background-position: center;
     gap: ${theme2.click.field.space.gap};
@@ -35610,38 +35659,16 @@ const RadioGroupIndicator = pt($f99a8c78507165f7$export$adb584737d712b70).withCo
     }
   `);
 const SearchField = forwardRef(({
-  disabled,
-  label,
-  error: error2,
-  id,
-  loading,
-  clear = true,
-  value = "",
-  onChange: onChangeProp,
-  orientation,
-  dir,
   isFilter = false,
+  clear = true,
   ...props
 }, ref) => {
-  const inputRef = useRef(null);
-  const defaultId = useId();
-  const onChange = (e) => {
-    onChangeProp(e.target.value, e);
-  };
-  const clearInput = () => {
-    onChangeProp("");
-  };
-  return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }),
-    /* @__PURE__ */ jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type: "text", id: id ?? defaultId, disabled, value, onChange, ...props }),
-    clear && /* @__PURE__ */ jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", "data-testid": "search-close", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "sm" }) }),
-    loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
-  ] });
+  return /* @__PURE__ */ jsx(TextField, { startContent: /* @__PURE__ */ jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }), clear, ref, ...props });
 });
 const useUpdateEffect = (effect, deps) => {
   const isFirstMount = useRef(true);
   useEffect(() => {
-    if (isFirstMount) {
+    if (isFirstMount.current) {
       isFirstMount.current = false;
       return;
     }
@@ -39467,15 +39494,24 @@ const MultiSelectCheckboxItem = forwardRef(({
     selectedValues,
     onSelect
   } = useOption();
-  const onSelectValue = (evt) => {
+  const handleSelect = (evt) => {
     if (!disabled) {
       onSelect(value, void 0, evt);
-      if (typeof onSelectProp == "function") {
+      if (typeof onSelectProp === "function") {
         onSelectProp(value, void 0, evt);
       }
     }
   };
-  const onMouseOver = (e) => {
+  const handleMenuItemClick = (evt) => {
+    if (evt.target !== evt.currentTarget) {
+      return;
+    }
+    handleSelect(evt);
+  };
+  const handleCheckboxClick = (evt) => {
+    handleSelect(evt);
+  };
+  const handleMenuItemMouseOver = (e) => {
     if (onMouseOverProp) {
       onMouseOverProp(e);
     }
@@ -39487,11 +39523,8 @@ const MultiSelectCheckboxItem = forwardRef(({
     return null;
   }
   const isChecked = selectedValues.includes(value);
-  const onChange = () => {
-    onSelect(value);
-  };
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: [
+    /* @__PURE__ */ jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: [
       icon && iconDir === "start" && /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ? /* @__PURE__ */ jsxs("div", { style: {
         display: "flex",
         justifyContent: "center"
@@ -39504,9 +39537,9 @@ const MultiSelectCheckboxItem = forwardRef(({
       }, children: [
         /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" }),
         children
-      ] }), onClick: onChange, variant: variant ?? "default" }),
-      icon && iconDir === "end" && /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange, variant: variant ?? "default" }) }),
-      !icon && /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange, variant: variant ?? "default" })
+      ] }), onClick: handleCheckboxClick, variant: variant ?? "default" }),
+      icon && iconDir === "end" && /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" }) }),
+      !icon && /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" })
     ] }),
     separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
   ] });
@@ -41067,6 +41100,8 @@ const TextField = forwardRef(({
   onChange: onChangeProp,
   orientation,
   dir,
+  startContent,
+  endContent,
   ...props
 }, ref) => {
   const inputRef = useRef(null);
@@ -41077,10 +41112,21 @@ const TextField = forwardRef(({
   const clearInput = () => {
     onChangeProp("");
   };
+  const handleStartContentClick = () => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const hasStartContent = Boolean(startContent);
+  const hasClear = clear && value.length > 0;
+  const hasEndContent = Boolean(hasClear || loading || endContent);
   return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, labelColor, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
-    clear && /* @__PURE__ */ jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "sm" }) }),
-    loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
+    startContent && /* @__PURE__ */ jsx(InputStartContent, { onClick: handleStartContentClick, children: startContent }),
+    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: hasStartContent, $hasEndContent: hasEndContent, ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
+    hasEndContent && /* @__PURE__ */ jsxs(InputEndContent, { children: [
+      endContent ? endContent : null,
+      hasClear && /* @__PURE__ */ jsx(IconButton, { disabled, onClick: clearInput, "aria-label": "clear input", "data-testid": "textfield-clear", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "sm" }) }),
+      loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
+    ] })
   ] });
 });
 const $ea1ef594cf570d83$export$439d29a4e110a164 = /* @__PURE__ */ forwardRef((props, forwardedRef) => {