import{P as T}from"./PzText-D5PUnIjq.js";import{e as q,a5 as f,w as G,a6 as Q,G as X,X as J,a7 as Y,f as m,y as F,r as Z,o as u,j as K,h as tt,q as _,F as at,u as st,n as et,g as w,a3 as nt,c as rt,t as pt,a8 as P}from"./iframe-Bl-fVlm8.js";import{_ as M}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const ot=["","light"];var r=(t=>(t.INIT_TAB="init-tab",t.TABS_STATE="tabs-state",t.REMOVE_TAB="remove-tab",t))(r||{});const it={class:"pz-tab"},x=q({name:"PzTab",__name:"PzTab",props:{name:{default:"Tab"},selected:{type:Boolean,default:!1},id:{default:void 0}},setup(t){const a=t,p=K(),i=Z(!1),o=f(r.REMOVE_TAB,void 0),s=f(r.TABS_STATE,void 0),e=f(r.INIT_TAB,void 0),n={get id(){return a.id??`pz-tab-${(p==null?void 0:p.uid)??a.name}`},get name(){return a.name}};return G(()=>s==null?void 0:s.activeTab,z=>{i.value=a.name===z}),Q(()=>{e==null||e(n),i.value=a.selected}),X(()=>o==null?void 0:o(n)),(z,mt)=>J((u(),m("div",it,[F(z.$slots,"default",{},void 0,!0)],512)),[[Y,i.value]])}}),h=M(x,[["__scopeId","data-v-2374460d"]]);x.__docgenInfo=Object.assign({displayName:x.name??x.__name},{name:"PzTab",exportName:"default",displayName:"PzTab",description:"",tags:{},props:[{name:"name",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'"Tab"'}},{name:"selected",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"id",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Layouts/PzTabs/PzTab.vue"]});const lt={class:"pz-tabs__nav"},zt=["onClick"],bt={class:"pz-tabs__content"},g=q({name:"PzTabs",__name:"PzTabs",props:{skin:{default:""},maxWidth:{default:""}},setup(t){const a=nt({tabs:[],activeTab:""}),p=t,i=rt(()=>p.skin?`pz-tabs--${p.skin}`:"");P(r.TABS_STATE,a),P(r.INIT_TAB,s=>a.tabs.push(s)),P(r.REMOVE_TAB,s=>{a.tabs=a.tabs.filter(e=>e.id!==s.id),o()}),tt(()=>o());const o=()=>{var e;const[{name:s}={name:""}]=a.tabs.filter(({selected:n})=>n);a.activeTab=s||((e=a.tabs[0])==null?void 0:e.name)||""};return(s,e)=>(u(),m("div",{class:w(["pz-tabs",i.value]),style:et({maxWidth:t.maxWidth})},[_("ul",lt,[(u(!0),m(at,null,st(a.tabs,n=>(u(),m("li",{key:n.id,class:w(["pz-tabs__item",{active:a.activeTab===n.name}]),onClick:z=>a.activeTab=n.name||""},pt(n.name),11,zt))),128))]),_("div",bt,[F(s.$slots,"default",{},void 0,!0)])],6))}}),l=M(g,[["__scopeId","data-v-cb10282b"]]);g.__docgenInfo=Object.assign({displayName:g.name??g.__name},{name:"PzTabs",exportName:"default",displayName:"PzTabs",description:"",tags:{},props:[{name:"skin",required:!1,type:{name:"PzTabsSkin"},defaultValue:{func:!1,value:'""'}},{name:"maxWidth",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Layouts/PzTabs/PzTabs.vue"]});const dt=t=>[t.skin?`skin="${t.skin}"`:null,t.maxWidth?`max-width="${t.maxWidth}"`:null].filter(a=>!!a).join(" "),ct=t=>`<template>
  <PzTabs ${dt(t)}>
    <PzTab name="${t.currentEditionLabel}" selected>
      Current content
    </PzTab>
    <PzTab name="${t.historyLabel}">
      History content
    </PzTab>
  </PzTabs>
</template>`,R=()=>`<template>
  <PzTabs skin="light" max-width="720px">
    <PzTab name="Огляд" selected>
      Summary content
    </PzTab>
    <PzTab name="Документи">
      Documents content
    </PzTab>
    <PzTab name="Питання">
      Questions content
    </PzTab>
  </PzTabs>
</template>`,H=()=>`<template>
  <PzTabs>
    <PzTab name="Активні" selected>
      Active procedures
    </PzTab>
    <PzTab name="Архів">
      Archive procedures
    </PzTab>
  </PzTabs>
</template>`,U=()=>`<template>
  <PzTabs skin="light" max-width="360px">
    <PzTab name="Файли" selected>
      Files content
    </PzTab>
    <PzTab name="Історія">
      History content
    </PzTab>
    <PzTab name="Нотатки">
      Notes content
    </PzTab>
  </PzTabs>
</template>`,vt=()=>`<template>
${[R(),H(),U()].join(`

