@stn-uiux/pub-ui 0.1.68 → 0.1.70

package/dist/chunk-7ONB2WVN.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-7ONB2WVN.js.map

package/dist/{chunk-HJCUNRB3.js → chunk-FSSMH6VS.js}

@@ -29,6 +29,20 @@ var STN_LAYER0_BACKGROUND_VARIANT_ROWS = [
     figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,
     note: "Dashboard \xB7 light/dark pair"
   },
+  {
+    preset: "infomap",
+    kind: "image",
+    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,
+    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,
+    note: "Infomap 3D Graphic \xB7 light/dark pair"
+  },
+  {
+    preset: "infomap-none",
+    kind: "image",
+    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,
+    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,
+    note: "Infomap 3D Graphic (None/\uD14D\uC2A4\uD2B8 \uC5C6\uC74C) \xB7 light/dark pair"
+  },
   {
     preset: "showroom-a",
     kind: "image",
@@ -116,6 +130,8 @@ var STN_LAYER0_BACKGROUND_USAGE_HTML = `<!-- L0 background \u2014 color / image
 var STN_LAYER0_MAP_LIGHT_OVERLAY = 0.2;
 var STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS = [
   { id: "dashboard", label: "dashboard", asset: "\uB300\uC2DC\uBCF4\uB4DC \uBC30\uACBD (dashboard-light / dark)", variant: "dashboard" },
+  { id: "infomap", label: "infomap", asset: "\uC778\uD3EC\uB9F5 3D \uBC30\uACBD (infomap-light / dark)", variant: "infomap" },
+  { id: "infomap-none", label: "infomap-none", asset: "\uC778\uD3EC\uB9F5 3D (None/\uD14D\uC2A4\uD2B8 \uC5C6\uC74C)", variant: "infomap-none" },
   { id: "color", label: "color", asset: "\uB2E8\uC0C9 \uD14C\uB9C8 \uBC30\uACBD (solid default)", variant: "none" },
   { id: "gradient", label: "gradient", asset: "\uACF5\uC2DD \uC570\uBE44\uC5B8\uD2B8 \uADF8\uB77C\uB370\uC774\uC158 (\uC6CC\uC2DC/\uC2EC\uB3C4)", variant: "gradient" },
   { id: "map", label: "map", asset: "GIS \uC9C0\uB3C4 \uBC30\uACBD (map-light)", variant: "map-light" },
@@ -132,4 +148,4 @@ export {
   STN_LAYER0_MAP_LIGHT_OVERLAY,
   STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS
 };
-//# sourceMappingURL=chunk-HJCUNRB3.js.map
+//# sourceMappingURL=chunk-FSSMH6VS.js.map

package/dist/chunk-FSSMH6VS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnLayer0Background.ts"],"sourcesContent":["/**\n * Infomap Layer 0 background pattern\n * Light: 41267 · 186876 · 186860 · 202895\n * Dark:  80488 · 35369 · 84014 · 91183\n * @see StnLayer0Background · layouts/stn-layer0-bg.css\n */\n\nexport const STN_LAYER0_BACKGROUND_FIGMA = {\n  none: '40000040:41267',\n  noneDark: '40000040:80488',\n  showroomA: '40000042:186876',\n  showroomADark: '40002117:35369',\n  showroomB: '40000042:186860',\n  showroomBDark: '40000040:84014',\n  mapLight: '40000042:202895',\n  mapDark: '40000040:91183',\n  login: '40004209:78293',\n  loginDark: '40004209:78293',\n  dashboard: '40004209:78300',\n  dashboardDark: '40004209:78300',\n} as const\n\nexport type StnLayer0BackgroundKind = 'color' | 'gradient' | 'image'\n\n/** Figma 예제 프리셋 — color 1종 · gradient 1종 · image 7종 (light/dark 자동 전환) */\nexport type StnLayer0BackgroundPreset = 'none' | 'gradient' | 'showroom-a' | 'showroom-b' | 'map-light' | 'login' | 'dashboard' | 'infomap' | 'infomap-none'\n\n/** Doc site · Pub HTML 기준 경로 — 앱에서는 동일 경로 또는 자산 URL로 교체 */\nexport {\n  STN_LAYER0_BACKGROUND_ASSET_PATHS,\n  STN_LAYER0_BACKGROUND_DEMO_IMAGES,\n} from './stnLayer0BackgroundAssets'\n\nexport const STN_LAYER0_BACKGROUND_INTRO =\n  '페이지 최하단 레벨(Level 0)에 위치하는 시스템 바닥면 배경 패턴입니다. 단색 컬러 및 맵·토폴로지 캔버스 배경 이미지를 `StnLayer0BackgroundPreset`으로 손쉽게 적용할 수 있습니다.'\n\nexport const STN_LAYER0_BACKGROUND_VARIANT_ROWS = [\n  {\n    preset: 'none',\n    kind: 'color',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.none,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.noneDark,\n    note: 'Light gradient · Dark elevation surface-0 (gray-950)',\n  },\n  {\n    preset: 'dashboard',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n    note: 'Dashboard · light/dark pair',\n  },\n  {\n    preset: 'infomap',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n    note: 'Infomap 3D Graphic · light/dark pair',\n  },\n  {\n    preset: 'infomap-none',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n    note: 'Infomap 3D Graphic (None/텍스트 없음) · light/dark pair',\n  },\n  {\n    preset: 'showroom-a',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.showroomA,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomADark,\n    note: 'Showroom A · dark logo stage',\n  },\n  {\n    preset: 'showroom-b',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.showroomB,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomBDark,\n    note: 'Showroom B · dark + radial vignette',\n  },\n  {\n    preset: 'map-light',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.mapLight,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.mapDark,\n    note: 'Map light(+20% white) · Map dark',\n  },\n  {\n    preset: 'login',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.login,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.loginDark,\n    note: 'Login · light/dark pair',\n  },\n] as const satisfies ReadonlyArray<{\n  preset: StnLayer0BackgroundPreset\n  kind: StnLayer0BackgroundKind\n  figma: string\n  figmaDark: string\n  note: string\n}>\n\nexport const STN_LAYER0_BACKGROUND_USAGE = `import {\n  StnLayer,\n  StnLayer0Background,\n  StnLayer0BackgroundPreset,\n  DashboardPageScaffold,\n} from '@stn-uiux/pub-ui-react'\n\n/** Map / Topology — wrapClassName만 (맵 배경은 elevation CSS) */\n<DashboardPageScaffold\n  shell=\"layer\"\n  wrapClassName=\"stn-page--map-bg\"\n  gnb={…}\n  header={…}\n/>\n\n/** 일반 페이지 — L0 color (default = elevation-surface-0) */\n<StnLayer.Background>\n  <StnLayer0Background color=\"default\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n/** Figma image 프리셋 — showroom · map · login */\n<StnLayer.Background>\n  <StnLayer0BackgroundPreset variant=\"map-light\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n<StnLayer.Background>\n  <StnLayer0BackgroundPreset variant=\"login\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n/** 직접 조합 — light/dark 이미지 */\n<StnLayer.Background>\n  <StnLayer0Background\n    kind=\"image\"\n    src=\"/assets/bg-light.png\"\n    srcDark=\"/assets/bg-dark.png\"\n  />\n  <StnLayer.Content>…</StnLayer.Content>\n</StnLayer.Background>`\n\nexport const STN_LAYER0_BACKGROUND_USAGE_HTML = `<!-- L0 background — color / image -->\n<div class=\"stn-elev-0 stn-layer0-bg\">\n  <!-- color -->\n  <div class=\"stn-layer0-bg color default\" aria-hidden=\"true\"></div>\n\n  <!-- 또는 image -->\n  <div\n    class=\"stn-layer0-bg image\"\n    style=\"--stn-layer0-bg-image: url('/assets/bg-light.png')\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <main class=\"stn-elev-1\"><!-- L1 content --></main>\n</div>`\n\nexport const STN_LAYER0_MAP_LIGHT_OVERLAY = 0.2\n\n/** Patterns → Background playground 프리셋 (UI 라벨 · 내부 variant) */\nexport type StnLayer0BackgroundPlaygroundPresetId =\n  | 'dashboard'\n  | 'infomap'\n  | 'infomap-none'\n  | 'color'\n  | 'gradient'\n  | 'map'\n  | 'topology'\n  | 'none'\n\nexport const STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS: {\n  id: StnLayer0BackgroundPlaygroundPresetId\n  label: string\n  asset: string\n  variant?: StnLayer0BackgroundPreset\n}[] = [\n  { id: 'dashboard', label: 'dashboard', asset: '대시보드 배경 (dashboard-light / dark)', variant: 'dashboard' },\n  { id: 'infomap', label: 'infomap', asset: '인포맵 3D 배경 (infomap-light / dark)', variant: 'infomap' },\n  { id: 'infomap-none', label: 'infomap-none', asset: '인포맵 3D (None/텍스트 없음)', variant: 'infomap-none' },\n  { id: 'color', label: 'color', asset: '단색 테마 배경 (solid default)', variant: 'none' },\n  { id: 'gradient', label: 'gradient', asset: '공식 앰비언트 그라데이션 (워시/심도)', variant: 'gradient' },\n  { id: 'map', label: 'map', asset: 'GIS 지도 배경 (map-light)', variant: 'map-light' },\n  { id: 'topology', label: 'topology', asset: '토폴로지 배경 (showroom-b)', variant: 'showroom-b' },\n  { id: 'none', label: 'none', asset: 'L0 배경 없음 (외부 캔버스 전용)', variant: 'none' },\n]\n"],"mappings":";AAOO,IAAM,8BAA8B;AAAA,EACzC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,eAAe;AAAA,EACf,WAAW;AAAA,EACX,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe;AACjB;AAaO,IAAM,8BACX;AAEK,IAAM,qCAAqC;AAAA,EAChD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AACF;AAQO,IAAM,8BAA8B;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;AA0CpC,IAAM,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezC,IAAM,+BAA+B;AAarC,IAAM,2CAKP;AAAA,EACJ,EAAE,IAAI,aAAa,OAAO,aAAa,OAAO,kEAAoC,SAAS,YAAY;AAAA,EACvG,EAAE,IAAI,WAAW,OAAO,WAAW,OAAO,6DAAoC,SAAS,UAAU;AAAA,EACjG,EAAE,IAAI,gBAAgB,OAAO,gBAAgB,OAAO,gEAAwB,SAAS,eAAe;AAAA,EACpG,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,0DAA4B,SAAS,OAAO;AAAA,EAClF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,oGAAyB,SAAS,WAAW;AAAA,EACzF,EAAE,IAAI,OAAO,OAAO,OAAO,OAAO,6CAAyB,SAAS,YAAY;AAAA,EAChF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,sDAAwB,SAAS,aAAa;AAAA,EAC1F,EAAE,IAAI,QAAQ,OAAO,QAAQ,OAAO,+EAAwB,SAAS,OAAO;AAC9E;","names":[]}

