sellmate-design-system-react 7.0.0 → 8.0.0

package/dist/index.cjs

@@ -466,6 +466,27 @@ var Icon_arrowUp = (p) => {
     }
   );
 };
+var Icon_asterisk = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12.1736 2.91895C12.3072 2.91895 12.4174 3.02382 12.4236 3.15723L12.7644 10.6738L19.4461 7.21191C19.5647 7.15042 19.7112 7.19288 19.7781 7.30859L19.9519 7.61035C20.0184 7.72598 19.9822 7.87332 19.8699 7.94531L13.53 11.999L19.8699 16.0547C19.9822 16.1267 20.0184 16.274 19.9519 16.3896L19.7781 16.6914C19.7113 16.8071 19.5647 16.8496 19.4461 16.7881L12.7654 13.3252L12.4236 20.8428C12.4174 20.9762 12.3072 21.0811 12.1736 21.0811H11.8259C11.6925 21.0809 11.5831 20.9761 11.5769 20.8428L11.2341 13.3252L4.55445 16.7881C4.43582 16.8496 4.28927 16.8071 4.22242 16.6914L4.04859 16.3896C3.98202 16.2739 4.01814 16.1266 4.13063 16.0547L10.4695 12L4.13063 7.94531C4.01813 7.87336 3.98201 7.72606 4.04859 7.61035L4.22242 7.30859C4.28928 7.19292 4.43582 7.15043 4.55445 7.21191L11.2341 10.6738L11.5769 3.15723C11.5831 3.02392 11.6925 2.91909 11.8259 2.91895H12.1736Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_attachFile = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -547,7 +568,7 @@ var Icon_barcode = (p) => {
 };
 var Icon_bell = (p) => {
   const { size = 24, ...rest } = p;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
       width: size,
@@ -556,22 +577,15 @@ var Icon_bell = (p) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M14.8 18.8086C14.9105 18.8086 15.0008 18.8985 14.9944 19.0088C14.8972 20.6781 13.5938 22 12.0002 22C10.4066 22 9.10324 20.6781 9.00609 19.0088C8.99968 18.8985 9.08997 18.8086 9.20043 18.8086H14.8Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M12.0002 2C12.5525 2.00002 13.0002 2.44772 13.0002 3V4.20898C15.9941 4.69573 18.2815 7.3314 18.2815 10.5107V14.1582C18.2815 15.0811 19.1207 15.8005 19.7629 16.4531C20.4046 17.1057 19.6388 17.957 18.7307 17.957H5.26976C4.36161 17.957 3.59581 17.1057 4.23754 16.4531C4.87979 15.8005 5.71898 15.0811 5.71898 14.1582V10.5107C5.71898 7.33139 8.00632 4.69572 11.0002 4.20898V3C11.0002 2.44772 11.4479 2 12.0002 2Z",
-            fill: "currentColor"
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M11.9997 2C12.8281 2 13.4997 2.67157 13.4997 3.5V4.16504C16.4633 4.82344 18.6734 7.38936 18.6735 10.4561V14.1465L18.6843 14.3301C18.7846 15.2926 19.607 16.8595 20.2468 17.4785C20.9292 18.1386 20.1161 19 19.1511 19H14.9938C14.9938 19.0028 14.994 19.0059 14.9938 19.0088C14.8967 20.6781 13.5933 22 11.9997 22C10.4062 21.9998 9.10269 20.678 9.00556 19.0088C9.00539 19.0059 9.00559 19.0028 9.00556 19H4.84833L4.66962 18.9902C3.78764 18.8932 3.11313 18.0974 3.75263 17.4785C4.39237 16.8596 5.21478 15.2927 5.31513 14.3301L5.32587 14.1465V10.4561C5.32596 7.38957 7.53635 4.82365 10.4997 4.16504V3.5C10.4997 2.67167 11.1714 2.00016 11.9997 2ZM11.9997 5.5C9.0949 5.50016 6.82597 7.76554 6.82587 10.4561V14.1465C6.82577 14.9672 6.47479 15.89 6.14423 16.5703C5.99522 16.8769 5.81805 17.1956 5.6247 17.5H18.3747C18.1813 17.1956 18.0042 16.8769 17.8552 16.5703C17.5246 15.89 17.1736 14.9671 17.1735 14.1465V10.4561C17.1734 7.76545 14.9046 5.5 11.9997 5.5Z",
+          fill: "currentColor"
+        }
+      )
     }
   );
 };
@@ -1655,28 +1669,7 @@ var Icon_history = (p) => {
     }
   );
 };
-var Icon_imageFill = (p) => {
-  const { size = 24, ...rest } = p;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M7.34277 10.165C7.43716 10.078 7.58268 10.0769 7.67871 10.1621L15.3535 16.9844C16.0043 17.5629 16.9817 17.575 17.6465 17.0127L22 13.3281V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V15.0967L7.34277 10.165ZM20 2C21.1046 2 22 2.89543 22 4V11.3633L16.6777 15.8672C16.5828 15.9475 16.4426 15.9459 16.3496 15.8633L8.67578 9.04102C8.00336 8.44333 6.98628 8.45327 6.3252 9.06348L2 13.0557V4C2 2.89543 2.89543 2 4 2H20ZM16.25 6C15.0074 6 14 7.00736 14 8.25C14 9.49264 15.0074 10.5 16.25 10.5C17.4926 10.5 18.5 9.49264 18.5 8.25C18.5 7.00736 17.4926 6 16.25 6Z",
-          fill: "currentColor"
-        }
-      )
-    }
-  );
-};
-var Icon_imageOutline = (p) => {
+var Icon_image = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -1693,7 +1686,7 @@ var Icon_imageOutline = (p) => {
           {
             fillRule: "evenodd",
             clipRule: "evenodd",
-            d: "M15.5 6.25C16.7426 6.25 17.75 7.25736 17.75 8.5C17.75 9.74264 16.7426 10.75 15.5 10.75C14.2574 10.75 13.25 9.74264 13.25 8.5C13.25 7.25736 14.2574 6.25 15.5 6.25ZM15.5 7.75C15.0858 7.75 14.75 8.08579 14.75 8.5C14.75 8.91421 15.0858 9.25 15.5 9.25C15.9142 9.25 16.25 8.91421 16.25 8.5C16.25 8.08579 15.9142 7.75 15.5 7.75Z",
+            d: "M16 5.25C17.5188 5.25 18.75 6.48122 18.75 8C18.75 9.51878 17.5188 10.75 16 10.75C14.4812 10.75 13.25 9.51878 13.25 8C13.25 6.48122 14.4812 5.25 16 5.25ZM16 6.75C15.3096 6.75 14.75 7.30964 14.75 8C14.75 8.69036 15.3096 9.25 16 9.25C16.6904 9.25 17.25 8.69036 17.25 8C17.25 7.30964 16.6904 6.75 16 6.75Z",
             fill: "currentColor"
           }
         ),
@@ -1702,7 +1695,7 @@ var Icon_imageOutline = (p) => {
           {
             fillRule: "evenodd",
             clipRule: "evenodd",
-            d: "M19.2002 2.0498C20.7187 2.05002 21.9501 3.28123 21.9502 4.7998V19.2002C21.95 20.7187 20.7187 21.95 19.2002 21.9502H4.7998C3.28124 21.9501 2.05001 20.7187 2.0498 19.2002V4.7998C2.0499 3.28117 3.28117 2.0499 4.7998 2.0498H19.2002ZM7.66602 10.1514C7.57129 10.0672 7.42871 10.0672 7.33398 10.1514L3.5498 13.5137V19.2002C3.55001 19.8903 4.10966 20.4501 4.7998 20.4502H19.2002C19.8902 20.45 20.45 19.8902 20.4502 19.2002V14.877L17.6172 17.0811C16.9513 17.599 16.0104 17.5683 15.3799 17.0078L7.66602 10.1514ZM4.7998 3.5498C4.1096 3.5499 3.5499 4.10959 3.5498 4.7998V11.5078L6.33691 9.03027C6.99996 8.4409 8.00004 8.4409 8.66309 9.03027L16.377 15.8867C16.467 15.9666 16.6012 15.9714 16.6963 15.8975L20.4502 12.9766V4.7998C20.4501 4.10966 19.8903 3.55002 19.2002 3.5498H4.7998Z",
+            d: "M19.2002 2.0498C20.7187 2.05002 21.9501 3.28123 21.9502 4.7998V19.2002C21.95 20.7187 20.7187 21.95 19.2002 21.9502H4.7998C3.28124 21.9501 2.05001 20.7187 2.0498 19.2002V4.7998C2.0499 3.28117 3.28116 2.0499 4.7998 2.0498H19.2002ZM4.7998 3.5498C4.10959 3.5499 3.5499 4.10959 3.5498 4.7998V11.8037L6.76465 8.70801C7.1683 8.31972 7.81224 8.33867 8.19238 8.75L14.9121 16.0293C15.2496 16.3947 15.8042 16.457 16.2139 16.1748L19.4326 13.9561C19.7591 13.731 20.1435 13.7318 20.4502 13.8867V4.7998C20.4501 4.10966 19.8903 3.55002 19.2002 3.5498H4.7998Z",
             fill: "currentColor"
           }
         )
@@ -1821,6 +1814,36 @@ var Icon_launcher = (p) => {
     }
   );
 };
+var Icon_leftRight = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6.46594 12.5001C6.7421 12.1916 7.21587 12.1655 7.52454 12.4415C7.83288 12.7177 7.85911 13.1915 7.58313 13.5001L4.67688 16.7501H21.0001C21.4142 16.7502 21.7501 17.086 21.7501 17.5001C21.75 17.9142 21.4142 18.25 21.0001 18.2501H4.67688L7.58313 21.5001C7.859 21.8088 7.83295 22.2826 7.52454 22.5587C7.21592 22.8347 6.74212 22.8085 6.46594 22.5001L2.44153 18.0001C2.18693 17.7154 2.18693 17.2848 2.44153 17.0001L6.46594 12.5001Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M16.4757 1.44153C16.7844 1.16552 17.2582 1.19163 17.5343 1.50013L21.5587 6.00013C21.8132 6.28481 21.8132 6.71549 21.5587 7.00013L17.5343 11.5001C17.2582 11.8086 16.7844 11.8346 16.4757 11.5587C16.1672 11.2826 16.1411 10.8088 16.4171 10.5001L19.3234 7.25013H3.00012C2.58596 7.25013 2.2502 6.91428 2.25012 6.50013C2.25012 6.08591 2.58591 5.75013 3.00012 5.75013H19.3234L16.4171 2.50013C16.1411 2.19146 16.1672 1.71769 16.4757 1.44153Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_line = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2439,6 +2462,27 @@ var Icon_search = (p) => {
     }
   );
 };
+var Icon_send = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M19.8551 3.15204C20.1245 3.06242 20.4219 3.13291 20.6226 3.33368C20.8233 3.53455 20.8931 3.83186 20.8033 4.10126L15.3209 20.5485C14.8017 22.1061 12.6164 22.1561 12.0269 20.6237L9.61191 14.3434L3.33261 11.9284C1.80035 11.3391 1.84967 9.15489 3.40683 8.63544L19.8551 3.15204ZM11.067 13.9479L13.4273 20.0847C13.5115 20.3036 13.8239 20.2964 13.898 20.0739L18.3756 6.64032L11.067 13.9479ZM3.88144 10.0583C3.65915 10.1325 3.65209 10.4437 3.8707 10.528L10.0064 12.8874L17.3141 5.58075L3.88144 10.0583Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_setting = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2460,7 +2504,7 @@ var Icon_setting = (p) => {
     }
   );
 };
-var Icon_shield = (p) => {
+var Icon_settingOutline = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -2475,7 +2519,9 @@ var Icon_shield = (p) => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            d: "M16.2549 9.3486C16.5477 9.05582 17.0225 9.05602 17.3154 9.3486C17.6083 9.64149 17.6083 10.1163 17.3154 10.4091L12.0859 15.6386C11.6954 16.0291 11.0624 16.0291 10.6719 15.6386L7.46973 12.4365C7.17728 12.1436 7.17703 11.6687 7.46973 11.3759C7.76264 11.0833 8.23844 11.0831 8.53125 11.3759L11.3789 14.2246L16.2549 9.3486Z",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M11.9996 8C14.2087 8 15.9996 9.79086 15.9996 12C15.9996 14.2091 14.2087 16 11.9996 16C9.79065 15.9998 7.9996 14.209 7.9996 12C7.9996 9.791 9.79065 8.00022 11.9996 8ZM11.9996 9.5C10.6191 9.50022 9.4996 10.6194 9.4996 12C9.4996 13.3806 10.6191 14.4998 11.9996 14.5C13.3803 14.5 14.4996 13.3807 14.4996 12C14.4996 10.6193 13.3803 9.5 11.9996 9.5Z",
             fill: "currentColor"
           }
         ),
