@prozorro/prozorro-ui 0.0.5-beta → 0.0.6-beta

package/dist/app/assets/Grid-B7NVrFKF.css

@@ -0,0 +1 @@
+.grid-foundation{display:grid}.grid-foundation-board{display:grid;gap:30px;padding:clamp(28px,3vw,42px);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 82%,transparent);border-radius:32px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 30%),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 24px 80px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 98%,transparent)}.grid-foundation-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:20px}.grid-foundation-hero-copy,.grid-foundation-hero-note,.grid-foundation-section,.grid-foundation-spec-card,.grid-foundation-demo-card{border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 70%,transparent);border-radius:28px;background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 18px 52px color-mix(in srgb,var(--pz-color-black-90) 6%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 98%,transparent)}.grid-foundation-hero-copy,.grid-foundation-hero-note,.grid-foundation-section{padding:clamp(22px,2vw,30px)}.grid-foundation-hero-copy,.grid-foundation-hero-note,.grid-foundation-section-heading,.grid-foundation-spec-copy,.grid-foundation-demo-header{display:grid;gap:8px}.grid-foundation-kicker,.grid-foundation-chip,.grid-foundation-demo-meta{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase}.grid-foundation-kicker,.grid-foundation-chip{background:color-mix(in srgb,var(--pz-color-blue-10) 92%,var(--pz-color-white));color:var(--pz-color-text-link-hover)}.grid-foundation-demo-meta{background:color-mix(in srgb,var(--pz-color-grey-20) 92%,var(--pz-color-white));color:var(--pz-color-text-secondary)}.grid-foundation-section{display:grid;gap:18px}.grid-foundation-specs,.grid-foundation-demos{display:grid;gap:16px}.grid-foundation-specs{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-foundation-spec-card,.grid-foundation-demo-card{display:grid;gap:18px;padding:20px}.grid-foundation-spec-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:0}.grid-foundation-spec-list dt{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pz-color-text-secondary)}.grid-foundation-spec-list dd{margin:0;font-size:16px;font-weight:700;line-height:1.5;color:var(--pz-color-text-primary)}.grid-foundation-demo-frame{display:grid;gap:var(--demo-gap);padding-inline:var(--demo-margin);width:min(100%,var(--demo-frame));margin-inline:auto}.grid-foundation-demo-mobile{--demo-columns: 4;--demo-gap: 16px;--demo-margin: 16px;--demo-frame: 375px}.grid-foundation-demo-tablet{--demo-columns: 8;--demo-gap: 24px;--demo-margin: 32px;--demo-frame: 768px}.grid-foundation-demo-desktop{--demo-columns: 12;--demo-gap: 24px;--demo-margin: 80px;--demo-frame: 100%}.grid-foundation-demo-frame{grid-template-columns:repeat(var(--demo-columns),minmax(0,1fr))}.grid-foundation-demo-column{display:flex;align-items:center;justify-content:center;min-height:164px;border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--pz-color-blue-50) 16%,var(--pz-color-white)),color-mix(in srgb,var(--pz-color-blue-50) 8%,var(--pz-color-white)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pz-color-blue-50) 18%,transparent)}.grid-foundation-demo-column span{color:var(--pz-color-text-link-hover);font-size:12px;font-weight:700;letter-spacing:.08em}.grid-foundation-table{display:grid;grid-template-columns:minmax(220px,320px) minmax(120px,160px) minmax(0,1fr);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:22px;overflow:hidden;background:var(--pz-color-white)}.grid-foundation-head,.grid-foundation-cell{padding:16px 18px}.grid-foundation-head{background:color-mix(in srgb,var(--pz-color-grey-20) 88%,transparent);color:var(--pz-color-text-primary);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.grid-foundation-cell{display:flex;align-items:center;border-top:1px solid color-mix(in srgb,var(--pz-color-grey-30) 56%,transparent)}.grid-foundation-cell-code code,.grid-foundation-code code{color:var(--pz-color-text-primary);font-size:13px;line-height:1.6}.grid-foundation-code{margin:0;padding:20px;overflow:auto;border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 70%,transparent);border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 96%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)))}@media (width <= 1200px){.grid-foundation-hero,.grid-foundation-specs{grid-template-columns:1fr}}@media (width <= 1024px){.grid-foundation-table{grid-template-columns:1fr}.grid-foundation-head{display:none}.grid-foundation-cell{border-top:none}}@media (width <= 640px){.grid-foundation-board,.grid-foundation-hero-copy,.grid-foundation-hero-note,.grid-foundation-section,.grid-foundation-spec-card,.grid-foundation-demo-card{padding:20px;border-radius:22px}.grid-foundation-spec-list{grid-template-columns:1fr}}

package/dist/app/assets/Grid.stories-BxFJTZq8.js

