@vodafone_de/brix-components 3.0.1 → 3.0.2

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,197 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, createElement } from "react";
+import Fieldset from "../Fieldset/index.js";
+import Flex from "../Flex/index.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import { a as spacingXs, b as spacingNone, c as spacingSm } from "../../Spacing-D0HQH9YJ.js";
+import styled from "styled-components";
+import Label from "../Label/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { getOpacity } from "../../foundations/token/getOpacity/index.js";
+import { c as colorBorderFocus, e as colorBorderCritical, i as colorBorderSelected, b as colorBorderUnselected } from "../../BorderColor-BummoQ1-.js";
+import { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
+import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
+import { b as colorObjectSelected, a as colorObjectInverse } from "../../ObjectColor-BZDBuV8H.js";
+import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const RadioContainer = styled(Flex).withConfig({
+  shouldForwardProp: filterProps(["disabled"]),
+  displayName: "RadioContainer",
+  componentId: "sc-qti4z3-0"
+})({
+  alignItems: "flex-start",
+  width: "max-content",
+  flexWrap: "nowrap"
+}, ({
+  disabled
+}) => {
+  if (disabled) {
+    return {
+      pointerEvents: "none",
+      opacity: getOpacity(opacityDisabled)
+    };
+  }
+});
+const RadioStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "RadioStyled",
+  componentId: "sc-qti4z3-1"
+})({
+  position: "relative",
+  width: `calc(${getBodySize("md").fontSize} * ${getBodySize("md").lineHeight})`,
+  height: `calc(${getBodySize("md").fontSize} * ${getBodySize("md").lineHeight})`,
+  cursor: "pointer",
+  "&:has(:focus-visible)": {
+    svg: {
+      outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
+      borderRadius: getBorderRadius(borderRadiusFull),
+      ...forcedColors({
+        outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+      })
+    }
+  }
+});
+const RadioInputStyled = styled.input.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "RadioInputStyled",
+  componentId: "sc-qti4z3-2"
+})({
+  position: "absolute",
+  width: "100%",
+  height: "100%",
+  top: 0,
+  left: 0,
+  zIndex: 1,
+  margin: 0,
+  padding: 0,
+  cursor: "inherit",
+  appearance: "none",
+  "&:focus, &:focus-visible": {
+    outline: "none"
+  }
+});
+const RadioLabelStyled = styled(Label).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "RadioLabelStyled",
+  componentId: "sc-qti4z3-3"
+})({
+  cursor: "pointer"
+});
+const RadioSVGStyled = styled.svg.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "RadioSVGStyled",
+  componentId: "sc-qti4z3-4"
+})({
+  fill: "none",
+  width: "inherit",
+  height: "inherit"
+});
+const RadioFillingCircleStyled = styled.circle.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "RadioFillingCircleStyled",
+  componentId: "sc-qti4z3-5"
+})({
+  fill: getObjectColor(colorObjectSelected)
+}, forcedColors({
+  fill: "FieldText"
+}));
+const RadioBorderPathStyled = styled.circle.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "RadioBorderPathStyled",
+  componentId: "sc-qti4z3-6"
+})({
+  fill: getObjectColor(colorObjectInverse)
+}, forcedColors({
+  fill: "Field"
+}), ({
+  checked,
+  status
+}) => {
+  return {
+    stroke: status === inputStateError ? getBorderColor(colorBorderCritical) : checked ? getBorderColor(colorBorderSelected) : getBorderColor(colorBorderUnselected),
+    ...forcedColors({
+      stroke: "FieldText"
+    })
+  };
+});
+const RadioSVG = ({
+  checked,
+  status
+}) => /* @__PURE__ */ jsxs(RadioSVGStyled, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 26", fill: "none", children: [
+  /* @__PURE__ */ jsx(RadioBorderPathStyled, { cx: "13", cy: "13", r: "12.5", checked, status }),
+  checked && /* @__PURE__ */ jsx(RadioFillingCircleStyled, { cx: "13", cy: "13", r: "8" })
+] });
+const Radio = ({
+  uid,
+  status,
+  label,
+  checked,
+  disabled,
+  ...props
+}) => {
+  const inputProps = {
+    ...props,
+    id: uid
+  };
+  return /* @__PURE__ */ jsxs(RadioContainer, { disabled, gapSpacing: spacingXs, children: [
+    /* @__PURE__ */ jsxs(RadioStyled, { children: [
+      /* @__PURE__ */ jsx(RadioInputStyled, { ...inputProps, checked, status, type: "radio", disabled }),
+      /* @__PURE__ */ jsx(RadioSVG, { status, checked })
+    ] }),
+    /* @__PURE__ */ jsx(RadioLabelStyled, { bottomSpacing: spacingNone, htmlFor: uid, uid, children: label })
+  ] });
+};
+const RadioGroup = ({
+  component: _component,
+  radios,
+  checkedValue,
+  onUpdate,
+  orientation = "horizontal",
+  status,
+  disabled,
+  ...props
+}) => {
+  const [checked, setChecked] = useState(checkedValue);
+  const [currentStatus, setCurrentStatus] = useState(status);
+  const ref = useRef(null);
+  const prevChecked = useRef(checked);
+  const handleChange = (event) => {
+    const value = event.target.value;
+    setChecked(value);
+    setCurrentStatus(void 0);
+    if (onUpdate) {
+      onUpdate(value);
+    }
+  };
+  useEffect(() => {
+    if (checked === checkedValue) {
+      return;
+    }
+    setChecked(checkedValue);
+  }, [checkedValue]);
+  useEffect(() => {
+    setCurrentStatus(status);
+  }, [status]);
+  useEffect(() => {
+    if (prevChecked.current !== checked) {
+      const checkedInput = ref.current.querySelector(`[value='${checked}']`);
+      checkedInput && checkedInput.focus();
+    }
+    prevChecked.current = checked;
+  }, [checked]);
+  return /* @__PURE__ */ jsx(Fieldset, { ...props, status: currentStatus, ...{
+    "aria-disabled": disabled,
+    "aria-invalid": inputStateError === currentStatus ? true : void 0
+  }, ref, children: /* @__PURE__ */ jsx(Flex, { orientation, gapSpacing: orientation === "horizontal" ? spacingSm : spacingXs, bottomSpacing: spacingXs, children: radios.map((radio) => {
+    return /* @__PURE__ */ createElement(Radio, { ...radio, onChange: handleChange, checked: checked === radio.value, key: radio.uid, status: currentStatus, disabled });
+  }) }) });
+};
+export {
+  RadioGroup as default
+};