`)}
</template>`,yt={title:"Components/Layouts/PzTabs",component:l,parameters:{prototype:{caption:"Tabs component",note:"Renamed from the previous app-level tabs to the shared `PzTabs` and `PzTab` components. This version only switches local panel content and keeps the original tab props and behavior."},docs:{description:{component:"Use `PzTabs` with `PzTab` children when you need to switch content inside the same view. The API keeps the original `name`, `selected`, `id`, `skin`, and `maxWidth` properties from the legacy tabs."},source:{transform:(t,a)=>ct(a.args??yt.args)}}},args:{skin:"light",maxWidth:"840px",currentEditionLabel:"Остання редакція",historyLabel:"Історія змін"},argTypes:{skin:{control:{type:"inline-radio",labels:{"":"default",light:"light"}},options:ot,description:"Surface skin for the tabs container."},maxWidth:{control:"text",description:"Optional max-width applied to the navigation and content area."}},render:t=>({components:{pzTabs:l,pzTab:h,pzText:T},setup(){return{args:t}},template:`
      <div class="pz-tabs-story">
        <section class="pz-tabs-story-frame">
          <div class="pz-tabs-story-header">
            <div>
              <span class="pz-tabs-story-eyebrow">Content tabs</span>
              <pz-text variant="h4-bold">Switch panel content inside the same view</pz-text>
            </div>
            <span class="pz-tabs-story-chip">{{ args.skin || 'default' }}</span>
          </div>

          <pz-tabs
            :skin="args.skin"
            :max-width="args.maxWidth"
          >
            <pz-tab
              :name="args.currentEditionLabel"
              selected
            >
              <div class="pz-tabs-story-panel">
                <div class="pz-tabs-story-panel-head">
                  <div class="pz-tabs-story-meta">
                    <span class="pz-tabs-story-tag">Тарас Шевченко</span>
                    <pz-text variant="small-regular">Поезія про вечір і родинний лад</pz-text>
                    <span class="pz-tabs-story-bullet"></span>
                    <pz-text variant="small-regular">Фрагмент</pz-text>
                  </div>
                </div>

                <div class="pz-tabs-story-poem">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Садок вишневий коло хати,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Хрущі над вишнями гудуть,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Плугатарі з плугами йдуть,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Співають ідучи дівчата,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">А матері вечерять ждуть.</pz-text>
                  </div>

                  <pz-text variant="small-regular" class="pz-tabs-story-note">
                    Спокійна, світла сцена добре підходить для першої вкладки й показує, як довгий текст живе всередині компонента tabs.
                  </pz-text>
                </div>
              </div>
            </pz-tab>

            <pz-tab :name="args.historyLabel">
              <div class="pz-tabs-story-panel">
                <div class="pz-tabs-story-panel-head">
                  <pz-text variant="h4-semibold">Реве та стогне Дніпр широкий</pz-text>
                  <div class="pz-tabs-story-meta">
                    <span class="pz-tabs-story-tag">Тарас Шевченко</span>
                    <pz-text variant="small-regular">Напружений пейзаж</pz-text>
                    <span class="pz-tabs-story-bullet"></span>
                    <pz-text variant="small-regular">Фрагмент</pz-text>
                  </div>
                </div>

                <div class="pz-tabs-story-poem">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Реве та стогне Дніпр широкий,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сердитий вітер завива,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Додолу верби гне високі,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Горами хвилю підійма.</pz-text>
                  </div>

                  <pz-text variant="small-regular" class="pz-tabs-story-note">
                    Друга вкладка контрастує настроєм і показує, як історія або альтернативний текст може виглядати в тій самій структурі.
                  </pz-text>
                </div>
              </div>
            </pz-tab>
          </pz-tabs>
        </section>

        <section class="pz-tabs-story-gallery">
          <div class="pz-tabs-story-header">
            <div>
              <span class="pz-tabs-story-eyebrow">Examples</span>
              <pz-text variant="h4-bold">Common tab layouts for product screens</pz-text>
            </div>
            <span class="pz-tabs-story-chip">3 patterns</span>
          </div>

          <div class="pz-tabs-story-grid">
            <article class="pz-tabs-story-card">
              <div class="pz-tabs-story-example-copy">
                <pz-text variant="body-semibold">Three tabs</pz-text>
                <pz-text variant="small-regular">
                  One container with three moods: quiet evening, storm, and testament.
                </pz-text>
              </div>

              <div class="pz-tabs-story-example-surface">
                <pz-tabs
                  skin="light"
                  max-width="720px"
                >
                  <pz-tab
                    name="Огляд"
                    selected
                  >
                    <div class="pz-tabs-story-panel">
                      <div class="pz-tabs-story-stanza">
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Зацвіла в долині</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Червона калина,</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Ніби засміялась</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Дівчина-дитина.</pz-text>
                      </div>
                    </div>
                  </pz-tab>

                  <pz-tab name="Документи">
                    <div class="pz-tabs-story-panel">
                      <div class="pz-tabs-story-stanza">
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Тече вода з-під явора</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Яром на долину.</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Пишається над водою</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Червона калина.</pz-text>
                      </div>
                    </div>
                  </pz-tab>

                  <pz-tab name="Питання">
                    <div class="pz-tabs-story-panel">
                      <div class="pz-tabs-story-stanza">
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Як умру, то поховайте</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мене на могилі,</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Серед степу широкого,</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">На Вкраїні милій.</pz-text>
                      </div>
                    </div>
                  </pz-tab>
                </pz-tabs>
              </div>
            </article>

            <article class="pz-tabs-story-card">
              <div class="pz-tabs-story-example-copy">
                <pz-text variant="body-semibold">Default skin</pz-text>
                <pz-text variant="small-regular">
                  Same tabs, but the preview keeps the default gray component skin while the content becomes a warm manuscript block.
                </pz-text>
              </div>

              <div class="pz-tabs-story-example-surface">
                <pz-tabs>
                  <pz-tab
                    name="Активні"
                    selected
                  >
                    <div class="pz-tabs-story-panel">
                      <div class="pz-tabs-story-stanza">
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мені тринадцятий минало.</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Я пас ягнята за селом.</pz-text>
                      </div>
                    </div>
                  </pz-tab>

                  <pz-tab name="Архів">
                    <div class="pz-tabs-story-panel">
                      <div class="pz-tabs-story-stanza">
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе сонце засіяло,</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе все на світі стало</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Моє... лани, гаї, сади!</pz-text>
                      </div>
                    </div>
                  </pz-tab>
                </pz-tabs>
              </div>
            </article>

            <article class="pz-tabs-story-card">
              <div class="pz-tabs-story-example-copy">
                <pz-text variant="body-semibold">Constrained width</pz-text>
                <pz-text variant="small-regular">
                  Narrow example for compact blocks where tab labels may need horizontal scrolling.
                </pz-text>
              </div>

              <div class="pz-tabs-story-example-surface">
                <div class="pz-tabs-story-card-surface pz-tabs-story-narrow">
                <pz-tabs
                  skin="light"
                  max-width="360px"
                >
                  <pz-tab
                    name="Файли"
                    selected
                  >
                    <div class="pz-tabs-story-panel">
                      <div class="pz-tabs-story-stanza">
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Думи мої, думи мої,</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Лихо мені з вами!</pz-text>
                      </div>
                    </div>
                  </pz-tab>

                  <pz-tab name="Історія">
                    <div class="pz-tabs-story-panel">
                      <div class="pz-tabs-story-stanza">
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Нащо стали на папері</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сумними рядами?..</pz-text>
                      </div>
                    </div>
                  </pz-tab>

                  <pz-tab name="Нотатки">
                    <div class="pz-tabs-story-panel">
                      <div class="pz-tabs-story-stanza">
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Чом вас вітер не розвіяв</pz-text>
                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">В степу, як пилину?</pz-text>
                      </div>
                    </div>
                  </pz-tab>
                </pz-tabs>
                </div>
              </div>
            </article>
          </div>
        </section>
      </div>
    `})},b={},d={parameters:{docs:{source:{code:R()}}},render:()=>({components:{pzTabs:l,pzTab:h,pzText:T},template:`
      <div class="pz-tabs-story">
        <section class="pz-tabs-story-frame">
          <div class="pz-tabs-story-header">
            <div>
              <span class="pz-tabs-story-eyebrow">Example</span>
              <pz-text variant="h4-bold">Three tabs layout</pz-text>
            </div>
            <span class="pz-tabs-story-chip">Light</span>
          </div>

          <div class="pz-tabs-story-card-surface">
            <pz-tabs
              skin="light"
              max-width="720px"
            >
              <pz-tab
                name="Огляд"
                selected
              >
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Садок вишневий коло хати,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Хрущі над вишнями гудуть.</pz-text>
                  </div>
                </div>
              </pz-tab>

              <pz-tab name="Документи">
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Реве та стогне Дніпр широкий,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сердитий вітер завива.</pz-text>
                  </div>
                </div>
              </pz-tab>

              <pz-tab name="Питання">
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Як умру, то поховайте</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мене на могилі.</pz-text>
                  </div>
                </div>
              </pz-tab>
            </pz-tabs>
          </div>
        </section>
      </div>
    `})},c={parameters:{docs:{source:{code:H()}}},render:()=>({components:{pzTabs:l,pzTab:h,pzText:T},template:`
      <div class="pz-tabs-story">
        <section class="pz-tabs-story-frame">
          <div class="pz-tabs-story-header">
            <div>
              <span class="pz-tabs-story-eyebrow">Example</span>
              <pz-text variant="h4-bold">Default skin surface</pz-text>
            </div>
            <span class="pz-tabs-story-chip">Default</span>
          </div>

          <div class="pz-tabs-story-card-surface">
            <pz-tabs>
              <pz-tab
                name="Активні"
                selected
              >
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мені тринадцятий минало,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Я пас ягнята за селом.</pz-text>
                  </div>
                </div>
              </pz-tab>

              <pz-tab name="Архів">
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе сонце засіяло,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе все на світі стало моє.</pz-text>
                  </div>
                </div>
              </pz-tab>
            </pz-tabs>
          </div>
        </section>
      </div>
    `})},v={parameters:{docs:{source:{code:U()}}},render:()=>({components:{pzTabs:l,pzTab:h,pzText:T},template:`
      <div class="pz-tabs-story">
        <section class="pz-tabs-story-frame">
          <div class="pz-tabs-story-header">
            <div>
              <span class="pz-tabs-story-eyebrow">Example</span>
              <pz-text variant="h4-bold">Constrained width tabs</pz-text>
            </div>
            <span class="pz-tabs-story-chip">360px</span>
          </div>

          <div class="pz-tabs-story-card-surface pz-tabs-story-narrow">
            <pz-tabs
              skin="light"
              max-width="360px"
            >
              <pz-tab
                name="Файли"
                selected
              >
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Думи мої, думи мої,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Лихо мені з вами!</pz-text>
                  </div>
                </div>
              </pz-tab>

              <pz-tab name="Історія">
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Нащо стали на папері</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сумними рядами?..</pz-text>
                  </div>
                </div>
              </pz-tab>

              <pz-tab name="Нотатки">
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Чом вас вітер не розвіяв</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">В степу, як пилину?</pz-text>
                  </div>
                </div>
              </pz-tab>
            </pz-tabs>
          </div>
        </section>
      </div>
    `})},y={parameters:{docs:{source:{code:vt()}}}};var k,S,E;b.parameters={...b.parameters,docs:{...(k=b.parameters)==null?void 0:k.docs,source:{originalSource:"{}",...(E=(S=b.parameters)==null?void 0:S.docs)==null?void 0:E.source}}};var A,B,C;d.parameters={...d.parameters,docs:{...(A=d.parameters)==null?void 0:A.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: buildThreeTabsStorySource()
      }
    }
  },
  render: () => ({
    components: {
      pzTabs: PzTabs,
      pzTab: PzTab,
      pzText: PzText
    },
    template: \`
      <div class="pz-tabs-story">
        <section class="pz-tabs-story-frame">
          <div class="pz-tabs-story-header">
            <div>
              <span class="pz-tabs-story-eyebrow">Example</span>
              <pz-text variant="h4-bold">Three tabs layout</pz-text>
            </div>
            <span class="pz-tabs-story-chip">Light</span>
          </div>

          <div class="pz-tabs-story-card-surface">
            <pz-tabs
              skin="light"
              max-width="720px"
            >
              <pz-tab
                name="Огляд"
                selected
              >
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Садок вишневий коло хати,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Хрущі над вишнями гудуть.</pz-text>
                  </div>
                </div>
              </pz-tab>

              <pz-tab name="Документи">
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Реве та стогне Дніпр широкий,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сердитий вітер завива.</pz-text>
                  </div>
                </div>
              </pz-tab>

              <pz-tab name="Питання">
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Як умру, то поховайте</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мене на могилі.</pz-text>
                  </div>
                </div>
              </pz-tab>
            </pz-tabs>
          </div>
        </section>
      </div>
    \`
  })
}`,...(C=(B=d.parameters)==null?void 0:B.docs)==null?void 0:C.source}}};var N,W,D;c.parameters={...c.parameters,docs:{...(N=c.parameters)==null?void 0:N.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: buildDefaultSkinStorySource()
      }
    }
  },
  render: () => ({
    components: {
      pzTabs: PzTabs,
      pzTab: PzTab,
      pzText: PzText
    },
    template: \`
      <div class="pz-tabs-story">
        <section class="pz-tabs-story-frame">
          <div class="pz-tabs-story-header">
            <div>
              <span class="pz-tabs-story-eyebrow">Example</span>
              <pz-text variant="h4-bold">Default skin surface</pz-text>
            </div>
            <span class="pz-tabs-story-chip">Default</span>
          </div>

          <div class="pz-tabs-story-card-surface">
            <pz-tabs>
              <pz-tab
                name="Активні"
                selected
              >
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мені тринадцятий минало,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Я пас ягнята за селом.</pz-text>
                  </div>
                </div>
              </pz-tab>

              <pz-tab name="Архів">
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе сонце засіяло,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе все на світі стало моє.</pz-text>
                  </div>
                </div>
              </pz-tab>
            </pz-tabs>
          </div>
        </section>
      </div>
    \`
  })
}`,...(D=(W=c.parameters)==null?void 0:W.docs)==null?void 0:D.source}}};var $,I,L;v.parameters={...v.parameters,docs:{...($=v.parameters)==null?void 0:$.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: buildNarrowStorySource()
      }
    }
  },
  render: () => ({
    components: {
      pzTabs: PzTabs,
      pzTab: PzTab,
      pzText: PzText
    },
    template: \`
      <div class="pz-tabs-story">
        <section class="pz-tabs-story-frame">
          <div class="pz-tabs-story-header">
            <div>
              <span class="pz-tabs-story-eyebrow">Example</span>
              <pz-text variant="h4-bold">Constrained width tabs</pz-text>
            </div>
            <span class="pz-tabs-story-chip">360px</span>
          </div>

          <div class="pz-tabs-story-card-surface pz-tabs-story-narrow">
            <pz-tabs
              skin="light"
              max-width="360px"
            >
              <pz-tab
                name="Файли"
                selected
              >
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Думи мої, думи мої,</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Лихо мені з вами!</pz-text>
                  </div>
                </div>
              </pz-tab>

              <pz-tab name="Історія">
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Нащо стали на папері</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сумними рядами?..</pz-text>
                  </div>
                </div>
              </pz-tab>

              <pz-tab name="Нотатки">
                <div class="pz-tabs-story-panel">
                  <div class="pz-tabs-story-stanza">
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Чом вас вітер не розвіяв</pz-text>
                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">В степу, як пилину?</pz-text>
                  </div>
                </div>
              </pz-tab>
            </pz-tabs>
          </div>
        </section>
      </div>
    \`
  })
}`,...(L=(I=v.parameters)==null?void 0:I.docs)==null?void 0:L.source}}};var O,V,j;y.parameters={...y.parameters,docs:{...(O=y.parameters)==null?void 0:O.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: buildExamplesStorySource()
      }
    }
  }
}`,...(j=(V=y.parameters)==null?void 0:V.docs)==null?void 0:j.source}}};const ht=["Playground","ThreeTabs","DefaultSkin","ConstrainedWidth","Examples"];export{v as ConstrainedWidth,c as DefaultSkin,y as Examples,b as Playground,d as ThreeTabs,ht as __namedExportsOrder,yt as default};
