{"version":3,"file":"inputStyles.B3ga3le2.mjs","names":["Tokens"],"sources":["https:/framerusercontent.com/modules/U2FOosttasnNq23GAUIA/fU628a93oLqOm76PsRoT/inputStyles.js"],"sourcesContent":["/**\n * Input Style Utilities.\n *\n * Shared inline style helpers for all input components (InputText, InputNumber,\n * InputEmail, InputPassword, etc.). These replace the CSS Module approach, making\n * styles compatible with Framer's TSX-only constraint.\n *\n * This module establishes the pattern formerly provided by InputBaseTheme.module.css\n * and the per-component CSS modules. All token lookups go through Tokens.get*().\n */import Tokens,{LIQUID_GLASS_SHARED,getLiquidGlassBackdropBlurFilter}from\"https://framerusercontent.com/modules/HjvhO8Re4WnlZSTpJli8/jbCIdsxnmVrJOsDqxSxp/index.js\";import{getPlaceholderCSS}from\"https://framerusercontent.com/modules/XWYWuxzSk6lwKA2MQNSk/F59AtUPtRVr8Z8EeFMu4/styles.js\";// Re-export placeholder CSS helper so callers have a single import point.\nexport{getPlaceholderCSS};// ── Color helpers ─────────────────────────────────────────────────────────────\n/**\n * Get background color for an input container based on theme.\n *\n * Uses frosted glass tokens paired with {@link getInputGlassBackdropStyles} /\n * `backdrop-filter` so fields match the liquid glass system.\n *\n * @param theme - Color theme variant.\n * @returns CSS background-color value.\n */export function getInputBackgroundColor(theme=\"default\"){return theme===\"inverted\"?Tokens.getColorValue(\"/Backgrounds/bg-inverted-tertiary-glass\"):Tokens.getColorValue(\"/Backgrounds/bg-tertiary-glass\");}/**\n * Shared `backdrop-filter` stack for input surfaces (aligned with Liquid Glass frost).\n */export function getInputGlassBackdropStyles(){const bf=getLiquidGlassBackdropBlurFilter(LIQUID_GLASS_SHARED.frostBlurPx,LIQUID_GLASS_SHARED.saturation);return{backdropFilter:bf,WebkitBackdropFilter:bf};}/**\n * Get text color for an input element based on theme and disabled state.\n *\n * @param theme - Color theme variant.\n * @param disabled - Whether the input is disabled.\n * @returns CSS color value.\n */export function getInputTextColor(theme=\"default\",disabled=false){if(disabled)return Tokens.getColorValue(\"/Text/text-disabled\");return theme===\"inverted\"?Tokens.getColorValue(\"/Text/text-inverted-primary\"):Tokens.getColorValue(\"/Text/text-primary\");}/**\n * Get placeholder text color for an input based on theme.\n *\n * @param theme - Color theme variant.\n * @returns CSS color value for ::placeholder text.\n */export function getInputPlaceholderColor(theme=\"default\"){return theme===\"inverted\"?Tokens.getColorValue(\"/Text/text-inverted-tertiary\"):Tokens.getColorValue(\"/Text/text-tertiary\");}// ── Outline helper ─────────────────────────────────────────────────────────────\n/**\n * Compute the CSS outline for an input container.\n *\n * Priority: error > success > focus > none.\n *\n * @param isFocused - Whether the container is focused.\n * @param isValid - Validation state (null | true | false).\n * @param validateField - Whether validation is active (required for success outline).\n * @returns CSS outline shorthand value.\n */export function getInputOutline(isFocused,isValid,validateField){if(!isFocused)return\"none\";if(isValid===false){return`${Tokens.getFocusOutlineWidth()} solid ${Tokens.getColorValue(\"/Borders/border-error\")}`;}if(validateField&&isValid===true){return`${Tokens.getFocusOutlineWidth()} solid ${Tokens.getColorValue(\"/Borders/border-success\")}`;}return`${Tokens.getFocusOutlineWidth()} solid ${Tokens.getColorValue(\"/Borders/border-brand-bunq\")}`;}// ── Style objects ─────────────────────────────────────────────────────────────\n/**\n * Get inline styles for the outer wrapper div.\n *\n * The wrapper provides position context, full width, and a desktop max-width cap.\n * It intentionally keeps `minWidth: 0` so inputs can shrink inside mobile flex/grid parents.\n * Any user-provided `style` prop is merged last so it can override defaults.\n *\n * @param customStyle - Optional user-provided style overrides.\n * @returns CSS properties for the outer wrapper div.\n */export function getInputWrapperStyle(customStyle){return{position:\"relative\",width:\"100%\",minWidth:0,maxWidth:Tokens.getSpacing(320),boxSizing:\"border-box\",...customStyle};}/**\n * Get inline styles for the input container (the colored, bordered box).\n *\n * Covers layout, background, border-radius, focus outline, hover filter,\n * disabled state, and transition.\n *\n * @param options - Container style options.\n * @returns CSS properties for the container div.\n */export function getInputContainerStyle(options){const{breakpoint=\"desktop\",theme=\"default\",disabled=false,isFocused=false,isHovered=false,isValid,validateField=false,reducedMotion=false,positionRelative=false}=options;return{display:\"flex\",alignItems:\"center\",gap:Tokens.getResponsiveSpacing(8,breakpoint),backgroundColor:getInputBackgroundColor(theme),...getInputGlassBackdropStyles(),borderRadius:Tokens.getRadius(\"radius-lg\"),border:\"none\",outline:getInputOutline(isFocused,isValid,validateField),outlineOffset:Tokens.getSpacing(2),overflow:\"hidden\",height:Tokens.getSpacing(48),width:\"100%\",minWidth:Tokens.getSpacing(160),boxSizing:\"border-box\",filter:Tokens.getBrightnessFilter(disabled,isHovered,false),cursor:disabled?\"not-allowed\":\"default\",transition:reducedMotion?\"none\":Tokens.getTransition(\"filter\",\"quick\"),...positionRelative?{position:\"relative\"}:{}};}/**\n * Get inline styles for the actual `<input>` element.\n *\n * Handles font (via typography tokens), padding, color, and cursor.\n * Typography is responsive: desktop/tablet use the base size, phone uses the smaller size.\n *\n * Horizontal padding for number/email/password inputs is smaller on phone (12px vs 20px).\n * For InputText, padding stays constant at 20px — pass `paddingRight` only when needed.\n *\n * @param options - Input element style options.\n * @returns CSS properties for the `<input>` element.\n */export function getInputElementStyle(options){const{breakpoint=\"desktop\",theme=\"default\",disabled=false,paddingRight}=options;const typography=Tokens.getTypographyStyles(\"/Body MD/Light\",breakpoint);const paddingV=Tokens.getResponsiveSpacing(12,breakpoint);const paddingH=Tokens.getResponsiveSpacing(20,breakpoint);const resolvedPaddingRight=paddingRight??paddingH;return{flex:1,border:\"none\",background:\"transparent\",outline:\"none\",...typography??{},paddingTop:paddingV,paddingBottom:paddingV,paddingLeft:paddingH,paddingRight:resolvedPaddingRight,boxSizing:\"border-box\",textAlign:\"left\",color:getInputTextColor(theme,disabled),cursor:disabled?\"not-allowed\":\"text\",width:\"100%\"};}/**\n * Get inline styles for the validation icon container.\n *\n * Provides padding that mirrors the input's horizontal padding on the right side.\n *\n * @param options - Style options including breakpoint.\n * @returns CSS properties for the validation icon wrapper div.\n */export function getValidationIconContainerStyle(options){const{breakpoint=\"desktop\"}=options;const paddingV=Tokens.getResponsiveSpacing(12,breakpoint);const paddingH=Tokens.getResponsiveSpacing(20,breakpoint);return{padding:`${paddingV} ${paddingH} ${paddingV} 0`,display:\"flex\",alignItems:\"center\",flexShrink:0};}/**\n * Get inline styles for the error message element below an input.\n *\n * Uses \"/Body SM/Light\" typography token: 16px desktop/tablet, 14px phone.\n * Top margin is slightly smaller on phone (2px vs 4px).\n *\n * @param options - Style options including breakpoint.\n * @returns CSS properties for the error message div.\n */export function getInputErrorMessageStyle(options){const{breakpoint=\"desktop\"}=options;const typography=Tokens.getTypographyStyles(\"/Body SM/Light\",breakpoint);const marginTop=breakpoint===\"phone\"?Tokens.getSpacing(2):Tokens.getSpacing(4);const errorColor=Tokens.getColorValue(\"/Text/text-error\");return{...typography??{},color:errorColor,margin:0,padding:0,marginTop};}/**\n * Get inline styles for the InputPassword toggle button.\n *\n * The button is absolutely positioned inside the container. `right` is dynamic\n * (based on horizontal padding). Focus ring is rendered via `boxShadow`.\n *\n * @param options - Toggle button style options.\n * @returns CSS properties for the toggle `<button>` element.\n */export function getPasswordToggleButtonStyle(options){const{breakpoint=\"desktop\",disabled=false,isToggleFocused=false,reducedMotion=false,focusBorderColor=\"/Borders/border-brand-bunq\"}=options;const paddingH=Tokens.getResponsiveSpacing(20,breakpoint);const focusColor=Tokens.getColorValue(focusBorderColor);return{position:\"absolute\",top:\"50%\",right:paddingH,transform:\"translateY(-50%)\",background:\"transparent\",border:\"none\",padding:Tokens.getSpacing(4),display:\"flex\",alignItems:\"center\",justifyContent:\"center\",borderRadius:Tokens.getRadius(\"radius-lg\"),outline:\"none\",cursor:disabled?\"not-allowed\":\"pointer\",color:Tokens.getColorValue(\"/Foregrounds/fg-tertiary\"),filter:disabled?Tokens.getBrightnessFilter(true,false,false):\"none\",zIndex:Tokens.getZIndex(\"raised\"),boxShadow:isToggleFocused&&!disabled?`0 0 0 ${Tokens.getFocusOutlineWidth()} ${focusColor}`:\"none\",transition:reducedMotion?\"none\":`${Tokens.getTransition(\"color\",\"quick\")}, ${Tokens.getTransition(\"box-shadow\",\"standard\")}`};}\nexport const __FramerMetadata__ = {\"exports\":{\"getInputBackgroundColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getValidationIconContainerStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getPasswordToggleButtonStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getInputTextColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getInputErrorMessageStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"InputContainerStyleOptions\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getInputWrapperStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"InputTheme\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"InputElementStyleOptions\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getInputOutline\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getInputContainerStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getInputElementStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getInputPlaceholderColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getPlaceholderCSS\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getInputGlassBackdropStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],"mappings":"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"}