sellmate-design-system-react 9.0.0-beta.14 → 9.0.0-beta.16

package/dist/index.cjs

@@ -260,6 +260,16 @@ function resolveColor(input, fallback) {
   if (input === null || input === void 0 || input === "") return fallback;
   return isColorKey(input) ? `var(--color-${input.replace(/_/g, "-")})` : input;
 }
+
+// src/lib/field-width.ts
+var FIELD_WIDTH_GRADES = ["xs", "sm", "md", "lg", "xl"];
+var GRADE_SET = new Set(FIELD_WIDTH_GRADES);
+var isFieldWidthGrade = (v) => typeof v === "string" && GRADE_SET.has(v);
+var fieldWidthValue = (v) => {
+  if (v === void 0 || v === "" || v === 0) return void 0;
+  if (isFieldWidthGrade(v)) return `var(--cmp-field-width-${v})`;
+  return typeof v === "number" ? `${v}px` : v;
+};
 var Icon_add = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3197,7 +3207,9 @@ var SCircleProgress = /* @__PURE__ */ react.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]",
+          // inline-flex 유지: 폭이 곧 내용 폭이라 블록으로 바꾸면 부모 폭까지 늘어나
+          // 가운데 정렬이 깨진다. 대신 align-middle 로 baseline 아래 descender 여백을 없앤다.
+          "inline-flex flex-col items-center align-middle gap-[var(--cmp-progress-circular-gap)]",
           className
         ),
         style,
@@ -3448,7 +3460,7 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
           titleTypo,
           disabled ? "bg-(--cmp-listDraggableItem-bg-default) text-(--sys-color-disabled-text)" : selected ? "bg-(--cmp-listDraggableItem-bg-selected) text-(--cmp-listDraggableItem-text-selected)" : "bg-(--cmp-listDraggableItem-bg-default) text-(--cmp-listDraggableItem-text-default)",
           !disabled && !selected && !dragging && "hover:bg-(--cmp-listDraggableItem-bg-hover)",