@@ -2484,7 +2530,7 @@ var Icon_shield = (p) => {
           {
             fillRule: "evenodd",
             clipRule: "evenodd",
-            d: "M11.501 1.4404C11.8718 1.27889 12.3024 1.30624 12.6533 1.52145L20.1533 6.12204C20.5238 6.34931 20.7499 6.75284 20.75 7.18747V10.5302C20.75 11.8881 20.6005 13.3051 20.0645 14.6425C19.5554 15.9124 18.7155 17.6378 17.4502 19.1894C16.1835 20.7426 14.4592 22.1581 12.1816 22.7275L12 22.7734L11.8184 22.7275C9.54076 22.1581 7.81646 20.7426 6.5498 19.1894C5.2845 17.6378 4.4446 15.9124 3.93555 14.6425C3.39949 13.3051 3.25 11.8881 3.25 10.5302V7.18747C3.25007 6.75284 3.47619 6.34931 3.84668 6.12204L11.3467 1.52145L11.501 1.4404ZM4.75 7.32712V10.5302C4.75 11.7887 4.89082 12.9929 5.32812 14.084C5.80497 15.2735 6.57635 16.8486 7.71191 18.2412C8.80911 19.5866 10.2182 20.7255 12 21.2216C13.7818 20.7255 15.1909 19.5866 16.2881 18.2412C17.4236 16.8486 18.195 15.2735 18.6719 14.084C19.1092 12.9929 19.25 11.7887 19.25 10.5302V7.32712L12 2.87985L4.75 7.32712Z",
+            d: "M13.1851 1C13.5085 1 13.7979 1.20161 13.9068 1.50293L14.6832 3.65527C14.9613 3.72452 15.2006 3.79367 15.4029 3.86621C15.5134 3.90579 15.64 3.95628 15.7828 4.0166L16.2613 4.22949L18.0689 3.27246C18.2163 3.19438 18.3856 3.16661 18.5504 3.19238C18.7153 3.21835 18.8676 3.29735 18.984 3.41699L20.5748 5.06152C20.7859 5.28042 20.8459 5.60054 20.7271 5.87988L19.8785 7.86719C20.0192 8.12546 20.1316 8.34655 20.2174 8.53125C20.3097 8.73243 20.4239 9.01001 20.5601 9.36719L22.5377 10.2148L22.6432 10.2695C22.8771 10.4155 23.016 10.6779 22.9986 10.9561L22.8531 13.2383L22.8375 13.3486C22.8141 13.4565 22.7672 13.5589 22.6998 13.6475L22.6266 13.7305C22.5476 13.8076 22.4523 13.8674 22.3473 13.9043L20.4752 14.5693C20.4213 14.8278 20.3647 15.0493 20.3053 15.2363L20.1519 15.666C20.0973 15.8078 20.0394 15.9488 19.9781 16.0879L20.9185 18.166L20.9586 18.2793C20.9899 18.3941 20.9942 18.5153 20.9693 18.6328L20.9351 18.7471C20.8923 18.8584 20.823 18.959 20.733 19.0391L18.9449 20.6357L18.8512 20.707C18.753 20.7705 18.6411 20.812 18.524 20.8262L18.4059 20.8311C18.2889 20.8272 18.1732 20.7964 18.0689 20.7412L16.2262 19.7647C15.9378 19.9173 15.6394 20.0519 15.3346 20.168L14.5299 20.4697L13.815 22.4502L13.7672 22.5547C13.7121 22.6552 13.6346 22.7424 13.5406 22.8096L13.442 22.8701C13.3398 22.9219 13.2264 22.9498 13.1109 22.9522L11.0211 23C10.9023 23.0031 10.7841 22.9783 10.6773 22.9287L10.5748 22.8711C10.4431 22.7831 10.3415 22.6557 10.2848 22.5078L9.44198 20.2783C9.1547 20.1801 8.86973 20.0733 8.58847 19.959C8.35848 19.8594 8.13142 19.7518 7.90878 19.6367L5.81894 20.5303L5.71347 20.5664C5.64162 20.5854 5.56705 20.594 5.49276 20.5918L5.38241 20.5801C5.27208 20.5606 5.1671 20.5175 5.07577 20.4541L4.98886 20.3838L3.44198 18.9326C3.35574 18.8519 3.28988 18.7525 3.2496 18.6426L3.21737 18.5303C3.18685 18.376 3.20586 18.2154 3.27109 18.0723L4.1705 16.1143C4.05101 15.8824 3.93933 15.6454 3.83749 15.4053C3.71871 15.1116 3.60934 14.814 3.50839 14.5137L1.53866 13.9141C1.41879 13.8777 1.31002 13.8122 1.22226 13.7246L1.14218 13.6299C1.04481 13.4941 0.994151 13.3291 0.999601 13.1621L1.07675 11.0498C1.08222 10.9121 1.1259 10.7782 1.20175 10.6631C1.25874 10.5767 1.33262 10.5026 1.41855 10.4463L1.50839 10.3965L3.57382 9.4043C3.6695 9.05348 3.75306 8.78014 3.82675 8.58106C3.9305 8.31518 4.0461 8.05376 4.17245 7.79785L3.27694 5.90625C3.20906 5.76263 3.18873 5.6004 3.21835 5.44434C3.24057 5.3276 3.2899 5.21813 3.36191 5.125L3.44198 5.03711L4.98593 3.57813C5.09409 3.47611 5.23034 3.40784 5.37655 3.38086C5.52273 3.354 5.67376 3.37002 5.81112 3.42676L7.89901 4.28906C8.12988 4.13515 8.33881 4.01023 8.52792 3.91016C8.75326 3.79034 9.05504 3.66547 9.43417 3.53027L10.1607 1.50488C10.2143 1.35699 10.3122 1.22899 10.441 1.13867C10.57 1.04839 10.7249 0.999723 10.8824 1H13.1851ZM10.8463 4.03613C10.6946 4.45908 10.3613 4.79149 9.93808 4.94238C9.5875 5.06739 9.36381 5.16528 9.23202 5.23535L9.23007 5.23633C9.09075 5.31005 8.9247 5.40801 8.73105 5.53711C8.31531 5.81413 7.78855 5.86633 7.32675 5.67578L5.67343 4.99219L4.86484 5.75586L5.52792 7.15625C5.72387 7.57031 5.71997 8.05117 5.51718 8.46192C5.41394 8.67102 5.31944 8.88459 5.23398 9.10156L5.14218 9.37598C5.10686 9.491 5.06681 9.63118 5.02109 9.79883C4.90655 10.2184 4.6153 10.5675 4.22323 10.7559L2.55917 11.5547L2.51913 12.6436L3.94491 13.0781L4.11386 13.1416C4.49659 13.3106 4.79411 13.6335 4.92929 14.0352C5.01804 14.2992 5.11534 14.5609 5.21933 14.8193L5.35507 15.126C5.40249 15.2271 5.45233 15.3275 5.50351 15.4268C5.71457 15.8364 5.72588 16.3204 5.53378 16.7393L4.85898 18.2061L5.66659 18.9639L7.31894 18.2578L7.47616 18.2012C7.84698 18.0894 8.24932 18.125 8.59726 18.3047C8.78187 18.4001 8.97024 18.4892 9.16073 18.5723C9.28594 18.6231 9.41211 18.6724 9.53866 18.7197L9.92733 18.8594L10.0816 18.9219C10.4317 19.0869 10.7069 19.382 10.8453 19.748L11.5025 21.4883L12.5748 21.4639L13.1187 19.96L13.1832 19.8096C13.3508 19.4678 13.6433 19.2005 14.0035 19.0654L14.8004 18.7666L15.1676 18.6143C15.288 18.5597 15.4071 18.5013 15.524 18.4395L15.692 18.3623C16.0928 18.2097 16.5441 18.236 16.9283 18.4395L18.3238 19.1787L19.3248 18.2842L18.6109 16.7061C18.4355 16.318 18.4336 15.8732 18.6051 15.4834C18.7075 15.2508 18.7973 15.0126 18.8775 14.7715C18.9163 14.6479 18.9608 14.4825 19.0064 14.2637L19.0582 14.0762C19.2064 13.6503 19.5409 13.3098 19.9723 13.1563L21.3873 12.6523L21.4674 11.3877L19.9703 10.7461C19.5971 10.5861 19.3035 10.2817 19.1588 9.90234C19.0283 9.56034 18.9273 9.31663 18.8541 9.15723C18.7854 9.00988 18.689 8.81973 18.5611 8.58496C18.3418 8.18212 18.3187 7.70024 18.4986 7.27832L19.1519 5.74707L18.2867 4.85352L16.9625 5.55567C16.5475 5.77509 16.0531 5.78799 15.6275 5.58984C15.2974 5.43614 15.0582 5.33606 14.8971 5.27832C14.7581 5.22851 14.5701 5.17338 14.3209 5.11133C13.8356 4.99032 13.4418 4.63455 13.2721 4.16406L12.6715 2.5H11.3971L10.8463 4.03613Z",
             fill: "currentColor"
           }
         )
@@ -2492,9 +2538,9 @@ var Icon_shield = (p) => {
     }
   );
 };
-var Icon_sidebar = (p) => {
+var Icon_shield = (p) => {
   const { size = 24, ...rest } = p;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
       width: size,
@@ -2503,19 +2549,28 @@ var Icon_sidebar = (p) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M19 3C20.6569 3 22 4.34315 22 6V18L21.9961 18.1543C21.9184 19.6883 20.6883 20.9184 19.1543 20.9961L19 21H5L4.8457 20.9961C3.31166 20.9184 2.08163 19.6883 2.00391 18.1543L2 18V6C2 4.34315 3.34315 3 5 3H19ZM5 4.5C4.17157 4.5 3.5 5.17157 3.5 6V18C3.5 18.8284 4.17157 19.5 5 19.5H8V4.5H5ZM9.5 19.5H19C19.8284 19.5 20.5 18.8284 20.5 18V6C20.5 5.17157 19.8284 4.5 19 4.5H9.5V19.5Z",
-          fill: "currentColor"
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M16.2549 9.3486C16.5477 9.05582 17.0225 9.05602 17.3154 9.3486C17.6083 9.64149 17.6083 10.1163 17.3154 10.4091L12.0859 15.6386C11.6954 16.0291 11.0624 16.0291 10.6719 15.6386L7.46973 12.4365C7.17728 12.1436 7.17703 11.6687 7.46973 11.3759C7.76264 11.0833 8.23844 11.0831 8.53125 11.3759L11.3789 14.2246L16.2549 9.3486Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M11.501 1.4404C11.8718 1.27889 12.3024 1.30624 12.6533 1.52145L20.1533 6.12204C20.5238 6.34931 20.7499 6.75284 20.75 7.18747V10.5302C20.75 11.8881 20.6005 13.3051 20.0645 14.6425C19.5554 15.9124 18.7155 17.6378 17.4502 19.1894C16.1835 20.7426 14.4592 22.1581 12.1816 22.7275L12 22.7734L11.8184 22.7275C9.54076 22.1581 7.81646 20.7426 6.5498 19.1894C5.2845 17.6378 4.4446 15.9124 3.93555 14.6425C3.39949 13.3051 3.25 11.8881 3.25 10.5302V7.18747C3.25007 6.75284 3.47619 6.34931 3.84668 6.12204L11.3467 1.52145L11.501 1.4404ZM4.75 7.32712V10.5302C4.75 11.7887 4.89082 12.9929 5.32812 14.084C5.80497 15.2735 6.57635 16.8486 7.71191 18.2412C8.80911 19.5866 10.2182 20.7255 12 21.2216C13.7818 20.7255 15.1909 19.5866 16.2881 18.2412C17.4236 16.8486 18.195 15.2735 18.6719 14.084C19.1092 12.9929 19.25 11.7887 19.25 10.5302V7.32712L12 2.87985L4.75 7.32712Z",
+            fill: "currentColor"
+          }
+        )
+      ]
     }
   );
 };
