{"version":3,"file":"StepIndicator.Fyz-RLy0.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/LpE7HFzdUD8EbuRf2vlW/Bu6YGi0yizyezG7RLA5v/StepIndicator.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";const ORANGE=\"rgb(255, 73, 1)\";const ORANGE_HALO=\"rgba(255, 73, 1, 0.12)\";const DONE=\"rgba(0, 0, 0, 0.35)\";const INACTIVE=\"rgba(0, 0, 0, 0.25)\";const CONNECTOR_INACTIVE=\"rgba(0, 0, 0, 0.15)\";const LABEL_COLOR=\"rgb(0, 0, 0)\";const FONT=\"'DM Sans', sans-serif\";const MOBILE_BREAKPOINT=640;export default function StepIndicator(props){const{currentStep=1,totalSteps=4,dotSize=10,connectorWidth=56,mobileDotSize=8,mobileConnectorWidth=28,labelPrefix=\"Step\",paddingTop=56,paddingBottom=56,mobilePaddingTop=36,mobilePaddingBottom=36,paddingHorizontal=40,mobilePaddingHorizontal=16,labelMarginTop=14,style}=props;const[isMobile,setIsMobile]=useState(false);useEffect(()=>{const check=()=>setIsMobile(window.innerWidth<MOBILE_BREAKPOINT);check();window.addEventListener(\"resize\",check);return()=>window.removeEventListener(\"resize\",check);},[]);const activeDotSize=isMobile?mobileDotSize:dotSize;const activeConnector=isMobile?mobileConnectorWidth:connectorWidth;const activePadTop=isMobile?mobilePaddingTop:paddingTop;const activePadBottom=isMobile?mobilePaddingBottom:paddingBottom;const activePadH=isMobile?mobilePaddingHorizontal:paddingHorizontal;const labelSize=isMobile?10:11;const gridCols=[];for(let i=0;i<totalSteps;i++){gridCols.push(\"auto\");if(i<totalSteps-1)gridCols.push(`${activeConnector}px`);}const labelColumn=(currentStep-1)*2+1;const nodes=[];for(let i=0;i<totalSteps;i++){const s=i+1;const isActive=s===currentStep;const isDone=s<currentStep;nodes.push(/*#__PURE__*/_jsx(\"div\",{style:{gridRow:1,gridColumn:i*2+1,width:activeDotSize,height:activeDotSize,borderRadius:\"50%\",background:isActive?ORANGE:isDone?DONE:\"transparent\",border:`1.5px solid ${isActive?ORANGE:isDone?DONE:INACTIVE}`,boxShadow:isActive?`0 0 0 4px ${ORANGE_HALO}`:\"none\",transition:\"all 0.3s ease\"}},`dot-${i}`));if(i<totalSteps-1){const connectorDone=s<currentStep;nodes.push(/*#__PURE__*/_jsx(\"div\",{style:{gridRow:1,gridColumn:i*2+2,width:\"100%\",height:1,background:connectorDone?DONE:CONNECTOR_INACTIVE}},`conn-${i}`));}}return /*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",justifyContent:\"center\",width:\"100%\",paddingTop:activePadTop,paddingBottom:activePadBottom,paddingLeft:activePadH,paddingRight:activePadH,boxSizing:\"border-box\",...style},children:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"grid\",gridTemplateColumns:gridCols.join(\" \"),alignItems:\"center\",justifyItems:\"center\"},children:[nodes,/*#__PURE__*/_jsxs(\"div\",{style:{gridRow:2,gridColumn:labelColumn,marginTop:labelMarginTop,fontFamily:FONT,fontWeight:500,fontSize:labelSize,letterSpacing:\"0.14em\",textTransform:\"uppercase\",color:LABEL_COLOR,whiteSpace:\"nowrap\"},children:[labelPrefix,\" \",currentStep]})]})});}addPropertyControls(StepIndicator,{currentStep:{type:ControlType.Number,title:\"Current step\",defaultValue:1,min:1,max:10,step:1},totalSteps:{type:ControlType.Number,title:\"Total steps\",defaultValue:4,min:2,max:10,step:1},labelPrefix:{type:ControlType.String,title:\"Label prefix\",defaultValue:\"Step\"},labelMarginTop:{type:ControlType.Number,title:\"Label top gap\",defaultValue:14,min:0,max:60,step:1},dotSize:{type:ControlType.Number,title:\"Dot size (desktop)\",defaultValue:10,min:6,max:24,step:1},mobileDotSize:{type:ControlType.Number,title:\"Dot size (mobile)\",defaultValue:8,min:4,max:16,step:1},connectorWidth:{type:ControlType.Number,title:\"Connector width (desktop)\",defaultValue:56,min:20,max:160,step:4},mobileConnectorWidth:{type:ControlType.Number,title:\"Connector width (mobile)\",defaultValue:28,min:12,max:80,step:2},paddingTop:{type:ControlType.Number,title:\"Padding top (desktop)\",defaultValue:56,min:0,max:200,step:4},paddingBottom:{type:ControlType.Number,title:\"Padding bottom (desktop)\",defaultValue:56,min:0,max:200,step:4},mobilePaddingTop:{type:ControlType.Number,title:\"Padding top (mobile)\",defaultValue:36,min:0,max:120,step:4},mobilePaddingBottom:{type:ControlType.Number,title:\"Padding bottom (mobile)\",defaultValue:36,min:0,max:120,step:4},paddingHorizontal:{type:ControlType.Number,title:\"Padding L/R (desktop)\",defaultValue:40,min:0,max:120,step:4},mobilePaddingHorizontal:{type:ControlType.Number,title:\"Padding L/R (mobile)\",defaultValue:16,min:0,max:80,step:2}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"StepIndicator\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./StepIndicator.map"],"mappings":"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"}