@stn-uiux/pub-ui 0.1.56 → 0.1.58

package/dist/data/stnPopup.d.ts

@@ -43,27 +43,13 @@ declare const STN_POPUP_SIZES: readonly [{
     readonly width: "1200px";
     readonly token: "--stn-pop-width-xl";
     readonly usage: "대형 데이터 테이블 · 다열 프로비저닝 폼 · 대형 상세";
-}, {
-    readonly id: "xxl";
-    readonly label: "XXL";
-    readonly className: "stn-pop--xxl";
-    readonly width: "1440px";
-    readonly token: "--stn-pop-width-xxl";
-    readonly usage: "대시보드 축약 뷰 · 대형 모니터링/관제 팝업";
-}, {
-    readonly id: "2xl";
-    readonly label: "2XL";
-    readonly className: "stn-pop--2xl";
-    readonly width: "1600px";
-    readonly token: "--stn-pop-width-2xl";
-    readonly usage: "실시간 관제 상세 · 대규모 토폴로지 매핑 팝업";
 }, {
     readonly id: "full";
-    readonly label: "Full bleed";
+    readonly label: "Full";
     readonly className: "stn-pop--full";
     readonly width: "calc(100vw − 40px)";
     readonly token: "(viewport − gutter)";
-    readonly usage: "배치 장비·전체 화면 테이블 (1780px 등 → full 권장)";
+    readonly usage: "전체 화면 대시보드 설정 및 토폴로지 매핑";
 }];
 type StnPopupSizeId = (typeof STN_POPUP_SIZES)[number]['id'];
 /** 레거시 `content.css` 고정 px → 권장 modifier (마이그레이션 참고) */