-var Icon_star = (p) => {
+var Icon_sidebar = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -2529,7 +2584,9 @@ var Icon_star = (p) => {
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M12.1736 2.91895C12.3072 2.91895 12.4174 3.02382 12.4236 3.15723L12.7644 10.6738L19.4461 7.21191C19.5647 7.15042 19.7112 7.19288 19.7781 7.30859L19.9519 7.61035C20.0184 7.72598 19.9822 7.87332 19.8699 7.94531L13.53 11.999L19.8699 16.0547C19.9822 16.1267 20.0184 16.274 19.9519 16.3896L19.7781 16.6914C19.7113 16.8071 19.5647 16.8496 19.4461 16.7881L12.7654 13.3252L12.4236 20.8428C12.4174 20.9762 12.3072 21.0811 12.1736 21.0811H11.8259C11.6925 21.0809 11.5831 20.9761 11.5769 20.8428L11.2341 13.3252L4.55445 16.7881C4.43582 16.8496 4.28927 16.8071 4.22242 16.6914L4.04859 16.3896C3.98202 16.2739 4.01814 16.1266 4.13063 16.0547L10.4695 12L4.13063 7.94531C4.01813 7.87336 3.98201 7.72606 4.04859 7.61035L4.22242 7.30859C4.28928 7.19292 4.43582 7.15043 4.55445 7.21191L11.2341 10.6738L11.5769 3.15723C11.5831 3.02392 11.6925 2.91909 11.8259 2.91895H12.1736Z",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M19 3C20.6569 3 22 4.34315 22 6V18L21.9961 18.1543C21.9184 19.6883 20.6883 20.9184 19.1543 20.9961L19 21H5L4.8457 20.9961C3.31166 20.9184 2.08163 19.6883 2.00391 18.1543L2 18V6C2 4.34315 3.34315 3 5 3H19ZM5 4.5C4.17157 4.5 3.5 5.17157 3.5 6V18C3.5 18.8284 4.17157 19.5 5 19.5H8V4.5H5ZM9.5 19.5H19C19.8284 19.5 20.5 18.8284 20.5 18V6C20.5 5.17157 19.8284 4.5 19 4.5H9.5V19.5Z",
           fill: "currentColor"
         }
       )
@@ -2598,6 +2655,52 @@ var Icon_synchronize = (p) => {
     }
   );
 };
+var Icon_thumbsDown = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M13.5 21.25C14.7426 21.25 15.75 20.2426 15.75 19V15.5C15.75 15.3619 15.8619 15.25 16 15.25H18.8936C20.7018 15.25 22.0178 13.5347 21.5498 11.7881L20.1484 6.55762C19.5504 4.3259 17.4329 2.84845 15.1318 3.05664L8.05371 3.69727C7.76261 3.13498 7.17686 2.75 6.5 2.75H4.5C3.25736 2.75 2.25 3.75736 2.25 5V13C2.25 14.2426 3.25736 15.25 4.5 15.25H8.25V15.1689C8.57271 15.4885 8.90914 15.8467 9.23438 16.2344C10.0174 17.1678 10.7037 18.2229 11.0371 19.2568C11.3509 20.2303 12.2316 21.25 13.5 21.25ZM13.5 19.75C13.1116 19.75 12.6594 19.4004 12.4648 18.7969C12.0481 17.5041 11.2278 16.2778 10.3828 15.2705C9.6516 14.3988 8.87296 13.658 8.25 13.1416V5.18555L15.2676 4.55078C16.8419 4.40844 18.2901 5.41938 18.6992 6.94629L20.1006 12.1768C20.3132 12.9706 19.7154 13.75 18.8936 13.75H16C15.0335 13.75 14.25 14.5335 14.25 15.5V19C14.25 19.4142 13.9142 19.75 13.5 19.75Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+var Icon_thumbsUp = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M13.5 2.75C14.7426 2.75 15.75 3.75736 15.75 5V8.5C15.75 8.63807 15.8619 8.75 16 8.75H18.8936C20.7018 8.75 22.0178 10.4653 21.5498 12.2119L20.1484 17.4424C19.5504 19.6741 17.4329 21.1516 15.1318 20.9434L8.05371 20.3027C7.76261 20.865 7.17686 21.25 6.5 21.25H4.5C3.25736 21.25 2.25 20.2426 2.25 19V11C2.25 9.75736 3.25736 8.75 4.5 8.75H8.25V8.83105C8.57271 8.51149 8.90914 8.15334 9.23438 7.76562C10.0174 6.83217 10.7037 5.77712 11.0371 4.74316C11.3509 3.76975 12.2316 2.75 13.5 2.75ZM13.5 4.25C13.1116 4.25 12.6594 4.59961 12.4648 5.20312C12.0481 6.49588 11.2278 7.72217 10.3828 8.72949C9.6516 9.60115 8.87296 10.342 8.25 10.8584V18.8145L15.2676 19.4492C16.8419 19.5916 18.2901 18.5806 18.6992 17.0537L20.1006 11.8232C20.3132 11.0294 19.7154 10.25 18.8936 10.25H16C15.0335 10.25 14.25 9.4665 14.25 8.5V5C14.25 4.58579 13.9142 4.25 13.5 4.25Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_updown = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2649,6 +2752,50 @@ var Icon_user = (p) => {
     }
   );
 };
