@xsolla/xui-button 0.192.0 → 0.193.0

package/web/index.mjs

@@ -832,11 +832,26 @@ IconButton.displayName = "IconButton";
 
 // src/FlexButton.tsx
 import React5, {
+  forwardRef,
   useRef,
   useState as useState3
 } from "react";
-import { useDesignSystem } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var ICON_SIZES = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20
+};
+var SPINNER_SIZES = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20
+};
 var FLEX_BUTTON_PADDING = 4;
 var hasVisibleLabel = (node) => {
   if (node == null || node === false || node === true) return false;
@@ -855,20 +870,14 @@ var hasRenderableContent = (node) => {
   if (Array.isArray(node)) return node.some(hasRenderableContent);
   return true;
 };
-var ICON_SIZES = {
-  xs: 12,
-  sm: 14,
-  md: 16,
-  lg: 18,
-  xl: 20
-};
-var SPINNER_SIZES = {
-  xs: 12,
-  sm: 14,
-  md: 16,
-  lg: 18,
-  xl: 20
+var BOX_SIZES = {
+  xs: 20,
+  sm: 22,
+  md: 28,
+  lg: 32,
+  xl: 36
 };
+var getFlexButtonBoxSize = (size = "md") => BOX_SIZES[size];
 var LINE_HEIGHTS = {
   xs: "14px",
   sm: "16px",
@@ -890,325 +899,330 @@ var BORDER_RADIUS = {
   sm: 2,
   xs: 2
 };
-var FlexButton = ({
-  children,
-  variant = "brand",
-  size = "md",
-  background = false,
-  hoverBackground = true,
-  noPadding = false,
-  disabled = false,
-  loading = false,
-  iconLeft,
-  iconRight,
-  onPress,
-  onClick,
-  className,
-  type = "button",
-  "aria-label": ariaLabel,
-  "aria-describedby": ariaDescribedBy,
-  "aria-expanded": ariaExpanded,
-  "aria-haspopup": ariaHasPopup,
-  "aria-pressed": ariaPressed,
-  "aria-controls": ariaControls,
-  testID,
-  tabIndex = 0,
-  ...buttonProps
-}) => {
-  const { theme } = useDesignSystem();
-  const [state, setState] = useState3("default");
-  const [isFocused, setIsFocused] = useState3(false);
-  const isMouseOverRef = useRef(false);
-  const isDisabled = disabled || loading;
-  const getVariantColors = (currentState) => {
-    if (isDisabled) {
-      return {
-        bg: background ? theme.colors.overlay.mono : "transparent",
-        text: theme.colors.control.text.disable,
-        border: void 0
-      };
-    }
-    const effectiveBackground = loading ? false : background;
-    switch (variant) {
-      case "brand":
-        if (effectiveBackground) {
-          return {
-            bg: currentState === "press" ? theme.colors.control.brand.primary.bgPress : currentState === "hover" ? theme.colors.control.brand.primary.bgHover : theme.colors.background.brand.primary,
-            text: theme.colors.content.on.brand,
-            border: void 0
-          };
-        }
+var FlexButton = forwardRef(
+  ({
+    children,
+    variant = "brand",
+    size = "md",
+    background = false,
+    hoverBackground = true,
+    noPadding = false,
+    disabled = false,
+    loading = false,
+    iconLeft,
+    iconRight,
+    onPress,
+    onClick,
+    className,
+    type = "button",
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    testID,
+    tabIndex = 0,
+    themeMode,
+    themeProductContext,
+    ...buttonProps
+  }, ref) => {
+    const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
+    const [state, setState] = useState3("default");
+    const [isFocused, setIsFocused] = useState3(false);
+    const isMouseOverRef = useRef(false);
+    const isDisabled = disabled || loading;
+    const getVariantColors = (currentState) => {
+      if (isDisabled) {
         return {
-          bg: !hoverBackground ? "transparent" : currentState === "press" ? theme.colors.background.brand.primary : currentState === "hover" ? theme.colors.overlay.brand : "transparent",
-          text: currentState === "press" && hoverBackground ? theme.colors.content.on.brand : theme.colors.content.brand.primary,
+          bg: background ? theme.colors.overlay.mono : "transparent",
+          text: theme.colors.control.text.disable,
           border: void 0
         };
-      case "primary":
-        if (effectiveBackground) {
+      }
+      const effectiveBackground = loading ? false : background;
+      switch (variant) {
+        case "brand":
+          if (effectiveBackground) {
+            return {
+              bg: currentState === "press" ? theme.colors.control.brand.primary.bgPress : currentState === "hover" ? theme.colors.control.brand.primary.bgHover : theme.colors.background.brand.primary,
+              text: theme.colors.content.on.brand,
+              border: void 0
+            };
+          }
+          return {
+            bg: !hoverBackground ? "transparent" : currentState === "press" ? theme.colors.background.brand.primary : currentState === "hover" ? theme.colors.overlay.brand : "transparent",
+            text: currentState === "press" && hoverBackground ? theme.colors.content.on.brand : theme.colors.content.brand.primary,
+            border: void 0
+          };
+        case "primary":
+          if (effectiveBackground) {
+            return {
+              bg: theme.colors.background.primary,
+              text: theme.colors.content.primary,
+              border: currentState === "press" ? theme.colors.border.primary : void 0
+            };
+          }
           return {
-            bg: theme.colors.background.primary,
+            bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
             text: theme.colors.content.primary,
             border: currentState === "press" ? theme.colors.border.primary : void 0
           };
-        }
-        return {
-          bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
-          text: theme.colors.content.primary,
-          border: currentState === "press" ? theme.colors.border.primary : void 0
-        };
-      case "secondary":
-        if (effectiveBackground) {
+        case "secondary":
+          if (effectiveBackground) {
+            return {
+              bg: currentState === "press" ? theme.colors.control.mono.secondary.bgPress : currentState === "hover" ? theme.colors.control.mono.secondary.bgHover : theme.colors.background.secondary,
+              text: theme.colors.content.secondary,
+              border: void 0
+            };
+          }
           return {
-            bg: currentState === "press" ? theme.colors.control.mono.secondary.bgPress : currentState === "hover" ? theme.colors.control.mono.secondary.bgHover : theme.colors.background.secondary,
-            text: theme.colors.content.secondary,
+            bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
+            text: currentState === "press" ? theme.colors.content.primary : currentState === "hover" ? theme.colors.content.secondary : theme.colors.content.secondary,
             border: void 0
           };
-        }
-        return {
-          bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
-          text: currentState === "press" ? theme.colors.content.primary : currentState === "hover" ? theme.colors.content.secondary : theme.colors.content.secondary,
-          border: void 0
-        };
-      case "tertiary":
-        if (effectiveBackground) {
+        case "tertiary":
+          if (effectiveBackground) {
+            return {
+              bg: currentState === "press" ? theme.colors.control.mono.secondary.bgPress : currentState === "hover" ? theme.colors.control.mono.secondary.bgHover : theme.colors.background.secondary,
+              text: theme.colors.content.tertiary,
+              border: void 0
+            };
+          }
           return {
-            bg: currentState === "press" ? theme.colors.control.mono.secondary.bgPress : currentState === "hover" ? theme.colors.control.mono.secondary.bgHover : theme.colors.background.secondary,
-            text: theme.colors.content.tertiary,
+            bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
+            text: currentState === "press" ? theme.colors.content.secondary : currentState === "hover" ? theme.colors.content.tertiary : theme.colors.content.tertiary,
             border: void 0
           };
-        }
-        return {
-          bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
-          text: currentState === "press" ? theme.colors.content.secondary : currentState === "hover" ? theme.colors.content.tertiary : theme.colors.content.tertiary,
-          border: void 0
-        };
-      case "brandExtra":
-        if (effectiveBackground) {
+        case "brandExtra":
+          if (effectiveBackground) {
+            return {
+              bg: currentState === "press" ? theme.colors.control.brandExtra.primary.bgPress : currentState === "hover" ? theme.colors.control.brandExtra.primary.bgHover : theme.colors.background.brandExtra.primary,
+              text: theme.colors.content.on.brandExtra,
+              border: void 0
+            };
+          }
           return {
-            bg: currentState === "press" ? theme.colors.control.brandExtra.primary.bgPress : currentState === "hover" ? theme.colors.control.brandExtra.primary.bgHover : theme.colors.background.brandExtra.primary,
-            text: theme.colors.content.on.brandExtra,
+            bg: !hoverBackground ? "transparent" : currentState === "press" ? theme.colors.background.brandExtra.primary : currentState === "hover" ? theme.colors.overlay.brandExtra : "transparent",
+            text: currentState === "press" ? theme.colors.content.on.brandExtra : theme.colors.content.brandExtra.secondary,
             border: void 0
           };
-        }
-        return {
-          bg: !hoverBackground ? "transparent" : currentState === "press" ? theme.colors.background.brandExtra.primary : currentState === "hover" ? theme.colors.overlay.brandExtra : "transparent",
-          text: currentState === "press" ? theme.colors.content.on.brandExtra : theme.colors.content.brandExtra.secondary,
-          border: void 0
-        };
-      case "inverse":
-        if (effectiveBackground) {
+        case "inverse":
+          if (effectiveBackground) {
+            return {
+              bg: currentState === "press" ? theme.colors.control.mono.primary.bgPress : currentState === "hover" ? theme.colors.control.mono.primary.bgHover : theme.colors.background.inverse,
+              text: theme.colors.content.inverse,
+              border: void 0
+            };
+          }
           return {
-            bg: currentState === "press" ? theme.colors.control.mono.primary.bgPress : currentState === "hover" ? theme.colors.control.mono.primary.bgHover : theme.colors.background.inverse,
+            bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
             text: theme.colors.content.inverse,
             border: void 0
           };
-        }
-        return {
-          bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
-          text: theme.colors.content.inverse,
-          border: void 0
-        };
-      default:
-        return {
-          bg: "transparent",
-          text: theme.colors.content.primary,
-          border: void 0
-        };
-    }
-  };
-  const getFocusRingColor = () => {
-    switch (variant) {
-      case "brand":
-        return theme.colors.overlay.brand;
-      case "brandExtra":
-        return theme.colors.overlay.brandExtra;
-      case "inverse":
-        return "rgba(255, 255, 255, 0.3)";
-      default:
-        return theme.colors.overlay.mono;
-    }
-  };
-  const getSpinnerColor = () => {
-    switch (variant) {
-      case "brand":
-        return theme.colors.content.brand.primary;
-      case "primary":
-        return theme.colors.content.primary;
-      case "secondary":
-        return theme.colors.content.secondary;
-      case "tertiary":
-        return theme.colors.content.tertiary;
-      case "brandExtra":
-        return theme.colors.content.brandExtra.secondary;
-      case "inverse":
-        return theme.colors.content.inverse;
-      default:
-        return theme.colors.content.brand.primary;
-    }
-  };
-  const colors = getVariantColors(state);
-  const focusRingColor = getFocusRingColor();
-  const spinnerColor = getSpinnerColor();
-  const iconSize = ICON_SIZES[size];
-  const spinnerSize = SPINNER_SIZES[size];
-  const fontSize = FONT_SIZES[size];
-  const borderRadius = BORDER_RADIUS[size];
-  const lineHeight = LINE_HEIGHTS[size];
-  const showTextLabel = hasVisibleLabel(children);
-  const hasIconChildren = !showTextLabel && hasRenderableContent(children);
-  const isIconOnly = !loading && !showTextLabel && Boolean(iconLeft || iconRight || hasIconChildren);
-  const iconOnlyHitArea = theme.sizing.flexButton(size).height;
-  const handleMouseEnter = () => {
-    if (!isDisabled) {
-      isMouseOverRef.current = true;
-      setState("hover");
-    }
-  };
-  const handleMouseLeave = () => {
-    if (!isDisabled) {
-      isMouseOverRef.current = false;
-      setState("default");
-    }
-  };
-  const handleMouseDown = () => {
-    if (!isDisabled) {
-      setState("press");
-    }
-  };
-  const handleMouseUp = () => {
-    if (!isDisabled) {
-      setState(isMouseOverRef.current ? "hover" : "default");
-    }
-  };
-  const handleFocus = () => {
-    if (!isDisabled) {
-      setIsFocused(true);
-    }
-  };
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
-  const handleClick = (event) => {
-    if (isDisabled) return;
-    if (onPress) {
-      onPress();
-    }
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  const handleKeyDown = (event) => {
-    if (isDisabled) return;
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      setState("press");
-    }
-  };
-  const handleKeyUp = (event) => {
-    if (isDisabled) return;
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      setState(isMouseOverRef.current ? "hover" : "default");
+        default:
+          return {
+            bg: "transparent",
+            text: theme.colors.content.primary,
+            border: void 0
+          };
+      }
+    };
+    const getFocusRingColor = () => {
+      switch (variant) {
+        case "brand":
+          return theme.colors.overlay.brand;
+        case "brandExtra":
+          return theme.colors.overlay.brandExtra;
+        case "inverse":
+          return "rgba(255, 255, 255, 0.3)";
+        default:
+          return theme.colors.overlay.mono;
+      }
+    };
+    const getSpinnerColor = () => {
+      switch (variant) {
+        case "brand":
+          return theme.colors.content.brand.primary;
+        case "primary":
+          return theme.colors.content.primary;
+        case "secondary":
+          return theme.colors.content.secondary;
+        case "tertiary":
+          return theme.colors.content.tertiary;
+        case "brandExtra":
+          return theme.colors.content.brandExtra.secondary;
+        case "inverse":
+          return theme.colors.content.inverse;
+        default:
+          return theme.colors.content.brand.primary;
+      }
+    };
+    const colors = getVariantColors(state);
+    const focusRingColor = getFocusRingColor();
+    const spinnerColor = getSpinnerColor();
+    const iconSize = ICON_SIZES[size];
+    const spinnerSize = SPINNER_SIZES[size];
+    const fontSize = FONT_SIZES[size];
+    const borderRadius = BORDER_RADIUS[size];
+    const lineHeight = LINE_HEIGHTS[size];
+    const showTextLabel = hasVisibleLabel(children);
+    const hasIconChildren = !showTextLabel && hasRenderableContent(children);
+    const isIconOnly = !loading && !showTextLabel && Boolean(iconLeft || iconRight || hasIconChildren);
+    const iconOnlyHitArea = getFlexButtonBoxSize(size);
+    const handleMouseEnter = () => {
+      if (!isDisabled) {
+        isMouseOverRef.current = true;
+        setState("hover");
+      }
+    };
+    const handleMouseLeave = () => {
+      if (!isDisabled) {
+        isMouseOverRef.current = false;
+        setState("default");
+      }
+    };
+    const handleMouseDown = () => {
+      if (!isDisabled) {
+        setState("press");
+      }
+    };
+    const handleMouseUp = () => {
+      if (!isDisabled) {
+        setState(isMouseOverRef.current ? "hover" : "default");
+      }
+    };
+    const handleFocus = () => {
+      if (!isDisabled) {
+        setIsFocused(true);
+      }
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    const handleClick = (event) => {
+      if (isDisabled) return;
       if (onPress) {
         onPress();
       }
-    }
-  };
-  const borderShadow = colors.border ? `inset 0 0 0 1px ${colors.border}` : void 0;
-  const focusShadow = isFocused && !isDisabled ? `0 0 0 2px ${focusRingColor}` : void 0;
-  const boxShadows = [];
-  if (borderShadow) boxShadows.push(borderShadow);
-  if (focusShadow) boxShadows.push(focusShadow);
-  const combinedBoxShadow = boxShadows.length > 0 ? boxShadows.join(", ") : "none";
-  const buttonStyle = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: isIconOnly ? 0 : "2px",
-    boxSizing: "border-box",
-    padding: noPadding ? "0px" : `${FLEX_BUTTON_PADDING}px`,
-    backgroundColor: loading ? "transparent" : colors.bg,
-    color: colors.text,
-    border: "none",
-    borderWidth: "0px",
-    borderRadius: `${borderRadius}px`,
-    cursor: isDisabled ? "not-allowed" : "pointer",
-    fontSize: `${fontSize}px`,
-    fontWeight: 500,
-    lineHeight: isIconOnly ? 0 : lineHeight,
-    fontFamily: "inherit",
-    transition: "background-color 100ms ease-in-out, color 100ms ease-in-out, box-shadow 100ms ease-in-out",
-    outline: "none",
-    boxShadow: combinedBoxShadow,
-    opacity: isDisabled && !loading ? 0.6 : 1,
-    ...isIconOnly && {
-      width: iconOnlyHitArea,
-      height: iconOnlyHitArea,
-      minWidth: iconOnlyHitArea,
-      minHeight: iconOnlyHitArea,
-      flexShrink: 0
-    }
-  };
-  const contentStyle = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: isIconOnly ? 0 : "2px",
-    ...isIconOnly && {
-      width: "100%",
-      height: "100%",
-      lineHeight: 0
-    }
-  };
-  const spinnerStyle = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "transparent",
-    height: lineHeight
-  };
-  const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx7(
-    "button",
-    {
-      ...buttonProps,
-      type,
-      className,
-      disabled: isDisabled,
-      onClick: handleClick,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      "aria-label": computedAriaLabel,
-      "aria-busy": loading || void 0,
-      "aria-disabled": isDisabled || void 0,
-      "aria-describedby": ariaDescribedBy,
-      "aria-expanded": ariaExpanded,
-      "aria-haspopup": ariaHasPopup,
-      "aria-pressed": ariaPressed,
-      "aria-controls": ariaControls,
-      tabIndex,
-      style: buttonStyle,
-      "data-testid": testID || "flex-button",
-      children: /* @__PURE__ */ jsx7("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx7("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx7(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-        iconLeft && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
-        showTextLabel && /* @__PURE__ */ jsx7("span", { children }),
-        hasIconChildren && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children }),
-        iconRight && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children: iconRight })
-      ] }) })
-    }
-  );
-};
+      if (onClick) {
+        onClick(event);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (isDisabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        setState("press");
+      }
+    };
+    const handleKeyUp = (event) => {
+      if (isDisabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        setState(isMouseOverRef.current ? "hover" : "default");
+        if (onPress) {
+          onPress();
+        }
+      }
+    };
+    const borderShadow = colors.border ? `inset 0 0 0 1px ${colors.border}` : void 0;
+    const focusShadow = isFocused && !isDisabled ? `0 0 0 2px ${focusRingColor}` : void 0;
+    const boxShadows = [];
+    if (borderShadow) boxShadows.push(borderShadow);
+    if (focusShadow) boxShadows.push(focusShadow);
+    const combinedBoxShadow = boxShadows.length > 0 ? boxShadows.join(", ") : "none";
+    const buttonStyle = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: isIconOnly ? 0 : "2px",
+      boxSizing: "border-box",
+      padding: noPadding ? "0px" : `${FLEX_BUTTON_PADDING}px`,
+      backgroundColor: loading ? "transparent" : colors.bg,
+      color: colors.text,
+      border: "none",
+      borderWidth: "0px",
+      borderRadius: `${borderRadius}px`,
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      fontSize: `${fontSize}px`,
+      fontWeight: 500,
+      lineHeight: isIconOnly ? 0 : lineHeight,
+      fontFamily: "inherit",
+      transition: "background-color 100ms ease-in-out, color 100ms ease-in-out, box-shadow 100ms ease-in-out",
+      outline: "none",
+      boxShadow: combinedBoxShadow,
+      opacity: isDisabled && !loading ? 0.6 : 1,
+      ...isIconOnly && {
+        width: iconOnlyHitArea,
+        height: iconOnlyHitArea,
+        minWidth: iconOnlyHitArea,
+        minHeight: iconOnlyHitArea,
+        flexShrink: 0
+      }
+    };
+    const contentStyle = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: isIconOnly ? 0 : "2px",
+      ...isIconOnly && {
+        width: "100%",
+        height: "100%",
+        lineHeight: 0
+      }
+    };
+    const spinnerStyle = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "transparent",
+      height: lineHeight
+    };
+    const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
+    return /* @__PURE__ */ jsx7(
+      "button",
+      {
+        ...buttonProps,
+        ref,
+        type,
+        className,
+        disabled: isDisabled,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        "aria-label": computedAriaLabel,
+        "aria-busy": loading || void 0,
+        "aria-disabled": isDisabled || void 0,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        tabIndex,
+        style: buttonStyle,
+        "data-testid": testID || "flex-button",
+        children: /* @__PURE__ */ jsx7("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx7("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx7(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+          iconLeft && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
+          showTextLabel && /* @__PURE__ */ jsx7("span", { children }),
+          hasIconChildren && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children }),
+          iconRight && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children: iconRight })
+        ] }) })
+      }
+    );
+  }
+);
 FlexButton.displayName = "FlexButton";
 
 // src/AppButton.tsx
 import React6, { useState as useState4 } from "react";
