@dmsi/wedgekit-react 0.0.4 → 0.0.6

package/dist/components/FilterGroup.cjs

@@ -64,7 +64,7 @@ __export(FilterGroup_exports, {
   FilterGroupItem: () => FilterGroupItem
 });
 module.exports = __toCommonJS(FilterGroup_exports);
-var import_react = require("react");
+var import_react3 = require("react");
 
 // src/components/Label.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
@@ -394,6 +394,7 @@ var Checkbox = (_a) => {
         label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Paragraph,
           {
+            as: "span",
             padded: true,
             className: (0, import_clsx5.default)(
               "text-nowrap",
@@ -642,7 +643,7 @@ var OptionPill = (_a) => {
 OptionPill.displayName = "OptionPill";
 
 // src/components/FilterGroup.tsx
-var import_clsx9 = __toESM(require("clsx"), 1);
+var import_clsx10 = __toESM(require("clsx"), 1);
 
 // src/components/Link.tsx
 var import_clsx8 = __toESM(require("clsx"), 1);
@@ -721,8 +722,521 @@ var Link = (_a) => {
 };
 Link.displayName = "Link";
 
-// src/components/FilterGroup.tsx
+// src/components/Search.tsx
+var import_react2 = require("react");
+
+// src/components/Input.tsx
+var import_react = require("react");
+var import_clsx9 = __toESM(require("clsx"), 1);
+
+// src/utils/formatting.tsx
+function getDecimalPlaceholder(decimals) {
+  if (!decimals || decimals <= 0) {
+    return {};
+  }
+  return {
+    placeholder: `0.${"0".repeat(decimals)}`
+  };
+}
+function formatDecimalValue(value, decimals) {
+  if (!value || value === "") {
+    return "";
+  }
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numValue)) {
+    return "";
+  }
+  if (!decimals || decimals <= 0) {
+    return String(Math.round(numValue));
+  }
+  return numValue.toFixed(decimals);
+}
+function formatCurrencyDisplay(value) {
+  if (!value || value === "") {
+    return "";
+  }
+  const parts = value.split(".");
+  const integerPart = parts[0];
+  const decimalPart = parts[1];
+  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
+}
+
+// src/components/Input.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var InputBase = (_a) => {
+  var _b = _a, {
+    before,
+    after,
+    type,
+    label,
+    error,
+    className,
+    align = "left",
+    caption,
+    required,
+    selectOnFocus,
+    removeRoundness,
+    inputContainerRef,
+    removeBorder,
+    wrapperClassName,
+    focus
+  } = _b, props = __objRest(_b, [
+    "before",
+    "after",
+    "type",
+    "label",
+    "error",
+    "className",
+    "align",
+    "caption",
+    "required",
+    "selectOnFocus",
+    "removeRoundness",
+    "inputContainerRef",
+    "removeBorder",
+    "wrapperClassName",
+    "focus"
+  ]);
+  const attributes = {
+    "data-error": error && !focus || null,
+    "data-focus": focus || null
+  };
+  const inputRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    const input = inputRef.current;
+    const focusHandler = () => {
+      input == null ? void 0 : input.select();
+    };
+    if (selectOnFocus) {
+      (_a2 = inputRef.current) == null ? void 0 : _a2.addEventListener("focus", focusHandler);
+      return () => {
+        input == null ? void 0 : input.removeEventListener("focus", focusHandler);
+      };
+    }
+  }, [selectOnFocus]);
+  const inputBaseClass = (0, import_clsx9.default)(
+    "w-full",
+    "flex flex-row items-center",
+    "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
+    componentGap,
+    baseTransition,
+    "outline-transparent outline-2 -outline-offset-2",
+    componentPaddingMinusBorder,
+    !removeRoundness && "rounded-base",
+    !removeBorder && "border border-border-primary-normal",
+    "relative"
+  );
+  const inputFocusClass = (0, import_clsx9.default)(
+    "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
+  );
+  const inputDisabledClass = (0, import_clsx9.default)(
+    "has-disabled:bg-background-action-secondary-disabled"
+  );
+  const inputReadOnlyClass = (0, import_clsx9.default)(
+    "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
+  );
+  const inputInvalidClass = (0, import_clsx9.default)(
+    "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "label",
+    {
+      ref: inputContainerRef,
+      className: (0, import_clsx9.default)(
+        "w-full flex flex-col",
+        "block",
+        "text-text-primary-normal has-disabled:text-text-primary-disabled",
+        componentGap
+      ),
+      style: __spreadValues({}, props.style),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_clsx9.default)("flex items-center", componentGap), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Label,
+            {
+              className: (0, import_clsx9.default)(
+                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
+              ),
+              children: label
+            }
+          ),
+          required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "span",
+            {
+              className: (0, import_clsx9.default)(typography.label, "text-text-critical-normal"),
+              children: "*"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx9.default)(
+              inputBaseClass,
+              !props.disabled && inputInvalidClass,
+              inputFocusClass,
+              inputDisabledClass,
+              inputReadOnlyClass,
+              wrapperClassName
+            ),
+            children: [
+              before,
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "input",
+                __spreadProps(__spreadValues(__spreadValues({
+                  ref: (el) => {
+                    inputRef.current = el;
+                  },
+                  type,
+                  required
+                }, props), attributes), {
+                  id: props.id,
+                  className: (0, import_clsx9.default)(
+                    "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
+                    "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                    "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
+                    align === "right" && "text-right",
+                    align === "center" && "text-center",
+                    componentPaddingXUsingComponentGap,
+                    typography.paragraph,
+                    className,
+                    props.readOnly && !props.disabled && "!px-0"
+                  )
+                })
+              ),
+              after
+            ]
+          }
+        ),
+        caption
+      ]
+    }
+  );
+};
+var Input = (_a) => {
+  var _b = _a, {
+    variant = "default",
+    decimals,
+    uom,
+    removeSearchIcon,
+    value: propValue,
+    onChange,
+    onBlur,
+    onClear
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "decimals",
+    "uom",
+    "removeSearchIcon",
+    "value",
+    "onChange",
+    "onBlur",
+    "onClear"
+  ]);
+  const [internalValue, setInternalValue] = (0, import_react.useState)("");
+  const [displayValue, setDisplayValue] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    if (variant === "currency") {
+      if (propValue === void 0 || propValue === "" || typeof propValue === "number" && isNaN(propValue)) {
+        setInternalValue("");
+        setDisplayValue("");
+      } else {
+        const numValue = typeof propValue === "string" ? parseFloat(propValue) : propValue;
+        if (!isNaN(numValue)) {
+          const formatted = numValue.toFixed(decimals != null ? decimals : 2);
+          setInternalValue(formatted);
+          setDisplayValue(formatCurrencyDisplay(formatted));
+        }
+      }
+    } else {
+      setInternalValue(stringValue);
+      setDisplayValue(stringValue);
+    }
+  }, [propValue, decimals, variant]);
+  const getInputProps = () => {
+    var _a2;
+    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
+    switch (variant) {
+      case "search":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
+          className: "!mr-6",
+          value: displayValue
+        });
+      case "finder":
+        return baseProps;
+      case "currency":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          align: "right",
+          type: "text",
+          value: displayValue
+        });
+      case "percentage":
+      case "uom":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          type: "number",
+          align: "right"
+        });
+      default:
+        return baseProps;
+    }
+  };
+  const getBeforeElement = () => {
+    if (props.before) return props.before;
+    switch (variant) {
+      case "search":
+        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "search" }) }) : null;
+      case "currency":
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "attach_money" }) });
+      default:
+        return null;
+    }
+  };
+  const getAfterElement = () => {
+    if (props.after) return props.after;
+    switch (variant) {
+      case "search": {
+        const hasValue = displayValue.length > 0;
+        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Icon,
+          {
+            name: "close",
+            onClick: handleSearchReset,
+            className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
+          }
+        ) : null;
+      }
+      case "finder":
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "search" });
+      case "uom":
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
+      case "percentage":
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "percent" }) });
+      default:
+        return null;
+    }
+  };
+  const handleSearchReset = () => {
+    setInternalValue("");
+    setDisplayValue("");
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: "" }
+      };
+      if (typeof onChange === "function") {
+        onChange(syntheticEvent);
+      }
+    }
+    onClear == null ? void 0 : onClear();
+  };
+  const handleChange = (e) => {
+    const rawValue = e.target.value;
+    if (variant === "search") {
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
+    if (variant === "currency") {
+      const raw = rawValue.replace(/,/g, "");
+      if (raw === "") {
+        setInternalValue("");
+        setDisplayValue("");
+        if (onChange) {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: "" })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+      const regex = /^\d*\.?\d*$/;
+      if (!regex.test(raw)) return;
+      const parts = raw.split(".");
+      const currentDecimals = decimals != null ? decimals : 2;
+      if (parts.length === 2 && parts[1].length > currentDecimals) return;
+      setInternalValue(raw);
+      setDisplayValue(formatCurrencyDisplay(raw));
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && onChange) {
+        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
+        });
+        onChange(syntheticEvent);
+      }
+      return;
+    }
+    setInternalValue(rawValue);
+    setDisplayValue(rawValue);
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+  };
+  const handleBlur = (e) => {
+    if (variant === "currency") {
+      const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
+      setInternalValue(formatted);
+      setDisplayValue(formatCurrencyDisplay(formatted));
+      const asNumber = Number(formatted);
+      if (!isNaN(asNumber) && onChange) {
+        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
+        });
+        onChange(syntheticEvent);
+      }
+    } else if (variant === "uom" || variant === "percentage") {
+      const formattedValue = formatDecimalValue(e.target.value, decimals);
+      e.target.value = formattedValue;
+    }
+    onBlur == null ? void 0 : onBlur(e);
+  };
+  const inputProps = getInputProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    InputBase,
+    __spreadProps(__spreadValues({}, inputProps), {
+      before: getBeforeElement(),
+      after: getAfterElement(),
+      onChange: handleChange,
+      onBlur: handleBlur
+    })
+  );
+};
+Input.displayName = "Input";
+var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
+var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
+var Currency = (props) => {
+  var _a;
+  const handleCurrencyChange = (e) => {
+    var _a2;
+    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Input,
+    __spreadProps(__spreadValues({}, props), {
+      variant: "currency",
+      decimals: (_a = props.decimals) != null ? _a : 2,
+      onChange: handleCurrencyChange
+    })
+  );
+};
+var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
+Finder.displayName = "Finder";
+UOM.displayName = "UOM";
+Currency.displayName = "Currency";
+Percentage.displayName = "Percentage";
+
+// src/components/Search.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Search = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    children,
+    readOnly,
+    renderMenu,
+    onClick,
+    className,
+    wrapperClassName,
+    removeRoundness
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "children",
+    "readOnly",
+    "renderMenu",
+    "onClick",
+    "className",
+    "wrapperClassName",
+    "removeRoundness"
+  ]);
+  const inputRef = (0, import_react2.useRef)(null);
+  const inputContainerRef = (0, import_react2.useRef)(null);
+  const preventFocusOnInitialRender = (0, import_react2.useRef)(true);
+  const [show, setShow] = (0, import_react2.useState)(false);
+  const [clearing, setClearing] = (0, import_react2.useState)(false);
+  const uniqueId = (0, import_react2.useId)();
+  const searchMenuName = `search-menu-${uniqueId}`;
+  (0, import_react2.useEffect)(() => {
+    var _a2;
+    if (preventFocusOnInitialRender.current) {
+      preventFocusOnInitialRender.current = false;
+      return;
+    }
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  }, [props.value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Input,
+      __spreadValues({
+        variant: "search",
+        inputContainerRef,
+        ref: inputRef,
+        label,
+        wrapperClassName,
+        onClick: (e) => {
+          if (props.disabled || readOnly) {
+            return;
+          }
+          if (clearing) {
+            setClearing(false);
+            return;
+          }
+          onClick == null ? void 0 : onClick(e);
+          setShow(!show);
+        },
+        onClear: () => {
+          setClearing(true);
+        },
+        onKeyDown: (e) => {
+          setShow(true);
+          if (["ArrowUp", "ArrowDown"].includes(e.key)) {
+            e.preventDefault();
+            const menu = document.querySelector(`[data-menu="${searchMenuName}"]`);
+            const selectedMenuOption = menu == null ? void 0 : menu.querySelector("[data-selected]");
+            if (selectedMenuOption) {
+              const allMenuOptions = Array.from((menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []);
+              const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
+              let targetOption;
+              if (e.key === "ArrowDown") {
+                targetOption = allMenuOptions[currentIndex + 1] || allMenuOptions[0];
+              } else {
+                targetOption = allMenuOptions[currentIndex - 1] || allMenuOptions[allMenuOptions.length - 1];
+              }
+              targetOption == null ? void 0 : targetOption.focus();
+            } else {
+              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector('[role="menuitem"]:last-child');
+              toFocusMenuOption == null ? void 0 : toFocusMenuOption.focus();
+            }
+          }
+        },
+        error,
+        readOnly,
+        removeRoundness,
+        focus: show
+      }, props)
+    ),
+    renderMenu ? renderMenu({
+      positionTo: inputContainerRef,
+      show,
+      setShow,
+      topOffset: props.caption ? -16 : null,
+      autoFocusOff: true,
+      menuName: searchMenuName
+    }) : children
+  ] });
+};
+Search.displayName = "Search";
+
+// src/components/FilterGroup.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var FilterGroup = (_a) => {
   var _b = _a, {
     label,
@@ -731,7 +1245,10 @@ var FilterGroup = (_a) => {
     showMore = false,
     onShowMore,
     onClearAll,
-    children
+    children,
+    showSearchField = false,
+    searchValue,
+    onSearchChange
   } = _b, props = __objRest(_b, [
     "label",
     "type",
@@ -739,42 +1256,45 @@ var FilterGroup = (_a) => {
     "showMore",
     "onShowMore",
     "onClearAll",
-    "children"
+    "children",
+    "showSearchField",
+    "searchValue",
+    "onSearchChange"
   ]);
   const isSummary = type === "summary";
-  const [internalExpanded, setInternalExpanded] = (0, import_react.useState)(open);
-  const [showAllItems, setShowAllItems] = (0, import_react.useState)(false);
+  const [internalExpanded, setInternalExpanded] = (0, import_react3.useState)(open);
+  const [showAllItems, setShowAllItems] = (0, import_react3.useState)(false);
   const isExpanded = open || internalExpanded;
-  const childArray = import_react.Children.toArray(children).filter(import_react.isValidElement);
+  const childArray = import_react3.Children.toArray(children).filter(import_react3.isValidElement);
   const shouldShowAll = isSummary || showAllItems;
   const visibleChildren = childArray.slice(
     0,
     shouldShowAll ? childArray.length : 5
   );
   const showShowMoreLink = showMore && !isSummary && childArray.length > 5 && !showAllItems && isExpanded;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     __spreadProps(__spreadValues({}, props), {
-      className: (0, import_clsx9.default)(
+      className: (0, import_clsx10.default)(
         "border-b border-border-primary-normal",
         isSummary ? layoutPaddingBottom : componentPaddingBottom
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
-            className: (0, import_clsx9.default)(
+            className: (0, import_clsx10.default)(
               "flex items-center justify-between cursor-pointer",
               layoutGroupGap
             ),
             onClick: handleToggleExpanded,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label, { children: label }),
-              type !== "summary" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { children: label }),
+              type !== "summary" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 Icon,
                 {
                   name: "keyboard_arrow_down",
-                  className: (0, import_clsx9.default)(
+                  className: (0, import_clsx10.default)(
                     baseTransition.replace(
                       "transition-colors",
                       "transition-transform"
@@ -783,10 +1303,10 @@ var FilterGroup = (_a) => {
                     "text-icon-action-primary-normal"
                   )
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 Link,
                 {
-                  className: (0, import_clsx9.default)("block", componentPaddingY),
+                  className: (0, import_clsx10.default)("block", componentPaddingY),
                   onClick: handleClearAll,
                   children: "Clear All"
                 }
@@ -794,10 +1314,10 @@ var FilterGroup = (_a) => {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
-            className: (0, import_clsx9.default)(
+            className: (0, import_clsx10.default)(
               "grid",
               baseTransition.replace(
                 "transition-colors",
@@ -805,20 +1325,28 @@ var FilterGroup = (_a) => {
               ),
               isExpanded || isSummary ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "div",
               {
-                className: (0, import_clsx9.default)(
+                className: (0, import_clsx10.default)(
                   "overflow-hidden",
                   componentGap,
                   (isExpanded || isSummary || internalExpanded) && "mt-mobile-component-gap desktop:mt-desktop-component-gap compact:mt-desktop-compact-component-gap"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_clsx9.default)(isSummary && `flex flex-col ${componentGap}`), children: visibleChildren }),
-                  showShowMoreLink && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  !isSummary && showSearchField && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    Search,
+                    {
+                      style: { marginBottom: "2px" },
+                      onChange: onSearchChange,
+                      value: searchValue
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_clsx10.default)(isSummary && `flex flex-col ${componentGap}`), children: visibleChildren }),
+                  showShowMoreLink && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     Link,
                     {
-                      className: (0, import_clsx9.default)("block", "!items-start", componentPaddingY),
+                      className: (0, import_clsx10.default)("block", "!items-start", componentPaddingY),
                       onClick: handleOnShowMore,
                       children: "Show More"
                     }
@@ -856,18 +1384,18 @@ var FilterGroupItem = (_a) => {
     "children",
     "onClick"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     __spreadProps(__spreadValues({
       onClick: handleClick
     }, props), {
-      className: (0, import_clsx9.default)(
+      className: (0, import_clsx10.default)(
         "flex items-center justify-between *:first:flex-1 cursor-pointer",
         type !== "summary" ? "*:first:py-mobile-component-padding *:first:desktop:py-desktop-component-padding *:first:compact:py-desktop-compact-component-padding" : ""
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FilterGroupItemChildComponent, __spreadProps(__spreadValues({}, props), { type, count: props.count, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center justify-between w-full", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FilterGroupItemChildComponent, __spreadProps(__spreadValues({}, props), { type, count: props.count, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center justify-between w-full", children: [
         children,
-        type !== "summary" && props.count && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+        type !== "summary" && props.count && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
           "(",
           props.count,
           ")"
@@ -889,12 +1417,12 @@ var FilterGroupItemChildComponent = (_a) => {
     "children"
   ]);
   if (type === "checkbox") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Checkbox, __spreadValues({ paragraphClassName: "w-full", label: children }, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Checkbox, __spreadValues({ paragraphClassName: "w-full", label: children }, props));
   }
   if (type === "summary") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OptionPill, __spreadProps(__spreadValues({ removable: true }, props), { children })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OptionPill, __spreadProps(__spreadValues({ removable: true }, props), { children })) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Link, __spreadProps(__spreadValues({ variant: "secondary" }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Link, __spreadProps(__spreadValues({ variant: "secondary" }, props), { children }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {