@stn-uiux/pub-ui 0.1.73 → 0.1.76

package/dist/{chunk-KLIYAEJA.js → chunk-2LRCGTKQ.js}

@@ -4,22 +4,12 @@ import {
 
 // src/data/stnChip.ts
 var STN_CHIP_BORDER_ACCENTS = [
-  { accent: "mint", descKo: "\uBBFC\uD2B8", cssBorder: "var(--stn-teal-300)", cssText: "var(--stn-teal-300)" },
-  { accent: "sky", descKo: "\uC2A4\uCE74\uC774", cssBorder: "var(--stn-blue-300)", cssText: "var(--stn-blue-300)" },
-  { accent: "violet", descKo: "\uBC14\uC774\uC62C\uB81B", cssBorder: "var(--stn-purple-300)", cssText: "var(--stn-purple-300)" },
-  {
-    accent: "orange",
-    descKo: "\uC624\uB80C\uC9C0",
-    cssBorder: "var(--stn-yellow-300)",
-    cssText: "var(--stn-yellow-300)"
-  },
-  {
-    accent: "yellow",
-    descKo: "\uC610\uB85C",
-    cssBorder: "var(--stn-yellow-300)",
-    cssText: "var(--stn-yellow-300)"
-  },
-  { accent: "gray", descKo: "\uADF8\uB808\uC774", cssBorder: "var(--stn-gray-350)", cssText: "var(--stn-gray-350)" }
+  { accent: "mint", descKo: "\uBBFC\uD2B8", className: "stn-chip--accent-mint" },
+  { accent: "sky", descKo: "\uC2A4\uCE74\uC774", className: "stn-chip--accent-sky" },
+  { accent: "violet", descKo: "\uBC14\uC774\uC62C\uB81B", className: "stn-chip--accent-violet" },
+  { accent: "orange", descKo: "\uC624\uB80C\uC9C0", className: "stn-chip--accent-orange" },
+  { accent: "yellow", descKo: "\uC610\uB85C", className: "stn-chip--accent-yellow" },
+  { accent: "gray", descKo: "\uADF8\uB808\uC774", className: "stn-chip--accent-gray" }
 ];
 var STN_CHIP_GRADE_LEGACY_CLASS = {
   critical: "critic",
@@ -76,4 +66,4 @@ export {
   STN_CHIP_USAGE_ROWS,
   STN_CHIP_GRADE_ROWS
 };
-//# sourceMappingURL=chunk-KLIYAEJA.js.map
+//# sourceMappingURL=chunk-2LRCGTKQ.js.map

package/dist/chunk-2LRCGTKQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnChip.ts"],"sourcesContent":["import { STN_GRADE_SOURCE, type StnGradeKind } from './stnGradeColors'\n\nexport { STN_GRADE_SOURCE }\n\n/** 등급 칩 — 알림센터 `.tag` · equip-search `.tag` · `error_tag` 와 동일 토큰 */\nexport type StnChipGrade = StnGradeKind\n\n/** 테두리 액센트 칩 스케일 */\nexport type StnChipBorderAccent = 'mint' | 'sky' | 'violet' | 'orange' | 'yellow' | 'gray'\n\nexport const STN_CHIP_BORDER_ACCENTS: readonly {\n  accent: StnChipBorderAccent\n  descKo: string\n  className: string\n}[] = [\n  { accent: 'mint', descKo: '민트', className: 'stn-chip--accent-mint' },\n  { accent: 'sky', descKo: '스카이', className: 'stn-chip--accent-sky' },\n  { accent: 'violet', descKo: '바이올렛', className: 'stn-chip--accent-violet' },\n  { accent: 'orange', descKo: '오렌지', className: 'stn-chip--accent-orange' },\n  { accent: 'yellow', descKo: '옐로', className: 'stn-chip--accent-yellow' },\n  { accent: 'gray', descKo: '그레이', className: 'stn-chip--accent-gray' },\n] as const\n\n/** Pub HTML 레거시 modifier (`critic` = critical) */\nexport type StnChipLegacyGradeClass = 'critic' | 'major' | 'minor' | 'warning'\n\nexport const STN_CHIP_GRADE_LEGACY_CLASS: Record<StnChipGrade, StnChipLegacyGradeClass> = {\n  critical: 'critic',\n  major: 'major',\n  minor: 'minor',\n  warning: 'warning',\n}\n\nexport const STN_CHIP_INTRO =\n  '짧은 상태·등급·속성 라벨용 뱃지입니다. `variant=\"filled\"`는 등급 배경색(알림센터 `.tag`), `variant=\"border\"`는 테이블 `border_chip`처럼 테두리만 있는 뱃지입니다. filled·border 모두 `--stn-badge-*` 토큰(11px·16px 높이·4px radius)으로 맞춥니다. 가로 너비는 글자 길이에 따라 늘어나며 `sideLabel`로 옆 설명을 붙일 수 있습니다.'\n\n/** Badge shell metrics — `stn-badge.css` */\nexport const STN_CHIP_METRICS = [\n  { token: '--stn-badge-font-size', value: '11px (gnb alert tag)' },\n  { token: '--stn-badge-height', value: '16px' },\n  { token: '--stn-badge-radius', value: '4px (--stn-radius-4)' },\n  { token: '--stn-badge-padding-x', value: '6px (세로 0 — grid 중앙 정렬)' },\n  { token: '--stn-badge-line-height', value: '16px (= height)' },\n] as const\n\nexport type StnChipUsageRow = {\n  context: string\n  pubMarkup: string\n  note?: string\n}\n\nexport const STN_CHIP_USAGE_ROWS: StnChipUsageRow[] = [\n  {\n    context: 'GNB 알림센터',\n    pubMarkup: '<span class=\"stn-badge stn-badge--filled tag critic\">CR</span>',\n    note: '`.stn-gnb` 알림 목록 — `tag` 유지 시 레이아웃 호환',\n  },\n  {\n    context: '노드 다이얼로그 · equip-search col1',\n    pubMarkup: '<span class=\"stn-badge stn-badge--filled tag major\">MJ</span>',\n    note: '`.layer_pop.node_dialog .equip-search-table`',\n  },\n  {\n    context: '검색 필터 · error_tag',\n    pubMarkup:\n      '<span class=\"stn-badge stn-badge--filled stn-badge--critical error_tag grade-critical tag critic\">CR</span>',\n    note: '등급 filled + 레거시 `error_tag`',\n  },\n  {\n    context: '테이블 border chip',\n    pubMarkup:\n      '<span class=\"border_chip orange stn-badge stn-badge--border\"><span class=\"label\">ETH</span><span class=\"value\">100G</span></span>',\n    note: '`.value` = 칩 옆 글자 (`sideLabel`)',\n  },\n]\n\nexport const STN_CHIP_GRADE_ROWS = (Object.keys(STN_GRADE_SOURCE) as StnChipGrade[]).map(\n  (grade) => ({\n    grade,\n    label: STN_GRADE_SOURCE[grade].label,\n    descKo: STN_GRADE_SOURCE[grade].descKo,\n    cssVar: STN_GRADE_SOURCE[grade].pubVar,\n    legacyClass: STN_CHIP_GRADE_LEGACY_CLASS[grade],\n    canonicalClass: `stn-badge--${grade}`,\n  }),\n)\n"],"mappings":";;;;;AAUO,IAAM,0BAIP;AAAA,EACJ,EAAE,QAAQ,QAAQ,QAAQ,gBAAM,WAAW,wBAAwB;AAAA,EACnE,EAAE,QAAQ,OAAO,QAAQ,sBAAO,WAAW,uBAAuB;AAAA,EAClE,EAAE,QAAQ,UAAU,QAAQ,4BAAQ,WAAW,0BAA0B;AAAA,EACzE,EAAE,QAAQ,UAAU,QAAQ,sBAAO,WAAW,0BAA0B;AAAA,EACxE,EAAE,QAAQ,UAAU,QAAQ,gBAAM,WAAW,0BAA0B;AAAA,EACvE,EAAE,QAAQ,QAAQ,QAAQ,sBAAO,WAAW,wBAAwB;AACtE;AAKO,IAAM,8BAA6E;AAAA,EACxF,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;AAEO,IAAM,iBACX;AAGK,IAAM,mBAAmB;AAAA,EAC9B,EAAE,OAAO,yBAAyB,OAAO,uBAAuB;AAAA,EAChE,EAAE,OAAO,sBAAsB,OAAO,OAAO;AAAA,EAC7C,EAAE,OAAO,sBAAsB,OAAO,uBAAuB;AAAA,EAC7D,EAAE,OAAO,yBAAyB,OAAO,6DAA0B;AAAA,EACnE,EAAE,OAAO,2BAA2B,OAAO,kBAAkB;AAC/D;AAQO,IAAM,sBAAyC;AAAA,EACpD;AAAA,IACE,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WACE;AAAA,IACF,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WACE;AAAA,IACF,MAAM;AAAA,EACR;AACF;AAEO,IAAM,sBAAuB,OAAO,KAAK,gBAAgB,EAAqB;AAAA,EACnF,CAAC,WAAW;AAAA,IACV;AAAA,IACA,OAAO,iBAAiB,KAAK,EAAE;AAAA,IAC/B,QAAQ,iBAAiB,KAAK,EAAE;AAAA,IAChC,QAAQ,iBAAiB,KAAK,EAAE;AAAA,IAChC,aAAa,4BAA4B,KAAK;AAAA,IAC9C,gBAAgB,cAAc,KAAK;AAAA,EACrC;AACF;","names":[]}

package/dist/chunk-3CYSR7V4.js

@@ -0,0 +1,149 @@
+import {
+  STN_LAYER0_BACKGROUND_DEMO_IMAGES
+} from "./chunk-NGUMR3D6.js";
+
+// src/data/stnLogin.ts
+var STN_LOGIN_FIGMA = "40004209:78293";
+var STN_LOGIN_ASSETS = {
+  backgroundLight: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginLight,
+  backgroundDark: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginDark
+};
+var STN_LOGIN_INTRO = "\uB85C\uADF8\uC778 \uD398\uC774\uC9C0\uB294 LoginPageScaffold(\uD398\uC774\uC9C0) + StnLayer0BackgroundPreset(\uBC14\uB2E5) + StnLoginCard(\uCE74\uB4DC)\uC785\uB2C8\uB2E4. \uBC30\uACBD\xB7\uB85C\uACE0\uB294 \uAC01 \uCEF4\uD3EC\uB10C\uD2B8\uC758 variant\uB97C \uBC14\uAFD4 \uC7A1\uC2B5\uB2C8\uB2E4. onLogin\uB9CC \uB118\uAE30\uBA74 \uAE30\uBCF8 \uC870\uB9BD(login \uBC30\uACBD \xB7 \uAC00\uB85C XL \uB85C\uACE0)\uC774 \uB4E4\uC5B4\uAC11\uB2C8\uB2E4.";
+var STN_LOGIN_USAGE = `import { useState, type FormEvent } from 'react'
+import {
+  LoginPageScaffold,
+  StnLayer0BackgroundPreset,
+  StnLoginCard,
+  StnLoginBrandStack,
+  StnLoginFormStack,
+  StnLoginFormFields,
+  StnLoginFormLinks,
+  StnLoginTextField,
+  StnLogo,
+  StnSegmented,
+  StnButton,
+} from '@stn-uiux/pub-ui-react'
+
+function LoginPage() {
+  const [mode, setMode] = useState<'normal' | 'social'>('normal')
+  const [userId, setUserId] = useState('')
+  const [password, setPassword] = useState('')
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    // \uB85C\uADF8\uC778 API \uD638\uCD9C
+  }
+
+  return (
+    <LoginPageScaffold
+      layer0={<StnLayer0BackgroundPreset variant="login" />}
+      cardGlow={true}
+    >
+      <StnLoginCard
+        glow={true}
+        brand={
+          <StnLoginBrandStack>
+            <StnLogo variant="vertical" size="xl" />
+            <p className="stn-login-card__caption">Server Resource Monitoring</p>
+          </StnLoginBrandStack>
+        }
+      >
+        <StnLoginFormStack onSubmit={handleSubmit}>
+          <StnSegmented
+            aria-label="\uB85C\uADF8\uC778 \uBC29\uC2DD"
+            value={mode}
+            onChange={(v) => setMode(v as 'normal' | 'social')}
+            options={[
+              { value: 'normal', label: '\uC77C\uBC18 \uB85C\uADF8\uC778' },
+              { value: 'social', label: '\uC18C\uC15C \uB85C\uADF8\uC778' },
+            ]}
+          />
+          {mode === 'normal' && (
+            <StnLoginFormFields>
+              <StnLoginTextField
+                icon="line/user"
+                name="username"
+                autoComplete="username"
+                placeholder="\uC544\uC774\uB514"
+                value={userId}
+                onChange={(e) => setUserId(e.target.value)}
+                aria-label="\uC544\uC774\uB514"
+              />
+              <StnLoginTextField
+                icon="line/lock"
+                type="password"
+                name="password"
+                autoComplete="current-password"
+                placeholder="\uBE44\uBC00\uBC88\uD638"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                aria-label="\uBE44\uBC00\uBC88\uD638"
+              />
+            </StnLoginFormFields>
+          )}
+          <StnButton type="submit" size="xl" fullWidth>
+            \uB85C\uADF8\uC778
+          </StnButton>
+          <StnLoginFormLinks>
+            <a href="#signup">\uD68C\uC6D0\uAC00\uC785</a>
+            <a href="#recover">\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30</a>
+          </StnLoginFormLinks>
+        </StnLoginFormStack>
+      </StnLoginCard>
+    </LoginPageScaffold>
+  )
+}`;
+var STN_LOGIN_HTML = `<div class="stn-wrap stn-page--login" data-stn-layer-mode="v2">
+  <div class="stn-layer0-bg image" aria-hidden="true"><!-- L0 login --></div>
+  <main class="stn-elev-1" data-stn-layer-role="content">
+    <div class="stn-login">
+      <div class="stn-login-card">
+        <div class="stn-login-card__brand">
+          <div class="stn-login-brand-stack">
+            <span class="stn-logo horizontal xl">
+              <img class="stn-logo__img light" src="/@assets/svg/brand/infomap-logo-full.png" alt="InfoMap SRM" />
+              <img class="stn-logo__img dark" src="/@assets/svg/brand/infomap-logo-full-dark.png" alt="" />
+            </span>
+            <p class="stn-login-card__caption">Server Resource Monitoring</p>
+          </div>
+        </div>
+        <div class="stn-login-card__form">
+          <form class="stn-login-form-stack">
+            <div class="stn-segmented" role="radiogroup" aria-label="\uB85C\uADF8\uC778 \uBC29\uC2DD">
+              <button type="button" class="stn-segmented__item active" role="radio" aria-checked="true">\uC77C\uBC18 \uB85C\uADF8\uC778</button>
+              <button type="button" class="stn-segmented__item" role="radio" aria-checked="false">\uC18C\uC15C \uB85C\uADF8\uC778</button>
+            </div>
+            <div class="stn-login-form-fields">
+              <div class="stn-login-text-field">
+                <span class="stn-icon-box md stn-login-text-field__icon-box" aria-hidden>
+                  <span class="stn-icon stn-icon--masked" style="background-color: currentColor; width: 16px; height: 16px;"></span>
+                </span>
+                <input type="text" class="stn-login-text-field__control" placeholder="\uC544\uC774\uB514" autocomplete="username" />
+              </div>
+              <div class="stn-login-text-field">
+                <span class="stn-icon-box md stn-login-text-field__icon-box" aria-hidden>
+                  <span class="stn-icon stn-icon--masked" style="background-color: currentColor; width: 16px; height: 16px;"></span>
+                </span>
+                <input type="password" class="stn-login-text-field__control" placeholder="\uBE44\uBC00\uBC88\uD638" autocomplete="current-password" />
+              </div>
+            </div>
+            <button type="submit" class="stn-btn contained xl full">\uB85C\uADF8\uC778</button>
+            <nav class="stn-login-form-links" aria-label="\uACC4\uC815 \uAD00\uB9AC \uB9C1\uD06C">
+              <a href="#signup">\uD68C\uC6D0\uAC00\uC785</a>
+              <a href="#recover">\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30</a>
+            </nav>
+          </form>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>`;
+
+export {
+  STN_LOGIN_FIGMA,
+  STN_LOGIN_ASSETS,
+  STN_LOGIN_INTRO,
+  STN_LOGIN_USAGE,
+  STN_LOGIN_HTML
+};
+//# sourceMappingURL=chunk-3CYSR7V4.js.map

package/dist/chunk-3CYSR7V4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnLogin.ts"],"sourcesContent":["/**\n * Pub login screen — Figma 40004209:78293\n * L0 image + L1 centered card · no L2 GNB\n */\n\nimport { STN_LAYER0_BACKGROUND_DEMO_IMAGES } from './stnLayer0BackgroundAssets'\n\nexport const STN_LOGIN_FIGMA = '40004209:78293'\n\nexport const STN_LOGIN_ASSETS = {\n  backgroundLight: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginLight,\n  backgroundDark: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginDark,\n} as const\n\nexport const STN_LOGIN_INTRO =\n  '로그인 페이지는 LoginPageScaffold(페이지) + StnLayer0BackgroundPreset(바닥) + StnLoginCard(카드)입니다. 배경·로고는 각 컴포넌트의 variant를 바꿔 잡습니다. onLogin만 넘기면 기본 조립(login 배경 · 가로 XL 로고)이 들어갑니다.'\n\nexport const STN_LOGIN_USAGE = `import { useState, type FormEvent } from 'react'\nimport {\n  LoginPageScaffold,\n  StnLayer0BackgroundPreset,\n  StnLoginCard,\n  StnLoginBrandStack,\n  StnLoginFormStack,\n  StnLoginFormFields,\n  StnLoginFormLinks,\n  StnLoginTextField,\n  StnLogo,\n  StnSegmented,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nfunction LoginPage() {\n  const [mode, setMode] = useState<'normal' | 'social'>('normal')\n  const [userId, setUserId] = useState('')\n  const [password, setPassword] = useState('')\n\n  function handleSubmit(e: FormEvent) {\n    e.preventDefault()\n    // 로그인 API 호출\n  }\n\n  return (\n    <LoginPageScaffold\n      layer0={<StnLayer0BackgroundPreset variant=\"login\" />}\n      cardGlow={true}\n    >\n      <StnLoginCard\n        glow={true}\n        brand={\n          <StnLoginBrandStack>\n            <StnLogo variant=\"vertical\" size=\"xl\" />\n            <p className=\"stn-login-card__caption\">Server Resource Monitoring</p>\n          </StnLoginBrandStack>\n        }\n      >\n        <StnLoginFormStack onSubmit={handleSubmit}>\n          <StnSegmented\n            aria-label=\"로그인 방식\"\n            value={mode}\n            onChange={(v) => setMode(v as 'normal' | 'social')}\n            options={[\n              { value: 'normal', label: '일반 로그인' },\n              { value: 'social', label: '소셜 로그인' },\n            ]}\n          />\n          {mode === 'normal' && (\n            <StnLoginFormFields>\n              <StnLoginTextField\n                icon=\"line/user\"\n                name=\"username\"\n                autoComplete=\"username\"\n                placeholder=\"아이디\"\n                value={userId}\n                onChange={(e) => setUserId(e.target.value)}\n                aria-label=\"아이디\"\n              />\n              <StnLoginTextField\n                icon=\"line/lock\"\n                type=\"password\"\n                name=\"password\"\n                autoComplete=\"current-password\"\n                placeholder=\"비밀번호\"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n                aria-label=\"비밀번호\"\n              />\n            </StnLoginFormFields>\n          )}\n          <StnButton type=\"submit\" size=\"xl\" fullWidth>\n            로그인\n          </StnButton>\n          <StnLoginFormLinks>\n            <a href=\"#signup\">회원가입</a>\n            <a href=\"#recover\">아이디 / 비밀번호 찾기</a>\n          </StnLoginFormLinks>\n        </StnLoginFormStack>\n      </StnLoginCard>\n    </LoginPageScaffold>\n  )\n}`\n\nexport const STN_LOGIN_HTML = `<div class=\"stn-wrap stn-page--login\" data-stn-layer-mode=\"v2\">\n  <div class=\"stn-layer0-bg image\" aria-hidden=\"true\"><!-- L0 login --></div>\n  <main class=\"stn-elev-1\" data-stn-layer-role=\"content\">\n    <div class=\"stn-login\">\n      <div class=\"stn-login-card\">\n        <div class=\"stn-login-card__brand\">\n          <div class=\"stn-login-brand-stack\">\n            <span class=\"stn-logo horizontal xl\">\n              <img class=\"stn-logo__img light\" src=\"/@assets/svg/brand/infomap-logo-full.png\" alt=\"InfoMap SRM\" />\n              <img class=\"stn-logo__img dark\" src=\"/@assets/svg/brand/infomap-logo-full-dark.png\" alt=\"\" />\n            </span>\n            <p class=\"stn-login-card__caption\">Server Resource Monitoring</p>\n          </div>\n        </div>\n        <div class=\"stn-login-card__form\">\n          <form class=\"stn-login-form-stack\">\n            <div class=\"stn-segmented\" role=\"radiogroup\" aria-label=\"로그인 방식\">\n              <button type=\"button\" class=\"stn-segmented__item active\" role=\"radio\" aria-checked=\"true\">일반 로그인</button>\n              <button type=\"button\" class=\"stn-segmented__item\" role=\"radio\" aria-checked=\"false\">소셜 로그인</button>\n            </div>\n            <div class=\"stn-login-form-fields\">\n              <div class=\"stn-login-text-field\">\n                <span class=\"stn-icon-box md stn-login-text-field__icon-box\" aria-hidden>\n                  <span class=\"stn-icon stn-icon--masked\" style=\"background-color: currentColor; width: 16px; height: 16px;\"></span>\n                </span>\n                <input type=\"text\" class=\"stn-login-text-field__control\" placeholder=\"아이디\" autocomplete=\"username\" />\n              </div>\n              <div class=\"stn-login-text-field\">\n                <span class=\"stn-icon-box md stn-login-text-field__icon-box\" aria-hidden>\n                  <span class=\"stn-icon stn-icon--masked\" style=\"background-color: currentColor; width: 16px; height: 16px;\"></span>\n                </span>\n                <input type=\"password\" class=\"stn-login-text-field__control\" placeholder=\"비밀번호\" autocomplete=\"current-password\" />\n              </div>\n            </div>\n            <button type=\"submit\" class=\"stn-btn contained xl full\">로그인</button>\n            <nav class=\"stn-login-form-links\" aria-label=\"계정 관리 링크\">\n              <a href=\"#signup\">회원가입</a>\n              <a href=\"#recover\">아이디 / 비밀번호 찾기</a>\n            </nav>\n          </form>\n        </div>\n      </div>\n    </div>\n  </main>\n</div>`\n"],"mappings":";;;;;AAOO,IAAM,kBAAkB;AAExB,IAAM,mBAAmB;AAAA,EAC9B,iBAAiB,kCAAkC;AAAA,EACnD,gBAAgB,kCAAkC;AACpD;AAEO,IAAM,kBACX;AAEK,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqFxB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/{chunk-WN7FYFIO.js → chunk-AJLP3Y53.js}

@@ -2,12 +2,14 @@
 var STN_CARD_VARIANTS = ["flat", "outlined", "elevated"];
 var STN_CARD_RADII = ["sm", "md", "lg", "none"];
 var STN_CARD_PADDINGS = ["none", "sm", "md", "lg"];
+var STN_CARD_SEVERITIES = ["critical", "major", "minor", "warning"];
 var STN_CARD_INTRO = "\uCF58\uD150\uCE20\uB97C \uC2DC\uAC01\uC801\uC73C\uB85C \uADF8\uB8F9\uD654\uD558\uACE0 \uACC4\uCE35\uC744 \uBD80\uC5EC\uD558\uB294 \uD45C\uC900 \uC11C\uD53C\uC2A4(Surface) \uCEE8\uD14C\uC774\uB108 \uCEF4\uD3EC\uB10C\uD2B8\uC785\uB2C8\uB2E4. \uD50C\uB7AB, \uC544\uC6C3\uB77C\uC778, \uC5D8\uB9AC\uBCA0\uC774\uD2F0\uB4DC \uBCC0\uD615\uACFC \uB77C\uC6B4\uB4DC \uBC0F \uD328\uB529 \uADDC\uACA9\uC744 \uC81C\uACF5\uD558\uBA70, \uB2E8\uB3C5 \uD2C0\uB85C\uC11C \uD639\uC740 \uD5E4\uB354/\uBCF8\uBB38/\uD478\uD130 \uD569\uC131 \uAD6C\uC870\uB85C \uC720\uC5F0\uD558\uAC8C \uD65C\uC6A9\uB429\uB2C8\uB2E4.";
 
 export {
   STN_CARD_VARIANTS,
   STN_CARD_RADII,
   STN_CARD_PADDINGS,
+  STN_CARD_SEVERITIES,
   STN_CARD_INTRO
 };
-//# sourceMappingURL=chunk-WN7FYFIO.js.map
+//# sourceMappingURL=chunk-AJLP3Y53.js.map

package/dist/chunk-AJLP3Y53.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnCard.ts"],"sourcesContent":["export type StnCardVariant = 'flat' | 'outlined' | 'elevated'\nexport type StnCardRadius = 'sm' | 'md' | 'lg' | 'none'\nexport type StnCardPadding = 'none' | 'sm' | 'md' | 'lg'\nexport type StnCardSeverity = 'critical' | 'major' | 'minor' | 'warning'\n\nexport const STN_CARD_VARIANTS: readonly StnCardVariant[] = ['flat', 'outlined', 'elevated'] as const\nexport const STN_CARD_RADII: readonly StnCardRadius[] = ['sm', 'md', 'lg', 'none'] as const\nexport const STN_CARD_PADDINGS: readonly StnCardPadding[] = ['none', 'sm', 'md', 'lg'] as const\nexport const STN_CARD_SEVERITIES: readonly StnCardSeverity[] = ['critical', 'major', 'minor', 'warning'] as const\n\nexport const STN_CARD_INTRO =\n  '콘텐츠를 시각적으로 그룹화하고 계층을 부여하는 표준 서피스(Surface) 컨테이너 컴포넌트입니다. 플랫, 아웃라인, 엘리베이티드 변형과 라운드 및 패딩 규격을 제공하며, 단독 틀로서 혹은 헤더/본문/푸터 합성 구조로 유연하게 활용됩니다.'\n"],"mappings":";AAKO,IAAM,oBAA+C,CAAC,QAAQ,YAAY,UAAU;AACpF,IAAM,iBAA2C,CAAC,MAAM,MAAM,MAAM,MAAM;AAC1E,IAAM,oBAA+C,CAAC,QAAQ,MAAM,MAAM,IAAI;AAC9E,IAAM,sBAAkD,CAAC,YAAY,SAAS,SAAS,SAAS;AAEhG,IAAM,iBACX;","names":[]}

package/dist/chunk-RY53LLWK.js

@@ -0,0 +1,9 @@
+// src/data/stnPackageVersion.ts
+var STN_UI_VERSION = "0.1.76";
+var STN_UI_VERSION_LABEL = "v0.1.76";
+
+export {
+  STN_UI_VERSION,
+  STN_UI_VERSION_LABEL
+};
+//# sourceMappingURL=chunk-RY53LLWK.js.map

package/dist/chunk-RY53LLWK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnPackageVersion.ts"],"sourcesContent":["/** Package version constants */\nexport const STN_UI_VERSION = '0.1.76'\nexport const STN_UI_VERSION_LABEL = 'v0.1.76'\n"],"mappings":";AACO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;","names":[]}

package/dist/{chunk-NB4NJQYE.js → chunk-YJLOIDKY.js}

@@ -3,41 +3,41 @@ var STN_TEXT_FIELD_FIGMA = "40000042:186898";
 var STN_TEXT_FIELD_INTRO = "Infomap \uAC80\uC0C9\xB7\uD544\uD130\uC6A9 **\uD14D\uC2A4\uD2B8 \uC785\uB825**\uC785\uB2C8\uB2E4. **outlined**(\uBC15\uC2A4, \uAE30\uBCF8) \xB7 **filled**(\uBA74) \xB7 **standard**(\uD558\uB2E8 \uB77C\uC778). Light filled = gray-50. Dark filled = gray-750. helperText\uB294 \uD558\uB2E8 \uC67C\uCABD \uCEA1\uC158. React `StnTextField` \xB7 Pub `.stn-text-field`.";
 var STN_TEXT_FIELD_SIZE_ROWS = [
   {
-    size: "S",
-    height: "24px",
-    radius: "4px (radius-4)",
-    fontSize: "13px",
-    paddingX: "10px",
-    typicalWidth: "width \uD504\uB9AC\uC14B \xB7 \uAE30\uBCF8 140px \xB7 fullWidth=100%",
+    size: "sm",
+    height: "24px (var(--stn-size-sm))",
+    radius: "var(--stn-radius-sm, 4px)",
+    fontSize: "var(--stn-text-body-small-size, 13px)",
+    paddingX: "var(--stn-space-2, 8px)",
+    typicalWidth: "width \uD504\uB9AC\uC14B (w80~w200) \xB7 fullWidth=100%",
     pubClass: "stn-text-field sm",
     usedIn: "\uD14C\uC774\uBE14 \uC140 \xB7 \uC881\uC740 \uAC80\uC0C9"
   },
   {
-    size: "M",
-    height: "32px",
-    radius: "4px (radius-4)",
-    fontSize: "13px",
-    paddingX: "10px",
-    typicalWidth: "width \uD504\uB9AC\uC14B \xB7 \uAE30\uBCF8 140px \xB7 fullWidth=100%",
+    size: "md",
+    height: "32px (var(--stn-size-md))",
+    radius: "var(--stn-radius-sm, 4px)",
+    fontSize: "var(--stn-text-body-small-size, 13px)",
+    paddingX: "var(--stn-space-3, 12px)",
+    typicalWidth: "width \uD504\uB9AC\uC14B (w80~w200) \xB7 fullWidth=100%",
     pubClass: "stn-text-field md",
     usedIn: "\uAC80\uC0C9\uC601\uC5ED \xB7 \uD544\uD130 \uAC12"
   },
   {
-    size: "L",
-    height: "40px",
-    radius: "6px (radius-6)",
-    fontSize: "14px",
-    paddingX: "12px",
-    typicalWidth: "width \uD504\uB9AC\uC14B \xB7 \uAE30\uBCF8 140px \xB7 fullWidth=100%",
+    size: "lg",
+    height: "40px (var(--stn-size-lg))",
+    radius: "var(--stn-radius-md, 6px)",
+    fontSize: "var(--stn-text-body-medium-size, 14px)",
+    paddingX: "var(--stn-space-4, 16px)",
+    typicalWidth: "width \uD504\uB9AC\uC14B (w80~w200) \xB7 fullWidth=100%",
     pubClass: "stn-text-field lg",
     usedIn: "\uAC15\uC870 \uAC80\uC0C9 \xB7 \uB113\uC740 \uB77C\uBCA8 \uC5F4"
   },
   {
-    size: "XL",
-    height: "56px",
-    radius: "16px (radius-16)",
-    fontSize: "14px",
-    paddingX: "16px",
+    size: "xl",
+    height: "56px (var(--stn-size-xl))",
+    radius: "var(--stn-radius-lg, 16px)",
+    fontSize: "var(--stn-text-body-medium-size, 14px)",
+    paddingX: "var(--stn-space-5, 20px)",
     typicalWidth: "fullWidth=100%",
     pubClass: "stn-text-field xl",
     usedIn: "\uB113\uC740 \uAC80\uC0C9 \xB7 \uAC15\uC870 \uC785\uB825"
@@ -70,4 +70,4 @@ export {
   STN_TEXT_FIELD_USAGE,
   STN_TEXT_FIELD_HTML
 };
-//# sourceMappingURL=chunk-NB4NJQYE.js.map
+//# sourceMappingURL=chunk-YJLOIDKY.js.map

package/dist/chunk-YJLOIDKY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnTextField.ts"],"sourcesContent":["/**\n * Pub text input — Infomap `input` (Figma 40000042:186898)\n * @see common.css form inputs · StnTextField\n */\n\n/** sm (24px) · md (32px) · lg (40px) · xl (56px) */\nexport type StnTextFieldSize = 'sm' | 'md' | 'lg' | 'xl'\n\nexport const STN_TEXT_FIELD_FIGMA = '40000042:186898'\n\nexport const STN_TEXT_FIELD_INTRO =\n  \"Infomap 검색·필터용 **텍스트 입력**입니다. **outlined**(박스, 기본) · **filled**(면) · **standard**(하단 라인). Light filled = gray-50. Dark filled = gray-750. helperText는 하단 왼쪽 캡션. React `StnTextField` · Pub `.stn-text-field`.\"\n\nexport const STN_TEXT_FIELD_SIZE_ROWS: readonly {\n  size: StnTextFieldSize\n  height: string\n  radius: string\n  fontSize: string\n  paddingX: string\n  typicalWidth: string\n  pubClass: string\n  usedIn: string\n}[] = [\n  {\n    size: 'sm',\n    height: '24px (var(--stn-size-sm))',\n    radius: 'var(--stn-radius-sm, 4px)',\n    fontSize: 'var(--stn-text-body-small-size, 13px)',\n    paddingX: 'var(--stn-space-2, 8px)',\n    typicalWidth: 'width 프리셋 (w80~w200) · fullWidth=100%',\n    pubClass: 'stn-text-field sm',\n    usedIn: '테이블 셀 · 좁은 검색',\n  },\n  {\n    size: 'md',\n    height: '32px (var(--stn-size-md))',\n    radius: 'var(--stn-radius-sm, 4px)',\n    fontSize: 'var(--stn-text-body-small-size, 13px)',\n    paddingX: 'var(--stn-space-3, 12px)',\n    typicalWidth: 'width 프리셋 (w80~w200) · fullWidth=100%',\n    pubClass: 'stn-text-field md',\n    usedIn: '검색영역 · 필터 값',\n  },\n  {\n    size: 'lg',\n    height: '40px (var(--stn-size-lg))',\n    radius: 'var(--stn-radius-md, 6px)',\n    fontSize: 'var(--stn-text-body-medium-size, 14px)',\n    paddingX: 'var(--stn-space-4, 16px)',\n    typicalWidth: 'width 프리셋 (w80~w200) · fullWidth=100%',\n    pubClass: 'stn-text-field lg',\n    usedIn: '강조 검색 · 넓은 라벨 열',\n  },\n  {\n    size: 'xl',\n    height: '56px (var(--stn-size-xl))',\n    radius: 'var(--stn-radius-lg, 16px)',\n    fontSize: 'var(--stn-text-body-medium-size, 14px)',\n    paddingX: 'var(--stn-space-5, 20px)',\n    typicalWidth: 'fullWidth=100%',\n    pubClass: 'stn-text-field xl',\n    usedIn: '넓은 검색 · 강조 입력',\n  },\n] as const\n\nexport const STN_TEXT_FIELD_STATES = [\n  { id: 'default', label: 'Default', note: 'border `--stn-input-border` · bg `--stn-input-bg`' },\n  { id: 'focus', label: 'Focus', note: 'border `--stn-input-focus` (2px)' },\n  { id: 'placeholder', label: 'Placeholder', note: 'color `--stn-input-placeholder`' },\n  { id: 'disabled', label: 'Disabled', note: 'opacity 0.55 · not-allowed' },\n  { id: 'invalid', label: 'Invalid', note: 'border `--stn-feedback-error` · `aria-invalid` 또는 `invalid` prop' },\n] as const\n\nexport const STN_TEXT_FIELD_USAGE = \"import { StnTextField } from '@stn-uiux/pub-ui-react'\\n\\n<StnTextField variant=\\\"outlined\\\" placeholder=\\\"검색\\\" />\\n<StnTextField variant=\\\"filled\\\" placeholder=\\\"입력\\\" />\\n<StnTextField variant=\\\"standard\\\" placeholder=\\\"입력\\\" helperText=\\\"도움말\\\" />\"\n\nexport const STN_TEXT_FIELD_HTML = `<input\n  type=\"text\"\n  class=\"stn-text-field md\"\n  value=\"전체\"\n  aria-label=\"필터\"\n/>`\n"],"mappings":";AAQO,IAAM,uBAAuB;AAE7B,IAAM,uBACX;AAEK,IAAM,2BASP;AAAA,EACJ;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF;AAEO,IAAM,wBAAwB;AAAA,EACnC,EAAE,IAAI,WAAW,OAAO,WAAW,MAAM,uDAAoD;AAAA,EAC7F,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,mCAAmC;AAAA,EACxE,EAAE,IAAI,eAAe,OAAO,eAAe,MAAM,kCAAkC;AAAA,EACnF,EAAE,IAAI,YAAY,OAAO,YAAY,MAAM,gCAA6B;AAAA,EACxE,EAAE,IAAI,WAAW,OAAO,WAAW,MAAM,gFAAmE;AAC9G;AAEO,IAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAE7B,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/cli.js

@@ -1,6 +1,6 @@
 import {
   STN_TEXT_FIELD_USAGE
-} from "./chunk-NB4NJQYE.js";
+} from "./chunk-YJLOIDKY.js";
 import {
   STN_TOAST_REACT_USAGE
 } from "./chunk-SOEBXG3T.js";

package/dist/data/index.d.ts

@@ -61,7 +61,7 @@ export { STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT, STN_TOGGLE_BUTTON_PLAYGROUND_INTR
 export { STN_TREE_DEMO, STN_TREE_FIGMA, STN_TREE_INTRO, STN_TREE_PARTS, STN_TREE_PATTERN_PLAYGROUND_DEFAULT, STN_TREE_PATTERN_PLAYGROUND_PROPERTIES, STN_TREE_REACT_EXAMPLE, STN_TREE_SECTION_SIDE_FIGMA, STN_TREE_USAGE_HTML, StnTreeDemoNode, StnTreePatternPlaygroundConfig, describeTreePatternReact } from './stnTree.js';
 export { STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, StnTypeScaleCategory, StnTypeScaleRow, resolveTypeScaleName, typeScalePill } from './stnTypeScale.js';
 export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LINE_HEIGHT_ROWS, STN_TYPOGRAPHY_PRIMITIVE_GROUPS, STN_TYPOGRAPHY_SEMANTIC_ROWS, StnTypographyPrimitiveRow, StnTypographySemanticRow, typographyPrimitivesToJson, typographySemanticsToJson } from './stnTypography.js';
-export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardVariant } from './stnCard.js';
+export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_SEVERITIES, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardSeverity, StnCardVariant } from './stnCard.js';
 export { STN_ALERT_CENTER_DASHBOARD_USAGE, STN_ALERT_CENTER_DASHBOARD_WIDGETS, STN_WIDGET_APPEARANCE_ROWS, STN_WIDGET_CHART_SLOT_HTML, STN_WIDGET_CHART_SLOT_REACT, STN_WIDGET_DISABILITY_STATUS_DEMO, STN_WIDGET_FIGMA, STN_WIDGET_FIGMA_DARK, STN_WIDGET_FIGMA_DARK_URL, STN_WIDGET_FIGMA_SHELL_HTML, STN_WIDGET_FIGMA_SHELL_REACT, STN_WIDGET_FIGMA_URL, STN_WIDGET_GRADE_ROW_DEMO, STN_WIDGET_HEADER_HTML, STN_WIDGET_HEADER_REACT, STN_WIDGET_INTRO, STN_WIDGET_KINDS, STN_WIDGET_SHELL_ROWS, STN_WIDGET_TOP5_BARS_DEMO, STN_WIDGET_TRAFFIC_BARS_DEMO, STN_WIDGET_USAGE, STN_WIDGET_USAGE_HTML, StnWidgetAppearance, StnWidgetAppearanceLegacy, StnWidgetAppearanceShell, StnWidgetAssetId, StnWidgetBackgroundMode, StnWidgetContentFamily, StnWidgetGradeRowGrade, StnWidgetKind, StnWidgetKindBodySlot, StnWidgetKindPreview, StnWidgetShell, buildStnWidgetKindUsage, getStnWidgetKind, isStnWidgetKindSlug, normalizeStnWidgetAppearance, resolveStnWidgetBackground, resolveStnWidgetKindAppearance, resolveStnWidgetKindBodySlot, stnWidgetSampleUrl } from './stnWidget.js';
 export { STN_STATUS_DEMO_STEPS, StnStatusDotState, StnStatusFlowStep, StnStatusFlowStepColor } from './stnStatus.js';
 export { StnTabIconPosition, StnTabIconSize, StnTabItem, StnTabPanelPadding, StnTabScrollButtons, StnTabsSize, StnTabsVariant } from './stnTabs.js';

package/dist/data/index.js

@@ -118,7 +118,7 @@ import {
   STN_LOGIN_HTML,
   STN_LOGIN_INTRO,
   STN_LOGIN_USAGE
-} from "../chunk-AWJXDCX2.js";
+} from "../chunk-3CYSR7V4.js";
 import {
   STN_MAP_DASHBOARD_OPTION_ROWS
 } from "../chunk-3DAZMM4T.js";
@@ -136,7 +136,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-Q363EBGR.js";
+} from "../chunk-RY53LLWK.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -229,8 +229,9 @@ import {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS
-} from "../chunk-WN7FYFIO.js";
+} from "../chunk-AJLP3Y53.js";
 import {
   STN_CHART_INTRO
 } from "../chunk-DGZVOSEM.js";
@@ -253,7 +254,7 @@ import {
   STN_CHIP_INTRO,
   STN_CHIP_METRICS,
   STN_CHIP_USAGE_ROWS
-} from "../chunk-KLIYAEJA.js";
+} from "../chunk-2LRCGTKQ.js";
 import {
   STN_ALL_PALETTE_ROWS,
   STN_BLUE_SCALE,
@@ -298,7 +299,7 @@ import {
   STN_TEXT_FIELD_SIZE_ROWS,
   STN_TEXT_FIELD_STATES,
   STN_TEXT_FIELD_USAGE
-} from "../chunk-NB4NJQYE.js";
+} from "../chunk-YJLOIDKY.js";
 import {
   STN_TOAST_DEMO_MSG,
   STN_TOAST_ICON_SLUG,
@@ -585,6 +586,7 @@ export {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS,
   STN_CDN_ASSET_BASE,
   STN_CHART_INTRO,

package/dist/data/stnCard.d.ts

@@ -1,9 +1,11 @@
 type StnCardVariant = 'flat' | 'outlined' | 'elevated';
 type StnCardRadius = 'sm' | 'md' | 'lg' | 'none';
 type StnCardPadding = 'none' | 'sm' | 'md' | 'lg';
+type StnCardSeverity = 'critical' | 'major' | 'minor' | 'warning';
 declare const STN_CARD_VARIANTS: readonly StnCardVariant[];
 declare const STN_CARD_RADII: readonly StnCardRadius[];
 declare const STN_CARD_PADDINGS: readonly StnCardPadding[];
+declare const STN_CARD_SEVERITIES: readonly StnCardSeverity[];
 declare const STN_CARD_INTRO = "\uCF58\uD150\uCE20\uB97C \uC2DC\uAC01\uC801\uC73C\uB85C \uADF8\uB8F9\uD654\uD558\uACE0 \uACC4\uCE35\uC744 \uBD80\uC5EC\uD558\uB294 \uD45C\uC900 \uC11C\uD53C\uC2A4(Surface) \uCEE8\uD14C\uC774\uB108 \uCEF4\uD3EC\uB10C\uD2B8\uC785\uB2C8\uB2E4. \uD50C\uB7AB, \uC544\uC6C3\uB77C\uC778, \uC5D8\uB9AC\uBCA0\uC774\uD2F0\uB4DC \uBCC0\uD615\uACFC \uB77C\uC6B4\uB4DC \uBC0F \uD328\uB529 \uADDC\uACA9\uC744 \uC81C\uACF5\uD558\uBA70, \uB2E8\uB3C5 \uD2C0\uB85C\uC11C \uD639\uC740 \uD5E4\uB354/\uBCF8\uBB38/\uD478\uD130 \uD569\uC131 \uAD6C\uC870\uB85C \uC720\uC5F0\uD558\uAC8C \uD65C\uC6A9\uB429\uB2C8\uB2E4.";
 
-export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, type StnCardPadding, type StnCardRadius, type StnCardVariant };
+export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_SEVERITIES, STN_CARD_VARIANTS, type StnCardPadding, type StnCardRadius, type StnCardSeverity, type StnCardVariant };

package/dist/data/stnCard.js

@@ -2,12 +2,14 @@ import {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS
-} from "../chunk-WN7FYFIO.js";
+} from "../chunk-AJLP3Y53.js";
 export {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS
 };
 //# sourceMappingURL=stnCard.js.map

package/dist/data/stnChip.d.ts

@@ -4,13 +4,12 @@ import './stnColorPalette.js';
 
 /** 등급 칩 — 알림센터 `.tag` · equip-search `.tag` · `error_tag` 와 동일 토큰 */
 type StnChipGrade = StnGradeKind;
-/** 테이블 `border_chip` accent (등급과 별도) */
+/** 테두리 액센트 칩 스케일 */
 type StnChipBorderAccent = 'mint' | 'sky' | 'violet' | 'orange' | 'yellow' | 'gray';
 declare const STN_CHIP_BORDER_ACCENTS: readonly {
     accent: StnChipBorderAccent;
     descKo: string;
-    cssBorder: string;
-    cssText: string;
+    className: string;
 }[];
 /** Pub HTML 레거시 modifier (`critic` = critical) */
 type StnChipLegacyGradeClass = 'critic' | 'major' | 'minor' | 'warning';

package/dist/data/stnChip.js

@@ -5,7 +5,7 @@ import {
   STN_CHIP_INTRO,
   STN_CHIP_METRICS,
   STN_CHIP_USAGE_ROWS
-} from "../chunk-KLIYAEJA.js";
+} from "../chunk-2LRCGTKQ.js";
 import {
   STN_GRADE_SOURCE
 } from "../chunk-E26XJXQY.js";

