@prozorro/prozorro-ui 0.0.10-beta → 0.0.12-beta

package/dist/app/assets/PzMultiSelect.stories-ZraFVUKD.js

@@ -0,0 +1,453 @@
+import{d as pe,e as V,z as P,D as T,u as g,n as L,o as q,k as i,F as de,A as ce,f as F,l as D,E as J,t as C,J as ue,r as o,g as f,w as me}from"./iframe-BfW4-zQw.js";import{_ as ne}from"./PzIcon-4heVmbY5.js";import{P as ge}from"./PzTag-DkreR1ah.js";import{P as d}from"./PzText-REfIJddB.js";import{u as fe}from"./index-02P5Hwc1.js";import{k as xe}from"./floating-vue-Bvgx7aQ5.js";import{l as $}from"./lodash-CdDiHlzQ.js";import{P as be}from"./PzLabel-BGjTUIxv.js";import{_ as ve}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";import"./_commonjsHelpers-Cpj98o6Y.js";const he=6,ze=["id"],ye=["id","disabled","aria-controls","aria-expanded","aria-label"],Se={class:"pz-multi-select-trigger-text"},Oe=["id","aria-labelledby"],we={class:"pz-multi-select-options"},Ve=["for"],Pe=["id","name","checked","disabled","onChange"],Te={class:"pz-multi-select-option-text"},S=pe({name:"PzMultiSelect",__name:"PzMultiSelect",props:{name:{},options:{},modelValue:{default:()=>[]},label:{default:""},placeholder:{default:""},selectedLabel:{default:"{count} обрано"},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},width:{default:void 0}},emits:["update:modelValue"],setup(e,{emit:n}){const l=e,u=n,m=o(null),{width:ae}=fe(m),c=t=>l.modelValue.some(s=>$.isEqual(s,t)),oe=t=>{const s=c(t)?l.modelValue.filter(a=>!$.isEqual(a,t)):[...l.modelValue,t];u("update:modelValue",s)},N=f(()=>l.options.filter(t=>c(t.value))),k=f(()=>{var s;const t=l.modelValue.length;return t===0?l.placeholder:t===1?((s=N.value[0])==null?void 0:s.label)??l.placeholder:l.selectedLabel.replace("{count}",String(t))}),se=f(()=>l.label||k.value||l.placeholder||l.name),ie=f(()=>{const t=Math.round(ae.value);return t?{inlineSize:`${String(t)}px`}:{}}),O=(t,s)=>t.id??`${l.name}-multi-option-${String(s+1)}`,re=t=>({option:t,selected:c(t.value),disabled:!!t.disabled});return(t,s)=>(q(),V("div",{id:e.name,class:"pz-multi-select",style:L({width:e.width})},[P(g(be),{label:e.label,for:e.name+"-trigger",required:e.required,disabled:e.disabled},{default:T(()=>[P(g(xe),{class:"pz-multi-select-dropdown",theme:"dropdown",placement:"bottom-start",container:"#"+e.name,distance:g(he),disabled:e.disabled},{default:T(({shown:a})=>[i("button",{id:e.name+"-trigger",ref_key:"triggerRef",ref:m,type:"button",class:F(["pz-multi-select-trigger",{"is-open":a,"is-placeholder":!e.modelValue.length}]),disabled:e.disabled,"aria-controls":e.name+"-menu","aria-expanded":a?"true":"false","aria-haspopup":"listbox","aria-label":e.label?void 0:se.value},[i("span",Se,[D(t.$slots,"selected",{selectedOptions:N.value,placeholder:e.placeholder,count:e.modelValue.length},()=>[J(C(k.value),1)],!0)]),P(g(ne),{name:"expand_more",size:"20",class:"pz-multi-select-trigger-icon"})],10,ye)]),popper:T(()=>[i("div",{id:e.name+"-menu",class:"pz-multi-select-menu",style:L(ie.value),role:"group","aria-labelledby":e.name+"-trigger"},[i("div",we,[(q(!0),V(de,null,ce(l.options,(a,w)=>(q(),V("label",{key:O(a,w),for:O(a,w),class:F(["pz-multi-select-option",{"is-selected":c(a.value),"is-disabled":a.disabled}])},[i("input",{id:O(a,w),type:"checkbox",name:e.name+"-option",checked:c(a.value),disabled:a.disabled,class:"pz-multi-select-option-input",onChange:Fe=>oe(a.value)},null,40,Pe),s[0]||(s[0]=i("span",{class:"pz-multi-select-option-checkbox","aria-hidden":"true"},[i("svg",{class:"pz-multi-select-option-check",viewBox:"0 0 16 16",fill:"none"},[i("path",{d:"M3.5 8.25L6.5 11L12.5 5",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})])],-1)),i("span",Te,[D(t.$slots,"default",ue({ref_for:!0},re(a)),()=>[J(C(a.label),1)],!0)])],10,Ve))),128))])],12,Oe)]),_:3},8,["container","distance","disabled"])]),_:3},8,["label","for","required","disabled"])],12,ze))}}),r=ve(S,[["__scopeId","data-v-a2e139a1"]]);S.__docgenInfo=Object.assign({displayName:S.name??S.__name},{name:"PzMultiSelect",exportName:"default",displayName:"PzMultiSelect",description:"",tags:{},props:[{name:"name",required:!0,type:{name:"string"}},{name:"options",required:!0,type:{name:"Array",elements:[{name:"PzFormSelectOption"}]}},{name:"modelValue",required:!0,type:{name:"Array",elements:[{name:"PzFormSelectValue"}]},defaultValue:{func:!1,value:"() => []"}},{name:"label",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"placeholder",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"selectedLabel",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'"{count} обрано"'}},{name:"disabled",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"required",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"width",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"selected",scoped:!0,bindings:[{name:"selected-options",title:"binding"},{name:"placeholder",title:"binding"},{name:"count",title:"binding"}]},{name:"default",scoped:!0,bindings:[]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Form/PzMultiSelect/PzMultiSelect.vue"]});const p=[{label:"09000000-3 - Нафтопродукти, паливо, електроенергія та інші джерела енергії",value:"09000000-3"},{label:"09100000-0 - Паливо",value:"09100000-0"},{label:"09200000-1 - Нафта, вугілля і нафтопродукти",value:"09200000-1"},{label:"09300000-2 - Електрична, теплова, сонячна та атомна енергія",value:"09300000-2"},{label:"90900000-6 - Послуги з прибирання та санітарно-гігієнічні послуги",value:"90900000-6"}],M=[{label:"Чернетка",value:"draft"},{label:"Активний тендер",value:"active"},{label:"Архів",value:"archive"},{label:"Недоступний",value:"unavailable",disabled:!0}],qe=30,Me=2,I=["Будівництво","Послуги","Транспорт","Освіта","Енергія"],Ne=Array.from({length:qe},(e,n)=>{const l=I[n%I.length];return{label:`Категорія ${String(n+1).padStart(Me,"0")} — ${l}`,value:`category-${n+1}`}}),ke=e=>`<template>
+  <PzMultiSelect
+    v-model="value"
+    ${[`name="${e.name}"`,e.label?`label="${e.label}"`:null,e.placeholder?`placeholder="${e.placeholder}"`:null,e.selectedLabel&&e.selectedLabel!=="{count} обрано"?`selected-label="${e.selectedLabel}"`:null,e.required?':required="true"':null,e.disabled?':disabled="true"':null].filter(l=>!!l).join(" ")}
+    :options="options"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const options = [
+  { label: "Option A", value: "a" },
+  { label: "Option B", value: "b" },
+  { label: "Option C", value: "c" },
+];
+
+const value = ref<string[]>([]);
+<\/script>`,Le={title:"Components/Form/PzMultiSelect",component:r,parameters:{docs:{description:{component:"Multi-select dropdown with checkbox rows. Toggling an option emits `update:modelValue` immediately — selection updates as the user clicks. The dropdown stays open while toggling and closes on outside click."},source:{transform:(e,n)=>ke(n.args??Le.args)}}},args:{name:"pz-multi-select-story",label:"Класифікатор",modelValue:[],options:p,placeholder:"Оберіть значення",selectedLabel:"{count} обрано",required:!1,disabled:!1,width:void 0},argTypes:{name:{control:"text",description:"Stable field name used to derive trigger and option ids."},label:{control:"text",description:"Visible label rendered above the trigger."},options:{control:!1,description:"Array of options with `label`, `value`, and optional `disabled` or `id`."},modelValue:{control:!1,description:"Array of currently selected primitive values."},placeholder:{control:"text",description:"Text shown in the trigger when no option is selected."},selectedLabel:{control:"text",description:"Template for the trigger text when 2+ options are selected. Use `{count}` placeholder."},required:{control:"boolean",description:"Adds the required indicator to the label."},disabled:{control:"boolean",description:"Disables the trigger and prevents the menu from opening."},width:{control:"text",description:"Optional explicit width applied to the component root."}},render:e=>({components:{pzMultiSelect:r,pzText:d},setup(){const n=o([...e.modelValue]),l=o(["09100000-0","09300000-2"]),u=o([]);return me(()=>e.modelValue,m=>{n.value=[...m]},{deep:!0}),{args:e,procurementOptions:p,statusOptions:M,value:n,preselected:l,filterValue:u}},template:`
+      <div style="display:flex;flex-direction:column;gap:32px;padding:24px;max-width:720px">
+        <section style="display:flex;flex-direction:column;gap:16px">
+          <pz-text variant="h4-bold">Playground</pz-text>
+          <pz-multi-select
+            v-model="value"
+            :name="args.name"
+            :label="args.label"
+            :placeholder="args.placeholder"
+            :options="args.options"
+            :selected-label="args.selectedLabel"
+            :required="args.required"
+            :disabled="args.disabled"
+            :width="args.width"
+          />
+          <pz-text variant="body-regular">Selected values: {{ JSON.stringify(value) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:16px">
+          <pz-text variant="h4-bold">Pre-populated selection</pz-text>
+          <pz-multi-select
+            v-model="preselected"
+            name="pz-multi-select-preselected"
+            label="Класифікатор з обраними значеннями"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+          />
+          <pz-text variant="body-regular">Selected values: {{ JSON.stringify(preselected) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:16px">
+          <pz-text variant="h4-bold">Status filter (with disabled option)</pz-text>
+          <pz-multi-select
+            v-model="filterValue"
+            name="pz-multi-select-status"
+            label="Статус"
+            placeholder="Усі статуси"
+            :options="statusOptions"
+          />
+          <pz-text variant="body-regular">Selected statuses: {{ JSON.stringify(filterValue) }}</pz-text>
+        </section>
+      </div>
+    `})},x={parameters:{docs:{description:{story:"Default interactive story. Open the dropdown and toggle items — the model updates on each click. The dropdown stays open while selecting and closes on outside click."}}}},b={parameters:{docs:{description:{story:"Custom rendering via the `#selected` and default scoped slots. The `#selected` slot receives `{ selectedOptions, placeholder, count }` and controls the trigger content. The default slot receives `{ option, selected, disabled }` and controls each option row."}}},render:()=>({components:{pzMultiSelect:r,pzText:d,pzTag:ge,pzIcon:ne},setup(){const e=o(["09100000-0"]),n=o([]),l=o([]);return{tagsValue:e,counterValue:n,richOptionValue:l,procurementOptions:p,statusOptions:M}},template:`
+      <div style="display:flex;flex-direction:column;gap:32px;padding:24px;max-width:720px">
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Trigger renders selected values as tags</pz-text>
+          <pz-multi-select
+            v-model="tagsValue"
+            name="pz-multi-select-slots-tags"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+          >
+            <template #selected="{ selectedOptions, placeholder, count }">
+              <span v-if="count === 0" style="color:var(--pz-color-text-secondary)">{{ placeholder }}</span>
+              <span v-else style="display:inline-flex;flex-wrap:wrap;gap:6px">
+                <pz-tag v-for="opt in selectedOptions" :key="String(opt.value)" variant="blue">
+                  {{ opt.value }}
+                </pz-tag>
+              </span>
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(tagsValue) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Custom counter trigger</pz-text>
+          <pz-multi-select
+            v-model="counterValue"
+            name="pz-multi-select-slots-counter"
+            label="Статус"
+            placeholder="Усі статуси"
+            :options="statusOptions"
+          >
+            <template #selected="{ selectedOptions, placeholder, count }">
+              <span v-if="count === 0">{{ placeholder }}</span>
+              <span v-else-if="count === 1" style="font-weight:600">{{ selectedOptions[0]?.label }}</span>
+              <span v-else style="font-weight:600">Обрано {{ count }} зі {{ statusOptions.length }}</span>
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(counterValue) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Rich option rows (default slot)</pz-text>
+          <pz-multi-select
+            v-model="richOptionValue"
+            name="pz-multi-select-slots-options"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+          >
+            <template #default="{ option, selected }">
+              <span style="flex:1">{{ option.label }}</span>
+              <pz-icon v-if="selected" name="check" size="16" />
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(richOptionValue) }}</pz-text>
+        </section>
+      </div>
+    `})},v={parameters:{docs:{description:{story:"Required field with a visible label indicator. Use the `required` prop together with `label` to integrate with form validation flows."}}},render:()=>({components:{pzMultiSelect:r,pzText:d},setup(){return{value:o([]),procurementOptions:p}},template:`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px;max-width:480px">
+        <pz-multi-select
+          v-model="value"
+          name="pz-multi-select-required"
+          label="Класифікатор"
+          placeholder="Оберіть значення"
+          :options="procurementOptions"
+          required
+        />
+        <pz-text variant="body-regular">
+          Selected: {{ value.length === 0 ? "—" : JSON.stringify(value) }}
+        </pz-text>
+      </div>
+    `})},h={parameters:{docs:{description:{story:"Disabled state with a pre-populated selection. The trigger renders the selected count but cannot be opened or modified."}}},render:()=>({components:{pzMultiSelect:r,pzText:d},setup(){const e=o([]),n=o(["09100000-0","09300000-2"]);return{empty:e,preselected:n,procurementOptions:p}},template:`
+      <div style="display:flex;flex-direction:column;gap:24px;padding:24px;max-width:480px">
+        <section style="display:flex;flex-direction:column;gap:8px">
+          <pz-text variant="body-semibold">Disabled, no selection</pz-text>
+          <pz-multi-select
+            v-model="empty"
+            name="pz-multi-select-disabled-empty"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+            disabled
+          />
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:8px">
+          <pz-text variant="body-semibold">Disabled, with pre-selected values</pz-text>
+          <pz-multi-select
+            v-model="preselected"
+            name="pz-multi-select-disabled-preselected"
+            label="Класифікатор"
+            :options="procurementOptions"
+            disabled
+          />
+        </section>
+      </div>
+    `})},z={parameters:{docs:{description:{story:"Long option list demonstrating the scrollable dropdown body. The options container caps its height and scrolls vertically while the trigger and surrounding chrome remain fixed."}}},render:()=>({components:{pzMultiSelect:r,pzText:d},setup(){return{value:o(["category-3","category-12"]),longOptions:Ne}},template:`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px;max-width:480px">
+        <pz-multi-select
+          v-model="value"
+          name="pz-multi-select-long-list"
+          label="Категорії"
+          placeholder="Оберіть категорії"
+          :options="longOptions"
+        />
+        <pz-text variant="body-regular">Selected: {{ JSON.stringify(value) }}</pz-text>
+      </div>
+    `})},y={parameters:{docs:{description:{story:"Realistic page-level filter row combining several PzMultiSelect controls in a horizontal layout. Each control updates its own model independently."}}},render:()=>({components:{pzMultiSelect:r,pzText:d},setup(){const e=o(["active"]),n=o([]);return{statuses:e,categories:n,statusOptions:M,procurementOptions:p}},template:`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px">
+        <pz-text variant="h4-bold">Filter by</pz-text>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px">
+          <pz-multi-select
+            v-model="statuses"
+            name="pz-multi-select-filter-status"
+            label="Статус"
+            placeholder="Усі статуси"
+            :options="statusOptions"
+          />
+          <pz-multi-select
+            v-model="categories"
+            name="pz-multi-select-filter-category"
+            label="Класифікатор"
+            placeholder="Усі категорії"
+            :options="procurementOptions"
+          />
+        </div>
+        <pz-text variant="body-regular">
+          Active filters — statuses: {{ JSON.stringify(statuses) }}, categories: {{ JSON.stringify(categories) }}
+        </pz-text>
+      </div>
+    `})};var A,E,R;x.parameters={...x.parameters,docs:{...(A=x.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Default interactive story. Open the dropdown and toggle items — the model updates on each click. The dropdown stays open while selecting and closes on outside click."
+      }
+    }
+  }
+}`,...(R=(E=x.parameters)==null?void 0:E.docs)==null?void 0:R.source}}};var _,B,W;b.parameters={...b.parameters,docs:{...(_=b.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Custom rendering via the \`#selected\` and default scoped slots. The \`#selected\` slot receives \`{ selectedOptions, placeholder, count }\` and controls the trigger content. The default slot receives \`{ option, selected, disabled }\` and controls each option row."
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzMultiSelect: PzMultiSelect,
+      pzText: PzText,
+      pzTag: PzTag,
+      pzIcon: PzIcon
+    },
+    setup() {
+      const tagsValue = ref<PzFormSelectValue[]>(["09100000-0"]);
+      const counterValue = ref<PzFormSelectValue[]>([]);
+      const richOptionValue = ref<PzFormSelectValue[]>([]);
+      return {
+        tagsValue,
+        counterValue,
+        richOptionValue,
+        procurementOptions,
+        statusOptions
+      };
+    },
+    template: \`
+      <div style="display:flex;flex-direction:column;gap:32px;padding:24px;max-width:720px">
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Trigger renders selected values as tags</pz-text>
+          <pz-multi-select
+            v-model="tagsValue"
+            name="pz-multi-select-slots-tags"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+          >
+            <template #selected="{ selectedOptions, placeholder, count }">
+              <span v-if="count === 0" style="color:var(--pz-color-text-secondary)">{{ placeholder }}</span>
+              <span v-else style="display:inline-flex;flex-wrap:wrap;gap:6px">
+                <pz-tag v-for="opt in selectedOptions" :key="String(opt.value)" variant="blue">
+                  {{ opt.value }}
+                </pz-tag>
+              </span>
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(tagsValue) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Custom counter trigger</pz-text>
+          <pz-multi-select
+            v-model="counterValue"
+            name="pz-multi-select-slots-counter"
+            label="Статус"
+            placeholder="Усі статуси"
+            :options="statusOptions"
+          >
+            <template #selected="{ selectedOptions, placeholder, count }">
+              <span v-if="count === 0">{{ placeholder }}</span>
+              <span v-else-if="count === 1" style="font-weight:600">{{ selectedOptions[0]?.label }}</span>
+              <span v-else style="font-weight:600">Обрано {{ count }} зі {{ statusOptions.length }}</span>
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(counterValue) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Rich option rows (default slot)</pz-text>
+          <pz-multi-select
+            v-model="richOptionValue"
+            name="pz-multi-select-slots-options"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+          >
+            <template #default="{ option, selected }">
+              <span style="flex:1">{{ option.label }}</span>
+              <pz-icon v-if="selected" name="check" size="16" />
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(richOptionValue) }}</pz-text>
+        </section>
+      </div>
+    \`
+  })
+}`,...(W=(B=b.parameters)==null?void 0:B.docs)==null?void 0:W.source}}};var U,j,G;v.parameters={...v.parameters,docs:{...(U=v.parameters)==null?void 0:U.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Required field with a visible label indicator. Use the \`required\` prop together with \`label\` to integrate with form validation flows."
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzMultiSelect: PzMultiSelect,
+      pzText: PzText
+    },
+    setup() {
+      const value = ref<PzFormSelectValue[]>([]);
+      return {
+        value,
+        procurementOptions
+      };
+    },
+    template: \`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px;max-width:480px">
+        <pz-multi-select
+          v-model="value"
+          name="pz-multi-select-required"
+          label="Класифікатор"
+          placeholder="Оберіть значення"
+          :options="procurementOptions"
+          required
+        />
+        <pz-text variant="body-regular">
+          Selected: {{ value.length === 0 ? "—" : JSON.stringify(value) }}
+        </pz-text>
+      </div>
+    \`
+  })
+}`,...(G=(j=v.parameters)==null?void 0:j.docs)==null?void 0:G.source}}};var X,Z,H;h.parameters={...h.parameters,docs:{...(X=h.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled state with a pre-populated selection. The trigger renders the selected count but cannot be opened or modified."
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzMultiSelect: PzMultiSelect,
+      pzText: PzText
+    },
+    setup() {
+      const empty = ref<PzFormSelectValue[]>([]);
+      const preselected = ref<PzFormSelectValue[]>(["09100000-0", "09300000-2"]);
+      return {
+        empty,
+        preselected,
+        procurementOptions
+      };
+    },
+    template: \`
+      <div style="display:flex;flex-direction:column;gap:24px;padding:24px;max-width:480px">
+        <section style="display:flex;flex-direction:column;gap:8px">
+          <pz-text variant="body-semibold">Disabled, no selection</pz-text>
+          <pz-multi-select
+            v-model="empty"
+            name="pz-multi-select-disabled-empty"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+            disabled
+          />
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:8px">
+          <pz-text variant="body-semibold">Disabled, with pre-selected values</pz-text>
+          <pz-multi-select
+            v-model="preselected"
+            name="pz-multi-select-disabled-preselected"
+            label="Класифікатор"
+            :options="procurementOptions"
+            disabled
+          />
+        </section>
+      </div>
+    \`
+  })
+}`,...(H=(Z=h.parameters)==null?void 0:Z.docs)==null?void 0:H.source}}};var K,Q,Y;z.parameters={...z.parameters,docs:{...(K=z.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Long option list demonstrating the scrollable dropdown body. The options container caps its height and scrolls vertically while the trigger and surrounding chrome remain fixed."
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzMultiSelect: PzMultiSelect,
+      pzText: PzText
+    },
+    setup() {
+      const value = ref<PzFormSelectValue[]>(["category-3", "category-12"]);
+      return {
+        value,
+        longOptions
+      };
+    },
+    template: \`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px;max-width:480px">
+        <pz-multi-select
+          v-model="value"
+          name="pz-multi-select-long-list"
+          label="Категорії"
+          placeholder="Оберіть категорії"
+          :options="longOptions"
+        />
+        <pz-text variant="body-regular">Selected: {{ JSON.stringify(value) }}</pz-text>
+      </div>
+    \`
+  })
+}`,...(Y=(Q=z.parameters)==null?void 0:Q.docs)==null?void 0:Y.source}}};var ee,te,le;y.parameters={...y.parameters,docs:{...(ee=y.parameters)==null?void 0:ee.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Realistic page-level filter row combining several PzMultiSelect controls in a horizontal layout. Each control updates its own model independently."
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzMultiSelect: PzMultiSelect,
+      pzText: PzText
+    },
+    setup() {
+      const statuses = ref<PzFormSelectValue[]>(["active"]);
+      const categories = ref<PzFormSelectValue[]>([]);
+      return {
+        statuses,
+        categories,
+        statusOptions,
+        procurementOptions
+      };
+    },
+    template: \`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px">
+        <pz-text variant="h4-bold">Filter by</pz-text>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px">
+          <pz-multi-select
+            v-model="statuses"
+            name="pz-multi-select-filter-status"
+            label="Статус"
+            placeholder="Усі статуси"
+            :options="statusOptions"
+          />
+          <pz-multi-select
+            v-model="categories"
+            name="pz-multi-select-filter-category"
+            label="Класифікатор"
+            placeholder="Усі категорії"
+            :options="procurementOptions"
+          />
+        </div>
+        <pz-text variant="body-regular">
+          Active filters — statuses: {{ JSON.stringify(statuses) }}, categories: {{ JSON.stringify(categories) }}
+        </pz-text>
+      </div>
+    \`
+  })
+}`,...(le=(te=y.parameters)==null?void 0:te.docs)==null?void 0:le.source}}};const Ue=["Playground","WithSlots","Required","Disabled","LongList","InFilterRow"];export{h as Disabled,y as InFilterRow,z as LongList,x as Playground,v as Required,b as WithSlots,Ue as __namedExportsOrder,Le as default};

