@revenuecat/purchases-ui-js 2.0.2 → 2.0.3

package/dist/utils/style-utils.js

@@ -1,36 +1,7 @@
-import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR, } from "./constants.js";
-import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, TextAlignments, } from "../types.js";
-/**
- * Generates CSS spacing styles for margin or padding
- * @param spacing - The spacing object containing top, trailing, bottom, and leading values
- * @param spacingKey - The type of spacing ('margin' or 'padding')
- * @returns CSS style object with logical properties for spacing
- */
-function getSpacingStyle(spacing, spacingKey) {
-    const styles = {
-        [`--${spacingKey}-block-start`]: "0px",
-        [`--${spacingKey}-inline-end`]: "0px",
-        [`--${spacingKey}-block-end`]: "0px",
-        [`--${spacingKey}-inline-start`]: "0px",
-    };
-    if (!spacing || !spacingKey)
-        return styles;
-    Object.assign(styles, {
-        [`--${spacingKey}-block-start`]: `${spacing.top ?? 0}px`,
-        [`--${spacingKey}-inline-end`]: `${spacing.trailing ?? 0}px`,
-        [`--${spacingKey}-block-end`]: `${spacing.bottom ?? 0}px`,
-        [`--${spacingKey}-inline-start`]: `${spacing.leading ?? 0}px`,
-    });
-    return styles;
-}
-/**
- * Maps font size to appropriate HTML heading tag
- * @param fontSize - Key from FontSizeTags enum
- * @returns Corresponding HTML heading tag
- */
-export function getTextComponentTag(fontSize) {
-    return FontSizeTags[fontSize];
-}
+import { getPaywallContext } from "../stores/paywall.js";
+import { DEFAULT_COLOR_MODE } from "./constants.js";
+import { FontSizes, FontWeights, TextAlignments, } from "../types.js";
+import { getScopedFontFamily, isFontRCFMManaged } from "./font-utils.js";
 /**
  * Gets color value based on color mode with fallback
  * @param params - Object containing color map, mode and fallback color
@@ -59,198 +30,6 @@ export function getColor({ colorMap, colorMode = DEFAULT_COLOR_MODE, fallback =
             return fallback;
     }
 }
-/**
- * Generates CSS border style string
- * @param border - Border configuration object
- * @param colorMode - Color mode (light/dark)
- * @returns CSS border style string
- */
-export function getBorderStyle(border, colorMode = DEFAULT_COLOR_MODE) {
-    if (!border)
-        return "";
-    const color = getColor({ colorMap: border.color, colorMode });
-    return `${border.width}px solid ${color}`;
-}
-/**
- * Generates CSS border radius style for corners
- * @param corners - Corner radius configuration
- * @returns CSS border radius string
- */
-export function getCornerRadiusStyle(corners) {
-    return {
-        "--border-start-start-radius": `${corners.top_leading}px`,
-        "--border-start-end-radius": `${corners.top_trailing}px`,
-        "--border-end-start-radius": `${corners.bottom_leading}px`,
-        "--border-end-end-radius": `${corners.bottom_trailing}px`,
-    };
-}
-/**
- * Generates comprehensive component styles including spacing, colors, borders and shadows
- * @param params - Component style configuration object
- * @returns CSS style object with component styles
- */
-export function getComponentStyles({ background_color, border, margin, padding, color, colorMode = DEFAULT_COLOR_MODE, shape, shadow, }) {
-    const stylesObject = {
-        "--margin-block-start": "0px",
-        "--margin-inline-end": "0px",
-        "--margin-block-end": "0px",
-        "--margin-inline-start": "0px",
-        "--padding-block-start": "0px",
-        "--padding-inline-end": "0px",
-        "--padding-block-end": "0px",
-        "--padding-inline-start": "0px",
-        "--background": "initial",
-        "--text-color": "initial",
-        "--border": "none",
-        "--border-end-start-radius": "0px",
-        "--border-end-end-radius": "0px",
-        "--border-start-start-radius": "0px",
-        "--border-start-end-radius": "0px",
-        "--shadow": "none",
-    };
-    if (padding) {
-        Object.assign(stylesObject, getSpacingStyle(padding, "padding"));
-    }
-    if (margin) {
-        Object.assign(stylesObject, getSpacingStyle(margin, "margin"));
-    }
-    if (background_color) {
-        stylesObject["--background"] = getColor({
-            colorMap: background_color,
-            colorMode,
-            fallback: "transparent",
-        });
-    }
-    if (color) {
-        stylesObject["--text-color"] = getColor({
-            colorMap: color,
-            colorMode,
-            fallback: DEFAULT_TEXT_COLOR,
-        });
-    }
-    if (border) {
-        stylesObject["--border"] = getBorderStyle(border, colorMode);
-    }
-    if (shape?.type === "rectangle" && shape.corners) {
-        Object.assign(stylesObject, getCornerRadiusStyle(shape.corners));
-    }
-    if (shape?.type === "pill") {
-        Object.assign(stylesObject, getCornerRadiusStyle({
-            bottom_leading: 9999,
-            bottom_trailing: 9999,
-            top_leading: 9999,
-            top_trailing: 9999,
-        }));
-    }
-    if (shadow) {
-        stylesObject["--shadow"] = `${shadow.x}px ${shadow.y}px ${shadow.radius}px 
-      ${getColor({ colorMap: shadow.color, colorMode, fallback: DEFAULT_TEXT_COLOR })}`;
-    }
-    return stylesObject;
-}
-function getSizeValue(size) {
-    if (size.type === "fixed") {
-        return `${size.value}px`;
-    }
-    if (size.type === "fit") {
-        return "fit-content";
-    }
-    if (size.type === "fill") {
-        const userAgent = navigator.userAgent;
-        const isFirefox = userAgent.match(/firefox|fxios/i);
-        return isFirefox ? "-moz-available" : "-webkit-fill-available";
-    }
-    return "initial";
-}
-/**
- * Generates size-related CSS styles for components
- * @param size - Size configuration object
- * @returns CSS style object with size properties
- */
-export function getSizeStyle(size) {
-    const styles = {
-        "--width": "initial",
-        "--height": "initial",
-        "--flex": "initial",
-    };
-    const width = getSizeValue(size.width);
-    const height = getSizeValue(size.height);
-    const isGrow = size.width.type === "fill" || size.height.type === "fill";
-    Object.assign(styles, {
-        "--width": width,
-        "--height": height,
-        "--flex": isGrow ? "initial" : "0 1 auto",
-    });
-    return styles;
-}
-export function getInsetStyles(dimension) {
-    const defaultStyles = {
-        "--inset": "initial",
-        "--transform": "initial",
-    };
-    switch (dimension.alignment) {
-        case "top_leading":
-            defaultStyles["--inset"] = "0 auto auto 0";
-            break;
-        case "top":
-            defaultStyles["--inset"] = "auto auto auto 50%";
-            defaultStyles["--transform"] = "translate(-50%, 0)";
-            break;
-        case "top_trailing":
-            defaultStyles["--inset"] = "0 0 auto auto";
-            break;
-        case "leading":
-            defaultStyles["--inset"] = "50% 0 50% 0";
-            defaultStyles["--transform"] = "translate(0, -50%)";
-            break;
-        case "center":
-            defaultStyles["--inset"] = "50% auto auto 50%";
-            defaultStyles["--transform"] = "translate(-50%, -50%)";
-            break;
-        case "trailing":
-            defaultStyles["--inset"] = "50% 0 50% auto";
-            defaultStyles["--transform"] = "translate(0, -50%)";
-            break;
-        case "bottom_leading":
-            defaultStyles["--inset"] = "auto auto 0 0";
-            break;
-        case "bottom":
-            defaultStyles["--inset"] = "auto 50% 0 auto";
-            defaultStyles["--transform"] = "translate(50%, 0)";
-            break;
-        case "bottom_trailing":
-            defaultStyles["--inset"] = "auto 0 0 auto";
-            break;
-    }
-    return defaultStyles;
-}
-/**
- * Generates dimension-related styles for stack components
- * @param dimension - Dimension configuration object
- * @returns CSS style object with flex layout properties
- */
-export function getDimensionStyle(dimension) {
-    const styles = {
-        "--direction": "initial",
-        "--alignment": "initial",
-        "--distribution": "initial",
-        "--position": "relative",
-        "--inset": "initial",
-        "--transform": "initial",
-    };
-    if (dimension.type !== "zlayer") {
-        Object.assign(styles, {
-            "--direction": StackDirection[dimension.type],
-            "--alignment": StackAlignment[dimension.alignment],
-        });
-        if (dimension.distribution) {
-            Object.assign(styles, {
-                "--distribution": StackDistribution[dimension.distribution],
-            });
-        }
-    }
-    return styles;
-}
 /**
  * Generates text-related styles
  * @param props - Text component properties
@@ -258,7 +37,12 @@ export function getDimensionStyle(dimension) {
  * @returns CSS style object with text formatting properties
  */
 export function getTextStyles(props) {
-    const { font_size, horizontal_alignment, font_weight, font_name } = props;
+    const { font_size, horizontal_alignment, font_weight, font_name, font_weight_int, } = props;
+    const paywall = getPaywallContext();
+    const uiConfig = paywall.uiConfig;
+    const { fonts } = uiConfig.app;
+    const font = fonts[font_name ?? ""];
+    const fontFamily = font?.web?.family;
     const styles = {
         "--text-align": "initial",
         "--font-weight": "initial",
@@ -270,9 +54,13 @@ export function getTextStyles(props) {
     };
     Object.assign(styles, {
         "--text-align": TextAlignments[horizontal_alignment] || TextAlignments.leading,
-        "--font-weight": FontWeights[font_weight] || FontWeights.regular,
-        "--font-size": FontSizes[font_size] || FontSizes.body_m,
-        "--font-family": font_name || "sans-serif",
+        "--font-weight": font_weight_int ?? FontWeights[font_weight] ?? FontWeights.regular,
+        "--font-size": Number.isInteger(Number(font_size))
+            ? `${font_size}px`
+            : FontSizes[font_size] || FontSizes.body_m,
+        "--font-family": isFontRCFMManaged(font_name ?? "")
+            ? getScopedFontFamily(fontFamily ?? "")
+            : "sans-serif",
     });
     return styles;
 }
@@ -320,28 +108,12 @@ export function findSelectedPackageId(paywallData) {
     }
     return undefined;
 }