@@ -0,0 +1,150 @@
+import{P as a}from"./PzText-DlvXMwwn.js";import"./iframe-DDO2S8nh.js";import"./preload-helper-C1FmrZbK.js";const n=[{title:"Mobile",range:"< 768px",viewport:"375px frame",columns:4,gutter:"16px",margin:"16px",frame:"100%",className:"grid-foundation-demo-mobile"},{title:"Tablet",range:">= 768px",viewport:"768px frame",columns:8,gutter:"24px",margin:"32px",frame:"768px",className:"grid-foundation-demo-tablet"},{title:"Desktop",range:">= 1200px",viewport:"1440px frame",columns:12,gutter:"24px",margin:"80px",frame:"1440px",className:"grid-foundation-demo-desktop"}],d=[{name:".pz-container",type:"Layout",description:"Centered frame with responsive horizontal margins and a max width derived from grid tokens."},{name:".pz-container-fluid",type:"Layout",description:"Full-width container that keeps responsive side padding."},{name:".pz-grid",type:"Layout",description:"Responsive column grid using the active token set for columns and gutter."},{name:".pz-grid-fit",type:"Variant",description:"Auto-fit layout for equal cards when fixed column spans are not needed."},{name:".pz-col-1 ... .pz-col-12",type:"Span",description:"Column span utilities for the current layout context."},{name:".pz-col-md-* / .pz-col-xl-*",type:"Responsive span",description:"Breakpoint overrides for tablet and desktop layout changes."},{name:".pz-start-*",type:"Start",description:"Column start utilities for offset and alignment control."}],s=[{name:"@include pz-container",type:"Mixin",description:"Applies the container width and side padding contract inside component styles."},{name:"@include pz-grid",type:"Mixin",description:"Creates a grid that follows the active token-driven column and gap system."},{name:"@include pz-grid-span($span)",type:"Mixin",description:"Applies a specific column span without reaching for utility classes."}],p={title:"Foundation/Grid",parameters:{prototype:{caption:"Grid system",note:"Responsive layout foundation for containers, columns, spans, and offsets."},docs:{description:{component:"Grid system reference for `@prozorro/prozorro-ui`. The live Figma embed for node `14:221` was unavailable anonymously, so this implementation aligns the grid with the repository breakpoint model and documents the resulting library contract."}}},render:()=>({components:{pzText:a},setup(){return{breakpointSpecs:n,utilityRows:d,mixinRows:s}},template:`
+      <div class="grid-foundation">
+        <section class="grid-foundation-board">
+          <header class="grid-foundation-hero">
+            <div class="grid-foundation-hero-copy">
+              <span class="grid-foundation-kicker">Grid system</span>
+              <pz-text variant="h2-bold">Responsive frame, columns, and span utilities</pz-text>
+              <pz-text variant="body-regular">
+                The library now exposes a shared container and column grid so layout decisions are not duplicated inside stories and components.
+              </pz-text>
+            </div>
+
+            <div class="grid-foundation-hero-note">
+              <pz-text variant="small-bold">Implementation note</pz-text>
+              <pz-text variant="small-regular">
+                Figma node access was blocked in anonymous embed mode, so the published contract follows the repo breakpoint model: mobile, tablet, and desktop token sets.
+              </pz-text>
+            </div>
+          </header>
+
+          <section class="grid-foundation-section">
+            <div class="grid-foundation-section-heading">
+              <pz-text variant="h4-bold">Breakpoint contract</pz-text>
+              <pz-text variant="small-regular">Active token sets used by the library grid utilities.</pz-text>
+            </div>
+
+            <div class="grid-foundation-specs">
+              <article
+                v-for="spec in breakpointSpecs"
+                :key="spec.title"
+                class="grid-foundation-spec-card"
+              >
+                <div class="grid-foundation-spec-copy">
+                  <span class="grid-foundation-chip">{{ spec.range }}</span>
+                  <pz-text variant="h4-semibold">{{ spec.title }}</pz-text>
+                </div>
+
+                <dl class="grid-foundation-spec-list">
+                  <div>
+                    <dt>Viewport</dt>
+                    <dd>{{ spec.viewport }}</dd>
+                  </div>
+                  <div>
+                    <dt>Columns</dt>
+                    <dd>{{ spec.columns }}</dd>
+                  </div>
+                  <div>
+                    <dt>Gutter</dt>
+                    <dd>{{ spec.gutter }}</dd>
+                  </div>
+                  <div>
+                    <dt>Margin</dt>
+                    <dd>{{ spec.margin }}</dd>
+                  </div>
+                  <div>
+                    <dt>Frame</dt>
+                    <dd>{{ spec.frame }}</dd>
+                  </div>
+                </dl>
+              </article>
+            </div>
+          </section>
+
+          <section class="grid-foundation-section">
+            <div class="grid-foundation-section-heading">
+              <pz-text variant="h4-bold">Grid preview</pz-text>
+              <pz-text variant="small-regular">Static specimens for each token set.</pz-text>
+            </div>
+
+            <div class="grid-foundation-demos">
+              <article
+                v-for="spec in breakpointSpecs"
+                :key="spec.className"
+                class="grid-foundation-demo-card"
+              >
+                <div class="grid-foundation-demo-header">
+                  <pz-text variant="body-semibold">{{ spec.title }}</pz-text>
+                  <span class="grid-foundation-demo-meta">{{ spec.columns }} columns / {{ spec.gutter }} gap</span>
+                </div>
+
+                <div class="grid-foundation-demo-frame" :class="spec.className">
+                  <div
+                    v-for="column in spec.columns"
+                    :key="spec.title + column"
+                    class="grid-foundation-demo-column"
+                  >
+                    <span>{{ column }}</span>
+                  </div>
+                </div>
+              </article>
+            </div>
+          </section>
+
+          <section class="grid-foundation-section">
+            <div class="grid-foundation-section-heading">
+              <pz-text variant="h4-bold">Layout utilities</pz-text>
+              <pz-text variant="small-regular">Public CSS classes emitted by the library stylesheet.</pz-text>
+            </div>
+
+            <div class="grid-foundation-table">
+              <div class="grid-foundation-head">API</div>
+              <div class="grid-foundation-head">Kind</div>
+              <div class="grid-foundation-head">Description</div>
+
+              <template v-for="row in utilityRows" :key="row.name">
+                <div class="grid-foundation-cell grid-foundation-cell-code"><code>{{ row.name }}</code></div>
+                <div class="grid-foundation-cell"><pz-text variant="small-bold">{{ row.type }}</pz-text></div>
+                <div class="grid-foundation-cell"><pz-text variant="body-regular">{{ row.description }}</pz-text></div>
+              </template>
+            </div>
+          </section>
+
+          <section class="grid-foundation-section">
+            <div class="grid-foundation-section-heading">
+              <pz-text variant="h4-bold">SCSS mixins</pz-text>
+              <pz-text variant="small-regular">Component-level API for authors working inside scoped styles.</pz-text>
+            </div>
+
+            <div class="grid-foundation-table">
+              <div class="grid-foundation-head">Mixin</div>
+              <div class="grid-foundation-head">Kind</div>
+              <div class="grid-foundation-head">Description</div>
+
+              <template v-for="row in mixinRows" :key="row.name">
+                <div class="grid-foundation-cell grid-foundation-cell-code"><code>{{ row.name }}</code></div>
+                <div class="grid-foundation-cell"><pz-text variant="small-bold">{{ row.type }}</pz-text></div>
+                <div class="grid-foundation-cell"><pz-text variant="body-regular">{{ row.description }}</pz-text></div>
+              </template>
+            </div>
+          </section>
+
+          <section class="grid-foundation-section">
+            <div class="grid-foundation-section-heading">
+              <pz-text variant="h4-bold">Usage example</pz-text>
+              <pz-text variant="small-regular">Default composition pattern for page and card layouts.</pz-text>
+            </div>
+
+            <pre class="grid-foundation-code"><code>&lt;section class="pz-container"&gt;
+  &lt;div class="pz-grid"&gt;
+    &lt;article class="pz-grid-item pz-col-4 pz-col-md-4 pz-col-xl-3"&gt;...&lt;/article&gt;
+    &lt;article class="pz-grid-item pz-col-4 pz-col-md-4 pz-col-xl-6"&gt;...&lt;/article&gt;
+    &lt;article class="pz-grid-item pz-col-4 pz-col-md-8 pz-col-xl-3"&gt;...&lt;/article&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</code></pre>
+          </section>
+        </section>
+      </div>
+    `})},e={name:"Reference"};var t,i,o;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`{
+  name: "Reference"
+}`,...(o=(i=e.parameters)==null?void 0:i.docs)==null?void 0:o.source}}};const m=["Reference"];export{e as Reference,m as __namedExportsOrder,p as default};