package/dist/data/stnLogin.d.ts

@@ -4,8 +4,8 @@
  */
 declare const STN_LOGIN_FIGMA = "40004209:78293";
 declare const STN_LOGIN_ASSETS: {
-    readonly backgroundLight: string;
-    readonly backgroundDark: string;
+    readonly backgroundLight: "https://stn-design.vercel.app/images/layer0/login-light.png";
+    readonly backgroundDark: "https://stn-design.vercel.app/images/layer0/login-dark.png";
 };
 declare const STN_LOGIN_INTRO = "\uB85C\uADF8\uC778 \uD398\uC774\uC9C0\uB294 LoginPageScaffold(\uD398\uC774\uC9C0) + StnLayer0BackgroundPreset(\uBC14\uB2E5) + StnLoginCard(\uCE74\uB4DC)\uC785\uB2C8\uB2E4. \uBC30\uACBD\u00B7\uB85C\uACE0\uB294 \uAC01 \uCEF4\uD3EC\uB10C\uD2B8\uC758 variant\uB97C \uBC14\uAFD4 \uC7A1\uC2B5\uB2C8\uB2E4. onLogin\uB9CC \uB118\uAE30\uBA74 \uAE30\uBCF8 \uC870\uB9BD(login \uBC30\uACBD \u00B7 \uAC00\uB85C XL \uB85C\uACE0)\uC774 \uB4E4\uC5B4\uAC11\uB2C8\uB2E4.";
 declare const STN_LOGIN_USAGE = "import { useState, type FormEvent } from 'react'\nimport {\n  LoginPageScaffold,\n  StnLayer0BackgroundPreset,\n  StnLoginCard,\n  StnLoginBrandStack,\n  StnLoginFormStack,\n  StnLoginFormFields,\n  StnLoginFormLinks,\n  StnLoginTextField,\n  StnLogo,\n  StnSegmented,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nfunction LoginPage() {\n  const [mode, setMode] = useState<'normal' | 'social'>('normal')\n  const [userId, setUserId] = useState('')\n  const [password, setPassword] = useState('')\n\n  function handleSubmit(e: FormEvent) {\n    e.preventDefault()\n    // \uB85C\uADF8\uC778 API \uD638\uCD9C\n  }\n\n  return (\n    <LoginPageScaffold\n      layer0={<StnLayer0BackgroundPreset variant=\"login\" />}\n      cardGlow={true}\n    >\n      <StnLoginCard\n        glow={true}\n        brand={\n          <StnLoginBrandStack>\n            <StnLogo variant=\"vertical\" size=\"xl\" />\n            <p className=\"stn-login-card__caption\">Server Resource Monitoring</p>\n          </StnLoginBrandStack>\n        }\n      >\n        <StnLoginFormStack onSubmit={handleSubmit}>\n          <StnSegmented\n            aria-label=\"\uB85C\uADF8\uC778 \uBC29\uC2DD\"\n            value={mode}\n            onChange={(v) => setMode(v as 'normal' | 'social')}\n            options={[\n              { value: 'normal', label: '\uC77C\uBC18 \uB85C\uADF8\uC778' },\n              { value: 'social', label: '\uC18C\uC15C \uB85C\uADF8\uC778' },\n            ]}\n          />\n          {mode === 'normal' && (\n            <StnLoginFormFields>\n              <StnLoginTextField\n                icon=\"line/user\"\n                name=\"username\"\n                autoComplete=\"username\"\n                placeholder=\"\uC544\uC774\uB514\"\n                value={userId}\n                onChange={(e) => setUserId(e.target.value)}\n                aria-label=\"\uC544\uC774\uB514\"\n              />\n              <StnLoginTextField\n                icon=\"line/lock\"\n                type=\"password\"\n                name=\"password\"\n                autoComplete=\"current-password\"\n                placeholder=\"\uBE44\uBC00\uBC88\uD638\"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n                aria-label=\"\uBE44\uBC00\uBC88\uD638\"\n              />\n            </StnLoginFormFields>\n          )}\n          <StnButton type=\"submit\" size=\"xl\" fullWidth>\n            \uB85C\uADF8\uC778\n          </StnButton>\n          <StnLoginFormLinks>\n            <a href=\"#signup\">\uD68C\uC6D0\uAC00\uC785</a>\n            <a href=\"#recover\">\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30</a>\n          </StnLoginFormLinks>\n        </StnLoginFormStack>\n      </StnLoginCard>\n    </LoginPageScaffold>\n  )\n}";