-export const getActiveStateProps = (overrides, componentState) => {
-    if (!componentState)
+export const getActiveStateProps = (selectedState, overrides) => {
+    if (!selectedState) {
         return {};
-    const activeStateKeys = getComponentActiveStateKeys(componentState);
-    const activeStateProps = activeStateKeys.reduce((props, key) => {
-        if (overrides) {
-            const styles = overrides?.states?.[key] || {};
-            return { ...props, ...styles };
-        }
-        return props;
-    }, {});
-    return activeStateProps;
-};
-const getComponentActiveStateKeys = (componentState) => {
-    if (!componentState)
-        return [];
-    const stateKeys = Object.entries(componentState).reduce((activeStates, [stateKey, stateValue]) => {
-        if (stateValue)
-            activeStates.push(stateKey);
-        return activeStates;
-    }, []);
-    return stateKeys;
+    }
+    const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "selected"));
+    return override?.properties ?? {};
 };
 export function prefixObject(object, prefix) {
     if (!object)
@@ -354,55 +126,3 @@ export function prefixObject(object, prefix) {
         return acc;
     }, {});
 }
-export function getMaskPath(props) {
-    const { mask_shape: maskShape, imageAspectRatio } = props;
-    let maskPath = "";
-    if (maskShape?.type === "concave") {
-        maskPath = `M 0 0 
-              H 100 
-              V ${imageAspectRatio * 100} 
-              Q 50 ${imageAspectRatio * 80} 0 ${imageAspectRatio * 100} 
-              Z`;
-    }
-    else if (maskShape?.type === "convex") {
-        maskPath = `M 0 0 
-              H 100 
-              V ${imageAspectRatio * 80} 
-              Q 50 ${imageAspectRatio * 120} 0 ${imageAspectRatio * 80} 
-              Z`;
-    }
-    else {
-        maskPath = `M 0 0 H 100 V ${imageAspectRatio * 100} H 0 Z`;
-    }
-    return maskPath;
-}
-/**
- * Generates mask styles for images
- * @param maskShape - Shape configuration for image mask
- * @returns CSS style object with mask properties
- */
-export const getMaskStyle = (maskShape) => {
-    const maskStyles = {
-        "--border-end-start-radius": "0px",
-        "--border-end-end-radius": "0px",
-        "--border-start-start-radius": "0px",
-        "--border-start-end-radius": "0px",
-    };
-    if (maskShape?.corners) {
-        Object.assign(maskStyles, getCornerRadiusStyle(maskShape.corners));
-    }
-    return maskStyles;
-};
-export function getLinearGradientAngle(colorMode, props) {
-    const { color_overlay: colorOverlay } = props;
-    if (colorOverlay?.[colorMode]?.type !== "linear") {
-        return { x1: "0%", y1: "0%", x2: "0%", y2: "0%" };
-    }
-    const defaultColor = colorOverlay?.[DEFAULT_COLOR_MODE];
-    const angle = defaultColor?.type === "linear" ? defaultColor.degrees : 0;
-    const x1 = "50%";
-    const y1 = "0%";
-    const x2 = `${Math.round(50 + Math.sin(((angle + 90) * Math.PI) / 90) * 50)}%`;
-    const y2 = `${Math.round(50 - Math.cos(((angle + 90) * Math.PI) / 90) * 50)}%`;
-    return { x1, y1, x2, y2 };
-}

