@prozorro/prozorro-ui 0.0.7-beta → 0.0.8

package/dist/app/assets/PzScrollTo.stories-C0m8oG4O.js

@@ -0,0 +1,81 @@
+import{i as a,L as p,M as y}from"./iframe-XnrfGA2g.js";import{P as f}from"./PzText-LfRr6NF7.js";import"./preload-helper-C1FmrZbK.js";const g=["auto","instant","smooth"],b=2e3,z="pz-scroll-to-highlight",S="smooth",c=t=>typeof t=="number"?{offsetTop:t}:t??{},m=t=>{if(typeof window>"u"||typeof document>"u")return null;if(typeof t=="number")return t;const o=typeof t=="string"?document.querySelector(t):t instanceof HTMLElement?t:null;return o?window.scrollY+o.getBoundingClientRect().top:null},d=(t,o)=>{if(!t||typeof window>"u")return;const s=o.highlightClassName??z,e=o.highlightDuration??b;s&&(t.classList.add(s),window.setTimeout(()=>{t.classList.remove(s)},e))};class r{static moveById(o,s){if(typeof document>"u")return!1;const e=document.getElementById(o);if(!e)return!1;const n=r.moveToElement(e,s);return n&&d(e,c(s)),n}static moveToTop(o){return r.moveTo(0,o)}static moveTo(o,s){if(typeof window>"u")return!1;const e=c(s);return window.scrollTo({top:Math.max(o-(e.offsetTop??0),0),left:0,behavior:e.behavior??S}),!0}static moveByQuerySelector(o,s){if(typeof document>"u")return!1;const e=document.querySelector(o);if(!e)return!1;const n=r.moveToElement(e,s);return n&&d(e,c(s)),n}static moveToElement(o,s){const e=m(o);return e===null?!1:r.moveTo(e,s)}static move(o,s){const e=m(o);return e===null?!1:r.moveTo(e,s)}}const T=24,P="100vh",x=t=>{const o=[t.behavior!=="smooth"?`behavior: "${t.behavior}"`:null,t.offsetTop!==T?`offsetTop: ${t.offsetTop}`:null].filter(e=>!!e).join(", ");return`<script setup lang="ts">
+import { PzScrollTo } from "@prozorro/prozorro-ui";
+
+const scrollToTenderDocuments = (): void => {
+  PzScrollTo.moveById("documents"${o?`, { ${o} }`:""});
+};
+<\/script>
+
+<template>
+  <button type="button" @click="scrollToTenderDocuments">Scroll to documents</button>
+</template>`},E=[{id:"overview",label:"Overview",copy:"Short context for the procurement scenario and the current workflow state."},{id:"criteria",label:"Criteria",copy:"Eligibility and qualification requirements for suppliers and attached evidence."},{id:"documents",label:"Documents",copy:"Attached files, visual previews, and supporting procurement materials for review."}],L=[{name:"moveById",signature:"PzScrollTo.moveById(id, options?)",description:"Scrolls to an element found by id and optionally highlights it after scrolling.",params:"`id: string`, `options?: number | PzScrollToOptions`",example:'PzScrollTo.moveById("documents", { offsetTop: 24, behavior: "smooth" });'},{name:"moveByQuerySelector",signature:"PzScrollTo.moveByQuerySelector(selector, options?)",description:"Scrolls to the first element matching a CSS selector and can highlight it.",params:"`selector: string`, `options?: number | PzScrollToOptions`",example:'PzScrollTo.moveByQuerySelector("#documents .item", 32);'},{name:"moveTo",signature:"PzScrollTo.moveTo(targetTop, options?)",description:"Scrolls to an absolute Y position in the page.",params:"`targetTop: number`, `options?: number | PzScrollToOptions`",example:'PzScrollTo.moveTo(640, { behavior: "auto" });'},{name:"moveToTop",signature:"PzScrollTo.moveToTop(options?)",description:"Scrolls the page back to the top.",params:"`options?: PzScrollToOptions`",example:'PzScrollTo.moveToTop({ behavior: "smooth" });'},{name:"moveToElement",signature:"PzScrollTo.moveToElement(element, options?)",description:"Scrolls directly to a passed HTMLElement instance.",params:"`element: HTMLElement`, `options?: number | PzScrollToOptions`",example:"PzScrollTo.moveToElement(sectionRef.value, { offsetTop: 16 });"},{name:"move",signature:"PzScrollTo.move(target, options?)",description:"Universal method that accepts a number, selector, or HTMLElement target.",params:"`target: number | string | HTMLElement`, `options?: number | PzScrollToOptions`",example:'PzScrollTo.move("#documents", { highlightClassName: "pz-scroll-to-highlight" });'}],w=[{name:"PzScrollBehavior",signature:'type PzScrollBehavior = "auto" | "instant" | "smooth"',description:"Defines the scroll behavior passed to `window.scrollTo`.",example:'const behavior: PzScrollBehavior = "smooth";'},{name:"PzScrollToTarget",signature:"type PzScrollToTarget = number | string | HTMLElement",description:"Universal target type accepted by `move(...)`: absolute Y position, CSS selector, or HTMLElement.",example:'PzScrollTo.move("#documents");'},{name:"PzScrollToOptions",signature:"interface PzScrollToOptions",description:"`offsetTop` shifts the final position, `behavior` controls animation, `highlightClassName` adds a CSS class to the target, and `highlightDuration` removes it after a timeout.",example:`const options: PzScrollToOptions = { 
+ offsetTop: 24, 
+ behavior: "smooth", 
+ highlightClassName: "pz-scroll-to-highlight", 
+ highlightDuration: 2000 
+};`}],B={title:"Utilities/PzScrollTo",parameters:{prototype:{caption:"Scroll utility",note:"Direct utility for anchor-like programmatic scrolling. It keeps the old moveById/moveTo/moveByQuerySelector API, but adds typed options and a reusable highlight hook for target sections."},docs:{description:{component:"Use `PzScrollTo` from the library root for programmatic scrolling to document sections, anchored blocks, or absolute positions. Available methods: `moveById(id, options?)`, `moveByQuerySelector(selector, options?)`, `moveTo(targetTop, options?)`, `moveToTop(options?)`, `moveToElement(element, options?)`, and `move(target, options?)`. `options` supports `offsetTop`, `behavior`, `highlightClassName`, and `highlightDuration`."},source:{transform:(t,o)=>x(o.args??B.args)}}},args:{behavior:"smooth",offsetTop:T},argTypes:{behavior:{control:"inline-radio",options:g,description:"Scroll behavior passed to window.scrollTo."},offsetTop:{control:{type:"number",min:0,max:120,step:4},description:"Top offset subtracted from the target position."}},render:t=>({components:{pzText:f},setup(){const o=a(t.behavior),s=a(t.offsetTop);p(()=>t.behavior,l=>{o.value=l}),p(()=>t.offsetTop,l=>{s.value=l});const e=l=>{r.moveById(l,{behavior:o.value,offsetTop:s.value})},n=()=>{r.moveToTop({behavior:o.value})};return y(()=>{document.querySelectorAll(".pz-scroll-to-highlight").forEach(l=>{l.classList.remove("pz-scroll-to-highlight")})}),{methodDocs:L,sections:E,scrollToSection:e,scrollToTop:n,typeDocs:w}},template:`
+      <div class="pz-scroll-to-story">
+        <section class="pz-scroll-to-story-toolbar">
+          <div class="pz-scroll-to-story-copy">
+            <span class="pz-scroll-to-story-eyebrow">Programmatic navigation</span>
+            <pz-text variant="h4-bold">Jump to anchored sections</pz-text>
+            <pz-text variant="body-regular">
+              Useful for long procurement pages, filter summaries, and document-heavy surfaces where links need controlled offsets.
+            </pz-text>
+          </div>
+
+          <div class="pz-scroll-to-story-actions">
+            <button type="button" class="pz-scroll-to-story-button" @click="scrollToSection('overview')">Overview</button>
+            <button type="button" class="pz-scroll-to-story-button" @click="scrollToSection('criteria')">Criteria</button>
+            <button type="button" class="pz-scroll-to-story-button" @click="scrollToSection('documents')">Documents</button>
+            <button type="button" class="pz-scroll-to-story-button pz-scroll-to-story-button--ghost" @click="scrollToTop">Back to top</button>
+          </div>
+        </section>
+
+        <section class="pz-scroll-to-story-methods">
+          <article
+            v-for="method in methodDocs"
+            :key="method.name"
+            class="pz-scroll-to-story-method-card"
+          >
+            <div class="pz-scroll-to-story-method-header">
+              <span class="pz-scroll-to-story-kicker">{{ method.name }}</span>
+              <pz-text variant="body-semibold">{{ method.signature }}</pz-text>
+            </div>
+            <pz-text variant="body-regular">{{ method.description }}</pz-text>
+            <pz-text variant="small-regular">Params: {{ method.params }}</pz-text>
+            <pre class="pz-scroll-to-story-code"><code>{{ method.example }}</code></pre>
+          </article>
+        </section>
+
+        <section class="pz-scroll-to-story-types">
+          <article
+            v-for="typeItem in typeDocs"
+            :key="typeItem.name"
+            class="pz-scroll-to-story-type-card"
+          >
+            <div class="pz-scroll-to-story-method-header">
+              <span class="pz-scroll-to-story-kicker">{{ typeItem.name }}</span>
+              <pz-text variant="body-semibold">{{ typeItem.signature }}</pz-text>
+            </div>
+            <pz-text variant="body-regular">{{ typeItem.description }}</pz-text>
+            <pre class="pz-scroll-to-story-code"><code>{{ typeItem.example }}</code></pre>
+          </article>
+        </section>
+
+        <section class="pz-scroll-to-story-stack">
+          <article
+            v-for="section in sections"
+            :id="section.id"
+            :key="section.id"
+            class="pz-scroll-to-story-section"
+            :style="{ minHeight: '${P}' }"
+          >
+            <span class="pz-scroll-to-story-kicker">{{ section.id }}</span>
+            <pz-text variant="h4-bold">{{ section.label }}</pz-text>
+            <pz-text variant="body-regular">{{ section.copy }}</pz-text>
+            <div class="pz-scroll-to-story-paper"></div>
+          </article>
+        </section>
+      </div>
+    `})},i={};var u,h,v;i.parameters={...i.parameters,docs:{...(u=i.parameters)==null?void 0:u.docs,source:{originalSource:"{}",...(v=(h=i.parameters)==null?void 0:h.docs)==null?void 0:v.source}}};const O=["Playground"];export{i as Playground,O as __namedExportsOrder,B as default};

