@vodafone_de/brix-components 3.1.8 → 3.1.9

package/components/Stepper/index.js

@@ -1,204 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const hooks_useViewport = require("../../hooks/useViewport/index.js");
-const renderInlineRichTextFromOpenText = require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
-const styled = require("styled-components");
-const foundations_mediaQuery_forcedColors = require("../../foundations/media-query/forcedColors/index.js");
-const foundations_mediaQuery_viewport = require("../../index-DuE6C2cO.cjs");
-const foundations_token_getBodySize = require("../../foundations/token/getBodySize/index.js");
-const foundations_token_getBorderColor = require("../../foundations/token/getBorderColor/index.js");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const foundations_token_getFontWeight = require("../../foundations/token/getFontWeight/index.js");
-const foundations_token_getObjectColor = require("../../foundations/token/getObjectColor/index.js");
-const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
-const FontWeight = require("../../FontWeight-D3-RZpaX.cjs");
-const ObjectColor = require("../../ObjectColor-BrtIOUrJ.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const TextBodySize = require("../../TextBodySize-DeP5RE2m.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const StepperItemStyled = styled.li.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "StepperItemStyled",
-  componentId: "sc-6fjel6-0"
-})(({
-  isActive = false
-}) => {
-  return {
-    fontWeight: isActive ? foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightBold) : void 0,
-    position: "relative",
-    flex: 1,
-    textAlign: "center",
-    textIndent: isActive ? "0px" : "-9999px",
-    ...foundations_mediaQuery_viewport.viewport.md({
-      textIndent: "0px"
-    })
-  };
-}, ({
-  next
-}) => ({
-  // using :before to create the track between the dots
-  "&::before": {
-    ...foundations_mediaQuery_forcedColors.default({
-      background: "CanvasText"
-    }),
-    position: "absolute",
-    display: "block",
-    background: foundations_token_getBorderColor.getBorderColor(next ? BorderColor.colorBorderBrand : BorderColor.colorBorderNeutral),
-    content: "''",
-    width: "100%",
-    height: next ? "2px" : "1px",
-    top: "-17px",
-    ...foundations_mediaQuery_viewport.viewport.md({
-      top: "-20px"
-    }),
-    left: "-50%",
-    //move track behind dots
-    zIndex: 1
-  },
-  /* hide the first one,  because there is always one less gap in the fence than slats */
-  "&:first-child::before": {
-    display: "none"
-  }
-}), ({
-  isActive,
-  next
-}) => {
-  const boxShadow = {};
-  if (isActive) {
-    boxShadow.boxShadow = `0px 0px 0px 2px ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderInverse)}, 0px 0px 0px 4px ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderBrand)}`;
-  }
-  return {
-    // using :after to create the dots on the track
-    "&::after": {
-      ...foundations_mediaQuery_forcedColors.default({
-        background: next ? "CanvasText" : "Canvas",
-        borderWidth: isActive ? "2px" : "1px",
-        borderColor: isActive ? "Canvas" : foundations_token_getBorderColor.getBorderColor(next ? BorderColor.colorBorderBrand : BorderColor.colorBorderNeutral),
-        outline: isActive ? "2px solid CanvasText" : "none"
-      }),
-      position: "absolute",
-      display: "block",
-      background: foundations_token_getObjectColor.getObjectColor(next ? ObjectColor.colorObjectBrand : ObjectColor.colorObjectInverse),
-      content: "''",
-      width: "14px",
-      height: "14px",
-      ...foundations_mediaQuery_viewport.viewport.md({
-        width: "18px",
-        height: "18px"
-      }),
-      borderRadius: "20px",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      borderColor: foundations_token_getBorderColor.getBorderColor(next ? BorderColor.colorBorderBrand : BorderColor.colorBorderNeutral),
-      top: "-24px",
-      ...foundations_mediaQuery_viewport.viewport.md({
-        top: "-28px"
-      }),
-      left: "0",
-      right: 0,
-      margin: "auto",
-      ...boxShadow,
-      //move dots before track
-      zIndex: 2
-    }
-  };
-});
-const mobileOnly = (stylesInViewport) => {
-  return {
-    [`@media screen and (max-width: ${foundations_mediaQuery_viewport.breakpoint_medium_number - 1}px)`]: {
-      ...stylesInViewport
-    }
-  };
-};
-const StepperActiveItemStyled = styled.strong.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "StepperActiveItemStyled",
-  componentId: "sc-6fjel6-1"
-})(({
-  offset = 0
-}) => mobileOnly({
-  position: "absolute",
-  width: "max-content",
-  left: `50%`,
-  transform: "translateX(-50%)",
-  textAlign: "center",
-  zIndex: 3,
-  marginLeft: offset ? `${offset}px` : void 0
-}));
-const StepperStyled = styled.ol.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "StepperStyled",
-  componentId: "sc-6fjel6-2"
-})({
-  flexGrow: 1,
-  display: "flex",
-  paddingTop: "28px",
-  ...foundations_mediaQuery_viewport.viewport.md({
-    paddingTop: "32px"
-  }),
-  ...foundations_token_getBodySize.getBodySize(TextBodySize.textBodyMd)
-}, mobileOnly({
-  position: "relative"
-}), ({
-  bottomSpacing = Spacing.spacingMd
-}) => foundations_token_getBottomSpacing.getBottomSpacing({
-  bottomSpacing
-}));
-const getAriaLabel = ({
-  activeStep = 1,
-  steps,
-  ariaLabelTemplate
-}) => {
-  return ariaLabelTemplate.replace("%current%", activeStep.toString()).replace("%total%", steps.length.toString());
-};
-const Stepper = ({
-  activeStep = 1,
-  steps,
-  ariaLabelTemplate,
-  ...props
-}) => {
-  activeStep = Math.min(Math.max(activeStep, 1), steps.length);
-  const [offset, setOffset] = react.useState(0);
-  const stepperRef = react.useRef(null);
-  const viewport = hooks_useViewport.useViewport();
-  const check = () => {
-    if (null === stepperRef.current || "sm" !== viewport) {
-      return;
-    }
-    const listItemWidth = stepperRef.current.getElementsByTagName("li")[0].offsetWidth;
-    const activeWidth = stepperRef.current.getElementsByTagName("strong")[0].offsetWidth;
-    if (listItemWidth >= activeWidth) {
-      setOffset(0);
-      return;
-    }
-    const neededSpace = activeWidth / 2;
-    const availableSpaceRight = listItemWidth * (activeStep - 0.5);
-    const wholeSpace = listItemWidth * steps.length;
-    if (neededSpace + availableSpaceRight > wholeSpace) {
-      setOffset(wholeSpace - availableSpaceRight - neededSpace);
-      return;
-    }
-    const availableSpaceLeft = (activeStep - 0.5) * listItemWidth;
-    if (availableSpaceLeft > neededSpace) {
-      setOffset(0);
-      return;
-    }
-    setOffset(neededSpace - availableSpaceLeft);
-  };
-  react.useEffect(() => {
-    if (!stepperRef.current) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver(check);
-    resizeObserver.observe(stepperRef.current.getElementsByTagName("strong")[0]);
-    return () => resizeObserver.disconnect();
-  }, [activeStep]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "region", "aria-label": getAriaLabel({
-    activeStep,
-    steps,
-    ariaLabelTemplate
-  }), children: /* @__PURE__ */ jsxRuntime.jsx(StepperStyled, { ref: stepperRef, ...props, children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(StepperItemStyled, { isActive: index + 1 === activeStep, next: index < activeStep, children: index + 1 === activeStep ? /* @__PURE__ */ jsxRuntime.jsx(StepperActiveItemStyled, { offset, "aria-current": "step", children: renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(step) }) : renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(step) }, `${step}`)) }) });
-};
-module.exports = Stepper;