package/dist/components/ResponsiveImage/index.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { v as viewport, a as breakpoint_large, c as breakpoint_medium } from "../../index-Ck2bCrhT.js";
+import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import styled from "styled-components";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { b as borderRadiusMd, a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const ResponsiveImagePictureStyled = styled.picture.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ResponsiveImagePictureStyled",
+  componentId: "sc-1itvcas-0"
+})({});
+const ResponsiveImageStyled = styled.img.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ResponsiveImageStyled",
+  componentId: "sc-1itvcas-1"
+})({
+  display: "block",
+  width: "100%"
+}, ({
+  images
+}) => {
+  var _a, _b;
+  return {
+    ...images.sm.objectFit && {
+      objectFit: images.sm.objectFit
+    },
+    ...((_a = images.md) == null ? void 0 : _a.objectFit) && viewport.md({
+      objectFit: images.md.objectFit
+    }),
+    ...((_b = images.lg) == null ? void 0 : _b.objectFit) && viewport.lg({
+      objectFit: images.lg.objectFit
+    })
+  };
+}, ({
+  images
+}) => {
+  var _a, _b;
+  return {
+    ...images.sm.objectPosition && {
+      objectPosition: images.sm.objectPosition
+    },
+    ...((_a = images.md) == null ? void 0 : _a.objectPosition) && viewport.md({
+      objectPosition: images.md.objectPosition
+    }),
+    ...((_b = images.lg) == null ? void 0 : _b.objectPosition) && viewport.lg({
+      objectPosition: images.lg.objectPosition
+    })
+  };
+}, ({
+  images = {}
+}) => {
+  var _a, _b, _c;
+  return {
+    ...((_a = images.sm) == null ? void 0 : _a.aspectRatio) && {
+      aspectRatio: images.sm.aspectRatio
+    },
+    ...((_b = images.md) == null ? void 0 : _b.aspectRatio) && viewport.md({
+      aspectRatio: images.md.aspectRatio
+    }),
+    ...((_c = images.lg) == null ? void 0 : _c.aspectRatio) && viewport.lg({
+      aspectRatio: images.lg.aspectRatio
+    })
+  };
+}, ({
+  images: {
+    sm: {
+      corners
+    }
+  }
+}) => ({
+  borderRadius: corners === "rounded" ? getBorderRadius(borderRadiusMd) : getBorderRadius(borderRadiusNone)
+}), getBottomSpacing);
+const ResponsiveImage = ({
+  images,
+  bottomSpacing = spacingMd,
+  ...props
+}) => /* @__PURE__ */ jsxs(ResponsiveImagePictureStyled, { ...props, children: [
+  images.lg && /* @__PURE__ */ jsx("source", { media: `(min-width: ${breakpoint_large})`, srcSet: images.lg.src }),
+  images.md && /* @__PURE__ */ jsx("source", { media: `(min-width: ${breakpoint_medium})`, srcSet: images.md.src }),
+  /* @__PURE__ */ jsx(ResponsiveImageStyled, { ..."" === images.sm.alt ? {
+    "aria-hidden": true
+  } : {}, images, ...images.sm, bottomSpacing })
+] });
+export {
+  ResponsiveImage as default
+};

