@xsolla/xui-uploader 0.89.0 → 0.91.0

package/web/index.mjs

@@ -1,5 +1,5 @@
 // src/Uploader.tsx
-import React3, { useRef, useState, forwardRef as forwardRef3 } from "react";
+import React2, { useRef, useState, forwardRef } from "react";
 
 // ../primitives-web/src/Box.tsx
 import React from "react";
@@ -202,259 +202,12 @@ var Text = ({
   );
 };
 
-// ../primitives-web/src/Spinner.tsx
-import styled3, { keyframes } from "styled-components";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-var StyledSpinner = styled3.div`
-  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  border: ${(props) => props.strokeWidth || 2}px solid
-    ${(props) => props.color || "currentColor"};
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: ${rotate} 1s linear infinite;
-`;
-var Spinner = ({
-  role = "status",
-  "aria-label": ariaLabel,
-  "aria-live": ariaLive = "polite",
-  "aria-describedby": ariaDescribedBy,
-  testID,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx3(
-    StyledSpinner,
-    {
-      role,
-      "aria-label": ariaLabel,
-      "aria-live": ariaLive,
-      "aria-describedby": ariaDescribedBy,
-      "data-testid": testID,
-      ...props
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// ../primitives-web/src/Icon.tsx
-import styled4 from "styled-components";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var StyledIcon = styled4.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  color: ${(props) => props.color || "currentColor"};
-
-  svg {
-    width: 100%;
-    height: 100%;
-    fill: none;
-    stroke: currentColor;
-  }
-`;
-
-// ../primitives-web/src/Divider.tsx
-import styled5 from "styled-components";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var StyledDivider = styled5.div`
-  background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
-  width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
-  height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-
-  ${(props) => props.dashStroke && `
-    border-style: dashed;
-    border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
-    border-width: 0;
-    ${props.vertical ? `
-      border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
-      height: 100%;
-    ` : `
-      border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-      width: 100%;
-    `}
-  `}
-`;
-
-// ../primitives-web/src/Input.tsx
-import { forwardRef } from "react";
-import styled6 from "styled-components";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var StyledInput = styled6.input`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var InputPrimitive = forwardRef(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    name,
-    type,
-    inputMode,
-    autoComplete,
-    id,
-    "aria-invalid": ariaInvalid,
-    "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId,
-    ...rest
-  }, ref) => {
-    const handleChange = (e) => {
-      if (onChange) {
-        onChange(e);
-      }
-      if (onChangeText) {
-        onChangeText(e.target.value);
-      }
-    };
-    const inputValue = value !== void 0 ? value : "";
-    return /* @__PURE__ */ jsx6(
-      StyledInput,
-      {
-        ref,
-        id,
-        value: inputValue,
-        name,
-        placeholder,
-        onChange: handleChange,
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        type: secureTextEntry ? "password" : type || "text",
-        inputMode,
-        autoComplete,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        "aria-invalid": ariaInvalid,
-        "aria-describedby": ariaDescribedBy,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-label": ariaLabel,
-        "aria-disabled": ariaDisabled,
-        "data-testid": dataTestId,
-        ...rest
-      }
-    );
-  }
-);
-InputPrimitive.displayName = "InputPrimitive";
-
-// ../primitives-web/src/TextArea.tsx
-import { forwardRef as forwardRef2 } from "react";
-import styled7 from "styled-components";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var StyledTextArea = styled7.textarea`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-  resize: none;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var TextAreaPrimitive = forwardRef2(
-  ({
-    value,
-    placeholder,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows
-  }, ref) => {
-    return /* @__PURE__ */ jsx7(
-      StyledTextArea,
-      {
-        ref,
-        value,
-        placeholder,
-        onChange: (e) => onChangeText?.(e.target.value),
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        rows
-      }
-    );
-  }
-);
-TextAreaPrimitive.displayName = "TextAreaPrimitive";
-
 // src/Uploader.tsx
 import { useDesignSystem } from "@xsolla/xui-core";
 import { Button } from "@xsolla/xui-button";
 import { Upload, File, X } from "@xsolla/xui-icons";
-import { jsx as jsx8, jsxs } from "react/jsx-runtime";
-var Uploader = forwardRef3(
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Uploader = forwardRef(
   ({
     label,
     placeholder = "Select files to upload",
@@ -467,7 +220,7 @@ var Uploader = forwardRef3(
     const { theme } = useDesignSystem();
     const fileInputRef = useRef(null);
     const [selectedFiles, setSelectedFiles] = useState([]);
-    React3.useImperativeHandle(
+    React2.useImperativeHandle(
       ref,
       () => fileInputRef.current,
       []
@@ -489,7 +242,7 @@ var Uploader = forwardRef3(
       onFilesChange?.(updatedFiles);
     };
     return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 8, width: "100%", children: [
-      label && /* @__PURE__ */ jsx8(
+      label && /* @__PURE__ */ jsx3(
         Text,
         {
           color: theme.colors.content.secondary,
@@ -498,7 +251,7 @@ var Uploader = forwardRef3(
           children: label
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx3(
         "input",
         {
           type: "file",
@@ -510,7 +263,7 @@ var Uploader = forwardRef3(
           disabled
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx3(
         Button,
         {
           variant: "primary",
@@ -518,12 +271,12 @@ var Uploader = forwardRef3(
           size,
           disabled,
           onPress: handleButtonClick,
-          iconLeft: /* @__PURE__ */ jsx8(Upload, {}),
+          iconLeft: /* @__PURE__ */ jsx3(Upload, {}),
           fullWidth: true,
           children: placeholder
         }
       ),
-      selectedFiles.length > 0 && /* @__PURE__ */ jsx8(Box, { flexDirection: "column", gap: 4, marginTop: 4, children: selectedFiles.map((file, index) => /* @__PURE__ */ jsxs(
+      selectedFiles.length > 0 && /* @__PURE__ */ jsx3(Box, { flexDirection: "column", gap: 4, marginTop: 4, children: selectedFiles.map((file, index) => /* @__PURE__ */ jsxs(
         Box,
         {
           flexDirection: "row",
@@ -535,8 +288,8 @@ var Uploader = forwardRef3(
           gap: 8,
           children: [
             /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 8, flex: 1, children: [
-              /* @__PURE__ */ jsx8(File, { size: 16, color: theme.colors.content.secondary }),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx3(File, { size: 16, color: theme.colors.content.secondary }),
+              /* @__PURE__ */ jsx3(
                 Text,
                 {
                   fontSize: 13,
@@ -546,7 +299,7 @@ var Uploader = forwardRef3(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx3(
               Box,
               {
                 as: "button",
@@ -557,7 +310,7 @@ var Uploader = forwardRef3(
                   cursor: "pointer",
                   padding: 4
                 },
-                children: /* @__PURE__ */ jsx8(X, { size: 14, color: theme.colors.content.alert.primary })
+                children: /* @__PURE__ */ jsx3(X, { size: 14, color: theme.colors.content.alert.primary })
               }
             )
           ]

package/web/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Uploader.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Spinner.tsx","../../../primitives-web/src/Icon.tsx","../../../primitives-web/src/Divider.tsx","../../../primitives-web/src/Input.tsx","../../../primitives-web/src/TextArea.tsx"],"sourcesContent":["import React, { useRef, useState, forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Button } from \"@xsolla/xui-button\";\nimport { Upload, File, X } from \"@xsolla/xui-icons\";\n\nexport interface UploaderProps {\n  /**\n   * Label for the uploader\n   */\n  label?: string;\n  /**\n   * Placeholder text when no files are selected\n   */\n  placeholder?: string;\n  /**\n   * Accepted file types (e.g., \".jpg,.png\")\n   */\n  accept?: string;\n  /**\n   * Whether multiple files can be selected\n   */\n  multiple?: boolean;\n  /**\n   * Callback when files are selected\n   */\n  onFilesChange?: (files: File[]) => void;\n  /**\n   * Property for disabling the control\n   */\n  disabled?: boolean;\n  /**\n   * Size of the button\n   */\n  size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n}\n\nexport const Uploader = forwardRef<HTMLInputElement, UploaderProps>(\n  (\n    {\n      label,\n      placeholder = \"Select files to upload\",\n      accept,\n      multiple = false,\n      onFilesChange,\n      disabled = false,\n      size = \"md\",\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n    const fileInputRef = useRef<HTMLInputElement>(null);\n    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);\n\n    // Forward ref to input element\n    React.useImperativeHandle(\n      ref,\n      () => fileInputRef.current as HTMLInputElement,\n      []\n    );\n\n    const handleButtonClick = () => {\n      fileInputRef.current?.click();\n    };\n\n    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        const newFiles = Array.from(e.target.files);\n        const updatedFiles = multiple\n          ? [...selectedFiles, ...newFiles]\n          : newFiles;\n        setSelectedFiles(updatedFiles);\n        onFilesChange?.(updatedFiles);\n      }\n    };\n\n    const removeFile = (index: number) => {\n      const updatedFiles = selectedFiles.filter((_, i) => i !== index);\n      setSelectedFiles(updatedFiles);\n      onFilesChange?.(updatedFiles);\n    };\n\n    return (\n      <Box flexDirection=\"column\" gap={8} width=\"100%\">\n        {label && (\n          <Text\n            color={theme.colors.content.secondary}\n            fontSize={14}\n            fontWeight=\"500\"\n          >\n            {label}\n          </Text>\n        )}\n\n        <input\n          type=\"file\"\n          ref={fileInputRef}\n          accept={accept}\n          multiple={multiple}\n          onChange={handleFileChange}\n          style={{ display: \"none\" }}\n          disabled={disabled}\n        />\n\n        <Button\n          variant=\"primary\"\n          tone=\"brand\"\n          size={size}\n          disabled={disabled}\n          onPress={handleButtonClick}\n          iconLeft={<Upload />}\n          fullWidth\n        >\n          {placeholder}\n        </Button>\n\n        {selectedFiles.length > 0 && (\n          <Box flexDirection=\"column\" gap={4} marginTop={4}>\n            {selectedFiles.map((file, index) => (\n              <Box\n                key={`${file.name}-${index}`}\n                flexDirection=\"row\"\n                alignItems=\"center\"\n                justifyContent=\"space-between\"\n                backgroundColor={theme.colors.background.secondary}\n                padding={8}\n                borderRadius={4}\n                gap={8}\n              >\n                <Box flexDirection=\"row\" alignItems=\"center\" gap={8} flex={1}>\n                  <File size={16} color={theme.colors.content.secondary} />\n                  <Text\n                    fontSize={13}\n                    color={theme.colors.content.primary}\n                    numberOfLines={1}\n                  >\n                    {file.name}\n                  </Text>\n                </Box>\n                <Box\n                  as=\"button\"\n                  onPress={() => removeFile(index)}\n                  style={{\n                    border: \"none\",\n                    background: \"transparent\",\n                    cursor: \"pointer\",\n                    padding: 4,\n                  }}\n                >\n                  <X size={14} color={theme.colors.content.alert.primary} />\n                </Box>\n              </Box>\n            ))}\n          </Box>\n        )}\n      </Box>\n    );\n  }\n);\n\nUploader.displayName = \"Uploader\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n  display: flex;\n  box-sizing: border-box;\n  background-color: ${(props) => props.backgroundColor || \"transparent\"};\n  border-color: ${(props) => props.borderColor || \"transparent\"};\n  border-width: ${(props) =>\n    typeof props.borderWidth === \"number\"\n      ? `${props.borderWidth}px`\n      : props.borderWidth || 0};\n\n  ${(props) =>\n    props.borderBottomWidth !== undefined &&\n    `\n    border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n    border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n    border-bottom-style: solid;\n  `}\n  ${(props) =>\n    props.borderTopWidth !== undefined &&\n    `\n    border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n    border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n    border-top-style: solid;\n  `}\n  ${(props) =>\n    props.borderLeftWidth !== undefined &&\n    `\n    border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n    border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n    border-left-style: solid;\n  `}\n  ${(props) =>\n    props.borderRightWidth !== undefined &&\n    `\n    border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n    border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n    border-right-style: solid;\n  `}\n\n  border-style: ${(props) =>\n    props.borderStyle ||\n    (props.borderWidth ||\n    props.borderBottomWidth ||\n    props.borderTopWidth ||\n    props.borderLeftWidth ||\n    props.borderRightWidth\n      ? \"solid\"\n      : \"none\")};\n  border-radius: ${(props) =>\n    typeof props.borderRadius === \"number\"\n      ? `${props.borderRadius}px`\n      : props.borderRadius || 0};\n  height: ${(props) =>\n    typeof props.height === \"number\"\n      ? `${props.height}px`\n      : props.height || \"auto\"};\n  width: ${(props) =>\n    typeof props.width === \"number\"\n      ? `${props.width}px`\n      : props.width || \"auto\"};\n  min-width: ${(props) =>\n    typeof props.minWidth === \"number\"\n      ? `${props.minWidth}px`\n      : props.minWidth || \"auto\"};\n  min-height: ${(props) =>\n    typeof props.minHeight === \"number\"\n      ? `${props.minHeight}px`\n      : props.minHeight || \"auto\"};\n\n  padding: ${(props) =>\n    typeof props.padding === \"number\"\n      ? `${props.padding}px`\n      : props.padding || 0};\n  ${(props) =>\n    props.paddingHorizontal &&\n    `\n    padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n    padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n  `}\n  ${(props) =>\n    props.paddingVertical &&\n    `\n    padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n    padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n  `}\n  ${(props) =>\n    props.paddingTop !== undefined &&\n    `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n  ${(props) =>\n    props.paddingBottom !== undefined &&\n    `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n  ${(props) =>\n    props.paddingLeft !== undefined &&\n    `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n  ${(props) =>\n    props.paddingRight !== undefined &&\n    `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n  margin: ${(props) =>\n    typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n  ${(props) =>\n    props.marginTop !== undefined &&\n    `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n  ${(props) =>\n    props.marginBottom !== undefined &&\n    `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n  ${(props) =>\n    props.marginLeft !== undefined &&\n    `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n  ${(props) =>\n    props.marginRight !== undefined &&\n    `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n  flex-direction: ${(props) => props.flexDirection || \"column\"};\n  flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n  align-items: ${(props) => props.alignItems || \"stretch\"};\n  justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n  cursor: ${(props) =>\n    props.cursor\n      ? props.cursor\n      : props.onClick || props.onPress\n        ? \"pointer\"\n        : \"inherit\"};\n  position: ${(props) => props.position || \"static\"};\n  top: ${(props) =>\n    typeof props.top === \"number\" ? `${props.top}px` : props.top};\n  bottom: ${(props) =>\n    typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n  left: ${(props) =>\n    typeof props.left === \"number\" ? `${props.left}px` : props.left};\n  right: ${(props) =>\n    typeof props.right === \"number\" ? `${props.right}px` : props.right};\n  flex: ${(props) => props.flex};\n  flex-shrink: ${(props) => props.flexShrink ?? 1};\n  gap: ${(props) =>\n    typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n  align-self: ${(props) => props.alignSelf || \"auto\"};\n  overflow: ${(props) => props.overflow || \"visible\"};\n  overflow-x: ${(props) => props.overflowX || \"visible\"};\n  overflow-y: ${(props) => props.overflowY || \"visible\"};\n  z-index: ${(props) => props.zIndex};\n  opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n  pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n  &:hover {\n    ${(props) =>\n      props.hoverStyle?.backgroundColor &&\n      `background-color: ${props.hoverStyle.backgroundColor};`}\n    ${(props) =>\n      props.hoverStyle?.borderColor &&\n      `border-color: ${props.hoverStyle.borderColor};`}\n  }\n\n  &:active {\n    ${(props) =>\n      props.pressStyle?.backgroundColor &&\n      `background-color: ${props.pressStyle.backgroundColor};`}\n  }\n`;\n\nexport const Box = React.forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  BoxProps\n>(\n  (\n    {\n      children,\n      onPress,\n      onKeyDown,\n      onKeyUp,\n      role,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-current\": ariaCurrent,\n      \"aria-disabled\": ariaDisabled,\n      \"aria-live\": ariaLive,\n      \"aria-busy\": ariaBusy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-pressed\": ariaPressed,\n      \"aria-controls\": ariaControls,\n      tabIndex,\n      as,\n      src,\n      alt,\n      type,\n      disabled,\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    // Handle as=\"img\" for rendering images with proper border-radius\n    if (as === \"img\" && src) {\n      return (\n        <img\n          src={src}\n          alt={alt || \"\"}\n          style={{\n            display: \"block\",\n            objectFit: \"cover\",\n            width:\n              typeof props.width === \"number\"\n                ? `${props.width}px`\n                : props.width,\n            height:\n              typeof props.height === \"number\"\n                ? `${props.height}px`\n                : props.height,\n            borderRadius:\n              typeof props.borderRadius === \"number\"\n                ? `${props.borderRadius}px`\n                : props.borderRadius,\n            position: props.position,\n            top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n            left:\n              typeof props.left === \"number\" ? `${props.left}px` : props.left,\n            right:\n              typeof props.right === \"number\"\n                ? `${props.right}px`\n                : props.right,\n            bottom:\n              typeof props.bottom === \"number\"\n                ? `${props.bottom}px`\n                : props.bottom,\n          }}\n        />\n      );\n    }\n\n    return (\n      <StyledBox\n        ref={ref}\n        as={as}\n        id={id}\n        type={as === \"button\" ? type || \"button\" : undefined}\n        disabled={as === \"button\" ? disabled : undefined}\n        onClick={onPress}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        role={role}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-current={ariaCurrent}\n        aria-disabled={ariaDisabled}\n        aria-busy={ariaBusy}\n        aria-describedby={ariaDescribedBy}\n        aria-expanded={ariaExpanded}\n        aria-haspopup={ariaHasPopup}\n        aria-pressed={ariaPressed}\n        aria-controls={ariaControls}\n        aria-live={ariaLive}\n        tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n        {...props}\n      >\n        {children}\n      </StyledBox>\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n  color: ${(props) => props.color || \"inherit\"};\n  font-size: ${(props) =>\n    typeof props.fontSize === \"number\"\n      ? `${props.fontSize}px`\n      : props.fontSize || \"inherit\"};\n  font-weight: ${(props) => props.fontWeight || \"normal\"};\n  font-family: ${(props) =>\n    props.fontFamily ||\n    '\"Pilat Wide Bold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important'};\n  line-height: ${(props) =>\n    typeof props.lineHeight === \"number\"\n      ? `${props.lineHeight}px`\n      : props.lineHeight || \"inherit\"};\n  white-space: ${(props) => props.whiteSpace || \"normal\"};\n  text-align: ${(props) => props.textAlign || \"inherit\"};\n  text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n  style,\n  className,\n  id,\n  role,\n  ...props\n}) => {\n  return (\n    <StyledText\n      {...props}\n      style={style}\n      className={className}\n      id={id}\n      role={role}\n    />\n  );\n};\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n  width: ${(props) =>\n    typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n  height: ${(props) =>\n    typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n  border: ${(props) => props.strokeWidth || 2}px solid\n    ${(props) => props.color || \"currentColor\"};\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  display: inline-block;\n  box-sizing: border-box;\n  animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n  role = \"status\",\n  \"aria-label\": ariaLabel,\n  \"aria-live\": ariaLive = \"polite\",\n  \"aria-describedby\": ariaDescribedBy,\n  testID,\n  ...props\n}) => {\n  return (\n    <StyledSpinner\n      role={role}\n      aria-label={ariaLabel}\n      aria-live={ariaLive}\n      aria-describedby={ariaDescribedBy}\n      data-testid={testID}\n      {...props}\n    />\n  );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${(props) =>\n    typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n  height: ${(props) =>\n    typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n  color: ${(props) => props.color || \"currentColor\"};\n\n  svg {\n    width: 100%;\n    height: 100%;\n    fill: none;\n    stroke: currentColor;\n  }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n  return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledDivider = styled.div<DividerProps>`\n  background-color: ${(props) =>\n    props.dashStroke\n      ? \"transparent\"\n      : props.color || \"rgba(255, 255, 255, 0.15)\"};\n  width: ${(props) =>\n    props.vertical\n      ? typeof props.width === \"number\"\n        ? `${props.width}px`\n        : props.width || \"1px\"\n      : \"100%\"};\n  height: ${(props) =>\n    props.vertical\n      ? \"100%\"\n      : typeof props.height === \"number\"\n        ? `${props.height}px`\n        : props.height || \"1px\"};\n\n  ${(props) =>\n    props.dashStroke &&\n    `\n    border-style: dashed;\n    border-color: ${props.color || \"rgba(255, 255, 255, 0.15)\"};\n    border-width: 0;\n    ${\n      props.vertical\n        ? `\n      border-left-width: ${typeof props.width === \"number\" ? `${props.width}px` : props.width || \"1px\"};\n      height: 100%;\n    `\n        : `\n      border-top-width: ${typeof props.height === \"number\" ? `${props.height}px` : props.height || \"1px\"};\n      width: 100%;\n    `\n    }\n  `}\n`;\n\nexport const Divider: React.FC<DividerProps> = (props) => {\n  return <StyledDivider {...props} />;\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n  background: transparent;\n  border: none;\n  outline: none;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  margin: 0;\n  color: ${(props) => props.color || \"inherit\"};\n  font-size: ${(props) =>\n    typeof props.fontSize === \"number\"\n      ? `${props.fontSize}px`\n      : props.fontSize || \"inherit\"};\n  font-family: inherit;\n  text-align: inherit;\n\n  &::placeholder {\n    color: ${(props) =>\n      props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n  (\n    {\n      value,\n      placeholder,\n      onChange,\n      onChangeText,\n      onFocus,\n      onBlur,\n      onKeyDown,\n      disabled,\n      secureTextEntry,\n      style,\n      color,\n      fontSize,\n      placeholderTextColor,\n      maxLength,\n      name,\n      type,\n      inputMode,\n      autoComplete,\n      id,\n      \"aria-invalid\": ariaInvalid,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel,\n      \"aria-disabled\": ariaDisabled,\n      \"data-testid\": dataTestId,\n      ...rest\n    },\n    ref\n  ) => {\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (onChange) {\n        onChange(e);\n      }\n      if (onChangeText) {\n        onChangeText(e.target.value);\n      }\n    };\n\n    // Always pass value to make it a controlled input\n    const inputValue = value !== undefined ? value : \"\";\n\n    return (\n      <StyledInput\n        ref={ref}\n        id={id}\n        value={inputValue}\n        name={name}\n        placeholder={placeholder}\n        onChange={handleChange}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        disabled={disabled}\n        type={secureTextEntry ? \"password\" : type || \"text\"}\n        inputMode={inputMode}\n        autoComplete={autoComplete}\n        style={style}\n        color={color}\n        fontSize={fontSize}\n        placeholderTextColor={placeholderTextColor}\n        maxLength={maxLength}\n        aria-invalid={ariaInvalid}\n        aria-describedby={ariaDescribedBy}\n        aria-labelledby={ariaLabelledBy}\n        aria-label={ariaLabel}\n        aria-disabled={ariaDisabled}\n        data-testid={dataTestId}\n        {...rest}\n      />\n    );\n  }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledTextArea = styled.textarea<TextAreaPrimitiveProps>`\n  background: transparent;\n  border: none;\n  outline: none;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  margin: 0;\n  color: ${(props) => props.color || \"inherit\"};\n  font-size: ${(props) =>\n    typeof props.fontSize === \"number\"\n      ? `${props.fontSize}px`\n      : props.fontSize || \"inherit\"};\n  font-family: inherit;\n  text-align: inherit;\n  resize: none;\n\n  &::placeholder {\n    color: ${(props) =>\n      props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport const TextAreaPrimitive = forwardRef<\n  HTMLTextAreaElement,\n  TextAreaPrimitiveProps\n>(\n  (\n    {\n      value,\n      placeholder,\n      onChangeText,\n      onFocus,\n      onBlur,\n      onKeyDown,\n      disabled,\n      style,\n      color,\n      fontSize,\n      placeholderTextColor,\n      maxLength,\n      rows,\n    },\n    ref\n  ) => {\n    return (\n      <StyledTextArea\n        ref={ref}\n        value={value}\n        placeholder={placeholder}\n        onChange={(e) => onChangeText?.(e.target.value)}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        disabled={disabled}\n        style={style}\n        color={color}\n        fontSize={fontSize}\n        placeholderTextColor={placeholderTextColor}\n        maxLength={maxLength}\n        rows={rows}\n      />\n    );\n  }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n"],"mappings":"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","names":["React","forwardRef","styled","jsx","styled","jsx","styled","jsx","styled","jsx","styled","jsx","forwardRef","styled","jsx","jsx","forwardRef","React"]}
+{"version":3,"sources":["../../src/Uploader.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["import React, { useRef, useState, forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Button } from \"@xsolla/xui-button\";\nimport { Upload, File, X } from \"@xsolla/xui-icons\";\n\nexport interface UploaderProps {\n  /**\n   * Label for the uploader\n   */\n  label?: string;\n  /**\n   * Placeholder text when no files are selected\n   */\n  placeholder?: string;\n  /**\n   * Accepted file types (e.g., \".jpg,.png\")\n   */\n  accept?: string;\n  /**\n   * Whether multiple files can be selected\n   */\n  multiple?: boolean;\n  /**\n   * Callback when files are selected\n   */\n  onFilesChange?: (files: File[]) => void;\n  /**\n   * Property for disabling the control\n   */\n  disabled?: boolean;\n  /**\n   * Size of the button\n   */\n  size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n}\n\nexport const Uploader = forwardRef<HTMLInputElement, UploaderProps>(\n  (\n    {\n      label,\n      placeholder = \"Select files to upload\",\n      accept,\n      multiple = false,\n      onFilesChange,\n      disabled = false,\n      size = \"md\",\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n    const fileInputRef = useRef<HTMLInputElement>(null);\n    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);\n\n    // Forward ref to input element\n    React.useImperativeHandle(\n      ref,\n      () => fileInputRef.current as HTMLInputElement,\n      []\n    );\n\n    const handleButtonClick = () => {\n      fileInputRef.current?.click();\n    };\n\n    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        const newFiles = Array.from(e.target.files);\n        const updatedFiles = multiple\n          ? [...selectedFiles, ...newFiles]\n          : newFiles;\n        setSelectedFiles(updatedFiles);\n        onFilesChange?.(updatedFiles);\n      }\n    };\n\n    const removeFile = (index: number) => {\n      const updatedFiles = selectedFiles.filter((_, i) => i !== index);\n      setSelectedFiles(updatedFiles);\n      onFilesChange?.(updatedFiles);\n    };\n\n    return (\n      <Box flexDirection=\"column\" gap={8} width=\"100%\">\n        {label && (\n          <Text\n            color={theme.colors.content.secondary}\n            fontSize={14}\n            fontWeight=\"500\"\n          >\n            {label}\n          </Text>\n        )}\n\n        <input\n          type=\"file\"\n          ref={fileInputRef}\n          accept={accept}\n          multiple={multiple}\n          onChange={handleFileChange}\n          style={{ display: \"none\" }}\n          disabled={disabled}\n        />\n\n        <Button\n          variant=\"primary\"\n          tone=\"brand\"\n          size={size}\n          disabled={disabled}\n          onPress={handleButtonClick}\n          iconLeft={<Upload />}\n          fullWidth\n        >\n          {placeholder}\n        </Button>\n\n        {selectedFiles.length > 0 && (\n          <Box flexDirection=\"column\" gap={4} marginTop={4}>\n            {selectedFiles.map((file, index) => (\n              <Box\n                key={`${file.name}-${index}`}\n                flexDirection=\"row\"\n                alignItems=\"center\"\n                justifyContent=\"space-between\"\n                backgroundColor={theme.colors.background.secondary}\n                padding={8}\n                borderRadius={4}\n                gap={8}\n              >\n                <Box flexDirection=\"row\" alignItems=\"center\" gap={8} flex={1}>\n                  <File size={16} color={theme.colors.content.secondary} />\n                  <Text\n                    fontSize={13}\n                    color={theme.colors.content.primary}\n                    numberOfLines={1}\n                  >\n                    {file.name}\n                  </Text>\n                </Box>\n                <Box\n                  as=\"button\"\n                  onPress={() => removeFile(index)}\n                  style={{\n                    border: \"none\",\n                    background: \"transparent\",\n                    cursor: \"pointer\",\n                    padding: 4,\n                  }}\n                >\n                  <X size={14} color={theme.colors.content.alert.primary} />\n                </Box>\n              </Box>\n            ))}\n          </Box>\n        )}\n      </Box>\n    );\n  }\n);\n\nUploader.displayName = \"Uploader\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n  display: flex;\n  box-sizing: border-box;\n  background-color: ${(props) => props.backgroundColor || \"transparent\"};\n  border-color: ${(props) => props.borderColor || \"transparent\"};\n  border-width: ${(props) =>\n    typeof props.borderWidth === \"number\"\n      ? `${props.borderWidth}px`\n      : props.borderWidth || 0};\n\n  ${(props) =>\n    props.borderBottomWidth !== undefined &&\n    `\n    border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n    border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n    border-bottom-style: solid;\n  `}\n  ${(props) =>\n    props.borderTopWidth !== undefined &&\n    `\n    border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n    border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n    border-top-style: solid;\n  `}\n  ${(props) =>\n    props.borderLeftWidth !== undefined &&\n    `\n    border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n    border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n    border-left-style: solid;\n  `}\n  ${(props) =>\n    props.borderRightWidth !== undefined &&\n    `\n    border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n    border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n    border-right-style: solid;\n  `}\n\n  border-style: ${(props) =>\n    props.borderStyle ||\n    (props.borderWidth ||\n    props.borderBottomWidth ||\n    props.borderTopWidth ||\n    props.borderLeftWidth ||\n    props.borderRightWidth\n      ? \"solid\"\n      : \"none\")};\n  border-radius: ${(props) =>\n    typeof props.borderRadius === \"number\"\n      ? `${props.borderRadius}px`\n      : props.borderRadius || 0};\n  height: ${(props) =>\n    typeof props.height === \"number\"\n      ? `${props.height}px`\n      : props.height || \"auto\"};\n  width: ${(props) =>\n    typeof props.width === \"number\"\n      ? `${props.width}px`\n      : props.width || \"auto\"};\n  min-width: ${(props) =>\n    typeof props.minWidth === \"number\"\n      ? `${props.minWidth}px`\n      : props.minWidth || \"auto\"};\n  min-height: ${(props) =>\n    typeof props.minHeight === \"number\"\n      ? `${props.minHeight}px`\n      : props.minHeight || \"auto\"};\n\n  padding: ${(props) =>\n    typeof props.padding === \"number\"\n      ? `${props.padding}px`\n      : props.padding || 0};\n  ${(props) =>\n    props.paddingHorizontal &&\n    `\n    padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n    padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n  `}\n  ${(props) =>\n    props.paddingVertical &&\n    `\n    padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n    padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n  `}\n  ${(props) =>\n    props.paddingTop !== undefined &&\n    `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n  ${(props) =>\n    props.paddingBottom !== undefined &&\n    `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n  ${(props) =>\n    props.paddingLeft !== undefined &&\n    `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n  ${(props) =>\n    props.paddingRight !== undefined &&\n    `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n  margin: ${(props) =>\n    typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n  ${(props) =>\n    props.marginTop !== undefined &&\n    `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n  ${(props) =>\n    props.marginBottom !== undefined &&\n    `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n  ${(props) =>\n    props.marginLeft !== undefined &&\n    `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n  ${(props) =>\n    props.marginRight !== undefined &&\n    `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n  flex-direction: ${(props) => props.flexDirection || \"column\"};\n  flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n  align-items: ${(props) => props.alignItems || \"stretch\"};\n  justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n  cursor: ${(props) =>\n    props.cursor\n      ? props.cursor\n      : props.onClick || props.onPress\n        ? \"pointer\"\n        : \"inherit\"};\n  position: ${(props) => props.position || \"static\"};\n  top: ${(props) =>\n    typeof props.top === \"number\" ? `${props.top}px` : props.top};\n  bottom: ${(props) =>\n    typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n  left: ${(props) =>\n    typeof props.left === \"number\" ? `${props.left}px` : props.left};\n  right: ${(props) =>\n    typeof props.right === \"number\" ? `${props.right}px` : props.right};\n  flex: ${(props) => props.flex};\n  flex-shrink: ${(props) => props.flexShrink ?? 1};\n  gap: ${(props) =>\n    typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n  align-self: ${(props) => props.alignSelf || \"auto\"};\n  overflow: ${(props) => props.overflow || \"visible\"};\n  overflow-x: ${(props) => props.overflowX || \"visible\"};\n  overflow-y: ${(props) => props.overflowY || \"visible\"};\n  z-index: ${(props) => props.zIndex};\n  opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n  pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n  &:hover {\n    ${(props) =>\n      props.hoverStyle?.backgroundColor &&\n      `background-color: ${props.hoverStyle.backgroundColor};`}\n    ${(props) =>\n      props.hoverStyle?.borderColor &&\n      `border-color: ${props.hoverStyle.borderColor};`}\n  }\n\n  &:active {\n    ${(props) =>\n      props.pressStyle?.backgroundColor &&\n      `background-color: ${props.pressStyle.backgroundColor};`}\n  }\n`;\n\nexport const Box = React.forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  BoxProps\n>(\n  (\n    {\n      children,\n      onPress,\n      onKeyDown,\n      onKeyUp,\n      role,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-current\": ariaCurrent,\n      \"aria-disabled\": ariaDisabled,\n      \"aria-live\": ariaLive,\n      \"aria-busy\": ariaBusy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-pressed\": ariaPressed,\n      \"aria-controls\": ariaControls,\n      tabIndex,\n      as,\n      src,\n      alt,\n      type,\n      disabled,\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    // Handle as=\"img\" for rendering images with proper border-radius\n    if (as === \"img\" && src) {\n      return (\n        <img\n          src={src}\n          alt={alt || \"\"}\n          style={{\n            display: \"block\",\n            objectFit: \"cover\",\n            width:\n              typeof props.width === \"number\"\n                ? `${props.width}px`\n                : props.width,\n            height:\n              typeof props.height === \"number\"\n                ? `${props.height}px`\n                : props.height,\n            borderRadius:\n              typeof props.borderRadius === \"number\"\n                ? `${props.borderRadius}px`\n                : props.borderRadius,\n            position: props.position,\n            top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n            left:\n              typeof props.left === \"number\" ? `${props.left}px` : props.left,\n            right:\n              typeof props.right === \"number\"\n                ? `${props.right}px`\n                : props.right,\n            bottom:\n              typeof props.bottom === \"number\"\n                ? `${props.bottom}px`\n                : props.bottom,\n          }}\n        />\n      );\n    }\n\n    return (\n      <StyledBox\n        ref={ref}\n        as={as}\n        id={id}\n        type={as === \"button\" ? type || \"button\" : undefined}\n        disabled={as === \"button\" ? disabled : undefined}\n        onClick={onPress}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        role={role}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-current={ariaCurrent}\n        aria-disabled={ariaDisabled}\n        aria-busy={ariaBusy}\n        aria-describedby={ariaDescribedBy}\n        aria-expanded={ariaExpanded}\n        aria-haspopup={ariaHasPopup}\n        aria-pressed={ariaPressed}\n        aria-controls={ariaControls}\n        aria-live={ariaLive}\n        tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n        {...props}\n      >\n        {children}\n      </StyledBox>\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n  color: ${(props) => props.color || \"inherit\"};\n  font-size: ${(props) =>\n    typeof props.fontSize === \"number\"\n      ? `${props.fontSize}px`\n      : props.fontSize || \"inherit\"};\n  font-weight: ${(props) => props.fontWeight || \"normal\"};\n  font-family: ${(props) =>\n    props.fontFamily ||\n    '\"Pilat Wide Bold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important'};\n  line-height: ${(props) =>\n    typeof props.lineHeight === \"number\"\n      ? `${props.lineHeight}px`\n      : props.lineHeight || \"inherit\"};\n  white-space: ${(props) => props.whiteSpace || \"normal\"};\n  text-align: ${(props) => props.textAlign || \"inherit\"};\n  text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n  style,\n  className,\n  id,\n  role,\n  ...props\n}) => {\n  return (\n    <StyledText\n      {...props}\n      style={style}\n      className={className}\n      id={id}\n      role={role}\n    />\n  );\n};\n"],"mappings":";AAAA,OAAOA,UAAS,QAAQ,UAAU,kBAAkB;;;ACApD,OAAO,WAAW;AAClB,OAAO,YAAY;AAuMX;AApMR,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA,sBAGH,CAAC,UAAU,MAAM,mBAAmB,aAAa;AAAA,kBACrD,CAAC,UAAU,MAAM,eAAe,aAAa;AAAA,kBAC7C,CAAC,UACf,OAAO,MAAM,gBAAgB,WACzB,GAAG,MAAM,WAAW,OACpB,MAAM,eAAe,CAAC;AAAA;AAAA,IAE1B,CAAC,UACD,MAAM,sBAAsB,UAC5B;AAAA,2BACuB,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,2BACtG,MAAM,qBAAqB,MAAM,eAAe,aAAa;AAAA;AAAA,GAErF;AAAA,IACC,CAAC,UACD,MAAM,mBAAmB,UACzB;AAAA,wBACoB,OAAO,MAAM,mBAAmB,WAAW,GAAG,MAAM,cAAc,OAAO,MAAM,cAAc;AAAA,wBAC7F,MAAM,kBAAkB,MAAM,eAAe,aAAa;AAAA;AAAA,GAE/E;AAAA,IACC,CAAC,UACD,MAAM,oBAAoB,UAC1B;AAAA,yBACqB,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,yBAChG,MAAM,mBAAmB,MAAM,eAAe,aAAa;AAAA;AAAA,GAEjF;AAAA,IACC,CAAC,UACD,MAAM,qBAAqB,UAC3B;AAAA,0BACsB,OAAO,MAAM,qBAAqB,WAAW,GAAG,MAAM,gBAAgB,OAAO,MAAM,gBAAgB;AAAA,0BACnG,MAAM,oBAAoB,MAAM,eAAe,aAAa;AAAA;AAAA,GAEnF;AAAA;AAAA,kBAEe,CAAC,UACf,MAAM,gBACL,MAAM,eACP,MAAM,qBACN,MAAM,kBACN,MAAM,mBACN,MAAM,mBACF,UACA,OAAO;AAAA,mBACI,CAAC,UAChB,OAAO,MAAM,iBAAiB,WAC1B,GAAG,MAAM,YAAY,OACrB,MAAM,gBAAgB,CAAC;AAAA,YACnB,CAAC,UACT,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM,UAAU,MAAM;AAAA,WACnB,CAAC,UACR,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM,SAAS,MAAM;AAAA,eACd,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,MAAM;AAAA,gBAChB,CAAC,UACb,OAAO,MAAM,cAAc,WACvB,GAAG,MAAM,SAAS,OAClB,MAAM,aAAa,MAAM;AAAA;AAAA,aAEpB,CAAC,UACV,OAAO,MAAM,YAAY,WACrB,GAAG,MAAM,OAAO,OAChB,MAAM,WAAW,CAAC;AAAA,IACtB,CAAC,UACD,MAAM,qBACN;AAAA,oBACgB,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,qBACrG,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,GACxH;AAAA,IACC,CAAC,UACD,MAAM,mBACN;AAAA,mBACe,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,sBAC7F,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,GACnH;AAAA,IACC,CAAC,UACD,MAAM,eAAe,UACrB,gBAAgB,OAAO,MAAM,eAAe,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,UAAU,GAAG;AAAA,IACpG,CAAC,UACD,MAAM,kBAAkB,UACxB,mBAAmB,OAAO,MAAM,kBAAkB,WAAW,GAAG,MAAM,aAAa,OAAO,MAAM,aAAa,GAAG;AAAA,IAChH,CAAC,UACD,MAAM,gBAAgB,UACtB,iBAAiB,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,WAAW,OAAO,MAAM,WAAW,GAAG;AAAA,IACxG,CAAC,UACD,MAAM,iBAAiB,UACvB,kBAAkB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG;AAAA;AAAA,YAEpG,CAAC,UACT,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,UAAU,CAAC;AAAA,IAC1E,CAAC,UACD,MAAM,cAAc,UACpB,eAAe,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM,SAAS,GAAG;AAAA,IAChG,CAAC,UACD,MAAM,iBAAiB,UACvB,kBAAkB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG;AAAA,IAC5G,CAAC,UACD,MAAM,eAAe,UACrB,gBAAgB,OAAO,MAAM,eAAe,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,UAAU,GAAG;AAAA,IACpG,CAAC,UACD,MAAM,gBAAgB,UACtB,iBAAiB,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,WAAW,OAAO,MAAM,WAAW,GAAG;AAAA;AAAA,oBAExF,CAAC,UAAU,MAAM,iBAAiB,QAAQ;AAAA,eAC/C,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,iBACnC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,kBAAkB,YAAY;AAAA,YACxD,CAAC,UACT,MAAM,SACF,MAAM,SACN,MAAM,WAAW,MAAM,UACrB,YACA,SAAS;AAAA,cACL,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,SAC1C,CAAC,UACN,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM,GAAG;AAAA,YACpD,CAAC,UACT,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,MAAM;AAAA,UAC/D,CAAC,UACP,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,IAAI;AAAA,WACxD,CAAC,UACR,OAAO,MAAM,UAAU,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK;AAAA,UAC5D,CAAC,UAAU,MAAM,IAAI;AAAA,iBACd,CAAC,UAAU,MAAM,cAAc,CAAC;AAAA,SACxC,CAAC,UACN,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM,OAAO,CAAC;AAAA,gBACrD,CAAC,UAAU,MAAM,aAAa,MAAM;AAAA,cACtC,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,gBACpC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,gBACvC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM;AAAA,aACvB,CAAC,UAAW,MAAM,WAAW,MAAM,CAAE;AAAA,oBAC9B,CAAC,UAAW,MAAM,WAAW,SAAS,MAAO;AAAA;AAAA;AAAA,MAG3D,CAAC,UACD,MAAM,YAAY,mBAClB,qBAAqB,MAAM,WAAW,eAAe,GAAG;AAAA,MACxD,CAAC,UACD,MAAM,YAAY,eAClB,iBAAiB,MAAM,WAAW,WAAW,GAAG;AAAA;AAAA;AAAA;AAAA,MAIhD,CAAC,UACD,MAAM,YAAY,mBAClB,qBAAqB,MAAM,WAAW,eAAe,GAAG;AAAA;AAAA;AAIvD,IAAM,MAAM,MAAM;AAAA,EAIvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,QAAI,OAAO,SAAS,KAAK;AACvB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,OAAO;AAAA,YACL,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OACE,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM;AAAA,YACZ,QACE,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM;AAAA,YACZ,cACE,OAAO,MAAM,iBAAiB,WAC1B,GAAG,MAAM,YAAY,OACrB,MAAM;AAAA,YACZ,UAAU,MAAM;AAAA,YAChB,KAAK,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM;AAAA,YAC9D,MACE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM;AAAA,YAC7D,OACE,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM;AAAA,YACZ,QACE,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM;AAAA,UACd;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,OAAO,WAAW,QAAQ,WAAW;AAAA,QAC3C,UAAU,OAAO,WAAW,WAAW;AAAA,QACvC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,UAAU,aAAa,SAAY,WAAW;AAAA,QAC7C,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;;;ACzQlB,OAAOC,aAAY;AA8Bf,gBAAAC,YAAA;AA3BJ,IAAM,aAAaD,QAAO;AAAA,WACf,CAAC,UAAU,MAAM,SAAS,SAAS;AAAA,eAC/B,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,SAAS;AAAA,iBAClB,CAAC,UAAU,MAAM,cAAc,QAAQ;AAAA,iBACvC,CAAC,UACd,MAAM,cACN,mHAAmH;AAAA,iBACtG,CAAC,UACd,OAAO,MAAM,eAAe,WACxB,GAAG,MAAM,UAAU,OACnB,MAAM,cAAc,SAAS;AAAA,iBACpB,CAAC,UAAU,MAAM,cAAc,QAAQ;AAAA,gBACxC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,qBAClC,CAAC,UAAU,MAAM,kBAAkB,MAAM;AAAA;AAGvD,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;;;AFpCA,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB,SAAS,QAAQ,MAAM,SAAS;AAiFtB,gBAAAC,MA4CM,YA5CN;AAhDH,IAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,EACT,GACA,QACG;AACH,UAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,UAAM,eAAe,OAAyB,IAAI;AAClD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAiB,CAAC,CAAC;AAG7D,IAAAC,OAAM;AAAA,MACJ;AAAA,MACA,MAAM,aAAa;AAAA,MACnB,CAAC;AAAA,IACH;AAEA,UAAM,oBAAoB,MAAM;AAC9B,mBAAa,SAAS,MAAM;AAAA,IAC9B;AAEA,UAAM,mBAAmB,CAAC,MAA2C;AACnE,UAAI,EAAE,OAAO,OAAO;AAClB,cAAM,WAAW,MAAM,KAAK,EAAE,OAAO,KAAK;AAC1C,cAAM,eAAe,WACjB,CAAC,GAAG,eAAe,GAAG,QAAQ,IAC9B;AACJ,yBAAiB,YAAY;AAC7B,wBAAgB,YAAY;AAAA,MAC9B;AAAA,IACF;AAEA,UAAM,aAAa,CAAC,UAAkB;AACpC,YAAM,eAAe,cAAc,OAAO,CAAC,GAAG,MAAM,MAAM,KAAK;AAC/D,uBAAiB,YAAY;AAC7B,sBAAgB,YAAY;AAAA,IAC9B;AAEA,WACE,qBAAC,OAAI,eAAc,UAAS,KAAK,GAAG,OAAM,QACvC;AAAA,eACC,gBAAAD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM,OAAO,QAAQ;AAAA,UAC5B,UAAU;AAAA,UACV,YAAW;AAAA,UAEV;AAAA;AAAA,MACH;AAAA,MAGF,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,KAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,OAAO,EAAE,SAAS,OAAO;AAAA,UACzB;AAAA;AAAA,MACF;AAAA,MAEA,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT,UAAU,gBAAAA,KAAC,UAAO;AAAA,UAClB,WAAS;AAAA,UAER;AAAA;AAAA,MACH;AAAA,MAEC,cAAc,SAAS,KACtB,gBAAAA,KAAC,OAAI,eAAc,UAAS,KAAK,GAAG,WAAW,GAC5C,wBAAc,IAAI,CAAC,MAAM,UACxB;AAAA,QAAC;AAAA;AAAA,UAEC,eAAc;AAAA,UACd,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,iBAAiB,MAAM,OAAO,WAAW;AAAA,UACzC,SAAS;AAAA,UACT,cAAc;AAAA,UACd,KAAK;AAAA,UAEL;AAAA,iCAAC,OAAI,eAAc,OAAM,YAAW,UAAS,KAAK,GAAG,MAAM,GACzD;AAAA,8BAAAA,KAAC,QAAK,MAAM,IAAI,OAAO,MAAM,OAAO,QAAQ,WAAW;AAAA,cACvD,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,OAAO,MAAM,OAAO,QAAQ;AAAA,kBAC5B,eAAe;AAAA,kBAEd,eAAK;AAAA;AAAA,cACR;AAAA,eACF;AAAA,YACA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,SAAS,MAAM,WAAW,KAAK;AAAA,gBAC/B,OAAO;AAAA,kBACL,QAAQ;AAAA,kBACR,YAAY;AAAA,kBACZ,QAAQ;AAAA,kBACR,SAAS;AAAA,gBACX;AAAA,gBAEA,0BAAAA,KAAC,KAAE,MAAM,IAAI,OAAO,MAAM,OAAO,QAAQ,MAAM,SAAS;AAAA;AAAA,YAC1D;AAAA;AAAA;AAAA,QA9BK,GAAG,KAAK,IAAI,IAAI,KAAK;AAAA,MA+B5B,CACD,GACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;","names":["React","styled","jsx","jsx","React"]}