package/dist/data/stnLogin.js

@@ -4,7 +4,8 @@ import {
   STN_LOGIN_HTML,
   STN_LOGIN_INTRO,
   STN_LOGIN_USAGE
-} from "../chunk-AWJXDCX2.js";
+} from "../chunk-3CYSR7V4.js";
+import "../chunk-NGUMR3D6.js";
 export {
   STN_LOGIN_ASSETS,
   STN_LOGIN_FIGMA,

package/dist/data/stnPackageVersion.d.ts

@@ -1,5 +1,5 @@
 /** Package version constants */
-declare const STN_UI_VERSION = "0.1.73";
-declare const STN_UI_VERSION_LABEL = "v0.1.73";
+declare const STN_UI_VERSION = "0.1.76";
+declare const STN_UI_VERSION_LABEL = "v0.1.76";
 
 export { STN_UI_VERSION, STN_UI_VERSION_LABEL };

package/dist/data/stnPackageVersion.js

@@ -1,7 +1,7 @@
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-Q363EBGR.js";
+} from "../chunk-RY53LLWK.js";
 export {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL

package/dist/data/stnTextField.d.ts

@@ -2,8 +2,8 @@
  * Pub text input — Infomap `input` (Figma 40000042:186898)
  * @see common.css form inputs · StnTextField
  */
-/** S 24px · M 32px · L 40px · XL 56px */
-type StnTextFieldSize = 'S' | 'M' | 'L' | 'XL';
+/** sm (24px) · md (32px) · lg (40px) · xl (56px) */
+type StnTextFieldSize = 'sm' | 'md' | 'lg' | 'xl';
 declare const STN_TEXT_FIELD_FIGMA = "40000042:186898";
 declare const STN_TEXT_FIELD_INTRO = "Infomap \uAC80\uC0C9\u00B7\uD544\uD130\uC6A9 **\uD14D\uC2A4\uD2B8 \uC785\uB825**\uC785\uB2C8\uB2E4. **outlined**(\uBC15\uC2A4, \uAE30\uBCF8) \u00B7 **filled**(\uBA74) \u00B7 **standard**(\uD558\uB2E8 \uB77C\uC778). Light filled = gray-50. Dark filled = gray-750. helperText\uB294 \uD558\uB2E8 \uC67C\uCABD \uCEA1\uC158. React `StnTextField` \u00B7 Pub `.stn-text-field`.";
 declare const STN_TEXT_FIELD_SIZE_ROWS: readonly {

package/dist/data/stnTextField.js

@@ -5,7 +5,7 @@ import {
   STN_TEXT_FIELD_SIZE_ROWS,
   STN_TEXT_FIELD_STATES,
   STN_TEXT_FIELD_USAGE
-} from "../chunk-NB4NJQYE.js";
+} from "../chunk-YJLOIDKY.js";
 export {
   STN_TEXT_FIELD_FIGMA,
   STN_TEXT_FIELD_HTML,

package/dist/index.d.ts

@@ -61,7 +61,7 @@ export { STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT, STN_TOGGLE_BUTTON_PLAYGROUND_INTR
 export { STN_TREE_DEMO, STN_TREE_FIGMA, STN_TREE_INTRO, STN_TREE_PARTS, STN_TREE_PATTERN_PLAYGROUND_DEFAULT, STN_TREE_PATTERN_PLAYGROUND_PROPERTIES, STN_TREE_REACT_EXAMPLE, STN_TREE_SECTION_SIDE_FIGMA, STN_TREE_USAGE_HTML, StnTreeDemoNode, StnTreePatternPlaygroundConfig, describeTreePatternReact } from './data/stnTree.js';
 export { STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, StnTypeScaleCategory, StnTypeScaleRow, resolveTypeScaleName, typeScalePill } from './data/stnTypeScale.js';
 export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LINE_HEIGHT_ROWS, STN_TYPOGRAPHY_PRIMITIVE_GROUPS, STN_TYPOGRAPHY_SEMANTIC_ROWS, StnTypographyPrimitiveRow, StnTypographySemanticRow, typographyPrimitivesToJson, typographySemanticsToJson } from './data/stnTypography.js';
-export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardVariant } from './data/stnCard.js';
+export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_SEVERITIES, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardSeverity, StnCardVariant } from './data/stnCard.js';
 export { STN_ALERT_CENTER_DASHBOARD_USAGE, STN_ALERT_CENTER_DASHBOARD_WIDGETS, STN_WIDGET_APPEARANCE_ROWS, STN_WIDGET_CHART_SLOT_HTML, STN_WIDGET_CHART_SLOT_REACT, STN_WIDGET_DISABILITY_STATUS_DEMO, STN_WIDGET_FIGMA, STN_WIDGET_FIGMA_DARK, STN_WIDGET_FIGMA_DARK_URL, STN_WIDGET_FIGMA_SHELL_HTML, STN_WIDGET_FIGMA_SHELL_REACT, STN_WIDGET_FIGMA_URL, STN_WIDGET_GRADE_ROW_DEMO, STN_WIDGET_HEADER_HTML, STN_WIDGET_HEADER_REACT, STN_WIDGET_INTRO, STN_WIDGET_KINDS, STN_WIDGET_SHELL_ROWS, STN_WIDGET_TOP5_BARS_DEMO, STN_WIDGET_TRAFFIC_BARS_DEMO, STN_WIDGET_USAGE, STN_WIDGET_USAGE_HTML, StnWidgetAppearance, StnWidgetAppearanceLegacy, StnWidgetAppearanceShell, StnWidgetAssetId, StnWidgetBackgroundMode, StnWidgetContentFamily, StnWidgetGradeRowGrade, StnWidgetKind, StnWidgetKindBodySlot, StnWidgetKindPreview, StnWidgetShell, buildStnWidgetKindUsage, getStnWidgetKind, isStnWidgetKindSlug, normalizeStnWidgetAppearance, resolveStnWidgetBackground, resolveStnWidgetKindAppearance, resolveStnWidgetKindBodySlot, stnWidgetSampleUrl } from './data/stnWidget.js';
 export { STN_STATUS_DEMO_STEPS, StnStatusDotState, StnStatusFlowStep, StnStatusFlowStepColor } from './data/stnStatus.js';
 export { StnTabIconPosition, StnTabIconSize, StnTabItem, StnTabPanelPadding, StnTabScrollButtons, StnTabsSize, StnTabsVariant } from './data/stnTabs.js';