package/dist/app/assets/PzStatus-DlvKjmG7.css

@@ -0,0 +1 @@
+.pz-status-story{display:grid;gap:var(--pz-space-24)}.pz-status-story-board,.pz-status-story-figma,.pz-status-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-status-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-status-story-eyebrow,.pz-status-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-status-story-preview{display:grid;place-items:center;min-height:180px;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-status-story-reference{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(120px,.6fr) minmax(0,1fr);gap:var(--pz-space-24);align-items:start}.pz-status-story-column{display:grid;align-content:start;gap:var(--pz-space-20)}.pz-status-story-column-palette{justify-items:center;padding:var(--pz-space-8);border:1px dashed color-mix(in srgb,var(--pz-color-blue-50) 48%,transparent);border-radius:12px}.pz-status-story-caption{margin:0;color:var(--pz-color-text-primary);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-status-story-wrap{inline-size:min(100%,232px)}.pz-status-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pz-space-16)}.pz-status-story-card{display:grid;gap:var(--pz-space-12);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-status-story-code{margin:0;font-size:var(--pz-font-size-12);color:var(--pz-color-text-secondary)}@media (width <= 1024px){.pz-status-story-reference{grid-template-columns:repeat(2,minmax(0,1fr))}.pz-status-story-column:last-child{grid-column:1/-1}.pz-status-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width <= 768px){.pz-status-story-reference,.pz-status-story-grid{grid-template-columns:1fr}.pz-status-story-column:last-child{grid-column:auto}.pz-status-story-header{flex-direction:column}}.pz-status[data-v-c3b8f015]{--pz-status-background: var(--pz-color-status-progress);display:inline-flex;align-items:center;justify-content:flex-start;gap:4px;max-width:100%;padding:2px 8px;border-radius:3px;background:var(--pz-status-background);color:var(--pz-color-white);box-sizing:border-box;vertical-align:middle;width:fit-content;font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-status--inactive[data-v-c3b8f015]{--pz-status-background: var(--pz-color-status-inactive)}.pz-status--hidden[data-v-c3b8f015]{--pz-status-background: var(--pz-color-status-hidden)}.pz-status--active[data-v-c3b8f015]{--pz-status-background: var(--pz-color-status-active)}.pz-status--monitoring[data-v-c3b8f015]{--pz-status-background: var(--pz-color-status-monitoring)}.pz-status--disabled[data-v-c3b8f015]{--pz-status-background: var(--pz-color-status-disabled)}.pz-status--progress[data-v-c3b8f015]{--pz-status-background: var(--pz-color-status-progress)}.pz-status--auction-progress[data-v-c3b8f015]{--pz-status-background: var(--pz-gradient-status-auction-progress)}.pz-status--auction-waiting[data-v-c3b8f015]{--pz-status-background: var(--pz-gradient-status-auction-waiting)}.pz-status--auction-success[data-v-c3b8f015]{--pz-status-background: var(--pz-gradient-status-auction-success)}.pz-status--gradient[data-v-c3b8f015]{--pz-status-color: var(--pz-color-white)}.pz-status__label[data-v-c3b8f015]{min-width:0;white-space:normal;overflow-wrap:anywhere}

package/dist/app/assets/PzStatus.stories-u5QAVco_.js

@@ -0,0 +1,95 @@
+import{_ as d,P as p}from"./PzText-LfRr6NF7.js";import{d as u,j as v,w as m,f as z,G as g,g as b,o as y,y as f,r as h}from"./iframe-XnrfGA2g.js";import"./preload-helper-C1FmrZbK.js";const S=["inactive","hidden","active","monitoring","disabled","progress","auction-progress","auction-waiting","auction-success"],w=["span","div","li"],_=["auction-progress","auction-waiting","auction-success"],P={class:"pz-status__label"},e=u({name:"PzStatus",__name:"PzStatus",props:{variant:{default:"progress"},as:{default:"span"}},setup(t){const a=t,i=b(()=>[`pz-status--${a.variant}`,{"pz-status--gradient":_.includes(a.variant)}]);return(c,V)=>(y(),v(g(a.as),{class:z(["pz-status",i.value])},{default:m(()=>[f("span",P,[h(c.$slots,"default",{},void 0,!0)])]),_:3},8,["class"]))}}),n=d(e,[["__scopeId","data-v-c3b8f015"]]);e.__docgenInfo=Object.assign({displayName:e.name??e.__name},{name:"PzStatus",exportName:"default",displayName:"PzStatus",description:"",tags:{},props:[{name:"variant",required:!1,type:{name:"PzStatusVariant"},defaultValue:{func:!1,value:'"progress"'}},{name:"as",required:!1,type:{name:"PzStatusTag"},defaultValue:{func:!1,value:'"span"'}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzStatus/PzStatus.vue"]});const x=[{id:"hidden-review",variant:"hidden",label:"Очікує розгляду"},{id:"monitoring-accepted",variant:"monitoring",label:"Прийнято до розгляду"},{id:"inactive-without-review",variant:"inactive",label:"Залишено без розгляду"},{id:"inactive-stopped",variant:"inactive",label:"Розгляд припинено"},{id:"inactive-rejected",variant:"inactive",label:"Відмовлено в задоволенні"},{id:"active-satisfied",variant:"active",label:"Задоволено"},{id:"inactive-withdrawn",variant:"inactive",label:"Відкликано"},{id:"inactive-cancelled",variant:"inactive",label:"Скасовано"},{id:"active-fixed",variant:"active",label:"Порушення усунуто"}],C=[{id:"palette-hidden",variant:"hidden",label:"Текст"},{id:"palette-inactive",variant:"inactive",label:"Текст"},{id:"palette-active",variant:"active",label:"Текст"},{id:"palette-monitoring",variant:"monitoring",label:"Текст"},{id:"palette-disabled",variant:"disabled",label:"Текст"}],I=t=>`<template>
+  <PzStatus ${[t.variant!=="progress"?`variant="${t.variant}"`:null,t.as!=="span"?`as="${t.as}"`:null].filter(i=>!!i).join(" ")}>${t.label}</PzStatus>
+</template>`,T={title:"Components/Display/PzStatus",component:n,parameters:{prototype:{caption:"Status component",note:"Aligned with Figma node 76:1113: compact filled badges with 3px radius, white label text, optional indicator, and multiline support."},docs:{description:{component:"Use `PzStatus` for semantic state labels. The component matches the design-system badge treatment from Figma and keeps semantic color variants, including gradient auction states."},source:{transform:(t,a)=>I(a.args??T.args)}}},args:{variant:"progress",as:"span",label:"Очікує розгляду"},argTypes:{variant:{control:"select",options:S,description:"Semantic status variant."},as:{control:"select",options:w,description:"HTML tag used for the wrapper."},label:{control:"text",description:"Slot content preview text.",table:{category:"Slots"}}},render:t=>({components:{pzStatus:n,pzText:p},setup(){return{args:t,statusReferenceItems:x,statusPaletteItems:C}},template:`
+      <div class="pz-status-story">
+        <section class="pz-status-story-board">
+          <div class="pz-status-story-header">
+            <div>
+              <span class="pz-status-story-eyebrow">Component API</span>
+              <pz-text variant="h4-bold">Compact filled status badge</pz-text>
+            </div>
+            <span class="pz-status-story-chip">{{ args.variant }}</span>
+          </div>
+
+          <div class="pz-status-story-preview">
+            <pz-status
+              :variant="args.variant"
+              :as="args.as"
+              :show-indicator="args.showIndicator"
+            >
+              {{ args.label }}
+            </pz-status>
+          </div>
+        </section>
+
+        <section class="pz-status-story-figma">
+          <div class="pz-status-story-header">
+            <div>
+              <span class="pz-status-story-eyebrow">Figma Reference</span>
+              <pz-text variant="h4-bold">Examples from the design system node</pz-text>
+            </div>
+          </div>
+
+          <div class="pz-status-story-reference">
+            <div class="pz-status-story-column">
+              <pz-status
+                v-for="item in statusReferenceItems"
+                :key="item.id"
+                :variant="item.variant"
+              >
+                {{ item.label }}
+              </pz-status>
+            </div>
+
+            <div class="pz-status-story-column pz-status-story-column-palette">
+              <pz-status
+                v-for="item in statusPaletteItems"
+                :key="item.id"
+                :variant="item.variant"
+              >
+                {{ item.label }}
+              </pz-status>
+            </div>
+
+            <div class="pz-status-story-column">
+              <p class="pz-status-story-caption">статус з перенесенням тексту</p>
+              <div class="pz-status-story-wrap">
+                <pz-status variant="hidden">
+                  Очікує розгляду Очікує розгляду Очікує розгляду
+                </pz-status>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="pz-status-story-gallery">
+          <div class="pz-status-story-header">
+            <div>
+              <span class="pz-status-story-eyebrow">Variants</span>
+              <pz-text variant="h4-bold">Semantic variants, including auction gradients</pz-text>
+            </div>
+          </div>
+
+          <div class="pz-status-story-grid">
+            <article
+              v-for="item in [
+                { id: 'variant-hidden', variant: 'hidden', label: 'Очікує розгляду' },
+                { id: 'variant-inactive', variant: 'inactive', label: 'Залишено без розгляду' },
+                { id: 'variant-active', variant: 'active', label: 'Задоволено' },
+                { id: 'variant-monitoring', variant: 'monitoring', label: 'Прийнято до розгляду' },
+                { id: 'variant-disabled', variant: 'disabled', label: 'Недоступно' },
+                { id: 'variant-progress', variant: 'progress', label: 'У процесі' },
+                { id: 'variant-auction-progress', variant: 'auction-progress', label: 'Auction in progress' },
+                { id: 'variant-auction-waiting', variant: 'auction-waiting', label: 'Auction waiting' },
+                { id: 'variant-auction-success', variant: 'auction-success', label: 'Auction successful' },
+              ]"
+              :key="item.id"
+              class="pz-status-story-card"
+            >
+              <pz-status :variant="item.variant">{{ item.label }}</pz-status>
+              <p class="pz-status-story-code">{{ item.variant }}</p>
+            </article>
+          </div>
+        </section>
+      </div>
+    `})},s={};var r,o,l;s.parameters={...s.parameters,docs:{...(r=s.parameters)==null?void 0:r.docs,source:{originalSource:"{}",...(l=(o=s.parameters)==null?void 0:o.docs)==null?void 0:l.source}}};const A=["Playground"];export{s as Playground,A as __namedExportsOrder,T as default};

package/dist/app/assets/PzTabs-Cko9ewqz.css

@@ -0,0 +1 @@
+.pz-tabs-story{display:grid;gap:var(--pz-space-24)}.pz-tabs-story-gallery{display:grid;gap:var(--pz-space-16)}.pz-tabs-story-frame{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,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 36%),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)))}.pz-tabs-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-tabs-story-eyebrow,.pz-tabs-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-tabs-story-grid{display:grid;grid-template-columns:1fr;gap:var(--pz-space-16)}.pz-tabs-story-card{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:var(--pz-space-20);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) 96%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-tabs-story-card-surface{border-radius:var(--pz-space-16)}.pz-tabs-story-panel{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24)}.pz-tabs-story-copy,.pz-tabs-story-panel-head{display:grid;gap:var(--pz-space-12)}.pz-tabs-story-panel-head{padding-bottom:var(--pz-space-16);border-bottom:1px solid rgba(91,69,37,.16)}.pz-tabs-story-meta{display:inline-flex;align-items:center;gap:var(--pz-space-12);flex-wrap:wrap;color:#5b4525c7}.pz-tabs-story-bullet{width:4px;height:4px;border-radius:999px;background:currentcolor}.pz-tabs-story-tag{display:inline-flex;align-items:center;gap:var(--pz-space-8);padding:6px var(--pz-space-12);border:1px solid rgba(91,69,37,.18);border-radius:var(--pz-space-4);background:#fffcf4b8;color:#5b4525db;font-size:var(--pz-font-size-12);line-height:1}.pz-tabs-story-muted{color:var(--pz-color-text-secondary);text-decoration:line-through}.pz-tabs-story-stack{display:grid;gap:var(--pz-space-12)}.pz-tabs-story-poem{display:grid;gap:var(--pz-space-16)}.pz-tabs-story-stanza{display:grid;gap:var(--pz-space-4);padding-left:var(--pz-space-16);border-left:2px solid rgba(91,69,37,.14)}.pz-tabs-story-poem-line{color:#352512eb}.pz-tabs-story-note{color:#5b4525b8}.pz-tabs-story-example-copy{display:grid;align-content:start;gap:var(--pz-space-12)}.pz-tabs-story-example-surface{display:grid;gap:var(--pz-space-16)}.pz-tabs-story-kpi-list{display:grid;gap:1px;background:color-mix(in srgb,var(--pz-color-grey-30) 80%,transparent)}.pz-tabs-story-kpi{display:grid;grid-template-columns:auto 1fr;gap:var(--pz-space-12);align-items:center;padding:var(--pz-space-16);background:var(--pz-color-background-primary)}.pz-tabs-story-kpi-value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:var(--pz-space-8) var(--pz-space-12);border-radius:var(--pz-space-4);background:color-mix(in srgb,var(--pz-color-blue-10) 88%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:var(--pz-font-size-14);font-weight:700}.pz-tabs-story-narrow{width:min(100%,360px)}@media (width <= 768px){.pz-tabs-story-header{flex-direction:column}.pz-tabs-story-card{grid-template-columns:1fr}}.pz-tab[data-v-2cffa4a1]{width:100%}.pz-tabs[data-v-f64a88aa]{--pz-tabs-wrapper-bg: linear-gradient(180deg, rgb(249 242 223 / 100%) 0%, rgb(244 234 209 / 100%) 100%), radial-gradient(circle at top right, rgb(119 88 44 / 10%), transparent 36%);--pz-tabs-bg: var(--pz-color-background-frame);--pz-tabs-bg-active-tab: var(--pz-color-background-frame);--pz-tabs-color-active-tab: var(--pz-color-text-primary);--pz-tabs-item-font-weight: 600;--pz-tabs-wrapper-radius: 16px;--pz-tabs-inner-radius: 12px;--pz-tabs-wrapper-padding: 8px;display:grid;gap:0;width:100%;padding:var(--pz-tabs-wrapper-padding);border-radius:var(--pz-tabs-wrapper-radius);background:var(--pz-tabs-wrapper-bg);box-shadow:inset 0 0 0 1px #5b452514,0 10px 24px #3525120f}.pz-tabs--light[data-v-f64a88aa]{--pz-tabs-bg: var(--pz-color-background-primary);--pz-tabs-bg-active-tab: var(--pz-color-background-primary)}.pz-tabs__nav[data-v-f64a88aa]{display:flex;align-items:center;width:100%;margin:0;padding:0;list-style:none}@media (max-width: 1023.98px){.pz-tabs__nav[data-v-f64a88aa]{overflow-x:auto;scrollbar-color:var(--pz-color-grey-30) var(--pz-tabs-bg-active-tab)}}.pz-tabs__item[data-v-f64a88aa]{padding:12px 24px;border-radius:var(--pz-tabs-inner-radius) var(--pz-tabs-inner-radius) 0 0;color:var(--pz-color-text-link);cursor:pointer;font-size:var(--pz-font-size-14);font-weight:var(--pz-tabs-item-font-weight);transition:all .2s}@media (max-width: 1023.98px){.pz-tabs__item[data-v-f64a88aa]{display:list-item;white-space:nowrap}}.pz-tabs__item.active[data-v-f64a88aa]{color:var(--pz-tabs-color-active-tab);background-color:var(--pz-tabs-bg-active-tab)}@media (max-width: 1023.98px){.pz-tabs__item.active[data-v-f64a88aa]{--pz-tabs-item-font-weight: 700}}.pz-tabs__content[data-v-f64a88aa]{width:100%;border-radius:0 var(--pz-tabs-inner-radius) var(--pz-tabs-inner-radius) var(--pz-tabs-inner-radius);background-color:var(--pz-tabs-bg)}