package/dist/utils/variable-utils.d.ts

@@ -1,23 +1,2 @@
-export declare const VARIABLE_NAMES: string[];
-export type VariableDictionary = {
-    product_name: string | number | undefined;
-    price: string | number | undefined;
-    price_per_period: string | number | undefined;
-    price_per_period_full: string | number | undefined;
-    total_price_and_per_month: string | number | undefined;
-    total_price_and_per_month_full: string | number | undefined;
-    sub_price_per_month: string | number | undefined;
-    sub_price_per_week: string | number | undefined;
-    sub_duration: string | number | undefined;
-    sub_duration_in_months: string | number | undefined;
-    sub_period: string | number | undefined;
-    sub_period_length: string | number | undefined;
-    sub_period_abbreviated: string | number | undefined;
-    sub_offer_duration: string | number | undefined;
-    sub_offer_duration_2: string | number | undefined;
-    sub_offer_price: string | number | undefined;
-    sub_offer_price_2: string | number | undefined;
-    sub_relative_discount: string | number | undefined;
-    [key: string]: string | number | undefined;
-};
+import type { VariableDictionary } from "../types/variables";
 export declare function replaceVariables(input?: string, variables?: VariableDictionary): string | undefined;

package/dist/utils/variable-utils.js

@@ -1,29 +1,33 @@
-export const VARIABLE_NAMES = [
-    "product_name",
-    "price",
-    "price_per_period",
-    "price_per_period_full",
-    "total_price_and_per_month",
-    "total_price_and_per_month_full",
-    "sub_price_per_month",
-    "sub_price_per_week",
-    "sub_duration",
-    "sub_duration_in_months",
-    "sub_period",
-    "sub_period_length",
-    "sub_period_abbreviated",
-    "sub_offer_duration",
-    "sub_offer_duration_2",
-    "sub_offer_price",
-    "sub_offer_price_2",
-    "sub_relative_discount",
-];
+function capitalize(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+}
+const VARIABLE_MODIFIERS = {
+    uppercase: (value) => String(value ?? "").toUpperCase(),
+    lowercase: (value) => String(value ?? "").toLowerCase(),
+    capitalize: (value) => {
+        return String(value ?? "").replaceAll(/(\p{Letter}+)/giu, capitalize);
+    },
+};
+function parseTemplate(template, variables) {
+    // Match {{ product.variable | helper1 | helper2:arg1,arg2 }} patterns
+    const templateRegex = /\{\{\s*([a-z0-9._-]+)(?:\s*\|\s*([^}]*))?\s*\}\}/gi;
+    return template.replace(templateRegex, (match, namePart, modifierPart) => {
+        const variableName = namePart?.trim();
+        const variable = variableName && variables[variableName];
+        if (variable === undefined) {
+            return "N/A";
+        }
+        const modifierName = modifierPart?.trim();
+        if (modifierName === undefined) {
+            return variable;
+        }
+        const modifier = VARIABLE_MODIFIERS[modifierName];
+        return modifier ? modifier(variable) : variable;
+    });
+}
 export function replaceVariables(input = "", variables) {
     if (variables === undefined) {
         return input;
     }
-    return VARIABLE_NAMES.reduce((result, variableName) => {
-        const currentVariableReplaced = result.replaceAll(`{{ ${variableName} }}`, variables[variableName]?.toString() || "N/A");
-        return currentVariableReplaced;
-    }, input);
+    return parseTemplate(input, variables);
 }

