@vodafone_de/brix-components 3.1.8 → 3.1.9

package/components/RadioGroup/index.js

@@ -1,196 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const components_Fieldset = require("../Fieldset/index.js");
-const components_Flex = require("../Flex/index.js");
-const props = require("../../props-DJ2g0nfk.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const styled = require("styled-components");
-const components_Label = require("../Label/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_getBorderRadius = require("../../foundations/token/getBorderRadius/index.js");
-const foundations_token_getBorderWidth = require("../../foundations/token/getBorderWidth/index.js");
-const foundations_token_getObjectColor = require("../../foundations/token/getObjectColor/index.js");
-const foundations_token_getOpacity = require("../../foundations/token/getOpacity/index.js");
-const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
-const BorderRadius = require("../../BorderRadius-tg_0N_aM.cjs");
-const BorderWidth = require("../../BorderWidth-BLS_JGlE.cjs");
-const ObjectColor = require("../../ObjectColor-BrtIOUrJ.cjs");
-const Opacity = require("../../Opacity-gfDZhzig.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const RadioContainer = styled(components_Flex.default).withConfig({
-  shouldForwardProp: filterProps.filterProps(["disabled"]),
-  displayName: "RadioContainer",
-  componentId: "sc-qti4z3-0"
-})({
-  alignItems: "flex-start",
-  width: "max-content",
-  flexWrap: "nowrap"
-}, ({
-  disabled
-}) => {
-  if (disabled) {
-    return {
-      pointerEvents: "none",
-      opacity: foundations_token_getOpacity.getOpacity(Opacity.opacityDisabled)
-    };
-  }
-});
-const RadioStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "RadioStyled",
-  componentId: "sc-qti4z3-1"
-})({
-  position: "relative",
-  width: `calc(${foundations_token_getBodySize.getBodySize("md").fontSize} * ${foundations_token_getBodySize.getBodySize("md").lineHeight})`,
-  height: `calc(${foundations_token_getBodySize.getBodySize("md").fontSize} * ${foundations_token_getBodySize.getBodySize("md").lineHeight})`,
-  cursor: "pointer",
-  "&:has(:focus-visible)": {
-    svg: {
-      outline: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} solid ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus)}`,
-      borderRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusFull),
-      ...foundations_mediaQuery_forcedColors.default({
-        outline: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} solid CanvasText`
-      })
-    }
-  }
-});
-const RadioInputStyled = styled.input.withConfig({
-  shouldForwardProp: filterProps.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(components_Label).withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "RadioLabelStyled",
-  componentId: "sc-qti4z3-3"
-})({
-  cursor: "pointer"
-});
-const RadioSVGStyled = styled.svg.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "RadioSVGStyled",
-  componentId: "sc-qti4z3-4"
-})({
-  fill: "none",
-  width: "inherit",
-  height: "inherit"
-});
-const RadioFillingCircleStyled = styled.circle.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "RadioFillingCircleStyled",
-  componentId: "sc-qti4z3-5"
-})({
-  fill: foundations_token_getObjectColor.getObjectColor(ObjectColor.colorObjectSelected)
-}, foundations_mediaQuery_forcedColors.default({
-  fill: "FieldText"
-}));
-const RadioBorderPathStyled = styled.circle.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "RadioBorderPathStyled",
-  componentId: "sc-qti4z3-6"
-})({
-  fill: foundations_token_getObjectColor.getObjectColor(ObjectColor.colorObjectInverse)
-}, foundations_mediaQuery_forcedColors.default({
-  fill: "Field"
-}), ({
-  checked,
-  status
-}) => {
-  return {
-    stroke: status === props.inputStateError ? foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderCritical) : checked ? foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderSelected) : foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderUnselected),
-    ...foundations_mediaQuery_forcedColors.default({
-      stroke: "FieldText"
-    })
-  };
-});
-const RadioSVG = ({
-  checked,
-  status
-}) => /* @__PURE__ */ jsxRuntime.jsxs(RadioSVGStyled, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 26", fill: "none", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(RadioBorderPathStyled, { cx: "13", cy: "13", r: "12.5", checked, status }),
-  checked && /* @__PURE__ */ jsxRuntime.jsx(RadioFillingCircleStyled, { cx: "13", cy: "13", r: "8" })
-] });
-const Radio = ({
-  uid,
-  status,
-  label,
-  checked,
-  disabled,
-  ...props2
-}) => {
-  const inputProps = {
-    ...props2,
-    id: uid
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(RadioContainer, { disabled, gapSpacing: Spacing.spacingXs, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RadioStyled, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RadioInputStyled, { ...inputProps, checked, status, type: "radio", disabled }),
-      /* @__PURE__ */ jsxRuntime.jsx(RadioSVG, { status, checked })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(RadioLabelStyled, { bottomSpacing: Spacing.spacingNone, htmlFor: uid, uid, children: label })
-  ] });
-};
-const RadioGroup = ({
-  component: _component,
-  radios,
-  checkedValue,
-  onUpdate,
-  orientation = "horizontal",
-  status,
-  disabled,
-  ...props$1
-}) => {
-  const [checked, setChecked] = react.useState(checkedValue);
-  const [currentStatus, setCurrentStatus] = react.useState(status);
-  const ref = react.useRef(null);
-  const prevChecked = react.useRef(checked);
-  const handleChange = (event) => {
-    const value = event.target.value;
-    setChecked(value);
-    setCurrentStatus(void 0);
-    if (onUpdate) {
-      onUpdate(value);
-    }
-  };
-  react.useEffect(() => {
-    if (checked === checkedValue) {
-      return;
-    }
-    setChecked(checkedValue);
-  }, [checkedValue]);
-  react.useEffect(() => {
-    setCurrentStatus(status);
-  }, [status]);
-  react.useEffect(() => {
-    if (prevChecked.current !== checked) {
-      const checkedInput = ref.current.querySelector(`[value='${checked}']`);
-      checkedInput && checkedInput.focus();
-    }
-    prevChecked.current = checked;
-  }, [checked]);
-  return /* @__PURE__ */ jsxRuntime.jsx(components_Fieldset, { ...props$1, status: currentStatus, ...{
-    "aria-disabled": disabled,
-    "aria-invalid": props.inputStateError === currentStatus ? true : void 0
-  }, ref, children: /* @__PURE__ */ jsxRuntime.jsx(components_Flex.default, { orientation, gapSpacing: orientation === "horizontal" ? Spacing.spacingSm : Spacing.spacingXs, bottomSpacing: Spacing.spacingXs, children: radios.map((radio) => {
-    return /* @__PURE__ */ react.createElement(Radio, { ...radio, onChange: handleChange, checked: checked === radio.value, key: radio.uid, status: currentStatus, disabled });
-  }) }) });
-};
-module.exports = RadioGroup;

