.\n * ```\n */function getContainerPadding(breakpoint=\"desktop\"){const paddingMap={desktop:\"container-padding-desktop\",tablet:\"container-padding-tablet\",phone:\"container-padding-mobile\"};return getContainerValue(paddingMap[breakpoint]);}/**\n * Get container max width for a specific breakpoint.\n * Used by Section organisms to ensure consistent container widths.\n *\n * Max widths:\n * - Desktop: 1280px (container-max-width-desktop).\n * - Tablet: 100%.\n * - Mobile: 100%.\n *\n * For full container style objects (maxWidth + margin + boxSizing), use\n * layoutStyles.getContainerStyles(breakpoint) instead.\n *\n * @param breakpoint - Current breakpoint (default: \"desktop\")\n * @returns Max width as CSS string\n *\n * @example\n * ```typescript.\n * Const maxWidth = Tokens.getContainerMaxWidth(breakpoint);\n * // Returns: \"1280px\" for desktop, \"100%\" for tablet, \"100%\" for phone.\n *\n * // Use in component styles.\n *

.\n * ```\n */function getContainerMaxWidth(breakpoint=\"desktop\"){const maxWidths={desktop:getContainerValue(\"container-max-width-desktop\"),tablet:\"100%\",phone:\"100%\"};return maxWidths[breakpoint];}/**\n * Get responsive section padding for organisms.\n * Provides consistent horizontal and vertical padding across breakpoints.\n *\n * Horizontal padding:\n * - Desktop: 32px (matches container-padding-desktop).\n * - Tablet: 24px (matches container-padding-tablet).\n * - Mobile: 16px (matches container-padding-mobile).\n *\n * Vertical padding:\n * - Desktop: 112px.\n * - Tablet: 96px.\n * - Mobile: 64px.\n *\n * @param breakpoint - Current breakpoint (default: \"desktop\")\n * @returns Object with paddingTop, paddingBottom, paddingLeft, paddingRight as strings\n *\n * @example\n * ```typescript.\n * Const padding = Tokens.getSectionPadding(breakpoint);\n * // Returns: { paddingTop: \"112px\", paddingBottom: \"112px\", paddingLeft: \"32px\", paddingRight: \"32px\" }.\n *\n * // Use in component styles.\n *

