@xsolla/xui-gdpr-banner 0.206.0

package/native/index.js

@@ -0,0 +1,918 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __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_react = require("react");
+
+// ../../foundation/primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var roleToAccessibilityRole = {
+  button: "button",
+  link: "link",
+  img: "image",
+  image: "image",
+  summary: "summary",
+  switch: "switch",
+  checkbox: "checkbox",
+  radio: "radio",
+  heading: "header",
+  text: "text",
+  search: "search",
+  alert: "alert",
+  none: "none",
+  presentation: "none",
+  progressbar: "progressbar",
+  scrollbar: "scrollbar",
+  adjustable: "adjustable",
+  tab: "tab",
+  menu: "menu",
+  menuitem: "menuitem",
+  list: "list",
+  timer: "timer"
+};
+var toGapValue = (gap) => {
+  if (gap === void 0) return void 0;
+  if (typeof gap === "number") return gap;
+  const pxMatch = /^(\d+(?:\.\d+)?)px$/.exec(gap);
+  if (pxMatch) return Number(pxMatch[1]);
+  const asNumber = Number(gap);
+  return Number.isFinite(asNumber) ? asNumber : void 0;
+};
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  flexWrap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  flexShrink,
+  gap,
+  overflow,
+  opacity,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  disabled,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    opacity: opacity ?? (disabled ? 0.5 : void 0),
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    flexWrap,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    flexShrink,
+    gap: toGapValue(gap),
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    className,
+    "data-testid": _dataTestId,
+    cursor: _cursor,
+    type: _type,
+    ...nativeRest
+  } = rest;
+  const accessibilityRole = typeof role === "string" && roleToAccessibilityRole[role] || (as === "button" ? "button" : void 0);
+  const isDisabled = Boolean(disabled || ariaDisabled);
+  const accessibilityState = {
+    disabled: isDisabled || void 0,
+    busy: Boolean(ariaBusy) || void 0
+  };
+  const accessibilityLiveRegion = ariaLive === "polite" || ariaLive === "assertive" ? ariaLive : void 0;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : alt,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress || as === "button") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress: !isDisabled && onPress ? onPress : void 0,
+        disabled: isDisabled,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        accessibilityRole,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+        accessibilityState,
+        accessibilityLiveRegion,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      accessibilityRole,
+      accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+      accessibilityState,
+      accessibilityLiveRegion,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  testID,
+  "data-testid": dataTestId,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.Text,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: dataTestId || testID || id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// 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_react.useRef)(null);
+  const rawId = (0, import_xui_core2.useId)();
+  const titleId = `gdpr-banner-title-${rawId.replace(/:/g, "")}`;
+  const t = (0, import_react.useMemo)(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
+  const isMobile = viewport === "mobile";
+  const isSimple = type === "simple";
+  const allIds = (0, import_react.useMemo)(
+    () => categories.map((category) => category.id),
+    [categories]
+  );
+  const lockedIds = (0, import_react.useMemo)(
+    () => categories.filter((category) => category.locked).map((c) => c.id),
+    [categories]
+  );
+  const isExpandedControlled = expanded !== void 0;
+  const [internalExpanded, setInternalExpanded] = (0, import_react.useState)(defaultExpanded);
+  const isExpanded = !isSimple && (isExpandedControlled ? expanded : internalExpanded);
+  const isSelectionControlled = selectedCategoryIds !== void 0;
+  const [internalSelection, setInternalSelection] = (0, import_react.useState)(
+    defaultSelectedCategoryIds ?? allIds
+  );
+  const selection = isSelectionControlled ? selectedCategoryIds : internalSelection;
+  const [activeCategoryId, setActiveCategoryId] = (0, import_react.useState)(null);
+  const setExpanded = (0, import_react.useCallback)(
+    (next) => {
+      if (!isExpandedControlled) setInternalExpanded(next);
+      onExpandedChange?.(next);
+    },
+    [isExpandedControlled, onExpandedChange]
+  );
+  const setSelection = (0, import_react.useCallback)(
+    (next) => {
+      if (!isSelectionControlled) setInternalSelection(next);
+      onSelectionChange?.(next);
+    },
+    [isSelectionControlled, onSelectionChange]
+  );
+  (0, import_react.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_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const [first] = getFocusableElements(container);
+    first?.focus();
+  }, [isExpanded]);
+  const handleTabKey = (0, import_react.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_react.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_react.useCallback)(() => {
+    setSelection(allIds);
+    onAcceptAll?.();
+  }, [allIds, onAcceptAll, setSelection]);
+  const handleRejectAll = (0, import_react.useCallback)(() => {
+    setSelection(lockedIds);
+    onRejectAll?.();
+  }, [lockedIds, onRejectAll, setSelection]);
+  const handleCustomize = (0, import_react.useCallback)(() => {
+    setExpanded(true);
+    onCustomize?.();
+  }, [onCustomize, setExpanded]);
+  const handleCollapse = (0, import_react.useCallback)(() => {
+    setExpanded(false);
+  }, [setExpanded]);
+  const handleConfirmSelection = (0, import_react.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