package/dist/web-components/index.css

@@ -1 +1 @@
-.rcb-typography-heading-2xl.svelte-byrjto{font:var(--rc-text-heading2xl-mobile)}.rcb-typography-heading-xl.svelte-byrjto{font:var(--rc-text-headingXl-mobile)}.rcb-typography-heading-lg.svelte-byrjto{font:var(--rc-text-headingLg-mobile)}.rcb-typography-heading-md.svelte-byrjto{font:var(--rc-text-headingMd-mobile)}.rcb-typography-body-base.svelte-byrjto{font:var(--rc-text-bodyBase-mobile)}.rcb-typography-body-small.svelte-byrjto{font:var(--rc-text-bodySmall-mobile)}.rcb-typography-label-button.svelte-byrjto{font:var(--rc-text-labelButton-mobile)}.rcb-typography-label-default.svelte-byrjto{font:var(--rc-text-labelDefault-mobile)}.rcb-typography-caption-default.svelte-byrjto{font:var(--rc-text-captionDefault-mobile)}.rcb-typography-caption-link.svelte-byrjto{font:var(--rc-text-captionLink-mobile)}@container layout-query-container (width >= 768px){.rcb-typography-heading-2xl.svelte-byrjto{font:var(--rc-text-heading2xl-desktop)}.rcb-typography-heading-xl.svelte-byrjto{font:var(--rc-text-headingXl-desktop)}.rcb-typography-heading-lg.svelte-byrjto{font:var(--rc-text-headingLg-desktop)}.rcb-typography-heading-md.svelte-byrjto{font:var(--rc-text-headingMd-desktop)}.rcb-typography-body-base.svelte-byrjto{font:var(--rc-text-bodyBase-desktop)}.rcb-typography-body-small.svelte-byrjto{font:var(--rc-text-bodySmall-desktop)}.rcb-typography-label-button.svelte-byrjto{font:var(--rc-text-labelButton-desktop)}.rcb-typography-label-default.svelte-byrjto{font:var(--rc-text-labelDefault-desktop)}.rcb-typography-caption-default.svelte-byrjto{font:var(--rc-text-captionDefault-desktop)}.rcb-typography-caption-link.svelte-byrjto{font:var(--rc-text-captionLink-desktop)}}.rcb-processing.svelte-2j2b59{width:var(--width, 12px);aspect-ratio:1;border-radius:50%;animation:svelte-2j2b59-l5 1.5s infinite linear}@keyframes svelte-2j2b59-l5{0%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}25%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff;background:#fff2}50%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff}75%{box-shadow:var(--shadow-offset) 0 #fff,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}to{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}}button.svelte-td7xvm{border:none;border-radius:var(--rc-shape-input-button-border-radius);cursor:pointer;height:var(--rc-spacing-inputHeight-mobile);color:var(--rc-color-grey-text-dark);background-color:var(--rc-color-grey-ui-dark);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;transition:background-color .15s ease-in-out;-webkit-user-select:none;user-select:none}@container layout-query-container (width >= 768px){button.svelte-td7xvm{height:var(--rc-spacing-inputHeight-desktop)}}button.svelte-td7xvm:focus-visible{outline:2px solid var(--rc-color-focus)}button.intent-primary.svelte-td7xvm{background-color:var(--rc-color-primary);color:var(--rc-color-primary-text)}button.svelte-td7xvm:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark);outline:none}button.intent-primary.svelte-td7xvm:not(:disabled):hover{background-color:var(--rc-color-primary-hover)}button.intent-primary.svelte-td7xvm:not(:disabled):active,button.svelte-td7xvm:active{background-color:var(--rc-color-primary-pressed);outline:none}button.intent-primary.svelte-td7xvm:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark)}
+.rcb-typography-heading-2xl.svelte-jt3g5k{font:var(--rc-text-heading2xl-mobile)}.rcb-typography-heading-xl.svelte-jt3g5k{font:var(--rc-text-headingXl-mobile)}.rcb-typography-heading-lg.svelte-jt3g5k{font:var(--rc-text-headingLg-mobile)}.rcb-typography-heading-md.svelte-jt3g5k{font:var(--rc-text-headingMd-mobile)}.rcb-typography-body-base.svelte-jt3g5k{font:var(--rc-text-bodyBase-mobile)}.rcb-typography-body-small.svelte-jt3g5k{font:var(--rc-text-bodySmall-mobile)}.rcb-typography-label-button.svelte-jt3g5k{font:var(--rc-text-labelButton-mobile)}.rcb-typography-label-default.svelte-jt3g5k{font:var(--rc-text-labelDefault-mobile)}.rcb-typography-caption-default.svelte-jt3g5k{font:var(--rc-text-captionDefault-mobile)}.rcb-typography-caption-link.svelte-jt3g5k{font:var(--rc-text-captionLink-mobile)}@container layout-query-container (width >= 768px){.rcb-typography-heading-2xl.svelte-jt3g5k{font:var(--rc-text-heading2xl-desktop)}.rcb-typography-heading-xl.svelte-jt3g5k{font:var(--rc-text-headingXl-desktop)}.rcb-typography-heading-lg.svelte-jt3g5k{font:var(--rc-text-headingLg-desktop)}.rcb-typography-heading-md.svelte-jt3g5k{font:var(--rc-text-headingMd-desktop)}.rcb-typography-body-base.svelte-jt3g5k{font:var(--rc-text-bodyBase-desktop)}.rcb-typography-body-small.svelte-jt3g5k{font:var(--rc-text-bodySmall-desktop)}.rcb-typography-label-button.svelte-jt3g5k{font:var(--rc-text-labelButton-desktop)}.rcb-typography-label-default.svelte-jt3g5k{font:var(--rc-text-labelDefault-desktop)}.rcb-typography-caption-default.svelte-jt3g5k{font:var(--rc-text-captionDefault-desktop)}.rcb-typography-caption-link.svelte-jt3g5k{font:var(--rc-text-captionLink-desktop)}}.rcb-processing.svelte-1i80tfc{width:var(--width, 12px);aspect-ratio:1;border-radius:50%;animation:svelte-1i80tfc-l5 1.5s infinite linear}@keyframes svelte-1i80tfc-l5{0%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}25%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff;background:#fff2}50%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff}75%{box-shadow:var(--shadow-offset) 0 #fff,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}to{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}}button.svelte-hnboq0{border:none;border-radius:var(--rc-shape-input-button-border-radius);cursor:pointer;height:var(--rc-spacing-inputHeight-mobile);color:var(--rc-color-grey-text-dark);background-color:var(--rc-color-grey-ui-dark);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;transition:background-color .15s ease-in-out;-webkit-user-select:none;user-select:none}@container layout-query-container (width >= 768px){button.svelte-hnboq0{height:var(--rc-spacing-inputHeight-desktop)}}button.svelte-hnboq0:focus-visible{outline:2px solid var(--rc-color-focus)}button.intent-primary.svelte-hnboq0{background-color:var(--rc-color-primary);color:var(--rc-color-primary-text)}button.svelte-hnboq0:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark);outline:none}button.intent-primary.svelte-hnboq0:not(:disabled):hover{background-color:var(--rc-color-primary-hover)}button.intent-primary.svelte-hnboq0:not(:disabled):active,button.svelte-hnboq0:active{background-color:var(--rc-color-primary-pressed);outline:none}button.intent-primary.svelte-hnboq0:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark)}