-          hasSupportingText && supportingTextPosition === "bottom" ? dense ? "min-h-[52px]" : "min-h-[60px]" : dense ? "h-[32px]" : "h-[40px]",
+          // 높이는 세로 패딩과 내용이 정한다 — 항목에 높이를 못 박지 않는다 (SListItem 과 동일)
           paddingYClass,
           // 항목 사이 구분선은 리스트가 그린다.
           bordered && cn(
@@ -4115,7 +4127,8 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
                 titleTypo,
                 isExpanded && "border-b border-(--cmp-listExpansionItem-title-border)",
                 hasChevronInteraction ? "hover:bg-(--sys-color-bg-neutralBright)" : !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
-                hasSupportingText && supportingTextPosition === "bottom" ? dense ? "min-h-[52px] py-(--cmp-listExpansionItem-title-paddingY-dense)" : "min-h-[60px] py-(--cmp-listExpansionItem-title-paddingY-normal)" : dense ? "h-[32px] py-(--cmp-listExpansionItem-title-paddingY-dense)" : "h-[40px] py-(--cmp-listExpansionItem-title-paddingY-normal)",
+                // 높이는 세로 패딩과 내용이 정한다 — 제목 줄에 높이를 못 박지 않는다 (SListItem 과 동일)
+                dense ? "py-(--cmp-listExpansionItem-title-paddingY-dense)" : "py-(--cmp-listExpansionItem-title-paddingY-normal)",
                 "gap-(--cmp-listExpansionItem-title-gap)",
                 "pr-(--cmp-listExpansionItem-title-paddingX)",
                 depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
@@ -4238,7 +4251,10 @@ var SListItemImpl = /* @__PURE__ */ react.forwardRef(function SListItem({
           "cursor-pointer",
           hasChevronInteraction ? "hover:bg-(--sys-color-bg-neutralBright)" : "hover:bg-(--cmp-listItem-bg-hover)"
         ) : "cursor-default",
-        hasSupportingText && supportingTextPosition === "bottom" ? dense ? "min-h-[52px] py-(--cmp-listItem-paddingY-dense)" : "min-h-[60px] py-(--cmp-listItem-paddingY-normal)" : dense ? "h-[32px] py-(--cmp-listItem-paddingY-dense)" : "h-[40px] py-(--cmp-listItem-paddingY-normal)",
+        // 높이는 세로 패딩과 내용이 정한다 — 항목에 높이를 못 박지 않는다.
+        // 슬롯(leading/trailing)이 글줄보다 크면 그만큼 행이 커져야 하고,
+        // 고정 높이를 두면 그 슬롯이 잘리거나 상자 밖으로 넘친다.
+        dense ? "py-(--cmp-listItem-paddingY-dense)" : "py-(--cmp-listItem-paddingY-normal)",
         "gap-(--cmp-listItem-gap)",
         "pr-(--cmp-listItem-paddingX)",
         depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
@@ -4305,40 +4321,17 @@ function getInitialOpenKeys(children) {
   });
   return openKeys;
 }
-function getInitialSelectedKeys(children) {
-  const selectedKeys = {};
-  react.Children.forEach(children, (child, index) => {
-    if (!isListItemElement(child) || !child.props.selected) return;
-    const depth = child.props.depth ?? 1;
-    if (selectedKeys[depth] == null) selectedKeys[depth] = String(child.key ?? index);
-  });
-  return selectedKeys;
-}
 var SExpansionListImpl = /* @__PURE__ */ react.forwardRef(function SExpansionList({ children, ...rest }, ref) {
   const [openKeys, setOpenKeys] = react.useState(() => getInitialOpenKeys(children));
-  const [selectedKeys, setSelectedKeys] = react.useState(
-    () => getInitialSelectedKeys(children)
-  );
   const listChildren = react.Children.map(children, (child, index) => {
     if (isListItemElement(child)) {
-      const depth2 = child.props.depth ?? 1;
-      const itemKey2 = String(child.key ?? index);
-      return react.cloneElement(child, {
-        // 선택을 리스트가 관리하는 이상 아이템은 클릭 가능해야 한다 — SListItem 의 기본값(false)을 뒤집는다
-        clickable: child.props.clickable ?? true,
-        selected: selectedKeys[depth2] === itemKey2,
-        onClick: (event) => {
-          setSelectedKeys((current) => ({ ...current, [depth2]: itemKey2 }));
-          child.props.onClick?.(event);
-        }
-      });
+      return react.cloneElement(child, { clickable: child.props.clickable ?? true });
     }
     if (!isExpansionItemElement(child)) return child;
     const depth = child.props.depth ?? 1;
     const itemKey = String(child.key ?? index);
     return react.cloneElement(child, {
       expanded: openKeys[depth] === itemKey,
-      selected: void 0,
       onToggle: (next, event) => {
         setOpenKeys((current) => ({
           ...current,
@@ -5945,7 +5938,7 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
       "div",
       {
         ref,
-        className: cn("inline-flex w-full flex-col gap-[12px]", className),
+        className: cn("flex w-full flex-col gap-[12px]", className),
         style,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]", children: [
@@ -9202,7 +9195,7 @@ function SPageOverlayScrollbars({ scrollRef }) {
 }
 var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   background = "frame",
-  scrollEndSpacing = true,
+  scrollEndSpacing = false,
   overlayScrollbar = false,
   contentHeight = "auto",
   header,
@@ -10152,9 +10145,11 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
   const isPercentWidth = typeof width === "string" && width.trim().endsWith("%");
-  const hug = cssLen(width) !== void 0 && !isPercentWidth;
+  const resolvedWidth = fieldWidthValue(width);
+  const hug = resolvedWidth !== void 0 && !isPercentWidth;
   const addonWidth = effectiveAddonLabel !== "" ? cssLen(labelWidth) : void 0;
-  const resolvedMaxWidth = cssLen(maxWidth) === void 0 || effectiveAddonLabel === "" ? cssLen(maxWidth) : addonWidth ? `calc(${cssLen(maxWidth)} + ${addonWidth})` : void 0;
+  const maxWidthValue = fieldWidthValue(maxWidth);
+  const resolvedMaxWidth = maxWidthValue === void 0 || effectiveAddonLabel === "" ? maxWidthValue : addonWidth ? `calc(${maxWidthValue} + ${addonWidth})` : void 0;
   const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
   const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
   const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
@@ -10212,8 +10207,8 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
           {
             className: cn("flex min-w-0 flex-col", !hug && !isPercentWidth && "flex-1"),
             style: {
-              width: cssLen(width),
-              minWidth: cssLen(minWidth),
+              width: resolvedWidth,
+              minWidth: fieldWidthValue(minWidth),
               maxWidth: resolvedMaxWidth
             },
             children: [
@@ -11056,10 +11051,16 @@ var DEFAULT_ROWS_PER_PAGE_OPTION = [
   { label: "100\uAC1C\uC529 \uBCF4\uAE30", value: 100 }
 ];
 var cellValue = (col, row) => {
-  const raw = typeof col.field === "function" ? col.field(row) : row[col.field];
+  const raw = col.field == null ? void 0 : typeof col.field === "function" ? col.field(row) : row[col.field];
   return col.format ? col.format(raw, row) : raw;
 };
-var colWidthFromDef = (c) => c.autoWidth ? 0 : parseInt(c.width || "120", 10);
+var DEFAULT_COLUMN_WIDTH = 120;
+var colWidthFromDef = (c) => {
+  if (c.autoWidth) return 0;
+  if (c.width == null) return DEFAULT_COLUMN_WIDTH;
+  const px = typeof c.width === "number" ? c.width : parseInt(c.width, 10);
+  return Number.isFinite(px) ? px : DEFAULT_COLUMN_WIDTH;
+};
 var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   columns = [],
   rows = [],
@@ -11067,6 +11068,8 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   selectable = false,
   selected = [],
   onSelectedChange,
+  sort = null,
+  onSortChange,
   resizable = false,
   width,
   height,
@@ -11366,6 +11369,14 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     SCROLLBAR_TRACK_BG_CLASS,
     SCROLLBAR_TRACK_BORDER_CLASS
   );
+  const toggleSort = (col) => {
+    if (!onSortChange) return;
+    if (sort?.name !== col.name) {
+      onSortChange({ name: col.name, dir: "asc" });
+      return;
+    }
+    onSortChange(sort.dir === "asc" ? { name: col.name, dir: "desc" } : null);
+  };
   const colgroup = /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
     selectable && /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: SELECTABLE_COLUMN_WIDTH } }),
     visibleCols.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: col.autoWidth ? void 0 : { width: columnWidths[i] } }, col.name))
@@ -11443,49 +11454,81 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                               ]
                             }
                           ),
-                          visibleCols.map((col, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-                            "th",
-                            {
-                              className: cn(
-                                // 하단 border는 헤더 래퍼가 연속으로 그린다 (거터 영역까지 이어짐).
-                                "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[20px] text-[color:var(--sys-color-fg-primary)]",
-                                stickyInfo(i).isSticky && "z-[6]",
-                                stickyShadowClass(i),
-                                col.thClass
-                              ),
-                              style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(
-                                  "span",
-                                  {
-                                    className: cn(
-                                      // 원본 th__content: align에 따라 justify-content 적용 (th도 정렬 반영)
-                                      "inline-flex w-full min-w-0 items-center gap-[4px]",
-                                      col.align === "center" && "justify-center",
-                                      col.align === "right" && "justify-end"
-                                    ),
-                                    children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                      col.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: col.icon, size: 16, color: col.iconColor }),
-                                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label })
-                                    ] })
-                                  }
+                          visibleCols.map((col, i) => {
+                            const isSortable = !!col.sortable && !col.renderHeader;
+                            const sortDir = isSortable && sort?.name === col.name ? sort.dir : void 0;
+                            return /* @__PURE__ */ jsxRuntime.jsxs(
+                              "th",
+                              {
+                                className: cn(
+                                  // 하단 border는 헤더 래퍼가 연속으로 그린다 (거터 영역까지 이어짐).
+                                  "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[20px] text-[color:var(--sys-color-fg-primary)]",
+                                  stickyInfo(i).isSticky && "z-[6]",
+                                  stickyShadowClass(i),
+                                  col.thClass
                                 ),
-                                resizable && !col.autoWidth && i < visibleCols.length - 1 && // 원본 th__resizer: 셀 우측 경계 안쪽 4px 그립(좌우 1px #CCCCCC 라인, 세로 16px).
-                                // 셀 밖으로 넘치면 다음 셀에 가려져 클릭이 안 먹으므로 translate 없이 셀 내부에 배치.
-                                // 겉보기 그립은 4px(원본과 동일), 클릭 영역은 9px로 넓혀 사용성 확보.
-                                /* @__PURE__ */ jsxRuntime.jsx(
-                                  "span",
-                                  {
-                                    onMouseDown: (e) => startResize(i, e),
-                                    className: "absolute right-0 top-1/2 z-[5] flex h-[16px] w-[9px] -translate-y-1/2 cursor-col-resize items-center justify-end",
-                                    "aria-hidden": true,
-                                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-full w-[4px] border-x border-solid border-[color:var(--cmp-table-header-resizingBar-color)]" })
-                                  }
-                                )
-                              ]
-                            },
-                            col.name
-                          ))
+                                style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
+                                "aria-sort": isSortable ? sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none" : void 0,
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    "span",
+                                    {
+                                      className: cn(
+                                        // 원본 th__content: align에 따라 justify-content 적용 (th도 정렬 반영)
+                                        "inline-flex w-full min-w-0 items-center gap-[4px]",
+                                        col.align === "center" && "justify-center",
+                                        col.align === "right" && "justify-end"
+                                      ),
+                                      children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                        col.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: col.icon, size: 16, color: col.iconColor }),
+                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label }),
+                                        isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
+                                        // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
+                                        // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
+                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                          SGhostButton,
+                                          {
+                                            size: "xxs",
+                                            intent: sortDir ? "action" : "default",
+                                            icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
+                                            ariaLabel: `${col.label} \uC815\uB82C`,
+                                            onClick: () => toggleSort(col)
+                                          }
+                                        ) }),
+                                        col.helpText && col.helpText.length > 0 && // 라벨이 좁아져 truncate 되더라도 아이콘까지 함께 줄어들면 안 되므로
+                                        // shrink-0 래퍼로 감싼다 (STooltip 의 className 은 본문 쪽으로 간다).
+                                        // 아이콘·크기·색은 SKeyValueTable 헤더 도움말과 동일하게 맞춘다.
+                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                          STooltip2,
+                                          {
+                                            trigger: "hover",
+                                            icon: "helpOutline",
+                                            iconSize: 12,
+                                            color: "var(--sys-color-fg-success)",
+                                            placement: "top",
+                                            message: col.helpText
+                                          }
+                                        ) })
+                                      ] })
+                                    }
+                                  ),
+                                  resizable && !col.autoWidth && i < visibleCols.length - 1 && // 원본 th__resizer: 셀 우측 경계 안쪽 4px 그립(좌우 1px #CCCCCC 라인, 세로 16px).
+                                  // 셀 밖으로 넘치면 다음 셀에 가려져 클릭이 안 먹으므로 translate 없이 셀 내부에 배치.
+                                  // 겉보기 그립은 4px(원본과 동일), 클릭 영역은 9px로 넓혀 사용성 확보.
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    "span",
+                                    {
+                                      onMouseDown: (e) => startResize(i, e),
+                                      className: "absolute right-0 top-1/2 z-[5] flex h-[16px] w-[9px] -translate-y-1/2 cursor-col-resize items-center justify-end",
+                                      "aria-hidden": true,
+                                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-full w-[4px] border-x border-solid border-[color:var(--cmp-table-header-resizingBar-color)]" })
+                                    }
+                                  )
+                                ]
+                              },
+                              col.name
+                            );
+                          })
                         ] }) })
                       ]
                     }