package/components/ResponsiveImage/index.js

@@ -1,88 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const foundations_mediaQuery_viewport = require("../../index-DuE6C2cO.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const styled = require("styled-components");
-const foundations_token_getBorderRadius = require("../../foundations/token/getBorderRadius/index.js");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const BorderRadius = require("../../BorderRadius-tg_0N_aM.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const ResponsiveImagePictureStyled = styled.picture.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "ResponsiveImagePictureStyled",
-  componentId: "sc-1itvcas-0"
-})({});
-const ResponsiveImageStyled = styled.img.withConfig({
-  shouldForwardProp: filterProps.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) && foundations_mediaQuery_viewport.viewport.md({
-      objectFit: images.md.objectFit
-    }),
-    ...((_b = images.lg) == null ? void 0 : _b.objectFit) && foundations_mediaQuery_viewport.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) && foundations_mediaQuery_viewport.viewport.md({
-      objectPosition: images.md.objectPosition
-    }),
-    ...((_b = images.lg) == null ? void 0 : _b.objectPosition) && foundations_mediaQuery_viewport.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) && foundations_mediaQuery_viewport.viewport.md({
-      aspectRatio: images.md.aspectRatio
-    }),
-    ...((_c = images.lg) == null ? void 0 : _c.aspectRatio) && foundations_mediaQuery_viewport.viewport.lg({
-      aspectRatio: images.lg.aspectRatio
-    })
-  };
-}, ({
-  images: {
-    sm: {
-      corners
-    }
-  }
-}) => ({
-  borderRadius: corners === "rounded" ? foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusMd) : foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusNone)
-}), foundations_token_getBottomSpacing.getBottomSpacing);
-const ResponsiveImage = ({
-  images,
-  bottomSpacing = Spacing.spacingMd,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveImagePictureStyled, { ...props, children: [
-  images.lg && /* @__PURE__ */ jsxRuntime.jsx("source", { media: `(min-width: ${foundations_mediaQuery_viewport.breakpoint_large})`, srcSet: images.lg.src }),
-  images.md && /* @__PURE__ */ jsxRuntime.jsx("source", { media: `(min-width: ${foundations_mediaQuery_viewport.breakpoint_medium})`, srcSet: images.md.src }),
-  /* @__PURE__ */ jsxRuntime.jsx(ResponsiveImageStyled, { ..."" === images.sm.alt ? {
-    "aria-hidden": true
-  } : {}, images, ...images.sm, bottomSpacing })
-] });
-module.exports = ResponsiveImage;

package/components/RichText/index.js

@@ -1,6 +0,0 @@
-"use client";
-"use strict";
-require("react/jsx-runtime");
-require("react");
-const components_RichText = require("../../index-DORk60LP.cjs");
-module.exports = components_RichText.RichText;

package/components/ScreenreaderOnly/index.js

@@ -1,5 +0,0 @@
-"use client";
-"use strict";
-require("react/jsx-runtime");
-const components_ScreenreaderOnly = require("../../index-DVXE2AnG.cjs");
-module.exports = components_ScreenreaderOnly.ScreenreaderOnly;

package/components/SearchInput/index.js

@@ -1,139 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const index = require("../../index-_A9hEpl9.cjs");
-const react = require("react");
-const components_FormHelperLabel = require("../FormHelperLabel/index.js");
-const components_IconButton = require("../IconButton/index.js");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const styled$2 = require("../../styled-nCWTwQUZ.cjs");
-const renderInlineRichTextFromOpenText = require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
-const components_Form = require("../Form/index.js");
-const styled = require("styled-components");
-const styled$1 = require("../../styled-rjPMMnSd.cjs");
-const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const SearchInputButtonWrapperStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "SearchInputButtonWrapperStyled",
-  componentId: "sc-dt60o-0"
-})({
-  display: "flex",
-  ":where(:focus,:focus-visible,:focus-within)": {
-    zIndex: 1
-  }
-});
-const SearchInputWrapperStyled = styled(styled$1.InputWrapperStyled).withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "SearchInputWrapperStyled",
-  componentId: "sc-dt60o-1"
-})({
-  flex: 1,
-  borderTopRightRadius: foundations_token_getSpacing.getSpacing(Spacing.spacingNone),
-  borderBottomRightRadius: foundations_token_getSpacing.getSpacing(Spacing.spacingNone)
-}, ({
-  value
-}) => {
-  if (value !== "") {
-    const iconSelectorOnFocusAndHover = `&:focus-within ${CloseIconStyled.toString()}, &:hover ${CloseIconStyled.toString()}`;
-    return {
-      [iconSelectorOnFocusAndHover]: {
-        opacity: 1
-      }
-    };
-  }
-});
-const SearchInputIconButtonStyled = styled(components_IconButton.default).withConfig({
-  displayName: "SearchInputIconButtonStyled",
-  componentId: "sc-dt60o-2"
-})({
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0
-});
-const CloseIconStyled = styled(index.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(styled$1.InputStyled).withConfig({
-  displayName: "SearchInputStyled",
-  componentId: "sc-dt60o-5"
-})({
-  "&::-webkit-search-cancel-button": {
-    WebkitAppearance: "none"
-  }
-});
-const SearchInput = react.forwardRef(({
-  uid,
-  label,
-  bottomSpacing = Spacing.spacingMd,
-  hideLabel,
-  buttonAppearance = styled$2.primaryAppearance,
-  searchButtonLabel,
-  placeholder,
-  onSearch,
-  onReset,
-  disabled,
-  ...props
-}, ref) => {
-  const initialValueState = !props.value ? "" : props.value;
-  const [value, setValue] = react.useState(initialValueState);
-  const inputRef = react.useRef(null);
-  react.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__ */ jsxRuntime.jsxs(components_Form, { className: props.className, role: "search", bottomSpacing, onSubmit, children: [
-    !hideLabel && /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperLabel, { label, uid }),
-    /* @__PURE__ */ jsxRuntime.jsxs(SearchInputButtonWrapperStyled, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(SearchInputWrapperStyled, { value, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SearchInputStyled, { ...inputProps, ref: inputRef, onChange, onKeyDown: resetHandler, type: "search", value, "aria-label": hideLabel && typeof label === "string" ? label : void 0, placeholder: renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(placeholder) }),
-        value && /* @__PURE__ */ jsxRuntime.jsx(SearchInputCloseButtonStyled, { type: "button", "aria-hidden": true, onClick: resetButtonHandler, tabIndex: -1, disabled, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIconStyled, { size: index.iconSizeSm, value }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(SearchInputIconButtonStyled, { iconName: "Search", label: searchButtonLabel, bottomSpacing: Spacing.spacingNone, shape: components_IconButton.iconButtonShapeSquare, appearance: buttonAppearance, type: "submit" })
-    ] })
-  ] });
-});
-module.exports = SearchInput;

package/components/SelectInput/index.js

@@ -1,159 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const index = require("../../index-_A9hEpl9.cjs");
-const react = require("react");
-const components_FormElement = require("../FormElement/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 Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const renderInlineRichTextFromOpenText = require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
-const styled = require("styled-components");
-const foundations_mediaQuery_forcedColors = require("../../foundations/media-query/forcedColors/index.js");
-const foundations_token_getBackgroundColor = require("../../foundations/token/getBackgroundColor/index.js");
-const foundations_token_getBorderColor = require("../../foundations/token/getBorderColor/index.js");
-const foundations_token_getBorderRadius = require("../../foundations/token/getBorderRadius/index.js");
-const foundations_token_getHeadingSize = require("../../foundations/token/getHeadingSize/index.js");
-const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
-const foundations_token_getTextColor = require("../../foundations/token/getTextColor/index.js");
-const BackgroundColor = require("../../BackgroundColor-C3dayRDw.cjs");
-const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
-const BorderRadius = require("../../BorderRadius-tg_0N_aM.cjs");
-const TextColor = require("../../TextColor-BZDXH1wP.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const getCssVar = require("../../getCssVar-CyR1mrKh.cjs");
-const SelectInputWrapperStyled = styled.div.withConfig({
-  displayName: "SelectInputWrapperStyled",
-  componentId: "sc-4qxq2i-0"
-})({
-  position: "relative",
-  ":focus, :focus-visible": {
-    outline: "none"
-  },
-  marginBottom: foundations_token_getSpacing.getSpacing(Spacing.spacingXs)
-});
-const SelectInputStyled = styled.select.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "SelectInputStyled",
-  componentId: "sc-4qxq2i-1"
-})({
-  ...foundations_mediaQuery_forcedColors.default({
-    border: "1px solid FieldText",
-    background: "Field"
-  }),
-  display: "flex",
-  justifyItems: "center",
-  alignItems: "center",
-  gap: `${foundations_token_getSpacing.getSpacing(Spacing.spacingXs)}`,
-  // Right padding needs to be larger as thats where the absolutely positioned icon is
-  padding: `${foundations_token_getSpacing.getSpacing(Spacing.spacingXs)} calc(${foundations_token_getSpacing.getSpacing(Spacing.spacingSm)} + ${getCssVar.getCssVar(index.iconSizeSm)}) ${foundations_token_getSpacing.getSpacing(Spacing.spacingXs)} ${foundations_token_getSpacing.getSpacing(Spacing.spacingSm)}`,
-  borderRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusMd),
-  backgroundColor: foundations_token_getBackgroundColor.getBackgroundColor(BackgroundColor.colorBackgroundNeutral),
-  color: foundations_token_getTextColor.getTextColor(TextColor.colorTextNeutral),
-  width: "100%",
-  fontFamily: "VodafoneVari, Arial, sans-serif",
-  border: "none",
-  height: "44px",
-  zIndex: 0
-}, ({
-  status
-}) => {
-  if (!status) {
-    return {
-      boxShadow: `inset ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderUnselected)} 0px 0px 0px 1px`,
-      "&:focus-within, &:focus-visible": {
-        ...foundations_mediaQuery_forcedColors.default({
-          outline: "4px solid CanvasText"
-        }),
-        boxShadow: `${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus)} 0px 0px 0px 4px, inset ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderNeutral)} 0px 0px 0px 1px`,
-        outline: "none"
-      }
-    };
-  }
-  if ("success" === status) {
-    return {
-      boxShadow: `inset ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderSuccess)} 0px 0px 0px 2px`,
-      // Right padding needs to be even larger here as we get a second icon for the status
-      paddingRight: `calc(${foundations_token_getSpacing.getSpacing(Spacing.spacingSm)} + 2*${getCssVar.getCssVar(index.iconSizeSm)} + ${foundations_token_getSpacing.getSpacing(Spacing.spacingXs)})`,
-      "&:focus-within, &:focus-visible": {
-        ...foundations_mediaQuery_forcedColors.default({
-          outline: "4px solid CanvasText"
-        }),
-        boxShadow: `${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus)} 0px 0px 0px 4px, inset ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderSuccess)} 0px 0px 0px 2px`,
-        outline: "none"
-      }
-    };
-  }
-  if ("error" === status) {
-    return {
-      boxShadow: `inset ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderCritical)} 0px 0px 0px 2px`,
-      // Right padding needs to be even larger here as we get a second icon for the status
-      paddingRight: `calc(${foundations_token_getSpacing.getSpacing(Spacing.spacingSm)} + 2*${getCssVar.getCssVar(index.iconSizeSm)} + ${foundations_token_getSpacing.getSpacing(Spacing.spacingXs)})`,
-      "&:focus-within, &:focus-visible": {
-        ...foundations_mediaQuery_forcedColors.default({
-          outline: "4px solid CanvasText"
-        }),
-        boxShadow: `${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus)} 0px 0px 0px 4px, inset ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderCritical)} 0px 0px 0px 2px`,
-        outline: "none"
-      }
-    };
-  }
-}, foundations_token_getHeadingSize.getHeadingSize("xs"));
-const SelectInputIconsBarStyled = styled.div.withConfig({
-  displayName: "SelectInputIconsBarStyled",
-  componentId: "sc-4qxq2i-2"
-})({
-  ...foundations_mediaQuery_forcedColors.default({
-    color: "FieldText"
-  }),
-  position: "absolute",
-  top: `calc(50% - (${getCssVar.getCssVar(index.iconSizeSm)}/2))`,
-  right: `${foundations_token_getSpacing.getSpacing(Spacing.spacingSm)}`,
-  display: "flex",
-  gap: `${foundations_token_getSpacing.getSpacing(Spacing.spacingXs)}`,
-  pointerEvents: "none"
-});
-const SelectInput = react.forwardRef(({
-  uid,
-  label,
-  status,
-  errorMessage,
-  helperText,
-  options,
-  onUpdate,
-  disabled = false,
-  bottomSpacing = Spacing.spacingMd,
-  ...props$1
-}, ref) => {
-  const messageId = `text-${uid}`;
-  const selectInputProps = {
-    ...props$1,
-    disabled,
-    status,
-    id: uid,
-    "aria-describedby": props.inputStateError === status ? errorMessage : helperText
-  };
-  const onChange = (event) => {
-    if (!onUpdate) {
-      return;
-    }
-    onUpdate(event.target.value);
-  };
-  const optionsHtml = options.map((option) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(option) }, option);
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(components_FormElement, { className: props$1.className, bottomSpacing, disabled, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperLabel, { label, uid }),
-    /* @__PURE__ */ jsxRuntime.jsxs(SelectInputWrapperStyled, { bottomSpacing: props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? Spacing.spacingXs : void 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectInputStyled, { ...selectInputProps, ref, onChange, "aria-describedby": props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? `text-${uid}` : props$1["aria-describedby"], "aria-invalid": status === props.inputStateError, children: optionsHtml }),
-      /* @__PURE__ */ jsxRuntime.jsxs(SelectInputIconsBarStyled, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperStatusIcon.default, { status }),
-        /* @__PURE__ */ jsxRuntime.jsx(index.ChevronDownIcon, { size: index.iconSizeSm })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperMessage, { id: messageId, status, message: props.inputStateError === status ? errorMessage : helperText })
-  ] });
-});
-module.exports = SelectInput;