import{template as e,WrapRenderChildren as t,RenderChildren as s,RenderIf as i,isLocalEnv as l,baseAssetURL as a}from"@gem-sdk/core";import{getDynamicSourceLocales as d,createSettingId as r,getSettingPreloadData as o}from"../../helpers.js";import{createStateOrContext as p,createAttr as c,createStyle as m,createClass as n}from"@gem-sdk/system";import{getAttr as u,getAttrContent as y}from"../common/attrs.js";import $ from"../../text/components/Text.liquid.js";import{Tabs as g}from"../settings/configs/translate.js";import{getStyleWrapper as v,getTabParentListStyle as f,getTabListStyle as h,getContainContentStyle as x,getItemStyle as b}from"../common/styles.js";import{getClassesWrapper as j,getContainClasses as C,getStyleTagClasses as S,getTabParentListClasses as T,getTabListClasses as k,getWrapperContentClasses as A,getContainContentClasses as I,getTextClasses as K,getItemClasses as E}from"../common/classes.js";let N=N=>{let{builderProps:V,style:q,setting:P,advanced:z,rawChildren:F}=N;delete P?.labelTypoV2?.attrs?.color;let{cssClass:G}=z??{},{panelWidth:L,childItem:O,labelAlign:W,labelTypo:_,labelTypoV2:J}=P??{},M=p({setting:P,builderProps:V}),R=void 0;P&&!P?.labelWidth&&(P.labelWidth={desktop:"200px"});let U=c({...u({uid:V?.uid||""})}),w=m({...v({setting:P,style:q,uid:V?.uid,pageContext:N.pageContext??{},type:"Liquid"})}),B=n({...j({builderProps:V,advancedCssClass:G})}),D=n({...C({setting:P})}),H=S({panelWidth:L,builderProps:V}),Q=n({...T()}),X=m({...f(P)}),Y=n({...k({setting:P})}),Z=m({...h(P)}),ee=e=>n({...E({setting:P,isNotLiquid:!1,isActive:e,currentDevice:R})}),et=e=>m({...b(P,e)}),es=n({...A()}),ei=n({...I()}),el=m({...x()}),ea=c({...y({uid:V?.uid||""})}),ed=n({...K()});return e`
    <gp-tab
      ${{...U}}
      style="${w}"
      class="${B}"
      gp-data='${JSON.stringify(M)?.replaceAll("'","&#039;")}'>
        <style>${H}</style>
        <div class="${D}">
          <div class="${Q}" style="${X}">
            <ul class="${Y}" style="${Z}">
              ${O?.map(e=>e?.replaceAll("'","&#039;"))?.map((t,s)=>{let i=(P?.activeKey??0)<0||(P?.activeKey??0)>=(P?.childItem??[]).length?0===s:s===P?.activeKey,l=d({val:t,uid:V?.uid,settingId:r({id:g?.childItem?.id,index:s}),pageContext:N.pageContext??{},isCapitalize:P?.labelTypoV2?.attrs?.transform==="capitalize"});return e`
      <li
        aria-hidden
        class="${ee(i)}"
        style="${et(i)}"
        key="${V?.uid}"

      >
        ${$({className:ed,styles:{typo:J,typography:_,textAlign:W},setting:{text:l,htmlTag:"div",excludeFlex:!0,isForceValue:!0},translateSetting:g?.childItem?.id})}
      </li>
    `}).join("")}
            </ul>
          </div>
          <div class="${es}">
            <div
              ${{...ea}}
              class="${ei}"
              style="${el}"
            >
              ${t({uid:V?.uid||"",customProps:F?.[0].customProps},F?.map((t,i)=>{let l=(P?.activeKey??0)<0||(P?.activeKey??0)>=(P?.childItem??[]).length?0===i:i===P?.activeKey;return t?e`${s({...t,parentUid:V?.uid,isActive:l})}`:""}))}
            </div>
          </div>
        </div>
    </gp-tab>
    ${i(l,`<script ${o('class="gps-link" delay',"src")}="{{ 'gp-tab-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${o('class="gps-link" delay',"src")}="${a}/assets-v2/gp-tab-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  `};export{N as default};