@@ -13039,9 +13082,10 @@ function SDatePicker({
     icon: 20,
     minW: 104,
     fieldMinW: 168,
-    // 상한 등급 lg — 값 길이가 YYYY-MM-DD 로 정해져 있어, width="100%" 를 받아도
-    // 행 전체로 늘어나지 않게 막는다 (SKeyValueTable 이 모든 컨트롤에 100% 를 넘긴다)
-    fieldMaxW: 240,
+    // 값 길이가 YYYY-MM-DD 로 정해져 있어, width="100%" 를 받아도 행 전체로
+    // 늘어나지 않게 상한을 건다 (SKeyValueTable 이 모든 컨트롤에 100% 를 넘긴다).
+    // px 가 아니라 등급이라 --cmp-field-width-* 가 바뀌면 함께 따라간다
+    fieldMaxW: "lg",
     fontSize: 14,
     lineHeight: 24,
     radius: 6
@@ -13051,8 +13095,7 @@ function SDatePicker({
     icon: 16,
     minW: 80,
     fieldMinW: 128,
-    // 상한 등급 md
-    fieldMaxW: 160,
+    fieldMaxW: "md",
     fontSize: 12,
     lineHeight: 20,
     radius: 4
@@ -13544,9 +13587,9 @@ function SDateRangePicker({
     icon: 20,
     minW: 104,
     fieldMinW: 260,
-    // 상한 등급 xl — 값이 `YYYY-MM-DD ~ YYYY-MM-DD` 라 단일 날짜의 두 배가 넘는다.
-    // 최소너비(260)가 이미 lg(240)를 넘으므로 상한도 한 등급 위여야 한다
-    fieldMaxW: 480,
+    // xl — 값이 `YYYY-MM-DD ~ YYYY-MM-DD` 라 단일 날짜의 두 배가 넘는다.
+    // 최소너비(260)가 이미 lg 를 넘으므로 상한도 한 등급 위여야 한다
+    fieldMaxW: "xl",
     fontSize: 14,
     lineHeight: 24,
     radius: 6
@@ -13556,8 +13599,8 @@ function SDateRangePicker({
     icon: 16,
     minW: 80,
     fieldMinW: 216,
-    // 상한 등급 lg — 최소너비 216 이 md(160)를 넘어 md 로는 담기지 않는다
-    fieldMaxW: 240,
+    // lg — 최소너비 216 이 md 를 넘어 md 로는 담기지 않는다
+    fieldMaxW: "lg",
     fontSize: 12,
     lineHeight: 20,
     radius: 4
@@ -14085,6 +14128,8 @@ function SKeyValueTable({
         return /* @__PURE__ */ jsxRuntime.jsx(SRadioGroup, { direction: "horizontal", ...opt, onValueChange: up });
       case "checkbox":
         return /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { ...opt, onValueChange: up });
+      case "switch":
+        return /* @__PURE__ */ jsxRuntime.jsx(SSwitch, { ...opt, onValueChange: up });
       case "date-picker":
         return /* @__PURE__ */ jsxRuntime.jsx(SDatePicker, { width: "100%", ...opt, onValueChange: up });
       case "date-range-picker":
@@ -14141,6 +14186,7 @@ function SKeyValueTable({
           const cellBorder = r === 0 ? "" : "border-t border-solid border-[color:var(--cmp-table-border-color)]";
           return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: row.map((f, c) => {
             const showTh = !f.hideTh && !skip[r][c];
+            const isReadOnlyCell = f.render == null && (f.type == null || f.type === "text");
             return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
               showTh && /* @__PURE__ */ jsxRuntime.jsx(
                 "th",
@@ -14184,9 +14230,8 @@ function SKeyValueTable({
                   colSpan: f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : void 0,
                   className: cn(
                     "box-border bg-[var(--sys-color-bg-frame)] align-middle",
-                    // text 타입(및 미지정 기본값)은 읽기 전용 콘텐츠라 넓은 paddingX(wide),
-                    // 폼 필드 셀은 default paddingX 유지
-                    f.type == null || f.type === "text" ? "px-[var(--cmp-table-keyValue-body-paddingX-wide)]" : "px-[var(--cmp-table-keyValue-body-paddingX-default)]",
+                    // 읽기 전용 콘텐츠는 넓은 paddingX(wide), 폼 필드 셀은 default paddingX 유지
+                    isReadOnlyCell ? "px-[var(--cmp-table-keyValue-body-paddingX-wide)]" : "px-[var(--cmp-table-keyValue-body-paddingX-default)]",
                     cellBorder,
                     f.tdClass
                   ),
@@ -16714,8 +16759,7 @@ var TIMEPICKER_SIZE_CONFIG = {
     lineHeight: 20,
     minWidth: 80,
     fieldMinWidth: 128,
-    // 상한 등급 md
-    fieldMaxWidth: 160
+    fieldMaxWidth: "md"
   },
   md: {
     height: V3("md-height"),
@@ -16728,8 +16772,7 @@ var TIMEPICKER_SIZE_CONFIG = {
     lineHeight: 24,
     minWidth: 96,
     fieldMinWidth: 160,
-    // 상한 등급 lg
-    fieldMaxWidth: 240
+    fieldMaxWidth: "lg"
   }
 };
 function clampTimePart(value, min, max) {
@@ -17171,8 +17214,8 @@ var MIDDAY_FIELD_MIN_WIDTH = {
   md: 216
 };
 var MIDDAY_FIELD_MAX_WIDTH = {
-  sm: 240,
-  md: 240
+  sm: "lg",
+  md: "lg"
 };
 function RangeTimeSelector({
   value,
@@ -17617,6 +17660,7 @@ exports.BADGE_COLORS = BADGE_COLORS;
 exports.BUTTON_COLORS = BUTTON_COLORS;
 exports.BUTTON_SIZES = BUTTON_SIZES;
 exports.COLOR_KEYS = COLOR_KEYS;
+exports.FIELD_WIDTH_GRADES = FIELD_WIDTH_GRADES;
 exports.GNB_COLORS = GNB_COLORS;
 exports.GNB_COMMON = GNB_COMMON;
 exports.GNB_FOLD_MS = GNB_FOLD_MS;
@@ -17718,9 +17762,11 @@ exports.TIMEPICKER_SIZES = TIMEPICKER_SIZES;
 exports.TIMEPICKER_SIZE_CONFIG = TIMEPICKER_SIZE_CONFIG;
 exports.buttonPreset = buttonPreset;
 exports.cn = cn;
+exports.fieldWidthValue = fieldWidthValue;
 exports.findGnbAncestors = findGnbAncestors;
 exports.findGnbRailValue = findGnbRailValue;
 exports.isColorKey = isColorKey;
+exports.isFieldWidthGrade = isFieldWidthGrade;
 exports.loading = loading;
 exports.resolveColor = resolveColor;
 exports.useSLayout = useSLayout;