+var Icon_users = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M11.4062 13.5C14.5 13.5 17 16 17 19.0938C17 19.5938 16.5625 20 16.0625 20H3.90625C3.40625 20 3 19.5938 3 19.0938C3 16 5.46875 13.5 8.5625 13.5H11.4062Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M15.4189 13.5C18.8153 13.5001 21.5 16.4402 21.5 20H20.5C20.5 16.9999 18.3097 14.6219 15.626 14.5049C15.1851 14.0929 14.6769 13.7528 14.1201 13.5H15.4189Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M10 4C12.1875 4 14 5.8125 14 8C14 10.2188 12.1875 12 10 12C7.78125 12 6 10.2188 6 8C6 5.8125 7.78125 4 10 4Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 4C16.1902 4 18 5.8098 18 8C18 10.2201 16.1877 12 14 12V11C15.6405 11 17 9.66273 17 8C17 6.36208 15.6379 5 14 5V4Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_visibilityOff = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2868,6 +3015,7 @@ var ICONS = {
   arrowLeft: Icon_arrowLeft,
   arrowRight: Icon_arrowRight,
   arrowUp: Icon_arrowUp,
+  asterisk: Icon_asterisk,
   attachFile: Icon_attachFile,
   barcode: Icon_barcode,
   bell: Icon_bell,
@@ -2910,10 +3058,10 @@ var ICONS = {
   helpFill: Icon_helpFill,
   helpOutline: Icon_helpOutline,
   history: Icon_history,
-  imageFill: Icon_imageFill,
-  imageOutline: Icon_imageOutline,
+  image: Icon_image,
   inline: Icon_inline,
   launcher: Icon_launcher,
+  leftRight: Icon_leftRight,
   line: Icon_line,
   location: Icon_location,
   logout: Icon_logout,
@@ -2934,14 +3082,18 @@ var ICONS = {
   row: Icon_row,
   save: Icon_save,
   search: Icon_search,
+  send: Icon_send,
   setting: Icon_setting,
+  settingOutline: Icon_settingOutline,
   shield: Icon_shield,
   sidebar: Icon_sidebar,
-  star: Icon_star,
   store: Icon_store,
   synchronize: Icon_synchronize,
+  thumbsDown: Icon_thumbsDown,
+  thumbsUp: Icon_thumbsUp,
   updown: Icon_updown,
   user: Icon_user,
+  users: Icon_users,
   visibilityOff: Icon_visibilityOff,
   visibilityOn: Icon_visibilityOn,
   warehouseFill: Icon_warehouseFill,
@@ -4815,7 +4967,7 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ react.forwardRef(
               required && /* @__PURE__ */ jsxRuntime.jsx(
                 SIcon,
                 {
-                  name: "star",
+                  name: "asterisk",
                   size: 16,
                   color: "var(--sys-color-fg-accent)",
                   className: "shrink-0"
@@ -4934,31 +5086,250 @@ var SScrollArea = /* @__PURE__ */ react.forwardRef(function SScrollArea2({
 // src/components/SScrollArea/scrollArea.config.ts
 var SCROLL_AREA_AXES = ["vertical", "horizontal", "both"];
 
-// src/components/SButton/button.config.ts
-var BUTTON_COLORS = ["primary", "secondary", "neutral", "danger"];
-var BUTTON_SIZES = ["xs", "sm", "md", "lg"];
-var V = (path) => `var(--cmp-button-${path})`;
-function buttonPreset(color, outline) {
-  switch (color) {
-    case "primary":
-      return outline ? {
-        bg: V("brand-outline-bg-default"),
-        bgHover: V("brand-outline-bg-hover"),
-        text: V("brand-outline-content"),
-        icon: V("brand-outline-content"),
-        border: V("brand-outline-border")
-      } : {
-        bg: V("brand-strong-bg-default"),
-        bgHover: V("brand-strong-bg-hover"),
-        text: V("brand-strong-content"),
-        icon: V("brand-strong-content"),
-        border: "transparent"
-      };
-    case "secondary":
-      return {
-        bg: V("brand-subtle-bg-default"),
-        bgHover: V("brand-subtle-bg-hover"),
-        text: V("brand-subtle-content"),
+// src/components/SSplitter/splitter.config.ts
+var SSPLITTER_UNITS = ["%", "px"];
+var SSPLITTER_DEFAULT_LIMITS = {
+  "%": [10, 90],
+  "px": [50, Infinity]
+};
+var SSPLITTER_DEFAULT_VALUE = {
+  "%": 50,
+  "px": 240
+};
+var SSPLITTER_KEY_STEP = {
+  "%": { normal: 1, large: 10 },
+  "px": { normal: 10, large: 50 }
+};
+var LINE = "var(--cmp-splitter-border-width)";
+var PAD = "var(--cmp-splitter-border-padding)";
+var HIT = `calc(${LINE} + ${PAD} * 2)`;
+var HIT_END = `calc(0px - ${PAD})`;
+var SSplitterContext = /* @__PURE__ */ react.createContext(null);
+function useSSplitterContext(who) {
+  const ctx = react.useContext(SSplitterContext);
+  if (!ctx) throw new Error(`${who} \uC740 <SSplitter> \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
+  return ctx;
+}
+var SSplitterRoot = /* @__PURE__ */ react.forwardRef(function SSplitter({
+  value,
+  defaultValue,
+  onValueChange,
+  unit = "%",
+  limits,
+  emitImmediately = false,
+  vertical = false,
+  disabled = false,
+  dividerClassName,
+  dividerStyle,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const rootRef = react.useRef(null);
+  const setRootRef = react.useCallback(
+    (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const [uncontrolledValue, setUncontrolledValue] = react.useState(
+    () => defaultValue ?? SSPLITTER_DEFAULT_VALUE[unit]
+  );
+  const isControlled = value !== void 0;
+  const committedValue = isControlled ? value : uncontrolledValue;
+  const [dragValue, setDragValue] = react.useState(null);
+  const currentValue = dragValue ?? committedValue;
+  const [dragging, setDragging] = react.useState(false);
+  const [minLimit, maxLimit] = limits ?? SSPLITTER_DEFAULT_LIMITS[unit];
+  const stateRef = react.useRef({ committedValue, unit, vertical, minLimit, maxLimit });
+  stateRef.current = { committedValue, unit, vertical, minLimit, maxLimit };
+  const emitRef = react.useRef({ onValueChange, emitImmediately, isControlled });
+  emitRef.current = { onValueChange, emitImmediately, isControlled };
+  const measure = react.useCallback(() => {
+    const el = rootRef.current;
+    if (!el) return 0;
+    return stateRef.current.vertical ? el.clientHeight : el.clientWidth;
+  }, []);
+  const clamp4 = react.useCallback((next, containerSize) => {
+    const { unit: u, minLimit: lo, maxLimit: hi } = stateRef.current;
+    const unitMax = u === "%" ? 100 : containerSize;
+    return Math.min(unitMax, hi, Math.max(lo, next));
+  }, []);
+  const commit = react.useCallback((next) => {
+    if (next === stateRef.current.committedValue) return;
+    stateRef.current.committedValue = next;
+    if (!emitRef.current.isControlled) setUncontrolledValue(next);
+    emitRef.current.onValueChange?.(next);
+  }, []);
+  const endDragRef = react.useRef(null);
+  react.useEffect(() => () => endDragRef.current?.(), []);
+  const startResize = react.useCallback(
+    (event) => {
+      if (disabled || typeof document === "undefined") return;
+      event.preventDefault();
+      event.currentTarget.focus();
+      const isVertical = stateRef.current.vertical;
+      const containerSize = measure();
+      const startPos = isVertical ? event.clientY : event.clientX;
+      const startValue = clamp4(stateRef.current.committedValue, containerSize);
+      const multiplier = stateRef.current.unit === "%" ? containerSize === 0 ? 0 : 100 / containerSize : 1;
+      let latest = startValue;
+      const { body } = document;
+      const prevUserSelect = body.style.userSelect;
+      const prevCursor = body.style.cursor;
+      body.style.userSelect = "none";
+      body.style.cursor = isVertical ? "row-resize" : "col-resize";
+      const onMove = (moveEvent) => {
+        const delta = (isVertical ? moveEvent.clientY : moveEvent.clientX) - startPos;
+        latest = clamp4(startValue + multiplier * delta, containerSize);
+        setDragValue(latest);
+        if (emitRef.current.emitImmediately) commit(latest);
+      };
+      const endDrag = () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", endDrag);
+        body.style.userSelect = prevUserSelect;
+        body.style.cursor = prevCursor;
+        endDragRef.current = null;
+        setDragging(false);
+        setDragValue(null);
+        commit(latest);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", endDrag);
+      endDragRef.current = endDrag;
+      setDragging(true);
+    },
+    [disabled, measure, clamp4, commit]
+  );
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      if (disabled) return;
+      const { unit: u, vertical: isVertical, minLimit: lo } = stateRef.current;
+      const step = SSPLITTER_KEY_STEP[u][event.shiftKey ? "large" : "normal"];
+      const decrease = isVertical ? "ArrowUp" : "ArrowLeft";
+      const increase = isVertical ? "ArrowDown" : "ArrowRight";
+      let next = null;
+      if (event.key === decrease) next = stateRef.current.committedValue - step;
+      else if (event.key === increase) next = stateRef.current.committedValue + step;
+      else if (event.key === "Home") next = lo;
+      else if (event.key === "End") next = Number.MAX_SAFE_INTEGER;
+      if (next === null) return;
+      event.preventDefault();
+      commit(clamp4(next, measure()));
+    },
+    [disabled, measure, clamp4, commit]
+  );
+  const sizeCss = unit === "%" ? `${currentValue}%` : `${Math.round(currentValue)}px`;
+  const divider = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-[1] shrink-0", style: { flexBasis: LINE }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": vertical ? "horizontal" : "vertical",
+      "aria-valuenow": Math.round(currentValue),
+      "aria-valuemin": Math.round(minLimit),
+      "aria-valuemax": Number.isFinite(maxLimit) ? Math.round(maxLimit) : void 0,
+      "aria-valuetext": sizeCss,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : 0,
+      onMouseDown: startResize,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "group absolute flex outline-none",
+        vertical ? "inset-x-0 flex-col justify-center" : "inset-y-0 justify-center",
+        disabled ? "cursor-default" : vertical ? "cursor-row-resize" : "cursor-col-resize",
+        dividerClassName
+      ),
+      style: {
+        ...vertical ? { bottom: HIT_END, height: HIT } : { right: HIT_END, width: HIT },
+        ...dividerStyle
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            // 평상시엔 자리만 잡고 칠하지 않는다 — 색이 붙는 것 자체가 조절 가능하다는 신호다.
+            "transition-colors",
+            vertical ? "h-(--cmp-splitter-border-width)" : "w-(--cmp-splitter-border-width)",
+            !disabled && "group-hover:bg-(--cmp-splitter-border-color) group-focus-visible:bg-(--cmp-splitter-border-color)",
+            !disabled && dragging && "bg-(--cmp-splitter-border-color)"
+          )
+        }
+      )
+    }
+  ) });
+  const ctx = { vertical, sizeCss, divider };
+  return /* @__PURE__ */ jsxRuntime.jsx(SSplitterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setRootRef,
+      className: cn("flex size-full", vertical ? "flex-col" : "flex-row", className),
+      style,
+      ...rest,
+      children
+    }
+  ) });
+});
+function usePane(pane, className, style) {
+  const ctx = useSSplitterContext(`SSplitter.${pane === "before" ? "Before" : "After"}`);
+  const isSized = pane === "before";
+  return {
+    divider: ctx.divider,
+    className: cn(
+      "min-h-0 min-w-0 overflow-auto",
+      isSized ? "shrink-0" : "flex-1 basis-0",
+      className
+    ),
+    style: isSized ? { [ctx.vertical ? "height" : "width"]: ctx.sizeCss, ...style } : style
+  };
+}
+var SSplitterBeforeImpl = /* @__PURE__ */ react.forwardRef(function SSplitterBefore({ className, style, children, ...rest }, ref) {
+  const pane = usePane("before", className, style);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: pane.className, style: pane.style, ...rest, children }),
+    pane.divider
+  ] });
+});
+var SSplitterAfterImpl = /* @__PURE__ */ react.forwardRef(function SSplitterAfter({ className, style, children, ...rest }, ref) {
+  const pane = usePane("after", className, style);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: pane.className, style: pane.style, ...rest, children });
+});
+var SSplitterBefore2 = /* @__PURE__ */ withDisplayName(SSplitterBeforeImpl, "SSplitter.Before");
+var SSplitterAfter2 = /* @__PURE__ */ withDisplayName(SSplitterAfterImpl, "SSplitter.After");
+var SSplitter2 = /* @__PURE__ */ Object.assign(SSplitterRoot, {
+  Before: SSplitterBefore2,
+  After: SSplitterAfter2
+});
+
+// src/components/SButton/button.config.ts
+var BUTTON_COLORS = ["primary", "secondary", "neutral", "danger"];
+var BUTTON_SIZES = ["xs", "sm", "md", "lg"];
+var V = (path) => `var(--cmp-button-${path})`;
+function buttonPreset(color, outline) {
+  switch (color) {
+    case "primary":
+      return outline ? {
+        bg: V("brand-outline-bg-default"),
+        bgHover: V("brand-outline-bg-hover"),
+        text: V("brand-outline-content"),
+        icon: V("brand-outline-content"),
+        border: V("brand-outline-border")
+      } : {
+        bg: V("brand-strong-bg-default"),
+        bgHover: V("brand-strong-bg-hover"),
+        text: V("brand-strong-content"),
+        icon: V("brand-strong-content"),
+        border: "transparent"
+      };
+    case "secondary":
+      return {
+        bg: V("brand-subtle-bg-default"),
+        bgHover: V("brand-subtle-bg-hover"),
+        text: V("brand-subtle-content"),
         icon: V("brand-subtle-content"),
         border: "transparent"
       };
@@ -6036,8 +6407,8 @@ function SFooter({
     "footer",
     {
       className: cn(
-        "relative flex w-full flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] overflow-hidden px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)] shadow-[var(--shadow-spread-md)]",
-        isGrey ? "bg-[var(--cmp-overlay-footer-bg-neutral)]" : "bg-[var(--cmp-overlay-footer-bg-default)]",
+        "relative flex w-full flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] overflow-hidden px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)]",
+        isGrey ? "bg-[var(--cmp-overlay-footer-bg-neutral)] border-t border-solid border-[color:var(--sys-color-border-default)]" : "bg-[var(--cmp-overlay-footer-bg-default)] shadow-[var(--shadow-spread-md)]",
         className
       ),
       style,
@@ -6922,6 +7293,72 @@ function SDrawer({
     )
   ] }) }) });
 }
+
+// src/lib/is-dev.ts
+function isDev() {
+  return typeof process === "undefined" || process?.env?.NODE_ENV !== "production";
+}
+
+// src/lib/modal-outlet.ts
+var EMPTY = [];
+var entries2 = EMPTY;
+var listeners2 = /* @__PURE__ */ new Set();
+var outletRendered = false;
+var outletCount = 0;
+var nextId2 = 0;
+function emit2() {
+  for (const listener of listeners2) listener();
+}
+function subscribeModalEntries(listener) {
+  listeners2.add(listener);
+  return () => {
+    listeners2.delete(listener);
+  };
+}
+function getModalEntries() {
+  return entries2;
+}
+function getServerModalEntries() {
+  return EMPTY;
+}
+function markModalOutletRendered() {
+  outletRendered = true;
+}
+function registerModalOutlet() {
+  outletCount += 1;
+  outletRendered = true;
+  return () => {
+    outletCount -= 1;
+    if (outletCount === 0) queueMicrotask(sweepOrphans);
+  };
+}
+function sweepOrphans() {
+  if (outletCount > 0) return;
+  outletRendered = false;
+  if (entries2 === EMPTY) return;
+  const orphans = entries2;
+  entries2 = EMPTY;
+  emit2();
+  for (const entry of orphans) entry.onOrphan();
+}
+function hasModalOutlet() {
+  return outletRendered;
+}
+function isModalOutletMounted() {
+  return outletCount > 0;
+}
+function addModalEntry(host, node, onOrphan) {
+  const id = ++nextId2;
+  entries2 = [...entries2, { id, host, node, onOrphan }];
+  emit2();
+  return id;
+}
+function removeModalEntry(id) {
+  const next = entries2.filter((entry) => entry.id !== id);
+  if (next.length === entries2.length) return;
+  entries2 = next;
+  emit2();
+}
 var EXIT_DURATION = 300;
 var EXIT_BUFFER = 100;
 var SModalRefImpl = class {
@@ -6929,6 +7366,7 @@ var SModalRefImpl = class {
     this.pendingClose = false;
     this.pendingPatches = [];
     this.dismissRequested = false;
+    this.torndown = false;
   }
   onOk(fn) {
     this.okFn = fn;
@@ -6960,10 +7398,10 @@ var SModalRefImpl = class {
     return this;
   }
   // 닫힘 트리거 — 이미 닫힘이 시작됐으면 무시(중복 콜백 방지)
-  settle(emit2) {
+  settle(emit3) {
     if (this.dismissRequested) return;
     this.dismissRequested = true;
-    emit2();
+    emit3();
     if (this.closeBinding) this.closeBinding();
     else this.pendingClose = true;
   }
@@ -6996,11 +7434,18 @@ var SModalRefImpl = class {
       this.pendingPatches = [];
     }
   }
-  /** @internal 정리 대상(root·host) 주입 */
-  _setTeardown(root, host) {
-    this.root = root;
+  /** @internal host 주입 — 렌더 전에 호출해야 마운트 검사(_getHost)가 성립한다 */
+  _setHost(host) {
     this.host = host;
   }
+  /** @internal outlet 경로 정리 대상(스토어 엔트리) 주입 */
+  _setEntry(id) {
+    this.entryId = id;
+  }
+  /** @internal 폴백(createRoot) 경로 정리 대상 주입 */
+  _setRoot(root) {
+    this.root = root;
+  }
   /** @internal create 의 마운트 검사용 host 조회 */
   _getHost() {
     return this.host;
@@ -7031,9 +7476,21 @@ var SModalRefImpl = class {
   }
   /** @internal 닫힘 애니메이션 종료 후 언마운트 */
   _teardown() {
+    if (this.torndown) return;
+    this.torndown = true;
+    if (this.entryId !== void 0) {
+      removeModalEntry(this.entryId);
+      return;
+    }
     this.root?.unmount();
     this.host?.remove();
   }
+  /** @internal 렌더 실패·outlet 소멸로 모달이 사라졌을 때 — 콜백을 마무리하고 정리한다 */
+  _fail() {
+    this.dismissRequested = true;
+    this._emitDismissed();
+    this._teardown();
+  }
 };
 function useExitTeardown(open, refImpl) {
   const dismissedRef = react.useRef(false);
@@ -7100,8 +7557,15 @@ function LoadingMount({ options, refImpl }) {
     }
   );
 }
+var outletWarned = false;
+var NO_OUTLET_CAUSE = "SModalOutlet \uC774 \uC571 \uD2B8\uB9AC\uC5D0 \uC5C6\uC5B4 \uC774 \uBAA8\uB2EC\uC740 \uBCC4\uB3C4 React \uB8E8\uD2B8(createRoot)\uB85C \uB9C8\uC6B4\uD2B8\uB429\uB2C8\uB2E4. React Context \uB294 DOM \uC774 \uC544\uB2C8\uB77C \uB80C\uB354 \uD2B8\uB9AC\uB97C \uD0C0\uBBC0\uB85C \uC571\uC758 Provider(QueryClient\xB7Router\xB7Theme \uB4F1)\uAC00 \uB2FF\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uC571 \uBD80\uD2B8\uC2A4\uD2B8\uB7A9\uC5D0\uC11C Provider \uC548\uCABD\uC5D0 <SModalOutlet /> \uC744 \uD55C \uBC88 \uB80C\uB354\uD558\uC138\uC694.";
+function warnMissingOutlet() {
+  if (!isDev() || outletWarned) return;
+  outletWarned = true;
+  console.warn(`[SModal] ${NO_OUTLET_CAUSE}`);
+}
 function warnIfNotModal(host, component) {
-  if (typeof process !== "undefined" && process?.env?.NODE_ENV === "production") return;
+  if (!isDev()) return;
   if (!host || host.childElementCount === 0) return;
   const name = component?.name || "component";
   console.warn(
@@ -7109,14 +7573,14 @@ function warnIfNotModal(host, component) {
   );
 }
 function CreateMount({ options, refImpl }) {
-  const { component: Component, componentProps } = options;
+  const { component: Component2, componentProps } = options;
   const [open, setOpen] = react.useState(true);
   react.useEffect(() => {
     refImpl._bindClose(() => setOpen(false));
     refImpl._bindUpdate(() => {
     });
-    warnIfNotModal(refImpl._getHost(), Component);
-  }, [refImpl, Component]);
+    warnIfNotModal(refImpl._getHost(), Component2);
+  }, [refImpl, Component2]);
   useExitTeardown(open, refImpl);
   const componentAllProps = {
     ...componentProps,
@@ -7128,15 +7592,42 @@ function CreateMount({ options, refImpl }) {
     onClose: () => refImpl._emitClose(),
     modalRef: refImpl
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...componentAllProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...componentAllProps });
 }
+var ModalErrorBoundary = class extends react.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { failed: false };
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    console.error(
+      this.props.standalone ? `[SModal] \uBAA8\uB2EC \uB80C\uB354\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4. ${NO_OUTLET_CAUSE}` : "[SModal] \uBAA8\uB2EC \uB80C\uB354\uC5D0 \uC2E4\uD328\uD574 \uBAA8\uB2EC\uC744 \uB2EB\uC2B5\uB2C8\uB2E4.",
+      error
+    );
+    setTimeout(() => this.props.onError(), 0);
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+};
 function mount(render) {
   const host = document.createElement("div");
   document.body.appendChild(host);
   const refImpl = new SModalRefImpl();
+  refImpl._setHost(host);
+  const useOutlet = hasModalOutlet();
+  const node = /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { standalone: !useOutlet, onError: () => refImpl._fail(), children: render(refImpl) });
+  if (useOutlet) {
+    refImpl._setEntry(addModalEntry(host, node, () => refImpl._fail()));
+    return refImpl;
+  }
+  warnMissingOutlet();
   const root = client.createRoot(host);
-  refImpl._setTeardown(root, host);
-  root.render(render(refImpl));
+  refImpl._setRoot(root);
+  root.render(node);
   return refImpl;
 }
 var SModal = {
@@ -7160,8 +7651,32 @@ var SModal = {
     return mount((refImpl) => /* @__PURE__ */ jsxRuntime.jsx(CreateMount, { options, refImpl }));
   }
 };
+function SModalEntryPortal({ entry }) {
+  react.useEffect(() => {
+    if (!entry.host.isConnected) document.body.appendChild(entry.host);
+    return () => entry.host.remove();
+  }, [entry]);
+  return reactDom.createPortal(entry.node, entry.host);
+}
+function SModalOutlet() {
+  markModalOutletRendered();
+  const entries3 = react.useSyncExternalStore(
+    subscribeModalEntries,
+    getModalEntries,
+    getServerModalEntries
+  );
+  react.useEffect(() => {
+    if (isDev() && isModalOutletMounted()) {
+      console.warn(
+        "[SModalOutlet] \uC774\uBBF8 \uB80C\uB354\uB41C SModalOutlet \uC774 \uC788\uC2B5\uB2C8\uB2E4. \uC571 \uC804\uCCB4\uC5D0 \uD558\uB098\uB9CC \uB450\uC138\uC694 \u2014 \uB458 \uC774\uC0C1\uC774\uBA74 \uAC19\uC740 \uBAA8\uB2EC\uC774 \uC911\uBCF5\uC73C\uB85C \uADF8\uB824\uC9D1\uB2C8\uB2E4."
+      );
+    }
+    return registerModalOutlet();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: false, children: entries3.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(SModalEntryPortal, { entry }, entry.id)) }) });
+}
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
-var isSameNav = (a, b) => a === b || !!a && !!b && a.columnWidth === b.columnWidth && a.topHeight === b.topHeight && a.foldMs === b.foldMs && a.requireFullHeader === b.requireFullHeader;
+var isSameNav = (a, b) => a === b || !!a && !!b && a.columnWidth === b.columnWidth && a.topHeight === b.topHeight && a.foldMs === b.foldMs && a.requireFullHeader === b.requireFullHeader && a.resizing === b.resizing;
 var SLayoutContext = /* @__PURE__ */ react.createContext(null);
 var SLAYOUT_MIN_WIDTH = 1366;
 var SLAYOUT_MIN_WIDTH_VAR = "--s-layout-min-width";
@@ -7221,7 +7736,8 @@ var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
     gridTemplateRows: `${nav?.topHeight ?? "0px"} 1fr`,
     // 메뉴가 미끄러지는 동안 페이지 열도 같은 길이로 따라와야 한 덩어리로 읽힌다.
     // (fix 는 SGnb 가 제 폭을 직접 전환하므로 프레임이 손댈 게 없다)
-    transition: `grid-template-columns ${nav?.foldMs ?? 0}ms ease-out`
+    // 단 폭을 끄는 중에는 전환을 끈다 — 그러지 않으면 열이 손보다 늦게 따라온다.
+    transition: nav?.resizing ? "none" : `grid-template-columns ${nav?.foldMs ?? 0}ms ease-out`
   } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(SLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -7364,6 +7880,10 @@ var GNB_RAIL_WIDTH = 68;
 var GNB_FOLD_MS = 200;
 var GNB_EXPAND_MS = 200;
 var GNB_MENU_WIDTH = 240;
+var GNB_MENU_MIN_WIDTH = 200;
+var GNB_MENU_MAX_WIDTH = 300;
+var GNB_MENU_RESIZE_KEY_STEP = { normal: 10, large: 50 };
+var clampGnbMenuWidth = (width) => Math.min(GNB_MENU_MAX_WIDTH, Math.max(GNB_MENU_MIN_WIDTH, Math.round(width)));
 var GNB_FULL_LOGO_WIDTH = 140;
 var GNB_TOP_ICON_GAP = 8;
 var GNB_TOP_ICON_SIZE = 24;
@@ -7400,6 +7920,7 @@ function findGnbAncestors(items, value) {
   };
   return walk(items, []) ?? [];
 }
+var LABEL_TIP_HIDE_DELAY_MS = 100;
 var DEPTH_PADDING_LEFT = (M, depth) => depth === 1 ? M.depth1PaddingLeft : depth === 2 ? M.depth2PaddingLeft : M.depth3PaddingLeft;
 var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   type: typeProp,
@@ -7418,6 +7939,10 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   railFooter,
   menuFooter,
   foldedFooter,
+  resizable = false,
+  menuWidth: menuWidthProp,
+  defaultMenuWidth,
+  onMenuWidthChange,
   ariaLabel = "global navigation",
   className,
   style,
@@ -7436,6 +7961,46 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     () => new Set(findGnbAncestors(items, value))
   );
   const [hoveredKey, setHoveredKey] = react.useState(null);
+  const [labelTip, setLabelTip] = react.useState(null);
+  const labelTipHideRef = react.useRef(null);
+  const portalContainer = usePortalContainer();
+  const labelTipAnchorRef = react.useMemo(
+    () => ({
+      current: {
+        getBoundingClientRect: () => labelTip?.el.getBoundingClientRect() ?? new DOMRect()
+      }
+    }),
+    [labelTip?.el]
+  );
+  const cancelLabelTipHide = () => {
+    if (labelTipHideRef.current === null) return;
+    clearTimeout(labelTipHideRef.current);
+    labelTipHideRef.current = null;
+  };
+  const showLabelTipIfTruncated = (row, label) => {
+    cancelLabelTipHide();
+    const el = row.querySelector("[data-gnb-label]");
+    if (!el || el.scrollWidth <= el.clientWidth) {
+      setLabelTip(null);
+      return;
+    }
+    setLabelTip((prev) => prev?.el === el && prev.label === label ? prev : { label, el });
+  };
+  const startLabelTipHide = () => {
+    cancelLabelTipHide();
+    labelTipHideRef.current = setTimeout(() => setLabelTip(null), LABEL_TIP_HIDE_DELAY_MS);
+  };
+  react.useEffect(() => cancelLabelTipHide, []);
+  const rowHoverProps = (item) => ({
+    onMouseEnter: (event) => {
+      setHoveredKey(item.value);
+      showLabelTipIfTruncated(event.currentTarget, item.label);
+    },
+    onMouseLeave: () => {
+      setHoveredKey((prev) => prev === item.value ? null : prev);
+      startLabelTipHide();
+    }
+  });
   const [activeRail, setActiveRail] = react.useState(
     () => findGnbRailValue(items, value) ?? items[0]?.value
   );
@@ -7515,11 +8080,17 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           cursor: item.disabled ? "not-allowed" : "pointer"
         },
         onClick: () => handleRailClick(item),
-        onMouseEnter: () => setHoveredKey(item.value),
-        onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
+        ...rowHoverProps(item),
         children: [
           item.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item.icon, size: GNB_RAIL.itemIcon, className: "shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-center", children: item.label })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-gnb-label": true,
+              className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-center",
+              children: item.label
+            }
+          )
         ]
       }
     ) }, item.value);
@@ -7563,8 +8134,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
             className: "box-border flex select-none items-center border-none bg-transparent text-left transition-colors duration-150",
             style: itemStyle,
             onClick: () => handleItemClick(item),
-            onMouseEnter: () => setHoveredKey(item.value),
-            onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
+            ...rowHoverProps(item),
             children: [
               depth === 1 && item.icon && /* @__PURE__ */ jsxRuntime.jsx(
                 SIcon,
@@ -7575,16 +8145,23 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
                   className: "shrink-0"
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center", children: [
                 depth > 1 && iconBranch ? /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "w-[20px] flex items-center justify-center mr-[8px]",
+                    className: "mr-[8px] flex w-[20px] shrink-0 items-center justify-center",
                     style: { height: M.itemLineHeight },
                     children: "-"
                   }
                 ) : null,
-                item.label
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-gnb-label": true,
+                    className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
+                    children: item.label
+                  }
+                )
               ] }),
               item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsxRuntime.jsx(
                 STag,
@@ -7636,7 +8213,14 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   const railItems = useRail ? items : [];
   const menuItems = useRail ? items.find((item) => item.value === activeRail)?.children ?? [] : items;
   const showMenu = !useRail || menuItems.length > 0;
-  const bodyWidth = (useRail ? GNB_RAIL_WIDTH : 0) + (showMenu ? GNB_MENU_WIDTH : 0);
+  const [uncontrolledMenuWidth, setUncontrolledMenuWidth] = react.useState(
+    () => defaultMenuWidth ?? GNB_MENU_WIDTH
+  );
+  const [dragMenuWidth, setDragMenuWidth] = react.useState(null);
+  const committedMenuWidth = menuWidthProp ?? uncontrolledMenuWidth;
+  const menuWidth = clampGnbMenuWidth(dragMenuWidth ?? committedMenuWidth);
+  const [resizing, setResizing] = react.useState(false);
+  const bodyWidth = (useRail ? GNB_RAIL_WIDTH : 0) + (showMenu ? menuWidth : 0);
   const registerNav = layout?.registerNav;
   useIsomorphicLayoutEffect(() => {
     if (!registerNav) return;
@@ -7644,21 +8228,109 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
       columnWidth: bodyWidth,
       topHeight: H.topHeight,
       foldMs: GNB_FOLD_MS,
-      requireFullHeader: railHasLeaf
+      requireFullHeader: railHasLeaf,
+      resizing
     });
     return () => registerNav(null);
-  }, [registerNav, bodyWidth, H.topHeight, railHasLeaf]);
+  }, [registerNav, bodyWidth, H.topHeight, railHasLeaf, resizing]);
+  const canResize = resizable && showMenu && !folded;
+  const menuWidthRef = react.useRef(menuWidth);
+  menuWidthRef.current = menuWidth;
+  const commitMenuWidth = (next) => {
+    const clamped = clampGnbMenuWidth(next);
+    setDragMenuWidth(null);
+    if (menuWidthProp === void 0) setUncontrolledMenuWidth(clamped);
+    if (clamped !== committedMenuWidth) onMenuWidthChange?.(clamped);
+  };
+  const endResizeRef = react.useRef(null);
+  react.useEffect(() => () => endResizeRef.current?.(), []);
+  const startMenuResize = (event) => {
+    if (!canResize || typeof document === "undefined") return;
+    event.preventDefault();
+    event.currentTarget.focus();
+    const startX = event.clientX;
+    const startWidth = menuWidthRef.current;
+    let latest = startWidth;
+    const { body } = document;
+    const prevUserSelect = body.style.userSelect;
+    const prevCursor = body.style.cursor;
+    body.style.userSelect = "none";
+    body.style.cursor = "col-resize";
+    const onMove = (moveEvent) => {
+      latest = clampGnbMenuWidth(startWidth + (moveEvent.clientX - startX));
+      setDragMenuWidth(latest);
+    };
+    const endResize = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", endResize);
+      body.style.userSelect = prevUserSelect;
+      body.style.cursor = prevCursor;
+      endResizeRef.current = null;
+      setResizing(false);
+      commitMenuWidth(latest);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", endResize);
+    endResizeRef.current = endResize;
+    setResizing(true);
+  };
+  const handleMenuResizeKeyDown = (event) => {
+    if (!canResize) return;
+    const step = GNB_MENU_RESIZE_KEY_STEP[event.shiftKey ? "large" : "normal"];
+    let next = null;
+    if (event.key === "ArrowLeft") next = menuWidthRef.current - step;
+    else if (event.key === "ArrowRight") next = menuWidthRef.current + step;
+    else if (event.key === "Home") next = GNB_MENU_MIN_WIDTH;
+    else if (event.key === "End") next = GNB_MENU_MAX_WIDTH;
+    if (next === null) return;
+    event.preventDefault();
+    commitMenuWidth(next);
+  };
   const railFolded = folded && header === "fix";
   const isFull = header === "full";
   const isFullFrame = isFull && !!layout;
   const rightBorder = color === "light" ? `1px solid ${C.topBorder}` : void 0;
+  const resizeHitWidth = "calc(var(--cmp-splitter-border-width) + var(--cmp-splitter-border-padding) * 2)";
+  const menuResizeHandle = canResize ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": `${ariaLabel} width`,
+      "aria-valuenow": menuWidth,
+      "aria-valuemin": GNB_MENU_MIN_WIDTH,
+      "aria-valuemax": GNB_MENU_MAX_WIDTH,
+      "aria-valuetext": `${menuWidth}px`,
+      tabIndex: 0,
+      onMouseDown: startMenuResize,
+      onKeyDown: handleMenuResizeKeyDown,
+      className: "group absolute inset-y-0 z-[1] flex cursor-col-resize justify-end outline-none",
+      style: {
+        width: resizeHitWidth,
+        ...isFull && !isFullFrame ? { left: `calc(${bodyWidth}px - ${resizeHitWidth})` } : { right: 0 }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            // 평상시엔 자리만 잡고 칠하지 않는다 — 색이 붙는 것 자체가 조절 가능하다는 신호다.
+            "w-(--cmp-splitter-border-width) transition-colors",
+            "group-hover:bg-(--cmp-splitter-border-color) group-focus-visible:bg-(--cmp-splitter-border-color)",
+            resizing && "bg-(--cmp-splitter-border-color)"
+          )
+        }
+      )
+    }
+  ) }) : null;
   const rootStyle = isFullFrame ? { display: "contents", ...style } : isFull ? (
     // 단독 full — 상단바가 전폭이어야 하므로 루트도 전폭이고, 배경·선은 상단바·메뉴가 각자 그린다.
     { width: "100%", ...style }
   ) : {
     // fix 를 닫으면 48px 레일로 좁혀진다.
     width: folded ? GNB_COMMON.foldWidth : bodyWidth,
-    transition: `width ${GNB_FOLD_MS}ms ease-out`,
+    // 폭을 끄는 중에는 전환을 끈다 — 접힘용 전환이 걸려 있으면 컬럼이 손보다 늦게 따라온다.
+    transition: resizing ? "none" : `width ${GNB_FOLD_MS}ms ease-out`,
     backgroundColor: C.panelBg,
     borderRight: rightBorder,
     ...style
@@ -7735,7 +8407,8 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
       ref,
       className: cn(
         "box-border",
-        !isFullFrame && "flex h-full shrink-0 flex-col overflow-hidden",
+        // relative: fix 의 조절선이 루트(=GNB 컬럼) 오른쪽 끝을 기준으로 서야 상단바까지 이어진다.
+        !isFullFrame && "relative flex h-full shrink-0 flex-col overflow-hidden",
         className
       ),
       style: rootStyle,
@@ -7773,86 +8446,106 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
             ] })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("overflow-hidden", !isFullFrame && "min-h-0 flex-1"),
+            className: cn("relative overflow-hidden", !isFullFrame && "min-h-0 flex-1"),
             style: isFullFrame ? { gridArea: "nav" } : void 0,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex h-full flex-row",
-                style: {
-                  width: bodyWidth,
-                  transform: folded ? "translateX(-100%)" : "none",
-                  visibility: folded ? "hidden" : "visible",
-                  transition: `transform ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(folded)}`
-                },
-                children: [
-                  useRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)과 하단 고정 footer 를 한 컬럼에 담는다.
-                  // footer 는 내비게이션이 아니므로 nav(landmark) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
-                  // 전체 높이에 걸쳐 책임진다(그래야 footer 자리까지 배경·오른쪽 선이 이어진다).
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      className: "flex shrink-0 flex-col overflow-hidden",
-                      style: {
-                        width: GNB_RAIL_WIDTH,
-                        borderRight: `1px solid ${C.topBorder}`,
-                        backgroundColor: C.panelBg
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "nav",
-                          {
-                            "aria-label": `${ariaLabel} rail`,
-                            className: cn(
-                              "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
-                              SCROLLBAR_HIDDEN_CLASS
-                            ),
-                            style: { padding: GNB_RAIL.padding },
-                            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", style: { gap: GNB_RAIL.gap }, children: railItems.map(renderRailItem) })
-                          }
-                        ),
-                        railFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: railFooter })
-                      ]
-                    }
-                  ),
-                  showMenu && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      className: "flex shrink-0 flex-col overflow-hidden",
-                      style: {
-                        width: GNB_MENU_WIDTH,
-                        backgroundColor: C.panelBg,
-                        // full 은 루트가 오른쪽 선을 못 그리므로(전폭이거나 아예 없다) 메뉴 오른쪽(페이지 경계)이 대신 그린다.
-                        borderRight: isFull ? rightBorder : void 0
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "nav",
-                          {
-                            "aria-label": ariaLabel,
-                            className: cn(
-                              "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
-                              SCROLLBAR_HIDDEN_CLASS
-                            ),
-                            style: {
-                              paddingTop: M.bodyPaddingY,
-                              paddingBottom: M.bodyPaddingY
-                            },
-                            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
-                          }
-                        ),
-                        menuFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: menuFooter })
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex h-full flex-row",
+                  style: {
+                    width: bodyWidth,
+                    transform: folded ? "translateX(-100%)" : "none",
+                    visibility: folded ? "hidden" : "visible",
+                    transition: `transform ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(folded)}`
+                  },
+                  children: [
+                    useRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)과 하단 고정 footer 를 한 컬럼에 담는다.
+                    // footer 는 내비게이션이 아니므로 nav(landmark) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
+                    // 전체 높이에 걸쳐 책임진다(그래야 footer 자리까지 배경·오른쪽 선이 이어진다).
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: "flex shrink-0 flex-col overflow-hidden",
+                        style: {
+                          width: GNB_RAIL_WIDTH,
+                          borderRight: `1px solid ${C.topBorder}`,
+                          backgroundColor: C.panelBg
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "nav",
+                            {
+                              "aria-label": `${ariaLabel} rail`,
+                              className: cn(
+                                "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
+                                SCROLLBAR_HIDDEN_CLASS
+                              ),
+                              style: { padding: GNB_RAIL.padding },
+                              children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", style: { gap: GNB_RAIL.gap }, children: railItems.map(renderRailItem) })
+                            }
+                          ),
+                          railFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: railFooter })
+                        ]
+                      }
+                    ),
+                    showMenu && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: "flex shrink-0 flex-col overflow-hidden",
+                        style: {
+                          width: menuWidth,
+                          backgroundColor: C.panelBg,
+                          // full 은 루트가 오른쪽 선을 못 그리므로(전폭이거나 아예 없다) 메뉴 오른쪽(페이지 경계)이 대신 그린다.
+                          borderRight: isFull ? rightBorder : void 0
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "nav",
+                            {
+                              "aria-label": ariaLabel,
+                              className: cn(
+                                "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
+                                SCROLLBAR_HIDDEN_CLASS
+                              ),
+                              style: {
+                                paddingTop: M.bodyPaddingY,
+                                paddingBottom: M.bodyPaddingY
+                              },
+                              children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
+                            }
+                          ),
+                          menuFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: menuFooter })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              header === "full" && menuResizeHandle
+            ]
           }
         ),
+        header === "fix" && menuResizeHandle,
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover2__namespace.Content,
+            {
+              side: "right",
+              sideOffset: 4,
+              className: cn("z-50", FLOATING_SLIDE_ANIM),
+              "aria-hidden": true,
+              onOpenAutoFocus: (event) => event.preventDefault(),
+              onMouseEnter: cancelLabelTipHide,
+              onMouseLeave: startLabelTipHide,
+              children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: labelTip?.label ?? "" })
+            }
+          ) })
+        ] }),
         railFolded && foldedFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-center mb-[24px]", children: foldedFooter })
       ]
     }
@@ -8121,6 +8814,7 @@ function SPagination({
 // src/components/SStepper/stepper.config.ts
 var STEPPER_SIZES = ["sm", "lg"];
 var V2 = (path) => `var(--cmp-stepper-${path})`;
+var VF = (path, fallback) => `var(--cmp-stepper-${path}, ${fallback})`;
 var STEPPER_SIZE_CONFIG = {
   sm: {
     sequenceSize: V2("sm-sequence-size"),
@@ -8150,16 +8844,17 @@ var STEPPER_COLORS = {
   sequenceBorder: {
     active: V2("sequence-border-active"),
     default: V2("sequence-border-default"),
-    completed: V2("sequence-border-completed")
+    completed: VF("sequence-border-completed", "#93C4FF")
   },
   sequenceBg: {
     active: V2("sequence-bg-active"),
     default: V2("sequence-bg-default"),
-    completed: V2("sequence-bg-completed")
+    completed: VF("sequence-bg-completed", "#EFF6FF")
   },
   sequenceText: {
     active: V2("sequence-text-active"),
-    default: V2("sequence-text-default")
+    default: V2("sequence-text-default"),
+    completed: VF("sequence-text-completed", "#0075FF")
   },
   text: {
     active: V2("text-active"),
@@ -8167,27 +8862,428 @@ var STEPPER_COLORS = {
     completed: V2("text-completed")
   }
 };
+var STEPPER_HORIZONTAL_COMPLETED_COLORS = {
+  sequenceBorder: STEPPER_COLORS.sequenceBorder.completed,
+  sequenceBg: STEPPER_COLORS.sequenceBg.completed,
+  sequenceIcon: STEPPER_COLORS.sequenceText.completed,
+  text: STEPPER_COLORS.text.completed
+};
+var STEPPER_VERTICAL_LAYOUT = {
+  width: VF("vertical-width", "240px"),
+  itemGap: VF("vertical-item-gap", "12px"),
+  itemPaddingX: VF("vertical-item-paddingX", "16px"),
+  itemPaddingY: VF("vertical-item-paddingY", "8px"),
+  titlePaddingTop: VF("vertical-title-paddingTop", "12px"),
+  titlePaddingBottom: VF("vertical-title-paddingBottom", "4px"),
+  titleFontSize: VF("vertical-title-font-size", "11px"),
+  titleLineHeight: VF("vertical-title-line-height", "18px"),
+  accentStripeWidth: VF("vertical-item-accentStripe-width", "2px"),
+  accentStripeColor: VF("vertical-item-accentStripe-color", "#64ABFF")
+};
+var STEPPER_VERTICAL_COLORS = {
+  itemBg: {
+    default: VF("vertical-item-bg-default", "#FFFFFF"),
+    hover: VF("vertical-item-bg-hover", "#F6F6F6"),
+    selected: VF("vertical-item-bg-selected", "#EFF6FF")
+  },
+  titleText: VF("vertical-title-text", "#004290"),
+  textDefault: STEPPER_COLORS.text.default,
+  textCompleted: STEPPER_COLORS.text.completed,
+  sequenceBorderActive: STEPPER_COLORS.sequenceBorder.active,
+  sequenceBgActive: STEPPER_COLORS.sequenceBg.active,
+  sequenceTextActive: STEPPER_COLORS.sequenceText.active,
+  sequenceTextDefault: STEPPER_COLORS.sequenceText.default,
+  sequenceBorderCompleted: VF("vertical-sequence-border-completed", "#93C4FF"),
+  sequenceBgCompleted: VF("vertical-sequence-bg-completed", "#EFF6FF"),
+  sequenceIconCompleted: VF("vertical-sequence-icon-completed", "#0075FF"),
+  errorBadge: "#FB4444"
+};
+var ERROR_TOOLTIP_MESSAGE = "\uD655\uC778\uC774 \uD544\uC694\uD55C \uD56D\uBAA9\uC774 \uC788\uC2B5\uB2C8\uB2E4.";
 function getItemValue(item, index) {
   return item.value ?? String(index + 1);
 }
-function SStepper({
+function groupAdjacentItems(items) {
+  return items.reduce(
+    (groups, item, index) => {
+      const currentGroup = item.group;
+      const previous = groups[groups.length - 1];
+      if (currentGroup && previous?.group === currentGroup) {
+        previous.items.push(item);
+        return groups;
+      }
+      groups.push({ group: currentGroup, startIndex: index, items: [item] });
+      return groups;
+    },
+    []
+  );
+}
+var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
   items,
   value,
   size = "sm",
+  vertical = false,
+  clickable,
+  onValueChange,
   ariaLabel = "\uC9C4\uD589 \uB2E8\uACC4",
   className,
   style
-}) {
+}, ref) {
   const config = STEPPER_SIZE_CONFIG[size];
+  const isClickable = clickable ?? vertical;
+  const [hoveredIndex, setHoveredIndex] = react.useState(null);
+  const [tooltipHoverValue, setTooltipHoverValue] = react.useState(null);
+  const [customTooltipOpen, setCustomTooltipOpen] = react.useState(false);
+  const [verticalAccentStripeStyle, setVerticalAccentStripeStyle] = react.useState({
+    height: 0,
+    opacity: 0,
+    transform: "translateY(0px)"
+  });
+  const verticalItemRefs = react.useRef([]);
   const activeIndex = Math.max(
     0,
     items.findIndex((item, index) => getItemValue(item, index) === value)
   );
-  const getState = (index) => {
-    if (index < activeIndex) return "completed";
+  const lastCompletedIndex = items.reduce(
+    (lastIndex, item, index) => item.completed === true ? index : lastIndex,
+    -1
+  );
+  const resolvedClickableIndex = lastCompletedIndex + 1;
+  const [visitedMaxIndex, setVisitedMaxIndex] = react.useState(activeIndex);
+  const firstErrorIndex = items.findIndex((item) => item.error === true);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      showItemTooltip: () => setCustomTooltipOpen(true),
+      hideItemTooltip: () => setCustomTooltipOpen(false)
+    }),
+    []
+  );
+  react.useLayoutEffect(() => {
+    setVisitedMaxIndex((current) => Math.max(current, activeIndex));
+  }, [activeIndex]);
+  react.useLayoutEffect(() => {
+    setCustomTooltipOpen(false);
+  }, [activeIndex]);
+  react.useLayoutEffect(() => {
+    if (!vertical) return;
+    const activeItem = verticalItemRefs.current[activeIndex];
+    if (!activeItem) {
+      setVerticalAccentStripeStyle((current) => ({ ...current, opacity: 0 }));
+      return;
+    }
+    setVerticalAccentStripeStyle({
+      height: activeItem.offsetHeight,
+      opacity: 1,
+      transform: `translateY(${activeItem.offsetTop}px)`
+    });
+  }, [activeIndex, vertical, items]);
+  const getState = (item, index) => {
     if (index === activeIndex) return "active";
+    if (item.completed != null) return item.completed ? "completed" : "default";
     return "default";
   };
+  const emitValueChange = (item, index) => {
+    onValueChange?.(getItemValue(item, index), item, index);
+  };
+  const isWithinClickableIndex = (index) => index <= resolvedClickableIndex;
+  const renderStepContent = (item, index, options = {}) => {
+    const { isVertical = false, roleListItem = true, hovered = false } = options;
+    const state2 = getState(item, index);
+    const isHorizontalCompleted = !isVertical && state2 === "completed";
+    const isVerticalCompleted = isVertical && state2 === "completed";
+    const isVerticalLastActive = isVertical && state2 === "default" && index === visitedMaxIndex;
+    const showsCheckIcon = state2 === "completed";
+    const itemColor = (() => {
+      if (isHorizontalCompleted) return STEPPER_HORIZONTAL_COMPLETED_COLORS.text;
+      if (!isVertical) return STEPPER_COLORS.text[state2];
+      if (state2 === "active") return STEPPER_COLORS.text.active;
+      if (isVerticalCompleted) return STEPPER_VERTICAL_COLORS.textCompleted;
+      return STEPPER_VERTICAL_COLORS.textDefault;
+    })();
+    const sequenceBorderColor = (() => {
+      if (isVerticalCompleted) {
+        return STEPPER_VERTICAL_COLORS.sequenceBorderCompleted;
+      }
+      if (isVertical && (state2 === "active" || isVerticalLastActive)) {
+        return STEPPER_VERTICAL_COLORS.sequenceBorderActive;
+      }
+      if (isHorizontalCompleted) return STEPPER_HORIZONTAL_COMPLETED_COLORS.sequenceBorder;
+      return STEPPER_COLORS.sequenceBorder[state2];
+    })();
+    const sequenceBg = (() => {
+      if (isVerticalCompleted) {
+        return STEPPER_VERTICAL_COLORS.sequenceBgCompleted;
+      }
+      if (isVertical && (state2 === "active" || isVerticalLastActive)) {
+        return STEPPER_VERTICAL_COLORS.sequenceBgActive;
+      }
+      if (isHorizontalCompleted) return STEPPER_HORIZONTAL_COMPLETED_COLORS.sequenceBg;
+      return STEPPER_COLORS.sequenceBg[state2];
+    })();
+    const sequenceColor = (() => {
+      if (isVerticalCompleted) {
+        return STEPPER_VERTICAL_COLORS.sequenceIconCompleted;
+      }
+      if (isVertical && (state2 === "active" || isVerticalLastActive)) {
+        return STEPPER_VERTICAL_COLORS.sequenceTextActive;
+      }
+      if (isVertical) return STEPPER_VERTICAL_COLORS.sequenceTextDefault;
+      if (isHorizontalCompleted) return STEPPER_HORIZONTAL_COMPLETED_COLORS.sequenceIcon;
+      return STEPPER_COLORS.sequenceText[state2];
+    })();
+    const itemStyle = {
+      gap: STEPPER_LAYOUT.itemGap,
+      color: itemColor,
+      fontWeight: state2 === "active" || isVertical && hovered ? config.fontWeightActive : config.fontWeightDefault
+    };
+    const sequenceStyle = {
+      width: config.sequenceSize,
+      height: config.sequenceSize,
+      flexBasis: config.sequenceSize,
+      borderRadius: STEPPER_LAYOUT.sequenceRadius,
+      borderWidth: STEPPER_LAYOUT.sequenceBorderWidth,
+      borderColor: sequenceBorderColor,
+      background: sequenceBg,
+      color: sequenceColor
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        role: roleListItem ? "listitem" : void 0,
+        "aria-current": roleListItem && state2 === "active" ? "step" : void 0,
+        className: "inline-flex items-center whitespace-nowrap",
+        style: itemStyle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "box-border inline-flex shrink-0 items-center justify-center border border-solid font-bold",
+              style: sequenceStyle,
+              children: showsCheckIcon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "check", size: STEPPER_LAYOUT.sequenceIcon, color: "currentColor" }) : index + 1
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+        ]
+      }
+    );
+  };
+  const renderClickableStepContent = (item, index, isVertical = false) => {
+    const isDisabled = !isWithinClickableIndex(index);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        disabled: isDisabled,
+        className: cn(
+          "m-0 inline-flex w-full items-center border-0 bg-transparent p-0 text-left",
+          isDisabled ? "cursor-default" : "cursor-pointer"
+        ),
+        style: { font: "inherit", color: "inherit" },
+        onClick: () => {
+          if (!isDisabled) emitValueChange(item, index);
+        },
+        children: renderStepContent(item, index, { isVertical, roleListItem: false })
+      }
+    );
+  };
+  if (vertical) {
+    const groups = groupAdjacentItems(items);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "list",
+        "aria-label": ariaLabel,
+        className: cn("relative inline-flex flex-col items-start", className),
+        style: {
+          width: STEPPER_VERTICAL_LAYOUT.width,
+          fontSize: config.fontSize,
+          lineHeight: config.lineHeight,
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-stepper-accent-stripe": "true",
+              className: "pointer-events-none absolute left-0 top-0 z-[1]",
+              style: {
+                width: STEPPER_VERTICAL_LAYOUT.accentStripeWidth,
+                background: STEPPER_VERTICAL_LAYOUT.accentStripeColor,
+                transition: "transform 160ms ease, height 160ms ease, opacity 120ms ease",
+                ...verticalAccentStripeStyle
+              }
+            }
+          ),
+          groups.map((group) => {
+            const groupKey = group.group ?? getItemValue(group.items[0], group.startIndex);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex w-full flex-col items-start",
+                children: [
+                  group.group && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "flex w-full items-center overflow-hidden",
+                      style: {
+                        gap: STEPPER_VERTICAL_LAYOUT.itemGap,
+                        paddingLeft: STEPPER_VERTICAL_LAYOUT.itemPaddingX,
+                        paddingRight: STEPPER_VERTICAL_LAYOUT.itemPaddingX,
+                        paddingTop: STEPPER_VERTICAL_LAYOUT.titlePaddingTop,
+                        paddingBottom: STEPPER_VERTICAL_LAYOUT.titlePaddingBottom,
+                        background: STEPPER_VERTICAL_COLORS.itemBg.default,
+                        color: STEPPER_VERTICAL_COLORS.titleText,
+                        fontSize: STEPPER_VERTICAL_LAYOUT.titleFontSize,
+                        lineHeight: STEPPER_VERTICAL_LAYOUT.titleLineHeight,
+                        fontWeight: 700
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: group.group })
+                    }
+                  ),
+                  group.items.map((item, itemIndex) => {
+                    const index = group.startIndex + itemIndex;
+                    const state2 = getState(item, index);
+                    const itemValue = getItemValue(item, index);
+                    const canClickItem = isClickable && isWithinClickableIndex(index);
+                    const isDisabled = !canClickItem;
+                    const isHovered = hoveredIndex === index && canClickItem && state2 !== "active";
+                    const itemContainerStyle = {
+                      gap: STEPPER_VERTICAL_LAYOUT.itemGap,
+                      paddingLeft: STEPPER_VERTICAL_LAYOUT.itemPaddingX,
+                      paddingRight: STEPPER_VERTICAL_LAYOUT.itemPaddingX,
+                      paddingTop: STEPPER_VERTICAL_LAYOUT.itemPaddingY,
+                      paddingBottom: STEPPER_VERTICAL_LAYOUT.itemPaddingY,
+                      background: state2 === "active" ? STEPPER_VERTICAL_COLORS.itemBg.selected : isHovered ? STEPPER_VERTICAL_COLORS.itemBg.hover : STEPPER_VERTICAL_COLORS.itemBg.default
+                    };
+                    const handleMouseEnter = () => {
+                      if (canClickItem) setHoveredIndex(index);
+                    };
+                    const handleMouseLeave = () => {
+                      setHoveredIndex((current) => current === index ? null : current);
+                    };
+                    const stepContent = renderStepContent(item, index, {
+                      isVertical: true,
+                      roleListItem: false,
+                      hovered: isHovered
+                    });
+                    const errorBadge = item.error ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-stepper-error-badge": "true",
+                        className: "inline-flex shrink-0 overflow-hidden rounded-full",
+                        style: {
+                          width: 6,
+                          height: 6,
+                          background: STEPPER_VERTICAL_COLORS.errorBadge
+                        }
+                      }
+                    ) : null;
+                    const isTooltipHovered = tooltipHoverValue === itemValue;
+                    const isCustomTooltipOpen = customTooltipOpen && index === firstErrorIndex;
+                    const showTooltip = item.error === true && (isTooltipHovered || isCustomTooltipOpen);
+                    const handleTooltipMouseEnter = () => setTooltipHoverValue(itemValue);
+                    const handleTooltipMouseLeave = () => {
+                      setTooltipHoverValue((current) => current === itemValue ? null : current);
+                    };
+                    const labelBadge = /* @__PURE__ */ jsxRuntime.jsx(
+                      STooltip2,
+                      {
+                        trigger: "none",
+                        open: showTooltip,
+                        content: ERROR_TOOLTIP_MESSAGE,
+                        tooltipType: "danger",
+                        placement: "right",
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            className: cn(
+                              "relative z-[3] inline-flex items-center",
+                              isClickable && (isDisabled ? "cursor-default" : "cursor-pointer")
+                            ),
+                            style: { gap: STEPPER_VERTICAL_LAYOUT.itemGap },
+                            onMouseEnter: handleTooltipMouseEnter,
+                            onMouseLeave: handleTooltipMouseLeave,
+                            onClick: isClickable ? () => {
+                              if (!isDisabled) emitValueChange(item, index);
+                            } : void 0,
+                            children: [
+                              stepContent,
+                              errorBadge
+                            ]
+                          }
+                        )
+                      }
+                    );
+                    if (isClickable) {
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          ref: (node) => {
+                            verticalItemRefs.current[index] = node;
+                          },
+                          role: "listitem",
+                          "aria-current": state2 === "active" ? "step" : void 0,
+                          className: cn(
+                            "relative flex w-full items-center overflow-hidden",
+                            isDisabled ? "cursor-default" : "cursor-pointer"
+                          ),
+                          onMouseEnter: handleMouseEnter,
+                          onMouseLeave: handleMouseLeave,
+                          style: itemContainerStyle,
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                type: "button",
+                                disabled: isDisabled,
+                                "aria-label": item.label,
+                                className: cn(
+                                  "absolute inset-0 z-[2] m-0 border-0 bg-transparent p-0 text-left outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent)",
+                                  isDisabled ? "cursor-default" : "cursor-pointer"
+                                ),
+                                onClick: () => {
+                                  if (!isDisabled) emitValueChange(item, index);
+                                }
+                              }
+                            ),
+                            labelBadge
+                          ]
+                        },
+                        itemValue
+                      );
+                    }
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        ref: (node) => {
+                          verticalItemRefs.current[index] = node;
+                        },
+                        role: "listitem",
+                        "aria-current": state2 === "active" ? "step" : void 0,
+                        className: cn(
+                          "relative flex w-full items-center overflow-hidden",
+                          isClickable && (canClickItem ? "cursor-pointer" : "cursor-default")
+                        ),
+                        onMouseEnter: handleMouseEnter,
+                        onMouseLeave: handleMouseLeave,
+                        style: itemContainerStyle,
+                        children: labelBadge
+                      },
+                      itemValue
+                    );
+                  })
+                ]
+              },
+              `${groupKey}-${group.startIndex}`
+            );
+          })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -8201,43 +9297,8 @@ function SStepper({
         ...style
       },
       children: items.map((item, index) => {
-        const state2 = getState(index);
-        const itemStyle = {
-          gap: STEPPER_LAYOUT.itemGap,
-          color: STEPPER_COLORS.text[state2],
-          fontWeight: state2 === "active" ? config.fontWeightActive : config.fontWeightDefault
-        };
-        const sequenceStyle = {
-          width: config.sequenceSize,
-          height: config.sequenceSize,
-          flexBasis: config.sequenceSize,
-          borderRadius: STEPPER_LAYOUT.sequenceRadius,
-          borderWidth: STEPPER_LAYOUT.sequenceBorderWidth,
-          borderColor: STEPPER_COLORS.sequenceBorder[state2],
-          background: STEPPER_COLORS.sequenceBg[state2],
-          color: state2 === "completed" ? STEPPER_COLORS.text.completed : STEPPER_COLORS.sequenceText[state2]
-        };
-        const content = /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            role: "listitem",
-            "aria-current": state2 === "active" ? "step" : void 0,
-            className: "inline-flex items-center whitespace-nowrap",
-            style: itemStyle,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "aria-hidden": true,
-                  className: "box-border inline-flex shrink-0 items-center justify-center border border-solid font-bold",
-                  style: sequenceStyle,
-                  children: state2 === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "check", size: STEPPER_LAYOUT.sequenceIcon, color: "currentColor" }) : index + 1
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
-            ]
-          }
-        );
+        const state2 = getState(item, index);
+        const content = isClickable ? /* @__PURE__ */ jsxRuntime.jsx("span", { role: "listitem", "aria-current": state2 === "active" ? "step" : void 0, children: renderClickableStepContent(item, index) }) : renderStepContent(item, index);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -8276,7 +9337,7 @@ function SStepper({
       })
     }
   );
-}
+});
 function runRules(value, rules) {
   if (!rules || rules.length === 0) return "";
   for (const rule of rules) {
@@ -8594,7 +9655,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   }, [value]);
   const selectedRef = react.useRef(selected);
   selectedRef.current = selected;
-  const emit2 = (next) => {
+  const emit3 = (next) => {
     if (!onValueChange) return;
     const mapped = next.map(
       (v) => emitValue ? rawByValue.get(v) ?? v : optionByValue.get(v) ?? { value: v, label: v }
@@ -8698,14 +9759,14 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const handleSelect = (nextValue) => {
     if (multi) {
       const next = selected.includes(nextValue) ? selected.filter((v) => v !== nextValue) : [...selected, nextValue];
-      emit2(next);
+      emit3(next);
       return;
     }
-    emit2([nextValue]);
+    emit3([nextValue]);
     commitOpen(false, [nextValue]);
   };
   const handleSelectAll = () => {
-    emit2(allSelected ? [] : allValues);
+    emit3(allSelected ? [] : allValues);
   };
   const handleToggleGroup = (leafValues) => {
     if (leafValues.length === 0) return;
@@ -8713,9 +9774,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     const allSelectedInGroup = leafValues.every((v) => selectedSet.has(v));
     if (allSelectedInGroup) {
       const remove = new Set(leafValues);
-      emit2(selected.filter((v) => !remove.has(v)));
+      emit3(selected.filter((v) => !remove.has(v)));
     } else {
-      emit2([...selected, ...leafValues.filter((v) => !selectedSet.has(v))]);
+      emit3([...selected, ...leafValues.filter((v) => !selectedSet.has(v))]);
     }
   };
   react.useEffect(() => {
@@ -9792,6 +10853,9 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, se
     }
   );
 });
+
+// src/lib/autofill.ts
+var AUTOFILL_RESET_CLASS = "autofill:[-webkit-text-fill-color:currentColor] autofill:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] autofill:[transition:background-color_5000s_ease-in-out_0s] [&:-webkit-autofill]:[-webkit-text-fill-color:currentColor] [&:-webkit-autofill]:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] [&:-webkit-autofill]:[transition:background-color_5000s_ease-in-out_0s]";
 var FONT = {
   sm: { fontSize: 12, lineHeight: 20, paddingX: "var(--cmp-textinput-sm-paddingX)" },
   md: { fontSize: 14, lineHeight: 24, paddingX: "var(--cmp-textinput-md-paddingX)" }
@@ -9906,6 +10970,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
                 },
                 className: cn(
                   "h-full min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed",
+                  AUTOFILL_RESET_CLASS,
                   inputClass
                 ),
                 style: {
@@ -9944,7 +11009,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
     }
   );
 });
-var PAD = { fontSize: 12, paddingX: 12, paddingY: 4 };
+var PAD2 = { fontSize: 12, paddingX: 12, paddingY: 4 };
 var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
   value,
   onValueChange,
@@ -9976,7 +11041,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
   style,
   ...rest
 }, ref) {
-  const p = PAD;
+  const p = PAD2;
   const [ruleError, setRuleError] = react.useState("");
   useFormField({
     name: rest.name,
@@ -10033,6 +11098,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
           },
           className: cn(
             "w-full resize-y border-0 bg-transparent outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed",
+            AUTOFILL_RESET_CLASS,
             textareaClass
           ),
           style: {
@@ -10049,7 +11115,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
     }
   );
 });
-var PAD2 = {
+var PAD3 = {
   sm: { fontSize: 12, lineHeight: 20, stepper: 20, icon: 12 },
   md: { fontSize: 14, lineHeight: 24, stepper: 24, icon: 14 }
 };
@@ -10141,7 +11207,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
   className,
   style
 }, ref) {
-  const p = PAD2[size];
+  const p = PAD3[size];
   const padX = `var(--cmp-numberInput-${size}-paddingX)`;
   const decimalLimit = getDecimalLimit(useDecimal, maxDecimalLength);
   const numValue = applyDecimalLimit(toNumber(value), decimalLimit);
@@ -10185,7 +11251,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
     target.value = display;
     restoreCaret(display, Math.min(logicalCaret, display.replace(/,/g, "").length));
   };
-  const emit2 = (n, logicalCaret) => {
+  const emit3 = (n, logicalCaret) => {
     const next = applyDecimalLimit(n, decimalLimit);
     const nextDisplay = formatWithCommas(next);
     setDisplayWithCaret(nextDisplay, logicalCaret);
@@ -10197,13 +11263,13 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
     if (incDisabled) return;
     const cur = numValue ?? (min === Number.NEGATIVE_INFINITY ? 0 : min);
     const next = applyDecimalLimit(Math.min(cur + step, max), decimalLimit);
-    if (next !== cur) emit2(next);
+    if (next !== cur) emit3(next);
   };
   const decrement = () => {
     if (decDisabled) return;
     const cur = numValue ?? (min === Number.NEGATIVE_INFINITY ? 0 : min);
     const next = applyDecimalLimit(Math.max(cur - step, min), decimalLimit);
-    if (next !== cur) emit2(next);
+    if (next !== cur) emit3(next);
   };
   const handleInput = (event) => {
     const target = event.currentTarget;
@@ -10346,7 +11412,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
                   const cleaned = display.replace(/,/g, "");
                   const n = toNumber(cleaned);
                   const clamped = n === null ? null : Math.min(Math.max(n, min), max);
-                  if (clamped !== n) emit2(clamped);
+                  if (clamped !== n) emit3(clamped);
                   else setDisplay(n === null ? "" : formatInputWithCommas(cleaned));
                   if (rules && rules.length > 0) setRuleError(runRules(clamped, rules));
                   onBlur?.(e);
@@ -10355,6 +11421,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
                   // h-full 대신 라인박스 높이 그대로 두어 prefix/suffix 와 동일하게 flex 로 수직 센터링
                   // (h-full 이면 input 내부 텍스트 센터링을 브라우저가 수행해 1px 어긋날 수 있음)
                   "min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--cmp-numberInput-text-placeholder)] disabled:cursor-not-allowed",
+                  AUTOFILL_RESET_CLASS,
                   inputClass
                 ),
                 style: {
@@ -10955,7 +12022,7 @@ function RangeCalendar({
   const inRange = (d) => !!(rStart && rEnd && d > rStart && d < rEnd);
   const RANGE_BG = "var(--cmp-datepicker-calendar-range-bg)";
   const pad = (v) => String(Number(v) || 0).padStart(2, "0");
-  const emit2 = (dateStart, dateEnd, time) => {
+  const emit3 = (dateStart, dateEnd, time) => {
     const t = time ?? { sH, sM, eH, eM };
     const range = useTimePicker ? [`${dateStart} ${pad(t.sH)}:${pad(t.sM)}`, `${dateEnd} ${pad(t.eH)}:${pad(t.eM)}`] : [dateStart, dateEnd];
     lastEmitted.current = JSON.stringify(range);
@@ -10978,7 +12045,7 @@ function RangeCalendar({
     }
     setEnd(d);
     onPendingStartChange?.(null);
-    emit2(start, d, useTimePicker ? { sH, sM, eH: "23", eM: "59" } : void 0);
+    emit3(start, d, useTimePicker ? { sH, sM, eH: "23", eM: "59" } : void 0);
   };
   const changeTime = (which, part, raw) => {
     const digits = raw.replace(/\D/g, "").slice(0, 2);
@@ -10991,7 +12058,7 @@ function RangeCalendar({
     setSM(nextTime.sM);
     setEH(nextTime.eH);
     setEM(nextTime.eM);
-    if (start && end) emit2(start, end, nextTime);
+    if (start && end) emit3(start, end, nextTime);
   };
   const blurTime = (which, part) => {
     if (which === "start") {
@@ -11718,7 +12785,7 @@ function SKeyValueTable({
   style
 }) {
   if (fields.length === 0) return null;
-  const emit2 = (name, value) => onChange?.({
+  const emit3 = (name, value) => onChange?.({
     name,
     value,
     values: { ...values, [name]: value }
@@ -11729,7 +12796,7 @@ function SKeyValueTable({
     if (f.render) return f.render;
     const opt = { ...f.options ?? {} };
     if (Object.prototype.hasOwnProperty.call(values, f.name)) opt.value = values[f.name];
-    const up = (v) => emit2(f.name, v);
+    const up = (v) => emit3(f.name, v);
     switch (f.type) {
       case "input":
         return /* @__PURE__ */ jsxRuntime.jsx(SInput, { width: "100%", ...opt, onValueChange: up });
@@ -11818,7 +12885,7 @@ function SKeyValueTable({
                   children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full items-center justify-between gap-[var(--cmp-table-header-gap)]", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-[8px]", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-bold leading-[20px] text-[color:var(--sys-color-fg-primary)]", children: f.label }),
-                      f.required && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "star", size: 12, color: "var(--sys-color-fg-accent)" })
+                      f.required && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "asterisk", size: 12, color: "var(--sys-color-fg-accent)" })
                     ] }),
                     f.helpText && f.helpText.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                       STooltip2,
@@ -12583,6 +13650,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                       size: 1,
                       className: cn(
                         "s-chip-input__input col-start-1 row-start-1 w-full border-0 bg-transparent p-0 font-normal text-(--cmp-chip-content-focus) outline-none placeholder:text-(--cmp-chipInput-text-placeholder) disabled:cursor-not-allowed",
+                        AUTOFILL_RESET_CLASS,
                         size === "md" ? "text-14 leading-sd-24" : "text-12 leading-sd-20"
                       ),
                       style: {
@@ -12875,6 +13943,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
                   },
                   className: cn(
                     "h-full min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--cmp-textinput-text-placeholder)] disabled:cursor-not-allowed",
+                    AUTOFILL_RESET_CLASS,
                     inputClass
                   ),
                   style: {
@@ -13861,6 +14930,7 @@ exports.SLoadingContainer = SLoadingContainer;
 exports.SLoadingModal = SLoadingModal;
 exports.SLoadingViewport = SLoadingViewport;
 exports.SModal = SModal;
+exports.SModalOutlet = SModalOutlet;
 exports.SNumberInput = SNumberInput;
 exports.SPage = SPage;
 exports.SPagination = SPagination;
@@ -13870,9 +14940,11 @@ exports.SPortal = SPortal;
 exports.SRadio = SRadio;
 exports.SRadioButton = SRadioButton;
 exports.SRadioGroup = SRadioGroup;
+exports.SSPLITTER_UNITS = SSPLITTER_UNITS;
 exports.SScrollArea = SScrollArea;
 exports.SSectionHeaderCard = SSectionHeaderCard2;
 exports.SSelect = SSelect2;
+exports.SSplitter = SSplitter2;
 exports.SStepper = SStepper;
 exports.SSwitch = SSwitch;
 exports.STEPPER_SIZES = STEPPER_SIZES;