package/dist/{chunk-LKVTW54X.js → chunk-IZRGNUH6.js}

@@ -174,4 +174,4 @@ export {
   STN_DROPDOWN_MENU_INTRO,
   STN_DROPDOWN_MENU_USAGE
 };
-//# sourceMappingURL=chunk-LKVTW54X.js.map
+//# sourceMappingURL=chunk-IZRGNUH6.js.map

package/dist/chunk-IZRGNUH6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnDropdown.ts"],"sourcesContent":["/**\n * StnDropdown — native `<select>` · custom menu (`div.selected` + `ul.select_option`)\n * @see common.css · content.css (cctv-header, simple_board_area, ip_mpls)\n */\n\nexport type StnDropdownMode = 'native' | 'menu'\n\nexport type StnDropdownSize = 'sm' | 'md' | 'lg' | 'xl'\n\nexport type StnDropdownVariant = 'outline' | 'standard' | 'filled' | 'transparent' | 'translucent'\nexport type StnDropdownHelperTextPosition = 'top' | 'bottom' | 'left' | 'right'\nexport type StnDropdownDirection = 'down' | 'up'\n\n/** native: select에 class 직접 · wrapper: div.stn-dropdown > select.selected */\nexport type StnDropdownNativeLayout = 'inline' | 'wrapper'\n\nexport type StnDropdownModifier =\n  | 'pageSize'\n  | 'serverFilter'\n  | 'networkArea'\n  | 'fullWidth'\n\nexport type StnDropdownOption = {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\n/** StnDropdown menu sm/md/lg/xl — height only · width는 `width`/`fullWidth` */\nexport const STN_DROPDOWN_SIZE_ROWS: readonly {\n  size: StnDropdownSize\n  height: string\n  radius: string\n  fontSize: string\n  pubClass: string\n  typicalWidth: string\n  usedIn: string\n}[] = [\n  {\n    size: 'sm',\n    height: '24px',\n    radius: '4px (radius-4)',\n    fontSize: '13px',\n    pubClass: 'stn-dropdown sm',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '폼·테이블 셀 · 좁은 검색',\n  },\n  {\n    size: 'md',\n    height: '32px',\n    radius: '4px (radius-4)',\n    fontSize: '13px',\n    pubClass: 'stn-dropdown md',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '검색영역 · interface_list',\n  },\n  {\n    size: 'lg',\n    height: '40px',\n    radius: '6px (radius-6)',\n    fontSize: '14px',\n    pubClass: 'stn-dropdown lg',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '강조 검색 · 넓은 라벨 열',\n  },\n  {\n    size: 'xl',\n    height: '52px',\n    radius: '8px (radius-8)',\n    fontSize: '15px',\n    pubClass: 'stn-dropdown xl',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: 'CCTV 헤더 검색 · 대형 대시보드 메뉴 (기존 prominent 통합)',\n  },\n] as const\n\nexport const STN_DROPDOWN_INTRO =\n  'Infomap **input** 크롬 + `.stn-dropdown` 계약입니다. **Light** (`40000042:186901`) — white · gray-200 · gray-600. **Dark** (modal `40000040:75056`) — TextField와 동일 `--stn-input-*`. Chevron: Figma `40000040:101798` `icon/line/arrow-right` 12px (`/@assets/svg/system/line/arrow-right.svg` · rotate 90°). React 표준 **`StnDropdown` menu** — sm/md/lg(24·32·40px) · width 프리셋/fullWidth.'\n\nexport const STN_DROPDOWN_INVENTORY: readonly {\n  id: string\n  mode: StnDropdownMode\n  size: StnDropdownSize\n  pubClass: string\n  height: string\n  typicalWidth: string\n  usedIn: string\n  exampleHtml: string\n}[] = [\n  {\n    id: 'native-search-md',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-dropdown--size-md',\n    height: '32px',\n    typicalWidth: '130px (.search_area) · 기본 180px',\n    usedIn: '검색영역 — interface_list, device_detail',\n    exampleHtml: 'ip_mpls/interface_list.html',\n  },\n  {\n    id: 'native-form-sm',\n    mode: 'native',\n    size: 'sm',\n    pubClass: 'stn-dropdown stn-dropdown--size-sm',\n    height: '24px',\n    typicalWidth: '100% (.w100p) · 60–100px 인라인',\n    usedIn: '등록/상세 폼, IP-MPLS 테이블 셀',\n    exampleHtml: 'ip_mpls/interface_regist.html',\n  },\n  {\n    id: 'native-wrapper',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown > select.selected',\n    height: '32px',\n    typicalWidth: '130px',\n    usedIn: '처리상태 등 — wrapper 안에 select',\n    exampleHtml: 'dev_version/device_detail.html',\n  },\n  {\n    id: 'native-search-field',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown > select.selected.select_search',\n    height: '32px',\n    typicalWidth: 'auto',\n    usedIn: '검색분야 선택 + 텍스트 input 조합',\n    exampleHtml: 'dev_version/access_log.html',\n  },\n  {\n    id: 'menu-cctv-prominent',\n    mode: 'menu',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-dropdown--prominent · .selected · .select_option',\n    height: '52px (prominent)',\n    typicalWidth: '110px (cctv-header) · 200px (simple_board)',\n    usedIn: 'CCTV 헤더 검색 — React `StnDropdownMenu`',\n    exampleHtml: 'koscom/honeycomb.html',\n  },\n  {\n    id: 'menu-board-prominent',\n    mode: 'menu',\n    size: 'md',\n    pubClass: 'simple_board_area .search_area .stn-dropdown.stn-dropdown--prominent',\n    height: '52px (prominent)',\n    typicalWidth: '200px',\n    usedIn: '간편 게시판 검색 — `StnDropdownMenu`',\n    exampleHtml: 'basic/simple_dashboard.html',\n  },\n  {\n    id: 'native-page-size',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-table__page-size',\n    height: '32px',\n    typicalWidth: 'min 72px',\n    usedIn: '테이블 footer 페이지 크기',\n    exampleHtml: 'dev_version/device_detail.html',\n  },\n  {\n    id: 'native-server-filter',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown server_filter',\n    height: '32px',\n    typicalWidth: 'default',\n    usedIn: '프로세스 팝업 검색',\n    exampleHtml: 'dev_version/process (pop)',\n  },\n  {\n    id: 'native-network-area',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown network_area_box',\n    height: '32px',\n    typicalWidth: 'default',\n    usedIn: '토폴로지·망영역 선택',\n    exampleHtml: 'config topology screens',\n  },\n] as const\n\nexport const STN_DROPDOWN_HTML_COUNTS = {\n  nativeSelectBoxFiles: 56,\n  customMenuFiles: 12,\n  smallTysFiles: 17,\n  wrapperSelectFiles: 13,\n} as const\n\nexport const STN_DROPDOWN_USAGE = `import { StnDropdown } from '@stn-uiux/pub-ui-react'\n\n// size = 높이 · width = 별도 (80·100·140·180·200 · fullWidth)\n<StnDropdown size=\"sm\" width={100} options={gradeOptions} value={grade} onChange={setGrade} />\n<StnDropdown size=\"md\" width={180} options={shutdownOptions} value={shutdown} onChange={setShutdown} />\n<StnDropdown size=\"lg\" fullWidth options={statusOptions} value={status} onChange={setStatus} />`\n\nexport const STN_DROPDOWN_HTML = `<!-- StnDropdown · 커스텀 드롭다운 -->\n<div class=\"stn-dropdown md\">\n  <div class=\"selected\">선택값</div>\n  <ul class=\"select_option\">\n    <li>옵션 1</li>\n  </ul>\n</div>`\n\nexport const STN_DROPDOWN_MENU_INTRO =\n  '검색줄·대시보드용 **두꺼운 커스텀 메뉴**(52px, radius 8px). Pub `cctv-header` / `simple_board_area`와 동일 계열입니다. React는 `StnDropdownMenu`(`stn-dropdown--prominent`)를 쓰고, 일반 드롭다운 sm/md/lg는 `StnDropdown`입니다.'\n\nexport const STN_DROPDOWN_MENU_USAGE = `import { StnDropdownMenu } from '@stn-uiux/pub-ui-react'\n\n<StnDropdownMenu\n  width={110}\n  options={[\n    { value: 'all', label: '전체' },\n    { value: 'group', label: '그룹명' },\n    { value: 'device', label: '장비명' },\n  ]}\n  value={field}\n  onChange={setField}\n  aria-label=\"검색 필드\"\n/>`\n"],"mappings":"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","names":[]}

package/dist/{chunk-XBFXX3D6.js → chunk-NGUMR3D6.js}

@@ -14,7 +14,13 @@ var STN_LAYER0_BACKGROUND_DEMO_IMAGES = {
   mapDark: `${STN_CDN_ASSET_BASE}/map-dark.png`,
   login: `${STN_CDN_ASSET_BASE}/login-light.png`,
   loginLight: `${STN_CDN_ASSET_BASE}/login-light.png`,
-  loginDark: `${STN_CDN_ASSET_BASE}/login-dark.png`
+  loginDark: `${STN_CDN_ASSET_BASE}/login-dark.png`,
+  infomap: `${STN_CDN_ASSET_BASE}/infomap-light.png`,
+  infomapLight: `${STN_CDN_ASSET_BASE}/infomap-light.png`,
+  infomapDark: `${STN_CDN_ASSET_BASE}/infomap-dark.png`,
+  infomapNone: `${STN_CDN_ASSET_BASE}/infomap-light-none.png`,
+  infomapNoneLight: `${STN_CDN_ASSET_BASE}/infomap-light-none.png`,
+  infomapNoneDark: `${STN_CDN_ASSET_BASE}/infomap-dark-none.png`
 };
 var STN_LAYER0_BACKGROUND_ASSET_PATHS = {
   dashboard: "@assets/images/layer0/dashboard-light.png",
@@ -30,7 +36,13 @@ var STN_LAYER0_BACKGROUND_ASSET_PATHS = {
   mapDark: "@assets/images/layer0/map-dark.png",
   login: "@assets/images/layer0/login-light.png",
   loginLight: "@assets/images/layer0/login-light.png",
-  loginDark: "@assets/images/layer0/login-dark.png"
+  loginDark: "@assets/images/layer0/login-dark.png",
+  infomap: "@assets/images/layer0/infomap-light.png",
+  infomapLight: "@assets/images/layer0/infomap-light.png",
+  infomapDark: "@assets/images/layer0/infomap-dark.png",
+  infomapNone: "@assets/images/layer0/infomap-light-none.png",
+  infomapNoneLight: "@assets/images/layer0/infomap-light-none.png",
+  infomapNoneDark: "@assets/images/layer0/infomap-dark-none.png"
 };
 
 export {
@@ -38,4 +50,4 @@ export {
   STN_LAYER0_BACKGROUND_DEMO_IMAGES,
   STN_LAYER0_BACKGROUND_ASSET_PATHS
 };
-//# sourceMappingURL=chunk-XBFXX3D6.js.map
+//# sourceMappingURL=chunk-NGUMR3D6.js.map

package/dist/chunk-NGUMR3D6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnLayer0BackgroundAssets.ts"],"sourcesContent":["/**\n * L0 preset images — Hosted on STN Official Vercel CDN for zero-setup & instant loading.\n */\nexport const STN_CDN_ASSET_BASE = 'https://stn-design.vercel.app/images/layer0'\n\nexport const STN_LAYER0_BACKGROUND_DEMO_IMAGES = {\n  dashboard: `${STN_CDN_ASSET_BASE}/dashboard-light.png`,\n  dashboardLight: `${STN_CDN_ASSET_BASE}/dashboard-light.png`,\n  dashboardDark: `${STN_CDN_ASSET_BASE}/dashboard-dark.png`,\n  showroomA: `${STN_CDN_ASSET_BASE}/showroom-a-light.png`,\n  showroomALight: `${STN_CDN_ASSET_BASE}/showroom-a-light.png`,\n  showroomADark: `${STN_CDN_ASSET_BASE}/showroom-a-dark.png`,\n  showroomB: `${STN_CDN_ASSET_BASE}/showroom-b-light.png`,\n  showroomBLight: `${STN_CDN_ASSET_BASE}/showroom-b-light.png`,\n  showroomBDark: `${STN_CDN_ASSET_BASE}/showroom-b-dark.png`,\n  mapLight: `${STN_CDN_ASSET_BASE}/map-light.png`,\n  mapDark: `${STN_CDN_ASSET_BASE}/map-dark.png`,\n  login: `${STN_CDN_ASSET_BASE}/login-light.png`,\n  loginLight: `${STN_CDN_ASSET_BASE}/login-light.png`,\n  loginDark: `${STN_CDN_ASSET_BASE}/login-dark.png`,\n  infomap: `${STN_CDN_ASSET_BASE}/infomap-light.png`,\n  infomapLight: `${STN_CDN_ASSET_BASE}/infomap-light.png`,\n  infomapDark: `${STN_CDN_ASSET_BASE}/infomap-dark.png`,\n  infomapNone: `${STN_CDN_ASSET_BASE}/infomap-light-none.png`,\n  infomapNoneLight: `${STN_CDN_ASSET_BASE}/infomap-light-none.png`,\n  infomapNoneDark: `${STN_CDN_ASSET_BASE}/infomap-dark-none.png`,\n} as const\n\n/** Pub CSS @assets 경로 — HTML·vanilla 소비자용 */\nexport const STN_LAYER0_BACKGROUND_ASSET_PATHS = {\n  dashboard: '@assets/images/layer0/dashboard-light.png',\n  dashboardLight: '@assets/images/layer0/dashboard-light.png',\n  dashboardDark: '@assets/images/layer0/dashboard-dark.png',\n  showroomA: '@assets/images/layer0/showroom-a-light.png',\n  showroomALight: '@assets/images/layer0/showroom-a-light.png',\n  showroomADark: '@assets/images/layer0/showroom-a-dark.png',\n  showroomB: '@assets/images/layer0/showroom-b-light.png',\n  showroomBLight: '@assets/images/layer0/showroom-b-light.png',\n  showroomBDark: '@assets/images/layer0/showroom-b-dark.png',\n  mapLight: '@assets/images/layer0/map-light.png',\n  mapDark: '@assets/images/layer0/map-dark.png',\n  login: '@assets/images/layer0/login-light.png',\n  loginLight: '@assets/images/layer0/login-light.png',\n  loginDark: '@assets/images/layer0/login-dark.png',\n  infomap: '@assets/images/layer0/infomap-light.png',\n  infomapLight: '@assets/images/layer0/infomap-light.png',\n  infomapDark: '@assets/images/layer0/infomap-dark.png',\n  infomapNone: '@assets/images/layer0/infomap-light-none.png',\n  infomapNoneLight: '@assets/images/layer0/infomap-light-none.png',\n  infomapNoneDark: '@assets/images/layer0/infomap-dark-none.png',\n} as const\n"],"mappings":";AAGO,IAAM,qBAAqB;AAE3B,IAAM,oCAAoC;AAAA,EAC/C,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,UAAU,GAAG,kBAAkB;AAAA,EAC/B,SAAS,GAAG,kBAAkB;AAAA,EAC9B,OAAO,GAAG,kBAAkB;AAAA,EAC5B,YAAY,GAAG,kBAAkB;AAAA,EACjC,WAAW,GAAG,kBAAkB;AAAA,EAChC,SAAS,GAAG,kBAAkB;AAAA,EAC9B,cAAc,GAAG,kBAAkB;AAAA,EACnC,aAAa,GAAG,kBAAkB;AAAA,EAClC,aAAa,GAAG,kBAAkB;AAAA,EAClC,kBAAkB,GAAG,kBAAkB;AAAA,EACvC,iBAAiB,GAAG,kBAAkB;AACxC;AAGO,IAAM,oCAAoC;AAAA,EAC/C,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiB;AACnB;","names":[]}

package/dist/chunk-O77GW7PM.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-O77GW7PM.js.map

package/dist/chunk-O77GW7PM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/cli.js

@@ -1,3 +1,6 @@
+import {
+  STN_TEXT_FIELD_USAGE
+} from "./chunk-NB4NJQYE.js";
 import {
   STN_TOAST_REACT_USAGE
 } from "./chunk-SOEBXG3T.js";
@@ -11,9 +14,6 @@ import {
 import {
   STN_TABLE_REACT_EXAMPLE
 } from "./chunk-IOBNIUK3.js";
-import {
-  STN_TEXT_FIELD_USAGE
-} from "./chunk-NB4NJQYE.js";
 import {
   STN_SIDE_NAVIGATION_USAGE,
   STN_SIDE_NAV_ITEM_USAGE
@@ -32,8 +32,8 @@ import {
 } from "./chunk-EQ6LUBD6.js";
 import {
   STN_LAYER0_BACKGROUND_USAGE
-} from "./chunk-HJCUNRB3.js";
-import "./chunk-XBFXX3D6.js";
+} from "./chunk-FSSMH6VS.js";
+import "./chunk-NGUMR3D6.js";
 import {
   STN_LAYOUT_LIST_VIEW_USAGE
 } from "./chunk-2ZYBBVBT.js";
@@ -42,7 +42,7 @@ import {
 } from "./chunk-5BGXBJXN.js";
 import {
   STN_DROPDOWN_USAGE
-} from "./chunk-LKVTW54X.js";
+} from "./chunk-IZRGNUH6.js";
 import {
   STN_HEADER_USAGE
 } from "./chunk-ESH5VDHX.js";

package/dist/data/index.d.ts

@@ -64,4 +64,6 @@ export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LIN
 export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, 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';
 export { SYSTEM_ICON_DATA_URLS } from './stnSystemIconsData.generated.js';
+import 'react';

package/dist/data/index.js

@@ -1,4 +1,4 @@
-import "../chunk-AVICAV6Z.js";
+import "../chunk-O77GW7PM.js";
 import {
   STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT,
   STN_TOGGLE_BUTTON_PLAYGROUND_INTRO,
@@ -32,6 +32,7 @@ import {
 import {
   STN_STATUS_DEMO_STEPS
 } from "../chunk-SQJPE6HH.js";
+import "../chunk-7ONB2WVN.js";
 import {
   STN_TEXT_AREA_HTML,
   STN_TEXT_AREA_INTRO,
@@ -290,6 +291,14 @@ import {
   STN_GRADE_SEMANTIC_ROWS,
   STN_GRADE_SOURCE
 } from "../chunk-E26XJXQY.js";
+import {
+  STN_TEXT_FIELD_FIGMA,
+  STN_TEXT_FIELD_HTML,
+  STN_TEXT_FIELD_INTRO,
+  STN_TEXT_FIELD_SIZE_ROWS,
+  STN_TEXT_FIELD_STATES,
+  STN_TEXT_FIELD_USAGE
+} from "../chunk-NB4NJQYE.js";
 import {
   STN_TOAST_DEMO_MSG,
   STN_TOAST_ICON_SLUG,
@@ -360,14 +369,6 @@ import {
   STN_TABLE_TH_CHECK_FIGMA,
   STN_TABLE_TH_LABEL_FIGMA
 } from "../chunk-IOBNIUK3.js";
-import {
-  STN_TEXT_FIELD_FIGMA,
-  STN_TEXT_FIELD_HTML,
-  STN_TEXT_FIELD_INTRO,
-  STN_TEXT_FIELD_SIZE_ROWS,
-  STN_TEXT_FIELD_STATES,
-  STN_TEXT_FIELD_USAGE
-} from "../chunk-NB4NJQYE.js";
 import {
   STN_SIDE_NAVIGATION_INTRO,
   STN_SIDE_NAVIGATION_USAGE,
@@ -422,12 +423,12 @@ import {
   STN_LAYER0_BACKGROUND_USAGE_HTML,
   STN_LAYER0_BACKGROUND_VARIANT_ROWS,
   STN_LAYER0_MAP_LIGHT_OVERLAY
-} from "../chunk-HJCUNRB3.js";
+} from "../chunk-FSSMH6VS.js";
 import {
   STN_CDN_ASSET_BASE,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES
-} from "../chunk-XBFXX3D6.js";
+} from "../chunk-NGUMR3D6.js";
 import {
   STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE,
   STN_LAYER_SHELL_USAGE,
@@ -474,7 +475,7 @@ import {
   STN_DROPDOWN_MENU_USAGE,
   STN_DROPDOWN_SIZE_ROWS,
   STN_DROPDOWN_USAGE
-} from "../chunk-LKVTW54X.js";
+} from "../chunk-IZRGNUH6.js";
 import {
   STN_HEADER_INTRO,
   STN_HEADER_PAGE_TITLE_DEMO,

package/dist/data/stnDropdown.d.ts

@@ -4,7 +4,7 @@
  */
 type StnDropdownMode = 'native' | 'menu';
 type StnDropdownSize = 'sm' | 'md' | 'lg' | 'xl';
-type StnDropdownVariant = 'outline' | 'standard' | 'filled' | 'transparent';
+type StnDropdownVariant = 'outline' | 'standard' | 'filled' | 'transparent' | 'translucent';
 type StnDropdownHelperTextPosition = 'top' | 'bottom' | 'left' | 'right';
 type StnDropdownDirection = 'down' | 'up';
 /** native: select에 class 직접 · wrapper: div.stn-dropdown > select.selected */

package/dist/data/stnDropdown.js

@@ -7,7 +7,7 @@ import {
   STN_DROPDOWN_MENU_USAGE,
   STN_DROPDOWN_SIZE_ROWS,
   STN_DROPDOWN_USAGE
-} from "../chunk-LKVTW54X.js";
+} from "../chunk-IZRGNUH6.js";
 export {
   STN_DROPDOWN_HTML,
   STN_DROPDOWN_HTML_COUNTS,

package/dist/data/stnLayer0Background.d.ts

@@ -21,8 +21,8 @@ declare const STN_LAYER0_BACKGROUND_FIGMA: {
     readonly dashboardDark: "40004209:78300";
 };
 type StnLayer0BackgroundKind = 'color' | 'gradient' | 'image';
-/** Figma 예제 프리셋 — color 1종 · gradient 1종 · image 5종 (light/dark 자동 전환) */
-type StnLayer0BackgroundPreset = 'none' | 'gradient' | 'showroom-a' | 'showroom-b' | 'map-light' | 'login' | 'dashboard';
+/** Figma 예제 프리셋 — color 1종 · gradient 1종 · image 7종 (light/dark 자동 전환) */
+type StnLayer0BackgroundPreset = 'none' | 'gradient' | 'showroom-a' | 'showroom-b' | 'map-light' | 'login' | 'dashboard' | 'infomap' | 'infomap-none';
 
 declare const STN_LAYER0_BACKGROUND_INTRO = "\uD398\uC774\uC9C0 \uCD5C\uD558\uB2E8 \uB808\uBCA8(Level 0)\uC5D0 \uC704\uCE58\uD558\uB294 \uC2DC\uC2A4\uD15C \uBC14\uB2E5\uBA74 \uBC30\uACBD \uD328\uD134\uC785\uB2C8\uB2E4. \uB2E8\uC0C9 \uCEEC\uB7EC \uBC0F \uB9F5\u00B7\uD1A0\uD3F4\uB85C\uC9C0 \uCE94\uBC84\uC2A4 \uBC30\uACBD \uC774\uBBF8\uC9C0\uB97C `StnLayer0BackgroundPreset`\uC73C\uB85C \uC190\uC27D\uAC8C \uC801\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.";
 declare const STN_LAYER0_BACKGROUND_VARIANT_ROWS: readonly [{
@@ -37,6 +37,18 @@ declare const STN_LAYER0_BACKGROUND_VARIANT_ROWS: readonly [{
     readonly figma: "40004209:78300";
     readonly figmaDark: "40004209:78300";
     readonly note: "Dashboard · light/dark pair";
+}, {
+    readonly preset: "infomap";
+    readonly kind: "image";
+    readonly figma: "40004209:78300";
+    readonly figmaDark: "40004209:78300";
+    readonly note: "Infomap 3D Graphic · light/dark pair";
+}, {
+    readonly preset: "infomap-none";
+    readonly kind: "image";
+    readonly figma: "40004209:78300";
+    readonly figmaDark: "40004209:78300";
+    readonly note: "Infomap 3D Graphic (None/텍스트 없음) · light/dark pair";
 }, {
     readonly preset: "showroom-a";
     readonly kind: "image";
@@ -66,7 +78,7 @@ declare const STN_LAYER0_BACKGROUND_USAGE = "import {\n  StnLayer,\n  StnLayer0B
 declare const STN_LAYER0_BACKGROUND_USAGE_HTML = "<!-- L0 background \u2014 color / image -->\n<div class=\"stn-elev-0 stn-layer0-bg\">\n  <!-- color -->\n  <div class=\"stn-layer0-bg color default\" aria-hidden=\"true\"></div>\n\n  <!-- \uB610\uB294 image -->\n  <div\n    class=\"stn-layer0-bg image\"\n    style=\"--stn-layer0-bg-image: url('/assets/bg-light.png')\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <main class=\"stn-elev-1\"><!-- L1 content --></main>\n</div>";
 declare const STN_LAYER0_MAP_LIGHT_OVERLAY = 0.2;
 /** Patterns → Background playground 프리셋 (UI 라벨 · 내부 variant) */
-type StnLayer0BackgroundPlaygroundPresetId = 'dashboard' | 'color' | 'gradient' | 'map' | 'topology' | 'none';
+type StnLayer0BackgroundPlaygroundPresetId = 'dashboard' | 'infomap' | 'infomap-none' | 'color' | 'gradient' | 'map' | 'topology' | 'none';
 declare const STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS: {
     id: StnLayer0BackgroundPlaygroundPresetId;
     label: string;

package/dist/data/stnLayer0Background.js

@@ -6,11 +6,11 @@ import {
   STN_LAYER0_BACKGROUND_USAGE_HTML,
   STN_LAYER0_BACKGROUND_VARIANT_ROWS,
   STN_LAYER0_MAP_LIGHT_OVERLAY
-} from "../chunk-HJCUNRB3.js";
+} from "../chunk-FSSMH6VS.js";
 import {
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES
-} from "../chunk-XBFXX3D6.js";
+} from "../chunk-NGUMR3D6.js";
 export {
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES,

package/dist/data/stnLayer0BackgroundAssets.d.ts

@@ -17,6 +17,12 @@ declare const STN_LAYER0_BACKGROUND_DEMO_IMAGES: {
     readonly login: "https://stn-design.vercel.app/images/layer0/login-light.png";
     readonly loginLight: "https://stn-design.vercel.app/images/layer0/login-light.png";
     readonly loginDark: "https://stn-design.vercel.app/images/layer0/login-dark.png";
+    readonly infomap: "https://stn-design.vercel.app/images/layer0/infomap-light.png";
+    readonly infomapLight: "https://stn-design.vercel.app/images/layer0/infomap-light.png";
+    readonly infomapDark: "https://stn-design.vercel.app/images/layer0/infomap-dark.png";
+    readonly infomapNone: "https://stn-design.vercel.app/images/layer0/infomap-light-none.png";
+    readonly infomapNoneLight: "https://stn-design.vercel.app/images/layer0/infomap-light-none.png";
+    readonly infomapNoneDark: "https://stn-design.vercel.app/images/layer0/infomap-dark-none.png";
 };
 /** Pub CSS @assets 경로 — HTML·vanilla 소비자용 */
 declare const STN_LAYER0_BACKGROUND_ASSET_PATHS: {
@@ -34,6 +40,12 @@ declare const STN_LAYER0_BACKGROUND_ASSET_PATHS: {
     readonly login: "@assets/images/layer0/login-light.png";
     readonly loginLight: "@assets/images/layer0/login-light.png";
     readonly loginDark: "@assets/images/layer0/login-dark.png";
+    readonly infomap: "@assets/images/layer0/infomap-light.png";
+    readonly infomapLight: "@assets/images/layer0/infomap-light.png";
+    readonly infomapDark: "@assets/images/layer0/infomap-dark.png";
+    readonly infomapNone: "@assets/images/layer0/infomap-light-none.png";
+    readonly infomapNoneLight: "@assets/images/layer0/infomap-light-none.png";
+    readonly infomapNoneDark: "@assets/images/layer0/infomap-dark-none.png";
 };
 
 export { STN_CDN_ASSET_BASE, STN_LAYER0_BACKGROUND_ASSET_PATHS, STN_LAYER0_BACKGROUND_DEMO_IMAGES };

package/dist/data/stnLayer0BackgroundAssets.js

@@ -2,7 +2,7 @@ import {
   STN_CDN_ASSET_BASE,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES
-} from "../chunk-XBFXX3D6.js";
+} from "../chunk-NGUMR3D6.js";
 export {
   STN_CDN_ASSET_BASE,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,

package/dist/data/stnTabs.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+
+/**
+ * STN Tabs Data and Type Definitions
+ */
+
+type StnTabsSize = 'sm' | 'md' | 'lg';
+type StnTabsVariant = 'line';
+type StnTabScrollButtons = 'auto' | boolean;
+type StnTabIconPosition = 'start' | 'end' | 'top' | 'bottom';
+type StnTabIconSize = number | 'sm' | 'md' | 'lg';
+interface StnTabItem {
+    value: string | number;
+    label?: ReactNode;
+    icon?: ReactNode;
+    iconPosition?: StnTabIconPosition;
+    iconSize?: StnTabIconSize;
+    badge?: ReactNode;
+    count?: number | string;
+    disabled?: boolean;
+    wrapped?: boolean;
+    tooltip?: ReactNode;
+}
+type StnTabPanelPadding = 'none' | 'sm' | 'md' | 'lg';
+
+export type { StnTabIconPosition, StnTabIconSize, StnTabItem, StnTabPanelPadding, StnTabScrollButtons, StnTabsSize, StnTabsVariant };

package/dist/data/stnTabs.js

@@ -0,0 +1,2 @@
+import "../chunk-7ONB2WVN.js";
+//# sourceMappingURL=stnTabs.js.map

package/dist/data/stnTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.d.ts

@@ -64,5 +64,7 @@ export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LIN
 export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, 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';
 export { STN_UI_CATALOG, STN_UI_COMPONENTS, STN_UI_FOUNDATIONS, StnUiComponentId, StnUiEntry, StnUiFoundationId } from './components.js';
 export { SYSTEM_ICON_DATA_URLS } from './data/stnSystemIconsData.generated.js';
+import 'react';

package/dist/index.js

@@ -3,7 +3,7 @@ import {
   STN_UI_COMPONENTS,
   STN_UI_FOUNDATIONS
 } from "./chunk-N46UQH6L.js";
-import "./chunk-AVICAV6Z.js";
+import "./chunk-O77GW7PM.js";
 import {
   STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT,
   STN_TOGGLE_BUTTON_PLAYGROUND_INTRO,
@@ -37,6 +37,7 @@ import {
 import {
   STN_STATUS_DEMO_STEPS
 } from "./chunk-SQJPE6HH.js";
+import "./chunk-7ONB2WVN.js";
 import {
   STN_TEXT_AREA_HTML,
   STN_TEXT_AREA_INTRO,
@@ -295,6 +296,14 @@ import {
   STN_GRADE_SEMANTIC_ROWS,
   STN_GRADE_SOURCE
 } from "./chunk-E26XJXQY.js";
+import {
+  STN_TEXT_FIELD_FIGMA,
+  STN_TEXT_FIELD_HTML,
+  STN_TEXT_FIELD_INTRO,
+  STN_TEXT_FIELD_SIZE_ROWS,
+  STN_TEXT_FIELD_STATES,
+  STN_TEXT_FIELD_USAGE
+} from "./chunk-NB4NJQYE.js";
 import {
   STN_TOAST_DEMO_MSG,
   STN_TOAST_ICON_SLUG,
@@ -365,14 +374,6 @@ import {
   STN_TABLE_TH_CHECK_FIGMA,
   STN_TABLE_TH_LABEL_FIGMA
 } from "./chunk-IOBNIUK3.js";
-import {
-  STN_TEXT_FIELD_FIGMA,
-  STN_TEXT_FIELD_HTML,
-  STN_TEXT_FIELD_INTRO,
-  STN_TEXT_FIELD_SIZE_ROWS,
-  STN_TEXT_FIELD_STATES,
-  STN_TEXT_FIELD_USAGE
-} from "./chunk-NB4NJQYE.js";
 import {
   STN_SIDE_NAVIGATION_INTRO,
   STN_SIDE_NAVIGATION_USAGE,
@@ -427,12 +428,12 @@ import {
   STN_LAYER0_BACKGROUND_USAGE_HTML,
   STN_LAYER0_BACKGROUND_VARIANT_ROWS,
   STN_LAYER0_MAP_LIGHT_OVERLAY
-} from "./chunk-HJCUNRB3.js";
+} from "./chunk-FSSMH6VS.js";
 import {
   STN_CDN_ASSET_BASE,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES
-} from "./chunk-XBFXX3D6.js";
+} from "./chunk-NGUMR3D6.js";
 import {
   STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE,
   STN_LAYER_SHELL_USAGE,
@@ -479,7 +480,7 @@ import {
   STN_DROPDOWN_MENU_USAGE,
   STN_DROPDOWN_SIZE_ROWS,
   STN_DROPDOWN_USAGE
-} from "./chunk-LKVTW54X.js";
+} from "./chunk-IZRGNUH6.js";
 import {
   STN_HEADER_INTRO,
   STN_HEADER_PAGE_TITLE_DEMO,

package/package.json

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

package/styles/components/stn-card.css

@@ -69,6 +69,27 @@
 .stn-card.pad-md { padding: var(--stn-card-pad-md); }
 .stn-card.pad-lg { padding: var(--stn-card-pad-lg); }
 
+/* Layout modifiers */
+.stn-card.is-full-width,
+.stn-card.full-width {
+  width: 100%;
+}
+
+.stn-card.is-full-height,
+.stn-card.full-height {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.stn-card.is-full-height > .stn-card__body,
+.stn-card.full-height > .stn-card__body {
+  flex: 1 1 0%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 /* Interactive (Hover / Click) */
 .stn-card.interactive,
 .stn-card[role='button'] {
@@ -91,6 +112,29 @@
   margin-bottom: var(--stn-space-12, 12px);
 }
 
+.stn-card__header-title {
+  margin: 0;
+  min-width: 0;
+  font-size: var(--stn-text-title-small-size, var(--stn-font-size-16, 16px));
+  font-weight: var(--stn-font-weight-semibold, 600);
+  color: var(--stn-text-primary);
+  line-height: var(--stn-line-height-1, 1.2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Card title size modifiers */
+.stn-card__header-title.sm { font-size: var(--stn-font-size-14, 14px); }
+.stn-card__header-title.md { font-size: var(--stn-font-size-16, 16px); }
+.stn-card__header-title.lg { font-size: var(--stn-font-size-18, 18px); }
+
+/* Card title weight modifiers */
+.stn-card__header-title.regular { font-weight: var(--stn-font-weight-regular, 400); }
+.stn-card__header-title.medium { font-weight: var(--stn-font-weight-medium, 500); }
+.stn-card__header-title.semibold { font-weight: var(--stn-font-weight-semibold, 600); }
+.stn-card__header-title.bold { font-weight: var(--stn-font-weight-bold, 700); }
+
 .stn-card__body {
   display: block;
 }

package/styles/components/stn-chip.css

@@ -19,6 +19,7 @@
  *   - Border accents: `accent-mint`, `accent-sky`, `accent-violet`, `accent-orange`, `accent-yellow`, `accent-gray`
  */
 
+
 .stn-chip-wrap {
   display: inline-flex;
   align-items: center;
@@ -203,47 +204,28 @@
   --stn-chip-color: var(--stn-grade-warning);
 }
 
-/* —— 4. Variants: Filled vs Outline / Border vs Contained 50% Opacity —— */
+/* —— 4. Variants: Filled vs Soft vs Outline —— */
 /* Filled (Default / Contained) */
 .stn-chip.filled,
-.stn-chip.contained,
-.stn-chip:not(.outline):not(.border):not(.contained-50):not(.filled-50):not(.bg-50):not(.bg-opacity-50):not(.soft):not(.subtle):not(.tinted) {
+.stn-chip:not(.outline):not(.soft) {
   --stn-chip-bg: var(--stn-chip-color);
   --stn-chip-border: transparent;
   --stn-chip-fg: var(--stn-text-re-primary);
 }
 
-/* Contained / Soft / Subtle (연한 배경 + 해당 색상 텍스트) */
-.stn-chip.subtle,
-.stn-chip.soft,
-.stn-chip.tinted,
-.stn-chip.contained-50,
-.stn-chip.filled-50,
-.stn-chip.bg-50,
-.stn-chip.bg-opacity-50,
-.stn-chip--bg-50 {
+/* Soft (은은한 틴트 배경 + 해당 색상 텍스트 단일 통일) */
+.stn-chip.soft {
   --stn-chip-bg: color-mix(in srgb, var(--stn-chip-color) 14%, transparent);
   --stn-chip-border: transparent;
   --stn-chip-fg: var(--stn-chip-color);
 }
 
-[data-theme='dark'] .stn-chip.subtle,
-[data-theme='dark'] .stn-chip.soft,
-[data-theme='dark'] .stn-chip.tinted,
-[data-theme='dark'] .stn-chip.contained-50,
-[data-theme='dark'] .stn-chip.filled-50,
-[data-theme='dark'] .stn-chip.bg-50,
-[data-theme='dark'] .stn-chip.bg-opacity-50,
-[data-theme='dark'] .stn-chip--bg-50 {
+[data-theme='dark'] .stn-chip.soft {
   --stn-chip-bg: color-mix(in srgb, var(--stn-chip-color) 22%, transparent);
-  --stn-chip-border: transparent;
-  --stn-chip-fg: var(--stn-chip-color);
 }
 
-/* Outline / Border */
-.stn-chip.outline,
-.stn-chip.outlined,
-.stn-chip.border {
+/* Outline (외곽선 테두리 단일 통일) */
+.stn-chip.outline {
   --stn-chip-bg: transparent;
   --stn-chip-border: var(--stn-chip-color);
   --stn-chip-fg: var(--stn-chip-color);
@@ -330,18 +312,12 @@
   filter: brightness(1.08);
 }
 
-.stn-chip.clickable.outline:hover,
-.stn-chip.clickable.border:hover {
+.stn-chip.clickable.outline:hover {
   background-color: color-mix(in srgb, var(--stn-chip-color) 12%, transparent);
   filter: none;
 }
 
-.stn-chip.clickable.contained-50:hover,
-.stn-chip.clickable.filled-50:hover,
-.stn-chip.clickable.bg-50:hover,
-.stn-chip.clickable.bg-opacity-50:hover,
-.stn-chip.clickable.soft:hover,
-.stn-chip.clickable.stn-chip--bg-50:hover {
+.stn-chip.clickable.soft:hover {
   background-color: color-mix(in srgb, var(--stn-chip-color) 65%, transparent);
   filter: none;
 }