@xsolla/xui-gdpr-banner 0.206.0

package/web/index.mjs

@@ -0,0 +1,911 @@
+// src/GdprBanner.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// ../../foundation/primitives-web/src/Box.tsx
+import React2 from "react";
+import styled from "styled-components";
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+import React from "react";
+
+// ../../../node_modules/@emotion/memoize/dist/memoize.esm.js
+function memoize(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default = memoize;
+
+// ../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var index = memoize_esm_default(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default = index;
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "opacity",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration",
+  // Cross-platform layout prop that Text consumes as CSS, never as an
+  // attribute. Pinned explicitly because it is now spread into the styled
+  // component rather than destructured away before it can reach the DOM.
+  "numberOfLines"
+]);
+function shouldForwardProp(key) {
+  if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
+  return is_prop_valid_esm_default(key);
+}
+function createFilteredElement(defaultTag) {
+  const Component = React.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return React.createElement(
+        Tag,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../../foundation/primitives-web/src/Box.tsx
+import { jsx } from "react/jsx-runtime";
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = styled(FilteredDiv)`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  /* Only emit overflow-x/y when explicitly set. Defaulting them to
+     visible after overflow would override the shorthand and break
+     clipping (e.g. OtherCard bottom-right promo image). */
+  overflow: ${(props) => props.overflow || "visible"};
+  ${(props) => props.overflowX != null ? `overflow-x: ${props.overflowX};` : ""}
+  ${(props) => props.overflowY != null ? `overflow-y: ${props.overflowY};` : ""}
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.opacity != null ? props.opacity : props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  &:hover {
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = React2.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    onError,
+    onLoad,
+    type,
+    disabled,
+    id,
+    testID,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          onError,
+          onLoad,
+          "data-testid": dataTestId || testID,
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom,
+            ...props.style
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledBox,
+      {
+        ref,
+        elementType: as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// ../../foundation/primitives-web/src/Text.tsx
+import styled2 from "styled-components";
+
+// ../../foundation/primitives-web/src/textTruncation.ts
+var truncationStyles = (numberOfLines) => {
+  if (!numberOfLines || numberOfLines < 1) return "";
+  if (numberOfLines === 1) {
+    return `
+      display: block;
+      max-width: 100%;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+  }
+  return `
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: ${numberOfLines};
+    line-clamp: ${numberOfLines};
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  `;
+};
+
+// ../../foundation/primitives-web/src/Text.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FilteredSpan = createFilteredElement("span");
+var StyledText = styled2(FilteredSpan)`
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-weight: ${(props) => props.fontWeight || "normal"};
+  font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
+  line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
+  white-space: ${(props) => props.whiteSpace || "normal"};
+  text-align: ${(props) => props.textAlign || "inherit"};
+  text-decoration: ${(props) => props.textDecoration || "none"};
+
+  /* Keep last: single-line truncation has to win over white-space above. */
+  ${(props) => truncationStyles(props.numberOfLines)}
+`;
+var Text = ({
+  style,
+  className,
+  id,
+  role,
+  testID,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role,
+      "data-testid": dataTestId || testID
+    }
+  );
+};
+
+// src/GdprBanner.tsx
+import { useResolvedTheme as useResolvedTheme2, useId } from "@xsolla/xui-core";
+import { Button, FlexButton } from "@xsolla/xui-button";
+import { Remove } from "@xsolla/xui-icons-base";
+
+// src/PrivacySettings.tsx
+import { useResolvedTheme } from "@xsolla/xui-core";
+import { Checkbox } from "@xsolla/xui-checkbox";
+import { Link } from "@xsolla/xui-link";
+import { InfoCr } from "@xsolla/xui-icons-base";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var PANE_RADIUS = 8;
+var LIST_WIDTH = 280;
+var PrivacySettings = ({
+  categories,
+  selectedCategoryIds,
+  onToggleCategory,
+  activeCategoryId,
+  onActiveCategoryChange,
+  viewport,
+  labels,
+  cookiePolicyUrl,
+  privacyPolicyUrl,
+  testID = "gdpr-privacy-settings",
+  themeMode,
+  themeProductContext
+}) => {
+  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+  const isMobile = viewport === "mobile";
+  const body = theme.typographyTokens.basic["body-sm"];
+  const activeDescription = activeCategoryId === null ? labels.generalInformationDescription : categories.find((category) => category.id === activeCategoryId)?.description ?? "";
+  const descriptionPane = /* @__PURE__ */ jsx3(
+    Box,
+    {
+      testID: `${testID}__description`,
+      backgroundColor: theme.colors.control.faint.bg,
+      borderRadius: PANE_RADIUS,
+      padding: 16,
+      flex: isMobile ? void 0 : 1,
+      width: isMobile ? "100%" : void 0,
+      "aria-live": "polite",
+      children: /* @__PURE__ */ jsx3(
+        Text,
+        {
+          color: theme.colors.content.secondary,
+          fontSize: body.fontSize,
+          lineHeight: body.lineHeight,
+          fontFamily: theme.fonts.body,
+          children: activeDescription
+        }
+      )
+    }
+  );
+  const focusStyle = {
+    outlineColor: theme.colors.border.brand,
+    outlineWidth: 2,
+    outlineOffset: 2,
+    outlineStyle: "solid"
+  };
+  const list = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      gap: 12,
+      width: isMobile ? "100%" : LIST_WIDTH,
+      flexShrink: 0,
+      testID: `${testID}__categories`,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { gap: 8, children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 8,
+              role: "button",
+              tabIndex: 0,
+              cursor: "pointer",
+              "aria-pressed": activeCategoryId === null,
+              onPress: () => onActiveCategoryChange(null),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  onActiveCategoryChange(null);
+                }
+              },
+              focusStyle,
+              testID: `${testID}__general-information`,
+              children: [
+                /* @__PURE__ */ jsx3(
+                  InfoCr,
+                  {
+                    variant: "solid",
+                    size: 16,
+                    color: theme.colors.control.link.primary
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  Text,
+                  {
+                    color: theme.colors.content.primary,
+                    fontSize: body.fontSize,
+                    lineHeight: body.lineHeight,
+                    fontFamily: theme.fonts.body,
+                    children: labels.generalInformation
+                  }
+                )
+              ]
+            }
+          ),
+          isMobile && activeCategoryId === null && descriptionPane
+        ] }),
+        categories.map((category) => /* @__PURE__ */ jsxs(Box, { gap: 8, children: [
+          /* @__PURE__ */ jsx3(Box, { onPress: () => onActiveCategoryChange(category.id), children: /* @__PURE__ */ jsx3(
+            Checkbox,
+            {
+              size: "md",
+              checked: selectedCategoryIds.includes(category.id),
+              disabled: category.locked,
+              onChange: () => onToggleCategory(category.id),
+              testID: `${testID}__category-${category.id}`,
+              themeMode,
+              themeProductContext,
+              children: category.label
+            }
+          ) }),
+          isMobile && activeCategoryId === category.id && descriptionPane
+        ] }, category.id))
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Box, { testID, gap: 16, width: "100%", children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: isMobile ? "column" : "row",
+        gap: isMobile ? 12 : 24,
+        alignItems: "flex-start",
+        width: "100%",
+        children: [
+          list,
+          !isMobile && descriptionPane
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        testID: `${testID}__policies`,
+        children: [
+          /* @__PURE__ */ jsx3(
+            Link,
+            {
+              size: "sm",
+              href: cookiePolicyUrl,
+              target: "_blank",
+              themeMode,
+              themeProductContext,
+              testID: `${testID}__cookie-policy`,
+              children: labels.cookiePolicy
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            Text,
+            {
+              color: theme.colors.content.tertiary,
+              fontSize: body.fontSize,
+              lineHeight: body.lineHeight,
+              fontFamily: theme.fonts.body,
+              "aria-hidden": true,
+              children: "\u2022"
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            Link,
+            {
+              size: "sm",
+              href: privacyPolicyUrl,
+              target: "_blank",
+              themeMode,
+              themeProductContext,
+              testID: `${testID}__privacy-policy`,
+              children: labels.privacyPolicy
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+PrivacySettings.displayName = "PrivacySettings";
+
+// src/defaults.ts
+var DEFAULT_CATEGORIES = [
+  {
+    id: "essential",
+    label: "Essential cookies",
+    locked: true,
+    description: "These cookies are required for the Xsolla Ecosystem to function and cannot be disabled in our systems. They are often only set in response to activities taken by you that constitute a request for services, such as changing your privacy settings, logging in, contacting customer support, or filling out forms. You can set your browser to block or inform you about these cookies, but some aspects of the Xsolla Ecosystem will not function properly. These cookies do not contain personally identifying information."
+  },
+  {
+    id: "analytical",
+    label: "Analytical and performance cookies",
+    description: "These cookies let us count visits and traffic sources so we can measure and improve the performance of the Xsolla Ecosystem. They help us understand which pages are the most and least popular and see how visitors move around the service. All information these cookies collect is aggregated."
+  },
+  {
+    id: "functional",
+    label: "Functional cookies",
+    description: "These cookies enable the Xsolla Ecosystem to provide enhanced functionality and personalization, such as remembering your preferences and the region you are in. If you do not allow these cookies, some or all of these services may not function properly."
+  },
+  {
+    id: "targeting",
+    label: "Targeting cookies",
+    description: "These cookies may be set through the Xsolla Ecosystem by our advertising partners to build a profile of your interests and show you relevant offers on other sites. They do not store directly personal information but are based on uniquely identifying your browser and device."
+  }
+];
+var DEFAULT_LABELS = {
+  title: "How we use cookies",
+  description: "We use cookies to personalize your experience. If you reject the use of cookies, your experience will not be tailored to your preferences.",
+  simpleDescription: "We only use essential cookies that allow us to run this service. Read our cookie policy to learn more.",
+  privacySettingsTitle: "Privacy settings",
+  generalInformation: "General information",
+  generalInformationDescription: "We use cookies to personalize your experience, to run and secure the Xsolla Ecosystem, and to measure how it is used. Choose which categories you want to allow below. You can change your choice at any time.",
+  customize: "Customize",
+  rejectAll: "Reject All",
+  acceptAll: "Accept All",
+  confirmSelection: "Confirm Selection",
+  dismiss: "Dismiss",
+  close: "Close",
+  cookiePolicy: "Cookie Policy",
+  privacyPolicy: "Privacy Policy",
+  closeButtonAriaLabel: "Close cookie banner"
+};
+var CARD_WIDTH = 400;
+var EDGE_OFFSET = 20;
+var CONTENT_GAP = 8;
+
+// src/GdprBanner.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var FOCUSABLE_SELECTORS = 'button:not([disabled]), [href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var isElementVisible = (element) => {
+  if (typeof window === "undefined") return true;
+  const style = window.getComputedStyle(element);
+  return style.visibility !== "hidden" && style.display !== "none";
+};
+var getFocusableElements = (container) => Array.from(
+  container.querySelectorAll(FOCUSABLE_SELECTORS)
+).filter(isElementVisible);
+var GdprBanner = ({
+  type = "complex",
+  viewport = "desktop",
+  buttonsRow = "single",
+  anchor = "bottom-left",
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  categories = DEFAULT_CATEGORIES,
+  selectedCategoryIds,
+  defaultSelectedCategoryIds,
+  onSelectionChange,
+  labels,
+  cookiePolicyUrl,
+  privacyPolicyUrl,
+  onAcceptAll,
+  onRejectAll,
+  onCustomize,
+  onConfirmSelection,
+  onDismiss,
+  onClose,
+  showCloseButton = true,
+  position = "fixed",
+  offset = EDGE_OFFSET,
+  testID = "gdpr-banner",
+  themeMode,
+  themeProductContext
+}) => {
+  const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
+  const containerRef = useRef(null);
+  const rawId = useId();
+  const titleId = `gdpr-banner-title-${rawId.replace(/:/g, "")}`;
+  const t = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
+  const isMobile = viewport === "mobile";
+  const isSimple = type === "simple";
+  const allIds = useMemo(
+    () => categories.map((category) => category.id),
+    [categories]
+  );
+  const lockedIds = useMemo(
+    () => categories.filter((category) => category.locked).map((c) => c.id),
+    [categories]
+  );
+  const isExpandedControlled = expanded !== void 0;
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const isExpanded = !isSimple && (isExpandedControlled ? expanded : internalExpanded);
+  const isSelectionControlled = selectedCategoryIds !== void 0;
+  const [internalSelection, setInternalSelection] = useState(
+    defaultSelectedCategoryIds ?? allIds
+  );
+  const selection = isSelectionControlled ? selectedCategoryIds : internalSelection;
+  const [activeCategoryId, setActiveCategoryId] = useState(null);
+  const setExpanded = useCallback(
+    (next) => {
+      if (!isExpandedControlled) setInternalExpanded(next);
+      onExpandedChange?.(next);
+    },
+    [isExpandedControlled, onExpandedChange]
+  );
+  const setSelection = useCallback(
+    (next) => {
+      if (!isSelectionControlled) setInternalSelection(next);
+      onSelectionChange?.(next);
+    },
+    [isSelectionControlled, onSelectionChange]
+  );
+  useEffect(() => {
+    if (!onClose || typeof document === "undefined") return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const [first] = getFocusableElements(container);
+    first?.focus();
+  }, [isExpanded]);
+  const handleTabKey = useCallback((event) => {
+    if (event.key !== "Tab" || !containerRef.current) return;
+    const focusable = getFocusableElements(containerRef.current);
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (!first) {
+      event.preventDefault();
+      return;
+    }
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }, []);
+  const handleToggleCategory = useCallback(
+    (id) => {
+      const category = categories.find((item) => item.id === id);
+      if (!category || category.locked) return;
+      const next = selection.includes(id) ? selection.filter((item) => item !== id) : [...selection, id];
+      setSelection(next);
+    },
+    [categories, selection, setSelection]
+  );
+  const handleAcceptAll = useCallback(() => {
+    setSelection(allIds);
+    onAcceptAll?.();
+  }, [allIds, onAcceptAll, setSelection]);
+  const handleRejectAll = useCallback(() => {
+    setSelection(lockedIds);
+    onRejectAll?.();
+  }, [lockedIds, onRejectAll, setSelection]);
+  const handleCustomize = useCallback(() => {
+    setExpanded(true);
+    onCustomize?.();
+  }, [onCustomize, setExpanded]);
+  const handleCollapse = useCallback(() => {
+    setExpanded(false);
+  }, [setExpanded]);
+  const handleConfirmSelection = useCallback(() => {
+    onConfirmSelection?.(selection);
+  }, [onConfirmSelection, selection]);
+  const sizing = theme.sizing.modal();
+  const titleToken = theme.typographyTokens.basic["body-lg"];
+  const bodyToken = theme.typographyTokens.basic["body-sm"];
+  const solidButton = (key, label, onPress, fullWidth) => /* @__PURE__ */ jsx4(
+    Button,
+    {
+      variant: "secondary",
+      size: "md",
+      fullWidth,
+      onPress,
+      testID: `${testID}__${key}`,
+      themeMode,
+      themeProductContext,
+      children: label
+    },
+    key
+  );
+  const textButton = (key, label, onPress) => /* @__PURE__ */ jsx4(
+    FlexButton,
+    {
+      variant: "brand",
+      size: "lg",
+      onPress,
+      testID: `${testID}__${key}`,
+      themeMode,
+      themeProductContext,
+      children: label
+    },
+    key
+  );
+  const renderActions = () => {
+    if (isSimple) {
+      return /* @__PURE__ */ jsx4(
+        Box,
+        {
+          width: "100%",
+          flexDirection: "row",
+          justifyContent: isMobile ? "center" : "flex-end",
+          children: solidButton("dismiss", t.dismiss, () => onDismiss?.(), isMobile)
+        }
+      );
+    }
+    if (isExpanded) {
+      const close = textButton("close", t.close, handleCollapse);
+      const reject = solidButton(
+        "reject-all",
+        t.rejectAll,
+        handleRejectAll,
+        isMobile
+      );
+      const confirm = solidButton(
+        "confirm-selection",
+        t.confirmSelection,
+        handleConfirmSelection,
+        isMobile
+      );
+      return isMobile ? /* @__PURE__ */ jsx4(Box, { width: "100%", gap: CONTENT_GAP, alignItems: "center", children: [confirm, reject, close] }) : /* @__PURE__ */ jsx4(
+        Box,
+        {
+          width: "100%",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: CONTENT_GAP,
+          children: [close, reject, confirm]
+        }
+      );
+    }
+    const customize = textButton("customize", t.customize, handleCustomize);
+    if (isMobile) {
+      return /* @__PURE__ */ jsxs2(Box, { width: "100%", gap: CONTENT_GAP, alignItems: "center", children: [
+        solidButton("accept-all", t.acceptAll, handleAcceptAll, true),
+        solidButton("reject-all", t.rejectAll, handleRejectAll, true),
+        customize
+      ] });
+    }
+    if (buttonsRow === "double") {
+      return /* @__PURE__ */ jsxs2(Box, { width: "100%", gap: CONTENT_GAP, children: [
+        /* @__PURE__ */ jsx4(Box, { flexDirection: "row", justifyContent: "center", width: "100%", children: customize }),
+        /* @__PURE__ */ jsxs2(Box, { flexDirection: "row", gap: CONTENT_GAP, width: "100%", children: [
+          /* @__PURE__ */ jsx4(Box, { flex: 1, children: solidButton("reject-all", t.rejectAll, handleRejectAll, true) }),
+          /* @__PURE__ */ jsx4(Box, { flex: 1, children: solidButton("accept-all", t.acceptAll, handleAcceptAll, true) })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs2(
+      Box,
+      {
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: CONTENT_GAP,
+        children: [
+          customize,
+          solidButton("reject-all", t.rejectAll, handleRejectAll, false),
+          solidButton("accept-all", t.acceptAll, handleAcceptAll, false)
+        ]
+      }
+    );
+  };
+  const edge = isExpanded ? 0 : offset;
+  const isFixed = position === "fixed";
+  const spansFullWidth = isExpanded || isMobile;
+  return /* @__PURE__ */ jsxs2(
+    Box,
+    {
+      ref: containerRef,
+      testID,
+      role: "dialog",
+      "aria-labelledby": titleId,
+      onKeyDown: handleTabKey,
+      "data-gdpr-banner-type": type,
+      "data-gdpr-banner-viewport": viewport,
+      "data-gdpr-banner-expanded": isExpanded ? "true" : "false",
+      position: isFixed ? "fixed" : "relative",
+      bottom: isFixed ? edge : void 0,
+      left: isFixed && (spansFullWidth || anchor === "bottom-left") ? edge : void 0,
+      right: isFixed && (spansFullWidth || anchor === "bottom-right") ? edge : void 0,
+      zIndex: isFixed ? 1e3 : void 0,
+      width: spansFullWidth ? "100%" : CARD_WIDTH,
+      maxWidth: "100%",
+      backgroundColor: theme.colors.background.primary,
+      borderRadius: isExpanded ? 0 : sizing.borderRadius,
+      padding: isMobile ? 16 : 20,
+      gap: CONTENT_GAP,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          Box,
+          {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+            gap: 12,
+            width: "100%",
+            children: [
+              /* @__PURE__ */ jsx4(
+                Text,
+                {
+                  id: titleId,
+                  color: theme.colors.content.primary,
+                  fontSize: titleToken.fontSize,
+                  lineHeight: titleToken.lineHeight,
+                  fontWeight: titleToken.accent?.fontWeight ?? 500,
+                  fontFamily: theme.fonts.body,
+                  children: isExpanded ? t.privacySettingsTitle : t.title
+                }
+              ),
+              showCloseButton && onClose && /* @__PURE__ */ jsx4(
+                FlexButton,
+                {
+                  variant: "tertiary",
+                  size: "xs",
+                  onPress: onClose,
+                  "aria-label": t.closeButtonAriaLabel,
+                  testID: `${testID}__close-icon`,
+                  themeMode,
+                  themeProductContext,
+                  children: /* @__PURE__ */ jsx4(Remove, { variant: "line" })
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded ? /* @__PURE__ */ jsx4(
+          PrivacySettings,
+          {
+            categories,
+            selectedCategoryIds: selection,
+            onToggleCategory: handleToggleCategory,
+            activeCategoryId,
+            onActiveCategoryChange: setActiveCategoryId,
+            viewport,
+            labels: {
+              generalInformation: t.generalInformation,
+              generalInformationDescription: t.generalInformationDescription,
+              cookiePolicy: t.cookiePolicy,
+              privacyPolicy: t.privacyPolicy
+            },
+            cookiePolicyUrl,
+            privacyPolicyUrl,
+            themeMode,
+            themeProductContext,
+            testID: `${testID}__privacy-settings`
+          }
+        ) : /* @__PURE__ */ jsx4(
+          Text,
+          {
+            color: theme.colors.content.secondary,
+            fontSize: bodyToken.fontSize,
+            lineHeight: bodyToken.lineHeight,
+            fontFamily: theme.fonts.body,
+            testID: `${testID}__description`,
+            children: isSimple ? t.simpleDescription : t.description
+          }
+        ),
+        renderActions()
+      ]
+    }
+  );
+};
+GdprBanner.displayName = "GdprBanner";
+export {
+  DEFAULT_CATEGORIES,
+  DEFAULT_LABELS,
+  GdprBanner,
+  PrivacySettings
+};
+//# sourceMappingURL=index.mjs.map