@@ -75,23 +61,23 @@ declare const STN_POPUP_LEGACY_WIDTH_SAMPLES: readonly [{
 }, {
     readonly popClass: "template_history_pop";
     readonly widthPx: 1565;
-    readonly suggested: "2xl";
+    readonly suggested: "full";
 }, {
     readonly popClass: "real_time_view_pop";
     readonly widthPx: 1500;
-    readonly suggested: "2xl";
+    readonly suggested: "full";
 }, {
     readonly popClass: "select_equip_pop";
     readonly widthPx: 1412;
-    readonly suggested: "2xl";
+    readonly suggested: "xl";
 }, {
     readonly popClass: "equip_regist_pop";
     readonly widthPx: 1070;
-    readonly suggested: "xxl";
+    readonly suggested: "xl";
 }, {
     readonly popClass: "fail_measure_pop";
     readonly widthPx: 1100;
-    readonly suggested: "xxl";
+    readonly suggested: "xl";
 }];
 declare const STN_POPUP_PARTS: readonly [{
     readonly part: "Stack";
@@ -112,23 +98,23 @@ declare const STN_POPUP_PARTS: readonly [{
 }, {
     readonly part: "Panel";
     readonly selector: ".stn-pop__panel";
-    readonly note: "gray.850 · gray.700 border · radius 10 · shadow · overflow";
+    readonly note: "surface · border · radius 8 · shadow · overflow";
 }, {
     readonly part: "Header";
     readonly selector: ".stn-pop__head";
-    readonly note: "48px · h4 18 SemiBold · theme title token";
+    readonly note: "56px · h4 16 SemiBold · theme title token";
 }, {
     readonly part: "Close";
     readonly selector: ".stn-pop__close";
-    readonly note: "StnButton icon=\"line/x\" size=xsmall (16) · top 10 / right 8";
+    readonly note: "StnButton icon=\"line/x\" size=sm · top 14 / right 16";
 }, {
     readonly part: "Body";
     readonly selector: ".stn-pop__body";
-    readonly note: "padding 0 8px · overflow auto · 화면별 슬롯";
+    readonly note: "padding 20px · overflow auto · 화면별 슬롯";
 }, {
     readonly part: "Actions";
     readonly selector: ".stn-pop__actions";
-    readonly note: "64px · center · gap 8 · StnButton primary→secondary";
+    readonly note: "56px · right/center · gap 8 · StnButton";
 }];
 declare const STN_POPUP_TOKEN_ROWS: readonly [{
     readonly token: "--stn-pop-gutter";
@@ -140,43 +126,35 @@ declare const STN_POPUP_TOKEN_ROWS: readonly [{
     readonly usage: ".stn-pop--xs · 단순 확인/얼럿";
 }, {
     readonly token: "--stn-pop-width-sm";
-    readonly resolvesTo: "520px";
+    readonly resolvesTo: "480px";
     readonly usage: ".stn-pop--sm · 1~2개 입력 폼";
 }, {
     readonly token: "--stn-pop-width-md";
-    readonly resolvesTo: "680px";
+    readonly resolvesTo: "640px";
     readonly usage: ".stn-pop--md · 기본 표준";
 }, {
     readonly token: "--stn-pop-width-lg";
-    readonly resolvesTo: "920px";
-    readonly usage: ".stn-pop--lg · 2열 폼/상세";
+    readonly resolvesTo: "960px";
+    readonly usage: ".stn-pop--lg · 2단 분할/상세";
 }, {
     readonly token: "--stn-pop-width-xl";
     readonly resolvesTo: "1200px";
     readonly usage: ".stn-pop--xl · 대형 테이블/그리드";
-}, {
-    readonly token: "--stn-pop-width-xxl";
-    readonly resolvesTo: "1440px";
-    readonly usage: ".stn-pop--xxl · 대시보드/관제";
-}, {
-    readonly token: "--stn-pop-width-2xl";
-    readonly resolvesTo: "1600px";
-    readonly usage: ".stn-pop--2xl · 초대형 토폴로지";
 }, {
     readonly token: ".stn-pop--full";
     readonly resolvesTo: "100vw − gutter×2";
-    readonly usage: "full-bleed · alias --full-bleed";
+    readonly usage: "전체화면 모달";
 }, {
     readonly token: "--stn-pop-max-height";
     readonly resolvesTo: "min(85dvh, …)";
     readonly usage: ".stn-pop 본문 스크롤";
 }, {
     readonly token: "--stn-pop-header-height";
-    readonly resolvesTo: "48px";
+    readonly resolvesTo: "56px";
     readonly usage: ".stn-pop__head min-height";
 }, {
     readonly token: "--stn-pop-footer-height";
-    readonly resolvesTo: "64px";
+    readonly resolvesTo: "56px";
     readonly usage: ".stn-pop__actions";
 }, {
     readonly token: "--stn-pop-close-size";

package/dist/data/stnPopup.js

@@ -12,7 +12,7 @@ import {
   STN_POPUP_USAGE,
   STN_POPUP_USAGE_HTML,
   resolveStnPopupSizeFromWidth
-} from "../chunk-Q3W7QA7N.js";
+} from "../chunk-75GHU6VI.js";
 export {
   STN_POPUP_INTRO,
   STN_POPUP_INVENTORY_ROWS,

package/dist/data/stnSearchRequirement.d.ts

@@ -9,12 +9,12 @@ declare const STN_SEARCH_REQUIREMENT_KO_NAME = "\uAC80\uC0C9\uC870\uAC74";
 declare const STN_SEARCH_REQUIREMENT_INTRO = "\uBAA9\uB85D \u00B7 \uC0C1\uC138 \uC870\uD68C \uD654\uBA74 \uC0C1\uB2E8\uC5D0\uC11C \uC870\uAC74 \uD544\uD130\uB9C1\uACFC \uAC80\uC0C9\uC744 \uC2E4\uD589\uD558\uB294 \uAC80\uC0C9\uBC14 \uD328\uD134\uC785\uB2C8\uB2E4. \uD14D\uC2A4\uD2B8 \uC785\uB825, \uB4DC\uB86D\uB2E4\uC6B4, \uB0A0\uC9DC \uC120\uD0DD\uACFC \uC5D1\uC140 \uB2E4\uC6B4\uB85C\uB4DC \uBC84\uD2BC\uC744 \uC790\uC720\uB86D\uAC8C \uC870\uD569\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.";
 declare const STN_SEARCH_REQUIREMENT_SPEC: readonly [{
     readonly property: "Shell padding (Default)";
-    readonly value: "8px 16px";
-    readonly note: "Figma py/px 표준";
+    readonly value: "16px";
+    readonly note: "상하좌우 16px 통일 표준";
 }, {
     readonly property: "Shell padding (Compact)";
-    readonly value: "6px 12px";
-    readonly note: "밀집형 바 (`density=\"compact\"`), gap 12px";
+    readonly value: "12px";
+    readonly note: "밀집형 바 (`density=\"compact\"` · `.compact`), 12px 통일";
 }, {
     readonly property: "Shell radius";
     readonly value: "8px";

package/dist/data/stnSearchRequirement.js

@@ -7,7 +7,7 @@ import {
   STN_SEARCH_REQUIREMENT_SPEC,
   STN_SEARCH_REQUIREMENT_USAGE,
   STN_SEARCH_REQUIREMENT_USAGE_HTML
-} from "../chunk-4C7ABT2K.js";
+} from "../chunk-AE4CKAEK.js";
 export {
   STN_SEARCH_REQUIREMENT_DEMO_FIELDS,
   STN_SEARCH_REQUIREMENT_FIGMA,

package/dist/data/stnSideNavItem.js

@@ -3,9 +3,9 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "../chunk-P5V6SFR7.js";
-import "../chunk-V7HD6SBG.js";
-import "../chunk-XZ3JOUX2.js";
+} from "../chunk-EDXSK54U.js";
+import "../chunk-PVF77NHZ.js";
+import "../chunk-TDLGKV4C.js";
 export {
   STN_NAV_MENU_SUB_ICON,
   STN_SIDE_NAV_ITEM_INTRO,

package/dist/data/stnSizeSemantic.js

@@ -1,7 +1,7 @@
 import {
   STN_SIZE_SEMANTIC_INTRO,
   STN_SIZE_SEMANTIC_ROWS
-} from "../chunk-L7DYM4V7.js";
+} from "../chunk-2FHXIAM3.js";
 export {
   STN_SIZE_SEMANTIC_INTRO,
   STN_SIZE_SEMANTIC_ROWS

package/dist/data/stnSystemIcons.js

@@ -4,10 +4,10 @@ import {
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "../chunk-V7HD6SBG.js";
+} from "../chunk-PVF77NHZ.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-XZ3JOUX2.js";
+} from "../chunk-TDLGKV4C.js";
 export {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,

package/dist/data/stnSystemIconsData.generated.js

@@ -1,6 +1,6 @@
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-XZ3JOUX2.js";
+} from "../chunk-TDLGKV4C.js";
 export {
   SYSTEM_ICON_DATA_URLS
 };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { STN_ALERT_CENTER_DEMO_ALERTS, STN_ALERT_CENTER_DEMO_DEPLOY, STN_ALERT_CENTER_DEMO_WORK, STN_ALERT_CENTER_INTEGRATION_USAGE, STN_ALERT_CENTER_INTRO, STN_ALERT_CENTER_TABS, STN_ALERT_CENTER_TAB_IDS, STN_ALERT_CENTER_USAGE, STN_ALERT_CENTER_USAGE_HTML, STN_GNB_ALERT_INTEGRATION_USAGE, StnAlertCenterAlertItem, StnAlertCenterSize, StnAlertCenterTab, StnAlertCenterWorkItem } from './data/stnAlertCenter.js';
+export { STN_ALERT_CENTER_DEMO_ALERTS, STN_ALERT_CENTER_DEMO_DEPLOY, STN_ALERT_CENTER_DEMO_WORK, STN_ALERT_CENTER_INTEGRATION_USAGE, STN_ALERT_CENTER_INTRO, STN_ALERT_CENTER_TABS, STN_ALERT_CENTER_TAB_IDS, STN_ALERT_CENTER_USAGE, STN_ALERT_CENTER_USAGE_HTML, STN_GNB_ALERT_INTEGRATION_USAGE, StnAlertCenterAlertItem, StnAlertCenterSize, StnAlertCenterTab, StnAlertCenterTextOverflow, StnAlertCenterWorkItem } from './data/stnAlertCenter.js';
 export { STN_HEADER_INTRO, STN_HEADER_PAGE_TITLE_DEMO, STN_HEADER_TOOLBAR_DEMO_ACTIONS, STN_HEADER_USAGE, STN_HEADER_USAGE_HTML, STN_HEADER_VARIANT_ROWS, STN_SYSTEM_CHIP_DEMO, StnHeaderGap, StnHeaderPadding, StnHeaderVariant } from './data/stnHeader.js';
 export { STN_INFOMAP_LOGO } from './data/stnBrand.js';
 export { STN_BREADCRUMB_DEMO_ITEMS, STN_BREADCRUMB_FIGMA, STN_BREADCRUMB_FIGMA_LIGHT, STN_BREADCRUMB_ICON_SRC, STN_BREADCRUMB_INTRO, STN_BREADCRUMB_PARTS, StnBreadcrumbDemoItem, StnBreadcrumbIconId } from './data/stnBreadcrumb.js';
@@ -23,7 +23,7 @@ export { STN_ICONOGRAPHY_INTRO, STN_ICONOGRAPHY_PRIMITIVE_ROWS, STN_ICONOGRAPHY_
 export { STN_INPUT_WIDTH_PRESETS, StnInputWidthPreset, StnInputWidthValue, StnResolvedInputWidth, isStnInputFullWidth, isStnInputWidthPreset, resolveStnInputWidth, toStnInputWidthPreset } from './data/stnInputWidth.js';
 export { STN_ELEVATION_Z_INDEX, STN_LAYER_DIM_MODAL_HTML, STN_LAYER_INTRO, STN_LAYER_ROLE_ROWS, STN_LAYER_ROLE_TO_LEVEL, STN_LAYER_ROLE_USAGE, STN_LAYER_SURFACE_ROWS, StnElevationLevel, StnLayerRole, StnLayerSurface } from './data/stnLayer.js';
 export { STN_LAYER0_BACKGROUND_FIGMA, STN_LAYER0_BACKGROUND_INTRO, STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS, STN_LAYER0_BACKGROUND_USAGE, STN_LAYER0_BACKGROUND_USAGE_HTML, STN_LAYER0_BACKGROUND_VARIANT_ROWS, STN_LAYER0_MAP_LIGHT_OVERLAY, StnLayer0BackgroundKind, StnLayer0BackgroundPlaygroundPresetId, StnLayer0BackgroundPreset } from './data/stnLayer0Background.js';
-export { STN_LAYER0_BACKGROUND_ASSET_PATHS, STN_LAYER0_BACKGROUND_DEMO_IMAGES } from './data/stnLayer0BackgroundAssets.js';
+export { STN_CDN_ASSET_BASE, STN_LAYER0_BACKGROUND_ASSET_PATHS, STN_LAYER0_BACKGROUND_DEMO_IMAGES } from './data/stnLayer0BackgroundAssets.js';
 export { STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE, STN_LAYER_SHELL_USAGE, STN_LAYOUT_ALERT_CENTER_USAGE, STN_LAYOUT_CONTENT_ROWS, STN_LAYOUT_INTRO, STN_LAYOUT_LAYER_PAGE_TREE, STN_LAYOUT_LIST_LAYER_TABS, STN_LAYOUT_LIST_VIEW_BARE_USAGE, STN_LAYOUT_LIST_VIEW_INTRO, STN_LAYOUT_LIST_VIEW_USAGE, STN_LAYOUT_MAP_DASHBOARD_HEADER_USAGE, STN_LAYOUT_MAP_DASHBOARD_INTRO, STN_LAYOUT_MAP_DASHBOARD_USAGE, STN_LAYOUT_MAP_LAYER_TABS, STN_LAYOUT_PAGE_TREE, STN_LAYOUT_PLAYGROUND_TABS, STN_LAYOUT_RECIPES, STN_LAYOUT_REGION_ROWS, STN_LAYOUT_SCREEN_RECIPES, STN_LAYOUT_SHELL_USAGE, STN_LAYOUT_SLOT_USAGE, STN_LAYOUT_WHEN_TO_USE, STN_PAGE_SCAFFOLD_COMPOUND_USAGE, STN_PAGE_SCAFFOLD_INTRO, STN_PAGE_SCAFFOLD_KINDS, StnContentAreaModifier, StnLayoutListLayerTabId, StnLayoutMapLayerTabId, StnLayoutRegion, StnLayoutScreenKind, StnLnbSide, StnPageScaffoldKind, applyLnbSideToModifiers, pubContentAreaClasses, pubLayoutRegionClass } from './data/stnLayout.js';
 export { STN_LIST_TABLE_FIGMA, STN_LIST_TABLE_FOOTER_MAX_ACTIONS, STN_LIST_TABLE_OPTION_ROWS, STN_LIST_TABLE_PAGE_SIZE_OPTIONS, StnListTableOptionRow } from './data/stnListTable.js';
 export { STN_LOADING_SKELETON_COLORS, STN_LOADING_SKELETON_INTRO, STN_LOADING_SKELETON_PARTS, STN_LOADING_SKELETON_USAGE, STN_LOADING_SKELETON_USAGE_HTML } from './data/stnLoadingSkeleton.js';

package/dist/index.js

@@ -42,7 +42,7 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "./chunk-P5V6SFR7.js";
+} from "./chunk-EDXSK54U.js";
 import {
   STN_SIZE_INTRO,
   STN_SIZE_ROWS,
@@ -51,7 +51,7 @@ import {
 import {
   STN_SIZE_SEMANTIC_INTRO,
   STN_SIZE_SEMANTIC_ROWS
-} from "./chunk-L7DYM4V7.js";
+} from "./chunk-2FHXIAM3.js";
 import {
   STN_SLIDER_HTML,
   STN_SLIDER_INTRO,
@@ -130,7 +130,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-2EMXBNFK.js";
+} from "./chunk-XPARWRVD.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -384,7 +384,7 @@ import {
   STN_SEARCH_REQUIREMENT_SPEC,
   STN_SEARCH_REQUIREMENT_USAGE,
   STN_SEARCH_REQUIREMENT_USAGE_HTML
-} from "./chunk-4C7ABT2K.js";
+} from "./chunk-AE4CKAEK.js";
 import {
   STN_POPUP_INTRO,
   STN_POPUP_INVENTORY_ROWS,
@@ -399,7 +399,7 @@ import {
   STN_POPUP_USAGE,
   STN_POPUP_USAGE_HTML,
   resolveStnPopupSizeFromWidth
-} from "./chunk-Q3W7QA7N.js";
+} from "./chunk-75GHU6VI.js";
 import {
   STN_ELEVATION_Z_INDEX,
   STN_LAYER_DIM_MODAL_HTML,
@@ -419,9 +419,10 @@ import {
   STN_LAYER0_MAP_LIGHT_OVERLAY
 } from "./chunk-QAPQ4DB2.js";
 import {
+  STN_CDN_ASSET_BASE,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES
-} from "./chunk-ERPXTTTO.js";
+} from "./chunk-XBFXX3D6.js";
 import {
   STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE,
   STN_LAYER_SHELL_USAGE,
@@ -468,7 +469,7 @@ import {
   STN_DROPDOWN_MENU_USAGE,
   STN_DROPDOWN_SIZE_ROWS,
   STN_DROPDOWN_USAGE
-} from "./chunk-WRGBYWRV.js";
+} from "./chunk-LKVTW54X.js";
 import {
   STN_HEADER_INTRO,
   STN_HEADER_PAGE_TITLE_DEMO,
@@ -477,7 +478,7 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "./chunk-GR76L7M7.js";
+} from "./chunk-EQVFEZEQ.js";
 import {
   STN_FEEDBACK_BY_KIND,
   STN_FEEDBACK_SEMANTIC_ROWS,
@@ -493,7 +494,7 @@ import {
   STN_DATE_PICKER_USAGE,
   STN_DATE_PICKER_USAGE_HTML,
   STN_DATE_PICKER_WEEKDAYS
-} from "./chunk-S4YA4H2S.js";
+} from "./chunk-YBNEQ5LB.js";
 import {
   STN_DATE_RANGE_FIELD_DEMO,
   STN_DATE_RANGE_FIELD_FIGMA,
@@ -504,7 +505,7 @@ import {
   STN_DATE_RANGE_FIELD_USAGE,
   formatStnDateRangeFieldValue,
   parseStnDateRangeFieldValue
-} from "./chunk-THCCTVUM.js";
+} from "./chunk-5F63CMM7.js";
 import {
   STN_ALERT_CENTER_DEMO_ALERTS,
   STN_ALERT_CENTER_DEMO_DEPLOY,
@@ -516,7 +517,7 @@ import {
   STN_ALERT_CENTER_USAGE,
   STN_ALERT_CENTER_USAGE_HTML,
   STN_GNB_ALERT_INTEGRATION_USAGE
-} from "./chunk-ZI6EF4XD.js";
+} from "./chunk-2WKT7X65.js";
 import {
   STN_INFOMAP_LOGO
 } from "./chunk-4BPDBOR3.js";
@@ -527,17 +528,17 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "./chunk-OMCBVK57.js";
+} from "./chunk-J46EPVSY.js";
 import {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "./chunk-V7HD6SBG.js";
+} from "./chunk-PVF77NHZ.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "./chunk-XZ3JOUX2.js";
+} from "./chunk-TDLGKV4C.js";
 import {
   STN_BREAKPOINT_INTRO,
   STN_BREAKPOINT_MEDIA,
@@ -579,6 +580,7 @@ export {
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
   STN_CARD_VARIANTS,
+  STN_CDN_ASSET_BASE,
   STN_CHART_INTRO,
   STN_CHECKBOX_FIGMA,
   STN_CHECKBOX_INTRO,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stn-uiux/pub-ui",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "description": "STN Pub design system — tokens, specs, and CSS for product HTML / React apps",
   "type": "module",
   "sideEffects": [
@@ -13,6 +13,7 @@
     "dist",
     "bin",
     "styles",
+    "!styles/@assets/images/layer0",
     "README.md",
     "CHANGELOG.md"
   ],

package/styles/@assets/svg/system/line/eye-off.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 12C10 12.5304 10.2107 13.0391 10.5858 13.4142C10.9609 13.7893 11.4696 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7893 13.0391 14 12.5304 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10C11.4696 10 10.9609 10.2107 10.5858 10.5858C10.2107 10.9609 10 11.4696 10 12Z" stroke="#40474F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 12C18.6 16 15.6 18 12 18C8.4 18 5.4 16 3 12C5.4 8 8.4 6 12 6C15.6 6 18.6 8 21 12Z" stroke="#40474F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 3L21 21" stroke="#40474F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/styles/components/stn-btn.css

@@ -120,7 +120,7 @@
   --stn-btn-font-weight: var(--stn-btn-font-weight-xl);
 }
 
-/* LG (44px) */
+/* LG (40px) — 8px 그리드 표준 통일 스케일 */
 .stn-btn.lg {
   --stn-btn-height: var(--stn-btn-height-lg);
   --stn-btn-min-width: var(--stn-btn-min-width-lg);

package/styles/components/stn-date-picker.css

@@ -198,21 +198,29 @@
   display: flex;
   flex: 1;
   min-width: 0;
+  width: 100%;
   height: calc(var(--stn-size-28) * 6);
   max-height: calc(var(--stn-size-28) * 6);
   overflow: hidden;
 }
 
-.stn-date-picker-time__scroll {
-  flex: 1;
-  height: calc(var(--stn-size-28) * 6);
+/* StnScroll이 variant="arrows"일 때 생성하는 wrapper(.stn-scroll-shell)도 1/3씩 균등 확장 */
+.stn-date-picker-time__columns > .stn-scroll-shell {
+  flex: 1 1 0%;
+  min-width: 0;
+  height: 100%;
   border-left: var(--stn-size-1) solid var(--calendar-border);
 }
 
-.stn-date-picker-time__scroll:first-child {
+.stn-date-picker-time__columns > .stn-scroll-shell:first-child {
   border-left: none;
 }
 
+.stn-date-picker-time__scroll {
+  width: 100%;
+  height: calc(var(--stn-size-28) * 6);
+}
+
 .stn-date-picker-time__column {
   margin: var(--stn-space-0);
   padding: var(--stn-space-0);
@@ -223,7 +231,7 @@
   display: block;
   width: 100%;
   margin: var(--stn-space-0);
-  padding: var(--stn-space-4) var(--stn-space-0);
+  padding: var(--stn-space-4) var(--stn-space-4); /* 좌우 패딩 추가 — 숫자 가독성 개선 */
   border: none;
   background: transparent;
   font-size: var(--stn-text-body-small-size);

package/styles/components/stn-date-range-field.css

@@ -1,6 +1,6 @@
 /**
  * StnDateRangeField — Infomap datetime range trigger (Figma 40000042:186907)
- * S 24px · M 32px · L 40px — TextField / Dropdown과 동일 스케일
+ * sm 24px · md 32px · lg 40px · xl 56px — 8px 그리드 표준 스케일 (TextField / Dropdown과 동일)
  */
 
 :root {
@@ -35,6 +35,22 @@ button.stn-date-range-field:focus-visible {
   border: var(--stn-input-focus);
 }
 
+/* Variant: transparent (테두리·배경 없음 — StnLabelPrefix 등 래퍼 내부 조합용) */
+button.stn-date-range-field.transparent {
+  border: none;
+  background-color: transparent;
+}
+
+button.stn-date-range-field.transparent:focus-visible {
+  border: none;
+  outline: none;
+}
+
+button.stn-date-range-field.transparent[aria-invalid='true'],
+button.stn-date-range-field.transparent.stn-date-range-field--invalid {
+  border-bottom: var(--stn-size-1) solid var(--stn-feedback-error);
+}
+
 button.stn-date-range-field[aria-invalid='true'],
 button.stn-date-range-field.stn-date-range-field--invalid {
   border-color: var(--stn-feedback-error);
@@ -50,15 +66,19 @@ button.stn-date-range-field.w100p {
   align-items: center;
   min-width: 0;
   max-width: 100%;
+  overflow: hidden;
 }
 
 .stn-date-range-field__text {
   display: inline-flex;
   align-items: center;
   min-width: 0;
+  max-width: 100%;
   white-space: nowrap;
   font-weight: var(--stn-font-weight-medium);
   color: var(--stn-input-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .stn-date-range-field__value {
@@ -88,10 +108,10 @@ button.stn-date-range-field.w100p {
   color: var(--stn-input-placeholder);
 }
 
-/* S — 24px */
+/* sm — 24px */
 button.stn-date-range-field.sm {
-  min-width: var(--stn-size-280);
-  height: var(--stn-size-24);
+  min-width: min(100%, var(--stn-date-range-field-min-width-sm));
+  height: var(--stn-date-range-field-height-sm);
   padding: var(--stn-space-0) var(--stn-space-10);
   border-radius: var(--stn-radius-input-sm);
   font-size: var(--stn-text-body-small-size);
@@ -108,14 +128,14 @@ button.stn-date-range-field.sm .stn-date-range-field__text {
 }
 
 button.stn-date-range-field.sm .stn-date-range-field__icon {
-  width: var(--stn-size-14);
-  height: var(--stn-size-14);
+  width: var(--stn-date-range-field-icon-size-sm);
+  height: var(--stn-date-range-field-icon-size-sm);
 }
 
-/* M — 32px (Figma) */
+/* md — 32px (Figma 기본값) */
 button.stn-date-range-field.md {
-  min-width: calc(var(--stn-size-320) + var(--stn-size-20));
-  height: var(--stn-size-32);
+  min-width: min(100%, var(--stn-date-range-field-min-width-md));
+  height: var(--stn-date-range-field-height-md);
   padding: var(--stn-space-0) var(--stn-space-12);
   border-radius: var(--stn-radius-input-md);
   font-size: var(--stn-text-body-small-size);
@@ -132,14 +152,14 @@ button.stn-date-range-field.md .stn-date-range-field__text {
 }
 
 button.stn-date-range-field.md .stn-date-range-field__icon {
-  width: var(--stn-size-16);
-  height: var(--stn-size-16);
+  width: var(--stn-date-range-field-icon-size-md);
+  height: var(--stn-date-range-field-icon-size-md);
 }
 
-/* L — 40px */
+/* lg — 40px */
 button.stn-date-range-field.lg {
-  min-width: var(--stn-size-360);
-  height: var(--stn-size-40);
+  min-width: min(100%, var(--stn-date-range-field-min-width-lg));
+  height: var(--stn-date-range-field-height-lg);
   padding: var(--stn-space-0) var(--stn-space-12);
   border-radius: var(--stn-radius-input-lg);
   font-size: var(--stn-text-body-medium-size);
@@ -156,6 +176,123 @@ button.stn-date-range-field.lg .stn-date-range-field__text {
 }
 
 button.stn-date-range-field.lg .stn-date-range-field__icon {
-  width: var(--stn-size-16);
-  height: var(--stn-size-16);
+  width: var(--stn-date-range-field-icon-size-lg);
+  height: var(--stn-date-range-field-icon-size-lg);
+}
+
+/* xl — 56px */
+button.stn-date-range-field.xl {
+  min-width: min(100%, var(--stn-date-range-field-min-width-xl));
+  height: var(--stn-date-range-field-height-xl);
+  padding: var(--stn-space-0) var(--stn-space-16);
+  border-radius: var(--stn-radius-input-lg);
+  font-size: var(--stn-text-body-medium-size);
+  line-height: var(--stn-line-height-px-54);
+}
+
+button.stn-date-range-field.xl .stn-date-range-field__inner {
+  gap: var(--stn-space-10);
+}
+
+button.stn-date-range-field.xl .stn-date-range-field__text {
+  gap: var(--stn-space-12);
+  font-size: var(--stn-text-body-medium-size);
+}
+
+button.stn-date-range-field.xl .stn-date-range-field__icon {
+  width: var(--stn-date-range-field-icon-size-xl);
+  height: var(--stn-date-range-field-icon-size-xl);
+}
+
+/* ==========================================================================
+   Width Presets & Label Wrap Layout
+   ========================================================================== */
+:is(.stn-date-range-field, .stn-date-range-field-wrap):is(.full, .stn-date-range-field--full, .w100p) {
+  width: 100%;
+}
+
+.stn-date-range-field-wrap {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex-shrink: 0;
+  max-width: 100%;
+  vertical-align: top;
+}
+
+.stn-date-range-field-wrap button.stn-date-range-field {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.stn-date-range-field-wrap__body {
+  display: inline-flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.stn-date-range-field-wrap--row {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--stn-space-8);
+}
+
+.stn-date-range-field-wrap--row .stn-date-range-field-wrap__body {
+  width: auto;
+  flex: 1 1 auto;
+}
+
+.stn-date-range-field-wrap--col {
+  flex-direction: column;
+  gap: var(--stn-space-6);
+}
+
+.stn-date-range-field-wrap--col .stn-date-range-field-wrap__body {
+  width: 100%;
+}
+
+.stn-date-range-field__label {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-4);
+  font-family: var(--stn-font-body, inherit);
+  font-size: var(--stn-text-body-small-size);
+  font-weight: var(--stn-font-weight-medium);
+  color: var(--stn-text-primary);
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.stn-date-range-field__label-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stn-text-secondary);
+}
+
+.stn-date-range-field__required {
+  color: var(--stn-feedback-error);
+  font-weight: var(--stn-font-weight-bold);
+  line-height: 1;
+  margin-inline-start: var(--stn-space-2);
+}
+
+.stn-date-range-field__helper {
+  font-size: var(--stn-text-body-small-size);
+  line-height: var(--stn-line-height-tight);
+  color: var(--stn-text-secondary);
+  word-break: break-word;
+  white-space: nowrap;
+  margin-top: var(--stn-space-4);
+}
+
+.stn-date-range-field__helper--error {
+  color: var(--stn-feedback-error);
 }