package/dist/components/RichText/index.js

@@ -0,0 +1,7 @@
+"use client";
+import "react/jsx-runtime";
+import "react";
+import { R } from "../../index-D6hvbziL.js";
+export {
+  R as default
+};

package/dist/components/ScreenreaderOnly/index.js

@@ -0,0 +1,6 @@
+"use client";
+import "react/jsx-runtime";
+import { S } from "../../index-DQhtQZ85.js";
+export {
+  S as default
+};

package/dist/components/SearchInput/index.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CloseIcon, iconSizeSm } from "@vfde-react/inline-icon-library";
+import { forwardRef, useState, useRef, useImperativeHandle } from "react";
+import FormHelperLabel from "../FormHelperLabel/index.js";
+import IconButton, { iconButtonShapeSquare } from "../IconButton/index.js";
+import { b as spacingNone, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { p as primaryAppearance } from "../../styled-FNJyDkPV.js";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import Form from "../Form/index.js";
+import styled from "styled-components";
+import { I as InputWrapperStyled, a as InputStyled } from "../../styled-CDWclYAa.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const SearchInputButtonWrapperStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SearchInputButtonWrapperStyled",
+  componentId: "sc-dt60o-0"
+})({
+  display: "flex",
+  ":where(:focus,:focus-visible,:focus-within)": {
+    zIndex: 1
+  }
+});
+const SearchInputWrapperStyled = styled(InputWrapperStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SearchInputWrapperStyled",
+  componentId: "sc-dt60o-1"
+})({
+  flex: 1,
+  borderTopRightRadius: getSpacing(spacingNone),
+  borderBottomRightRadius: getSpacing(spacingNone)
+}, ({
+  value
+}) => {
+  if (value !== "") {
+    const iconSelectorOnFocusAndHover = `&:focus-within ${CloseIconStyled.toString()}, &:hover ${CloseIconStyled.toString()}`;
+    return {
+      [iconSelectorOnFocusAndHover]: {
+        opacity: 1
+      }
+    };
+  }
+});
+const SearchInputIconButtonStyled = styled(IconButton).withConfig({
+  displayName: "SearchInputIconButtonStyled",
+  componentId: "sc-dt60o-2"
+})({
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0
+});
+const CloseIconStyled = styled(CloseIcon).withConfig({
+  displayName: "CloseIconStyled",
+  componentId: "sc-dt60o-3"
+})({
+  opacity: 0
+});
+const SearchInputCloseButtonStyled = styled.button.withConfig({
+  displayName: "SearchInputCloseButtonStyled",
+  componentId: "sc-dt60o-4"
+})({
+  background: "none"
+}, ({
+  disabled
+}) => {
+  if (!disabled) {
+    return {
+      "&:hover": {
+        cursor: "pointer"
+      }
+    };
+  }
+});
+const SearchInputStyled = styled(InputStyled).withConfig({
+  displayName: "SearchInputStyled",
+  componentId: "sc-dt60o-5"
+})({
+  "&::-webkit-search-cancel-button": {
+    WebkitAppearance: "none"
+  }
+});
+const SearchInput = forwardRef(({
+  uid,
+  label,
+  bottomSpacing = spacingMd,
+  hideLabel,
+  buttonAppearance = primaryAppearance,
+  searchButtonLabel,
+  placeholder,
+  onSearch,
+  onReset,
+  disabled,
+  ...props
+}, ref) => {
+  const initialValueState = !props.value ? "" : props.value;
+  const [value, setValue] = useState(initialValueState);
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current, []);
+  const inputProps = {
+    ...props,
+    id: uid
+  };
+  const onChange = (event) => {
+    setValue(event.target.value);
+    if (props.onChange) {
+      props.onChange(event);
+    }
+  };
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const formElement = e.target;
+    if (onSearch) {
+      onSearch(formElement.getElementsByTagName("input")[0].value);
+    }
+  };
+  const resetButtonHandler = () => {
+    var _a;
+    if (disabled) return;
+    setValue("");
+    inputRef && ((_a = inputRef.current) == null ? void 0 : _a.focus());
+    onReset && onReset();
+  };
+  const resetHandler = (e) => {
+    if (e.key === "Escape" && onReset && value !== "") onReset();
+    props.onKeyDown && props.onKeyDown(e);
+  };
+  return /* @__PURE__ */ jsxs(Form, { className: props.className, role: "search", bottomSpacing, onSubmit, children: [
+    !hideLabel && /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsxs(SearchInputButtonWrapperStyled, { children: [
+      /* @__PURE__ */ jsxs(SearchInputWrapperStyled, { value, children: [
+        /* @__PURE__ */ jsx(SearchInputStyled, { ...inputProps, ref: inputRef, onChange, onKeyDown: resetHandler, type: "search", value, "aria-label": hideLabel && typeof label === "string" ? label : void 0, placeholder: renderInlineRichTextFromOpenText(placeholder) }),
+        value && /* @__PURE__ */ jsx(SearchInputCloseButtonStyled, { type: "button", "aria-hidden": true, onClick: resetButtonHandler, tabIndex: -1, disabled, children: /* @__PURE__ */ jsx(CloseIconStyled, { size: iconSizeSm, value }) })
+      ] }),
+      /* @__PURE__ */ jsx(SearchInputIconButtonStyled, { iconName: "Search", label: searchButtonLabel, bottomSpacing: spacingNone, shape: iconButtonShapeSquare, appearance: buttonAppearance, type: "submit" })
+    ] })
+  ] });
+});
+export {
+  SearchInput as default
+};

