import{composeTypographyStyle as o,getGlobalColorClass as s,getGlobalColorCSSProp as t,makeStyleResponsive as e,template as l,RenderIf as r,isLocalEnv as i,baseAssetURL as a}from"@gem-sdk/core";import{getSettingPreloadData as c}from"../../../helpers.js";import{renderPaginatorItem as p}from"./common/helpers.js";import{customClass as m,getPaginatorWrapperClass as d,getPaginatorClass as n}from"./common/classes.js";import{createStyle as g,createClass as f,createStateOrContext as v}from"@gem-sdk/system";let CollectionPaginator=({setting:S,builderProps:$,pageContext:u})=>{let{typographyPaginator:y,activeColor:C,align:j,typo:k,normalColor:E}=S??{},h=g({...o(k,y)}),x=g({normalColorClass:s("text",E),activeColorClass:s("text",C),normalColorStyle:t(E)??"",activeColorStyle:t(C)??""}),A=f({...m("",void 0,S)}),P={...x,customStyle:h,addedClass:A},G=p({setting:S,builderProps:$,pageContext:u},"liquid"),N=f({...d()}),O=f({...n()}),_=g({...e("ta",j),...P.customStyle}),q=v({setting:S,styleSetting:P,uid:$?.uid});return l`
    <gp-collection-paginator gp-data='${JSON.stringify(q).replaceAll("'","&#039;")}' id="${$?.uid}" >
      <div class="${O}" style="${_}">
        <div class="${N}">${G}</div>
      </div>
    </gp-collection-paginator>
    ${r(i,`<script ${c('class="gps-link" delay',"src")}="{{ 'gp-collection-paginator-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${c('class="gps-link" delay',"src")}="${a}/assets-v2/gp-collection-paginator-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  `};export{CollectionPaginator as default};