package/dist/app/assets/PzGrid-DES6s5R0.css

@@ -0,0 +1 @@
+.pz-grid-story{display:grid;gap:22px}.pz-grid-story-board,.pz-grid-story-example{display:grid;gap:18px;padding:clamp(22px,2vw,30px);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:28px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 32%),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 60px color-mix(in srgb,var(--pz-color-black-90) 7%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 98%,transparent)}.pz-grid-story-header,.pz-grid-story-hero,.pz-grid-story-card{display:grid;gap:10px}.pz-grid-story-kicker,.pz-grid-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:8px 12px;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-grid-story-layout,.pz-grid-story-nested{align-items:stretch}.pz-grid-story-card,.pz-grid-story-nested-card{min-width:0;padding:20px;border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:24px;background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 12px 36px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-grid-story-card[data-tone=accent]{background:linear-gradient(180deg,color-mix(in srgb,var(--pz-color-blue-10) 94%,var(--pz-color-white)),color-mix(in srgb,var(--pz-color-blue-50) 8%,var(--pz-color-white)))}.pz-grid-story-card[data-tone=success]{background:linear-gradient(180deg,color-mix(in srgb,var(--pz-color-green-20) 96%,var(--pz-color-white)),color-mix(in srgb,var(--pz-color-green-50) 8%,var(--pz-color-white)))}.pz-grid-story-metric{color:var(--pz-color-text-link-hover);font-size:clamp(28px,5vw,48px);font-weight:700;line-height:1}.pz-grid-story-nested{margin-top:4px}.pz-grid-story-nested-card{display:grid;place-items:center;min-height:96px;color:var(--pz-color-text-link-hover);font-size:14px;font-weight:700}@media (width <= 640px){.pz-grid-story-board,.pz-grid-story-example,.pz-grid-story-card,.pz-grid-story-nested-card{padding:18px;border-radius:22px}}

package/dist/app/assets/PzGrid.stories-BDlU9tgI.js

@@ -0,0 +1,174 @@
+import{P as _}from"./PzText-DlvXMwwn.js";import{d as b,e as G,w as v,n as h,f as I,g as C,o as $,r as L}from"./iframe-DDO2S8nh.js";import"./preload-helper-C1FmrZbK.js";const c=[1,2,3,4,5,6,8,12,"full"],T=["div","section","article","main","aside","header","footer","nav","ul","ol"],o=b({name:"PzGrid",__name:"PzGrid",props:{as:{default:"div"},container:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},grid:{type:Boolean,default:!0},fit:{type:Boolean,default:!1},dense:{type:Boolean,default:!1}},setup(t){const e=t,a=C(()=>[{"pz-container":e.container&&!e.fluid,"pz-container-fluid":e.container&&e.fluid,"pz-grid":e.grid,"pz-grid-fit":e.grid&&e.fit,"pz-grid-dense":e.grid&&e.dense}]);return(n,i)=>($(),G(I(e.as),{class:h(a.value)},{default:v(()=>[L(n.$slots,"default")]),_:3},8,["class"]))}});o.__docgenInfo=Object.assign({displayName:o.name??o.__name},{name:"PzGrid",exportName:"default",displayName:"PzGrid",description:"",tags:{},props:[{name:"as",required:!1,type:{name:"PzGridTag"},defaultValue:{func:!1,value:'"div"'}},{name:"container",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"fluid",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"grid",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"fit",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"dense",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzGrid/PzGrid.vue"]});const u=b({name:"PzGridItem",__name:"PzGridItem",props:{as:{default:"div"},span:{default:void 0},sm:{default:void 0},md:{default:void 0},lg:{default:void 0},xl:{default:void 0},xxl:{default:void 0},start:{default:void 0},startSm:{default:void 0},startMd:{default:void 0},startLg:{default:void 0},startXl:{default:void 0},startXxl:{default:void 0}},setup(t){const e=t,a=(d,s)=>s?s==="full"?`pz-col-${d}full`:`pz-col-${d}${s}`:null,n=(d,s)=>s?`pz-start-${d}${s}`:null,i=C(()=>["pz-grid-item",a("",e.span),a("sm-",e.sm),a("md-",e.md),a("lg-",e.lg),a("xl-",e.xl),a("xxl-",e.xxl),n("",e.start),n("sm-",e.startSm),n("md-",e.startMd),n("lg-",e.startLg),n("xl-",e.startXl),n("xxl-",e.startXxl)]);return(d,s)=>($(),G(I(e.as),{class:h(i.value)},{default:v(()=>[L(d.$slots,"default")]),_:3},8,["class"]))}});u.__docgenInfo=Object.assign({displayName:u.name??u.__name},{name:"PzGridItem",exportName:"default",displayName:"PzGridItem",description:"",tags:{},props:[{name:"as",required:!1,type:{name:"PzGridTag"},defaultValue:{func:!1,value:'"div"'}},{name:"span",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"sm",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"md",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"lg",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"xl",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"xxl",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"start",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}},{name:"startSm",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}},{name:"startMd",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}},{name:"startLg",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}},{name:"startXl",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}},{name:"startXxl",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzGrid/PzGridItem.vue"]});const f={as:"section",container:!0,grid:!0,fit:!1,dense:!1,fluid:!1,heroSpan:4,sidebarSpan:4,metricSpan:2},r={hero:{md:8,xl:7},sidebar:{md:4,xl:5},metric:{md:4,xl:3},nested:{span:4,md:8,xl:6},nestedItem:{span:4,md:4,xl:6}},q=(t,e,a)=>typeof e>"u"?null:typeof e=="boolean"?e===a?null:e?t:`:${t}="false"`:typeof e=="number"?e===a?null:`:${t}="${e}"`:e===a?null:`${t}="${e}"`,l=t=>t.map(([e,a,n])=>q(e,a,n)).filter(e=>!!e).map(e=>`    ${e}`).join(`
+`),E=t=>{const e=l([["as",t.as,"div"],["container",t.container,!1],["grid",t.grid,!0],["fluid",t.fluid,!1],["fit",t.fit,!1],["dense",t.dense,!1]]),a=l([["span",t.heroSpan],["md",r.hero.md],["xl",r.hero.xl]]),n=l([["span",t.sidebarSpan],["md",r.sidebar.md],["xl",r.sidebar.xl]]),i=l([["span",t.metricSpan],["md",r.metric.md],["xl",r.metric.xl]]);return`<template>
+  <PzGrid
+${e}
+  >
+    <PzGridItem
+${a}
+    >
+      <PzText variant="h4-bold">Primary content area</PzText>
+      <PzText variant="body-regular">
+        PzGrid handles the container and grid contract while PzGridItem controls responsive span mapping.
+      </PzText>
+    </PzGridItem>
+
+    <PzGridItem
+${n}
+    >
+      <PzText variant="h4-semibold">Secondary rail</PzText>
+      <PzText variant="body-regular">
+        Sidebar content drops below the hero on mobile and returns to a right rail on desktop.
+      </PzText>
+    </PzGridItem>
+
+    <PzGridItem
+${i}
+    >
+      <PzText variant="body-semibold">Mobile columns</PzText>
+    </PzGridItem>
+
+    <PzGridItem
+${i}
+    >
+      <PzText variant="body-semibold">Desktop columns</PzText>
+    </PzGridItem>
+
+    <PzGridItem
+      :span="${r.nested.span}"
+      :md="${r.nested.md}"
+      :xl="${r.nested.xl}"
+    >
+      <PzText variant="h4-semibold">Nested grids use the same components.</PzText>
+
+      <PzGrid>
+        <PzGridItem
+          :span="${r.nestedItem.span}"
+          :md="${r.nestedItem.md}"
+          :xl="${r.nestedItem.xl}"
+        >
+          Nested 1
+        </PzGridItem>
+        <PzGridItem
+          :span="${r.nestedItem.span}"
+          :md="${r.nestedItem.md}"
+          :xl="${r.nestedItem.xl}"
+        >
+          Nested 2
+        </PzGridItem>
+      </PzGrid>
+    </PzGridItem>
+  </PzGrid>
+</template>`},k={title:"Components/PzGrid",component:o,parameters:{prototype:{caption:"Grid component",note:"Vue wrapper over the shared grid utility contract for container, grid, and responsive item spans."},docs:{description:{component:"Use `PzGrid` and `PzGridItem` when you want component-level layout composition instead of writing the emitted CSS utility classes directly."},source:{transform:(t,e)=>E(e.args??f)}}},args:f,argTypes:{as:{control:"select",options:T},container:{control:"boolean"},grid:{control:"boolean"},fluid:{control:"boolean"},fit:{control:"boolean"},dense:{control:"boolean"},heroSpan:{control:"select",options:c},sidebarSpan:{control:"select",options:c},metricSpan:{control:"select",options:c}},render:t=>({components:{pzGrid:o,pzGridItem:u,pzText:_},setup(){return{args:t,gridStoryExampleLayout:r}},template:`
+      <div class="pz-grid-story">
+        <pz-grid class="pz-grid-story-board">
+          <pz-grid-item
+            span="full"
+            class="pz-grid-story-header"
+          >
+            <span class="pz-grid-story-kicker">Component API</span>
+            <pz-text variant="h3-bold">Grid composition without manual utility strings</pz-text>
+            <pz-text variant="body-regular">
+              The wrapper components still use the shared CSS grid contract under the hood, but expose layout decisions as typed props.
+            </pz-text>
+          </pz-grid-item>
+        </pz-grid>
+
+        <pz-grid
+          :as="args.as"
+          :container="args.container"
+          :grid="args.grid"
+          :fluid="args.fluid"
+          :fit="args.fit"
+          :dense="args.dense"
+          class="pz-grid-story-example"
+        >
+          <pz-grid-item
+            :span="args.heroSpan"
+            :md="gridStoryExampleLayout.hero.md"
+            :xl="gridStoryExampleLayout.hero.xl"
+            class="pz-grid-story-card"
+            data-tone="accent"
+          >
+            <span class="pz-grid-story-chip">Hero</span>
+            <pz-text variant="h4-bold">Primary content area</pz-text>
+            <pz-text variant="body-regular">
+              PzGrid handles the container and grid contract while PzGridItem controls responsive span mapping.
+            </pz-text>
+          </pz-grid-item>
+
+          <pz-grid-item
+            :span="args.sidebarSpan"
+            :md="gridStoryExampleLayout.sidebar.md"
+            :xl="gridStoryExampleLayout.sidebar.xl"
+            class="pz-grid-story-card"
+          >
+            <span class="pz-grid-story-chip">Sidebar</span>
+            <pz-text variant="h4-semibold">Secondary rail</pz-text>
+            <pz-text variant="body-regular">
+              Sidebar content drops below the hero on mobile and returns to a right rail on desktop.
+            </pz-text>
+          </pz-grid-item>
+
+          <pz-grid-item
+            :span="args.metricSpan"
+            :md="gridStoryExampleLayout.metric.md"
+            :xl="gridStoryExampleLayout.metric.xl"
+            class="pz-grid-story-card"
+            data-tone="success"
+          >
+            <span class="pz-grid-story-metric">4</span>
+            <pz-text variant="body-semibold">Mobile columns</pz-text>
+          </pz-grid-item>
+
+          <pz-grid-item
+            :span="args.metricSpan"
+            :md="gridStoryExampleLayout.metric.md"
+            :xl="gridStoryExampleLayout.metric.xl"
+            class="pz-grid-story-card"
+          >
+            <span class="pz-grid-story-metric">12</span>
+            <pz-text variant="body-semibold">Desktop columns</pz-text>
+          </pz-grid-item>
+
+          <pz-grid-item
+            :span="gridStoryExampleLayout.nested.span"
+            :md="gridStoryExampleLayout.nested.md"
+            :xl="gridStoryExampleLayout.nested.xl"
+            class="pz-grid-story-card"
+          >
+            <span class="pz-grid-story-chip">Nested</span>
+            <pz-text variant="h4-semibold">Nested grids use the same components.</pz-text>
+
+            <pz-grid class="pz-grid-story-nested">
+              <pz-grid-item
+                :span="gridStoryExampleLayout.nestedItem.span"
+                :md="gridStoryExampleLayout.nestedItem.md"
+                :xl="gridStoryExampleLayout.nestedItem.xl"
+                class="pz-grid-story-nested-card"
+              >
+                Nested 1
+              </pz-grid-item>
+              <pz-grid-item
+                :span="gridStoryExampleLayout.nestedItem.span"
+                :md="gridStoryExampleLayout.nestedItem.md"
+                :xl="gridStoryExampleLayout.nestedItem.xl"
+                class="pz-grid-story-nested-card"
+              >
+                Nested 2
+              </pz-grid-item>
+            </pz-grid>
+          </pz-grid-item>
+        </pz-grid>
+      </div>
+    `})},p={name:"Component API"},m={name:"Auto Fit",args:{container:!0,fit:!0,heroSpan:4,sidebarSpan:4,metricSpan:4}};var z,g,y;p.parameters={...p.parameters,docs:{...(z=p.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  name: "Component API"
+}`,...(y=(g=p.parameters)==null?void 0:g.docs)==null?void 0:y.source}}};var x,P,S;m.parameters={...m.parameters,docs:{...(x=m.parameters)==null?void 0:x.docs,source:{originalSource:`{
+  name: "Auto Fit",
+  args: {
+    container: true,
+    fit: true,
+    heroSpan: 4,
+    sidebarSpan: 4,
+    metricSpan: 4
+  }
+}`,...(S=(P=m.parameters)==null?void 0:P.docs)==null?void 0:S.source}}};const A=["ComponentApi","FitLayout"];export{p as ComponentApi,m as FitLayout,A as __namedExportsOrder,k as default};

package/dist/app/assets/PzText-DlvXMwwn.js

@@ -0,0 +1 @@
+import{d as l,o as r,e as d,w as p,r as i,n as c,f as u,g as m}from"./iframe-DDO2S8nh.js";const t=l({name:"PzText",__name:"PzText",props:{variant:{},as:{default:void 0}},setup(e){const s={"h1-bold":"h1","h1-regular":"h1","h2-bold":"h2","h3-bold":"h3","h3-regular":"h3","h4-regular":"h4","h4-semibold":"h4","h4-bold":"h4",subtitle:"p","body-regular":"p","body-semibold":"p","body-bold":"p",capitalized:"span",hint:"span","line-through":"span","small-regular":"span","small-semibold":"span","small-bold":"span",link:"a",document:"p"},a=e,n=m(()=>a.as??s[a.variant]??"span");return(o,b)=>(r(),d(u(n.value),{class:c(["pz-text",`pz-text--${e.variant}`])},{default:p(()=>[i(o.$slots,"default",{},void 0,!0)]),_:3},8,["class"]))}}),h=(e,s)=>{const a=e.__vccOpts||e;for(const[n,o]of s)a[n]=o;return a},x=h(t,[["__scopeId","data-v-bd3b2150"]]);t.__docgenInfo=Object.assign({displayName:t.name??t.__name},{name:"PzText",exportName:"default",displayName:"PzText",description:"",tags:{},props:[{name:"variant",required:!0,type:{name:"PzTextVariant"}},{name:"as",required:!1,type:{name:"PzTextTag"},defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzText/PzText.vue"]});export{x as P};

package/dist/app/assets/PzText-DsC8c6AJ.css

@@ -0,0 +1 @@
+.pz-text[data-v-bd3b2150]{margin:0;padding:0}.pz-text--h1-bold[data-v-bd3b2150]{font-size:var(--pz-font-size-44);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h1-bold[data-v-bd3b2150]{font-size:var(--pz-font-size-24);font-weight:700;line-height:1.5}}.pz-text--h1-regular[data-v-bd3b2150]{font-size:var(--pz-font-size-44);font-weight:400;line-height:1.5}@media (max-width: 575.98px){.pz-text--h1-regular[data-v-bd3b2150]{font-size:var(--pz-font-size-24);font-weight:400;line-height:1.5}}.pz-text--h2-bold[data-v-bd3b2150]{font-size:var(--pz-font-size-32);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h2-bold[data-v-bd3b2150]{font-size:var(--pz-font-size-20);font-weight:700;line-height:1.5}}.pz-text--h3-bold[data-v-bd3b2150]{font-size:var(--pz-font-size-24);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h3-bold[data-v-bd3b2150]{font-size:var(--pz-font-size-18);font-weight:700;line-height:1.5}}.pz-text--h3-regular[data-v-bd3b2150]{font-size:var(--pz-font-size-24);font-weight:400;line-height:1.5}@media (max-width: 575.98px){.pz-text--h3-regular[data-v-bd3b2150]{font-size:var(--pz-font-size-18);font-weight:400;line-height:1.5}}.pz-text--h4-regular[data-v-bd3b2150]{font-size:var(--pz-font-size-18);font-weight:400;line-height:1.5}@media (max-width: 575.98px){.pz-text--h4-regular[data-v-bd3b2150]{font-size:var(--pz-font-size-16);font-weight:400;line-height:1.5}}.pz-text--h4-semibold[data-v-bd3b2150]{font-size:var(--pz-font-size-18);font-weight:600;line-height:1.5}@media (max-width: 575.98px){.pz-text--h4-semibold[data-v-bd3b2150]{font-size:var(--pz-font-size-16);font-weight:600;line-height:1.5}}.pz-text--h4-bold[data-v-bd3b2150]{font-size:var(--pz-font-size-18);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h4-bold[data-v-bd3b2150]{font-size:var(--pz-font-size-16);font-weight:700;line-height:1.5}}.pz-text--subtitle[data-v-bd3b2150]{font-size:var(--pz-font-size-16);font-weight:600;line-height:1.5}.pz-text--body-regular[data-v-bd3b2150]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-text--body-semibold[data-v-bd3b2150]{font-size:var(--pz-font-size-14);font-weight:600;line-height:1.5}.pz-text--body-bold[data-v-bd3b2150]{font-size:var(--pz-font-size-14);font-weight:700;line-height:1.5}.pz-text--capitalized[data-v-bd3b2150]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5;text-transform:uppercase;letter-spacing:.05em}.pz-text--hint[data-v-bd3b2150]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5;color:var(--pz-color-text-secondary)}.pz-text--line-through[data-v-bd3b2150]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5;text-decoration:line-through}.pz-text--small-regular[data-v-bd3b2150]{font-size:var(--pz-font-size-12);font-weight:400;line-height:1.5}.pz-text--small-semibold[data-v-bd3b2150]{font-size:var(--pz-font-size-12);font-weight:600;line-height:1.5}.pz-text--small-bold[data-v-bd3b2150]{font-size:var(--pz-font-size-12);font-weight:700;line-height:1.5}.pz-text--link[data-v-bd3b2150]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5;color:var(--pz-color-text-link);text-decoration:underline;cursor:pointer}.pz-text--link[data-v-bd3b2150]:hover{color:var(--pz-color-text-link-hover)}.pz-text--document[data-v-bd3b2150]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}

package/dist/app/assets/PzText.stories-ZTf0LcVq.js

@@ -0,0 +1,133 @@
+import{P as R}from"./PzText-DlvXMwwn.js";import"./iframe-DDO2S8nh.js";import"./preload-helper-C1FmrZbK.js";const De=["h1-bold","h1-regular","h2-bold","h3-bold","h3-regular","h4-regular","h4-semibold","h4-bold","subtitle","body-regular","body-semibold","body-bold","capitalized","hint","line-through","small-regular","small-semibold","small-bold","link","document"],Pe=["h1","h2","h3","h4","h5","h6","p","span","div","a","label"],$e=r=>r.split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" "),we={title:"Components/PzText",component:R,parameters:{prototype:{caption:"Text component",note:"Component-level playground for semantic tag overrides and text variant rendering."},docs:{description:{component:"Vue text primitive for rendering the shared typography variants. Use `Foundation/Typography` for the full type-scale reference and `Components/PzText` for the component API."},source:{transform:(r,e)=>{const a=e.args??{};return`<template>
+  <PzText ${[a.variant?`variant="${a.variant}"`:null,a.as?`as="${a.as}"`:null,a.content?`content="${a.content}"`:null].filter(Boolean).join(" ")} />
+</template>`}}}},args:{variant:"body-regular",content:"Every procurement notice should stay readable across dense interfaces and long-form content."},argTypes:{variant:{control:"select",options:De,description:"Text style variant from the Design System."},as:{control:"select",options:Pe,description:"HTML tag to render. Defaults to a semantic tag based on variant."},content:{control:"text",description:"Text content.",table:{category:"Slots"}}},render:r=>({components:{pzText:R},setup(){const e=$e(r.variant);return{args:r,currentLabel:e}},template:`
+      <section class="pz-text-demo">
+        <div class="pz-text-demo-header">
+          <div>
+            <span class="pz-text-demo-eyebrow">Live preview</span>
+            <h2 class="pz-text-demo-title">{{ currentLabel }}</h2>
+          </div>
+          <span class="pz-text-demo-spec">{{ args.variant }}</span>
+        </div>
+
+        <div class="pz-text-demo-surface">
+          <pz-text :variant="args.variant" :as="args.as">{{ args.content }}</pz-text>
+        </div>
+      </section>
+    `})},t={name:"H1 Bold",args:{variant:"h1-bold",content:"Headline Bold 1"}},n={name:"H1 Regular",args:{variant:"h1-regular",content:"Headline Regular 1"}},o={name:"H2 Bold",args:{variant:"h2-bold",content:"Headline Bold 2"}},s={name:"H3 Bold",args:{variant:"h3-bold",content:"Headline Bold 3"}},l={name:"H3 Regular",args:{variant:"h3-regular",content:"Headline Regular 3"}},c={name:"H4 Regular",args:{variant:"h4-regular",content:"Headline Regular 4"}},d={name:"H4 Semibold",args:{variant:"h4-semibold",content:"Headline Semibold 4"}},i={name:"H4 Bold",args:{variant:"h4-bold",content:"Headline Bold 4"}},m={args:{variant:"subtitle",content:"Subtitle"}},u={name:"Body Regular",args:{variant:"body-regular",content:"Body text regular"}},p={name:"Body Semibold",args:{variant:"body-semibold",content:"Body text semibold"}},g={name:"Body Bold",args:{variant:"body-bold",content:"Body text bold"}},b={args:{variant:"capitalized",content:"Capitalized text"}},v={args:{variant:"hint",content:"Hint text"}},h={name:"Line Through",args:{variant:"line-through",content:"Line through text"}},S={name:"Small Regular",args:{variant:"small-regular",content:"Small text regular"}},H={name:"Small Semibold",args:{variant:"small-semibold",content:"Small text semibold"}},B={name:"Small Bold",args:{variant:"small-bold",content:"Small text bold"}},y={name:"Link",args:{variant:"link",content:"Link text"}},x={args:{variant:"document",content:"Document text"}};var z,T,L;t.parameters={...t.parameters,docs:{...(z=t.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  name: "H1 Bold",
+  args: {
+    variant: "h1-bold",
+    content: "Headline Bold 1"
+  }
+}`,...(L=(T=t.parameters)==null?void 0:T.docs)==null?void 0:L.source}}};var f,k,C;n.parameters={...n.parameters,docs:{...(f=n.parameters)==null?void 0:f.docs,source:{originalSource:`{
+  name: "H1 Regular",
+  args: {
+    variant: "h1-regular",
+    content: "Headline Regular 1"
+  }
+}`,...(C=(k=n.parameters)==null?void 0:k.docs)==null?void 0:C.source}}};var D,P,$;o.parameters={...o.parameters,docs:{...(D=o.parameters)==null?void 0:D.docs,source:{originalSource:`{
+  name: "H2 Bold",
+  args: {
+    variant: "h2-bold",
+    content: "Headline Bold 2"
+  }
+}`,...($=(P=o.parameters)==null?void 0:P.docs)==null?void 0:$.source}}};var O,V,_;s.parameters={...s.parameters,docs:{...(O=s.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  name: "H3 Bold",
+  args: {
+    variant: "h3-bold",
+    content: "Headline Bold 3"
+  }
+}`,...(_=(V=s.parameters)==null?void 0:V.docs)==null?void 0:_.source}}};var j,w,A;l.parameters={...l.parameters,docs:{...(j=l.parameters)==null?void 0:j.docs,source:{originalSource:`{
+  name: "H3 Regular",
+  args: {
+    variant: "h3-regular",
+    content: "Headline Regular 3"
+  }
+}`,...(A=(w=l.parameters)==null?void 0:w.docs)==null?void 0:A.source}}};var E,U,F;c.parameters={...c.parameters,docs:{...(E=c.parameters)==null?void 0:E.docs,source:{originalSource:`{
+  name: "H4 Regular",
+  args: {
+    variant: "h4-regular",
+    content: "Headline Regular 4"
+  }
+}`,...(F=(U=c.parameters)==null?void 0:U.docs)==null?void 0:F.source}}};var I,M,q;d.parameters={...d.parameters,docs:{...(I=d.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  name: "H4 Semibold",
+  args: {
+    variant: "h4-semibold",
+    content: "Headline Semibold 4"
+  }
+}`,...(q=(M=d.parameters)==null?void 0:M.docs)==null?void 0:q.source}}};var G,J,K;i.parameters={...i.parameters,docs:{...(G=i.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  name: "H4 Bold",
+  args: {
+    variant: "h4-bold",
+    content: "Headline Bold 4"
+  }
+}`,...(K=(J=i.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var N,Q,W;m.parameters={...m.parameters,docs:{...(N=m.parameters)==null?void 0:N.docs,source:{originalSource:`{
+  args: {
+    variant: "subtitle",
+    content: "Subtitle"
+  }
+}`,...(W=(Q=m.parameters)==null?void 0:Q.docs)==null?void 0:W.source}}};var X,Y,Z;u.parameters={...u.parameters,docs:{...(X=u.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  name: "Body Regular",
+  args: {
+    variant: "body-regular",
+    content: "Body text regular"
+  }
+}`,...(Z=(Y=u.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var ee,ae,re;p.parameters={...p.parameters,docs:{...(ee=p.parameters)==null?void 0:ee.docs,source:{originalSource:`{
+  name: "Body Semibold",
+  args: {
+    variant: "body-semibold",
+    content: "Body text semibold"
+  }
+}`,...(re=(ae=p.parameters)==null?void 0:ae.docs)==null?void 0:re.source}}};var te,ne,oe;g.parameters={...g.parameters,docs:{...(te=g.parameters)==null?void 0:te.docs,source:{originalSource:`{
+  name: "Body Bold",
+  args: {
+    variant: "body-bold",
+    content: "Body text bold"
+  }
+}`,...(oe=(ne=g.parameters)==null?void 0:ne.docs)==null?void 0:oe.source}}};var se,le,ce;b.parameters={...b.parameters,docs:{...(se=b.parameters)==null?void 0:se.docs,source:{originalSource:`{
+  args: {
+    variant: "capitalized",
+    content: "Capitalized text"
+  }
+}`,...(ce=(le=b.parameters)==null?void 0:le.docs)==null?void 0:ce.source}}};var de,ie,me;v.parameters={...v.parameters,docs:{...(de=v.parameters)==null?void 0:de.docs,source:{originalSource:`{
+  args: {
+    variant: "hint",
+    content: "Hint text"
+  }
+}`,...(me=(ie=v.parameters)==null?void 0:ie.docs)==null?void 0:me.source}}};var ue,pe,ge;h.parameters={...h.parameters,docs:{...(ue=h.parameters)==null?void 0:ue.docs,source:{originalSource:`{
+  name: "Line Through",
+  args: {
+    variant: "line-through",
+    content: "Line through text"
+  }
+}`,...(ge=(pe=h.parameters)==null?void 0:pe.docs)==null?void 0:ge.source}}};var be,ve,he;S.parameters={...S.parameters,docs:{...(be=S.parameters)==null?void 0:be.docs,source:{originalSource:`{
+  name: "Small Regular",
+  args: {
+    variant: "small-regular",
+    content: "Small text regular"
+  }
+}`,...(he=(ve=S.parameters)==null?void 0:ve.docs)==null?void 0:he.source}}};var Se,He,Be;H.parameters={...H.parameters,docs:{...(Se=H.parameters)==null?void 0:Se.docs,source:{originalSource:`{
+  name: "Small Semibold",
+  args: {
+    variant: "small-semibold",
+    content: "Small text semibold"
+  }
+}`,...(Be=(He=H.parameters)==null?void 0:He.docs)==null?void 0:Be.source}}};var ye,xe,Re;B.parameters={...B.parameters,docs:{...(ye=B.parameters)==null?void 0:ye.docs,source:{originalSource:`{
+  name: "Small Bold",
+  args: {
+    variant: "small-bold",
+    content: "Small text bold"
+  }
+}`,...(Re=(xe=B.parameters)==null?void 0:xe.docs)==null?void 0:Re.source}}};var ze,Te,Le;y.parameters={...y.parameters,docs:{...(ze=y.parameters)==null?void 0:ze.docs,source:{originalSource:`{
+  name: "Link",
+  args: {
+    variant: "link",
+    content: "Link text"
+  }
+}`,...(Le=(Te=y.parameters)==null?void 0:Te.docs)==null?void 0:Le.source}}};var fe,ke,Ce;x.parameters={...x.parameters,docs:{...(fe=x.parameters)==null?void 0:fe.docs,source:{originalSource:`{
+  args: {
+    variant: "document",
+    content: "Document text"
+  }
+}`,...(Ce=(ke=x.parameters)==null?void 0:ke.docs)==null?void 0:Ce.source}}};const Ae=["H1Bold","H1Regular","H2Bold","H3Bold","H3Regular","H4Regular","H4Semibold","H4Bold","Subtitle","BodyRegular","BodySemibold","BodyBold","Capitalized","Hint","LineThroughStory","SmallRegular","SmallSemibold","SmallBold","LinkStory","Document"];export{g as BodyBold,u as BodyRegular,p as BodySemibold,b as Capitalized,x as Document,t as H1Bold,n as H1Regular,o as H2Bold,s as H3Bold,l as H3Regular,i as H4Bold,c as H4Regular,d as H4Semibold,v as Hint,h as LineThroughStory,y as LinkStory,B as SmallBold,S as SmallRegular,H as SmallSemibold,m as Subtitle,Ae as __namedExportsOrder,we as default};

package/dist/app/assets/Spacing-B5TnfKCB.css

@@ -0,0 +1 @@
+.spacing-foundation{display:grid}.spacing-foundation-board{display:grid;gap:30px;padding:clamp(28px,3vw,42px);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 82%,transparent);border-radius:32px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 30%),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 24px 80px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 98%,transparent)}.spacing-foundation-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:20px}.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section,.spacing-foundation-token-card,.spacing-foundation-group-card,.spacing-foundation-preview-card{border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 70%,transparent);border-radius:28px;background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 18px 52px color-mix(in srgb,var(--pz-color-black-90) 6%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 98%,transparent)}.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section{padding:clamp(22px,2vw,30px)}.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section-heading,.spacing-foundation-group-head,.spacing-foundation-token-head{display:grid;gap:8px}.spacing-foundation-kicker,.spacing-foundation-chip{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:8px 12px;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}.spacing-foundation-section{display:grid;gap:18px}.spacing-foundation-token-grid,.spacing-foundation-groups,.spacing-foundation-preview{display:grid;gap:16px}.spacing-foundation-token-grid,.spacing-foundation-groups,.spacing-foundation-preview{grid-template-columns:repeat(3,minmax(0,1fr))}.spacing-foundation-token-card,.spacing-foundation-group-card,.spacing-foundation-preview-card{display:grid;gap:18px;padding:20px}.spacing-foundation-ruler{display:flex;align-items:center;min-height:38px}.spacing-foundation-ruler-bar{display:inline-flex;height:12px;min-width:2px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--pz-color-blue-50) 90%,var(--pz-color-white)),color-mix(in srgb,var(--pz-color-blue-60) 90%,var(--pz-color-white)))}.spacing-foundation-token-meta{display:grid;gap:6px}.spacing-foundation-token-meta code,.spacing-foundation-cell-code code{color:var(--pz-color-text-primary);font-size:13px;line-height:1.6}.spacing-foundation-table{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:22px;overflow:hidden;background:var(--pz-color-white)}.spacing-foundation-head,.spacing-foundation-cell{padding:16px 18px}.spacing-foundation-head{background:color-mix(in srgb,var(--pz-color-grey-20) 88%,transparent);color:var(--pz-color-text-primary);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.spacing-foundation-cell{display:flex;align-items:center;border-top:1px solid color-mix(in srgb,var(--pz-color-grey-30) 56%,transparent)}.spacing-foundation-preview-surface,.spacing-foundation-preview-stack,.spacing-foundation-preview-shell{border:1px dashed color-mix(in srgb,var(--pz-color-blue-50) 30%,transparent);border-radius:22px;background:color-mix(in srgb,var(--pz-color-blue-10) 86%,var(--pz-color-white))}.spacing-foundation-preview-fill,.spacing-foundation-preview-float{display:grid;gap:6px;border-radius:18px;background:color-mix(in srgb,var(--pz-color-white) 98%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent)}.spacing-foundation-preview-fill{padding:16px}.spacing-foundation-preview-shell{display:flex}.spacing-foundation-preview-float{max-width:220px}@media (width <= 1200px){.spacing-foundation-hero,.spacing-foundation-token-grid,.spacing-foundation-groups,.spacing-foundation-preview{grid-template-columns:1fr}}@media (width <= 1024px){.spacing-foundation-table{grid-template-columns:1fr}.spacing-foundation-head{display:none}.spacing-foundation-cell{border-top:none}}@media (width <= 640px){.spacing-foundation-board,.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section,.spacing-foundation-token-card,.spacing-foundation-group-card,.spacing-foundation-preview-card{padding:18px;border-radius:22px}}