package/dist/components/SelectInput/index.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { iconSizeSm, ChevronDownIcon } from "@vfde-react/inline-icon-library";
+import { forwardRef } from "react";
+import FormElement from "../FormElement/index.js";
+import FormHelperLabel from "../FormHelperLabel/index.js";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import { a as spacingXs, c as spacingSm, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import styled from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getHeadingSize } from "../../foundations/token/getHeadingSize/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+import { c as colorBorderFocus, a as colorBorderNeutral, b as colorBorderUnselected, d as colorBorderSuccess, e as colorBorderCritical } from "../../BorderColor-BummoQ1-.js";
+import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
+import { a as colorTextNeutral } from "../../TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
+const SelectInputWrapperStyled = styled.div.withConfig({
+  displayName: "SelectInputWrapperStyled",
+  componentId: "sc-4qxq2i-0"
+})({
+  position: "relative",
+  ":focus, :focus-visible": {
+    outline: "none"
+  },
+  marginBottom: getSpacing(spacingXs)
+});
+const SelectInputStyled = styled.select.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SelectInputStyled",
+  componentId: "sc-4qxq2i-1"
+})({
+  ...forcedColors({
+    border: "1px solid FieldText",
+    background: "Field"
+  }),
+  display: "flex",
+  justifyItems: "center",
+  alignItems: "center",
+  gap: `${getSpacing(spacingXs)}`,
+  // Right padding needs to be larger as thats where the absolutely positioned icon is
+  padding: `${getSpacing(spacingXs)} calc(${getSpacing(spacingSm)} + ${getCssVar(iconSizeSm)}) ${getSpacing(spacingXs)} ${getSpacing(spacingSm)}`,
+  borderRadius: getBorderRadius(borderRadiusMd),
+  backgroundColor: getBackgroundColor(colorBackgroundNeutral),
+  color: getTextColor(colorTextNeutral),
+  width: "100%",
+  fontFamily: "VodafoneVari, Arial, sans-serif",
+  border: "none",
+  height: "44px",
+  zIndex: 0
+}, ({
+  status
+}) => {
+  if (!status) {
+    return {
+      boxShadow: `inset ${getBorderColor(colorBorderUnselected)} 0px 0px 0px 1px`,
+      "&:focus-within, &:focus-visible": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px 4px, inset ${getBorderColor(colorBorderNeutral)} 0px 0px 0px 1px`,
+        outline: "none"
+      }
+    };
+  }
+  if ("success" === status) {
+    return {
+      boxShadow: `inset ${getBorderColor(colorBorderSuccess)} 0px 0px 0px 2px`,
+      // Right padding needs to be even larger here as we get a second icon for the status
+      paddingRight: `calc(${getSpacing(spacingSm)} + 2*${getCssVar(iconSizeSm)} + ${getSpacing(spacingXs)})`,
+      "&:focus-within, &:focus-visible": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px 4px, inset ${getBorderColor(colorBorderSuccess)} 0px 0px 0px 2px`,
+        outline: "none"
+      }
+    };
+  }
+  if ("error" === status) {
+    return {
+      boxShadow: `inset ${getBorderColor(colorBorderCritical)} 0px 0px 0px 2px`,
+      // Right padding needs to be even larger here as we get a second icon for the status
+      paddingRight: `calc(${getSpacing(spacingSm)} + 2*${getCssVar(iconSizeSm)} + ${getSpacing(spacingXs)})`,
+      "&:focus-within, &:focus-visible": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px 4px, inset ${getBorderColor(colorBorderCritical)} 0px 0px 0px 2px`,
+        outline: "none"
+      }
+    };
+  }
+}, getHeadingSize("xs"));
+const SelectInputIconsBarStyled = styled.div.withConfig({
+  displayName: "SelectInputIconsBarStyled",
+  componentId: "sc-4qxq2i-2"
+})({
+  ...forcedColors({
+    color: "FieldText"
+  }),
+  position: "absolute",
+  top: `calc(50% - (${getCssVar(iconSizeSm)}/2))`,
+  right: `${getSpacing(spacingSm)}`,
+  display: "flex",
+  gap: `${getSpacing(spacingXs)}`,
+  pointerEvents: "none"
+});
+const SelectInput = forwardRef(({
+  uid,
+  label,
+  status,
+  errorMessage,
+  helperText,
+  options,
+  onUpdate,
+  disabled = false,
+  bottomSpacing = spacingMd,
+  ...props
+}, ref) => {
+  const messageId = `text-${uid}`;
+  const selectInputProps = {
+    ...props,
+    disabled,
+    status,
+    id: uid,
+    "aria-describedby": inputStateError === status ? errorMessage : helperText
+  };
+  const onChange = (event) => {
+    if (!onUpdate) {
+      return;
+    }
+    onUpdate(event.target.value);
+  };
+  const optionsHtml = options.map((option) => {
+    return /* @__PURE__ */ jsx("option", { value: option, children: renderInlineRichTextFromOpenText(option) }, option);
+  });
+  return /* @__PURE__ */ jsxs(FormElement, { className: props.className, bottomSpacing, disabled, children: [
+    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsxs(SelectInputWrapperStyled, { bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
+      /* @__PURE__ */ jsx(SelectInputStyled, { ...selectInputProps, ref, onChange, "aria-describedby": inputStateError !== status && helperText || inputStateError === status && errorMessage ? `text-${uid}` : props["aria-describedby"], "aria-invalid": status === inputStateError, children: optionsHtml }),
+      /* @__PURE__ */ jsxs(SelectInputIconsBarStyled, { children: [
+        /* @__PURE__ */ jsx(FormHelperStatusIcon, { status }),
+        /* @__PURE__ */ jsx(ChevronDownIcon, { size: iconSizeSm })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })
+  ] });
+});
+export {
+  SelectInput as default
+};