-import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var cloneIconWithDefaults3 = (icon, defaultSize, defaultColor) => {
   if (!React6.isValidElement(icon)) return icon;
@@ -1245,7 +1259,7 @@ var AppButton = ({
   themeMode,
   themeProductContext
 }) => {
-  const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
+  const { theme } = useResolvedTheme4({ themeMode, themeProductContext });
   const [isKeyboardPressed, setIsKeyboardPressed] = useState4(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
@@ -1431,7 +1445,7 @@ AppButton.displayName = "AppButton";
 
 // src/ButtonGroup.tsx
 import React7 from "react";
-import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme5 } from "@xsolla/xui-core";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var ButtonGroup = ({
   orientation = "horizontal",
@@ -1448,7 +1462,7 @@ var ButtonGroup = ({
   themeMode,
   themeProductContext
 }) => {
-  const { theme } = useResolvedTheme4({ themeMode, themeProductContext });
+  const { theme } = useResolvedTheme5({ themeMode, themeProductContext });
   const flattenChildren = (children2) => {
     const result = [];
     React7.Children.forEach(children2, (child) => {
@@ -1563,6 +1577,7 @@ export {
   Button,
   ButtonGroup,
   FlexButton,
-  IconButton
+  IconButton,
+  getFlexButtonBoxSize
 };
 //# sourceMappingURL=index.mjs.map