.\n * ```\n */function getSectionPadding(breakpoint=\"desktop\"){const verticalPadding={desktop:112,tablet:96,phone:64};// Use container padding tokens for horizontal padding.\nconst horizontalPadding={desktop:getContainer(\"container-padding-desktop\"),tablet:getContainer(\"container-padding-tablet\"),phone:getContainer(\"container-padding-mobile\")};return{paddingTop:getSpacing(verticalPadding[breakpoint]),paddingBottom:getSpacing(verticalPadding[breakpoint]),paddingLeft:getSpacing(horizontalPadding[breakpoint]),paddingRight:getSpacing(horizontalPadding[breakpoint])};}/**\n * Get responsive gap value for sections.\n * Provides consistent gap spacing across breakpoints.\n *\n * @param size - Gap size: \"small\", \"medium\", \"large\", or \"xl\"\n * @param breakpoint - Current breakpoint (default: \"desktop\")\n * @returns Gap value in pixels as string\n *\n * @example\n * ```typescript\n * const gap = Tokens.getResponsiveGap(\"medium\", breakpoint);\n * // Returns: \"24px\" for desktop, \"20px\" for tablet, \"16px\" for mobile.\n *\n * // Use in component styles.\n *

\n * ```\n */function getResponsiveGap(size,breakpoint=\"desktop\"){const gapMap={small:{desktop:16,tablet:12,phone:8},medium:{desktop:24,tablet:20,phone:16},large:{desktop:48,tablet:32,phone:24},xl:{desktop:80,tablet:48,phone:32}};return getSpacing(gapMap[size][breakpoint]);}/**\n * Get grid column count for a specific breakpoint.\n *\n * Grid columns:\n * - Desktop: 12 columns.\n * - Tablet: 8 columns.\n * - Mobile: 4 columns.\n *\n * @param breakpoint - Current breakpoint (default: \"desktop\")\n * @returns Number of columns\n *\n * @example\n * ```typescript.\n * Const columns = Tokens.getGridColumns(breakpoint);\n * // Returns: 12 for desktop, 8 for tablet, 4 for mobile.\n *\n * // Use in CSS Grid.\n * GridTemplateColumns: `repeat(${Tokens.getGridColumns(breakpoint)}, 1fr)`.\n * ```\n */function getGridColumns(breakpoint=\"desktop\"){return GRID_TOKENS[breakpoint].columns;}/**\n * Get grid gutter size for a specific breakpoint.\n *\n * Grid gutters:\n * - Desktop: 32px.\n * - Tablet: 32px.\n * - Mobile: 16px.\n *\n * @param breakpoint - Current breakpoint (default: \"desktop\")\n * @returns Gutter size in pixels as string\n *\n * @example\n * ```typescript.\n * Const gutter = Tokens.getGridGutter(breakpoint);\n * // Returns: \"32px\" for desktop/tablet, \"16px\" for mobile.\n *\n * // Use in CSS Grid.\n * Gap: Tokens.getGridGutter(breakpoint).\n * ```\n */function getGridGutter(breakpoint=\"desktop\"){return getSpacing(GRID_TOKENS[breakpoint].gutter);}/**\n * Get all grid tokens for a specific breakpoint.\n *\n * @param breakpoint - Current breakpoint (default: \"desktop\")\n * @returns Object with columns and gutter values\n *\n * @example\n * ```typescript.\n * Const grid = Tokens.getGridTokens(breakpoint);\n * // Returns: { columns: 12, gutter: 32 } for desktop.\n * ```\n */function getGridTokens(breakpoint=\"desktop\"){return GRID_TOKENS[breakpoint];}/**\n * Get all spacing values from the scale.\n * @returns Array of spacing values sorted in ascending order\n */function getAllSpacingValues(){return Object.keys(SPACING_SCALE).map(key=>parseInt(key,10)).sort((a,b)=>a-b);}/**\n * Get all width tokens.\n * @returns Record of all width tokens\n */function getAllWidthTokens(){return WIDTH_TOKENS;}/**\n * Get all container tokens.\n * @returns Record of all container tokens\n */function getAllContainerTokens(){return CONTAINER_TOKENS;}/**\n * Get border radius value.\n * @param size - Canonical radius token key (e.g. \"radius-lg\", \"radius-3xl\", \"radius-full\").\n * See the RADIUS_VALUES table for the full scale (0–128px + pill 9999px).\n * @returns Border radius value in pixels as string\n */function getRadius(size){const radius=RADIUS_VALUES[size];if(radius===undefined){if(typeof __DEV__!==\"undefined\"&&__DEV__){console.warn(`Invalid radius token: ${size}. Use a canonical \"radius-*\" token.`);}return\"12px\";// Fallback to radius-lg\n}return`${radius}px`;}/**\n * Get opacity value by token name.\n * @param token - Opacity token name (e.g., \"subtle\", \"light\", \"medium\", \"disabled\", etc.)\n * @returns Opacity value as number (0-1)\n */function getOpacity(token){const opacity=OPACITY_TOKENS[token];if(opacity===undefined){if(typeof __DEV__!==\"undefined\"&&__DEV__){console.warn(`Opacity token not found: ${token}`);}return 1;// Fallback to fully opaque\n}return opacity;}/**\n * Get shadow value by token name.\n * @param token - Shadow token name (e.g., \"subtle\", \"small\", \"medium\", \"large\", \"xlarge\", \"focus\")\n * @returns CSS box-shadow value string\n *\n * @example\n * ```typescript.\n * Const shadow = Tokens.getShadow(\"medium\");\n * // Returns: \"0 4px 12px 0 rgba(0, 0, 0, 0.25)\".\n *\n * // Use in component styles.\n *

.\n * ```\n */function getShadow(token){const shadow=SHADOW_TOKENS[token];if(shadow===undefined){if(typeof __DEV__!==\"undefined\"&&__DEV__){console.warn(`Shadow token not found: ${token}`);}return\"none\";// Fallback to no shadow\n}return shadow;}/**\n * Get z-index value by token name (scale 0–10).\n * @param token - Z-index token name (e.g. \"base\", \"raised\", \"elevated\", \"modal\", \"max\")\n * @returns Z-index value as number\n *\n * @example\n * ```ts\n * Tokens.getZIndex(\"elevated\"); // 2\n *

\n * ```\n */function getZIndex(token){const zIndex=Z_INDEX_TOKENS[token];if(zIndex===undefined){if(typeof __DEV__!==\"undefined\"&&__DEV__){console.warn(`Z-index token not found: ${token}`);}return 0;// Fallback to base\n}return zIndex;}/**\n * Get animation duration by type.\n * @param type - Named duration from the animation scale (see ANIMATION_DURATIONS)\n * @returns Duration in seconds as number\n */function getAnimationDuration(type){return ANIMATION_DURATIONS[type];}/**\n * Get easing function by type.\n * @param type - Easing type: 'standard', 'enter', 'exit', or 'linear'\n * @returns CSS easing function string\n */function getEasing(type){return ANIMATION_EASING[type];}/**\n * Get spring physics preset.\n * @param type - Spring type: 'snappy', 'smooth', or 'gentle'\n * @returns Spring physics object with stiffness and damping\n */function getSpring(type){return ANIMATION_SPRING[type];}/**\n * Generate CSS transition string.\n * @param property - CSS property name (e.g., \"background\", \"opacity\", \"transform\")\n * @param durationType - Named animation duration (default: 'standard')\n * @param easingType - Easing type: 'standard', 'enter', 'exit', or 'linear' (default: 'standard')\n * @returns CSS transition string (e.g., \"background 0.2s cubic-bezier(0.4, 0, 0.2, 1)\")\n */function getTransition(property,durationType=\"standard\",easingType=\"standard\"){const duration=getAnimationDuration(durationType);const easing=getEasing(easingType);return`${property} ${duration}s ${easing}`;}/**\n * Generate Framer Motion transition object.\n * @param durationType - Duration type: 'quick', 'standard', or 'extended' (default: 'standard')\n * @param easingType - Easing type: 'standard', 'enter', 'exit', or 'linear' (default: 'standard')\n * @returns Framer Motion transition object\n */function getFramerTransition(durationType=\"standard\",easingType=\"standard\"){const duration=getAnimationDuration(durationType);const easing=getEasing(easingType);// Convert cubic-bezier string to array for Framer Motion.\nif(easingType===\"linear\"){return{duration,ease:\"linear\"};}// Extract cubic-bezier values.\nconst bezierMatch=easing.match(/cubic-bezier\$([^)]+)\$/);if(bezierMatch){const values=bezierMatch[1].split(\",\").map(v=>parseFloat(v.trim()));return{duration,ease:values};}return{duration,ease:easing};}/**\n * Get the shared viewport margin for scroll-triggered animations.\n * Use this as the `margin` value in Framer Motion's `viewport` prop\n * to trigger animations slightly before elements enter the viewport.\n *\n * @returns Viewport margin string (e.g. \"-100px\")\n *\n * @example\n * ```typescript\n * \n * ```\n */function getScrollViewportMargin(){return SCROLL_VIEWPORT_MARGIN;}/**\n * CSS `blur()` value for backdrop-filter (and -webkit-backdrop-filter).\n */function getBackdropBlur(size){return`blur(${BACKDROP_BLUR_PX[size]}px)`;}/**\n * Returns the shared Figma-aligned LiquidGlass parameter set.\n * The `intensity` argument is ignored (kept for backward compatibility).\n */function getLiquidGlassPreset(_intensity){return LEGACY_SHARED_PRESET;}/**\n * CSS `filter: blur()` for layered effects (not backdrop-filter).\n */function getEffectFilterBlur(token){return`blur(${EFFECT_FILTER_BLUR_PX[token]}px)`;}/**\n * Default ambient-glow blur (px) for VideoPlayer.\n */function getVideoAmbientGlowBlurDefault(){return VIDEO_AMBIENT_GLOW_BLUR.default;}/**\n * Clamp user-provided ambient-glow blur to a safe range.\n */function clampVideoAmbientGlowBlur(px){if(Number.isNaN(px)||px<0){return 0;}else{return Math.min(Math.round(px),VIDEO_AMBIENT_GLOW_BLUR.max);}}/**\n * Standard focus-ring outline width (matches spacing scale — 2px).\n */function getFocusOutlineWidth(){return getSpacing(2);}/**\n * Convert color value (hex or rgb) to RGB string for rgba usage.\n * @param color - Color value in hex (#RRGGBB) or rgb(r, g, b) format\n * @returns RGB string in format \"r, g, b\"\n */function colorToRgb(color){// Handle hex colors (#RRGGBB).\nif(color.startsWith(\"#\")){const hex=color.replace(\"#\",\"\");const r=parseInt(hex.substring(0,2),16);const g=parseInt(hex.substring(2,4),16);const b=parseInt(hex.substring(4,6),16);return`${r}, ${g}, ${b}`;}// Handle rgb() colors.\nconst rgbMatch=color.match(/rgb\$(\\d+),\\s*(\\d+),\\s*(\\d+)\$/);if(rgbMatch){return`${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}`;}// Fallback to black if format is unknown.\nreturn\"0, 0, 0\";}/**\n * Get brightness filter value for hover/pressed/disabled states.\n * Standard hover pattern: brightness(0.7) provides consistent visual feedback.\n * Across all interactive components when hovered or pressed (reduces brightness by 30%).\n * Disabled state: brightness(0.3) provides consistent visual feedback for disabled components.\n *\n * @param disabled - Whether the component is disabled\n * @param isHovered - Whether the component is currently hovered\n * @param isPressed - Whether the component is currently pressed/active\n * @returns CSS filter string: \"brightness(0.3)\" when disabled, \"brightness(0.7)\" when hovered or pressed, \"none\" otherwise\n *\n * @example\n * ```typescript.\n * Const filter = Tokens.getBrightnessFilter(disabled, isHovered, isPressed);\n * // Use in component styles: filter: filter.\n * ```\n */function getBrightnessFilter(disabled=false,isHovered=false,isPressed=false){if(disabled){return\"brightness(0.3)\";}if(isPressed||isHovered){return\"brightness(0.7)\";}return\"none\";}function useReducedMotion(){const[prefersReducedMotion,setPrefersReducedMotion]=React.useState(false);React.useEffect(()=>{if(typeof window===\"undefined\")return;try{const mediaQuery=window.matchMedia(\"(prefers-reduced-motion: reduce)\");setPrefersReducedMotion(mediaQuery.matches);// Listen for changes to the preference.\nconst handleChange=e=>{setPrefersReducedMotion(e.matches);};// Modern browsers.\nif(mediaQuery.addEventListener){mediaQuery.addEventListener(\"change\",handleChange);return()=>mediaQuery.removeEventListener(\"change\",handleChange);}else if(mediaQuery.addListener){mediaQuery.addListener(handleChange);return()=>mediaQuery.removeListener(handleChange);}return undefined;}catch{setPrefersReducedMotion(false);return undefined;}},[]);return prefersReducedMotion;}/**\n * Hook to detect the current viewport breakpoint via matchMedia.\n *\n * Uses the same breakpoint thresholds as typography/layout tiers:\n * - Phone: < 810px\n * - Tablet: 810px – 1199px\n * - Desktop: >= 1200px\n *\n * Returns \"desktop\" during SSR or when window is unavailable.\n *\n * @example\n * ```typescript\n * const breakpoint = useAutoBreakpoint();\n * // \"phone\" | \"tablet\" | \"desktop\" depending on viewport width.\n * ```\n */function useAutoBreakpoint(){const[breakpoint,setBreakpoint]=React.useState(\"desktop\");React.useEffect(()=>{if(typeof window===\"undefined\")return;const phoneQuery=window.matchMedia(`(max-width: ${PHONE_BREAKPOINT_MAX_WIDTH}px)`);const tabletQuery=window.matchMedia(`(min-width: ${TABLET_BREAKPOINT_MIN_WIDTH}px) and (max-width: ${TABLET_BREAKPOINT_MAX_WIDTH}px)`);const update=()=>{if(phoneQuery.matches)setBreakpoint(\"phone\");else if(tabletQuery.matches)setBreakpoint(\"tablet\");else setBreakpoint(\"desktop\");};// Set initial value.\nupdate();// Listen for changes.\nif(phoneQuery.addEventListener){phoneQuery.addEventListener(\"change\",update);tabletQuery.addEventListener(\"change\",update);return()=>{phoneQuery.removeEventListener(\"change\",update);tabletQuery.removeEventListener(\"change\",update);};}else if(phoneQuery.addListener){phoneQuery.addListener(update);tabletQuery.addListener(update);return()=>{phoneQuery.removeListener(update);tabletQuery.removeListener(update);};}return undefined;},[]);return breakpoint;}/**\n * Breakpoint ordering for comparison (lower = more constrained).\n */const BREAKPOINT_ORDER={phone:0,tablet:1,desktop:2};/**\n * Derive breakpoint from a pixel width (same thresholds as useAutoBreakpoint).\n */function widthToBreakpoint(width){if(width<=PHONE_BREAKPOINT_MAX_WIDTH)return\"phone\";if(width<=TABLET_BREAKPOINT_MAX_WIDTH)return\"tablet\";return\"desktop\";}/**\n * Hook that observes the parent element of the ref and returns the breakpoint\n * for that container width. Use when the section is inside a narrow frame\n * (e.g. Framer preview) so layout follows the container, not the window.\n * Only RefObjects are observed; callback refs are ignored (container stays \"desktop\").\n *\n * @param sectionRef - Ref attached to the section root (we observe its parentElement). RefObject only.\n * @returns Breakpoint for the container width, or \"desktop\" until measured.\n */function useContainerBreakpoint(sectionRef){const[containerWidth,setContainerWidth]=React.useState(null);const refObj=sectionRef&&typeof sectionRef===\"object\"&&\"current\"in sectionRef?sectionRef:undefined;React.useLayoutEffect(()=>{const el=refObj?.current?.parentElement;if(!el)return;const update=()=>setContainerWidth(el.clientWidth);update();const ro=new ResizeObserver(update);ro.observe(el);return()=>ro.disconnect();},[refObj]);if(containerWidth===null)return\"desktop\";return widthToBreakpoint(containerWidth);}/**\n * Hook that resolves the effective breakpoint by combining a prop value\n * with viewport and optional container detection.\n *\n * If the viewport (or container, when sectionRef is passed) is narrower\n * than the breakpoint specified by the prop, the narrower breakpoint wins.\n * Passing sectionRef ensures layout follows the section's container width\n * (e.g. when the section is in a narrow Framer frame).\n *\n * @param propBreakpoint - The breakpoint value from the component prop.\n * @param sectionRef - Optional ref attached to the section root; when set, container width is used.\n * @returns The effective breakpoint (most constrained of prop, viewport, and container).\n *\n * @example\n * ```typescript\n * const breakpoint = useEffectiveBreakpoint(breakpointProp, sectionRef);\n * ```\n */function useEffectiveBreakpoint(propBreakpoint,sectionRef){const viewportBp=useAutoBreakpoint();const containerBp=useContainerBreakpoint(sectionRef);const fromViewport=BREAKPOINT_ORDER[viewportBp]{const isInverted=resolveThemeVariant(theme)===\"inverted\";return{// Background colors.\nbgPrimary:Tokens.getColorValue(isInverted?\"/Backgrounds/bg-inverted-primary\":\"/Backgrounds/bg-primary\"),bgSecondary:Tokens.getColorValue(isInverted?\"/Backgrounds/bg-inverted-secondary\":\"/Backgrounds/bg-secondary\"),bgTertiary:Tokens.getColorValue(isInverted?\"/Backgrounds/bg-inverted-tertiary\":\"/Backgrounds/bg-tertiary\"),bgQuaternary:Tokens.getColorValue(isInverted?\"/Backgrounds/bg-inverted-quaternary\":\"/Backgrounds/bg-quaternary\"),bgQuinary:Tokens.getColorValue(isInverted?\"/Backgrounds/bg-inverted-quinary\":\"/Backgrounds/bg-quinary\"),// Text colors.\ntextPrimary:Tokens.getColorValue(isInverted?\"/Text/text-inverted-primary\":\"/Text/text-primary\"),textSecondary:Tokens.getColorValue(isInverted?\"/Text/text-inverted-secondary\":\"/Text/text-secondary\"),textTertiary:Tokens.getColorValue(isInverted?\"/Text/text-inverted-tertiary\":\"/Text/text-tertiary\"),textQuaternary:Tokens.getColorValue(isInverted?\"/Text/text-inverted-quaternary\":\"/Text/text-quaternary\"),// Foreground/Icon colors.\nfgPrimary:Tokens.getColorValue(isInverted?\"/Foregrounds/fg-inverted-primary\":\"/Foregrounds/fg-primary\"),fgSecondary:Tokens.getColorValue(isInverted?\"/Foregrounds/fg-inverted-secondary\":\"/Foregrounds/fg-secondary\"),fgTertiary:Tokens.getColorValue(isInverted?\"/Foregrounds/fg-inverted-tertiary\":\"/Foregrounds/fg-tertiary\"),// Border colors.\nborderPrimary:Tokens.getColorValue(isInverted?\"/Borders/border-inverted-primary\":\"/Borders/border-primary\"),borderSecondary:Tokens.getColorValue(isInverted?\"/Borders/border-inverted-secondary\":\"/Borders/border-secondary\"),borderTertiary:Tokens.getColorValue(isInverted?\"/Borders/border-inverted-tertiary\":\"/Borders/border-tertiary\"),/** Hairline separators on glass / layered UI — alpha tint, not solid gray. */dividerGlass:Tokens.getColorValue(isInverted?\"/Borders/divider-inverted-glass\":\"/Borders/divider-glass\"),// Semantic colors (theme-independent).\ntextLink:Tokens.getColorValue(\"/Text/text-brand-bunq\"),textError:Tokens.getColorValue(\"/Text/text-error\"),textSuccess:Tokens.getColorValue(\"/Text/text-success\"),textWarning:Tokens.getColorValue(\"/Text/text-warning\"),bgBrand:Tokens.getColorValue(\"/Backgrounds/bg-brand-bunq-solid\"),bgError:Tokens.getColorValue(\"/Backgrounds/bg-error\"),bgSuccess:Tokens.getColorValue(\"/Backgrounds/bg-success\"),bgWarning:Tokens.getColorValue(\"/Backgrounds/bg-warning\"),borderBrand:Tokens.getColorValue(\"/Borders/border-brand-bunq\"),borderError:Tokens.getColorValue(\"/Borders/border-error\"),borderSuccess:Tokens.getColorValue(\"/Borders/border-success\"),borderWarning:Tokens.getColorValue(\"/Borders/border-warning\")};};/**\n * Get theme colors specifically for card components.\n *\n * Provides a standard set of colors for card-based components like.\n * CardBlog, CardTestimonial, CardTeamMember, etc.\n *\n * @param theme - Color theme variant (\"default\" or \"inverted\")\n * @returns Object containing card-specific theme-aware colors\n */export const getCardThemeColors=(theme=\"default\")=>{const baseColors=getThemeColors(theme);return{cardBg:baseColors.bgTertiary,contentBg:baseColors.bgPrimary,titleColor:baseColors.textPrimary,descriptionColor:baseColors.textSecondary,metaColor:baseColors.textTertiary,borderColor:baseColors.borderSecondary,iconColor:baseColors.fgPrimary,// Include base colors for flexibility.\n...baseColors};};/**\n * Get theme colors specifically for banner components.\n *\n * @param theme - Color theme variant (\"default\" or \"inverted\")\n * @returns Object containing banner-specific theme-aware colors\n */export const getBannerThemeColors=(theme=\"default\")=>{const baseColors=getThemeColors(theme);return{bannerBg:baseColors.bgTertiary,titleColor:baseColors.textPrimary,messageColor:baseColors.textPrimary,buttonColor:baseColors.textPrimary,closeIconColor:baseColors.fgPrimary,borderColor:baseColors.borderPrimary,// Include base colors for flexibility.\n...baseColors};};/**\n * Get theme colors specifically for section components.\n *\n * @param theme - Color theme variant (\"default\" or \"inverted\")\n * @returns Object containing section-specific theme-aware colors\n */export const getSectionThemeColors=(theme=\"default\")=>{const baseColors=getThemeColors(theme);return{sectionBg:baseColors.bgPrimary,headingColor:baseColors.textPrimary,bodyColor:baseColors.textSecondary,accentColor:baseColors.textLink,dividerColor:baseColors.dividerGlass,// Include base colors for flexibility.\n...baseColors};};// ─── Background color helpers ─────────────────────────────────────────────────\n/**\n * Get section background color based on a backgroundVariant prop.\n *\n * Centralizes the duplicated `getBackgroundColor` closure that appeared in 11\n * hero/header section components. Pass the raw colors object from\n * `getThemeColors()` so no extra token lookups are required.\n *\n * @param backgroundVariant - \"primary\" | \"secondary\" (or any string for primary fallback)\n * @param colors - Theme colors object containing bgPrimary and bgSecondary\n * @returns CSS color string\n */export function getSectionBackgroundColor(backgroundVariant,colors){if(backgroundVariant===\"primary\")return colors.bgPrimary;if(backgroundVariant===\"secondary\")return colors.bgSecondary;return colors.bgPrimary;}// ─── CMS placeholder color helpers ───────────────────────────────────────────\n/**\n * Get the four standard placeholder colors used by CMS skeleton UIs.\n *\n * Centralizes the duplicated placeholder color expressions that appeared in\n * 11 CMS-backed section components (SectionFaqCentered, SectionCollectionList,\n * SectionTestimonialCarousel, etc.).\n *\n * @param colors - Theme colors object containing textTertiary\n * @returns Object with bgSubtle, bgLight, bgMedium, and textMuted color strings\n */export function getPlaceholderColors(colors){return{bgSubtle:`rgba(${Tokens.colorToRgb(colors.textTertiary)}, ${Tokens.getOpacity(\"subtle\")})`,bgLight:`rgba(${Tokens.colorToRgb(colors.textTertiary)}, ${Tokens.getOpacity(\"light\")})`,bgMedium:`rgba(${Tokens.colorToRgb(colors.textTertiary)}, ${Tokens.getOpacity(\"medium\")})`,textMuted:`rgba(${Tokens.colorToRgb(colors.textTertiary)}, ${Tokens.getOpacity(\"muted\")})`};}\nexport const __FramerMetadata__ = {\"exports\":{\"SectionThemeColors\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"resolveThemeVariant\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getCardThemeColors\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"CardThemeColors\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getPlaceholderColors\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getThemeColors\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"BannerThemeColors\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getBannerThemeColors\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionBackgroundColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionThemeColors\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ThemeColors\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","/**\n * Layout Styles — Framer-Compatible Layout Helpers.\n *\n * JavaScript replacement for the removed `layout.module.css`. Provides\n * breakpoint-aware style objects for sections, containers, grids, and\n * content stacks. Use these helpers when migrating organisms/templates\n * from CSS Modules to inline styles.\n *\n * All values mirror the layout system (breakpoint-aware grid, container,\n * spacing). No CSS files are used; styling is token-driven inline.\n *\n * @example\n * ```tsx\n * import { getSectionStyles, getContainerStyles, getGrid2ColStyles } from \"../../utils/layoutStyles.ts\";\n *\n * const sectionStyle = useMemo(() => getSectionStyles(breakpoint), [breakpoint]);\n * const containerStyle = useMemo(() => getContainerStyles(breakpoint), [breakpoint]);\n * ```\n */import Tokens from\"https://framerusercontent.com/modules/HjvhO8Re4WnlZSTpJli8/jbCIdsxnmVrJOsDqxSxp/index.js\";import{getLiquidGlassBackdropBlurFilter,LIQUID_GLASS_SHARED}from\"https://framerusercontent.com/modules/B31emSmx1NLRWgwsBsT2/ABQDPSGSceq8CIo6a1B6/core.js\";import{darken,formatRgba,parseRgba}from\"https://framerusercontent.com/modules/8c8KaKUdeszQqGCCT7Zw/cAYkeC6yz3m4yKfSKNf3/colorParsing.js\";// ─── Hero min-height ──────────────────────────────────────────────────────────\n/**\n * Standard hero section min-height: fills the full small viewport (toolbars visible).\n *\n * Uses `100svh` instead of `100dvh` for two reasons:\n * 1. The nav is position:sticky and overlaps the hero from y=0, so the hero\n * must span the full viewport height — not viewport minus nav height.\n * 2. `svh` (small viewport height) is stable during scroll: it does not grow\n * when the mobile browser toolbar hides, which would cause the absolutely-\n * positioned background image to rescale and appear to zoom in.\n * On desktop there are no dynamic toolbars so svh === dvh === vh.\n */export const HERO_MIN_HEIGHT=\"100svh\";/**\n * Inset highlight shadow used to add the soft top + bottom rim that makes\n * a Liquid Glass surface feel slightly raised over its background. Apply\n * via `boxShadow` on the surface that already has the backdrop blur set.\n *\n * The values mirror Apple's \"regular\" glass refraction tone (2026 spec):\n * a faint white highlight along the top edge and a darker shadow along\n * the bottom edge to simulate light bouncing through the chrome.\n */export const LIQUID_GLASS_HIGHLIGHT_INSET_SHADOW=\"inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.04)\";/**\n * Top padding for sections that sit under a fixed/sticky nav (e.g. hero sections).\n * Returns the nav height so content starts below the header. Use for paddingTop\n * on the first section below the navbar.\n */export function getSectionPaddingTopWithNav(_breakpoint=\"desktop\"){return\"var(--nav-header-height, 80px)\";}/**\n * Top padding for sections that need both section vertical padding and nav offset\n * (e.g. hero sections: section padding + nav height so content clears the fixed header).\n * Use for paddingTop on the first section below the navbar when section padding is desired.\n *\n * @param breakpoint - Current breakpoint (affects getSectionPaddingY)\n * @returns calc(getSectionPaddingY(breakpoint) + var(--nav-header-height, 80px))\n */export function getSectionPaddingTopWithSectionAndNav(breakpoint=\"desktop\"){return`calc(${getSectionPaddingY(breakpoint)} + var(--nav-header-height, 80px))`;}// ─── Focus outline (shared) ───────────────────────────────────────────────────\nconst FOCUS_OUTLINE_BORDER_TOKEN=\"/Borders/border-brand-bunq\";/**\n * Shared focus outline style string for interactive elements (buttons, links, inputs).\n * Uses the brand border token so focus rings are consistent and themeable.\n *\n * @returns Outline value string, e.g. \" solid \"\n */export function getFocusOutlineStyle(){return`${Tokens.getFocusOutlineWidth()} solid ${Tokens.getColorValue(FOCUS_OUTLINE_BORDER_TOKEN)}`;}/**\n * Whether an interactive element should show its focus ring.\n *\n * Uses native `:focus-visible` so pointer clicks do not leave a persistent\n * outline after the user moves away, while keyboard navigation still gets a\n * visible indicator. Matches platform conventions (e.g. Material, native apps).\n *\n * @param element - The focused element to evaluate\n * @returns True when the focus ring should be painted\n */export function shouldShowFocusRing(element){try{return element.matches(\":focus-visible\");}catch{// Browsers without `:focus-visible` — show the ring so keyboard users\n// still get a focus indicator.\nreturn true;}}// ─── Full-size child style ────────────────────────────────────────────────────\n/**\n * Style object for children that must fill their parent completely\n * (e.g. BackgroundAnimatedGradient behind hero sections).\n */export const FULL_SIZE_STYLE={width:\"100%\",height:\"100%\",minWidth:0,minHeight:0};// ─── Container padding ────────────────────────────────────────────────────────\nexport function getContainerPadding(breakpoint=\"desktop\"){if(breakpoint===\"phone\"){return Tokens.getSpacing(16);}else if(breakpoint===\"tablet\"){return Tokens.getSpacing(24);}else{return Tokens.getSpacing(32);}}export function getContainerMaxWidth(breakpoint=\"desktop\"){if(breakpoint===\"phone\"){return\"100%\";}else if(breakpoint===\"tablet\"){return\"100%\";}else{return\"1280px\";}}/**\n * Max width of the copy column — matches the left cell in `SectionHeroStandard`'s two-column grid.\n */export function getSplitHeroContentMaxWidth(breakpoint=\"desktop\"){const sidePadding=getContainerPadding(breakpoint);const containerMax=getContainerMaxWidth(breakpoint);const gridGap=Tokens.getResponsiveGap(\"large\",breakpoint);return`calc((min(100%, ${containerMax}) - 2 * ${sidePadding} - ${gridGap}) / 2)`;}/**\n * Centered inner container for split heroes (desktop/tablet split layout).\n * Mirrors `SectionHeroStandard` section padding + container; media is positioned separately.\n */export function getSplitHeroInnerContainerStyles(breakpoint=\"desktop\",options){const sectionPadding=Tokens.getSectionPadding(breakpoint);return{...getContainerStyles(breakpoint),...options.isGradient?{position:\"relative\",zIndex:Tokens.getZIndex(\"raised\")}:{},display:\"flex\",flexDirection:\"column\",justifyContent:\"center\",alignItems:\"flex-start\",width:\"100%\",minWidth:0,boxSizing:\"border-box\",minHeight:HERO_MIN_HEIGHT,paddingTop:options.paddingTop,paddingBottom:sectionPadding.paddingBottom,paddingLeft:sectionPadding.paddingLeft,paddingRight:sectionPadding.paddingRight};}/**\n * Absolute media region: starts after the standard hero grid gap, flush to the section's right edge.\n */export function getSplitHeroMediaAbsoluteStyles(breakpoint=\"desktop\"){const sidePadding=getContainerPadding(breakpoint);const containerMax=getContainerMaxWidth(breakpoint);const gridGap=Tokens.getResponsiveGap(\"large\",breakpoint);const leftColumnWidth=getSplitHeroContentMaxWidth(breakpoint);const containerInset=`max(0px, (100% - ${containerMax}) / 2)`;return{position:\"absolute\",top:0,right:0,left:`calc(${containerInset} + ${sidePadding} + ${leftColumnWidth} + ${gridGap})`,height:\"100%\",minHeight:0,minWidth:0};}/**\n * Background region for split heroes (desktop/tablet): gradient fills the left\n * content column from the section edge up to (but not under) the media cell.\n * Position relative to the `

` root, not the inner content container.\n */export function getSplitHeroContentBackgroundStyles(breakpoint=\"desktop\"){const sidePadding=getContainerPadding(breakpoint);const containerMax=getContainerMaxWidth(breakpoint);const gridGap=Tokens.getResponsiveGap(\"large\",breakpoint);const leftColumnWidth=getSplitHeroContentMaxWidth(breakpoint);const containerInset=`max(0px, (100% - ${containerMax}) / 2)`;const contentColumnEnd=`calc(${containerInset} + ${sidePadding} + ${leftColumnWidth} + ${gridGap})`;return{position:\"absolute\",top:0,bottom:0,left:0,width:contentColumnEnd,zIndex:Tokens.getZIndex(\"base\"),overflow:\"hidden\",pointerEvents:\"none\",isolation:\"isolate\"};}const SPLIT_HERO_PHONE_VISUAL_ASPECT_RATIO_CSS={\"16:9\":\"16 / 9\",\"16:10\":\"16 / 10\",\"4:3\":\"4 / 3\",\"4:5\":\"4 / 5\",\"3:2\":\"3 / 2\",\"1:1\":\"1 / 1\",\"9:16\":\"9 / 16\"};/** Maps a split-hero phone visual aspect ratio preset to a CSS `aspect-ratio` value. */export function getSplitHeroPhoneVisualAspectRatioCss(ratio=\"1:1\"){return SPLIT_HERO_PHONE_VISUAL_ASPECT_RATIO_CSS[ratio];}/** Grid row template for stacked split heroes: flexible copy, auto-sized visual from aspect ratio. */export function getSplitHeroStackedGridTemplateRows(){return\"minmax(0, 1fr) auto\";}/** Media container styles for split heroes on phone (stacked layout). */export function getSplitHeroStackedMediaContainerStyles(aspectRatio=\"1:1\"){return{position:\"relative\",width:\"100%\",height:\"auto\",minHeight:0,aspectRatio:getSplitHeroPhoneVisualAspectRatioCss(aspectRatio)};}export function getSectionPaddingY(breakpoint=\"desktop\"){if(breakpoint===\"phone\"){return Tokens.getSpacing(64);}else if(breakpoint===\"tablet\"){return Tokens.getSpacing(96);}else{return Tokens.getSpacing(112);}}// ─── Semantic spacing gaps ────────────────────────────────────────────────────\nconst GAP_VALUES={xxs:{desktop:Tokens.getSpacing(4),tablet:Tokens.getSpacing(4),phone:Tokens.getSpacing(2)},xs:{desktop:Tokens.getSpacing(8),tablet:Tokens.getSpacing(6),phone:Tokens.getSpacing(4)},sm:{desktop:Tokens.getSpacing(16),tablet:Tokens.getSpacing(12),phone:Tokens.getSpacing(8)},md:{desktop:Tokens.getSpacing(24),tablet:Tokens.getSpacing(20),phone:Tokens.getSpacing(16)},lg:{desktop:Tokens.getSpacing(48),tablet:Tokens.getSpacing(32),phone:Tokens.getSpacing(24)},xl:{desktop:Tokens.getSpacing(80),tablet:Tokens.getSpacing(48),phone:Tokens.getSpacing(32)}};export function getGap(size,breakpoint=\"desktop\"){return GAP_VALUES[size][breakpoint];}// ─── Visually hidden (screen-reader only) ───────────────────────────────────────\n/**\n * Style object for visually hidden content that remains available to screen readers.\n * Uses 1px clip pattern (not on spacing scale); use for SR-only live regions and labels.\n */export const VISUALLY_HIDDEN_STYLE={position:\"absolute\",width:\"1px\",height:\"1px\",padding:0,margin:\"-1px\",overflow:\"hidden\",clip:\"rect(0, 0, 0, 0)\",whiteSpace:\"nowrap\",border:0};// ─── Card/tile spacing ────────────────────────────────────────────────────────\nexport function getCardPadding(breakpoint=\"desktop\"){if(breakpoint===\"phone\"){return Tokens.getSpacing(20);}else if(breakpoint===\"tablet\"){return Tokens.getSpacing(24);}else{return Tokens.getSpacing(32);}}export function getCardGap(breakpoint=\"desktop\"){if(breakpoint===\"phone\"){return Tokens.getSpacing(16);}else if(breakpoint===\"tablet\"){return Tokens.getSpacing(20);}else{return Tokens.getSpacing(24);}}// ─── Responsive card radius ───────────────────────────────────────────────────\n/**\n * Breakpoint-based border radius for section/card wrappers and prominent elements.\n * Use for cards, video players, image containers, and other large-radius elements so radius scales from phone to desktop.\n *\n * Radius philosophy: large, prominent radii signal premium quality and modern design.\n * Each tier steps up by one token so the proportional feel is consistent across breakpoints.\n *\n * - **small**: Video players, small cards, inline tiles. Phone 6px, tablet 8px, desktop 12px.\n * - **default**: Section cards, bento, grid cards. Phone 20px, tablet 24px, desktop 32px.\n * - **large**: Hero-style cards, feature \"biggest\", hero images/video. Phone 24px, tablet 32px, desktop 48px.\n *\n * @param breakpoint - Current breakpoint (phone, tablet, desktop).\n * @param size - \"small\" for video/small cards; \"default\" for section cards; \"large\" for hero-style.\n * @returns Radius value in pixels as string (e.g. \"48px\").\n */export function getCardRadius(breakpoint=\"desktop\",size=\"default\"){if(size===\"large\"){if(breakpoint===\"phone\"){return Tokens.getRadius(\"radius-3xl\");}if(breakpoint===\"tablet\"){return Tokens.getRadius(\"radius-4xl\");}return Tokens.getRadius(\"radius-5xl\");}if(size===\"small\"){if(breakpoint===\"phone\"){return Tokens.getRadius(\"radius-sm\");}if(breakpoint===\"tablet\"){return Tokens.getRadius(\"radius-md\");}return Tokens.getRadius(\"radius-lg\");}if(breakpoint===\"phone\"){return Tokens.getRadius(\"radius-xxl\");}if(breakpoint===\"tablet\"){return Tokens.getRadius(\"radius-3xl\");}return Tokens.getRadius(\"radius-4xl\");}/**\n * Border radius for split-card image column (image one side, content other).\n * Phone: top-left and top-right only; desktop: top-left and bottom-left only.\n *\n * Mirrors the one-level-reduced phone and desktop values from getCardRadius for the matching size tier.\n *\n * @param breakpoint - Current breakpoint.\n * @param size - \"default\" (radius-3xl/5xl) or \"large\" (radius-4xl/6xl).\n * @returns Four-value borderRadius string (tl tr br bl).\n */export function getCardImageColumnRadius(breakpoint=\"desktop\",size=\"default\"){const r=size===\"large\"?breakpoint===\"phone\"?Tokens.getRadius(\"radius-3xl\"):Tokens.getRadius(\"radius-5xl\"):breakpoint===\"phone\"?Tokens.getRadius(\"radius-xxl\"):Tokens.getRadius(\"radius-4xl\");if(breakpoint===\"phone\"){return`${r} ${r} 0 0`;}return`${r} 0 0 ${r}`;}export function getModalGap(breakpoint=\"desktop\"){if(breakpoint===\"phone\"){return Tokens.getSpacing(24);}else if(breakpoint===\"tablet\"){return Tokens.getSpacing(24);}else{return Tokens.getSpacing(32);}}// ─── Grid helpers ─────────────────────────────────────────────────────────────\nexport function getGridGutter(breakpoint=\"desktop\"){if(breakpoint===\"phone\"){return Tokens.getSpacing(16);}else{return Tokens.getSpacing(32);}}// ─── Section wrapper (Framer compatibility) ─────────────────────────────────────\n/**\n * Styles for the outer wrapper div used by Section components for Framer.\n * Ensures the section never overflows: maxWidth 100%, minWidth 0 on phone/tablet\n * so content can wrap; minWidth 1280 only on desktop for canvas. Use in the\n * default-export wrapper:

\n */export function getSectionWrapperStyles(breakpoint=\"desktop\"){return{width:\"100%\",maxWidth:\"100%\",minWidth:breakpoint===\"desktop\"?1280:0,boxSizing:\"border-box\",overflowX:\"hidden\"};}/**\n * Wrapper for calculator sections that must follow Framer fill width when resized.\n * Unlike getSectionWrapperStyles, never applies minWidth 1280 so the frame can shrink.\n */export function getCalculatorSectionWrapperStyles(){return{width:\"100%\",maxWidth:\"100%\",minWidth:0,boxSizing:\"border-box\",overflowX:\"hidden\"};}/**\n * Wrapper styles for NavBar components. Same as section wrapper but with\n * overflow: visible so dropdown menus are not clipped by ancestor overflow.\n * Use for NavBarBunqMain (and similar) when used in Framer page templates.\n */export function getNavBarWrapperStyles(breakpoint=\"desktop\"){return{width:\"100%\",maxWidth:\"100%\",minWidth:breakpoint===\"desktop\"?1280:0,boxSizing:\"border-box\",overflow:\"visible\"};}/**\n * Wrapper styles for section components with a sticky sidebar (e.g. document/blog TOC).\n * Same as getSectionWrapperStyles but overflow visible so position: sticky sticks\n * to the viewport as the page scrolls (overflow-x: hidden on the default wrapper\n * creates a scroll container and prevents sticky from working).\n */export function getSectionStickySidebarWrapperStyles(breakpoint=\"desktop\"){return{width:\"100%\",maxWidth:\"100%\",minWidth:breakpoint===\"desktop\"?1280:0,boxSizing:\"border-box\",overflow:\"visible\"};}// ─── Section style objects ────────────────────────────────────────────────────\n/** Full section wrapper with vertical + horizontal padding. */export function getSectionStyles(breakpoint=\"desktop\"){const sidePadding=getContainerPadding(breakpoint);const verticalPadding=getSectionPaddingY(breakpoint);return{width:\"100%\",maxWidth:\"100%\",minWidth:0,boxSizing:\"border-box\",paddingTop:verticalPadding,paddingBottom:verticalPadding,paddingLeft:sidePadding,paddingRight:sidePadding};}/** Compact section: halved vertical padding. */export function getSectionCompactStyles(breakpoint=\"desktop\"){const sidePadding=getContainerPadding(breakpoint);const sectionPY=getSectionPaddingY(breakpoint);const halfPY=`calc(${sectionPY} / 2)`;return{width:\"100%\",maxWidth:\"100%\",minWidth:0,boxSizing:\"border-box\",paddingTop:halfPY,paddingBottom:halfPY,paddingLeft:sidePadding,paddingRight:sidePadding};}/** Flush section: no vertical padding (hero, footer, full-bleed). */export function getSectionFlushStyles(breakpoint=\"desktop\"){const sidePadding=getContainerPadding(breakpoint);return{width:\"100%\",maxWidth:\"100%\",minWidth:0,boxSizing:\"border-box\",paddingTop:0,paddingBottom:0,paddingLeft:sidePadding,paddingRight:sidePadding};}// ─── Container style objects ──────────────────────────────────────────────────\n/** Centered max-width container inside a section. */export function getContainerStyles(breakpoint=\"desktop\"){return{maxWidth:getContainerMaxWidth(breakpoint),marginLeft:\"auto\",marginRight:\"auto\",width:\"100%\",minWidth:0,boxSizing:\"border-box\"};}/**\n * Same max-width as `SectionForm`’s outer wrapper (`width-xl` on desktop). Use for blocks\n * stacked under the form (e.g. GDPR disclaimer) so they stay column-aligned with the form.\n */export function getFormSectionInnerContainerStyles(breakpoint=\"desktop\"){const base=getContainerStyles(breakpoint);return breakpoint===\"desktop\"?{...base,maxWidth:Tokens.getWidthValue(\"width-xl\")}:base;}/** Narrow container max-width (e.g. status page, text-heavy content). Desktop only; tablet/phone use full width. */export function getContainerNarrowMaxWidth(breakpoint=\"desktop\"){if(breakpoint===\"phone\"||breakpoint===\"tablet\"){return\"100%\";}return\"720px\";}/** Narrow container for text-heavy content (paragraph max-width = 720px). */export function getContainerNarrowStyles(){return{maxWidth:\"720px\",marginLeft:\"auto\",marginRight:\"auto\",width:\"100%\",boxSizing:\"border-box\"};}// ─── Grid layout style objects ────────────────────────────────────────────────\n/** Full-width grid (12 / 8 / 4 columns with gutter). */export function getGridStyles(breakpoint=\"desktop\"){return{display:\"grid\",gridTemplateColumns:`repeat(${breakpoint===\"phone\"?4:breakpoint===\"tablet\"?8:12}, 1fr)`,gap:getGridGutter(breakpoint)};}/** Two-column equal split (collapses to 1-col on phone). */export function getGrid2ColStyles(breakpoint=\"desktop\"){return{display:\"grid\",gridTemplateColumns:breakpoint===\"phone\"?\"1fr\":\"1fr 1fr\",gap:getGap(\"xl\",breakpoint),alignItems:\"center\"};}/** Three-column equal split (2-col on tablet, 1-col on phone). */export function getGrid3ColStyles(breakpoint=\"desktop\"){let gridTemplateColumns;if(breakpoint===\"phone\"){gridTemplateColumns=\"1fr\";}else if(breakpoint===\"tablet\"){gridTemplateColumns=\"repeat(2, 1fr)\";}else{gridTemplateColumns=\"repeat(3, 1fr)\";}return{display:\"grid\",gridTemplateColumns,gap:getCardGap(breakpoint)};}/** Four-column grid (2-col on tablet, 1-col on phone). */export function getGrid4ColStyles(breakpoint=\"desktop\"){let gridTemplateColumns;if(breakpoint===\"phone\"){gridTemplateColumns=\"1fr\";}else if(breakpoint===\"tablet\"){gridTemplateColumns=\"repeat(2, 1fr)\";}else{gridTemplateColumns=\"repeat(4, 1fr)\";}return{display:\"grid\",gridTemplateColumns,gap:getCardGap(breakpoint)};}// ─── Content stack style objects ──────────────────────────────────────────────\n/** Vertical flex stack for heading/body/CTA sequences. */export function getStackStyles(size=\"md\",breakpoint=\"desktop\"){return{display:\"flex\",flexDirection:\"column\",gap:getGap(size,breakpoint)};}// ─── Alignment helpers ────────────────────────────────────────────────────────\nexport function getAlignCenterStyles(){return{textAlign:\"center\",alignItems:\"center\"};}// ─── Responsive button width ──────────────────────────────────────────────────\n/**\n * Responsive button container width.\n *\n * On phone, buttons should stretch to full width for tap-friendliness.\n * On tablet and desktop they shrink to fit their content.\n *\n * Centralizes `breakpoint === \"phone\" ? \"100%\" : \"fit-content\"` which was\n * duplicated across 24 Section components.\n *\n * @param breakpoint - Current breakpoint\n * @returns \"100%\" on phone, \"fit-content\" otherwise\n */export function getResponsiveButtonWidth(breakpoint){return breakpoint===\"phone\"?\"100%\":\"fit-content\";}/**\n * Wrapper styles for CTAs inside a column flex that uses default `align-items: stretch`.\n * Stretch ignores `width: fit-content` on tablet/desktop, so buttons appear full-width;\n * `align-self: flex-start` restores intrinsic pill width while keeping phone at `width: 100%`.\n *\n * Skip when the parent already sets `align-items: center` / `flex-start` — stretch is not active.\n */export function getResponsiveButtonContainerStyle(breakpoint){return{width:getResponsiveButtonWidth(breakpoint),alignSelf:\"flex-start\",minWidth:0};}/** Tight gap between heading and subheading/description within a copy block. */export function getCopyStackGap(breakpoint){return Tokens.getResponsiveGap(\"small\",breakpoint);}/** Space between a copy block and the primary CTA below it. */export function getCopyToCtaMarginTop(breakpoint){return Tokens.getResponsiveGap(\"large\",breakpoint);}// ─── Carousel phone peek ──────────────────────────────────────────────────────\n/** Trailing peek width for phone horizontal carousels (on-scale spacing below 64). */export const CAROUSEL_PHONE_PEEK=Tokens.getSpacing(48);// ─── Testimonial phone horizontal scroll ──────────────────────────────────────\nexport const TESTIMONIAL_PHONE_SCROLL_DATA_ATTR=\"data-bunq-testimonial-hscroll\";export const TESTIMONIAL_PHONE_SCROLLBAR_HIDE_STYLE=\"[data-bunq-testimonial-hscroll]::-webkit-scrollbar{display:none;width:0;height:0;}\";/**\n * Shared phone horizontal-scroll list chrome for testimonial card sections.\n * Cards peek in from the right so users can discover additional testimonials.\n */export function getTestimonialPhoneScrollListStyle(breakpoint,gap,reducedMotion){return{display:\"flex\",flexDirection:\"row\",alignItems:\"stretch\",gap,width:\"100%\",overflowX:\"auto\",overflowY:\"hidden\",scrollSnapType:reducedMotion?\"none\":\"x mandatory\",WebkitOverflowScrolling:\"touch\",scrollbarWidth:\"none\",msOverflowStyle:\"none\",paddingRight:getContainerPadding(breakpoint),scrollPaddingRight:getContainerPadding(breakpoint),scrollPaddingLeft:0,minWidth:0};}export function getTestimonialPhoneScrollItemStyle(){return{display:\"flex\",flex:`0 0 calc(100% - ${CAROUSEL_PHONE_PEEK})`,height:\"auto\",scrollSnapAlign:\"start\",scrollSnapStop:\"always\"};}// ─── CMS empty placeholder style ─────────────────────────────────────────────\n/**\n * Style object for the full-section CMS empty/skeleton placeholder shown in\n * Framer canvas when a CMS Collection has not yet been connected.\n *\n * Centralizes the `emptyPlaceholderStyle` object duplicated across 11\n * CMS-backed Section components. The caller supplies `bgSubtle` (from\n * `getPlaceholderColors()`) and the current breakpoint so the border radius\n * scales correctly.\n *\n * @param breakpoint - Current breakpoint (affects border radius)\n * @param bgSubtle - Subtle background color (from getPlaceholderColors)\n * @returns CSSProperties for the placeholder container\n */export function getCmsEmptyPlaceholderStyle(breakpoint,bgSubtle){return{width:\"100%\",minHeight:Tokens.getSpacing(200),backgroundColor:bgSubtle,borderRadius:getCardRadius(breakpoint,\"small\"),display:\"flex\",alignItems:\"center\",justifyContent:\"center\",flexDirection:\"column\",textAlign:\"center\",gap:Tokens.getSpacing(8)};}export function getAlignLeftStyles(){return{textAlign:\"left\",alignItems:\"flex-start\"};}/** Default accent for `variant=\"colored\"` when no `accentColor` is passed (#004922). */export const DEFAULT_COLORED_GLASS_ACCENT=\"#004922\";/**\n * Normalise legacy `\"light\"` / `\"dark\"` aliases to their explicit\n * `default-*` equivalents. Pass-through for already-resolved variants.\n */export function normalizeGlassVariant(variant){if(variant===\"light\")return\"default-light\";if(variant===\"dark\")return\"default-regular\";return variant;}/**\n * Resolve a glass variant from `theme` + optional `shade` (or legacy\n * `fallbackTone`).\n *\n * - When `shade` is provided it always wins → `${theme}-${shade}`.\n * - Otherwise legacy `fallbackTone` is honoured for back-compat:\n * - `fallbackTone=\"light\"` (old white-tint family on dark UI) →\n * `\"default-regular\"` (same fill as legacy `\"dark\"`).\n * - `fallbackTone=\"dark\"` (old black-tint family on light UI) →\n * `\"default-light\"` (same fill as legacy `\"light\"`).\n * - Default mapping (`auto`): default theme → `\"default-regular\"`;\n * inverted theme → `\"inverted-regular\"`. This intentionally **changes**\n * the inverted theme's auto-resolved fill from the legacy `\"light\"`\n * (`#fff` family) to `\"inverted-regular\"` (same `#fff` family as legacy\n * `\"light\"`) — no visual change, just a semantic relabel.\n */export function resolveGlassVariant(theme,fallbackTone=\"auto\",shade){if(shade){const prefix=theme===\"inverted\"?\"inverted\":\"default\";return`${prefix}-${shade}`;}if(fallbackTone===\"light\")return\"default-regular\";if(fallbackTone===\"dark\")return\"default-light\";return theme===\"inverted\"?\"inverted-regular\":\"default-regular\";}/** Parses accent for colored fills; defaults to {@link DEFAULT_COLORED_GLASS_ACCENT}. */export function resolveAccentRgb(accentColor){const raw=accentColor??DEFAULT_COLORED_GLASS_ACCENT;const parts=parseRgba(raw);if(parts)return{r:parts.r,g:parts.g,b:parts.b};return{r:0,g:73,b:34};}/**\n * Fill gradient / solid stack for a glass variant (layer opacities folded into stops).\n *\n * Shade reuse map (matches Figma):\n * - `default-light` === legacy `\"light\"` fill (white-tint family).\n * - `default-regular` === legacy `\"dark\"` fill (gray-tint family).\n * - `default-dark` → NEW deeper variant for elevated surfaces on light UI.\n * - `inverted-light` → NEW airy variant for hero overlays on dark UI.\n * - `inverted-regular` === legacy `\"light\"` fill (same as `default-light`).\n * - `inverted-dark` === legacy `\"dark\"` fill (same as `default-regular`).\n */export function getLiquidGlassVariantFill(variant,surface,accentColor){const resolved=normalizeGlassVariant(variant);const{r,g,b}=resolveAccentRgb(accentColor);if(surface===\"button\"){switch(resolved){// Reused: legacy \"light\" button fill (white-tint).\ncase\"default-light\":case\"inverted-regular\":return\"linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.06) 100%), rgba(255, 255, 255, 0.06)\";// Reused: legacy \"dark\" button fill (subtle white-to-black gradient).\ncase\"default-regular\":case\"inverted-dark\":return\"linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.12) 100%)\";// NEW: deeper button glass for default theme.\ncase\"default-dark\":return\"linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.24) 100%)\";// NEW: airier button glass for inverted theme.\ncase\"inverted-light\":return\"linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.20) 100%), rgba(255, 255, 255, 0.10)\";case\"colored\":{const accentStr=accentColor??DEFAULT_COLORED_GLASS_ACCENT;const darkenedTop=darken(accentStr,.26);const darkParts=parseRgba(darkenedTop);const topA=.26;const botA=.13;const topStop=darkParts?formatRgba({...darkParts,a:topA}):`rgba(${r}, ${g}, ${b}, ${topA})`;return`linear-gradient(180deg, ${topStop} 7%, rgba(${r}, ${g}, ${b}, ${botA}) 100%)`;}}}switch(resolved){// Reused: legacy \"light\" surface fill.\ncase\"default-light\":case\"inverted-regular\":return\"linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(238, 238, 238, 0.30) 100%)\";// Reused: legacy \"dark\" surface fill.\ncase\"default-regular\":case\"inverted-dark\":return\"linear-gradient(180deg, rgba(92, 92, 92, 0.20) 0%, rgba(46, 46, 46, 0.34) 100%)\";// NEW: deeper surface glass for default theme. Pulls more black through\n// the frost so navbars / popovers float convincingly above light hero\n// imagery without losing translucency entirely.\ncase\"default-dark\":return\"linear-gradient(180deg, rgba(34, 34, 34, 0.36) 0%, rgba(14, 14, 14, 0.52) 100%)\";// NEW: airy surface glass for inverted theme. Lifts white frost so\n// surfaces over dark gradients read as a softly lit pane.\ncase\"inverted-light\":return\"linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(245, 245, 245, 0.46) 100%)\";case\"colored\":{const accentStr=accentColor??DEFAULT_COLORED_GLASS_ACCENT;const darkenedTop=darken(accentStr,.26);const darkParts=parseRgba(darkenedTop);const topA=.28;const botA=.14;const topStop=darkParts?formatRgba({...darkParts,a:topA}):`rgba(${r}, ${g}, ${b}, ${topA})`;return`linear-gradient(180deg, ${topStop} 7%, rgba(${r}, ${g}, ${b}, ${botA}) 100%)`;}}}/**\n * Inset chrome ring for liquid glass (surface **and** button/pill shells).\n *\n * Apple's refractive-glass edge reads best as a *thin* sub-pixel light catch\n * with a soft bottom falloff for depth — not as a heavy 1 px stroke with a\n * hard 1 px contour underneath (which makes the rim look like a chiseled\n * frame). For non-selected variants we keep things subtle because the\n * `` primitive already paints a universal `0.5 px` hairline\n * rim via `HIGHLIGHT_BORDER_BOX_SHADOW`; this function adds the\n * variant-specific top sheen + a soft (blurred, inset spread) bottom shadow\n * for depth, and only switches to a visible 1 px ring when the surface is\n * `selected` (so the selection state remains unambiguous).\n *\n * `surface=\"button\"` keeps the same **rim + depth** intent as card glass but\n * omits the extra `inset 0 1px 0` top sheen — on small pills it stacks with the\n * hairline and reads as a double border.\n */export function getLiquidGlassVariantChromeShadow(variant,surface,selected){const resolved=normalizeGlassVariant(variant);// Pills (Badge, Tab, FeaturedIcon): hairline must stay legible at 24–64px — global\n// card chrome was toned down ~50%, but the same alphas on tiny discs + backdrop-filter\n// composite nearly disappear; button stack uses stronger alphas than card surfaces.\nif(surface===\"button\"){if(resolved===\"default-regular\"||resolved===\"inverted-dark\"){if(selected){return[\"inset 0 0 0 1px rgba(255, 255, 255, 0.42)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.10)\"].join(\", \");}return[\"inset 0 0 0 0.5px rgba(255, 255, 255, 0.14)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.12)\"].join(\", \");}if(resolved===\"default-light\"||resolved===\"inverted-regular\"){return[\"inset 0 0 0 0.5px rgba(255, 255, 255, 0.22)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.045)\"].join(\", \");}if(resolved===\"default-dark\"){if(selected){return[\"inset 0 0 0 1px rgba(255, 255, 255, 0.38)\",\"inset 0 -3px 8px -1px rgba(0, 0, 0, 0.14)\"].join(\", \");}return[\"inset 0 0 0 0.5px rgba(255, 255, 255, 0.11)\",\"inset 0 -3px 8px -1px rgba(0, 0, 0, 0.14)\"].join(\", \");}if(resolved===\"inverted-light\"){return[\"inset 0 0 0 0.5px rgba(255, 255, 255, 0.26)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.03)\"].join(\", \");}// colored — only variant left for button-sized glass\nif(selected){return[\"inset 0 0 0 1px rgba(255, 255, 255, 0.34)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.09)\"].join(\", \");}return[\"inset 0 0 0 0.5px rgba(255, 255, 255, 0.14)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.12)\"].join(\", \");}// Reused: legacy \"dark\" chrome (gray-tint surface). Used by both\n// `default-regular` and `inverted-dark` since they share the same fill.\nif(resolved===\"default-regular\"||resolved===\"inverted-dark\"){if(selected){return[\"inset 0 0 0 1px rgba(255, 255, 255, 0.36)\",\"inset 0 1px 0 rgba(255, 255, 255, 0.19)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.07)\"].join(\", \");}return[\"inset 0 0 0 0.5px rgba(255, 255, 255, 0.09)\",\"inset 0 1px 0 rgba(255, 255, 255, 0.10)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.09)\"].join(\", \");}// Reused: legacy \"light\" chrome (white-tint surface). Used by both\n// `default-light` and `inverted-regular`.\nif(resolved===\"default-light\"||resolved===\"inverted-regular\"){return[\"inset 0 0 0 0.5px rgba(255, 255, 255, 0.16)\",\"inset 0 1px 0 rgba(255, 255, 255, 0.25)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.03)\"].join(\", \");}// NEW: deep glass on default theme. Stronger bottom contact shadow gives\n// the surface visible weight against bright backdrops; top sheen stays\n// subtle so the rim doesn't look chiseled.\nif(resolved===\"default-dark\"){if(selected){return[\"inset 0 0 0 1px rgba(255, 255, 255, 0.33)\",\"inset 0 1px 0 rgba(255, 255, 255, 0.16)\",\"inset 0 -3px 8px -1px rgba(0, 0, 0, 0.11)\"].join(\", \");}return[\"inset 0 0 0 0.5px rgba(255, 255, 255, 0.07)\",\"inset 0 1px 0 rgba(255, 255, 255, 0.08)\",\"inset 0 -3px 8px -1px rgba(0, 0, 0, 0.13)\"].join(\", \");}// NEW: airy glass on inverted theme. Soft top sheen prevents blow-out\n// against dark gradients; minimal bottom shadow keeps the surface light.\nif(resolved===\"inverted-light\"){return[\"inset 0 0 0 0.5px rgba(255, 255, 255, 0.20)\",\"inset 0 1px 0 rgba(255, 255, 255, 0.18)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.02)\"].join(\", \");}// colored\nif(selected){return[\"inset 0 0 0 1px rgba(255, 255, 255, 0.28)\",\"inset 0 1px 0 rgba(255, 255, 255, 0.20)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.065)\"].join(\", \");}return[\"inset 0 0 0 0.5px rgba(255, 255, 255, 0.09)\",\"inset 0 1px 0 rgba(255, 255, 255, 0.11)\",\"inset 0 -2px 6px -1px rgba(0, 0, 0, 0.09)\"].join(\", \");}/** Extra tint layer for colored-button selection (Linear 70% white). */export function getLiquidGlassColoredButtonSelectionOverlay(){return\"linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.70) 100%)\";}/** Composed tint layer(s) for the SVG-active path + fallback (includes selection overlay when applicable). */export function getLiquidGlassTintBackground(variant,surface,selected,accentColor){const resolved=normalizeGlassVariant(variant);const accent=accentColor??(resolved===\"colored\"?DEFAULT_COLORED_GLASS_ACCENT:undefined);const base=getLiquidGlassVariantFill(resolved,surface,accent);if(selected&&resolved===\"colored\"&&surface===\"button\"){return`${base}, ${getLiquidGlassColoredButtonSelectionOverlay()}`;}return base;}/** Full fallback style when variant/surface are explicit (preferred for ``). */export function getLiquidGlassFallbackStyleResolved(variant,surface,selected,accentColor,/** When false, omits inset chrome (caller paints rim separately — e.g. above a tint overlay). */includeChrome=true){const filter=getLiquidGlassBackdropBlurFilter(LIQUID_GLASS_SHARED.frostBlurPx,LIQUID_GLASS_SHARED.saturation);return{background:getLiquidGlassTintBackground(variant,surface,selected,accentColor),backdropFilter:filter,WebkitBackdropFilter:filter,...includeChrome?{boxShadow:getLiquidGlassVariantChromeShadow(variant,surface,selected)}:{}};}/**\n * Returns the resolved CSS colour string for a Liquid Glass tint (surface fills only).\n * Legacy API: maps theme/fallbackTone/tone → new dark/light fills (tone ignored).\n */export function getLiquidGlassTintColor(theme=\"default\",fallbackTone=\"auto\",_tone=\"regular\"){return getLiquidGlassVariantFill(resolveGlassVariant(theme,fallbackTone),\"surface\",undefined);}/**\n * Theme-aware inset chrome stack (surface glass). Delegates to {@link getLiquidGlassVariantChromeShadow}.\n */export function getLiquidGlassChromeShadow(theme=\"default\",fallbackTone=\"auto\"){return getLiquidGlassVariantChromeShadow(resolveGlassVariant(theme,fallbackTone),\"surface\",false);}/**\n * Static frosted-glass fallback CSS for LiquidGlass when SVG filter is unavailable.\n * Uses shared Figma frost blur + saturate from {@link LIQUID_GLASS_SHARED}.\n */export function getLiquidGlassFallbackStyle(theme=\"default\",fallbackTone=\"auto\",_tone=\"regular\"){const variant=resolveGlassVariant(theme,fallbackTone);const filter=getLiquidGlassBackdropBlurFilter(LIQUID_GLASS_SHARED.frostBlurPx,LIQUID_GLASS_SHARED.saturation);return{background:getLiquidGlassVariantFill(variant,\"surface\",undefined),backdropFilter:filter,WebkitBackdropFilter:filter,boxShadow:getLiquidGlassVariantChromeShadow(variant,\"surface\",false)};}\nexport const __FramerMetadata__ = {\"exports\":{\"getLiquidGlassTintBackground\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getContainerPadding\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getCopyToCtaMarginTop\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getLiquidGlassTintColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getCardImageColumnRadius\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionPaddingTopWithSectionAndNav\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSplitHeroContentMaxWidth\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getLiquidGlassColoredButtonSelectionOverlay\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSplitHeroPhoneVisualAspectRatioCss\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSplitHeroContentBackgroundStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getLiquidGlassVariantFill\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"resolveGlassVariant\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getLiquidGlassFallbackStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getGrid4ColStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"LiquidGlassShade\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getCalculatorSectionWrapperStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getModalGap\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"TESTIMONIAL_PHONE_SCROLLBAR_HIDE_STYLE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSplitHeroMediaAbsoluteStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HERO_MIN_HEIGHT\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSplitHeroStackedGridTemplateRows\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionPaddingTopWithNav\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionFlushStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getTestimonialPhoneScrollItemStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getGrid3ColStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"LiquidGlassSurfaceKind\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ResolvedLiquidGlassVariant\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getGrid2ColStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getGap\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getFocusOutlineStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getGridGutter\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getNavBarWrapperStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"CAROUSEL_PHONE_PEEK\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionStickySidebarWrapperStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"LiquidGlassVariant\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getCopyStackGap\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getContainerNarrowMaxWidth\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionWrapperStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getLiquidGlassChromeShadow\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"VISUALLY_HIDDEN_STYLE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSplitHeroInnerContainerStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getAlignCenterStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getContainerStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getGridStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"FULL_SIZE_STYLE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getStackStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getCardPadding\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getContainerMaxWidth\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionCompactStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getResponsiveButtonWidth\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getLiquidGlassVariantChromeShadow\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"resolveAccentRgb\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"SplitHeroPhoneVisualAspectRatio\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getCardGap\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getFormSectionInnerContainerStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getAlignLeftStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"DEFAULT_COLORED_GLASS_ACCENT\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getCardRadius\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getContainerNarrowStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getLiquidGlassFallbackStyleResolved\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSplitHeroStackedMediaContainerStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"normalizeGlassVariant\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"shouldShowFocusRing\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"TESTIMONIAL_PHONE_SCROLL_DATA_ATTR\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"LIQUID_GLASS_HIGHLIGHT_INSET_SHADOW\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getResponsiveButtonContainerStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getTestimonialPhoneScrollListStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionPaddingY\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getCmsEmptyPlaceholderStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./layoutStyles.map","/**\n * Brand Rainbow Signature — ten-stop linear gradient (Figma Hero_gradient-C).\n * Used by BackgroundAnimatedGradient Rainbow preset and animated rainbow borders.\n */import Tokens from\"https://framerusercontent.com/modules/HjvhO8Re4WnlZSTpJli8/jbCIdsxnmVrJOsDqxSxp/index.js\";/** Full Rainbow Signature palette (12 solids), left-to-right: greens → blues → warm. Used by Rainbow Bar “Bars” variant. */export const RAINBOW_SIGNATURE_TWELVE_COLOR_PATHS=[\"/Brand colors/rainbow-tree\",\"/Brand colors/rainbow-grass\",\"/Brand colors/rainbow-apple\",\"/Brand colors/rainbow-zest\",\"/Brand colors/rainbow-brook\",\"/Brand colors/rainbow-pool\",\"/Brand colors/rainbow-tide\",\"/Brand colors/rainbow-dusk\",\"/Brand colors/rainbow-mulberry\",\"/Brand colors/rainbow-flare\",\"/Brand colors/rainbow-tangerine\",\"/Brand colors/rainbow-amber\"];/** Exact RGB stops from Figma Hero_gradient-C. */export const RAINBOW_SIGNATURE_COLORS=[\"rgb(97, 181, 79)\",\"rgb(76, 183, 134)\",\"rgb(61, 184, 173)\",\"rgb(58, 172, 186)\",\"rgb(51, 148, 214)\",\"rgb(26, 89, 163)\",\"rgb(108, 44, 115)\",\"rgb(173, 8, 77)\",\"rgb(240, 94, 38)\",\"rgb(244, 123, 42)\"];/** Linear-gradient angle matching Figma (120deg). */export const RAINBOW_SIGNATURE_GRADIENT_ANGLE_DEG=120;/** Linear-gradient stop positions (%) matching Figma Hero_gradient-C. */export const RAINBOW_SIGNATURE_LINEAR_STOPS_PERCENT=[0,11,20,30,38,54,67,78,90,100];export function getRainbowSignatureColorsResolved(){return RAINBOW_SIGNATURE_COLORS;}export function getRainbowSignatureTwelveColorsResolved(){return RAINBOW_SIGNATURE_TWELVE_COLOR_PATHS.map(path=>Tokens.getColorValue(path));}/** Build the static Rainbow Signature linear-gradient CSS value. */export function buildRainbowSignatureLinearGradient(angleDeg=RAINBOW_SIGNATURE_GRADIENT_ANGLE_DEG){return`linear-gradient(${angleDeg}deg, ${formatLinearGradientColorStops([...RAINBOW_SIGNATURE_COLORS],RAINBOW_SIGNATURE_LINEAR_STOPS_PERCENT)})`;}/** Build CSS linear-gradient color list with optional `%` stops (equal spacing if omitted). */export function formatLinearGradientColorStops(colors,percents){if(percents?.length===colors.length){return colors.map((c,i)=>`${c} ${percents[i]}%`).join(\", \");}return colors.join(\", \");}/** @deprecated Prefer `formatLinearGradientColorStops` — alias for older imports. */export const formatRainbowSignatureLinearGradientStops=formatLinearGradientColorStops;\nexport const __FramerMetadata__ = {\"exports\":{\"formatLinearGradientColorStops\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"RAINBOW_SIGNATURE_GRADIENT_ANGLE_DEG\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getRainbowSignatureTwelveColorsResolved\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"buildRainbowSignatureLinearGradient\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getRainbowSignatureColorsResolved\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"RAINBOW_SIGNATURE_TWELVE_COLOR_PATHS\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"formatRainbowSignatureLinearGradientStops\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"RAINBOW_SIGNATURE_COLORS\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"RAINBOW_SIGNATURE_LINEAR_STOPS_PERCENT\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","/**\n * BackgroundAnimatedGradient - Animated background component with gradient presets.\n *\n * Animated background component with customizable gradient presets and animation types.\n * Supports 20 predefined gradient presets with 5 different animation types.\n *\n * @framerIntrinsicWidth 1280.\n * @framerIntrinsicHeight 225.\n * @framerSupportedLayoutWidth any-prefer-fixed.\n * @framerSupportedLayoutHeight any-prefer-fixed.\n */// 1. React and React types\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{forwardRef,useMemo}from\"react\";// 2. Framer API\nimport{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{isFramerStaticMotionContext}from\"https://framerusercontent.com/modules/H2peOJaolSTyCFFNIwVC/MBjueh7ML19qP5n6r5VM/framerStaticMotionContext.js\";import{pickSafeDivProps}from\"https://framerusercontent.com/modules/kDtm9rjjhstSjEsKiU59/FntwkS18vtdaa5Vgz0fk/domProps.js\";// 4. Design system utilities\nimport Tokens,{useReducedMotion}from\"https://framerusercontent.com/modules/HjvhO8Re4WnlZSTpJli8/jbCIdsxnmVrJOsDqxSxp/index.js\";import{RAINBOW_SIGNATURE_GRADIENT_ANGLE_DEG,RAINBOW_SIGNATURE_LINEAR_STOPS_PERCENT,getRainbowSignatureColorsResolved,formatLinearGradientColorStops}from\"https://framerusercontent.com/modules/vaIzCx0TYEaOse8701LH/nLhUb6ABm2Y1xPgMbxFs/rainbowSignatureGradient.js\";/** Legacy Framer instances used \"Bunq Rainbow\"; resolve to Lush (see plan / brand Rainbow Signature). */const GRADIENT_PRESET_ALIASES={\"Bunq Rainbow\":\"Lush\"};/**\n * Inline SVG film-grain tile. Same recipe as `GradientText` so a section's\n * gradient background and any gradient-text headline inside it share the\n * same texture. Higher `baseFrequency` = finer grain; `numOctaves` adds\n * mid-frequency noise so the texture doesn't look uniform.\n */const NOISE_TILE_SIZE_PX=200;const NOISE_SVG=``;const NOISE_BACKGROUND_IMAGE=`url(\"data:image/svg+xml;utf8,${encodeURIComponent(NOISE_SVG)}\")`;function resolveGradientPresetKey(preset){return GRADIENT_PRESET_ALIASES[preset]??preset;}/** Map utility color shade to inverted (light) shade for theme=\"inverted\": 900→100, 800→200, etc. */function invertUtilityColorPath(path){const match=path.match(/-(\\d+)$/);if(!match)return path;const num=parseInt(match[1],10);const map={100:900,200:800,300:700,400:600,500:500,600:400,700:300,800:200,900:100};const inverted=map[num]??num;return path.replace(/-\\d+$/,`-${inverted}`);}// Gradient presets with colors, default speeds, and animation types.\n// All colors use design tokens from the design system.\n//\n// `colorPaths` is used for the default theme. For `theme=\"inverted\"`, the\n// resolver first looks at `invertedColorPaths` (an explicit override, used\n// for brand gradients like tricount-blue whose paths don't follow the\n// utility-color shade scale). When `invertedColorPaths` is missing, the\n// resolver falls back to remapping the trailing shade number in `colorPaths`\n// (900↔100, 800↔200 …) via `invertUtilityColorPath`. Without this override,\n// brand presets used to render identically in default and inverted themes\n// because their numeric suffix is a sequence index (1/2/3/4) rather than a\n// shade weight, so the inversion map fell through to a no-op.\n//\n// Exported for use by other effects (e.g. BackgroundLightRays).\nexport const gradientPresets={\"Yellow\":{colorPaths:[\"/Utility colors/utility-yellow-900\",\"/Utility colors/utility-yellow-800\",\"/Utility colors/utility-yellow-500\",\"/Utility colors/utility-yellow-200\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-yellow-900\"),Tokens.getColorValue(\"/Utility colors/utility-yellow-800\"),Tokens.getColorValue(\"/Utility colors/utility-yellow-500\"),Tokens.getColorValue(\"/Utility colors/utility-yellow-200\")],/**\n * Default speed.\n */defaultSpeed:32,/**\n * Animation type.\n */animationType:\"nebula-pulse\"},\"Deep Yellow\":{colorPaths:[\"/Utility colors/utility-deep-yellow-900\",\"/Utility colors/utility-deep-yellow-800\",\"/Utility colors/utility-deep-yellow-500\",\"/Utility colors/utility-deep-yellow-100\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-deep-yellow-900\"),Tokens.getColorValue(\"/Utility colors/utility-deep-yellow-800\"),Tokens.getColorValue(\"/Utility colors/utility-deep-yellow-500\"),Tokens.getColorValue(\"/Utility colors/utility-deep-yellow-100\")],/**\n * Default speed.\n */defaultSpeed:32,/**\n * Animation type.\n */animationType:\"nebula-pulse\"},\"Orange\":{colorPaths:[\"/Utility colors/utility-orange-900\",\"/Utility colors/utility-orange-800\",\"/Utility colors/utility-orange-500\",\"/Utility colors/utility-yellow-400\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-orange-900\"),Tokens.getColorValue(\"/Utility colors/utility-orange-800\"),Tokens.getColorValue(\"/Utility colors/utility-orange-500\"),Tokens.getColorValue(\"/Utility colors/utility-yellow-400\")],/**\n * Default speed.\n */defaultSpeed:20,/**\n * Animation type.\n */animationType:\"electric-drift\"},\"Red\":{colorPaths:[\"/Utility colors/utility-red-800\",\"/Utility colors/utility-red-700\",\"/Utility colors/utility-red-500\",\"/Utility colors/utility-red-200\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-red-800\"),Tokens.getColorValue(\"/Utility colors/utility-red-700\"),Tokens.getColorValue(\"/Utility colors/utility-red-500\"),Tokens.getColorValue(\"/Utility colors/utility-red-200\")],/**\n * Default speed.\n */defaultSpeed:18,/**\n * Animation type.\n */animationType:\"liquid-morph\"},\"Hot Pink\":{colorPaths:[\"/Utility colors/utility-hot-pink-900\",\"/Utility colors/utility-hot-pink-800\",\"/Utility colors/utility-hot-pink-500\",\"/Utility colors/utility-hot-pink-200\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-hot-pink-900\"),Tokens.getColorValue(\"/Utility colors/utility-hot-pink-800\"),Tokens.getColorValue(\"/Utility colors/utility-hot-pink-500\"),Tokens.getColorValue(\"/Utility colors/utility-hot-pink-200\")],/**\n * Default speed.\n */defaultSpeed:24,/**\n * Animation type.\n */animationType:\"cosmic-flow\"},\"Fuchsia\":{colorPaths:[\"/Utility colors/utility-fuchsia-900\",\"/Utility colors/utility-fuchsia-800\",\"/Utility colors/utility-fuchsia-500\",\"/Utility colors/utility-fuchsia-200\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-fuchsia-900\"),Tokens.getColorValue(\"/Utility colors/utility-fuchsia-800\"),Tokens.getColorValue(\"/Utility colors/utility-fuchsia-500\"),Tokens.getColorValue(\"/Utility colors/utility-fuchsia-200\")],/**\n * Default speed.\n */defaultSpeed:24,/**\n * Animation type.\n */animationType:\"cosmic-flow\"},\"Purple\":{colorPaths:[\"/Utility colors/utility-purple-900\",\"/Utility colors/utility-purple-800\",\"/Utility colors/utility-purple-500\",\"/Utility colors/utility-purple-300\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-purple-900\"),Tokens.getColorValue(\"/Utility colors/utility-purple-800\"),Tokens.getColorValue(\"/Utility colors/utility-purple-500\"),Tokens.getColorValue(\"/Utility colors/utility-purple-300\")],/**\n * Default speed.\n */defaultSpeed:22,/**\n * Animation type.\n */animationType:\"nebula-pulse\"},\"Deep Purple\":{colorPaths:[\"/Utility colors/utility-deep-purple-900\",\"/Utility colors/utility-deep-purple-800\",\"/Utility colors/utility-deep-purple-500\",\"/Utility colors/utility-deep-purple-300\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-deep-purple-900\"),Tokens.getColorValue(\"/Utility colors/utility-deep-purple-800\"),Tokens.getColorValue(\"/Utility colors/utility-deep-purple-500\"),Tokens.getColorValue(\"/Utility colors/utility-deep-purple-300\")],/**\n * Default speed.\n */defaultSpeed:22,/**\n * Animation type.\n */animationType:\"nebula-pulse\"},\"Indigo\":{colorPaths:[\"/Utility colors/utility-indigo-900\",\"/Utility colors/utility-indigo-800\",\"/Utility colors/utility-indigo-500\",\"/Utility colors/utility-indigo-200\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-indigo-900\"),Tokens.getColorValue(\"/Utility colors/utility-indigo-800\"),Tokens.getColorValue(\"/Utility colors/utility-indigo-500\"),Tokens.getColorValue(\"/Utility colors/utility-indigo-200\")],/**\n * Default speed.\n */defaultSpeed:24,/**\n * Animation type.\n */animationType:\"nebula-pulse\"},\"Deep Blue\":{colorPaths:[\"/Utility colors/utility-deep-blue-900\",\"/Utility colors/utility-deep-blue-800\",\"/Utility colors/utility-deep-blue-600\",\"/Utility colors/utility-deep-blue-500\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-deep-blue-900\"),Tokens.getColorValue(\"/Utility colors/utility-deep-blue-800\"),Tokens.getColorValue(\"/Utility colors/utility-deep-blue-600\"),Tokens.getColorValue(\"/Utility colors/utility-deep-blue-500\")],/**\n * Default speed.\n */defaultSpeed:30,/**\n * Animation type.\n */animationType:\"aurora-waves\"},\"Blue\":{colorPaths:[\"/Utility colors/utility-blue-900\",\"/Utility colors/utility-blue-800\",\"/Utility colors/utility-blue-600\",\"/Utility colors/utility-blue-500\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-blue-900\"),Tokens.getColorValue(\"/Utility colors/utility-blue-800\"),Tokens.getColorValue(\"/Utility colors/utility-blue-600\"),Tokens.getColorValue(\"/Utility colors/utility-blue-500\")],/**\n * Default speed.\n */defaultSpeed:30,/**\n * Animation type.\n */animationType:\"aurora-waves\"},\"Light Blue\":{colorPaths:[\"/Utility colors/utility-light-blue-900\",\"/Utility colors/utility-light-blue-800\",\"/Utility colors/utility-light-blue-500\",\"/Utility colors/utility-light-blue-100\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-light-blue-900\"),Tokens.getColorValue(\"/Utility colors/utility-light-blue-800\"),Tokens.getColorValue(\"/Utility colors/utility-light-blue-500\"),Tokens.getColorValue(\"/Utility colors/utility-light-blue-100\")],/**\n * Default speed.\n */defaultSpeed:32,/**\n * Animation type.\n */animationType:\"aurora-waves\"},\"Turquoise\":{colorPaths:[\"/Utility colors/utility-turquoise-900\",\"/Utility colors/utility-turquoise-800\",\"/Utility colors/utility-turquoise-500\",\"/Utility colors/utility-turquoise-200\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-turquoise-900\"),Tokens.getColorValue(\"/Utility colors/utility-turquoise-800\"),Tokens.getColorValue(\"/Utility colors/utility-turquoise-500\"),Tokens.getColorValue(\"/Utility colors/utility-turquoise-200\")],/**\n * Default speed.\n */defaultSpeed:28,/**\n * Animation type.\n */animationType:\"liquid-morph\"},\"Cyan\":{colorPaths:[\"/Utility colors/utility-cyan-900\",\"/Utility colors/utility-cyan-800\",\"/Utility colors/utility-cyan-500\",\"/Utility colors/utility-cyan-200\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-cyan-900\"),Tokens.getColorValue(\"/Utility colors/utility-cyan-800\"),Tokens.getColorValue(\"/Utility colors/utility-cyan-500\"),Tokens.getColorValue(\"/Utility colors/utility-cyan-200\")],/**\n * Default speed.\n */defaultSpeed:26,/**\n * Animation type.\n */animationType:\"aurora-waves\"},\"Green\":{colorPaths:[\"/Utility colors/utility-green-900\",\"/Utility colors/utility-green-800\",\"/Utility colors/utility-green-500\",\"/Utility colors/utility-green-300\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-green-900\"),Tokens.getColorValue(\"/Utility colors/utility-green-800\"),Tokens.getColorValue(\"/Utility colors/utility-green-500\"),Tokens.getColorValue(\"/Utility colors/utility-green-300\")],/**\n * Default speed.\n */defaultSpeed:28,/**\n * Animation type.\n */animationType:\"liquid-morph\"},\"Deep Green\":{colorPaths:[\"/Utility colors/utility-deep-green-900\",\"/Utility colors/utility-deep-green-800\",\"/Utility colors/utility-deep-green-500\",\"/Utility colors/utility-deep-green-300\"],colors:[Tokens.getColorValue(\"/Utility colors/utility-deep-green-900\"),Tokens.getColorValue(\"/Utility colors/utility-deep-green-800\"),Tokens.getColorValue(\"/Utility colors/utility-deep-green-500\"),Tokens.getColorValue(\"/Utility colors/utility-deep-green-300\")],/**\n * Default speed.\n */defaultSpeed:28,/**\n * Animation type.\n */animationType:\"liquid-morph\"},\"Rainbow\":{colorPaths:[],colors:[...getRainbowSignatureColorsResolved()],gradientStopPercents:RAINBOW_SIGNATURE_LINEAR_STOPS_PERCENT,gradientAngleDeg:RAINBOW_SIGNATURE_GRADIENT_ANGLE_DEG,/**\n * Fit the full Figma Hero_gradient-C spectrum in the container at rest (Framer\n * canvas + reduced motion). `backgroundSizePercentAnimated` adds pan room when\n * cosmic-flow runs on the live site.\n */backgroundSizePercent:100,backgroundSizePercentAnimated:105,/**\n * Default speed.\n */defaultSpeed:28,/**\n * Animation type.\n */animationType:\"cosmic-flow\"},\"Lush\":{colorPaths:[\"/Brand colors/rainbow-tree\",\"/Brand colors/rainbow-grass\",\"/Brand colors/rainbow-apple\",\"/Brand colors/rainbow-zest\"],colors:[Tokens.getColorValue(\"/Brand colors/rainbow-tree\"),Tokens.getColorValue(\"/Brand colors/rainbow-grass\"),Tokens.getColorValue(\"/Brand colors/rainbow-apple\"),Tokens.getColorValue(\"/Brand colors/rainbow-zest\")],defaultSpeed:40,animationType:\"cosmic-flow\"},\"Cool\":{colorPaths:[\"/Brand colors/rainbow-brook\",\"/Brand colors/rainbow-pool\",\"/Brand colors/rainbow-tide\",\"/Brand colors/rainbow-dusk\"],colors:[Tokens.getColorValue(\"/Brand colors/rainbow-brook\"),Tokens.getColorValue(\"/Brand colors/rainbow-pool\"),Tokens.getColorValue(\"/Brand colors/rainbow-tide\"),Tokens.getColorValue(\"/Brand colors/rainbow-dusk\")],defaultSpeed:40,animationType:\"cosmic-flow\"},\"Warm\":{colorPaths:[\"/Brand colors/rainbow-mulberry\",\"/Brand colors/rainbow-flare\",\"/Brand colors/rainbow-tangerine\",\"/Brand colors/rainbow-amber\"],colors:[Tokens.getColorValue(\"/Brand colors/rainbow-mulberry\"),Tokens.getColorValue(\"/Brand colors/rainbow-flare\"),Tokens.getColorValue(\"/Brand colors/rainbow-tangerine\"),Tokens.getColorValue(\"/Brand colors/rainbow-amber\")],defaultSpeed:40,animationType:\"cosmic-flow\"},/**\n * Bunq plan gradients — four-stop linear (0% / 33% / 66% / 100%), light → dark per hue.\n * Tokens: `/Brand gradients/plan-{plan}-{1–4}` in `utils/tokens/colors.ts`.\n */\"Free\":{colorPaths:[\"/Brand gradients/plan-free-1\",\"/Brand gradients/plan-free-2\",\"/Brand gradients/plan-free-3\",\"/Brand gradients/plan-free-4\"],invertedColorPaths:[\"/Brand gradients/plan-free-4\",\"/Brand gradients/plan-free-3\",\"/Brand gradients/plan-free-2\",\"/Brand gradients/plan-free-1\"],colors:[Tokens.getColorValue(\"/Brand gradients/plan-free-1\"),Tokens.getColorValue(\"/Brand gradients/plan-free-2\"),Tokens.getColorValue(\"/Brand gradients/plan-free-3\"),Tokens.getColorValue(\"/Brand gradients/plan-free-4\")],gradientStopPercents:[0,33,66,100],defaultSpeed:40,animationType:\"cosmic-flow\"},\"Core\":{colorPaths:[\"/Brand gradients/plan-core-1\",\"/Brand gradients/plan-core-2\",\"/Brand gradients/plan-core-3\",\"/Brand gradients/plan-core-4\"],invertedColorPaths:[\"/Brand gradients/plan-core-4\",\"/Brand gradients/plan-core-3\",\"/Brand gradients/plan-core-2\",\"/Brand gradients/plan-core-1\"],colors:[Tokens.getColorValue(\"/Brand gradients/plan-core-1\"),Tokens.getColorValue(\"/Brand gradients/plan-core-2\"),Tokens.getColorValue(\"/Brand gradients/plan-core-3\"),Tokens.getColorValue(\"/Brand gradients/plan-core-4\")],gradientStopPercents:[0,33,66,100],defaultSpeed:40,animationType:\"cosmic-flow\"},\"Pro\":{colorPaths:[\"/Brand gradients/plan-pro-1\",\"/Brand gradients/plan-pro-2\",\"/Brand gradients/plan-pro-3\",\"/Brand gradients/plan-pro-4\"],invertedColorPaths:[\"/Brand gradients/plan-pro-4\",\"/Brand gradients/plan-pro-3\",\"/Brand gradients/plan-pro-2\",\"/Brand gradients/plan-pro-1\"],colors:[Tokens.getColorValue(\"/Brand gradients/plan-pro-1\"),Tokens.getColorValue(\"/Brand gradients/plan-pro-2\"),Tokens.getColorValue(\"/Brand gradients/plan-pro-3\"),Tokens.getColorValue(\"/Brand gradients/plan-pro-4\")],gradientStopPercents:[0,33,66,100],defaultSpeed:40,animationType:\"cosmic-flow\"},\"Elite\":{colorPaths:[\"/Brand gradients/plan-elite-1\",\"/Brand gradients/plan-elite-2\",\"/Brand gradients/plan-elite-3\",\"/Brand gradients/plan-elite-4\"],invertedColorPaths:[\"/Brand gradients/plan-elite-4\",\"/Brand gradients/plan-elite-3\",\"/Brand gradients/plan-elite-2\",\"/Brand gradients/plan-elite-1\"],colors:[Tokens.getColorValue(\"/Brand gradients/plan-elite-1\"),Tokens.getColorValue(\"/Brand gradients/plan-elite-2\"),Tokens.getColorValue(\"/Brand gradients/plan-elite-3\"),Tokens.getColorValue(\"/Brand gradients/plan-elite-4\")],gradientStopPercents:[0,33,66,100],defaultSpeed:40,animationType:\"cosmic-flow\"},\"tricount Blue\":{colorPaths:[\"/Brand gradients/tricount-blue-1\",\"/Brand gradients/tricount-blue-2\",\"/Brand gradients/tricount-blue-3\",\"/Brand gradients/tricount-blue-4\"],// Brand gradient — no light/dark shade scale exists (tokens only have\n// a `light` value, `dark: null`). Reverse the sequence under the\n// inverted theme so the bright end leads, giving a different visual\n// weight on light surfaces. This is a soft inversion, not a true\n// light-mode variant — a real inverted token set should replace\n// these paths if/when it's added to the design system.\ninvertedColorPaths:[\"/Brand gradients/tricount-blue-4\",\"/Brand gradients/tricount-blue-3\",\"/Brand gradients/tricount-blue-2\",\"/Brand gradients/tricount-blue-1\"],colors:[Tokens.getColorValue(\"/Brand gradients/tricount-blue-1\"),Tokens.getColorValue(\"/Brand gradients/tricount-blue-2\"),Tokens.getColorValue(\"/Brand gradients/tricount-blue-3\"),Tokens.getColorValue(\"/Brand gradients/tricount-blue-4\")],/**\n * Default speed.\n */defaultSpeed:28,/**\n * Animation type.\n */animationType:\"aurora-waves\"}};// Animation style definitions with keyframes and animation functions.\nconst animationStyles={\"cosmic-flow\":{/**\n * Keyframes.\n */keyframes:`\n @keyframes cosmic-flow {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n `,/**\n * Animation.\n */animation:speed=>`cosmic-flow ${speed}s ease-in-out infinite`},\"nebula-pulse\":{/**\n * Keyframes.\n */keyframes:`\n @keyframes nebula-pulse {\n 0% { background-position: 0% 0%; filter: saturate(100%); }\n 33% { background-position: 100% 0%; filter: saturate(150%); }\n 66% { background-position: 100% 100%; filter: saturate(120%); }\n 100% { background-position: 0% 0%; filter: saturate(100%); }\n }\n `,/**\n * Animation.\n */animation:speed=>`nebula-pulse ${speed}s ease infinite`},\"aurora-waves\":{/**\n * Keyframes.\n */keyframes:`\n @keyframes aurora-waves {\n 0% { background-position: 0% 0%; }\n 25% { background-position: 50% 25%; }\n 50% { background-position: 100% 50%; }\n 75% { background-position: 50% 75%; }\n 100% { background-position: 0% 0%; }\n }\n `,/**\n * Animation.\n */animation:speed=>`aurora-waves ${speed}s ease-in-out infinite`},\"liquid-morph\":{/**\n * Keyframes.\n */keyframes:`\n @keyframes liquid-morph {\n 0% { background-position: 0% 50%; }\n 25% { background-position: 25% 25%; }\n 50% { background-position: 100% 50%; }\n 75% { background-position: 75% 75%; }\n 100% { background-position: 0% 50%; }\n }\n `,/**\n * Animation.\n */animation:speed=>`liquid-morph ${speed}s ease-in-out infinite`},\"electric-drift\":{/**\n * Keyframes.\n */keyframes:`\n @keyframes electric-drift {\n 0% { background-position: 0% 0%; filter: hue-rotate(0deg); }\n 50% { background-position: 100% 100%; filter: hue-rotate(15deg); }\n 100% { background-position: 0% 0%; filter: hue-rotate(0deg); }\n }\n `,/**\n * Animation.\n */animation:speed=>`electric-drift ${speed}s linear infinite`}};/**\n * BackgroundAnimatedGradientInternal - Internal forwardRef component.\n *\n * This is the actual component implementation. Using forwardRef allows.\n * Proper ref forwarding for integration with Framer and parent components.\n */const BackgroundAnimatedGradientInternal=/*#__PURE__*/forwardRef(function BackgroundAnimatedGradientInternal(props,ref){const{breakpoint=\"desktop\",preset=\"Rainbow\",overlayDirection=\"top-left-corner\",showOverlay=true,overlayStyle=\"fade\",showGrain=true,grainOpacity=40,theme=\"default\",gradientBrightness=1,gradientSaturate=1,overlayMinOpacity=0,style,...rest}=props;const isStatic=useIsStaticRenderer();const prefersReducedMotion=useReducedMotion();const disableMotion=isStatic||prefersReducedMotion||isFramerStaticMotionContext();// Get gradient and animation data based on preset. Inverted theme uses light (200/100) scale via colorPaths.\nconst{colors,animation,keyframes,gradientStopPercents,backgroundSizePercent,backgroundSizePercentAnimated,gradientAngleDeg,isRainbowPreset}=useMemo(()=>{const resolvedPreset=resolveGradientPresetKey(preset);const presetData=gradientPresets[resolvedPreset]||gradientPresets[\"Rainbow\"];const animData=animationStyles[presetData.animationType]||animationStyles[\"cosmic-flow\"];const resolvedColors=(()=>{if(theme!==\"inverted\")return presetData.colors;if(presetData.invertedColorPaths){return presetData.invertedColorPaths.map(p=>Tokens.getColorValue(p));}if(presetData.colorPaths.length>0){return presetData.colorPaths.map(p=>Tokens.getColorValue(invertUtilityColorPath(p)));}return presetData.colors;})();const stops=presetData.gradientStopPercents?.length===resolvedColors.length?presetData.gradientStopPercents:undefined;return{colors:resolvedColors,animation:animData.animation(presetData.defaultSpeed),keyframes:animData.keyframes,gradientStopPercents:stops,backgroundSizePercent:presetData.backgroundSizePercent,backgroundSizePercentAnimated:presetData.backgroundSizePercentAnimated,gradientAngleDeg:presetData.gradientAngleDeg??135,isRainbowPreset:resolvedPreset===\"Rainbow\"};},[preset,theme]);const numColorStops=colors.length;const gradientColorStops=formatLinearGradientColorStops(colors,gradientStopPercents);const gradient=`linear-gradient(${gradientAngleDeg}deg, ${gradientColorStops})`;const clampedBrightness=Math.max(0,Math.min(2,gradientBrightness));const clampedSaturate=Math.max(0,Math.min(2,gradientSaturate));const gradientFilters=[clampedBrightness!==1?`brightness(${clampedBrightness})`:null,clampedSaturate!==1?`saturate(${clampedSaturate})`:null].filter(Boolean);const gradientBrightnessFilter=gradientFilters.length>0?gradientFilters.join(\" \"):undefined;const restBackgroundSize=backgroundSizePercent??numColorStops*100;const animatedBackgroundSize=backgroundSizePercentAnimated??restBackgroundSize;const resolvedBackgroundSize=disableMotion||!isRainbowPreset?restBackgroundSize:animatedBackgroundSize;const backgroundSize=`${resolvedBackgroundSize}% ${resolvedBackgroundSize}%`;const rainbowBackgroundPosition=isRainbowPreset&&disableMotion?\"50% 50%\":undefined;// Generate overlay based on style, direction, and theme.\n// \"fade\": directional gradient (black/white → transparent). \"full\": uniform semi-transparent layer.\n// Default theme = black-based, inverted = white-based.\nconst overlayGradient=useMemo(()=>{const isInverted=theme===\"inverted\";const rgb=isInverted?Tokens.colorToRgb(Tokens.getColorValue(\"/Utility colors/utility-white\")):Tokens.colorToRgb(Tokens.getColorValue(\"/Utility colors/utility-black\"));if(overlayStyle===\"full\"){return`rgba(${rgb}, 0.5)`;}const start=`rgba(${rgb}, 1)`;const step80=`rgba(${rgb}, ${Tokens.getOpacity(\"overlay\")})`;const step60=`rgba(${rgb}, ${Tokens.getOpacity(\"disabledStrong\")})`;const step40=`rgba(${rgb}, ${Tokens.getOpacity(\"disabled\")})`;const colorEndAlpha=Math.max(0,Math.min(1,overlayMinOpacity));const colorEnd=`rgba(${rgb}, ${colorEndAlpha})`;switch(overlayDirection){case\"top-color-bottom-neutral\":return`linear-gradient(to top, ${start} 0%, ${start} 20%, ${step80} 40%, ${step60} 60%, ${step40} 80%, ${colorEnd} 100%)`;case\"top-left-corner\":return`radial-gradient(ellipse 85% 85% at top left, ${colorEnd} 0%, ${colorEnd} 30%, ${step40} 50%, ${step60} 65%, ${step80} 80%, ${start} 100%)`;case\"top-right-corner\":return`radial-gradient(ellipse 85% 85% at top right, ${colorEnd} 0%, ${colorEnd} 30%, ${step40} 50%, ${step60} 65%, ${step80} 80%, ${start} 100%)`;case\"top-neutral-bottom-color\":default:return`linear-gradient(to bottom, ${start} 0%, ${start} 20%, ${step80} 40%, ${step60} 60%, ${step40} 80%, ${colorEnd} 100%)`;}},[overlayDirection,overlayStyle,theme,overlayMinOpacity]);const containerStyle=useMemo(()=>({position:\"relative\",width:\"100%\",height:\"100%\",minWidth:breakpoint===\"phone\"?0:Tokens.getSpacing(400),minHeight:Tokens.getSpacing(225),overflow:\"hidden\",...style}),[breakpoint,style]);const gradientLayerStyle=useMemo(()=>({position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",background:gradient,backgroundSize,...gradientBrightnessFilter?{filter:gradientBrightnessFilter}:{},...rainbowBackgroundPosition?{backgroundPosition:rainbowBackgroundPosition}:{},...disableMotion?{}:{animation:animation}}),[gradient,backgroundSize,gradientBrightnessFilter,rainbowBackgroundPosition,disableMotion,animation]);const overlayLayerStyle=useMemo(()=>({position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundSize:\"100% 100%\",backgroundRepeat:\"no-repeat\",zIndex:Tokens.getZIndex(\"raised\"),pointerEvents:\"none\",background:overlayGradient}),[overlayGradient]);// Grain layer sits ABOVE the dark/light overlay so the texture stays\n// visible in the masked corners (otherwise the overlay washes it out\n// exactly where we want texture most). `mix-blend-mode: overlay`\n// tints the noise by whatever sits below, so it reads as film grain\n// on both the colorful gradient and the near-black masked area.\nconst grainAlpha=Math.max(0,Math.min(100,grainOpacity))/100;const grainLayerStyle=useMemo(()=>({position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:NOISE_BACKGROUND_IMAGE,backgroundRepeat:\"repeat\",backgroundSize:`${NOISE_TILE_SIZE_PX}px ${NOISE_TILE_SIZE_PX}px`,mixBlendMode:\"overlay\",opacity:grainAlpha,zIndex:Tokens.getZIndex(\"elevated\"),pointerEvents:\"none\"}),[grainAlpha]);return /*#__PURE__*/_jsxs(\"div\",{ref:ref,style:containerStyle,\"aria-hidden\":\"true\",role:\"presentation\",...pickSafeDivProps(rest),children:[disableMotion===false&&/*#__PURE__*/_jsx(\"style\",{dangerouslySetInnerHTML:{__html:keyframes}}),/*#__PURE__*/_jsx(\"div\",{style:gradientLayerStyle}),showOverlay&&/*#__PURE__*/_jsx(\"div\",{style:overlayLayerStyle}),showGrain&&grainAlpha>0&&/*#__PURE__*/_jsx(\"div\",{style:grainLayerStyle})]});});/**\n * BackgroundAnimatedGradient - Wrapper component for Framer compatibility.\n *\n * This wrapper ensures the component works properly with Framer's.\n * component system and Property Controls.\n */const BackgroundAnimatedGradient=/*#__PURE__*/forwardRef(function BackgroundAnimatedGradient(props,ref){const{preset=\"Rainbow\",overlayDirection=\"top-left-corner\",showOverlay=true,overlayStyle=\"fade\",showGrain=true,grainOpacity=40,...rest}=props;return /*#__PURE__*/_jsx(BackgroundAnimatedGradientInternal,{preset:preset,overlayDirection:overlayDirection,showOverlay:showOverlay,overlayStyle:overlayStyle,showGrain:showGrain,grainOpacity:grainOpacity,...rest,ref:ref});});export default BackgroundAnimatedGradient;// Set display name for Framer.\nBackgroundAnimatedGradient.displayName=\"Background Animated Gradient - Effect\";addPropertyControls(BackgroundAnimatedGradient,{// ─── 6. Configuration ──\npreset:{type:ControlType.Enum,title:\"Preset\",options:Object.keys(gradientPresets),optionTitles:Object.keys(gradientPresets),defaultValue:\"Rainbow\",description:\"Gradient preset selection.\"},overlayStyle:{type:ControlType.Enum,title:\"Overlay Style\",options:[\"fade\",\"full\"],optionTitles:[\"Fade\",\"Full\"],displaySegmentedControl:true,defaultValue:\"fade\",description:\"Fade applies a directional gradient veil (use Overlay Direction to pick the side). Full applies a uniform semi-transparent layer that darkens or lightens the entire background evenly.\"},overlayDirection:{type:ControlType.Enum,title:\"Overlay Direction\",options:[\"top-neutral-bottom-color\",\"top-color-bottom-neutral\",\"top-left-corner\",\"top-right-corner\"],optionTitles:[\"Top Neutral, Bottom Color\",\"Top Color, Bottom Neutral\",\"Color from Top Left\",\"Color from Top Right\"],defaultValue:\"top-left-corner\",description:\"Direction or corner origin of the fade overlay. Hidden when Overlay Style is Full.\",hidden:props=>props.overlayStyle===\"full\"},showGrain:{type:ControlType.Boolean,title:\"Film Grain\",enabledTitle:\"Yes\",disabledTitle:\"No\",defaultValue:true,description:\"Overlay a film-grain texture on top of the gradient. Matches the noise used by Gradient Text.\"},grainOpacity:{type:ControlType.Number,title:\"Grain Strength\",defaultValue:40,min:0,max:100,step:1,unit:\"%\",description:\"Strength of the film-grain overlay (0–100%).\",hidden:props=>props.showGrain===false},// ─── 10. System ──\nbreakpoint:{type:ControlType.Enum,title:\"Breakpoint\",options:[\"desktop\",\"tablet\",\"phone\"],optionTitles:[\"Desktop\",\"Tablet\",\"Phone\"],displaySegmentedControl:false,defaultValue:\"desktop\",description:\"Select the breakpoint to match Framer's canvas.\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"gradientPresets\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"BackgroundAnimatedGradientProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","/**\n * Section Background — shared background system for every Section organism.\n *\n * Centralises the four \"Background\" props (`backgroundVariant`,\n * `backgroundPreset`, `backgroundOverlayDirection`, `backgroundShowOverlay`)\n * that previously lived inline in every hero/header section. Use this from\n * any section so they all expose the same Background controls in Framer with\n * identical defaults and visuals.\n *\n * @example\n * ```tsx\n * import {\n * SECTION_BACKGROUND_DEFAULTS,\n * getSectionBackgroundLayer,\n * sectionBackgroundPropertyControls,\n * type SectionBackgroundProps,\n * } from \"../../utils/sectionBackground.ts\";\n *\n * // 1. Extend the section's Props interface.\n * export interface MySectionProps extends SectionBackgroundProps { ... }\n *\n * // 2. Destructure with shared defaults.\n * const {\n * backgroundVariant = SECTION_BACKGROUND_DEFAULTS.backgroundVariant,\n * backgroundPreset = SECTION_BACKGROUND_DEFAULTS.backgroundPreset,\n * backgroundOverlayDirection = SECTION_BACKGROUND_DEFAULTS.backgroundOverlayDirection,\n * backgroundShowOverlay = SECTION_BACKGROUND_DEFAULTS.backgroundShowOverlay,\n * backgroundOverlayStyle = SECTION_BACKGROUND_DEFAULTS.backgroundOverlayStyle,\n * } = props;\n *\n * // 3. Resolve background color + gradient layer.\n * const { sectionBgColor, isGradient, backgroundLayer } = getSectionBackgroundLayer({\n * variant: backgroundVariant,\n * preset: backgroundPreset,\n * overlayDirection: backgroundOverlayDirection,\n * showOverlay: backgroundShowOverlay,\n * overlayStyle: backgroundOverlayStyle,\n * theme,\n * colors,\n * });\n *\n * // 4. Apply to the section + render the layer as the first child.\n * const sectionStyles: CSSProperties = {\n * ...getSectionStyles(breakpoint),\n * backgroundColor: sectionBgColor,\n * position: \"relative\",\n * overflow: \"hidden\",\n * };\n * return (\n *

\n * {backgroundLayer}\n *

\n * {/* existing content *\\/}\n *

\n *

\n * );\n *\n * // 5. Spread shared property controls into addPropertyControls(...).\n * addPropertyControls(MySection, {\n * ...sectionBackgroundPropertyControls(),\n * // ...rest of the section's own controls\n * });\n * ```\n */import*as React from\"react\";import{ControlType}from\"framer\";import{SECTION_GRADIENT_BRIGHTNESS,SECTION_GRADIENT_OVERLAY_MIN_OPACITY,SECTION_GRADIENT_PRESET_DEFAULT,SECTION_GRADIENT_PRESET_OPTIONS,SECTION_GRADIENT_SATURATE}from\"https://framerusercontent.com/modules/8JMJA41hDNrdsRbGYlIy/ehoHa5RsA8viMgmETbGB/sectionGradientPresets.js\";import Tokens from\"https://framerusercontent.com/modules/HjvhO8Re4WnlZSTpJli8/jbCIdsxnmVrJOsDqxSxp/index.js\";import{ensureMontserratLoaded,FONT_FAMILY_MONTSERRAT_STACK}from\"https://framerusercontent.com/modules/XIM5CDb5NplU8oalmwIA/W0gtSCnD36ChfDBrPY2w/fontLoader.js\";import{getSectionBackgroundColor}from\"https://framerusercontent.com/modules/ggRBN6PctbBy9SMbbePI/P0AdJy2leJUHBULN6DZC/themeHelpers.js\";import{FULL_SIZE_STYLE}from\"https://framerusercontent.com/modules/mehW3ipt7NwJNkWUjO0g/TatoE2nXREsJFApGHAt7/layoutStyles.js\";import BackgroundAnimatedGradient from\"https://framerusercontent.com/modules/yMmZh2tc4vrRCWDsxNvE/AlxxxO0BHyWOBKxdxQW3/BackgroundAnimatedGradient.js\";/**\n * Default values for {@link SectionBackgroundProps}. Sections that don't\n * already render a gradient default to `\"primary\"` so existing visuals are\n * preserved — opt into `\"gradient\"` per-section in Framer.\n *\n * Hero / header sections that historically defaulted to `\"gradient\"` should\n * keep their own override at the destructure site (don't change those\n * sections via this default).\n */export const SECTION_BACKGROUND_DEFAULTS={backgroundVariant:\"primary\",backgroundPreset:SECTION_GRADIENT_PRESET_DEFAULT,backgroundOverlayDirection:\"top-color-bottom-neutral\",backgroundShowOverlay:true,backgroundOverlayStyle:\"fade\",useMontserrat:false};/** Default gradient overlay for {@link SectionHero*} organisms (Top Neutral / Bottom Color). */export const SECTION_HERO_OVERLAY_DIRECTION_DEFAULT=\"top-neutral-bottom-color\";/** Values exposed on the Framer Background enum (subset of {@link SectionBackgroundProps}). */export const SECTION_BACKGROUND_VARIANT_OPTIONS=[\"primary\",\"secondary\",\"gradient\"];function getBackgroundVariantControlDefault(override){if(override===\"primary\"||override===\"secondary\"||override===\"gradient\"){return override;}return SECTION_BACKGROUND_DEFAULTS.backgroundVariant;}/**\n * Resolve the section's background color and the optional animated gradient\n * layer based on the four Background props.\n *\n * @returns `sectionBgColor` to assign to the `

`'s `backgroundColor`\n * (`\"transparent\"` when gradient), `isGradient` to gate `position: relative`\n * + content z-index, and `backgroundLayer` ReactNode (renders `null` when\n * not gradient — render it as the first child of the `

`).\n */export function getSectionBackgroundLayer(opts){const isGradient=opts.variant===\"gradient\";const sectionBgColor=isGradient?\"transparent\":getSectionBackgroundColor(opts.variant??\"primary\",opts.colors);if(!isGradient){return{sectionBgColor,isGradient,backgroundLayer:null};}// `zIndex: -1` paints the gradient BELOW in-flow content within the\n// section's isolated stacking context (see `getSectionRootBackgroundStyle`\n// — it sets `isolation: isolate` so the negative z-index can't escape the\n// section). This means consumers do NOT need to add `position: relative`\n// to inner content wrappers — static content stacks above the gradient\n// automatically.\nconst layerStyle={position:\"absolute\",inset:0,zIndex:-1,overflow:\"hidden\",pointerEvents:\"none\"};return{sectionBgColor,isGradient,backgroundLayer:/*#__PURE__*/React.createElement(\"div\",{\"style\":layerStyle,\"aria-hidden\":true},/*#__PURE__*/React.createElement(BackgroundAnimatedGradient,{preset:opts.preset,overlayDirection:opts.overlayDirection,showOverlay:opts.showOverlay,overlayStyle:opts.overlayStyle??\"fade\",theme:opts.theme,gradientBrightness:SECTION_GRADIENT_BRIGHTNESS,gradientSaturate:SECTION_GRADIENT_SATURATE,overlayMinOpacity:SECTION_GRADIENT_OVERLAY_MIN_OPACITY,style:FULL_SIZE_STYLE}))};}/**\n * Style object to spread onto the wrapper around the section's existing\n * content so it stacks above the absolutely-positioned gradient layer.\n * Returns an empty object when the section isn't using the gradient\n * variant, so it's safe to spread unconditionally.\n */export function getSectionContentStackStyle(isGradient){return isGradient?{position:\"relative\",zIndex:Tokens.getZIndex(\"raised\")}:{};}/**\n * Style additions to spread into the `

` element so the gradient\n * layer is positioned and stacked correctly.\n *\n * - `position: relative` — anchors the absolutely-positioned gradient layer.\n * - `isolation: isolate` — creates a new stacking context so the gradient\n * layer's `zIndex: -1` paints BELOW the section's in-flow content but\n * doesn't leak behind sibling sections / parent backgrounds. This is what\n * lets static content (without `position: relative`) render above the\n * gradient automatically — no per-section content wrapper changes needed.\n *\n * - `--cc-font-primary` — when `useMontserrat` is true, sets the CSS custom\n * property that `getTypographyStyles` resolves via `var(--cc-font-primary)`,\n * switching all section text from DM Sans to Montserrat. Montserrat is lazy-\n * loaded from Google Fonts on first use.\n *\n * The gradient layer owns `overflow: hidden`, so we don't impose it on the\n * section root and risk clipping unrelated content.\n */export function getSectionRootBackgroundStyle(opts){const base={position:\"relative\",isolation:\"isolate\"};if(opts?.useMontserrat){ensureMontserratLoaded();return{...base,// CSS custom property override — cascades into all child elements\n// that use var(--cc-font-primary) from getTypographyStyles.\n\"--cc-font-primary\":FONT_FAMILY_MONTSERRAT_STACK};}return base;}/**\n * Shared property controls for the four Background props. Spread the\n * returned object into the section's `addPropertyControls(...)` call so all\n * sections expose the same Background section in Framer.\n *\n * @template P - The section's full Props interface (must extend\n * `SectionBackgroundProps`). Used so the `hidden` predicates type-check\n * against the consuming section.\n *\n * @param overrides - Optional defaults to override per-section. Use\n * `variantDefault: \"secondary\"` for sections whose original (pre-helper)\n * visual was the secondary surface, and `variantDefault: \"gradient\"` for\n * hero/header sections that ship gradient-on by default.\n * `presetDefault` overrides the gradient preset (e.g. \"Rainbow\" for\n * hero/header sections). `overlayDirectionDefault` overrides the gradient\n * overlay direction — hero sections typically want\n * \"top-neutral-bottom-color\" (color anchored at the bottom near the CTA),\n * page-header sections typically want \"top-color-bottom-neutral\" (color\n * anchored at the top, fading down into body content).\n */export function sectionBackgroundPropertyControls(overrides){const isNotGradient=p=>p.backgroundVariant!==\"gradient\";const controls={backgroundVariant:{type:ControlType.Enum,title:\"Background\",options:[...SECTION_BACKGROUND_VARIANT_OPTIONS],optionTitles:[\"Primary\",\"Secondary\",\"Gradient\"],displaySegmentedControl:false,defaultValue:getBackgroundVariantControlDefault(overrides?.variantDefault),description:\"Primary (default surface), Secondary (alt surface), or Gradient. All theme-aware.\"},backgroundPreset:{type:ControlType.Enum,title:\"Gradient Preset\",options:[...SECTION_GRADIENT_PRESET_OPTIONS],optionTitles:[...SECTION_GRADIENT_PRESET_OPTIONS],displaySegmentedControl:false,defaultValue:overrides?.presetDefault??SECTION_BACKGROUND_DEFAULTS.backgroundPreset,description:\"Gradient preset. Used when Background is Gradient.\",hidden:isNotGradient},backgroundOverlayDirection:{type:ControlType.Enum,title:\"Gradient Overlay\",options:[\"top-neutral-bottom-color\",\"top-color-bottom-neutral\",\"top-left-corner\",\"top-right-corner\"],optionTitles:[\"Top Neutral / Bottom Color\",\"Top Color / Bottom Neutral\",\"Color from Top Left\",\"Color from Top Right\"],displaySegmentedControl:false,defaultValue:overrides?.overlayDirectionDefault??SECTION_BACKGROUND_DEFAULTS.backgroundOverlayDirection,description:\"Direction of the fade overlay. Hidden when Overlay Style is Full or Background is not Gradient.\",hidden:p=>p.backgroundVariant!==\"gradient\"||p.backgroundShowOverlay===false||p.backgroundOverlayStyle===\"full\"},backgroundShowOverlay:{type:ControlType.Boolean,title:\"Show Overlay\",enabledTitle:\"Yes\",disabledTitle:\"No\",defaultValue:SECTION_BACKGROUND_DEFAULTS.backgroundShowOverlay,description:\"Toggle the dark/light overlay on top of the gradient. Used when Background is Gradient.\",hidden:isNotGradient},backgroundOverlayStyle:{type:ControlType.Enum,title:\"Overlay Style\",options:[\"fade\",\"full\"],optionTitles:[\"Fade\",\"Full\"],displaySegmentedControl:true,defaultValue:SECTION_BACKGROUND_DEFAULTS.backgroundOverlayStyle,description:\"Fade applies a directional gradient veil (see Gradient Overlay). Full applies a uniform semi-transparent layer that darkens or lightens the entire background evenly.\",hidden:p=>p.backgroundVariant!==\"gradient\"||p.backgroundShowOverlay===false},useMontserrat:{type:ControlType.Boolean,title:\"Use Montserrat\",enabledTitle:\"Yes\",disabledTitle:\"No\",defaultValue:SECTION_BACKGROUND_DEFAULTS.useMontserrat,description:\"Temporary A/B experiment: replaces DM Sans with Montserrat. Defaults to No so production typography is unchanged. Remove after the experiment concludes.\"}};return controls;}\nexport const __FramerMetadata__ = {\"exports\":{\"SectionBackgroundControlVariant\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"SECTION_BACKGROUND_DEFAULTS\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"SectionBackgroundProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"SECTION_HERO_OVERLAY_DIRECTION_DEFAULT\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionRootBackgroundStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionContentStackStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"sectionBackgroundPropertyControls\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"SECTION_BACKGROUND_VARIANT_OPTIONS\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionBackgroundLayer\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","/**\n * Shared navigation/link helpers and video URL utilities for templates and components.\n * Used when handling button/link clicks that may be internal (SPA) or external.\n */import{useCallback,useMemo}from\"react\";import*as Framer from\"framer\";import{RenderTarget}from\"framer\";const framerUseRouter=Framer.useRouter??(()=>null);function normalizePathname(path){const withoutQueryHash=path.split(/[?#]/)[0]||\"/\";const withSlash=withoutQueryHash.startsWith(\"/\")?withoutQueryHash:`/${withoutQueryHash}`;if(withSlash.length>1&&withSlash.endsWith(\"/\")){return withSlash.slice(0,-1);}return withSlash;}function matchDynamicRoutePath(routePath,pathname){const routeSegments=normalizePathname(routePath).split(\"/\").filter(Boolean);const pathSegments=normalizePathname(pathname).split(\"/\").filter(Boolean);if(routeSegments.length!==pathSegments.length){return null;}const pathVariables={};for(let i=0;itypeof p===\"string\"&&p.length>0);for(const candidate of candidates){const normalizedCandidate=normalizePathname(candidate);if(normalizedCandidate===target){return{routeId};}if(!dynamicMatch&&normalizedCandidate.includes(\":\")){const pathVariables=matchDynamicRoutePath(normalizedCandidate,target);if(pathVariables){dynamicMatch={routeId,pathVariables};}}}}return dynamicMatch;}function resolvePathTemplate(path,pathVariables){if(!path.includes(\":\")||!pathVariables){return path;}return path.replace(/:([^/?#]+)/g,(match,variableName)=>{const value=pathVariables[variableName]??pathVariables.slug??pathVariables.Slug??pathVariables[variableName.toLowerCase()];if(value==null||value===\"\"){return match;}return encodeURIComponent(String(value));});}/**\n * Uses Framer's SPA router when available so internal links don't resolve\n * against `framer.com` in the editor preview iframe (which produced Framer's\n * generic 404).\n */function navigateWithFramerSiteRouter(router,safeHref){if(!safeHref.startsWith(\"/\")||safeHref.startsWith(\"//\")){return false;}const hashIndex=safeHref.indexOf(\"#\");const beforeHash=hashIndex>=0?safeHref.slice(0,hashIndex):safeHref;const hashPart=hashIndex>=0?safeHref.slice(hashIndex+1):undefined;const pathOnly=beforeHash.split(\"?\")[0]??beforeHash;const routeMatch=findRouteForPath(pathOnly,router.routes);if(!routeMatch){return false;}router.navigate(routeMatch.routeId,hashPart,routeMatch.pathVariables);return true;}function isFramerCanvasTarget(){try{return RenderTarget.current()===RenderTarget.canvas;}catch{return false;}}/**\n * Normalize a Framer link control value or URL string to a plain URL string.\n * Safe to use for href or when passing to components that expect a string link.\n *\n * Framer may supply `{ url }`, `{ href }`, `{ path }`, or a plain string depending on\n * control / runtime version — handle both object shapes. CMS detail links may include\n * `pathVariables` to resolve `:slug` (or collection-specific keys like `:Documents`).\n */export function getLinkUrl(value){if(value==null)return\"\";if(typeof value===\"string\")return value;const o=value;const candidates=[o.url,o.href,o.path];for(const candidate of candidates){if(typeof candidate===\"string\"&&candidate!==\"\"){return resolvePathTemplate(candidate,o.pathVariables);}}return\"\";}/** First non-empty normalized link among Framer `url` / `link` control values. */export function coalesceLinkValue(...values){for(const value of values){const url=getLinkUrl(value);if(url)return url;}return\"\";}/**\n * URL schemes that are safe to use as href / window.open targets for\n * editor-supplied links. Anything outside this allow-list (most importantly\n * `javascript:`, `data:`, and `vbscript:`) is rejected by `safeUrl()` to\n * prevent XSS / open-redirect vectors when an untrusted CMS or Framer\n * editor field is wired into a navigation control.\n *\n * Same-page (#hash) and same-origin relative paths are allowed without a\n * scheme — those are checked explicitly in `safeUrl()` rather than here.\n */const SAFE_URL_SCHEMES=new Set([\"http:\",\"https:\",\"mailto:\",\"tel:\"]);/**\n * Validate an editor-/CMS-supplied URL against an allow-list of schemes.\n *\n * Returns the original URL when safe (http(s), mailto, tel, hash, or a\n * relative path) and an empty string otherwise. Use this whenever a URL\n * coming from a Framer property control / CMS field is about to flow into\n * an ``, `window.open`, or `window.location.href` — it neutralizes\n * `javascript:` / `data:` payloads at the boundary.\n *\n * Example:\n * const href = safeUrl(getLinkUrl(props.link));\n * if (href) window.open(href, \"_blank\", \"noopener,noreferrer\");\n */export function safeUrl(url){if(!url||typeof url!==\"string\")return\"\";const trimmed=url.trim();if(!trimmed)return\"\";// Same-page anchors and relative paths are always considered safe; they\n// can't carry a hostile scheme and the browser resolves them against the\n// current document origin.\nif(trimmed.startsWith(\"#\")||trimmed.startsWith(\"/\"))return trimmed;// Protocol-relative (\"//host/path\") inherits the page protocol; treat it\n// as http(s) and allow.\nif(trimmed.startsWith(\"//\"))return trimmed;try{const parsed=new URL(trimmed,\"https://example.invalid\");return SAFE_URL_SCHEMES.has(parsed.protocol)?trimmed:\"\";}catch{return\"\";}}/**\n * Handle a link URL: use SPA navigation for same-origin paths when onNavigate is provided,\n * open external URLs in a new tab, otherwise fall back to full page navigation.\n * Templates pass onNavigate from the host (e.g. prototypes's openOrNavigate) for SPA routing.\n *\n * The URL is funneled through `safeUrl()` first so a `javascript:` / `data:`\n * payload from a CMS or Framer link control can never reach `window.open` or\n * `window.location.href`.\n */export function handleLink(url,onNavigate){const safe=safeUrl(url);if(!safe)return;if(safe.startsWith(\"http\")||safe.startsWith(\"//\")){window.open(safe,\"_blank\",\"noopener,noreferrer\");return;}if(onNavigate){onNavigate(safe);return;}window.location.href=safe;}// ─── Form action helpers ─────────────────────────────────────────────────────\n/**\n * Validate a form `action` URL for use as `

…\n *\n * Pair with {@link useSmartLinkProps} (whose returned `target === \"_blank\"`\n * tells the consumer when to apply this) or use directly at any\n * `window.open(url, \"_blank\")` call site.\n */export function getNewTabAriaLabel(label){if(!label)return label;const lower=label.toLowerCase();if(lower.includes(\"(opens in new tab)\")||lower.includes(\"(opens in a new tab)\")){return label;}return`${label}${NEW_TAB_ARIA_SUFFIX}`;}/**\n * React hook that produces a safe set of anchor props for a Framer Link / URL\n * value. Handles URL sanitization, internal vs external `target`/`rel`,\n * SPA-style click handling, and a default style that keeps anchors looking\n * like the surrounding text.\n *\n * The returned `target` field will be `\"_blank\"` when the link opens in a new\n * tab — consumers that own the accessible name MUST then append\n * \"(opens in new tab)\" to their `aria-label` (use {@link getNewTabAriaLabel})\n * to satisfy WCAG 2.2 SC 3.2.5 / general screen-reader expectations.\n *\n * When composing with your own `style`, spread `smart.style` first so\n * `textDecoration` / `color` you set afterward are not overwritten by the\n * hook’s defaults (`textDecoration: \"none\"`, `color: \"inherit\"`).\n *\n * Usage:\n * const smart = useSmartLinkProps(link, openInNewTab, { onClick });\n * const ariaLabel = smart.target === \"_blank\"\n * ? getNewTabAriaLabel(\"Follow us on X\")\n * : \"Follow us on X\";\n * return Label;\n */export function useSmartLinkProps(link,openInNewTab=false,options){const userOnClick=options?.onClick;const onNavigate=options?.onNavigate;const framerRouter=framerUseRouter();const rawUrl=useMemo(()=>getLinkUrl(link),[link]);const href=useMemo(()=>safeUrl(rawUrl),[rawUrl]);const isExternal=useMemo(()=>{if(!href)return false;return/^https?:\\/\\//i.test(href)||href.startsWith(\"//\");},[href]);const target=openInNewTab||isExternal?\"_blank\":undefined;const rel=target===\"_blank\"?\"noopener noreferrer\":undefined;const onClick=useCallback(event=>{if(userOnClick){userOnClick(event);if(event.defaultPrevented)return;}if(!href){event.preventDefault();return;}// Allow the browser to open in a new tab natively when target=_blank\n// — handleLink() also opens in a new window for external links, so\n// we'd otherwise double-trigger.\nif(target===\"_blank\")return;// Modifier-click on internal paths: native navigation would resolve\n// `/...` against the wrong origin in Framer preview; open an absolute\n// URL when the site router exposes a canonical base.\nif(event.metaKey||event.ctrlKey||event.shiftKey||event.altKey||typeof event.button===\"number\"&&event.button!==0){if(framerRouter?.siteCanonicalURL&&href.startsWith(\"/\")&&!href.startsWith(\"//\")){event.preventDefault();try{const abs=new URL(href,framerRouter.siteCanonicalURL).href;window.open(abs,\"_blank\",\"noopener,noreferrer\");}catch{/* fall through */}}return;}event.preventDefault();// Editor canvas: never navigate the preview iframe away from the project.\nif(isFramerCanvasTarget()){return;}// Published site / preview: prefer Framer's client router over\n// `window.location`, which breaks inside the Framer preview iframe.\nif(framerRouter&&!onNavigate&&href.startsWith(\"/\")&&!href.startsWith(\"//\")){if(navigateWithFramerSiteRouter(framerRouter,href)){return;}// Unmatched paths (e.g. dynamic segments): full navigation on the\n// site's canonical origin instead of the preview/editor host.\nif(framerRouter.siteCanonicalURL){try{window.location.assign(new URL(href,framerRouter.siteCanonicalURL).href);return;}catch{/* fall through */}}}handleLink(href,onNavigate);},[href,target,userOnClick,onNavigate,framerRouter]);const style=useMemo(()=>{const base={cursor:href?\"pointer\":\"default\",color:\"inherit\",textDecoration:\"none\"};if(href&&isFramerCanvasTarget()){base.pointerEvents=\"none\";}return base;},[href]);return{href,target,rel,style,onClick};}\nexport const __FramerMetadata__ = {\"exports\":{\"UseSmartLinkPropsOptions\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getLinkUrl\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getNewTabAriaLabel\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"LinkValue\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"safeFormAction\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"SmartLinkProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"handleLink\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"coalesceLinkValue\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"safeUrl\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useSmartLinkProps\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"safeLottieUrl\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"isDirectVideoUrl\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./linkHelpers.map","/**\n * Placeholder constants for component default values.\n *\n * These constants ensure that every component shows representative content\n * when first placed on the canvas, so designers and developers immediately\n * see the component as intended. Placeholder text is length-appropriate and\n * guides content authors (e.g. \"Short headline goes here\", \"One or two sentences...\").\n *\n * **Structural rule:** This module must remain self-contained — it must not be a barrel of\n * `export * from` / `export { … } from` re-exports of other project files. The Framer code-link\n * sync rewrites a re-export-only file to **empty**, which silently breaks every component\n * importing `PLACEHOLDER` / `HINT_*`, plus any component that re-exports from those modules\n * (manifests as a \"module does not provide export named 'default'\" cascade).\n *\n * Usage:\n * ```ts\n * import { PLACEHOLDER, HINT_IMAGE_URL } from \"../../utils/placeholders.ts\";\n * ```\n */// ============================================\n// IMAGES.\n// ============================================\n/** Standard placeholder image (bunq CDN). Use for section images, feature images, cards, and Image atom loading/error state. */const IMAGE=\"https://static.bunq.com/website/images/bunq-placeholder-eva.png\";/** Phone-mockup placeholder image (bunq CDN). Use where a portrait device-mockup visual fits better than the standard people-photo placeholder (e.g. SectionFeatureBreakdown). */const IMAGE_PHONE=\"https://static.bunq.com/website/images/bunq-placeholder-phone.png\";/** Placeholder avatar image (bunq CDN). Use for team members, testimonial authors, profiles. */const AVATAR=\"https://static.bunq.com/website/images/bunq-placeholder-eva.png\";/** Placeholder company logo (bunq CDN). Use for logo carousels / ticker placeholders so designers immediately see a real logo on the canvas. */const LOGO=\"https://static.bunq.com/website/images/logo-forbes.png\";// ============================================\n// VIDEO.\n// ============================================\n/** Standard placeholder video URL (MP4). Use for all direct-video placeholders (sections, VideoPlayer url source). */const VIDEO_URL=\"https://static.bunq.com/website/videos/bunq-about.mp4\";/** Standard placeholder YouTube URL. Use for all YouTube placeholders (sections, VideoPlayer youtube source). */const VIDEO_YOUTUBE=\"https://www.youtube.com/watch?v=bQwcgpND4v4\";// ============================================\n// TEXT - Headings & Labels.\n// ============================================\n/** Generic section heading (short, one line). For cards, grids, and in-section titles — not page mastheads. */const HEADING=\"Short section heading goes here\";/** Page masthead title (short, one line). Use for SectionHeader-style page titles. */const PAGE_HEADING=\"Short page heading goes here\";/** Generic hero heading (short, one line). */const HERO_HEADING=\"Short hero heading goes here\";/** Generic card or item heading (short, one line). Use for headings inside cards, list items, or feature blocks. */const ITEM_HEADING=\"Short item heading goes here\";/** Short tagline or badge above heading (e.g. New, Featured). */const TAGLINE=\"Short tagline or badge (e.g. New, Featured)\";/** Badge label above section heading; keep short. */const BADGE_LABEL=\"Short badge label (e.g. Feature, New)\";/** Generic label for nav links, tabs, buttons when no specific copy is set. */const LABEL_GENERIC=\"Label\";// ============================================\n// TEXT - Descriptions.\n// ============================================\n/** Section description: one or two sentences supporting the headline; length matches intended layout. */const DESCRIPTION=\"Medium-length body copy of one or two sentences goes here to support the main headline. Do not make your text longer than this.\";/** Short description for cards or small blocks; one short sentence. */const DESCRIPTION_SHORT=\"Brief description (one short sentence).\";/** FAQ answer body copy: keep answers brief (no longer than ~5 lines). If more detail is needed, link to the relevant help center article. Used as the default answer in FAQ sections, AccordionFAQGroup and AccordionFAQItem. */const FAQ_ANSWER=\"Medium-length answer to this question goes here. Keep your answer brief and no longer than 5 lines — if there's more to explain, add a link to the relevant help center article.\";/** Footer masthead headline (optional canvas default). Kept on PLACEHOLDER for backwards compatibility with consumers that destructure or reference it. */const FOOTER_HEADING=\"Footer headline\";/** Example footer navigation link label (one short line). NavFooter link defaultValues. Named export for addPropertyControls (Framer may not have `PLACEHOLDER` in scope for defaultValue). */export const FOOTER_NAV_LINK_DEFAULT=\"Short footer link label goes here\";// ============================================\n// TEXT - Buttons.\n// ============================================\n/** Primary CTA button label (e.g. Get started, Sign up). */const PRIMARY_BUTTON=\"Get started\";/** Secondary button label (e.g. Learn more, See details). */const SECONDARY_BUTTON=\"Learn more\";// ============================================\n// TEXT - Alt Text.\n// ============================================\n/** Alt text for section images: leave empty so authors must provide meaningful copy. */const IMAGE_ALT=\"\";/** Alt text for hero images. */const HERO_IMAGE_ALT=\"\";/** Video thumbnail alt text. */const VIDEO_THUMBNAIL_ALT=\"\";/** Blog post image alt text. */const BLOG_IMAGE_ALT=\"\";/** Profile or avatar alt text. */const AVATAR_ALT=\"Name of person (or 'Team member')\";// ============================================\n// Framer control hints (placeholder prop in addPropertyControls).\n// Use these so content authors see length-appropriate guidance in the panel.\n// ============================================\n/** Hint for heading fields: one line. */export const HINT_HEADING=\"e.g. Short headline (one line)\";/** Hint for section/body description: one or two sentences; length matches layout. */export const HINT_DESCRIPTION=\"Medium-length body copy of one or two sentences goes here to support the main headline. Do not make your text longer than this.\";/** Hint for footer menu column titles. */export const HINT_FOOTER_MENU_COLUMN=\"Short menu column title (one line). Do not make your text longer than this placeholder.\";/** Hint for footer nav and legal link labels. */export const HINT_FOOTER_MENU_LINK=\"Short footer link label (one line). Do not make your text longer than this placeholder.\";/** Hint for short badge/tag labels. */export const HINT_BADGE=\"e.g. Feature, New (keep short)\";/** Hint for tab labels. */export const HINT_TAB_LABEL=\"e.g. Overview, Pricing (short label)\";/** Hint for image alt text. */export const HINT_IMAGE_ALT=\"Brief description of image for screen readers\";/** Hint for optional section anchor ID. */export const HINT_SECTION_ID=\"Optional anchor ID (e.g. features)\";/** Hint for primary/secondary button labels. */export const HINT_BUTTON_LABEL=\"e.g. Get started, Learn more\";/** Hint for image URL. */export const HINT_IMAGE_URL=\"e.g. https://example.com/image.jpg\";/** Hint for HTML element id (atoms, cards). */export const HINT_ELEMENT_ID=\"e.g. my-element (lowercase, hyphen-separated)\";/** Hint for Contentsquare / analytics CTA IDs. */export const HINT_CTA_ID=\"e.g. section-hero-cta-primary\";/** Hint for category or filter labels (tabs, badges on cards). */export const HINT_CATEGORY=\"e.g. News (short label)\";/** Hint for accessible name overrides. */export const HINT_ARIA_LABEL=\"e.g. Descriptive label for screen readers\";/** Hint for locale modal language label. */export const HINT_LOCALE_LANGUAGE=\"e.g. English\";/** Hint for locale modal country label. */export const HINT_LOCALE_COUNTRY=\"e.g. Netherlands\";/** Hint for locale path slug. */export const HINT_LOCALE_SLUG=\"e.g. en-nl or /\";/** Hint for input placeholder copy (prop named `placeholder`). */export const HINT_INPUT_PLACEHOLDER=\"e.g. Search…\";/** Hint for short chart or metric labels. */export const HINT_SHORT_LABEL=\"e.g. Short label\";// ============================================\n// EXPORT\n// ============================================\nexport const PLACEHOLDER={// Images.\nIMAGE,IMAGE_PHONE,AVATAR,LOGO,// Video.\nVIDEO_URL,VIDEO_YOUTUBE,// Headings & Labels.\nHEADING,PAGE_HEADING,HERO_HEADING,ITEM_HEADING,TAGLINE,BADGE_LABEL,LABEL_GENERIC,// Descriptions.\nDESCRIPTION,DESCRIPTION_SHORT,FAQ_ANSWER,// Footer (NavFooter; FOOTER_HEADING retained for shared bundle compatibility).\nFOOTER_HEADING,FOOTER_NAV_LINK_DEFAULT,// Buttons.\nPRIMARY_BUTTON,SECONDARY_BUTTON,// Alt text.\nIMAGE_ALT,HERO_IMAGE_ALT,VIDEO_THUMBNAIL_ALT,BLOG_IMAGE_ALT,AVATAR_ALT};\nexport const __FramerMetadata__ = {\"exports\":{\"PLACEHOLDER\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_LOCALE_LANGUAGE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_SECTION_ID\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"FOOTER_NAV_LINK_DEFAULT\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_BADGE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_FOOTER_MENU_LINK\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_HEADING\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_CATEGORY\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_LOCALE_SLUG\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_FOOTER_MENU_COLUMN\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_ELEMENT_ID\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_SHORT_LABEL\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_ARIA_LABEL\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_IMAGE_URL\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_CTA_ID\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_DESCRIPTION\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_INPUT_PLACEHOLDER\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_BUTTON_LABEL\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_IMAGE_ALT\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_TAB_LABEL\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HINT_LOCALE_COUNTRY\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./placeholders.map","/**\n * useSectionAnimation - Hook for reliable one-time scroll-triggered section animations.\n *\n * Uses IntersectionObserver with React state to ensure the animation\n * triggers exactly once and never reverts, even during re-renders, HMR, or layout shifts.\n *\n * This replaces the pattern of `whileInView=\"visible\"` on motion.section elements,\n * which can glitch and cause sections to go blank during fast scrolling or re-renders.\n *\n * @example\n * ```tsx\n * const SectionComponent = forwardRef((props, ref) => {\n * const { sectionRef, animate } = useSectionAnimation(ref);\n *\n * return (\n * \n * ...\n * \n * );\n * });\n * ```\n */import{useRef,useCallback,useState,useEffect}from\"react\";import{isFramerDesignEnvironment,useFramerDesignEnvironment}from\"https://framerusercontent.com/modules/fLnoI6ZB9Br9mhUvxmjW/tWYaqzIJ6baBNTssXrK2/useInViewport.js\";/** Safe `motion.section` initial: visible until mounted so SSR matches hydration. */export function getSectionMotionInitial(animate,options){const{hasMounted=true,isStaticRenderer=false,reducedMotion=false}=options??{};if(isStaticRenderer||reducedMotion||!hasMounted||animate===\"visible\"){return false;}return\"hidden\";}/**\n * Hook for reliable one-time scroll-triggered section animations.\n *\n * @param forwardedRef - The ref from forwardRef to merge with the internal observer ref.\n * @param options - Configuration for the IntersectionObserver.\n * @returns Object with sectionRef, animate state, and hasBeenSeen flag.\n */export function useSectionAnimation(forwardedRef,options){const internalRef=useRef(null);const[element,setElement]=useState(null);const isDesignEnvironment=useFramerDesignEnvironment();const[isInView,setIsInView]=useState(false);const[hasMounted,setHasMounted]=useState(false);const margin=options?.margin??\"-100px\";// Framer SSR renders sections visible; defer \"hidden\" until after hydration.\nuseEffect(()=>{setHasMounted(true);},[]);// Canvas/export previews: reveal after mount so SSR and first client paint stay aligned.\nuseEffect(()=>{if(isFramerDesignEnvironment()){setIsInView(true);}},[]);// Merge the internal ref (for IntersectionObserver) with the forwarded ref (for parent access).\nconst sectionRef=useCallback(node=>{internalRef.current=node;setElement(node);if(typeof forwardedRef===\"function\"){forwardedRef(node);}else if(forwardedRef&&typeof forwardedRef===\"object\"){forwardedRef.current=node;}},[forwardedRef]);useEffect(()=>{// Skip observer in Framer design/preview modes — always visible there.\nif(isDesignEnvironment||element===null){return;}if(typeof window===\"undefined\"||typeof IntersectionObserver===\"undefined\"){setIsInView(true);return;}const observer=new IntersectionObserver(([entry])=>{if(!entry.isIntersecting){return;}setIsInView(true);},{rootMargin:margin,threshold:0});observer.observe(element);return()=>observer.disconnect();},[element,margin,isDesignEnvironment]);return{sectionRef,sectionRefObject:internalRef,animate:!hasMounted||isInView||isDesignEnvironment?\"visible\":\"hidden\",hasBeenSeen:isInView||isDesignEnvironment,hasMounted};}\nexport const __FramerMetadata__ = {\"exports\":{\"useSectionAnimation\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getSectionMotionInitial\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./useSectionAnimation.map","/**\n * motionVariants - Shared Framer Motion variant factories.\n *\n * Centralizes the container/item/image variant patterns used across section\n * organisms, modals, dropdowns, and navbars. Every factory respects\n * `reducedMotion` and pulls timing from Tokens so the entire motion\n * language is adjustable from one file.\n */import Tokens from\"https://framerusercontent.com/modules/HjvhO8Re4WnlZSTpJli8/jbCIdsxnmVrJOsDqxSxp/index.js\";// ── Section Variants ────────────────────────────────────────────────────\n/**\n * Standard section entrance variants (container + item).\n * Used by ~60 section organisms for scroll-triggered staggered reveals.\n */export function createSectionVariants(reducedMotion,options){const stagger=options?.stagger??Tokens.getStagger(\"section\");const yOffset=options?.yOffset??Tokens.getEntranceOffset(\"item\");const itemTransition=options?.transition??(reducedMotion?{duration:0}:Tokens.getFramerTransition(\"standard\"));return{container:{hidden:{opacity:0},visible:{opacity:1,transition:{staggerChildren:reducedMotion?0:stagger}}},item:{hidden:{opacity:0,y:reducedMotion?0:yOffset},visible:{opacity:1,y:0,transition:itemTransition}}};}/**\n * Section entrance variants with an additional image/media scale reveal.\n * The image starts at `Tokens.getEntranceScale(\"media\")` and scales to 1\n * with a slight delay for choreographed flow.\n */export function createSectionVariantsWithImage(reducedMotion,options){const base=createSectionVariants(reducedMotion,options);const scale=Tokens.getEntranceScale(\"media\");const imageDelay=options?.imageDelay??.2;return{...base,image:{hidden:{opacity:0,scale:reducedMotion?1:scale},visible:{opacity:1,scale:1,transition:reducedMotion?{duration:0}:{...Tokens.getFramerTransition(\"standard\"),delay:imageDelay}}}};}// ── Card Grid Variants ──────────────────────────────────────────────────\n/**\n * Card/grid entrance variants with tighter stagger and smaller y-offset.\n * Used by grid-heavy sections (chroma cards, gallery, image grids).\n */export function createCardVariants(reducedMotion,options){return createSectionVariants(reducedMotion,{stagger:options?.stagger??Tokens.getStagger(\"medium\"),yOffset:options?.yOffset??Tokens.getEntranceOffset(\"card\")});}// ── Dropdown Variants ───────────────────────────────────────────────────\n/**\n * Dropdown/popover entrance/exit variants.\n * Slides in from above with a quick transition.\n */export function createDropdownVariants(reducedMotion){const yOffset=Tokens.getEntranceOffset(\"dropdown\");const transition=reducedMotion?{duration:0}:Tokens.getFramerTransition(\"quick\");return{hidden:{opacity:0,y:reducedMotion?0:yOffset},visible:{opacity:1,y:0,transition},exit:{opacity:0,y:reducedMotion?0:yOffset,transition}};}// ── Modal Variants ──────────────────────────────────────────────────────\n/**\n * Modal backdrop + panel variants.\n * Panel uses `Tokens.getEntranceScale(\"modal\")` for a subtle scale-up reveal.\n * When {@link CreateModalVariantsOptions.liquidGlass} is true, the panel omits\n * `scale` so children using `backdrop-filter` (liquid glass) composite correctly.\n */export function createModalVariants(reducedMotion,options){const scale=Tokens.getEntranceScale(\"modal\");const enterTransition=reducedMotion?{duration:0}:Tokens.getFramerTransition(\"moderate\",\"enter\");const exitTransition=reducedMotion?{duration:0}:Tokens.getFramerTransition(\"standard\",\"exit\");const liquidGlass=options?.liquidGlass===true;if(liquidGlass){// ── Liquid-glass entry/exit choreography ────────────────────────\n//\n// Three motion targets, each animating a backdrop-root-safe\n// property so the panel's inner `` keeps sampling\n// the page correctly throughout:\n//\n// 1. `backdrop` → the wrapper element. Animates `backgroundColor`'s\n// alpha (transparent → dim). `background-color` is not a\n// backdrop-root-forming property, so the wrapper stays\n// sampling-transparent for the panel's LG.\n//\n// 2. `backdropBlur` → a sibling-of-panel `

` (or motion.div)\n// that carries the actual `backdrop-filter: blur(...)` and so\n// blurs the page behind the modal. It IS a backdrop root, but\n// only over its own (empty) subtree — the panel is a SIBLING,\n// so its LG is unaffected. Opacity ramps the blur in/out\n// smoothly alongside the dim color.\n//\n// 3. `panel` → stays fully visible on entry (no opacity / scale)\n// so the panel's `` samples the page correctly\n// from frame 1. On exit we only fade out: any temporary\n// backdrop-root side effect is hidden by the fade, while close\n// feels smooth instead of popping away at the end of the\n// backdrop animation.\nconst transparentColor=\"rgba(0, 0, 0, 0)\";const visibleColor=options?.backdropColor??\"rgba(0, 0, 0, 0.5)\";return{backdrop:{hidden:{backgroundColor:transparentColor},visible:{backgroundColor:visibleColor,transition:enterTransition},exit:{backgroundColor:transparentColor,transition:exitTransition}},backdropBlur:{hidden:{opacity:0},visible:{opacity:1,transition:enterTransition},exit:{opacity:0,transition:exitTransition}},panel:{hidden:{opacity:1},visible:{opacity:1},exit:{opacity:0,transition:exitTransition}}};}return{backdrop:{hidden:{opacity:0},visible:{opacity:1,transition:enterTransition},exit:{opacity:0,transition:exitTransition}},panel:{hidden:{opacity:0,scale:reducedMotion?1:scale},visible:{opacity:1,scale:1,transition:enterTransition},exit:{opacity:0,scale:reducedMotion?1:scale,transition:exitTransition}}};}// ── Nav Stagger Variants ────────────────────────────────────────────────\n/**\n * Navbar submenu stagger variants.\n * Uses a slower stagger with small y-offset for menu items.\n */export function createNavStaggerVariants(reducedMotion,options){const stagger=options?.stagger??Tokens.getStagger(\"slow\");const delayChildren=options?.delayChildren??Tokens.getEntranceDelay(\"navChildren\");const yOffset=options?.yOffset??Tokens.getEntranceOffset(\"nav\");return{container:{hidden:{opacity:0},visible:{opacity:1,transition:reducedMotion?{staggerChildren:0,delayChildren:0}:{staggerChildren:stagger,delayChildren}}},item:{hidden:{opacity:0,y:reducedMotion?0:yOffset},visible:{opacity:1,y:0,transition:reducedMotion?{duration:0}:Tokens.getFramerTransition(\"standard\",\"enter\")}}};}\nexport const __FramerMetadata__ = {\"exports\":{\"createDropdownVariants\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"CreateModalVariantsOptions\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"createSectionVariants\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"createModalVariants\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ModalVariants\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"createCardVariants\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"createSectionVariantsWithImage\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"createNavStaggerVariants\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","/**\n * SVG Processing Utility.\n *\n * Utility functions for processing SVG strings, including resizing and color replacement.\n * Used across components to dynamically modify SVG icons.\n *//**\n * Cache for sanitized SVG strings to avoid expensive DOMParser operations.\n * Key: original SVG string (truncated for key generation).\n * Value: sanitized SVG string.\n */const sanitizeCache=new Map;/**\n * Cache for fully processed SVG strings.\n * Key: `${sanitizedSVG}|${size}|${color}|${replaceStroke}`.\n * Value: processed SVG string.\n */const processCache=new Map;/**\n * Maximum cache size to prevent memory leaks.\n * When exceeded, clear oldest entries (simple FIFO strategy).\n */const MAX_CACHE_SIZE=500;/**\n * Process SVG string to replace size and colors.\n *\n * @param svgString - The SVG string to process\n * @param size - The target size for width and height attributes (optional)\n * @param color - The color to replace black/white fills (and optionally strokes) with\n * @param options - Optional configuration\n * @param options.replaceStroke - Whether to also replace stroke colors (default: false)\n * @param options.opticalInset - Expand viewBox by this amount on each side for consistent optical size (e.g. 2)\n * @returns Processed SVG string, or empty string if input is invalid\n *\n * @example\n * ```typescript.\n * Const processed = processSVG(iconSVG, 24, \"#000000\");\n * Const withStroke = processSVG(iconSVG, 24, \"#000000\", { replaceStroke: true });\n * ```\n */function sanitizeSVG(svgString){if(!svgString||!svgString.trim()){return\"\";}// DOMParser is available in Framer/browser contexts. In SSR/static contexts we still want to.\n// Return a best-effort sanitized string (so icons don't disappear entirely).\nif(typeof window===\"undefined\"||typeof DOMParser===\"undefined\"){const raw=svgString.trim();// Best-effort SSR sanitization (string-based).\n// Remove unsafe elements.\n// Strip inline event handlers.\n// Strip navigable hrefs. Icons do not need outbound links; keep only\n// same-document fragment references used by SVG defs.\nreturn raw.replace(/[\\s\\S]*?<\\/script>/gi,\"\").replace(/[\\s\\S]*?<\\/style>/gi,\"\").replace(/[\\s\\S]*?<\\/foreignObject>/gi,\"\").replace(/\\son[a-zA-Z]+\\s*=\\s*(['\"])[\\s\\S]*?\\1/gi,\"\").replace(/\\s(xlink:href|href)\\s*=\\s*(['\"])(?!\\s*#)[\\s\\S]*?\\2/gi,\"\");}// Check cache using full SVG string for correctness (avoids collisions from truncated keys).\nconst cacheKey=svgString;if(sanitizeCache.has(cacheKey)){return sanitizeCache.get(cacheKey);}const parser=new DOMParser;const doc=parser.parseFromString(svgString,\"image/svg+xml\");const svg=doc.querySelector(\"svg\");if(!svg){return\"\";}// Remove unsafe elements.\ndoc.querySelectorAll(\"script, style, foreignObject\").forEach(node=>node.remove());// Strip event handlers and navigable hrefs. Same-document fragments are\n// allowed so gradients, masks, and symbols can still reference local IDs.\n[svg,...Array.from(svg.querySelectorAll(\"*\"))].forEach(el=>{for(const attr of el.getAttributeNames()){if(attr.startsWith(\"on\")){el.removeAttribute(attr);continue;}if(attr===\"href\"||attr===\"xlink:href\"){const val=el.getAttribute(attr)||\"\";if(!/^\\s*#/.test(val)){el.removeAttribute(attr);}}}});const sanitized=svg.outerHTML;// Cache the result (with size limit).\nif(sanitizeCache.size>=MAX_CACHE_SIZE){// Clear oldest entries (first 25% of cache).\nconst entriesToDelete=Math.floor(MAX_CACHE_SIZE*.25);let deleted=0;for(const key of sanitizeCache.keys()){if(deleted>=entriesToDelete)break;sanitizeCache.delete(key);deleted++;}}sanitizeCache.set(cacheKey,sanitized);return sanitized;}export function processSVG(svgString,size,color,options){// Normalize `size` once: callers may pass either a numeric pixel value or a\n// token-string (e.g. `Tokens.getSpacing(24)` → `\"24px\"`). The width/height\n// attribute regex below requires a digit-only value, so parse to number.\nconst sizeNum=typeof size===\"string\"?parseFloat(size):size;const clean=sanitizeSVG(svgString);if(!clean){return\"\";}// Create cache key using the full sanitized SVG string for correctness.\nconst replaceStroke=options?.replaceStroke||false;const opticalInset=options?.opticalInset??0;const processCacheKey=`${clean}|${sizeNum??\"undefined\"}|${color??\"undefined\"}|${replaceStroke}|${opticalInset}`;// Check process cache.\nif(processCache.has(processCacheKey)){return processCache.get(processCacheKey);}let processed=clean;// Replace width and height attributes if size is provided.\nif(sizeNum===undefined||Number.isNaN(sizeNum)){// No size provided, keep original dimensions.\n}else{processed=processed.replace(/(width|height)=[\"']?(\\d+)[\"']?/g,`$1=\"${sizeNum}\"`);}// Apply optical inset: expand viewBox so the graphic has consistent visual padding.\n// e.g. viewBox=\"0 0 24 24\" with inset 2 → \"-2 -2 28 28\" so content appears slightly smaller.\n// This runs on the *sanitized* string (clean). If sanitizeSVG returns a different attribute\n// order or format (e.g. after DOMParser.outerHTML), the regex must still match. We match\n// viewBox/viewbox (case-insensitive) and flexible whitespace so serialization doesn't skip the fix.\nif(opticalInset>0){const insetViewBox=`viewBox=\"-${opticalInset} -${opticalInset} ${24+2*opticalInset} ${24+2*opticalInset}\"`;processed=processed.replace(/viewbox\\s*=\\s*[\"']\\s*0\\s+0\\s+24\\s+24\\s*[\"']/gi,insetViewBox);}// Only replace colors if color is explicitly provided.\nif(color===undefined){// No color provided, keep original colors.\n}else{// Replace fill=\"black\" with dynamic color - handle all variations.\nprocessed=processed.replace(/fill=[\"']black[\"']/g,`fill=\"${color}\"`);processed=processed.replace(/fill=black/g,`fill=\"${color}\"`);// Replace fill=\"white\" with dynamic color - handle all variations.\nprocessed=processed.replace(/fill=[\"']white[\"']/g,`fill=\"${color}\"`);processed=processed.replace(/fill=white/g,`fill=\"${color}\"`);// Replace fill hex forms (e.g. #fff, #ffffff) including style attributes (e.g. style=\"fill: #fff;\").\nprocessed=processed.replace(/\\bfill\\s*=\\s*[\"']\\s*#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\s*[\"']/g,`fill=\"${color}\"`);processed=processed.replace(/\\bstyle\\s*=\\s*[\"'][^\"']*\\bfill\\s*:\\s*#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\s*;?[^\"']*[\"']/g,match=>match.replace(/\\bfill\\s*:\\s*#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b/i,`fill: ${color}`));// Optionally replace stroke colors.\nif(options?.replaceStroke){// Replace stroke=\"black\" with dynamic color - handle all variations.\nprocessed=processed.replace(/stroke=[\"']black[\"']/g,`stroke=\"${color}\"`);processed=processed.replace(/stroke=black/g,`stroke=\"${color}\"`);// Replace stroke=\"white\" with dynamic color - handle all variations.\nprocessed=processed.replace(/stroke=[\"']white[\"']/g,`stroke=\"${color}\"`);processed=processed.replace(/stroke=white/g,`stroke=\"${color}\"`);// Replace stroke hex forms (e.g. #fff, #ffffff) including style attributes (e.g. style=\"stroke: #fff;\").\nprocessed=processed.replace(/\\bstroke\\s*=\\s*[\"']\\s*#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\s*[\"']/g,`stroke=\"${color}\"`);processed=processed.replace(/\\bstyle\\s*=\\s*[\"'][^\"']*\\bstroke\\s*:\\s*#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\s*;?[^\"']*[\"']/g,match=>match.replace(/\\bstroke\\s*:\\s*#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b/i,`stroke: ${color}`));}}// Cache the result (with size limit).\nif(processCache.size>=MAX_CACHE_SIZE){// Clear oldest entries (first 25% of cache).\nconst entriesToDelete=Math.floor(MAX_CACHE_SIZE*.25);let deleted=0;for(const key of processCache.keys()){if(deleted>=entriesToDelete)break;processCache.delete(key);deleted++;}}processCache.set(processCacheKey,processed);return processed;}/**\n * For SVGs using `viewBox=\"0 0 24 24\"`, inset the viewBox on each side so the glyph\n * occupies more of the rendered pixel box (optical zoom). Bunq library icons often sit\n * with extra padding inside the 24×24 artboard; TabsGroup’s built-in default tab SVGs\n * read larger at the same CSS size. Passing raw library SVG through this helper aligns\n * visual weight with sections that rely on `DEFAULT_TAB_ICONS`.\n *\n * No-op if the viewBox is not the standard 24×24 form (e.g. cropped icons).\n *//** Per-edge viewBox inset for bunq icons in `TabsGroup` when matching `DEFAULT_TAB_ICONS` (~1.33× zoom vs raw). */export const ZOOM_STANDARD_24_TAB_STRIP_INSET=3;/**\n * Per-edge viewBox inset for the `link` icon when it sits beside full-bleed social glyphs.\n * The link paths occupy ~12×12 of the 24×24 artboard; cropping to the inner 12×12 matches\n * IconSocialItem / ButtonShare platform icons at the same rendered pixel size.\n */export const SOCIAL_SHARE_LINK_VIEWBOX_INSET=6;/** Zoom a processed `link` SVG so it optically matches full-bleed share icons at the same CSS size. */export function alignSocialShareLinkIcon(svg){return zoomStandard24ViewBox(svg,SOCIAL_SHARE_LINK_VIEWBOX_INSET);}export function zoomStandard24ViewBox(svg,inset=2){if(!svg||inset<=0)return svg;const inner=24-2*inset;if(inner<=0)return svg;return svg.replace(/\\bviewBox=([\"'])\\s*0\\s+0\\s+24\\s+24\\s*\\1/i,`viewBox=$1${inset} ${inset} ${inner} ${inner}$1`);}// ─── Icon bbox sizing (use with getIcon + processSVG) ───────────────────────\n//\n// Kept in this **small** module (not `icons.ts`) so Framer’s bundler does not\n// treat the large icon data file as a mixed chunk and omit `getIcon` exports\n// at runtime. No imports from `icons.ts` here — avoids circular dependencies\n// (`icons.ts` already imports `processSVG` from this file).\n/** Portion of the container edge used by the icon bbox (rest is symmetric padding). */export const ICON_FILL_RATIO_SQUARE=.8;/** Snap a pixel length to the design-system 4px grid (minimum 12px for icons). */export function snapIconSizeToGrid(px){return Math.max(12,Math.round(px/4)*4);}/** Rendered icon width/height for a square control of `sidePx` (e.g. 48 → 40 at ratio 0.8). */export function iconPixelSizeForSquareSide(sidePx){return snapIconSizeToGrid(sidePx*ICON_FILL_RATIO_SQUARE);}/** Padding on one side of the icon inside a square control: `(side − icon) / 2`. */export function squareIconPaddingOneSidePx(sidePx){return(sidePx-iconPixelSizeForSquareSide(sidePx))/2;}/** Same fill rule as square controls for circular badges (e.g. FeaturedIcon). */export function iconPixelSizeForDiscDiameter(diameterPx){return iconPixelSizeForSquareSide(diameterPx);}\nexport const __FramerMetadata__ = {\"exports\":{\"ICON_FILL_RATIO_SQUARE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"processSVG\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"zoomStandard24ViewBox\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"iconPixelSizeForDiscDiameter\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"squareIconPaddingOneSidePx\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"alignSocialShareLinkIcon\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ZOOM_STANDARD_24_TAB_STRIP_INSET\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"SOCIAL_SHARE_LINK_VIEWBOX_INSET\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"iconPixelSizeForSquareSide\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"snapIconSizeToGrid\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./svg.map","/**\n * Centralized SVG Icons.\n *\n * Icon data is generated from @assets/src/icons (icon-black-*.svg) and manual overrides.\n * SVG payloads are split across utils/iconSvgs/chunk_*.ts to stay under Framer's 1 MB file limit.\n * Run: npm run generate:icons (full library) or npm run generate:icons:curated (common subset).\n * For durable optical consistency, prefer normalizing glyphs to use most of the 24×24 artboard in source before regenerating.\n *\n * All icons use \"black\" (or \"white\") fill, replaced at runtime via processSVG.\n * Icons can be used with any color via getIcon(). Same icons are at static.bunq.com/website/icons/*.\n */import{processSVG}from\"https://framerusercontent.com/modules/keR2epPkn1MdvCLnDSBc/z4ga9Xl53MGZI0XlY2dd/svg.js\";import{getColorValue}from\"https://framerusercontent.com/modules/XmP6lddHGwwZ6IkaVx2s/MDeOeDYrTvuAQZdH6kDt/colors.js\";// __GENERATE_ICON_IMPORTS__\nimport{ICON_SVGS_CHUNK_0}from\"https://framerusercontent.com/modules/X9GiU6ge5LH6mzVKkdGt/ohlrcnJEPSv0xwu9YBuv/chunk_0.js\";import{ICON_SVGS_CHUNK_1}from\"https://framerusercontent.com/modules/ceKPmyMzzkm6oUPx6w9g/rU6pITFKaSnzGnC7NObd/chunk_1.js\";/**\n * Validate if a string is a valid CSS color value.\n *\n * @param color - Color string to validate\n * @returns True if color appears to be valid\n */function isValidColor(color){return/^(#[0-9a-fA-F]{3,8}|rgb|rgba|hsl|hsla|currentColor|inherit|transparent)/.test(color);}// __GENERATE_ICONS_DATA__\n/** Full icon library from @assets/src/icons (icon-black-*.svg) plus manual overrides. Do not edit by hand. */export const ICON_NAMES=[\"account\",\"activity\",\"activity-heart\",\"add-widget\",\"air\",\"airplane\",\"airplay\",\"airpods\",\"alarm-clock\",\"alarm-clock-check\",\"alarm-clock-minus\",\"alarm-clock-off\",\"alarm-clock-plus\",\"alert-circle\",\"alert-triangle\",\"align-bottom\",\"align-center\",\"align-horizontal-centre\",\"align-justify\",\"align-left\",\"align-left-1\",\"align-right\",\"align-right-1\",\"align-top\",\"align-vertical-center\",\"anchor\",\"announcement\",\"api\",\"apple\",\"apps\",\"archive\",\"arrow-block-down\",\"arrow-block-left\",\"arrow-block-right\",\"arrow-block-up\",\"arrow-circle-back\",\"arrow-circle-forward\",\"arrow-down\",\"arrow-down-left\",\"arrow-down-off\",\"arrow-down-right\",\"arrow-forward\",\"arrow-left\",\"arrow-narrow-down\",\"arrow-narrow-down-left\",\"arrow-narrow-down-right\",\"arrow-narrow-left\",\"arrow-narrow-right\",\"arrow-narrow-up\",\"arrow-narrow-up-left\",\"arrow-narrow-up-right\",\"arrow-right\",\"arrow-up\",\"arrow-up-left\",\"arrow-up-right\",\"arrows-back\",\"arrows-down\",\"arrows-left\",\"arrows-right\",\"arrows-triangle\",\"arrows-up\",\"asterisk\",\"at-sign\",\"atom\",\"attachment\",\"award\",\"award-medaillion\",\"award-winner\",\"backpack\",\"balance\",\"bank-account\",\"bank-accounts\",\"bank-note\",\"bar-chart\",\"bar-chart-down\",\"bar-chart-simple\",\"bar-chart-simple-down\",\"bar-chart-simple-up\",\"bar-chart-square-down\",\"bar-chart-square-minus\",\"bar-chart-square-plus\",\"bar-chart-square-up\",\"bar-chart-up\",\"bar-line-chart\",\"basket\",\"basketball\",\"battery-charging\",\"battery-empty\",\"battery-full\",\"beach\",\"beach-umbrella\",\"beaker\",\"bell\",\"bell-off\",\"bell-ringing\",\"bluetooth-connect\",\"bluetooth-off\",\"bluetooth-on\",\"bluetooth-signal\",\"book-closed\",\"book-open\",\"bookmark\",\"bookmark-add\",\"bookmark-check\",\"bookmark-minus\",\"bookmark-x\",\"box\",\"brackets\",\"brackets-check\",\"brackets-ellipses\",\"brackets-minus\",\"brackets-plus\",\"brackets-slash\",\"brackets-x\",\"briefcase\",\"briefcase-1\",\"browser\",\"brush\",\"bug\",\"building-apartment\",\"building-bank\",\"building-business\",\"building-business-02\",\"building-house\",\"bus\",\"calculator\",\"calendar\",\"calendar-check\",\"calendar-date\",\"calendar-heart\",\"calendar-minus\",\"calendar-off\",\"calendar-plus\",\"camera\",\"camera-lens\",\"camera-off\",\"camera-plus\",\"car\",\"card-wallet\",\"cards\",\"cash-multiple\",\"cash-register\",\"certificate\",\"chart-breakout-circle\",\"chat-back\",\"check\",\"check-circle\",\"check-heart\",\"check-square\",\"check-verified\",\"checklist\",\"chevron-down\",\"chevron-down-double\",\"chevron-selector-horizontal\",\"chevron-selector-vertical\",\"children\",\"circle\",\"circle-of-trust\",\"clipboard\",\"clipboard-attachment\",\"clipboard-check\",\"clipboard-download\",\"clipboard-minus\",\"clipboard-plus\",\"clipboard-x\",\"clock\",\"clock-check\",\"clock-fast-forward\",\"clock-off\",\"clock-plus\",\"clock-refresh\",\"clock-rewind\",\"clock-snooze\",\"clock-stopwatch\",\"cloud\",\"cloud-lightning\",\"cloud-moon\",\"cloud-off\",\"cloud-raining\",\"cloud-snowing\",\"cloud-sun\",\"clover\",\"code-browser\",\"code-closing\",\"code-opening\",\"codepen\",\"coins\",\"coins-hand\",\"coins-stacked\",\"coins-swap\",\"color-modes\",\"colors\",\"colors-1\",\"columns\",\"command\",\"compass\",\"compass-1\",\"connect\",\"connect-1\",\"connect-off\",\"container\",\"contrast\",\"cookie\",\"copy\",\"copy-file\",\"core\",\"corner-down-left\",\"corner-down-right\",\"corner-left-down\",\"corner-left-up\",\"corner-right-down\",\"corner-right-up\",\"corner-up-left\",\"corner-up-right\",\"couples\",\"cpu-chip\",\"credit-card\",\"credit-card-1\",\"criminal\",\"crop\",\"crosshair\",\"crown\",\"crypto\",\"cryptocurrency\",\"cube\",\"cube-outline\",\"currencies\",\"currency\",\"currency-bitcoin\",\"currency-dollar\",\"currency-ethereum\",\"currency-euro\",\"currency-pound\",\"currency-ruble\",\"currency-rupee\",\"currency-yen\",\"cursor\",\"cursor-box\",\"cursor-click\",\"cvc\",\"data\",\"database\",\"dataflow-01\",\"dataflow-02\",\"dataflow-03\",\"delete\",\"deposit-down\",\"deposit-down-02\",\"deposit-up\",\"desposit-up-02\",\"dials-small\",\"diamond\",\"dice\",\"digital nomad\",\"digital-map\",\"disc\",\"divide\",\"divider\",\"dot\",\"dot-points\",\"dots-grid\",\"dots-horizontal\",\"dots-vertical\",\"download\",\"download-cloud\",\"drop\",\"droplets\",\"dropper\",\"dual-pin\",\"edit\",\"elite\",\"email\",\"equal\",\"equal-not\",\"eraser\",\"euro-off\",\"exclamation\",\"expand\",\"expats\",\"eye\",\"eye-off\",\"face-content\",\"face-frown\",\"face-happy\",\"face-id\",\"face-neutral\",\"face-sad\",\"face-smile\",\"face-wink\",\"facebook\",\"families\",\"fast-backward\",\"fast-forward\",\"feather\",\"figma\",\"file-attachment\",\"file-check\",\"file-code\",\"file-data\",\"file-download\",\"file-heart\",\"file-lock\",\"file-minus\",\"file-off\",\"file-paper\",\"file-paper-data\",\"file-paper-text\",\"file-plus\",\"file-question\",\"file-search\",\"file-shield\",\"file-text\",\"file-x\",\"film\",\"filter-funnel\",\"filter-lines\",\"fingerprint\",\"fingerprint-id\",\"finn\",\"fire-one\",\"fire-three\",\"fire-two\",\"flag\",\"flash\",\"flash-off\",\"flask\",\"flexing-card\",\"flip-backward\",\"flip-forward\",\"folder\",\"folder-check\",\"folder-closed\",\"folder-code\",\"folder-download\",\"folder-lock\",\"folder-minus\",\"folder-plus\",\"folder-question\",\"folder-search\",\"folder-shield\",\"folder-x\",\"foot\",\"football\",\"fork-knife\",\"forward\",\"framer\",\"free\",\"gaming-pad-01\",\"gift\",\"git-branch\",\"git-commit\",\"git-merge\",\"git-pull-request\",\"glasses\",\"globe\",\"globe-slated\",\"google\",\"grid\",\"hand\",\"hard-drive\",\"hash\",\"headphones\",\"heart\",\"heart-hand\",\"heart-leaf\",\"heart-rounded\",\"help-circle\",\"hexagon\",\"hi-five\",\"history\",\"home\",\"home-energy\",\"horizon\",\"horizontal-bar-chart-simple\",\"horizontal-bar-chart-simple-down\",\"horizontal-bar-chart-simple-up\",\"hourglass\",\"hurricane\",\"ideal\",\"ideal-off\",\"image\",\"image-check\",\"image-down\",\"image-left\",\"image-plus\",\"image-right\",\"image-up\",\"image-user\",\"image-user-check\",\"image-user-down\",\"image-user-left\",\"image-user-plus\",\"image-user-right\",\"image-user-up\",\"image-user-x\",\"image-x\",\"inbox\",\"infinity\",\"info-circle\",\"information\",\"instagram\",\"integrations\",\"integrations-1\",\"intersect-circle\",\"ka-ching\",\"key\",\"keyboard\",\"keys\",\"laptop\",\"layer-single\",\"layers-three\",\"layers-two\",\"layout\",\"layout-grid\",\"levels\",\"life-buoy\",\"lightbulb\",\"lightning\",\"limit\",\"line-chart-down\",\"line-chart-down-square\",\"line-chart-square\",\"line-chart-up\",\"line-chart-up-square\",\"link\",\"link-broken\",\"link-external\",\"linkedin\",\"list\",\"loading\",\"local-iban\",\"lock\",\"lock-keyhole-circle\",\"lock-unlocked\",\"locked-account\",\"log-in\",\"log-out\",\"loyalty-card\",\"luggage\",\"luggage-1\",\"magic-wand\",\"mail-envelope\",\"mail-envelope-open\",\"mark\",\"marker-pin-destination\",\"marker-pin-global\",\"marker-pin-goal\",\"marker-pin-location\",\"marker-pin-stop\",\"martini-glass\",\"maximize\",\"medical-circle\",\"medical-cross\",\"menu-hamburger-open\",\"menu-x-close\",\"message-alert-square\",\"message-chat-square\",\"message-check-square\",\"message-dots-square\",\"message-heart-square\",\"message-notification-square\",\"message-plus-square\",\"message-question-square\",\"message-smile-square\",\"message-text-square\",\"message-x-square\",\"microphone\",\"microphone-off\",\"microscope\",\"minimize\",\"minus\",\"modem\",\"money-prize\",\"monitor\",\"monitor-speaker\",\"moon\",\"moon-star\",\"mouse\",\"move\",\"music-note\",\"music-note-plus\",\"navigation-pointer\",\"navigation-pointer-off\",\"notification-box\",\"notification-message\",\"notification-text\",\"number-five\",\"number-four\",\"number-one\",\"number-three\",\"number-two\",\"octagon\",\"outlook\",\"pack\",\"package\",\"package-check\",\"package-minus\",\"package-plus\",\"package-search\",\"package-x\",\"paint\",\"paint-brush\",\"palette\",\"paper-map\",\"paperclip\",\"passcode\",\"passcode-lock\",\"passport\",\"paste\",\"pause\",\"pause-circle\",\"paw\",\"payment-draft\",\"payment-sorter\",\"pen\",\"pen-02\",\"pencil\",\"pentagon\",\"perspective\",\"phishing\",\"phone\",\"phone-call\",\"phone-hang-up\",\"phone-incoming\",\"phone-outgoing\",\"phone-pause\",\"phone-plus\",\"phone-x\",\"pie-chart-budget\",\"pie-chart-group\",\"pie-chart-share\",\"pie-chart-split\",\"piggy-bank\",\"pin\",\"pin-code\",\"pin-empty\",\"pinterest\",\"plan-core\",\"plan-elite\",\"plan-free\",\"plan-pro\",\"play\",\"play-circle\",\"plug\",\"plus\",\"plus-one\",\"podcast\",\"pointer\",\"power\",\"power-circle\",\"presentation-chart\",\"printer\",\"pro\",\"process\",\"puzzle-piece\",\"qr-code\",\"question-mark\",\"receipt\",\"receipt-check\",\"record\",\"recording\",\"reddit\",\"reflect\",\"repeat\",\"reverse-left\",\"reverse-right\",\"rocket\",\"roller-brush\",\"route\",\"rows\",\"rss\",\"ruler\",\"safe\",\"sale\",\"save\",\"scale-down\",\"scale-up\",\"scales\",\"scan\",\"scissors\",\"search\",\"search-ios\",\"search-refraction\",\"security-code\",\"send\",\"server\",\"server-online\",\"settings\",\"share\",\"shield\",\"shield-hack\",\"shield-off\",\"shield-plus\",\"shield-tick\",\"shield-zap\",\"shirt\",\"shopping-bag\",\"shopping-cart\",\"shuffle\",\"signal\",\"simcard\",\"skew\",\"skip-back\",\"skip-forward\",\"slash-circle-stop\",\"slash-divider\",\"sliders\",\"smartphone\",\"snapchat\",\"snowflake\",\"sofa\",\"sos\",\"spacing-height\",\"spacing-width\",\"speaker\",\"speed\",\"speedometer\",\"sports\",\"sports-ball\",\"square\",\"stand\",\"star\",\"star-01\",\"star-05\",\"star-06\",\"star-07\",\"stars-01\",\"stars-02\",\"stars-03\",\"steering-wheel\",\"sticker\",\"stocks\",\"stop\",\"stop-circle\",\"students\",\"subscript\",\"suitcase\",\"sun\",\"sunrise\",\"sunset\",\"switch-horizontal\",\"switch-service\",\"switch-user\",\"switch-vertical\",\"table\",\"tablet\",\"tag\",\"tags\",\"target\",\"taxes\",\"telescope\",\"terminal\",\"terminal-browser\",\"text-input\",\"thermometer-03\",\"thermometer-cold\",\"thermometer-warm\",\"thumbs-down\",\"thumbs-down-1\",\"thumbs-up\",\"ticket\",\"tiktok\",\"time-clock\",\"time-limit\",\"toggle-off\",\"toggle-on\",\"tool\",\"train\",\"tram\",\"transform\",\"translate\",\"trash\",\"tree\",\"trend-down\",\"trend-up\",\"triangle\",\"trophy\",\"truck\",\"tumblr\",\"tv\",\"type\",\"type-crossed\",\"umbrella\",\"upload\",\"upload-cloud\",\"usb-flash-drive\",\"user\",\"user-deceased\",\"user-friends\",\"user-parents\",\"user-plus\",\"users\",\"users-three\",\"users-three-1\",\"users-two\",\"variable\",\"video-recorder\",\"video-recorder-off\",\"virtual-card\",\"virus\",\"voicemail\",\"volleyball\",\"volume-max\",\"volume-min\",\"volume-minus\",\"volume-plus\",\"volume-x\",\"wallet\",\"watch-circle\",\"watch-square\",\"waves\",\"weather\",\"webcam\",\"whatsapp\",\"wifi\",\"wifi-off\",\"wind\",\"world\",\"x\",\"x-circle\",\"youtube\",\"zap\",\"zap-fast\",\"zap-off\",\"zero-fx\",\"zoom-in\",\"zoom-out\"];const ICON_SVGS={...ICON_SVGS_CHUNK_0,...ICON_SVGS_CHUNK_1};// __END_ICON_DATA__\n/**\n * Get processed icon SVG string.\n *\n * **Optical inset (default `6`):** expands the SVG viewBox so the drawn glyph occupies\n * less of the rendered width/height — useful for aligning “full-bleed” paths with icons\n * that have built‑in padding. Many bunq icons only use ~12×12 of the 24×24 artboard; for\n * those, default inset shrinks the mark further. Prefer `{ opticalInset: 0 }` when the icon\n * should visually fill its CSS box (buttons, circular controls, dense rows).\n *\n * **Sizing with `opticalInset: 0`:** pick `size` so the SVG matches the slot — e.g.\n * `ButtonClose` uses the same icon px as **`Button`** icon-only (`20` / `24` / `24`).\n *\n * @param name - Icon name identifier\n * @param size - Target size for width/height. Accepts either a numeric pixel value\n * or a token string (e.g. `Tokens.getSpacing(24)` → `\"24px\"`). If undefined, the\n * icon's original dimensions are preserved.\n * @param color - CSS color value to replace black/white fills with (e.g., \"#000000\", \"currentColor\", \"rgb(0,0,0)\")\n * @param options - Optional processing options (`replaceStroke`, `opticalInset`; omit inset for default 6)\n * @returns Processed SVG string ready for use with dangerouslySetInnerHTML\n */export function getIcon(name,size,color,options){// Normalize `size` once so downstream template literals and `processSVG`\n// both receive a numeric value (the token system returns \"24px\" strings).\nconst sizeNum=typeof size===\"string\"?parseFloat(size):size;const sizeOrFallback=sizeNum&&!Number.isNaN(sizeNum)?sizeNum:24;// Validate color parameter.\nif(!color||typeof color!==\"string\"||color.trim()===\"\"){color=\"currentColor\";}else if(!isValidColor(color)){color=\"currentColor\";}const svgString=ICON_SVGS[name];if(!svgString){// Return a visible fallback.\nreturn``;}// Apply default optical inset so all 24×24 icons render with consistent visual size\n// (full-bleed and padded icons align). Callers can override via options.opticalInset (e.g. 0 to disable).\n// Why processing alone can fail to fix full-bleed icons: processSVG runs the viewBox replace on the\n// *sanitized* string (sanitizeSVG output). In the browser that is DOMParser + svg.outerHTML, which can\n// serialize attributes in a different order/format so the replace regex might not match. Icons that are\n// full-bleed in source (email, link) are therefore also given viewBox=\"-6 -6 36 36\" in ICON_SVGS so\n// they are correct regardless of runtime replace.\nconst mergedOptions={...options,opticalInset:options?.opticalInset??6};return processSVG(svgString,sizeNum,color,mergedOptions);}/**\n * Get raw icon SVG string without processing.\n * Useful when you need the base SVG for custom processing.\n *\n * @param name - Icon name identifier\n * @returns Raw SVG string, or empty string if icon not found\n */export function getIconRaw(name){const svgString=ICON_SVGS[name];if(!svgString){return\"\";}return svgString;}/** Icon options including \"none\" for controls that allow no icon. */export const ICON_OPTIONS_WITH_NONE=[...ICON_NAMES,\"none\"];/** Human-readable option titles for icon controls (e.g. \"check-circle\" → \"Check circle\"). */export const ICON_OPTION_TITLES={...Object.fromEntries(ICON_NAMES.map(name=>[name,name.split(\"-\").map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join(\" \")])),none:\"None\"};/** Options for icon select: Custom at top, then all icon names. Use for unified icon picker with custom SVG fallback. */export const ICON_OPTIONS_WITH_CUSTOM=[\"custom\",...ICON_NAMES];/** Human-readable titles for icon select (Custom + icon names). */export const ICON_OPTION_TITLES_WITH_CUSTOM={custom:\"Custom\",...Object.fromEntries(ICON_NAMES.map(name=>[name,ICON_OPTION_TITLES[name]]))};/** Options: None, Custom, then all icon names. Use with iconSvg when value is \"custom\". */export const ICON_OPTIONS_WITH_NONE_AND_CUSTOM=[\"none\",\"custom\",...ICON_NAMES];/** Human-readable titles for icon select (None + Custom + icon names). */export const ICON_OPTION_TITLES_WITH_NONE_AND_CUSTOM={none:\"None\",custom:\"Custom\",...Object.fromEntries(ICON_NAMES.map(name=>[name,ICON_OPTION_TITLES[name]]))};/**\n * Full list of accent color names for icons and FeaturedIcon.\n * Aligned with design token paths (/Foregrounds/fg-{name}, /Utility colors/utility-{name}-*).\n */export const ICON_ACCENT_COLORS=[\"blue\",\"deep-blue\",\"light-blue\",\"green\",\"deep-green\",\"orange\",\"yellow\",\"deep-yellow\",\"red\",\"purple\",\"deep-purple\",\"fuchsia\",\"hot-pink\",\"indigo\",\"cyan\",\"turquoise\"];/** Human-readable option titles for icon accent color controls (e.g. \"deep-blue\" → \"Deep Blue\"). */export const ICON_ACCENT_OPTION_TITLES=Object.fromEntries(ICON_ACCENT_COLORS.map(c=>[c,c.split(\"-\").map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join(\" \")]));/**\n * Get icon color value from design tokens based on a named color variant.\n * Maps named color variants to foreground token values.\n * Icons should use foreground colors, not text colors.\n *\n * @param colorName - Named color variant (e.g., \"orange\", \"blue\", \"green\", \"purple\").\n * Falls back to fg-primary for unrecognized or undefined values.\n * @returns CSS color value string from design tokens.\n */export function getIconColor(colorName){if(!colorName||!ICON_ACCENT_COLORS.includes(colorName)){return getColorValue(\"/Foregrounds/fg-primary\");}return getColorValue(`/Foregrounds/fg-${colorName}`);}/**\n * Derives plan icon name from plan display name (e.g. \"bunq Free\" -> \"free\").\n * Returns undefined if the name does not match a known plan.\n */export function getPlanIconNameFromPlanName(planName){const n=planName.toLowerCase().replace(/\\s+/g,\" \");if(n.includes(\"free\"))return\"free\";if(n.includes(\"core\"))return\"core\";if(n.includes(\"pro\"))return\"pro\";if(n.includes(\"elite\"))return\"elite\";return undefined;}\nexport const __FramerMetadata__ = {\"exports\":{\"getIcon\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"IconName\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ICON_OPTIONS_WITH_CUSTOM\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"PlanIconName\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ICON_OPTIONS_WITH_NONE_AND_CUSTOM\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ICON_OPTION_TITLES\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ICON_OPTION_TITLES_WITH_NONE_AND_CUSTOM\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ICON_OPTIONS_WITH_NONE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ICON_NAMES\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"IconNameOrNoneOrCustom\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ICON_ACCENT_COLORS\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ICON_ACCENT_OPTION_TITLES\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"IconAccentColor\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ICON_OPTION_TITLES_WITH_CUSTOM\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"IconProcessingOptions\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getIconRaw\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"IconNameOrCustom\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getIconColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getPlanIconNameFromPlanName\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","/**\n * Color Effects — shared helpers for tinted-glass surface treatments.\n *\n * These helpers power liquid-glass surfaces used by Badge, Tab and\n * FeaturedIcon so they share a consistent finish with ``.\n */import{getLiquidGlassBackdropBlurFilter,LIQUID_GLASS_SHARED}from\"https://framerusercontent.com/modules/B31emSmx1NLRWgwsBsT2/ABQDPSGSceq8CIo6a1B6/core.js\";import{DEFAULT_COLORED_GLASS_ACCENT,getLiquidGlassTintBackground,getLiquidGlassVariantChromeShadow,normalizeGlassVariant}from\"https://framerusercontent.com/modules/mehW3ipt7NwJNkWUjO0g/TatoE2nXREsJFApGHAt7/layoutStyles.js\";import{darken,formatRgba,parseRgba}from\"https://framerusercontent.com/modules/8c8KaKUdeszQqGCCT7Zw/cAYkeC6yz3m4yKfSKNf3/colorParsing.js\";export{darken,formatRgba,parseRgba};/**\n * Convert a hex/rgb CSS color to rgba with the given alpha.\n */export function withAlpha(cssColor,alpha){const parts=parseRgba(cssColor);if(!parts)return cssColor;return formatRgba({...parts,a:alpha});}/**\n * Wrap a flat color in a subtle top-darker → bottom-accent linear gradient.\n */export function toAccentGradient(cssColor){const parts=parseRgba(cssColor);if(!parts)return cssColor;const darker=darken(cssColor,.11);return`linear-gradient(180deg, ${darker} 0%, ${formatRgba(parts)} 100%)`;}/**\n * Alpha applied to accent/semantic fills before {@link toAccentGradient} when using\n * CSS-only liquid glass (Badge, Tab, FeaturedIcon, InfoBox). Lower = more see-through;\n * paired with shared frost blur (`LIQUID_GLASS_SHARED` in tokens/core.ts).\n */export const LIQUID_GLASS_FILL_ALPHA=.46;/**\n * CSS finishing layer for tinted glass (Badge / Tab / small surfaces) — mirrors\n * `` fill + frost + inset chrome without the SVG displacement map.\n */export function getLiquidGlassFinish(options){const surface=options.surface??\"surface\";const selected=options.selected??false;const accent=options.accentColor??(options.variant===\"colored\"?DEFAULT_COLORED_GLASS_ACCENT:undefined);const backdrop=getLiquidGlassBackdropBlurFilter(LIQUID_GLASS_SHARED.frostBlurPx,LIQUID_GLASS_SHARED.saturation);const tintLayers=getLiquidGlassTintBackground(options.variant,surface,selected,accent);const resolvedVariant=normalizeGlassVariant(options.variant);const background=resolvedVariant===\"colored\"&&options.baseFill?`${tintLayers}, ${options.baseFill}`:tintLayers;return{backdropFilter:backdrop,WebkitBackdropFilter:backdrop,background,boxShadow:getLiquidGlassVariantChromeShadow(options.variant,surface,selected),border:surface===\"surface\"?\"none\":\"none\"};}/**\n * Back-compat helper: old `\"light\"` meant white sheen on dark UI (now\n * `\"default-regular\"` — the gray-tint family), `\"dark\"` meant reflection on\n * light UI (now `\"default-light\"` — the white-tint family). Fills are\n * unchanged.\n */export function liquidGlassLegacyHighlightToVariant(highlight){return highlight===\"light\"?\"default-regular\":\"default-light\";}\nexport const __FramerMetadata__ = {\"exports\":{\"formatRgba\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"LIQUID_GLASS_FILL_ALPHA\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"LiquidGlassTone\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withAlpha\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"parseRgba\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"liquidGlassLegacyHighlightToVariant\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getLiquidGlassFinish\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"toAccentGradient\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"darken\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"RgbaParts\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"LiquidGlassFinishOptions\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","/**\n * Shared animation timing constants for code-components.\n * Use design tokens (Tokens.getAnimationDuration, Tokens.getFramerTransition) where\n * a token exists (quick, standard, extended). Use these constants for component-\n * specific timings that have no token (e.g. hamburger menu, spinners).\n *//** Duration for instant / no-motion transitions (e.g. when prefers-reduced-motion). */export const NO_MOTION_DURATION=0;/** Navbar hamburger icon: delay before line move. */export const HAMBURGER_DELAY_LINE=.08;/** Navbar hamburger icon: delay before rotate. */export const HAMBURGER_DELAY_ROTATE=.24;/** Navbar hamburger icon: delay before center line fade-in. */export const HAMBURGER_DELAY_CENTER_FADE=.28;/** Navbar hamburger icon: duration for line translate. */export const HAMBURGER_DURATION_LINE=.18;/** Navbar hamburger icon: duration for center line opacity. */export const HAMBURGER_DURATION_OPACITY_OUT=.08;/** Spinner rotation: one full rotation duration (loading states). */export const SPINNER_DURATION=.8;/** Spinner rotation: longer variant (e.g. full-page loading). */export const SPINNER_DURATION_FULL=1;/**\n * `@keyframes` name for the Button loading spinner. Unique id avoids clashes\n * with other injected keyframe rules on the page.\n */export const BUTTON_SPIN_KEYFRAMES_NAME=\"ds-button-spinner-rotate\";/**\n * CSS rule defining {@link BUTTON_SPIN_KEYFRAMES_NAME}. Injected once per\n * loading Button when motion is allowed.\n */export const BUTTON_SPIN_KEYFRAMES_RULE=`@keyframes ${BUTTON_SPIN_KEYFRAMES_NAME} {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}`;\nexport const __FramerMetadata__ = {\"exports\":{\"HAMBURGER_DELAY_ROTATE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"SPINNER_DURATION\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"SPINNER_DURATION_FULL\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"NO_MOTION_DURATION\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"BUTTON_SPIN_KEYFRAMES_RULE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HAMBURGER_DELAY_LINE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"BUTTON_SPIN_KEYFRAMES_NAME\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HAMBURGER_DELAY_CENTER_FADE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HAMBURGER_DURATION_LINE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"HAMBURGER_DURATION_OPACITY_OUT\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./animationConstants.map","/**\n * Button Style Utilities.\n *\n * Centralized functions for calculating button styles based on variant, theme, and state.\n * Extracted from Button component for reusability and maintainability.\n */import Tokens from\"https://framerusercontent.com/modules/HjvhO8Re4WnlZSTpJli8/jbCIdsxnmVrJOsDqxSxp/index.js\";import{getLiquidGlassVariantFill}from\"https://framerusercontent.com/modules/mehW3ipt7NwJNkWUjO0g/TatoE2nXREsJFApGHAt7/layoutStyles.js\";/**\n * Brand Rainbow Signature gradient stops per primary variant.\n * Mirrors the Lush/Cool/Warm presets in `BackgroundAnimatedGradient`\n * so a `primary-cool` button matches a `Cool` section background, etc.\n */const PRIMARY_GRADIENT_COLOR_PATHS={\"primary-lush\":[\"/Brand colors/rainbow-tree\",\"/Brand colors/rainbow-grass\",\"/Brand colors/rainbow-apple\",\"/Brand colors/rainbow-zest\"],\"primary-cool\":[\"/Brand colors/rainbow-brook\",\"/Brand colors/rainbow-pool\",\"/Brand colors/rainbow-tide\",\"/Brand colors/rainbow-dusk\"],\"primary-warm\":[\"/Brand colors/rainbow-mulberry\",\"/Brand colors/rainbow-flare\",\"/Brand colors/rainbow-tangerine\",\"/Brand colors/rainbow-amber\"]};const PRIMARY_GRADIENT_ACCENT_MIX=.35;function mixRgbColors(color,accentColor,accentMix=PRIMARY_GRADIENT_ACCENT_MIX){const colorMatch=color.match(/^rgb\$(\\d+),\\s*(\\d+),\\s*(\\d+)\$$/);const accentMatch=accentColor.match(/^rgb\$(\\d+),\\s*(\\d+),\\s*(\\d+)\$$/);if(!colorMatch||!accentMatch){return color;}const colorChannels=colorMatch.slice(1).map(Number);const accentChannels=accentMatch.slice(1).map(Number);const mixedChannels=colorChannels.map((channel,index)=>Math.round(channel*(1-accentMix)+accentChannels[index]*accentMix));return`rgb(${mixedChannels.join(\", \")})`;}/** Resolve the configured brand-rainbow stops into a static `linear-gradient(135deg, …)` CSS value. */function getPrimaryRainbowGradient(variant){const accentColor=getPrimaryGlassAccentColor(variant);const stops=PRIMARY_GRADIENT_COLOR_PATHS[variant].map(path=>mixRgbColors(Tokens.getColorValue(path),accentColor)).join(\", \");return`linear-gradient(135deg, ${stops})`;}/** Mid-spectrum brand stop per primary variant — drives colored-button glass tint. */export function getPrimaryGlassAccentColor(variant){const accentPath=variant===\"primary-warm\"?\"/Brand colors/rainbow-tangerine\":variant===\"primary-lush\"?\"/Brand colors/rainbow-grass\":\"/Brand colors/rainbow-pool\";return Tokens.getColorValue(accentPath);}/**\n * Stacks Figma “colored button glass” overlay on top of the Brand Rainbow Signature gradient.\n */export function getPrimaryRainbowGradientWithColoredGlass(variant){const base=getPrimaryRainbowGradient(variant);const glass=getLiquidGlassVariantFill(\"colored\",\"button\",getPrimaryGlassAccentColor(variant));return`${glass}, ${base}`;}/**\n * Liquid-glass stack for ghost buttons on default (dark) theme.\n * Uses the `\"dark\"` liquid-glass button fill — a subtle highlight over\n * `baseFill`. The `\"light\"` button fill stacks heavy white translucency and\n * was washing ghost CTAs to near-white while labels stay white, destroying contrast.\n */export function getGhostGlassButtonBackground(baseFill){const glass=getLiquidGlassVariantFill(\"dark\",\"button\",undefined);return`${glass}, ${baseFill}`;}/**\n * Calculate background color for button based on variant, theme, and disabled state.\n * Background color does not change on hover/pressed - brightness filter is used instead.\n *\n * @param variant - Button variant style\n * @param theme - Button theme (default or inverted)\n * @param isDisabled - Whether the button is disabled\n * @returns CSS background color value\n */export function getButtonBackgroundColor(variant,theme,isDisabled){if(isDisabled){return Tokens.getColorValue(\"/Backgrounds/bg-disabled\");}else{// Continue with variant-based color calculation.\n}switch(variant){case\"solid\":return theme===\"default\"?Tokens.getColorValue(\"/Backgrounds/bg-inverted-primary\"):Tokens.getColorValue(\"/Backgrounds/bg-primary\");case\"primary\":// Legacy \"primary\" keeps the bunq brand solid (blue) for back-compat.\nreturn Tokens.getColorValue(\"/Backgrounds/bg-brand-bunq-solid\");case\"primary-warm\":case\"primary-lush\":case\"primary-cool\":// Brand Rainbow Signature gradient stops, theme-independent.\nreturn getPrimaryRainbowGradient(variant);case\"ghost\":return theme===\"default\"?Tokens.getColorValue(\"/Backgrounds/bg-quaternary-glass\"):Tokens.getColorValue(\"/Backgrounds/bg-inverted-quaternary\");case\"outline\":case\"link\":return\"transparent\";default:return\"transparent\";}}/**\n * Calculate border style for button based on variant, theme, and disabled state.\n * Borders do not change on hover, pressed, or focus - only the outline (focus ring) appears on focus.\n *\n * @param variant - Button variant style\n * @param theme - Button theme (default or inverted)\n * @param isDisabled - Whether the button is disabled\n * @returns CSS border value\n */export function getButtonBorderStyle(variant,theme,isDisabled){if(isDisabled){return`1px solid ${Tokens.getColorValue(\"/Borders/border-disabled\")}`;}else{// Continue with variant-based border calculation.\n}switch(variant){case\"solid\":case\"primary\":case\"primary-warm\":case\"primary-lush\":case\"primary-cool\":// Match outline's 1px border so solid and outline share the same\n// border-box dimensions (height + padding) when paired in hero CTAs.\nreturn\"1px solid transparent\";case\"outline\":return theme===\"default\"?`1px solid ${Tokens.getColorValue(\"/Borders/border-inverted-primary\")}`:`1px solid ${Tokens.getColorValue(\"/Borders/border-primary\")}`;case\"ghost\":case\"link\":return\"none\";default:return\"none\";}}/**\n * Calculate text color for button based on variant, theme, and disabled state.\n *\n * @param variant - Button variant style\n * @param theme - Button theme (default or inverted)\n * @param isDisabled - Whether the button is disabled\n * @returns CSS color value\n */export function getButtonTextColor(variant,theme,isDisabled){if(isDisabled){return Tokens.getColorValue(\"/Text/text-disabled\");}else{// Continue with variant-based text color calculation.\n}switch(variant){case\"solid\":return theme===\"default\"?Tokens.getColorValue(\"/Text/text-inverted-primary\"):Tokens.getColorValue(\"/Text/text-primary\");case\"primary\":case\"primary-warm\":case\"primary-lush\":case\"primary-cool\":// Primary variant ignores theme - always uses text-primary (white)\nreturn Tokens.getColorValue(\"/Text/text-primary\");case\"outline\":return theme===\"default\"?Tokens.getColorValue(\"/Text/text-primary\"):Tokens.getColorValue(\"/Text/text-inverted-primary\");case\"ghost\":return theme===\"default\"?Tokens.getColorValue(\"/Text/text-primary\"):Tokens.getColorValue(\"/Text/text-inverted-primary\");case\"link\":return theme===\"default\"?Tokens.getColorValue(\"/Text/text-primary\"):Tokens.getColorValue(\"/Text/text-inverted-primary\");default:return Tokens.getColorValue(\"/Text/text-primary\");}}/**\n * Calculate icon color for button based on variant, theme, and disabled state.\n * Icons should use foreground tokens (not text tokens).\n *\n * @param variant - Button variant style\n * @param theme - Button theme (default or inverted)\n * @param isDisabled - Whether the button is disabled\n * @returns CSS color value\n */export function getButtonIconColor(variant,theme,isDisabled){if(isDisabled){return Tokens.getColorValue(\"/Foregrounds/fg-disabled\");}else{// Continue with variant-based icon color calculation.\n}switch(variant){case\"solid\":return theme===\"default\"?Tokens.getColorValue(\"/Foregrounds/fg-inverted-primary\"):Tokens.getColorValue(\"/Foregrounds/fg-primary\");case\"primary\":case\"primary-warm\":case\"primary-lush\":case\"primary-cool\":// Primary variant ignores theme - always uses fg-primary (white)\nreturn Tokens.getColorValue(\"/Foregrounds/fg-primary\");case\"outline\":return theme===\"default\"?Tokens.getColorValue(\"/Foregrounds/fg-primary\"):Tokens.getColorValue(\"/Foregrounds/fg-inverted-primary\");case\"ghost\":return theme===\"default\"?Tokens.getColorValue(\"/Foregrounds/fg-primary\"):Tokens.getColorValue(\"/Foregrounds/fg-inverted-primary\");case\"link\":return theme===\"default\"?Tokens.getColorValue(\"/Foregrounds/fg-primary\"):Tokens.getColorValue(\"/Foregrounds/fg-inverted-primary\");default:return Tokens.getColorValue(\"/Foregrounds/fg-primary\");}}\nexport const __FramerMetadata__ = {\"exports\":{\"getButtonBackgroundColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getButtonTextColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getPrimaryGlassAccentColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getButtonIconColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getGhostGlassButtonBackground\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ButtonTheme\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ButtonVariant\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getButtonBorderStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getPrimaryRainbowGradientWithColoredGlass\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","/**\n * UseInteractiveStates - Hook for managing interactive component states.\n *\n * Provides state management and event handlers for hover, press, and focus states.\n * Respects disabled state to prevent interactions when component is disabled.\n *\n * The optional `options` argument turns on cohesive motion treatment that should\n * feel consistent across the design system (hover/focus filter and outline fade,\n * a subtle press scale). Both options are reduced-motion aware — when the user\n * has `prefers-reduced-motion: reduce` on, transitions resolve to `\"none\"` and\n * the press scale collapses to `scale(1)`.\n */import{useState,useCallback,useMemo}from\"react\";import Tokens,{useReducedMotion}from\"https://framerusercontent.com/modules/HjvhO8Re4WnlZSTpJli8/jbCIdsxnmVrJOsDqxSxp/index.js\";import{shouldShowFocusRing}from\"https://framerusercontent.com/modules/mehW3ipt7NwJNkWUjO0g/TatoE2nXREsJFApGHAt7/layoutStyles.js\";/**\n * Hook for managing interactive component states (hover, press, focus).\n *\n * @param disabled - Whether the component is disabled (prevents interactions)\n * @param options - Optional motion behaviour (transitions / press scale)\n */export function useInteractiveStates(disabled=false,options){const[isHovered,setIsHovered]=useState(false);const[isPressed,setIsPressed]=useState(false);const[isFocused,setIsFocused]=useState(false);const reducedMotion=useReducedMotion();const transitionsEnabled=options?.transitions===true;const pressScaleEnabled=options?.pressScale===true;const handleMouseEnter=useCallback(()=>{if(!disabled){setIsHovered(true);}},[disabled]);const handleMouseLeave=useCallback(()=>{setIsHovered(false);setIsPressed(false);},[]);const handleMouseDown=useCallback(()=>{if(!disabled){setIsPressed(true);}},[disabled]);const handleMouseUp=useCallback(()=>{setIsPressed(false);},[]);const handleFocus=useCallback(event=>{if(!disabled){setIsFocused(shouldShowFocusRing(event.currentTarget));}},[disabled]);const handleBlur=useCallback(()=>{setIsFocused(false);},[]);const isInteractive=useMemo(()=>!disabled,[disabled]);const brightnessFilter=useMemo(()=>Tokens.getBrightnessFilter(disabled,isHovered,isPressed),[disabled,isHovered,isPressed]);const cursorStyle=useMemo(()=>isInteractive?\"pointer\":\"not-allowed\",[isInteractive]);const focusOutline=useMemo(()=>{if(isFocused){const focusColor=Tokens.getColorValue(\"/Borders/border-brand-bunq\");return`${Tokens.getFocusOutlineWidth()} solid ${focusColor}`;}return\"none\";},[isFocused]);const focusOutlineOffset=Tokens.getSpacing(2);const transition=useMemo(()=>{if(!transitionsEnabled||reducedMotion)return\"\";return[Tokens.getTransition(\"filter\",\"quick\"),Tokens.getTransition(\"outline-color\",\"quick\"),Tokens.getTransition(\"outline-offset\",\"quick\"),Tokens.getTransition(\"transform\",\"quick\")].join(\", \");},[transitionsEnabled,reducedMotion]);const pressTransform=useMemo(()=>{if(!transitionsEnabled||reducedMotion)return\"scale(1)\";if(!pressScaleEnabled)return\"scale(1)\";return isPressed?\"scale(0.98)\":\"scale(1)\";},[transitionsEnabled,reducedMotion,pressScaleEnabled,isPressed]);const styles=useMemo(()=>{const base={filter:brightnessFilter,cursor:cursorStyle,outline:focusOutline,outlineOffset:focusOutlineOffset};if(!transitionsEnabled)return base;return{...base,...transition?{transition}:{},transform:pressTransform};},[brightnessFilter,cursorStyle,focusOutline,focusOutlineOffset,transitionsEnabled,transition,pressTransform]);return{isHovered,isPressed,isFocused,isInteractive,brightnessFilter,cursorStyle,focusOutline,focusOutlineOffset,styles,transition,pressTransform,handlers:{onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,onMouseDown:handleMouseDown,onMouseUp:handleMouseUp,onFocus:handleFocus,onBlur:handleBlur}};}\nexport const __FramerMetadata__ = {\"exports\":{\"UseInteractiveStatesReturn\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"UseInteractiveStatesOptions\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useInteractiveStates\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","/**\n * Environment Utilities.\n *\n * Provides standardized environment detection utilities for development/production checks.\n * Handles browser and Node.js environments safely.\n *//**\n * Check if the code is running in development mode.\n *\n * Safely checks process.env.NODE_ENV in both browser and Node.js environments.\n * Returns true if NODE_ENV is not \"production\" (i.e., development, test, or undefined).\n *\n * @returns True if running in development mode, false otherwise.\n */export function isDevelopment(){if(typeof process===\"undefined\"){return false;}return process.env?.NODE_ENV!==\"production\";}/**\n * Check if the code is running in production mode.\n *\n * @returns True if running in production mode, false otherwise.\n */export function isProduction(){return!isDevelopment();}\nexport const __FramerMetadata__ = {\"exports\":{\"isProduction\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"isDevelopment\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./env.map","/**\n * Button - Button component with multiple variants and states.\n *\n * Button component supporting solid, ghost, outline, link, legacy Primary (brand solid blue),\n * and primary-warm / primary-lush / primary-cool rainbow variants. The three rainbow variants\n * render Brand Rainbow Signature gradients (Warm, Lush, Cool) and ignore `theme`; legacy Primary\n * also ignores `theme` for label/icon colors per `buttonStyles.ts`.\n * Includes support for different sizes, states (default, disabled, loading),\n * and icon placement (leading, trailing, icon-only).\n *\n * Typography: size maps to `/Button XL` (large), `/Button LG` (medium), `/Button SM` (small).\n * Font sizes scale by breakpoint (desktop base; tablet interpolated; phone uses the small-screen preset).\n *\n * Size dimensions:\n * Small — 44 × 44px minimum touch target, 16px H padding, 8px V padding; icon-only glyph via {@link iconPixelSizeForSquareSide} (`svg.ts`)\n * Medium — 48 × 48px (icon-only), 48px height (text), 24px H padding, 12px V padding\n * Large — 56 × 56px (icon-only), 56px height (text), 32px H padding, 16px V padding\n *\n * Icon-only padding = (height − iconSize) / 2, so content fits exactly inside border-box.\n */// 1. React and React types\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{forwardRef,useMemo,useEffect}from\"react\";// 2. Framer Motion (not applicable)\n// 3. Framer API\nimport{addPropertyControls,ControlType}from\"framer\";import{FRAMER_BREAKPOINT_DESCRIPTION}from\"https://framerusercontent.com/modules/TvAAtdjNtwUg3Y1lriXj/Wh3HNug8gnAeRVrciJOW/propertyControlCopy.js\";// 4. Design system\nimport{Tokens,getLiquidGlassBackdropBlurFilter,useReducedMotion,LIQUID_GLASS_SHARED}from\"https://framerusercontent.com/modules/HjvhO8Re4WnlZSTpJli8/jbCIdsxnmVrJOsDqxSxp/index.js\";import{SPINNER_DURATION_FULL,BUTTON_SPIN_KEYFRAMES_NAME,BUTTON_SPIN_KEYFRAMES_RULE}from\"https://framerusercontent.com/modules/4zU46N6zmk4kAwI6633E/rs5qQjj5gsXnmwMYotSf/animationConstants.js\";import{getButtonBackgroundColor,getButtonBorderStyle,getButtonTextColor,getButtonIconColor,getGhostGlassButtonBackground,getPrimaryRainbowGradientWithColoredGlass}from\"https://framerusercontent.com/modules/2zwpGmOdSSxYIu3BgaaO/xOLU66f31yrw6qn4Tzs9/buttonStyles.js\";import{getFocusOutlineStyle}from\"https://framerusercontent.com/modules/mehW3ipt7NwJNkWUjO0g/TatoE2nXREsJFApGHAt7/layoutStyles.js\";// 5. Local\nimport{useInteractiveStates}from\"https://framerusercontent.com/modules/U2JBkUXibY2YYWsHMAJo/3tlMH4hg7ehgZ4TLC0Va/useInteractiveStates.js\";import{isDevelopment}from\"https://framerusercontent.com/modules/47jGon7CMrRR2tkBLszZ/ixJNoJU1L47x43mPtcbC/env.js\";import{getLinkUrl,getNewTabAriaLabel,useSmartLinkProps}from\"https://framerusercontent.com/modules/kNZJPvkIJZGGj8KxF53M/EVxL25LJacDR3InTjCol/linkHelpers.js\";import{getIcon,getIconRaw,ICON_OPTIONS_WITH_CUSTOM,ICON_OPTION_TITLES_WITH_CUSTOM}from\"https://framerusercontent.com/modules/fJNdNvtkorPxGrDlmhln/LiwKJUReu5R3WX0AxbqC/icons.js\";import{iconPixelSizeForSquareSide,processSVG,squareIconPaddingOneSidePx}from\"https://framerusercontent.com/modules/keR2epPkn1MdvCLnDSBc/z4ga9Xl53MGZI0XlY2dd/svg.js\";import{PLACEHOLDER}from\"https://framerusercontent.com/modules/ZO8py5W6dWspTZ6N8FoQ/ik33zGZQhIFSuzy6bsA1/placeholders.js\";import{normalizeElementId}from\"https://framerusercontent.com/modules/V8DZ1j6fmzxP1pB8h5BJ/sPSFCEug6lYXxMvPVu5Z/resolveElementId.js\";const DEFAULT_CIRCLE_ICON_SVG=getIconRaw(\"circle\");const ButtonInternal=/*#__PURE__*/forwardRef(function ButtonInternal(props,ref){const{breakpoint=\"desktop\",variant=\"solid\",theme=\"default\",size=\"medium\",widthMode=\"responsive\",label=PLACEHOLDER.PRIMARY_BUTTON,leadingIconName=\"circle\",leadingIconSvg=DEFAULT_CIRCLE_ICON_SVG,trailingIconName=\"arrow-narrow-right\",trailingIconSvg=DEFAULT_CIRCLE_ICON_SVG,iconPosition=\"none\",disabled=false,loading=false,link,openInNewTab=false,onClick,ariaLabel,style,type=\"button\",id,...rest}=props;const elementId=normalizeElementId(id);const iconOnly=iconPosition===\"icon-only\";// Enforce that icon-only buttons get an explicit accessible name in\n// development. Without this, a missing `ariaLabel` ships silently\n// and AT users hear an unlabelled button. We intentionally don't\n// throw — Framer canvas / Storybook need to keep rendering — but a\n// loud `console.warn` on the dev build catches it during review.\nuseEffect(()=>{if(typeof window===\"undefined\"||!isDevelopment())return;if(!iconOnly)return;const labelText=typeof label===\"string\"?label.trim():\"\";const ariaText=typeof ariaLabel===\"string\"?ariaLabel.trim():\"\";if(!ariaText&&!labelText){console.warn(\"[Button] icon-only buttons must set `ariaLabel` (or pass a string `label` for the visually-hidden name) so screen readers announce something other than an unlabelled button.\");}},[iconOnly,ariaLabel,label]);const isDisabled=disabled;const isLoading=loading;const isInteractive=!isDisabled&&!isLoading;const reducedMotion=useReducedMotion();const typography=size===\"large\"?Tokens.getTypographyStyles(\"/Button XL\",breakpoint):size===\"medium\"?Tokens.getTypographyStyles(\"/Button LG\",breakpoint):Tokens.getTypographyStyles(\"/Button SM\",breakpoint);const{isHovered,isPressed,isFocused,brightnessFilter,cursorStyle,handlers}=useInteractiveStates(isDisabled||isLoading);const finalBrightnessFilter=isDisabled?Tokens.getBrightnessFilter(true,false,false):brightnessFilter;// Icon-only: shared fill ratio + symmetric padding (`utils/svg.ts`). With label: 20 / 24 px per size.\nconst iconOnlySidePx=size===\"large\"?56:size===\"medium\"?48:44;const buttonHeightPx=iconOnly?iconOnlySidePx:size===\"large\"?56:size===\"medium\"?48:44;const iconSize=iconOnly?iconPixelSizeForSquareSide(iconOnlySidePx):size===\"small\"?20:24;// Constants for padding logic (values must be in SPACING_SCALE)\nconst PADDING_TOP_LARGE=16;const PADDING_TOP_MEDIUM=12;const PADDING_TOP_SMALL=8;const PADDING_HORIZONTAL_LARGE=32;const PADDING_HORIZONTAL_MEDIUM=24;const PADDING_HORIZONTAL_SMALL=16;const GAP_LARGE=12;const GAP_MEDIUM=10;const GAP_SMALL=8;const showIconLeading=iconPosition===\"leading\"||iconOnly;const showIconTrailing=iconPosition===\"trailing\"&&!iconOnly;const showLoadingIcon=isLoading;const backgroundColor=getButtonBackgroundColor(variant,theme,isDisabled);const border=getButtonBorderStyle(variant,theme,isDisabled);const textColor=getButtonTextColor(variant,theme,isDisabled);const iconColor=getButtonIconColor(variant,theme,isDisabled);const linkUrl=getLinkUrl(link);const hasLink=Boolean(linkUrl&&linkUrl.trim()!==\"\");const handleClick=e=>{if(!isInteractive){e.preventDefault();e.stopPropagation();return;}onClick?.(e);// When rendered as submit button, do not preventDefault so the form's onSubmit runs.\nif(type===\"submit\"){return;}// When rendered as button (no link), consume the event so Framer does not\n// treat it as unhandled and show an error state in the canvas.\nif(!hasLink){e.preventDefault();e.stopPropagation();}};const smartLink=useSmartLinkProps(link,openInNewTab,{onClick:e=>handleClick(e)});const linkOpensNewTab=hasLink&&smartLink.target===\"_blank\";const trimmedAria=typeof ariaLabel===\"string\"?ariaLabel.trim():\"\";const trimmedLabel=typeof label===\"string\"?label.trim():\"\";const iconAccessibleName=trimmedAria||trimmedLabel||\"Button\";const resolvedAriaLabel=(()=>{if(!hasLink){if(iconOnly)return iconAccessibleName;if(trimmedAria!==\"\"&&trimmedAria!==trimmedLabel)return trimmedAria;return undefined;}if(linkOpensNewTab){const name=iconOnly?iconAccessibleName:trimmedLabel;if(name)return getNewTabAriaLabel(name);}if(iconOnly)return iconAccessibleName;if(trimmedAria!==\"\"&&trimmedAria!==trimmedLabel)return trimmedAria;return undefined;})();const buttonStyles=useMemo(()=>{const{background:styleBackground,...restStyle}=style??{};const getNumericSpacing=val=>parseFloat(Tokens.getResponsiveSpacing(val,breakpoint));const getPadding=()=>{if(iconOnly){const basePadding=squareIconPaddingOneSidePx(iconOnlySidePx);const basePaddingStr=Tokens.getResponsiveSpacing(basePadding,breakpoint);return`${basePaddingStr} ${basePaddingStr}`;}else{let top=PADDING_TOP_SMALL;let horizontal=PADDING_HORIZONTAL_SMALL;let gap=GAP_SMALL;if(size===\"large\"){top=PADDING_TOP_LARGE;horizontal=PADDING_HORIZONTAL_LARGE;gap=GAP_LARGE;}else if(size===\"medium\"){top=PADDING_TOP_MEDIUM;horizontal=PADDING_HORIZONTAL_MEDIUM;gap=GAP_MEDIUM;}const topStr=Tokens.getResponsiveSpacing(top,breakpoint);const horizontalStr=Tokens.getResponsiveSpacing(horizontal,breakpoint);if(!showIconLeading&&!showIconTrailing){return`${topStr} ${horizontalStr}`;}const horizontalVal=getNumericSpacing(horizontal);const gapVal=getNumericSpacing(gap);// Balanced padding\nif(showIconLeading&&showIconTrailing){return`${topStr} ${horizontalStr}`;}else if(showIconLeading){const right=horizontalVal+gapVal;return`${topStr} ${right}px ${topStr} ${horizontalStr}`;}else{// showIconTrailing\nconst left=horizontalVal+gapVal;return`${topStr} ${horizontalStr} ${topStr} ${left}px`;}}};const getGap=()=>{if(iconOnly)return\"0\";if(size===\"large\")return Tokens.getResponsiveSpacing(GAP_LARGE,breakpoint);if(size===\"medium\")return Tokens.getResponsiveSpacing(GAP_MEDIUM,breakpoint);return Tokens.getResponsiveSpacing(GAP_SMALL,breakpoint);};const padding=getPadding();const gap=getGap();const height=Tokens.getSpacing(buttonHeightPx);// Height per size: Small = 44px, Medium = 48px, Large = 56px.\n// Icon-only squares match the same dimension for consistent touch targets.\nconst dimension=iconOnly?size===\"large\"?56:size===\"medium\"?48:44:undefined;const widthFromMode=(()=>{if(iconOnly){return Tokens.getSpacing(dimension);}if(widthMode===\"full\"){return\"100%\";}if(widthMode===\"intrinsic\"){return\"auto\";}// responsive — match legacy default: full width on phone, intrinsic elsewhere\nreturn breakpoint===\"phone\"?\"100%\":\"auto\";})();const resolvedWidth=restStyle.width!==undefined?restStyle.width:widthFromMode;const isPrimaryRainbow=variant===\"primary-warm\"||variant===\"primary-lush\"||variant===\"primary-cool\";let resolvedBackground=backgroundColor;if(!isDisabled&&isPrimaryRainbow){resolvedBackground=getPrimaryRainbowGradientWithColoredGlass(variant);}else if(!isDisabled&&variant===\"ghost\"&&theme===\"default\"){resolvedBackground=getGhostGlassButtonBackground(backgroundColor);}const frostBackdrop=getLiquidGlassBackdropBlurFilter(LIQUID_GLASS_SHARED.frostBlurPx,LIQUID_GLASS_SHARED.saturation);// Primary rainbow and default-theme ghost both use the liquid-glass fill\n// stack; pair with the shared frost backdrop so the pill reads as real\n// glass (blur + saturate), aligned with `getLiquidGlassBackdropBlurFilter`.\nconst isGhostDefaultTheme=variant===\"ghost\"&&theme===\"default\";const needsFrostBackdropVariant=isPrimaryRainbow||isGhostDefaultTheme;const useFrostBackdrop=!isDisabled&&needsFrostBackdropVariant;return{...restStyle,width:resolvedWidth,height,minHeight:height,padding,borderRadius:Tokens.getRadius(\"radius-full\"),background:styleBackground??resolvedBackground,...useFrostBackdrop?{backdropFilter:frostBackdrop,WebkitBackdropFilter:frostBackdrop}:{},border,color:textColor,display:\"inline-flex\",flexShrink:0,position:\"relative\",zIndex:Tokens.getZIndex(\"raised\"),alignItems:\"center\",justifyContent:\"center\",gap,minWidth:iconOnly?Tokens.getSpacing(dimension):Tokens.getSpacing(44),overflow:\"hidden\",boxSizing:\"border-box\",cursor:cursorStyle,filter:finalBrightnessFilter,transition:variant===\"link\"?`${Tokens.getTransition(\"background\",\"quick\")}, ${Tokens.getTransition(\"text-decoration\",\"quick\")}, ${Tokens.getTransition(\"filter\",\"quick\")}`:`${Tokens.getTransition(\"background\",\"quick\")}, ${Tokens.getTransition(\"border\",\"quick\")}, ${Tokens.getTransition(\"filter\",\"quick\")}`,textDecoration:variant===\"link\"&&isHovered&&isInteractive?\"underline\":\"none\",textUnderlineOffset:variant===\"link\"?Tokens.getSpacing(2):\"0\",outline:isFocused?getFocusOutlineStyle():\"none\",outlineOffset:Tokens.getSpacing(2),userSelect:\"none\",whiteSpace:\"nowrap\",...typography,fontSize:restStyle.fontSize||typography?.fontSize};},[style,iconOnly,iconOnlySidePx,buttonHeightPx,size,variant,theme,isDisabled,isInteractive,isHovered,isFocused,breakpoint,widthMode,showIconLeading,showIconTrailing,cursorStyle,finalBrightnessFilter,typography,backgroundColor,border,textColor]);const processCustomIconSvg=rawSvg=>{const trimmed=rawSvg.trim();const sizeMatch=trimmed.match(/width=[\"'](\\d+)[\"']/);const alreadySized=sizeMatch!==null&&parseInt(sizeMatch[1],10)===iconSize;const hasHexColors=/fill=[\"']#[0-9a-fA-F]{3,8}[\"']/i.test(trimmed);return processSVG(trimmed,alreadySized?undefined:iconSize,hasHexColors?undefined:iconColor);};const getLeadingIconSVG=()=>{if(!showIconLeading)return null;if(showLoadingIcon)return getIcon(\"loading\",iconSize,iconColor,{opticalInset:0});if(leadingIconName===\"custom\"&&leadingIconSvg?.trim()?.includes(\"{if(!showIconTrailing)return null;if(showLoadingIcon)return getIcon(\"loading\",iconSize,iconColor,{opticalInset:0});if(trailingIconName===\"custom\"&&trailingIconSvg?.trim()?.includes(\"{if(!svgContent)return null;const style={display:\"inline-flex\",alignItems:\"center\",justifyContent:\"center\",width:`${iconSize}px`,height:`${iconSize}px`,flexShrink:0};if(isLoading&&svgContent.includes(\"loading\")){const spinStyle=reducedMotion?style:{...style,animation:`${BUTTON_SPIN_KEYFRAMES_NAME} ${SPINNER_DURATION_FULL}s linear infinite`};return /*#__PURE__*/_jsx(\"span\",{style:spinStyle,dangerouslySetInnerHTML:{__html:svgContent},\"aria-hidden\":true});}return /*#__PURE__*/_jsx(\"span\",{dangerouslySetInnerHTML:{__html:svgContent},\"aria-hidden\":true,style:style});};const content=/*#__PURE__*/_jsxs(_Fragment,{children:[renderIcon(getLeadingIconSVG()),!iconOnly&&label&&/*#__PURE__*/_jsx(\"span\",{style:{minWidth:0,overflow:\"hidden\",textOverflow:\"ellipsis\",whiteSpace:\"nowrap\"},children:label}),renderIcon(getTrailingIconSVG())]});const scale=isPressed?.98:1;const transformTransition=reducedMotion?\"none\":Tokens.getTransition(\"transform\",\"quick\");const interactiveStyle={...buttonStyles,transform:`scale(${scale})`,transition:variant===\"link\"?`${Tokens.getTransition(\"background\",\"quick\")}, ${Tokens.getTransition(\"text-decoration\",\"quick\")}, ${Tokens.getTransition(\"filter\",\"quick\")}, ${transformTransition}`:`${Tokens.getTransition(\"background\",\"quick\")}, ${Tokens.getTransition(\"border\",\"quick\")}, ${Tokens.getTransition(\"filter\",\"quick\")}, ${transformTransition}`};const mergedStyle=interactiveStyle;const commonProps={\"style\":mergedStyle,\"onMouseEnter\":handlers.onMouseEnter,\"onMouseLeave\":handlers.onMouseLeave,\"onMouseDown\":handlers.onMouseDown,\"onMouseUp\":handlers.onMouseUp,\"onFocus\":handlers.onFocus,\"onBlur\":handlers.onBlur,\"tabIndex\":isInteractive?0:-1,\"aria-disabled\":isDisabled||isLoading,\"aria-busy\":isLoading,\"aria-label\":resolvedAriaLabel,...elementId?{id:elementId}:{},...rest};const interactiveElement=hasLink?/*#__PURE__*/_jsx(\"a\",{ref:ref,href:isInteractive?smartLink.href:undefined,target:smartLink.target,rel:smartLink.rel,...commonProps,// Spread smartLink.style FIRST and let the button's computed\n// styles win. smartLink.style sets `color: \"inherit\"`, which\n// would otherwise clobber the variant/theme-aware textColor\n// (e.g. ghost+default needs white text, but `inherit` falls\n// back to the UA default black on sections that don't set\n// an ambient `color`).\nstyle:{...smartLink.style,...commonProps.style},onClick:smartLink.onClick,children:content}):/*#__PURE__*/_jsx(\"button\",{ref:ref,type:type,disabled:isDisabled||isLoading,...commonProps,onClick:handleClick,children:content});return /*#__PURE__*/_jsxs(_Fragment,{children:[isLoading&&!reducedMotion&&/*#__PURE__*/_jsx(\"style\",{children:BUTTON_SPIN_KEYFRAMES_RULE}),interactiveElement]});});ButtonInternal.displayName=\"ButtonInternal - Atom\";/**\n * Button - Wrapper component for Framer compatibility.\n *\n * Exported as a plain named function so Framer's code-link parser recognizes\n * it as a valid code component (a `forwardRef` default export is opaque to\n * Framer's static analysis and prevents the component from being registered\n * on the canvas).\n *\n * Refs from consumers (focus management, measurement, Floating UI anchors,\n * the `Button*` wrappers in atoms/molecules) are still forwarded to the\n * underlying `

`–`