package/dist/app/assets/{PzNav.stories-5KiqcPrd.js → PzNav.stories-G7KKxcZ2.js}

@@ -1,4 +1,4 @@
-import{d as R,e as r,F,s as $,o,f as m,i as B,j,l as y,u as x,t as b,y as A,R as O,B as L,g as V,h as z,S as f}from"./iframe-Ckq2fQkL.js";import{_ as W,P as g}from"./PzText-BOcxbzaG.js";import"./preload-helper-C1FmrZbK.js";const Q={class:"pz-nav"},l=R({name:"PzNav",__name:"PzNav",props:{config:{}},setup(s){const t=L(),h=s,d=a=>{const[n=""]=a.split("#");return n?n.startsWith("/")?n:`/${n}`:"/"},q=a=>a.startsWith("#")?a:d(a),E=V(()=>!h.config.some(a=>d(a.path)===t.path)),u=a=>d(a.path)===t.path||E.value&&!!a.isDefault;return(a,n)=>(o(),r("ul",Q,[(o(!0),r(F,null,$(h.config,(e,M)=>(o(),r("li",{key:`${e.path}-${M}`,class:m(["pz-nav__item",[{disabled:e.disabled},{active:u(e)}]])},[e.disabled?(o(),r("span",{key:1,class:m(["pz-nav__text",{active:u(e)}])},[y(a.$slots,"view",{data:e},()=>[x(b(e.text),1)],!0)],2)):(o(),B(A(O),{key:0,to:q(e.path),class:m(["pz-nav__text",{active:u(e)}])},{default:j(()=>[y(a.$slots,"view",{data:e},()=>[x(b(e.text),1)],!0)]),_:2},1032,["to","class"]))],2))),128))]))}}),v=W(l,[["__scopeId","data-v-5d1c69f0"]]);l.__docgenInfo=Object.assign({displayName:l.name??l.__name},{name:"PzNav",exportName:"default",displayName:"PzNav",description:"",tags:{},props:[{name:"config",required:!0,type:{name:"Array",elements:[{name:"PzNavItem"}]}}],slots:[{name:"view",scoped:!0,bindings:[{name:"data",title:"binding"}]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Navigation/PzNav/PzNav.vue"]});const N=[{path:"/market/procedures",text:"Закупівлі",isDefault:!0},{path:"/market/contracts",text:"Договори"},{path:"/market/plans",text:"Плани"},{path:"/market/selection",text:"Відбори"},{path:"/market/products",text:"Товари"}],U=[{path:"/tender/details",text:"Деталі закупівлі",isDefault:!0},{path:"/tender/questions",text:"Питання та вимоги (0)"},{path:"/tender/complaints",text:"Скарги (0)"},{path:"/tender/monitoring",text:"Моніторинг (0)",disabled:!0}],G=[{path:"/archive/overview",text:"Overview",isDefault:!0},{path:"/archive/history",text:"History",disabled:!0},{path:"/archive/files",text:"Files"}],H=s=>`<template>
+import{d as R,e as r,F,A as $,o,f as m,B as A,D as B,l as y,E as x,t as b,u as j,R as O,K as L,g as V,j as z,a1 as f}from"./iframe-BfW4-zQw.js";import{P as g}from"./PzText-REfIJddB.js";import{_ as W}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const Q={class:"pz-nav"},l=R({name:"PzNav",__name:"PzNav",props:{config:{}},setup(s){const t=L(),h=s,d=a=>{const[n=""]=a.split("#");return n?n.startsWith("/")?n:`/${n}`:"/"},E=a=>a.startsWith("#")?a:d(a),q=V(()=>!h.config.some(a=>d(a.path)===t.path)),u=a=>d(a.path)===t.path||q.value&&!!a.isDefault;return(a,n)=>(o(),r("ul",Q,[(o(!0),r(F,null,$(h.config,(e,M)=>(o(),r("li",{key:`${e.path}-${M}`,class:m(["pz-nav__item",[{disabled:e.disabled},{active:u(e)}]])},[e.disabled?(o(),r("span",{key:1,class:m(["pz-nav__text",{active:u(e)}])},[y(a.$slots,"view",{data:e},()=>[x(b(e.text),1)],!0)],2)):(o(),A(j(O),{key:0,to:E(e.path),class:m(["pz-nav__text",{active:u(e)}])},{default:B(()=>[y(a.$slots,"view",{data:e},()=>[x(b(e.text),1)],!0)]),_:2},1032,["to","class"]))],2))),128))]))}}),v=W(l,[["__scopeId","data-v-5d1c69f0"]]);l.__docgenInfo=Object.assign({displayName:l.name??l.__name},{name:"PzNav",exportName:"default",displayName:"PzNav",description:"",tags:{},props:[{name:"config",required:!0,type:{name:"Array",elements:[{name:"PzNavItem"}]}}],slots:[{name:"view",scoped:!0,bindings:[{name:"data",title:"binding"}]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Navigation/PzNav/PzNav.vue"]});const N=[{path:"/market/procedures",text:"Закупівлі",isDefault:!0},{path:"/market/contracts",text:"Договори"},{path:"/market/plans",text:"Плани"},{path:"/market/selection",text:"Відбори"},{path:"/market/products",text:"Товари"}],U=[{path:"/tender/details",text:"Деталі закупівлі",isDefault:!0},{path:"/tender/questions",text:"Питання та вимоги (0)"},{path:"/tender/complaints",text:"Скарги (0)"},{path:"/tender/monitoring",text:"Моніторинг (0)",disabled:!0}],G=[{path:"/archive/overview",text:"Overview",isDefault:!0},{path:"/archive/history",text:"History",disabled:!0},{path:"/archive/files",text:"Files"}],H=s=>`<template>
   <PzNav :config='${JSON.stringify(s.config,null,2)}' />
 </template>`,J=()=>`<template>
   <PzNav :config="config">
@@ -96,7 +96,7 @@ import{d as R,e as r,F,s as $,o,f as m,i as B,j,l as y,u as x,t as b,y as A,R as
           </div>
         </section>
       </div>
-    `})};var w,P,k;i.parameters={...i.parameters,docs:{...(w=i.parameters)==null?void 0:w.docs,source:{originalSource:"{}",...(k=(P=i.parameters)==null?void 0:P.docs)==null?void 0:k.source}}};var _,S,D;c.parameters={...c.parameters,docs:{...(_=c.parameters)==null?void 0:_.docs,source:{originalSource:`{
+    `})};var w,P,k;i.parameters={...i.parameters,docs:{...(w=i.parameters)==null?void 0:w.docs,source:{originalSource:"{}",...(k=(P=i.parameters)==null?void 0:P.docs)==null?void 0:k.source}}};var _,D,S;c.parameters={...c.parameters,docs:{...(_=c.parameters)==null?void 0:_.docs,source:{originalSource:`{
   args: {
     config: archiveNavItems
   },
@@ -132,7 +132,7 @@ import{d as R,e as r,F,s as $,o,f as m,i as B,j,l as y,u as x,t as b,y as A,R as
       </div>
     \`
   })
-}`,...(D=(S=c.parameters)==null?void 0:S.docs)==null?void 0:D.source}}};var I,T,C;p.parameters={...p.parameters,docs:{...(I=p.parameters)==null?void 0:I.docs,source:{originalSource:`{
+}`,...(S=(D=c.parameters)==null?void 0:D.docs)==null?void 0:S.source}}};var I,T,C;p.parameters={...p.parameters,docs:{...(I=p.parameters)==null?void 0:I.docs,source:{originalSource:`{
   parameters: {
     docs: {
       source: {
@@ -194,4 +194,4 @@ import{d as R,e as r,F,s as $,o,f as m,i as B,j,l as y,u as x,t as b,y as A,R as
       </div>
     \`
   })
-}`,...(C=(T=p.parameters)==null?void 0:T.docs)==null?void 0:C.source}}};const aa=["Playground","DefaultFallback","CustomItemView"];export{p as CustomItemView,c as DefaultFallback,i as Playground,aa as __namedExportsOrder,K as default};
+}`,...(C=(T=p.parameters)==null?void 0:T.docs)==null?void 0:C.source}}};const ta=["Playground","DefaultFallback","CustomItemView"];export{p as CustomItemView,c as DefaultFallback,i as Playground,ta as __namedExportsOrder,K as default};

package/dist/app/assets/{PzNumberFormat.stories-QyheTXgc.js → PzNumberFormat.stories-Cbj23Stp.js}

@@ -1,4 +1,4 @@
-import{P as o}from"./PzNumberFormat-D5xYsZ3A.js";import{P as a}from"./PzText-BOcxbzaG.js";import"./lodash-CdDiHlzQ.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-Ckq2fQkL.js";import"./preload-helper-C1FmrZbK.js";const c={title:"Utilities/PzNumberFormat",parameters:{docs:{description:{component:"The `PzNumberFormat` utility is used to format numbers consistently, adding division for thousands and handling decimals."}}}},e={render:()=>({components:{pzText:a},setup(){return{examples:[{value:1234567,description:"Millions without decimals"},{value:1234567891e-3,precision:2,description:"Millions with 2 decimals precision"},{value:"54321.1",description:"String input with 1 decimal"},{value:0,description:"Zero"},{value:"-",description:"Invalid/empty dash"},{value:null,description:"Null value"}].map(n=>({...n,result:new o(n.value,n.precision).number}))}},template:`
+import{P as o}from"./PzNumberFormat-D5xYsZ3A.js";import{P as a}from"./PzText-REfIJddB.js";import"./lodash-CdDiHlzQ.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BfW4-zQw.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const x={title:"Utilities/PzNumberFormat",parameters:{docs:{description:{component:"The `PzNumberFormat` utility is used to format numbers consistently, adding division for thousands and handling decimals."}}}},e={render:()=>({components:{pzText:a},setup(){return{examples:[{value:1234567,description:"Millions without decimals"},{value:1234567891e-3,precision:2,description:"Millions with 2 decimals precision"},{value:"54321.1",description:"String input with 1 decimal"},{value:0,description:"Zero"},{value:"-",description:"Invalid/empty dash"},{value:null,description:"Null value"}].map(n=>({...n,result:new o(n.value,n.precision).number}))}},template:`
       <div>
         <pz-text variant="h4-semibold">PzNumberFormat Usage</pz-text>
         <ul style="margin-top: 16px; padding-left: 20px;">
@@ -54,4 +54,4 @@ import{P as o}from"./PzNumberFormat-D5xYsZ3A.js";import{P as a}from"./PzText-BOc
       </div>
     \`
   })
-}`,...(r=(i=e.parameters)==null?void 0:i.docs)==null?void 0:r.source}}};const x=["Usage"];export{e as Usage,x as __namedExportsOrder,c as default};
+}`,...(r=(i=e.parameters)==null?void 0:i.docs)==null?void 0:r.source}}};const v=["Usage"];export{e as Usage,v as __namedExportsOrder,x as default};

package/dist/app/assets/PzPagination-DoBWX1Bo.js

@@ -0,0 +1 @@
+import{d as I,e as o,k as s,z as y,u as h,F as q,A as w,g as l,o as i,f as T,t as $}from"./iframe-BfW4-zQw.js";import{_ as V}from"./PzIcon-4heVmbY5.js";import{_ as B}from"./_plugin-vue_export-helper-DlAUqK2U.js";const E={class:"pz-pagination","aria-label":"Pagination"},M={class:"pz-pagination__list"},S=["disabled"],j={key:0,class:"pz-pagination__dots","aria-hidden":"true"},A=["aria-current","onClick"],L=["disabled"],m=1,r=I({name:"PzPagination",__name:"PzPagination",props:{modelValue:{},total:{},perPage:{},radius:{default:2}},emits:["update:modelValue"],setup(p,{emit:k}){const a=p,u=k,_=l(()=>Math.ceil(a.total/a.perPage)),f=l(()=>a.modelValue<=1),P=l(()=>a.modelValue>=_.value),N=l(()=>{const t=_.value;if(t<=0)return[];if(t===1)return[{type:"page",page:m}];const d=a.modelValue,e=a.radius,c=m+1,b=t-1,z=Math.max(c,d-e),v=Math.min(b,d+e),n=[{type:"page",page:m}];z>c&&n.push({type:"dots",side:"left"});for(let g=z;g<=v;g++)n.push({type:"page",page:g});return v<b&&n.push({type:"dots",side:"right"}),n.push({type:"page",page:t}),n}),x=t=>{t!==a.modelValue&&u("update:modelValue",t)},C=()=>{f.value||u("update:modelValue",a.modelValue-1)},F=()=>{P.value||u("update:modelValue",a.modelValue+1)};return(t,d)=>(i(),o("nav",E,[s("ul",M,[s("li",null,[s("button",{type:"button",class:"pz-pagination__btn pz-pagination__btn--nav",disabled:f.value,"aria-label":"Попередня сторінка",onClick:C},[y(h(V),{name:"chevron_left",size:"24"})],8,S)]),(i(!0),o(q,null,w(N.value,e=>(i(),o("li",{key:e.type==="page"?`p-${e.page}`:`d-${e.side}`,class:"pz-pagination__item"},[e.type==="dots"?(i(),o("span",j," … ")):(i(),o("button",{key:1,type:"button",class:T(["pz-pagination__btn",{"pz-pagination__btn--active":e.page===p.modelValue}]),"aria-current":e.page===p.modelValue?"page":void 0,onClick:c=>x(e.page)},$(e.page),11,A))]))),128)),s("li",null,[s("button",{type:"button",class:"pz-pagination__btn pz-pagination__btn--nav",disabled:P.value,"aria-label":"Наступна сторінка",onClick:F},[y(h(V),{name:"chevron_right",size:"24"})],8,L)])])]))}}),R=B(r,[["__scopeId","data-v-9513ae82"]]);r.__docgenInfo=Object.assign({displayName:r.name??r.__name},{name:"PzPagination",exportName:"default",displayName:"PzPagination",description:"",tags:{},props:[{name:"modelValue",required:!0,type:{name:"number"}},{name:"total",required:!0,type:{name:"number"}},{name:"perPage",required:!0,type:{name:"number"}},{name:"radius",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"2"}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Navigation/PzPagination/PzPagination.vue"]});export{R as P};

package/dist/app/assets/PzPagination-k9D0Hxrx.css

@@ -0,0 +1 @@
+.pz-pagination__list[data-v-9513ae82]{display:flex;align-items:center;gap:var(--pz-space-4);list-style:none;margin:0;padding:0}.pz-pagination__item[data-v-9513ae82]{display:flex}.pz-pagination__btn[data-v-9513ae82]{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--pz-color-text-primary);cursor:pointer;transition:color .16s ease,background-color .16s ease,border-color .16s ease;font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-pagination__btn[data-v-9513ae82]:hover:not(:disabled){background-color:var(--pz-color-grey-20);border-color:var(--pz-color-tag-blue);color:var(--pz-color-text-link-hover)}.pz-pagination__btn--active[data-v-9513ae82]{border-color:var(--pz-color-tag-blue)}.pz-pagination__btn--nav[data-v-9513ae82]{color:var(--pz-color-text-primary)}.pz-pagination__btn--nav[data-v-9513ae82]:disabled{opacity:.35;cursor:default}.pz-pagination__dots[data-v-9513ae82]{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}

package/dist/app/assets/{PzPagination-07CphuYh.css → PzPagination-ohvV8gN-.css}

@@ -1 +1 @@
-.pz-pagination-story{display:grid;gap:var(--pz-space-24)}.pz-pagination-story-board,.pz-pagination-story-gallery{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:var(--pz-space-24);background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 34%),linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)));box-shadow:0 18px 48px color-mix(in srgb,var(--pz-color-black-90) 7%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 96%,transparent)}.pz-pagination-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-pagination-story-eyebrow,.pz-pagination-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:var(--pz-space-8) var(--pz-space-16);border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 92%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.pz-pagination-story-preview{display:grid;padding:var(--pz-space-24);border:1px dashed color-mix(in srgb,var(--pz-color-grey-40) 70%,transparent);border-radius:var(--pz-space-20);background:linear-gradient(color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px);background-size:28px 28px}.pz-pagination-story-grid{display:grid;gap:var(--pz-space-16)}.pz-pagination-story-card{display:grid;gap:var(--pz-space-8);padding:var(--pz-space-20);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-pagination-story-card-label{margin:0;color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-12);font-weight:400;line-height:1.5}.pz-pagination-story-current{display:flex;align-items:center;gap:var(--pz-space-8);padding:var(--pz-space-4) var(--pz-space-8);border-radius:4px;background:color-mix(in srgb,var(--pz-color-blue-10) 80%,transparent);width:fit-content}.pz-pagination-story-current-label{color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-12);font-weight:400;line-height:1.5}.pz-pagination-story-current-value{color:var(--pz-color-text-link);font-size:var(--pz-font-size-12);font-weight:700;line-height:1.5}.pz-pagination__list[data-v-9513ae82]{display:flex;align-items:center;gap:var(--pz-space-4);list-style:none;margin:0;padding:0}.pz-pagination__item[data-v-9513ae82]{display:flex}.pz-pagination__btn[data-v-9513ae82]{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--pz-color-text-primary);cursor:pointer;transition:color .16s ease,background-color .16s ease,border-color .16s ease;font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-pagination__btn[data-v-9513ae82]:hover:not(:disabled){background-color:var(--pz-color-grey-20);border-color:var(--pz-color-tag-blue);color:var(--pz-color-text-link-hover)}.pz-pagination__btn--active[data-v-9513ae82]{border-color:var(--pz-color-tag-blue)}.pz-pagination__btn--nav[data-v-9513ae82]{color:var(--pz-color-text-primary)}.pz-pagination__btn--nav[data-v-9513ae82]:disabled{opacity:.35;cursor:default}.pz-pagination__dots[data-v-9513ae82]{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}
+.pz-pagination-story{display:grid;gap:var(--pz-space-24)}.pz-pagination-story-board,.pz-pagination-story-gallery{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:var(--pz-space-24);background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 34%),linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)));box-shadow:0 18px 48px color-mix(in srgb,var(--pz-color-black-90) 7%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 96%,transparent)}.pz-pagination-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-pagination-story-eyebrow,.pz-pagination-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:var(--pz-space-8) var(--pz-space-16);border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 92%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.pz-pagination-story-preview{display:grid;padding:var(--pz-space-24);border:1px dashed color-mix(in srgb,var(--pz-color-grey-40) 70%,transparent);border-radius:var(--pz-space-20);background:linear-gradient(color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px);background-size:28px 28px}.pz-pagination-story-grid{display:grid;gap:var(--pz-space-16)}.pz-pagination-story-card{display:grid;gap:var(--pz-space-8);padding:var(--pz-space-20);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-pagination-story-card-label{margin:0;color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-12);font-weight:400;line-height:1.5}.pz-pagination-story-current{display:flex;align-items:center;gap:var(--pz-space-8);padding:var(--pz-space-4) var(--pz-space-8);border-radius:4px;background:color-mix(in srgb,var(--pz-color-blue-10) 80%,transparent);width:fit-content}.pz-pagination-story-current-label{color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-12);font-weight:400;line-height:1.5}.pz-pagination-story-current-value{color:var(--pz-color-text-link);font-size:var(--pz-font-size-12);font-weight:700;line-height:1.5}