@xsolla/xui-gdpr-banner 0.206.0

package/web/index.js

@@ -0,0 +1,951 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_CATEGORIES: () => DEFAULT_CATEGORIES,
+  DEFAULT_LABELS: () => DEFAULT_LABELS,
+  GdprBanner: () => GdprBanner,
+  PrivacySettings: () => PrivacySettings
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/GdprBanner.tsx
+var import_react3 = require("react");
+
+// ../../foundation/primitives-web/src/Box.tsx
+var import_react2 = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+var import_react = __toESM(require("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 = import_react.default.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 import_react.default.createElement(
+        Tag,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../../foundation/primitives-web/src/Box.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = (0, import_styled_components.default)(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 = import_react2.default.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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
+var import_styled_components2 = __toESM(require("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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FilteredSpan = createFilteredElement("span");
+var StyledText = (0, import_styled_components2.default)(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__ */ (0, import_jsx_runtime2.jsx)(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role,
+      "data-testid": dataTestId || testID
+    }
+  );
+};
+
+// src/GdprBanner.tsx
+var import_xui_core2 = require("@xsolla/xui-core");
+var import_xui_button = require("@xsolla/xui-button");
+var import_xui_icons_base2 = require("@xsolla/xui-icons-base");
+
+// src/PrivacySettings.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_xui_checkbox = require("@xsolla/xui-checkbox");
+var import_xui_link = require("@xsolla/xui-link");
+var import_xui_icons_base = require("@xsolla/xui-icons-base");
+var import_jsx_runtime3 = require("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 } = (0, import_xui_core.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__ */ (0, import_jsx_runtime3.jsx)(
+    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__ */ (0, import_jsx_runtime3.jsx)(
+        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__ */ (0, import_jsx_runtime3.jsxs)(
+    Box,
+    {
+      gap: 12,
+      width: isMobile ? "100%" : LIST_WIDTH,
+      flexShrink: 0,
+      testID: `${testID}__categories`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box, { gap: 8, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
+                  import_xui_icons_base.InfoCr,
+                  {
+                    variant: "solid",
+                    size: 16,
+                    color: theme.colors.control.link.primary
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  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__ */ (0, import_jsx_runtime3.jsxs)(Box, { gap: 8, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box, { onPress: () => onActiveCategoryChange(category.id), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_xui_checkbox.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__ */ (0, import_jsx_runtime3.jsxs)(Box, { testID, gap: 16, width: "100%", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      Box,
+      {
+        flexDirection: isMobile ? "column" : "row",
+        gap: isMobile ? 12 : 24,
+        alignItems: "flex-start",
+        width: "100%",
+        children: [
+          list,
+          !isMobile && descriptionPane
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      Box,
+      {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        testID: `${testID}__policies`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_xui_link.Link,
+            {
+              size: "sm",
+              href: cookiePolicyUrl,
+              target: "_blank",
+              themeMode,
+              themeProductContext,
+              testID: `${testID}__cookie-policy`,
+              children: labels.cookiePolicy
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Text,
+            {
+              color: theme.colors.content.tertiary,
+              fontSize: body.fontSize,
+              lineHeight: body.lineHeight,
+              fontFamily: theme.fonts.body,
+              "aria-hidden": true,
+              children: "\u2022"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_xui_link.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
+var import_jsx_runtime4 = require("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 } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
+  const containerRef = (0, import_react3.useRef)(null);
+  const rawId = (0, import_xui_core2.useId)();
+  const titleId = `gdpr-banner-title-${rawId.replace(/:/g, "")}`;
+  const t = (0, import_react3.useMemo)(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
+  const isMobile = viewport === "mobile";
+  const isSimple = type === "simple";
+  const allIds = (0, import_react3.useMemo)(
+    () => categories.map((category) => category.id),
+    [categories]
+  );
+  const lockedIds = (0, import_react3.useMemo)(
+    () => categories.filter((category) => category.locked).map((c) => c.id),
+    [categories]
+  );
+  const isExpandedControlled = expanded !== void 0;
+  const [internalExpanded, setInternalExpanded] = (0, import_react3.useState)(defaultExpanded);
+  const isExpanded = !isSimple && (isExpandedControlled ? expanded : internalExpanded);
+  const isSelectionControlled = selectedCategoryIds !== void 0;
+  const [internalSelection, setInternalSelection] = (0, import_react3.useState)(
+    defaultSelectedCategoryIds ?? allIds
+  );
+  const selection = isSelectionControlled ? selectedCategoryIds : internalSelection;
+  const [activeCategoryId, setActiveCategoryId] = (0, import_react3.useState)(null);
+  const setExpanded = (0, import_react3.useCallback)(
+    (next) => {
+      if (!isExpandedControlled) setInternalExpanded(next);
+      onExpandedChange?.(next);
+    },
+    [isExpandedControlled, onExpandedChange]
+  );
+  const setSelection = (0, import_react3.useCallback)(
+    (next) => {
+      if (!isSelectionControlled) setInternalSelection(next);
+      onSelectionChange?.(next);
+    },
+    [isSelectionControlled, onSelectionChange]
+  );
+  (0, import_react3.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]);
+  (0, import_react3.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const [first] = getFocusableElements(container);
+    first?.focus();
+  }, [isExpanded]);
+  const handleTabKey = (0, import_react3.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 = (0, import_react3.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 = (0, import_react3.useCallback)(() => {
+    setSelection(allIds);
+    onAcceptAll?.();
+  }, [allIds, onAcceptAll, setSelection]);
+  const handleRejectAll = (0, import_react3.useCallback)(() => {
+    setSelection(lockedIds);
+    onRejectAll?.();
+  }, [lockedIds, onRejectAll, setSelection]);
+  const handleCustomize = (0, import_react3.useCallback)(() => {
+    setExpanded(true);
+    onCustomize?.();
+  }, [onCustomize, setExpanded]);
+  const handleCollapse = (0, import_react3.useCallback)(() => {
+    setExpanded(false);
+  }, [setExpanded]);
+  const handleConfirmSelection = (0, import_react3.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__ */ (0, import_jsx_runtime4.jsx)(
+    import_xui_button.Button,
+    {
+      variant: "secondary",
+      size: "md",
+      fullWidth,
+      onPress,
+      testID: `${testID}__${key}`,
+      themeMode,
+      themeProductContext,
+      children: label
+    },
+    key
+  );
+  const textButton = (key, label, onPress) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_xui_button.FlexButton,
+    {
+      variant: "brand",
+      size: "lg",
+      onPress,
+      testID: `${testID}__${key}`,
+      themeMode,
+      themeProductContext,
+      children: label
+    },
+    key
+  );
+  const renderActions = () => {
+    if (isSimple) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        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__ */ (0, import_jsx_runtime4.jsx)(Box, { width: "100%", gap: CONTENT_GAP, alignItems: "center", children: [confirm, reject, close] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        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__ */ (0, import_jsx_runtime4.jsxs)(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__ */ (0, import_jsx_runtime4.jsxs)(Box, { width: "100%", gap: CONTENT_GAP, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { flexDirection: "row", justifyContent: "center", width: "100%", children: customize }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box, { flexDirection: "row", gap: CONTENT_GAP, width: "100%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { flex: 1, children: solidButton("reject-all", t.rejectAll, handleRejectAll, true) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { flex: 1, children: solidButton("accept-all", t.acceptAll, handleAcceptAll, true) })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      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__ */ (0, import_jsx_runtime4.jsxs)(
+    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__ */ (0, import_jsx_runtime4.jsxs)(
+          Box,
+          {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+            gap: 12,
+            width: "100%",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                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__ */ (0, import_jsx_runtime4.jsx)(
+                import_xui_button.FlexButton,
+                {
+                  variant: "tertiary",
+                  size: "xs",
+                  onPress: onClose,
+                  "aria-label": t.closeButtonAriaLabel,
+                  testID: `${testID}__close-icon`,
+                  themeMode,
+                  themeProductContext,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons_base2.Remove, { variant: "line" })
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          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__ */ (0, import_jsx_runtime4.jsx)(
+          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";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_CATEGORIES,
+  DEFAULT_LABELS,
+  GdprBanner,
+  PrivacySettings
+});
+//# sourceMappingURL=index.js.map