package/components/SuggestInput/index.js

@@ -1,386 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const index = require("../../index-_A9hEpl9.cjs");
-const react = require("react");
-const components_FlexItem = require("../FlexItem/index.js");
-const components_FormHelperLabel = require("../FormHelperLabel/index.js");
-const components_FormHelperMessage = require("../FormHelperMessage/index.js");
-const components_FormHelperStatusIcon = require("../FormHelperStatusIcon/index.js");
-const props = require("../../props-DJ2g0nfk.cjs");
-const styled$1 = require("../../styled-rjPMMnSd.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const renderInlineRichTextFromOpenText = require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
-const components_Body = require("../Body/index.js");
-const tags = require("../../tags-CTaUxoCi.cjs");
-const styled = require("styled-components");
-const components_Card = require("../Card/index.js");
-const foundations_mediaQuery_forcedColors = require("../../foundations/media-query/forcedColors/index.js");
-const foundations_token_getBodySize = require("../../foundations/token/getBodySize/index.js");
-const foundations_token_getBorderColor = require("../../foundations/token/getBorderColor/index.js");
-const foundations_token_getHoverColor = require("../../foundations/token/getHoverColor/index.js");
-const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
-const BackgroundColor = require("../../BackgroundColor-C3dayRDw.cjs");
-const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
-const TextBodySize = require("../../TextBodySize-DeP5RE2m.cjs");
-const components_Flex = require("../Flex/index.js");
-const components_LoadingSpinner = require("../LoadingSpinner/index.js");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const foundations_token_getOpacity = require("../../foundations/token/getOpacity/index.js");
-const foundations_token_getTextColor = require("../../foundations/token/getTextColor/index.js");
-const Opacity = require("../../Opacity-gfDZhzig.cjs");
-const TextColor = require("../../TextColor-BZDXH1wP.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const calculateListMaxHeight = (numberOfVisibleItems) => {
-  return `calc((${foundations_token_getSpacing.getSpacing(Spacing.spacingSm)} * 2 + ${foundations_token_getBodySize.getBodySize(TextBodySize.textBodyMd).fontSize} * ${foundations_token_getBodySize.getBodySize(TextBodySize.textBodyMd).lineHeight}) * ${numberOfVisibleItems})`;
-};
-const SuggestInputListWrapperStyled = styled(components_Card.default).withConfig({
-  displayName: "SuggestInputListWrapperStyled",
-  componentId: "sc-5e6nao-0"
-})({
-  ...foundations_mediaQuery_forcedColors.default({
-    background: "Field",
-    color: "fieldtext",
-    border: "none"
-  }),
-  position: "absolute",
-  maxHeight: 0,
-  overflow: "hidden",
-  transition: "max-height .2s cubic-bezier(0.445, 0.05, 0.55, 0.95)",
-  zIndex: 1,
-  "&&": {
-    padding: 0,
-    height: "fit-content"
-  }
-}, ({
-  showList
-}) => {
-  if (showList) {
-    return {
-      maxHeight: calculateListMaxHeight(5)
-    };
-  }
-});
-const SuggestInputListStyled = styled.ul.withConfig({
-  displayName: "SuggestInputListStyled",
-  componentId: "sc-5e6nao-1"
-})({
-  display: "flex",
-  flexDirection: "column",
-  overflowY: "auto",
-  maxHeight: calculateListMaxHeight(5)
-});
-const SuggestInputListItemStyled = styled.li.withConfig({
-  displayName: "SuggestInputListItemStyled",
-  componentId: "sc-5e6nao-2"
-})({
-  padding: `${foundations_token_getSpacing.getSpacing(Spacing.spacingSm)}`,
-  "&:hover": {
-    ...foundations_mediaQuery_forcedColors.default({
-      background: "Field"
-    }),
-    background: foundations_token_getHoverColor.getHoverColor(BackgroundColor.colorBackgroundNeutral),
-    cursor: "pointer"
-  },
-  "&:focus-visible": {
-    outline: "none"
-  }
-}, ({
-  isSelected
-}) => {
-  if (isSelected) {
-    return {
-      ...foundations_mediaQuery_forcedColors.default({
-        background: "SelectedItem",
-        color: "SelectedItemText"
-      }),
-      boxShadow: `inset 0px 0px 0px 4px ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus)} `,
-      background: foundations_token_getHoverColor.getHoverColor(BackgroundColor.colorBackgroundNeutral),
-      outline: "none"
-    };
-  }
-}, foundations_token_getBodySize.getBodySize(TextBodySize.textBodyMd));
-const highlightQuery = (label, query) => {
-  const lowerLabel = label.toLowerCase();
-  const lowerQuery = query.toLowerCase();
-  const index2 = lowerLabel.indexOf(lowerQuery);
-  if (query.length > 0 && index2 !== -1) {
-    const beforeQuery = label.slice(0, index2);
-    const afterQuery = label.slice(index2 + lowerQuery.length);
-    const boldQuery = /* @__PURE__ */ jsxRuntime.jsx(components_Body.default, { tag: tags.strongTagName, children: label.slice(index2, index2 + lowerQuery.length) });
-    return [beforeQuery, boldQuery, afterQuery];
-  }
-  return label;
-};
-const SuggestInputList = ({
-  listItems,
-  showList,
-  filterItems,
-  sortItems,
-  selectedOption,
-  listItemsRef,
-  pickOption,
-  uid,
-  query
-}) => {
-  const [options, setOptions] = react.useState(listItems);
-  react.useEffect(() => {
-    setOptions(listItems);
-  }, [listItems]);
-  return /* @__PURE__ */ jsxRuntime.jsx(SuggestInputListWrapperStyled, { showList, children: /* @__PURE__ */ jsxRuntime.jsx(SuggestInputListStyled, { role: "listbox", id: "listbox", children: options == null ? void 0 : options.filter((listItem) => filterItems(listItem.label)).sort((a, b) => {
-    return sortItems(query, a.label, b.label);
-  }).map((listItem, index2) => {
-    const isSelected = index2 === selectedOption;
-    return /* @__PURE__ */ jsxRuntime.jsx(SuggestInputListItemStyled, { ref: (el) => {
-      listItemsRef.current[index2] = el;
-    }, onMouseDown: () => pickOption(listItem.label), "aria-selected": isSelected ? "true" : void 0, isSelected, role: "option", id: `${uid}-item-${index2}`, children: highlightQuery(listItem.label, query) }, listItem.label);
-  }) }) });
-};
-const SuggestInputFormElementStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "SuggestInputFormElementStyled",
-  componentId: "sc-tvkime-0"
-})({
-  position: "relative"
-}, foundations_token_getBodySize.getBodySize("md"), ({
-  disabled
-}) => {
-  if (disabled) {
-    return {
-      pointerEvents: "none",
-      opacity: foundations_token_getOpacity.getOpacity(Opacity.opacityDisabled)
-    };
-  }
-  return {};
-}, foundations_token_getBottomSpacing.getBottomSpacing);
-const SuggestInputWrapperStyled = styled(styled$1.InputWrapperStyled).withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "SuggestInputWrapperStyled",
-  componentId: "sc-tvkime-1"
-})({
-  position: "relative",
-  ":focus, :focus-visible": {
-    outline: "none"
-  },
-  marginBottom: foundations_token_getSpacing.getSpacing(Spacing.spacingXs)
-});
-const SuggestInputIconsBarStyled = styled(components_Flex.default).withConfig({
-  displayName: "SuggestInputIconsBarStyled",
-  componentId: "sc-tvkime-2"
-})({
-  gap: `${foundations_token_getSpacing.getSpacing(Spacing.spacingXs)}`,
-  flexWrap: "nowrap",
-  height: "auto"
-});
-const SuggestInputIconButtonStyled = styled.button.withConfig({
-  displayName: "SuggestInputIconButtonStyled",
-  componentId: "sc-tvkime-3"
-})({
-  background: "none",
-  color: foundations_token_getTextColor.getTextColor(TextColor.colorTextNeutral),
-  flexGrow: 1,
-  "&:focus-visible": {
-    boxShadow: `${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus)} 0px 0px 0px 4px`
-  }
-}, ({
-  disabled
-}) => {
-  if (!disabled) {
-    return {
-      "&:hover": {
-        cursor: "pointer"
-      }
-    };
-  }
-});
-const SuggestInputLoadingSpinner = styled(components_LoadingSpinner).withConfig({
-  displayName: "SuggestInputLoadingSpinner",
-  componentId: "sc-tvkime-4"
-})({
-  ...foundations_mediaQuery_forcedColors.default({
-    stroke: "FieldText"
-  })
-});
-const SuggestInputFormElement = react.forwardRef(({
-  children,
-  ...props2
-}, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(SuggestInputFormElementStyled, { ...props2, ref, children });
-});
-const SuggestInput = react.forwardRef(({
-  bottomSpacing = Spacing.spacingMd,
-  isLoading = false,
-  label,
-  listItems,
-  errorMessage,
-  helperText,
-  onClose,
-  onPick,
-  onUpdate,
-  status,
-  uid,
-  disabled,
-  placeholder,
-  ...props$1
-}, outerRef) => {
-  const initialValueState = !props$1.value ? "" : props$1.value;
-  const [buttonIcon, setButtonIcon] = react.useState("ChevronDown");
-  const [selectedOption, setSelectedOption] = react.useState(-1);
-  const [showList, setShowList] = react.useState(false);
-  const [confirmedValue, setConfirmedValue] = react.useState(initialValueState);
-  const [value, setValue] = react.useState(initialValueState);
-  const messageId = `text-${uid}`;
-  const inputProps = {
-    ...props$1,
-    type: "text",
-    id: uid,
-    "aria-describedby": props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? messageId : void 0,
-    "aria-invalid": props.inputStateError === status ? true : void 0
-  };
-  const inputRef = react.useRef(null);
-  react.useImperativeHandle(outerRef, () => inputRef.current, []);
-  const formElementRef = react.useRef(null);
-  const listItemsRef = react.useRef([]);
-  react.useEffect(() => {
-    showList ? setButtonIcon("Close") : setButtonIcon("ChevronDown");
-    if (!showList) {
-      setSelectedOption(-1);
-    }
-  }, [showList]);
-  react.useEffect(() => {
-    if (!props$1.value) {
-      return;
-    }
-    setValue(props$1.value);
-    setConfirmedValue(props$1.value);
-  }, [props$1.value]);
-  react.useEffect(() => {
-    var _a;
-    document.addEventListener("click", onClick);
-    (_a = formElementRef.current) == null ? void 0 : _a.addEventListener("keydown", onKeyDown);
-    return () => {
-      var _a2;
-      document.removeEventListener("click", onClick);
-      (_a2 = formElementRef.current) == null ? void 0 : _a2.removeEventListener("keydown", onKeyDown);
-    };
-  });
-  const closeList = () => {
-    setValue(confirmedValue);
-    setShowList(false);
-    onClose && onClose();
-  };
-  const filterItems = (option) => {
-    if (props$1.filterItems) {
-      return props$1.filterItems(value, option);
-    }
-    const queryString = value.trim().toLowerCase();
-    const optionString = option.trim().toLowerCase();
-    return optionString.includes(queryString);
-  };
-  const sortItems = (value2, a, b) => {
-    if (props$1.sortItems) {
-      return props$1.sortItems(value2, a, b);
-    }
-    if (a === b) {
-      return 0;
-    }
-    if (a > b) {
-      return 1;
-    }
-    return -1;
-  };
-  const handleChange = (userInput) => {
-    if (!showList && !isLoading) setShowList(true);
-    setValue(userInput);
-    setSelectedOption(-1);
-    if (userInput === "") setConfirmedValue("");
-    onUpdate && onUpdate(userInput);
-  };
-  const pickOption = (value2) => {
-    var _a;
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
-    setShowList(false);
-    setValue(value2);
-    setConfirmedValue(value2);
-    onPick && onPick(value2);
-    onClose && onClose();
-  };
-  const onClick = (event) => {
-    if (formElementRef.current && !formElementRef.current.contains(event.target)) {
-      formElementRef.current.blur();
-      closeList();
-    }
-  };
-  const moveToOption = (option) => {
-    option.focus();
-    option.scrollIntoView({
-      block: "nearest",
-      inline: "nearest"
-    });
-  };
-  const onKeyDown = (event) => {
-    var _a;
-    switch (event.key) {
-      case "ArrowDown":
-        if (!showList) setShowList(true);
-        if (listItems && listItems.length > 0 && listItemsRef.current[selectedOption + 1]) {
-          moveToOption(listItemsRef.current[selectedOption + 1]);
-          setSelectedOption(selectedOption + 1);
-        } else {
-          moveToOption(listItemsRef.current[0]);
-          setSelectedOption(0);
-        }
-        break;
-      case "ArrowUp":
-        if (!showList) setShowList(true);
-        if (listItems && listItems.length > 0 && listItemsRef.current[selectedOption - 1]) {
-          moveToOption(listItemsRef.current[selectedOption - 1]);
-          setSelectedOption(selectedOption - 1);
-        } else if (listItems == null ? void 0 : listItems.length) {
-          moveToOption(listItemsRef.current[(listItems == null ? void 0 : listItems.length) - 1]);
-          setSelectedOption((listItems == null ? void 0 : listItems.length) - 1);
-        }
-        break;
-      case "Enter":
-        if (showList) {
-          pickOption(listItemsRef.current[selectedOption].innerText);
-          (_a = inputRef.current) == null ? void 0 : _a.setSelectionRange(value.length, value.length);
-        }
-        break;
-      case "Escape":
-        if (showList) {
-          closeList();
-        }
-        break;
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(SuggestInputFormElement, { tabIndex: 0, ref: formElementRef, bottomSpacing, disabled, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperLabel, { label, uid }),
-    /* @__PURE__ */ jsxRuntime.jsxs(SuggestInputWrapperStyled, { status, bottomSpacing: props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? Spacing.spacingXs : void 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(styled$1.InputStyled, { ...inputProps, ref: inputRef, onChange: (e) => handleChange(e.target.value), onClick: () => {
-        if (disabled) return;
-        setShowList(true);
-      }, role: "combobox", value, ...{
-        "aria-expanded": showList,
-        "aria-controls": "listbox",
-        "aria-activedescendant": selectedOption > -1 ? `${uid}-item-${selectedOption}` : void 0,
-        "aria-live": isLoading !== void 0 ? "polite" : void 0,
-        "aria-busy": isLoading ? isLoading : void 0,
-        "aria-autocomplete": "list"
-      }, disabled, placeholder: renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(placeholder) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(SuggestInputIconsBarStyled, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(components_FlexItem.default, { grow: "full", children: /* @__PURE__ */ jsxRuntime.jsx(SuggestInputLoadingSpinner, { size: "xs", isActive: isLoading }) }),
-        status && /* @__PURE__ */ jsxRuntime.jsx(components_FlexItem.default, { grow: "full", children: /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperStatusIcon.default, { status }) }),
-        listItems && listItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SuggestInputIconButtonStyled, { type: "button", onClick: () => {
-          if (disabled) return;
-          showList ? closeList() : setShowList(true);
-        }, tabIndex: -1, disabled, children: /* @__PURE__ */ jsxRuntime.jsx(index.IconLoader, { size: index.iconSizeSm, name: buttonIcon }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(SuggestInputList, { listItems, listItemsRef, filterItems, sortItems, pickOption, query: value, showList, selectedOption, uid, ...{
-      "aria-label": label
-    } }),
-    /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperMessage, { id: messageId, status, message: props.inputStateError === status ? errorMessage : helperText })
-  ] });
-});
-module.exports = SuggestInput;