package/dist/index.js

@@ -123,7 +123,7 @@ import {
   STN_LOGIN_HTML,
   STN_LOGIN_INTRO,
   STN_LOGIN_USAGE
-} from "./chunk-AWJXDCX2.js";
+} from "./chunk-3CYSR7V4.js";
 import {
   STN_MAP_DASHBOARD_OPTION_ROWS
 } from "./chunk-3DAZMM4T.js";
@@ -141,7 +141,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-Q363EBGR.js";
+} from "./chunk-RY53LLWK.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -234,8 +234,9 @@ import {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS
-} from "./chunk-WN7FYFIO.js";
+} from "./chunk-AJLP3Y53.js";
 import {
   STN_CHART_INTRO
 } from "./chunk-DGZVOSEM.js";
@@ -258,7 +259,7 @@ import {
   STN_CHIP_INTRO,
   STN_CHIP_METRICS,
   STN_CHIP_USAGE_ROWS
-} from "./chunk-KLIYAEJA.js";
+} from "./chunk-2LRCGTKQ.js";
 import {
   STN_ALL_PALETTE_ROWS,
   STN_BLUE_SCALE,
@@ -303,7 +304,7 @@ import {
   STN_TEXT_FIELD_SIZE_ROWS,
   STN_TEXT_FIELD_STATES,
   STN_TEXT_FIELD_USAGE
-} from "./chunk-NB4NJQYE.js";
+} from "./chunk-YJLOIDKY.js";
 import {
   STN_TOAST_DEMO_MSG,
   STN_TOAST_ICON_SLUG,
@@ -590,6 +591,7 @@ export {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS,
   STN_CDN_ASSET_BASE,
   STN_CHART_INTRO,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stn-uiux/pub-ui",
-  "version": "0.1.73",
+  "version": "0.1.76",
   "description": "STN Pub design system — tokens, specs, and CSS for product HTML / React apps",
   "type": "module",
   "sideEffects": [