@sellmate/design-system 1.17.0 → 1.18.0

package/hydrate/index.js

@@ -5713,6 +5713,11 @@ const Bell = (props) => {
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("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" }), hAsync("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" })));
 };
 
+const Bill = (props) => {
+    const { size = 24, ...rest } = props;
+    return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.2891 8.7998C16.4208 8.40733 16.8457 8.19563 17.2383 8.32715C17.6309 8.45871 17.8423 8.88369 17.7109 9.27637L16.8818 11.75H18C18.4142 11.75 18.75 12.0858 18.75 12.5C18.75 12.9142 18.4142 13.25 18 13.25H16.3799L15.6035 15.5664C15.2492 16.6239 13.7487 16.6085 13.416 15.5439L12.6992 13.25H11.3008L10.584 15.5439C10.2513 16.6085 8.7508 16.6239 8.39648 15.5664L7.62012 13.25H6C5.58579 13.25 5.25 12.9142 5.25 12.5C5.25 12.0858 5.58579 11.75 6 11.75H7.11816L6.28906 9.27637C6.15765 8.88369 6.36905 8.45871 6.76172 8.32715C7.15433 8.19563 7.57919 8.40733 7.71094 8.7998L8.69922 11.75H10.1982L10.9023 9.49805L10.9375 9.40039C11.3201 8.45471 12.6799 8.45472 13.0625 9.40039L13.0977 9.49805L13.8018 11.75H15.3008L16.2891 8.7998ZM9.47461 14.0645L9.72949 13.25H9.20215L9.47461 14.0645ZM14.5244 14.0645L14.7979 13.25H14.2705L14.5244 14.0645ZM11.7695 11.75H12.2305L12 11.0137L11.7695 11.75Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.5 4.25C20.7426 4.25 21.75 5.25736 21.75 6.5V17.5C21.75 18.7426 20.7426 19.75 19.5 19.75H4.5C3.25736 19.75 2.25 18.7426 2.25 17.5L2.25 6.5C2.25 5.25736 3.25736 4.25 4.5 4.25H19.5ZM4.5 5.75C4.08579 5.75 3.75 6.08579 3.75 6.5V17.5C3.75 17.9142 4.08579 18.25 4.5 18.25H19.5C19.9142 18.25 20.25 17.9142 20.25 17.5V6.5C20.25 6.08579 19.9142 5.75 19.5 5.75H4.5Z", fill: "currentColor" })));
+};
+
 const Board = (props) => {
     const { size = 24, ...rest } = props;
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M15 14.25C15.4142 14.25 15.75 14.5858 15.75 15C15.75 15.4142 15.4142 15.75 15 15.75H9C8.58579 15.75 8.25 15.4142 8.25 15C8.25 14.5858 8.58579 14.25 9 14.25H15Z", fill: "currentColor" }), hAsync("path", { d: "M15 10.25C15.4142 10.25 15.75 10.5858 15.75 11C15.75 11.4142 15.4142 11.75 15 11.75H9C8.58579 11.75 8.25 11.4142 8.25 11C8.25 10.5858 8.58579 10.25 9 10.25H15Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.75 2.0498C14.5699 2.0498 15.2733 2.54394 15.582 3.25H18.2002C19.1665 3.25021 19.9502 4.03363 19.9502 5V20.2002C19.9501 21.1665 19.1664 21.95 18.2002 21.9502H5.7998C4.83346 21.9501 4.04991 21.1665 4.0498 20.2002V5C4.0498 4.03356 4.83339 3.2501 5.7998 3.25H8.41797C8.72672 2.54394 9.43009 2.0498 10.25 2.0498H13.75ZM5.7998 4.75C5.66182 4.7501 5.5498 4.86199 5.5498 5V20.2002C5.54991 20.3381 5.66188 20.4501 5.7998 20.4502H18.2002C18.338 20.45 18.4501 20.338 18.4502 20.2002V5C18.4502 4.86206 18.3381 4.75021 18.2002 4.75H15.6211C15.3371 5.50881 14.6079 6.0498 13.75 6.0498H10.25C9.39207 6.0498 8.66292 5.50881 8.37891 4.75H5.7998ZM10.25 3.5498C9.97392 3.5498 9.7501 3.77375 9.75 4.0498C9.75 4.32595 9.97386 4.5498 10.25 4.5498H13.75C14.0261 4.5498 14.25 4.32595 14.25 4.0498C14.2499 3.77375 14.0261 3.5498 13.75 3.5498H10.25Z", fill: "currentColor" })));
@@ -5833,6 +5838,11 @@ const Copy = (props) => {
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 7.54395C20.9664 7.54404 21.7499 8.32759 21.75 9.29395V20C21.7499 20.9664 20.9664 21.7499 20 21.75H9.29395C8.32756 21.7499 7.54404 20.9664 7.54395 20V9.29395C7.54404 8.32757 8.32757 7.54401 9.29395 7.54395H20ZM9.29395 9.04395C9.15599 9.04401 9.04404 9.156 9.04395 9.29395V20C9.04404 20.138 9.15599 20.2499 9.29395 20.25H20C20.1379 20.2499 20.2499 20.1379 20.25 20V9.29395C20.2499 9.15602 20.1379 9.04404 20 9.04395H9.29395Z", fill: "currentColor" }), hAsync("path", { d: "M14.7061 2.25C15.6725 2.25009 16.4561 3.03356 16.4561 4V6C16.4561 6.41416 16.1202 6.74991 15.7061 6.75C15.2918 6.75 14.9561 6.41421 14.9561 6V4C14.9561 3.86199 14.844 3.75009 14.7061 3.75H4C3.86193 3.75 3.75 3.86193 3.75 4V14.7061C3.75009 14.844 3.86199 14.9561 4 14.9561H6C6.41421 14.9561 6.75 15.2918 6.75 15.7061C6.74991 16.1202 6.41416 16.4561 6 16.4561H4C3.03356 16.4561 2.25009 15.6725 2.25 14.7061V4C2.25 3.0335 3.0335 2.25 4 2.25H14.7061Z", fill: "currentColor" })));
 };
 
+const Coupon = (props) => {
+    const { size = 24, ...rest } = props;
+    return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M15 13.5C15.8284 13.5 16.5 14.1716 16.5 15C16.5 15.8284 15.8284 16.5 15 16.5C14.1716 16.5 13.5 15.8284 13.5 15C13.5 14.1716 14.1716 13.5 15 13.5Z", fill: "currentColor" }), hAsync("path", { d: "M14.9092 7.96973C15.2021 7.67705 15.6769 7.67691 15.9697 7.96973C16.2625 8.26255 16.2624 8.73738 15.9697 9.03027L9.03027 15.9697C8.73739 16.2625 8.26261 16.2625 7.96973 15.9697C7.67685 15.6769 7.67689 15.2021 7.96973 14.9092L14.9092 7.96973Z", fill: "currentColor" }), hAsync("path", { d: "M9 7.5C9.82843 7.5 10.5 8.17157 10.5 9C10.5 9.82843 9.82843 10.5 9 10.5C8.17157 10.5 7.5 9.82843 7.5 9C7.5 8.17157 8.17157 7.5 9 7.5Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.5 4.25C20.7426 4.25 21.75 5.25736 21.75 6.5V9C21.75 9.5042 21.5307 9.91547 21.2715 10.2178C21.0155 10.5162 20.6946 10.7418 20.4014 10.9023C20.0117 11.1156 19.75 11.5278 19.75 12C19.75 12.4722 20.0117 12.8844 20.4014 13.0977C20.6946 13.2582 21.0155 13.4838 21.2715 13.7822C21.5307 14.0845 21.75 14.4958 21.75 15V17.5C21.75 18.7426 20.7426 19.75 19.5 19.75H4.5C3.25736 19.75 2.25 18.7426 2.25 17.5V15C2.25 14.4958 2.46932 14.0845 2.72852 13.7822C2.98448 13.4838 3.30543 13.2582 3.59863 13.0977C3.98828 12.8844 4.25 12.4722 4.25 12C4.25 11.5278 3.98828 11.1156 3.59863 10.9023C3.30543 10.7418 2.98448 10.5162 2.72852 10.2178C2.46932 9.91547 2.25 9.5042 2.25 9L2.25 6.5C2.25 5.25736 3.25736 4.25 4.5 4.25H19.5ZM4.5 5.75C4.08579 5.75 3.75 6.08579 3.75 6.5V9C3.75 9.04794 3.76826 9.12579 3.86719 9.24121C3.96955 9.36057 4.12814 9.48225 4.31934 9.58691C5.17022 10.0528 5.75 10.9581 5.75 12C5.75 13.0419 5.17022 13.9472 4.31934 14.4131C4.12814 14.5178 3.96955 14.6394 3.86719 14.7588C3.76826 14.8742 3.75 14.9521 3.75 15V17.5C3.75 17.9142 4.08579 18.25 4.5 18.25H19.5C19.9142 18.25 20.25 17.9142 20.25 17.5V15C20.25 14.9521 20.2317 14.8742 20.1328 14.7588C20.0304 14.6394 19.8719 14.5178 19.6807 14.4131C18.8298 13.9472 18.25 13.0419 18.25 12C18.25 10.9581 18.8298 10.0528 19.6807 9.58691C19.8719 9.48225 20.0304 9.36057 20.1328 9.24121C20.2317 9.12579 20.25 9.04794 20.25 9V6.5C20.25 6.08579 19.9142 5.75 19.5 5.75H4.5Z", fill: "currentColor" })));
+};
+
 const Dashboard = (props) => {
     const { size = 24, ...rest } = props;
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M11 13.25C11 13.5261 10.7761 13.75 10.5 13.75L6.5 13.75C6.22386 13.75 6 13.5261 6 13.25L6 7.25C6 6.97386 6.22386 6.75 6.5 6.75L10.5 6.75C10.7761 6.75 11 6.97386 11 7.25L11 13.25Z", fill: "currentColor" }), hAsync("path", { d: "M18 9.25C18 9.52614 17.7761 9.75 17.5 9.75L13.5 9.75C13.2239 9.75 13 9.52614 13 9.25L13 7.25C13 6.97386 13.2239 6.75 13.5 6.75L17.5 6.75C17.7761 6.75 18 6.97386 18 7.25L18 9.25Z", fill: "currentColor" }), hAsync("path", { d: "M18 13.25C18 13.5261 17.7761 13.75 17.5 13.75L13.5 13.75C13.2239 13.75 13 13.5261 13 13.25L13 11.25C13 10.9739 13.2239 10.75 13.5 10.75L17.5 10.75C17.7761 10.75 18 10.9739 18 11.25L18 13.25Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.9502 14.75C21.9502 15.9925 20.9427 16.9998 19.7002 17L12.75 17L12.75 19L15 19C15.4142 19 15.75 19.3358 15.75 19.75C15.75 20.1642 15.4142 20.5 15 20.5L9 20.5C8.58579 20.5 8.25 20.1642 8.25 19.75C8.25 19.3358 8.58579 19 9 19L11.25 19L11.25 17L4.29981 17C3.05725 16.9999 2.04981 15.9926 2.04981 14.75L2.04981 5.75C2.04981 4.50742 3.05725 3.5001 4.29981 3.5L19.7002 3.5C20.9427 3.50021 21.9502 4.50749 21.9502 5.75L21.9502 14.75ZM20.4502 5.75C20.4502 5.33592 20.1142 5.00021 19.7002 5L4.29981 5C3.88568 5.0001 3.54981 5.33585 3.54981 5.75L3.54981 14.75C3.54981 15.1642 3.88568 15.4999 4.29981 15.5L19.7002 15.5C20.1142 15.4998 20.4502 15.1641 20.4502 14.75L20.4502 5.75Z", fill: "currentColor" })));
@@ -5843,6 +5853,16 @@ const DateIcon = (props) => {
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M18 14C18.5522 14.0001 19 14.4478 19 15V18C18.9999 18.5521 18.5521 18.9999 18 19H15C14.4478 19 14.0001 18.5522 14 18V15C14 14.4477 14.4477 14 15 14H18Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17 2.0498C17.4141 2.0499 17.75 2.38565 17.75 2.7998V4.25H20.2002C21.1665 4.25021 21.9502 5.03363 21.9502 6V20.2002C21.95 21.1664 21.1664 21.95 20.2002 21.9502H3.7998C2.83344 21.9502 2.05002 21.1665 2.0498 20.2002V6C2.0498 5.0335 2.83331 4.25 3.7998 4.25H6.25V2.7998C6.25 2.38559 6.58579 2.0498 7 2.0498C7.41413 2.0499 7.75 2.38565 7.75 2.7998V4.25H16.25V2.7998C16.25 2.38559 16.5858 2.0498 17 2.0498ZM3.5498 20.2002C3.55002 20.3381 3.66187 20.4502 3.7998 20.4502H20.2002C20.338 20.45 20.45 20.338 20.4502 20.2002V9H3.5498V20.2002Z", fill: "currentColor" })));
 };
 
+const Delete = (props) => {
+    const { size = 24, ...rest } = props;
+    return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M8.35254 10.7646C8.75858 10.6834 9.15395 10.9466 9.23535 11.3525L10.2354 16.3525C10.3166 16.7586 10.0534 17.1539 9.64746 17.2354C9.24142 17.3166 8.84605 17.0534 8.76465 16.6475L7.76465 11.6475C7.68344 11.2414 7.94658 10.8461 8.35254 10.7646Z", fill: "currentColor" }), hAsync("path", { d: "M12 10.75C12.4142 10.75 12.75 11.0858 12.75 11.5V16.5C12.75 16.9142 12.4142 17.25 12 17.25C11.5858 17.25 11.25 16.9142 11.25 16.5V11.5C11.25 11.0858 11.5858 10.75 12 10.75Z", fill: "currentColor" }), hAsync("path", { d: "M14.7646 11.3525C14.8461 10.9466 15.2414 10.6834 15.6475 10.7646C16.0534 10.8461 16.3166 11.2414 16.2354 11.6475L15.2354 16.6475C15.1539 17.0534 14.7586 17.3166 14.3525 17.2354C13.9466 17.1539 13.6834 16.7586 13.7646 16.3525L14.7646 11.3525Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13 2.0498C13.9664 2.0498 14.7499 2.8334 14.75 3.7998V4.25H20C20.4142 4.25 20.75 4.58579 20.75 5V8C20.75 8.41421 20.4142 8.75 20 8.75H19.6445L17.999 19.6123C17.7952 20.9565 16.6398 21.9502 15.2803 21.9502H8.71973C7.36018 21.9502 6.20481 20.9565 6.00098 19.6123L4.35547 8.75H4C3.58579 8.75 3.25 8.41421 3.25 8V5C3.25 4.58579 3.58579 4.25 4 4.25H8.75V3.7998C8.75011 2.8334 9.53357 2.0498 10.5 2.0498H13ZM7.48438 19.3877C7.57717 19.9985 8.10188 20.4502 8.71973 20.4502H15.2803C15.8981 20.4502 16.4228 19.9985 16.5156 19.3877L18.1279 8.75H5.87207L7.48438 19.3877ZM4.75 7.25H19.25V5.75H4.75V7.25ZM10.5 3.5498C10.362 3.5498 10.2501 3.66182 10.25 3.7998V4.25H13.25V3.7998C13.2499 3.66182 13.138 3.5498 13 3.5498H10.5Z", fill: "currentColor" })));
+};
+
+const Dot = (props) => {
+    const { size = 24, ...rest } = props;
+    return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor" })));
+};
+
 const Download = (props) => {
     const { size = 24, ...rest } = props;
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M21.2002 19.3501C21.6142 19.3503 21.9502 19.686 21.9502 20.1001C21.9502 20.5142 21.6142 20.8499 21.2002 20.8501H2.7998C2.38568 20.85 2.0498 20.5142 2.0498 20.1001C2.0498 19.6859 2.38568 19.3502 2.7998 19.3501H21.2002Z", fill: "currentColor" }), hAsync("path", { d: "M12 3.1499C12.4142 3.1499 12.7499 3.48577 12.75 3.8999V15.0581L17.4639 10.2329C17.7533 9.93678 18.2281 9.93094 18.5244 10.2202C18.8205 10.5096 18.8254 10.9845 18.5361 11.2808L12.5361 17.4243C12.395 17.5686 12.2018 17.6499 12 17.6499C11.7982 17.6499 11.605 17.5686 11.4639 17.4243L5.46387 11.2808C5.17461 10.9845 5.17951 10.5096 5.47559 10.2202C5.77186 9.93094 6.24673 9.93678 6.53613 10.2329L11.25 15.0581V3.8999C11.2501 3.48577 11.5858 3.1499 12 3.1499Z", fill: "currentColor" })));
@@ -5903,6 +5923,11 @@ const Inline = (props) => {
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M11.0801 2.0498C11.4941 2.04995 11.83 2.38577 11.8301 2.7998C11.8301 3.21393 11.4942 3.54966 11.0801 3.5498H3.7998C3.66191 3.54994 3.5499 3.6619 3.5498 3.7998V20.2002C3.55001 20.338 3.66197 20.4501 3.7998 20.4502H20.2002C20.338 20.45 20.45 20.338 20.4502 20.2002V12.9199C20.4503 12.5059 20.7862 12.1701 21.2002 12.1699C21.6142 12.1701 21.9501 12.5059 21.9502 12.9199V20.2002C21.95 21.1664 21.1664 21.95 20.2002 21.9502H3.7998C2.83355 21.9501 2.05001 21.1664 2.0498 20.2002V3.7998C2.0499 2.83347 2.83348 2.04994 3.7998 2.0498H11.0801Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.3252 4.66699C19.5765 4.21659 20.0655 4.07962 20.4551 4.17578C20.858 4.27538 21.248 4.65457 21.2051 5.21094L21.1475 5.79199C20.9808 7.18748 20.5611 8.83543 19.5479 10.2197C18.424 11.755 16.6276 12.8864 13.8779 13.0596V15.8457C13.8779 16.7061 12.8828 17.1403 12.2539 16.6279L12.1328 16.5127L7.59082 11.4375C7.25096 11.0578 7.25096 10.4832 7.59082 10.1035L12.1328 5.0293C12.7449 4.34543 13.8779 4.77847 13.8779 5.69629V8.55957C15.0735 8.59246 17.4617 8.00699 19.3252 4.66699ZM9.00684 10.7715L12.3779 14.5381V12.583C12.3781 12.0114 12.8468 11.5923 13.3662 11.5811C15.9616 11.5247 17.4486 10.5489 18.3379 9.33398C18.787 8.72044 19.0992 8.02407 19.3135 7.31152C17.0812 9.91545 14.4914 10.247 13.166 9.9873C12.6634 9.8888 12.3779 9.44604 12.3779 9.01953V7.00488L9.00684 10.7715Z", fill: "currentColor" })));
 };
 
+const Launcher = (props) => {
+    const { size = 24, ...rest } = props;
+    return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M5 18C5.55228 18 6 18.4477 6 19V21C6 21.5523 5.55228 22 5 22H3C2.44772 22 2 21.5523 2 21V19C2 18.4477 2.44772 18 3 18H5Z", fill: "currentColor" }), hAsync("path", { d: "M13 18C13.5523 18 14 18.4477 14 19V21C14 21.5523 13.5523 22 13 22H11C10.4477 22 10 21.5523 10 21V19C10 18.4477 10.4477 18 11 18H13Z", fill: "currentColor" }), hAsync("path", { d: "M21 18C21.5523 18 22 18.4477 22 19V21C22 21.5523 21.5523 22 21 22H19C18.4477 22 18 21.5523 18 21V19C18 18.4477 18.4477 18 19 18H21Z", fill: "currentColor" }), hAsync("path", { d: "M5 10C5.55228 10 6 10.4477 6 11V13C6 13.5523 5.55228 14 5 14H3C2.44772 14 2 13.5523 2 13V11C2 10.4477 2.44772 10 3 10H5Z", fill: "currentColor" }), hAsync("path", { d: "M13 10C13.5523 10 14 10.4477 14 11V13C14 13.5523 13.5523 14 13 14H11C10.4477 14 10 13.5523 10 13V11C10 10.4477 10.4477 10 11 10H13Z", fill: "currentColor" }), hAsync("path", { d: "M21 10C21.5523 10 22 10.4477 22 11V13C22 13.5523 21.5523 14 21 14H19C18.4477 14 18 13.5523 18 13V11C18 10.4477 18.4477 10 19 10H21Z", fill: "currentColor" }), hAsync("path", { d: "M5 2C5.55228 2 6 2.44772 6 3V5C6 5.55228 5.55228 6 5 6H3C2.44772 6 2 5.55228 2 5V3C2 2.44772 2.44772 2 3 2H5Z", fill: "currentColor" }), hAsync("path", { d: "M13 2C13.5523 2 14 2.44772 14 3V5C14 5.55228 13.5523 6 13 6H11C10.4477 6 10 5.55228 10 5V3C10 2.44772 10.4477 2 11 2H13Z", fill: "currentColor" }), hAsync("path", { d: "M21 2C21.5523 2 22 2.44772 22 3V5C22 5.55228 21.5523 6 21 6H19C18.4477 6 18 5.55228 18 5V3C18 2.44772 18.4477 2 19 2H21Z", fill: "currentColor" })));
+};
+
 const Line = (props) => {
     const { size = 24, ...rest } = props;
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M4.25 13C4.66421 13 5 13.3358 5 13.75V21.25C5 21.6642 4.66421 22 4.25 22H2.75C2.33579 22 2 21.6642 2 21.25V13.75C2 13.3358 2.33579 13 2.75 13H4.25Z", fill: "currentColor" }), hAsync("path", { d: "M12.75 13C13.1642 13 13.5 13.3358 13.5 13.75V21.25C13.5 21.6642 13.1642 22 12.75 22H11.25C10.8358 22 10.5 21.6642 10.5 21.25V13.75C10.5 13.3358 10.8358 13 11.25 13H12.75Z", fill: "currentColor" }), hAsync("path", { d: "M4.25 2C4.66421 2 5 2.33579 5 2.75V10.25C5 10.6642 4.66421 11 4.25 11H2.75C2.33579 11 2 10.6642 2 10.25V2.75C2 2.33579 2.33579 2 2.75 2H4.25Z", fill: "currentColor" }), hAsync("path", { d: "M12.75 2C13.1642 2 13.5 2.33579 13.5 2.75V10.25C13.5 10.6642 13.1642 11 12.75 11H11.25C10.8358 11 10.5 10.6642 10.5 10.25V2.75C10.5 2.33579 10.8358 2 11.25 2H12.75Z", fill: "currentColor" }), hAsync("path", { d: "M21.25 2C21.6642 2 22 2.33579 22 2.75V10.25C22 10.6642 21.6642 11 21.25 11H19.75C19.3358 11 19 10.6642 19 10.25V2.75C19 2.33579 19.3358 2 19.75 2H21.25Z", fill: "currentColor" })));
@@ -5923,6 +5948,11 @@ const Minus = (props) => {
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M20 11.25C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H20Z", fill: "currentColor" })));
 };
 
+const Monitor = (props) => {
+    const { size = 24, ...rest } = props;
+    return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.9502 14.75C21.9502 15.9925 20.9426 16.9998 19.7002 17L12.75 17L12.75 19H15C15.4142 19 15.75 19.3358 15.75 19.75C15.75 20.1642 15.4142 20.5 15 20.5L8.99997 20.5C8.58576 20.5 8.24997 20.1642 8.24997 19.75C8.24997 19.3358 8.58576 19 8.99997 19H11.25L11.25 17H4.29977C3.05722 16.9999 2.04977 15.9926 2.04977 14.75L2.04977 5.75C2.04978 4.50742 3.05722 3.5001 4.29977 3.5L19.7002 3.5C20.9426 3.50021 21.9502 4.50749 21.9502 5.75L21.9502 14.75ZM20.4502 5.75C20.4502 5.33592 20.1142 5.00021 19.7002 5L4.29977 5C3.88565 5.0001 3.54978 5.33585 3.54977 5.75L3.54977 14.75C3.54977 15.1642 3.88565 15.4999 4.29977 15.5L19.7002 15.5C20.1142 15.4998 20.4502 15.1641 20.4502 14.75L20.4502 5.75Z", fill: "currentColor" })));
+};
+
 const New = (props) => {
     const { size = 24, ...rest } = props;
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M20 2C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4C2 2.89543 2.89543 2 4 2H20ZM7.5 6.75V17.25H9.99902V11.082H10.0713L14.374 17.25H16.5V6.75H14.0059V12.9072H13.918L9.66211 6.75H7.5Z", fill: "currentColor" })));
@@ -6003,11 +6033,26 @@ const Setting = (props) => {
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M13.1858 1C13.5092 1 13.7985 1.2013 13.9074 1.5027L14.6839 3.65537C14.9622 3.72467 15.2009 3.79397 15.4033 3.86657C15.6244 3.94577 15.9093 4.06567 16.2613 4.22956L18.0696 3.27257C18.2172 3.19437 18.3862 3.16614 18.5512 3.19213C18.7162 3.21811 18.8683 3.2969 18.9848 3.41667L20.5753 5.06115C20.7865 5.28005 20.8459 5.60015 20.7271 5.87954L19.8791 7.86722C20.0198 8.12572 20.132 8.34681 20.2178 8.53161C20.3102 8.73291 20.4246 9.01011 20.561 9.3676L22.5377 10.2146C22.8346 10.3411 23.0183 10.6381 22.9985 10.956L22.8533 13.2385C22.8434 13.3867 22.7902 13.5288 22.7002 13.6471C22.6103 13.7654 22.4876 13.8547 22.3474 13.9039L20.4752 14.5694C20.4213 14.8279 20.3652 15.049 20.3058 15.236C20.21 15.5248 20.1006 15.8089 19.978 16.0874L20.9185 18.1664C20.9849 18.3125 21.0028 18.476 20.9695 18.6329C20.9363 18.7899 20.8536 18.9321 20.7337 19.0387L18.9452 20.6359C18.8274 20.7406 18.6804 20.8069 18.5239 20.8257C18.3674 20.8446 18.2089 20.8152 18.0696 20.7415L16.2261 19.7647C15.9377 19.9174 15.6401 20.0522 15.3351 20.1684L14.5299 20.4698L13.815 22.4497C13.762 22.5947 13.6664 22.7203 13.5408 22.81C13.4151 22.8998 13.2653 22.9494 13.111 22.9524L11.0211 22.9997C10.8626 23.0039 10.7068 22.9588 10.575 22.8708C10.4432 22.7827 10.342 22.656 10.2852 22.508L9.44261 20.2784C9.15513 20.1801 8.8705 20.0737 8.58904 19.9594C8.35884 19.8597 8.13211 19.7522 7.90927 19.6371L5.81934 20.5303C5.68163 20.589 5.52981 20.6065 5.38237 20.5805C5.23492 20.5545 5.09821 20.4862 4.98887 20.384L3.44232 18.9331C3.32718 18.8255 3.24876 18.6845 3.21817 18.5299C3.18757 18.3754 3.20634 18.2151 3.27183 18.0718L4.17049 16.1138C4.05098 15.8819 3.94017 15.6456 3.83831 15.4054C3.7194 15.1114 3.60936 14.8139 3.50832 14.5133L1.53939 13.9138C1.37934 13.8655 1.23975 13.7656 1.14229 13.6298C1.04483 13.4939 0.99495 13.3297 1.0004 13.1626L1.0774 11.0495C1.08288 10.9116 1.12595 10.7779 1.20195 10.6627C1.27795 10.5475 1.38398 10.4553 1.50859 10.3961L3.57431 9.4039C3.67001 9.053 3.75361 8.78021 3.82731 8.58111C3.93108 8.31518 4.04632 8.05387 4.17269 7.79792L3.27733 5.90594C3.20938 5.76227 3.18874 5.60074 3.21839 5.44459C3.24804 5.28845 3.32644 5.14573 3.44232 5.03695L4.98667 3.57837C5.09493 3.47626 5.23038 3.40761 5.37674 3.38068C5.5231 3.35375 5.67412 3.36969 5.81164 3.42657L7.89937 4.28896C8.13036 4.13496 8.33935 4.01067 8.52854 3.91057C8.75404 3.79067 9.05543 3.66527 9.43491 3.52997L10.1609 1.5049C10.2146 1.35669 10.3127 1.22867 10.4418 1.1383C10.571 1.04794 10.7248 0.999641 10.8825 1H13.1858ZM12.0264 8.72081C10.1928 8.72081 8.70674 10.1893 8.70674 12.0021C8.70674 13.8148 10.1928 15.2844 12.0264 15.2844C13.859 15.2844 15.345 13.8148 15.345 12.0021C15.345 10.1893 13.8601 8.72081 12.0264 8.72081Z", fill: "currentColor" })));
 };
 
+const Shield = (props) => {
+    const { size = 24, ...rest } = props;
+    return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("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" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "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" })));
+};
+
+const Sidebar = (props) => {
+    const { size = 24, ...rest } = props;
+    return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { "fill-rule": "evenodd", "clip-rule": "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" })));
+};
+
 const Star = (props) => {
     const { size = 24, ...rest } = props;
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M12.2607 1C12.3943 1 12.5045 1.10494 12.5107 1.23828L12.9258 10.3945L21.0645 6.17676C21.1829 6.11552 21.3286 6.1581 21.3955 6.27344L21.6572 6.72656C21.7236 6.84217 21.6875 6.98956 21.5752 7.06152L13.8535 11.999L21.5752 16.9385C21.6874 17.0104 21.7236 17.1578 21.6572 17.2734L21.3955 17.7266C21.3286 17.8419 21.1829 17.8844 21.0645 17.8232L12.9268 13.6055L12.5107 22.7617C12.5045 22.8951 12.3943 23 12.2607 23H11.7393C11.6057 23 11.4955 22.8951 11.4893 22.7617L11.0723 13.6055L2.93555 17.8232C2.81708 17.8844 2.67137 17.8419 2.60449 17.7266L2.34278 17.2734C2.2764 17.1578 2.31256 17.0104 2.42481 16.9385L10.1455 11.999L2.42481 7.06152C2.31253 6.98956 2.27637 6.84217 2.34278 6.72656L2.60449 6.27344C2.67139 6.1581 2.81708 6.11553 2.93555 6.17676L11.0723 10.3936L11.4893 1.23828C11.4955 1.10494 11.6057 1 11.7393 1H12.2607Z", fill: "currentColor" })));
 };
 
+const Store = (props) => {
+    const { size = 24, ...rest } = props;
+    return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.3817 6C19.0445 6 19.6507 6.37497 19.9472 6.96777L21.9472 10.9678C22.5286 12.1313 21.6825 13.5 20.3817 13.5H19.7499V19.75C19.7499 20.1642 19.4141 20.5 18.9999 20.5C18.5858 20.4998 18.2499 20.1641 18.2499 19.75V13.5H13.7499V18.75C13.7499 19.7165 12.9664 20.5 11.9999 20.5H5.99991C5.03355 20.4998 4.24991 19.7164 4.24991 18.75V13.5H3.61807C2.3175 13.4998 1.47136 12.1312 2.05264 10.9678L4.05264 6.96777C4.34903 6.375 4.95534 6.00012 5.61807 6H18.3817ZM5.74991 18.75C5.74991 18.888 5.86198 18.9998 5.99991 19H11.9999C12.138 19 12.2499 18.8881 12.2499 18.75V13.5H5.74991V18.75ZM5.61807 7.5C5.5235 7.50012 5.43674 7.55407 5.39444 7.63867L3.39444 11.6387C3.31183 11.8047 3.43258 11.9998 3.61807 12H20.3817C20.5675 12 20.6882 11.8048 20.6054 11.6387L18.6054 7.63867C18.563 7.55405 18.4764 7.5 18.3817 7.5H5.61807Z", fill: "currentColor" }), hAsync("path", { d: "M17.9999 4C18.4141 4 18.7499 4.33579 18.7499 4.75C18.7499 5.16421 18.4141 5.5 17.9999 5.5H5.99991C5.58584 5.49983 5.24991 5.16411 5.24991 4.75C5.24991 4.33589 5.58584 4.00017 5.99991 4H17.9999Z", fill: "currentColor" })));
+};
+
 const Synchronize = (props) => {
     const { size = 24, ...rest } = props;
     return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M3.30769 10.8175C3.57806 10.5965 3.96606 10.5921 4.24226 10.8057L6.33991 12.4278C6.66706 12.6813 6.7261 13.1521 6.47272 13.4796C6.21918 13.8067 5.74841 13.8675 5.42097 13.6143L4.62116 12.9952C4.92795 14.8404 5.99601 17.3161 8.753 18.6602C12.4087 20.4424 15.8051 18.6615 17.0333 17.5479C17.34 17.2701 17.8136 17.2925 18.0919 17.5987C18.3701 17.9055 18.347 18.381 18.0401 18.6592C16.5549 20.0056 12.5074 22.16 8.09479 20.0089C4.62913 18.3191 3.39551 15.1712 3.09675 12.9298L2.27546 13.6016C1.95491 13.8639 1.48116 13.8165 1.21882 13.4962C0.956723 13.1758 1.00408 12.7028 1.32429 12.4405L3.30769 10.8175Z", fill: "currentColor" }), hAsync("path", { d: "M5.96003 5.34089C7.44498 3.99457 11.4916 1.83985 15.9044 3.99128C19.3702 5.68114 20.6036 8.82876 20.9024 11.0704L21.7247 10.3985C22.0452 10.1363 22.518 10.1837 22.7803 10.504C23.0426 10.8245 22.9953 11.2973 22.6749 11.5596L20.6915 13.1827C20.4211 13.4035 20.034 13.408 19.7579 13.1944L17.6602 11.5723C17.333 11.3189 17.2732 10.8481 17.5264 10.5206C17.78 10.1931 18.2516 10.1324 18.5792 10.3858L19.379 11.005C19.0722 9.15965 18.0042 6.68321 15.2471 5.33893C11.5915 3.55662 8.19499 5.33864 6.96687 6.45222C6.66013 6.72978 6.1864 6.70667 5.90827 6.40046C5.63009 6.09371 5.65335 5.61916 5.96003 5.34089Z", fill: "currentColor" })));
@@ -6070,6 +6115,7 @@ const Icons = {
     attachFile: AttachFile,
     barcode: Barcode,
     bell: Bell,
+    bill: Bill,
     board: Board,
     box: Box,
     camera: Camera,
@@ -6094,8 +6140,11 @@ const Icons = {
     clockOutline: ClockOutline,
     close: Close,
     copy: Copy,
+    coupon: Coupon,
     dashboard: Dashboard,
     date: DateIcon,
+    delete: Delete,
+    dot: Dot,
     download: Download,
     drag: Drag,
     edit: Edit,
@@ -6108,10 +6157,12 @@ const Icons = {
     imageFill: ImageFill,
     imageOutline: ImageOutline,
     inline: Inline,
+    launcher: Launcher,
     line: Line,
     location: Location,
     logout: Logout,
     minus: Minus,
+    monitor: Monitor,
     new: New,
     notificationFill: NotificationFill,
     notificationOutline: NotificationOutline,
@@ -6128,7 +6179,10 @@ const Icons = {
     save: Save,
     search: Search,
     setting: Setting,
+    shield: Shield,
+    sidebar: Sidebar,
     star: Star,
+    store: Store,
     synchronize: Synchronize,
     updown: Updown,
     user: User,
@@ -7815,6 +7869,98 @@ var chipInputTokens = {
 	chipInput: chipInput
 };
 
+const typography = {
+	feedback: {
+		sm: {
+			regular: {
+				fontSize: "12",
+				fontWeight: "400"}}}};
+const color = {
+	bg: {
+		frame: "#FFFFFF",
+		accent: {
+			"default": "#0075FF"}},
+	fg: {
+		primary: "#222222",
+		secondary: "#555555",
+		tertiary: "#888888",
+		success: "#00973C",
+		accent: "#0075FF",
+		inverse: "#FFFFFF"
+	},
+	divider: {
+		"default": "#E1E1E1"
+	},
+	blue: {
+		strong: "#0075FF"},
+	darkblue: {
+		strong: "#006AC1"},
+	grey: {
+		strong: "#737373"}};
+const shadow = {
+	spread: {
+		md: {
+			x: "0",
+			y: "0",
+			blur: "24",
+			spread: "0",
+			color: "rgba(34,34,34,0.2)"}
+	}};
+var systemTokens = {
+	typography: typography,
+	color: color,
+	shadow: shadow
+};
+
+const listBox = {
+	radius: "4"};
+var listBoxTokens = {
+	listBox: listBox
+};
+
+const listItem$1 = {
+	paddingY: "4",
+	paddingRight: "12",
+	gap: "8",
+	paddingLeft: {
+		depth1: "12",
+		depth2: "20",
+		depth3: "28"
+	},
+	typography: {
+		"default": {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"},
+		selected: {
+			fontWeight: "700"}
+	},
+	bg: {
+		"default": "#FFFFFF",
+		hover: "#0075FF"
+	},
+	content: {
+		"default": "#222222",
+		hover: "#FFFFFF",
+		disabled: "#888888",
+		selected: "#0075FF"
+	},
+	depth1: {
+		bg: {
+			"default": "#EFF6FF"},
+		border: {
+			color: "#E1E1E1",
+			width: "1"
+		}},
+	depth2: {
+		middle: {
+			bg: "#F6F6F6"}
+	}};
+var listItemTokens = {
+	listItem: listItem$1
+};
+
 const sm$4 = chipInputTokens.chipInput.sm;
 const md$4 = chipInputTokens.chipInput.md;
 const CHIP_INPUT_SIZE_MAP = {
@@ -7852,8 +7998,34 @@ const CHIP_INPUT_RESET = {
     iconColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
     labelColor: '#555555', // TODO: 토큰 반영 후 교체 (grey_70)
 };
-
-const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}`;
+const feedbackSm = systemTokens.typography.feedback.sm.regular;
+const CHIP_INPUT_MAX_COUNT = {
+    fontSize: `${feedbackSm.fontSize}px`,
+    fontWeight: `${feedbackSm.fontWeight}`,
+    color: chipInputTokens.chipInput.text.placeholder,
+};
+const listItem = listItemTokens.listItem;
+const CHIP_INPUT_SUGGESTIONS = {
+    radius: `${listBoxTokens.listBox.radius}px`,
+    maxHeight: '260px',
+    itemPaddingY: `${listItem.paddingY}px`,
+    itemPaddingX: `${listItem.paddingLeft.depth1}px`,
+    itemPaddingRight: `${listItem.paddingRight}px`,
+    itemGap: `${listItem.gap}px`,
+    itemFontSize: `${listItem.typography.default.fontSize}px`,
+    itemFontWeight: listItem.typography.default.fontWeight,
+    itemFontWeightSelected: listItem.typography.selected.fontWeight,
+    itemLineHeight: `${listItem.typography.default.lineHeight}px`,
+    itemFontFamily: listItem.typography.default.fontFamily,
+    itemColor: listItem.content.default,
+    itemColorHover: listItem.content.hover,
+    itemBgHover: listItem.bg.hover,
+    emptyColor: '#888888',
+    emptyFontSize: '12px',
+    emptyLineHeight: '20px',
+};
+
+const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
 
 class SdChipInput {
     constructor(hostRef) {
@@ -7861,7 +8033,9 @@ class SdChipInput {
         this.update = createEvent(this, "sdUpdate", 7);
         this.focusEvent = createEvent(this, "sdFocus", 7);
         this.blurEvent = createEvent(this, "sdBlur", 7);
+        this.inputEvent = createEvent(this, "sdInput", 7);
     }
+    static SUGGESTIONS_VIEWPORT_PADDING = 8;
     get host() { return getElement(this); }
     values = [];
     errors = [];
@@ -7873,6 +8047,11 @@ class SdChipInput {
     rules = [];
     error = false;
     useReset = false;
+    maxCount;
+    suggestions = [];
+    loadingSuggestions = false;
+    recommendedItems = [];
+    loadingRecommendedItems = false;
     // sd-field props
     label = '';
     labelWidth = '';
@@ -7888,8 +8067,12 @@ class SdChipInput {
     focused = false;
     hovered = false;
     inputValue = '';
+    activeSuggestionIndex = -1;
+    suppressSuggestions = false;
+    suppressRecommendations = false;
     inputEl;
     formField;
+    chipInputRef;
     get value() {
         return this.internalValues;
     }
@@ -7901,6 +8084,17 @@ class SdChipInput {
             this.internalErrors = [...newErrors];
         }
     }
+    suggestionsChanged(newVal) {
+        if (!Array.isArray(newVal))
+            this.suggestions = [];
+        this.activeSuggestionIndex = -1;
+        this.suppressSuggestions = false;
+    }
+    recommendedItemsChanged(newVal) {
+        if (!Array.isArray(newVal))
+            this.recommendedItems = [];
+        this.activeSuggestionIndex = -1;
+    }
     componentWillLoad() {
         this.internalValues = Array.isArray(this.values) ? [...this.values] : [];
         if (Array.isArray(this.errors)) {
@@ -7925,6 +8119,7 @@ class SdChipInput {
     update;
     focusEvent;
     blurEvent;
+    inputEvent;
     async sdValidate() {
         return this.formField?.sdValidate();
     }
@@ -7937,6 +8132,31 @@ class SdChipInput {
     async sdFocus() {
         return this.formField?.sdFocus();
     }
+    addChip = (value) => {
+        if (this.maxCount != null && this.internalValues.length >= this.maxCount)
+            return;
+        const next = [...this.internalValues, value];
+        this.internalValues = next;
+        this.values = next;
+        if (Array.isArray(this.errors)) {
+            const nextErrors = [...this.internalErrors, false];
+            this.internalErrors = nextErrors;
+            this.errors = nextErrors;
+        }
+        if (Array.isArray(this.disabledChips)) {
+            this.disabledChips = [...this.disabledChips, false];
+        }
+        if (this.inputEl != null) {
+            this.inputEl.value = '';
+        }
+        this.inputValue = '';
+        this.activeSuggestionIndex = -1;
+        this.suppressSuggestions = true;
+        this.update.emit(next);
+        this.inputEvent.emit('');
+        this.inputEl?.focus();
+        this.suppressRecommendations = true;
+    };
     handleChipRemove = (index) => {
         const next = this.internalValues.filter((_, i) => i !== index);
         this.internalValues = next;
@@ -7950,26 +8170,54 @@ class SdChipInput {
             this.disabledChips = this.disabledChips.filter((_, i) => i !== index);
         }
         this.update.emit(next);
+        // .focus()는 동기 실행 → handleFocus가 suppressRecommendations=false로 리셋하므로 이후 덮어씀
         this.inputEl?.focus();
+        this.suppressRecommendations = true;
     };
     handleKeyDown = (event) => {
         const input = event.target;
-        if (event.key === 'Enter' && !event.isComposing && input.value.trim() !== '') {
-            event.preventDefault();
-            const next = [...this.internalValues, input.value.trim()];
-            this.internalValues = next;
-            this.values = next;
-            if (Array.isArray(this.errors)) {
-                const nextErrors = [...this.internalErrors, false];
-                this.internalErrors = nextErrors;
-                this.errors = nextErrors;
+        const suggestions = this.suggestions ?? [];
+        const recommendedItems = this.recommendedItems ?? [];
+        const showAutocomplete = this.focused &&
+            this.inputValue !== '' &&
+            !this.suppressSuggestions &&
+            (suggestions.length > 0 || this.loadingSuggestions);
+        const showRecommendations = this.focused &&
+            this.inputValue === '' &&
+            !this.suppressRecommendations &&
+            (recommendedItems.length > 0 || this.loadingRecommendedItems);
+        const showDropdown = showAutocomplete || showRecommendations;
+        const activeItems = showAutocomplete ? suggestions : recommendedItems;
+        if (showDropdown) {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.activeSuggestionIndex = Math.min(this.activeSuggestionIndex + 1, activeItems.length - 1);
+                return;
             }
-            if (Array.isArray(this.disabledChips)) {
-                this.disabledChips = [...this.disabledChips, false];
+            if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                this.activeSuggestionIndex = Math.max(this.activeSuggestionIndex - 1, -1);
+                return;
+            }
+            if (event.key === 'Escape') {
+                if (showAutocomplete)
+                    this.suppressSuggestions = true;
+                if (showRecommendations)
+                    this.suppressRecommendations = true;
+                this.activeSuggestionIndex = -1;
+                return;
+            }
+            if (event.key === 'Enter' && this.activeSuggestionIndex >= 0) {
+                event.preventDefault();
+                this.addChip(activeItems[this.activeSuggestionIndex]);
+                return;
             }
-            input.value = '';
-            this.inputValue = '';
-            this.update.emit(next);
+        }
+        if (event.key === 'Enter' && !event.isComposing && input.value.trim() !== '') {
+            if (this.maxCount != null && this.internalValues.length >= this.maxCount)
+                return;
+            event.preventDefault();
+            this.addChip(input.value.trim());
         }
         else if (event.key === 'Backspace' && input.value === '' && this.internalValues.length > 0) {
             if (this.getChipDisabled(this.internalValues.length - 1))
@@ -7990,16 +8238,35 @@ class SdChipInput {
         }
     };
     handleInput = (event) => {
-        this.inputValue = event.target.value;
+        const value = event.target.value;
+        const wasEmpty = this.inputValue === '';
+        const isEmpty = value === '';
+        if (wasEmpty !== isEmpty) {
+            this.activeSuggestionIndex = -1;
+            if (isEmpty) {
+                this.suppressRecommendations = false;
+            }
+        }
+        this.inputValue = value;
+        this.suppressSuggestions = false;
+        this.inputEvent.emit(value);
     };
     handleFocus = () => {
         this.focused = true;
+        this.suppressRecommendations = false;
         this.focusEvent.emit();
     };
     handleBlur = () => {
         this.focused = false;
+        this.activeSuggestionIndex = -1;
         this.blurEvent.emit();
     };
+    closeSuggestions = () => {
+        this.focused = false;
+        this.activeSuggestionIndex = -1;
+        this.suppressSuggestions = true;
+        this.suppressRecommendations = true;
+    };
     handleContainerClick = () => {
         if (!this.disabled) {
             this.inputEl?.focus();
@@ -8056,8 +8323,84 @@ class SdChipInput {
             '--sd-chip-input-field-font-weight': CHIP_TYPOGRAPHY.focus.fontWeight,
             '--sd-chip-input-field-line-height': CHIP_TYPOGRAPHY.focus.lineHeight,
             '--sd-chip-input-field-font-family': CHIP_TYPOGRAPHY.focus.fontFamily,
+            '--sd-chip-input-max-count-font-size': CHIP_INPUT_MAX_COUNT.fontSize,
+            '--sd-chip-input-max-count-font-weight': CHIP_INPUT_MAX_COUNT.fontWeight,
+            '--sd-chip-input-max-count-color': CHIP_INPUT_MAX_COUNT.color,
+            '--sd-chip-input-suggestions-radius': CHIP_INPUT_SUGGESTIONS.radius,
+            '--sd-chip-input-suggestions-max-height': CHIP_INPUT_SUGGESTIONS.maxHeight,
+            '--sd-chip-input-suggestion-padding-y': CHIP_INPUT_SUGGESTIONS.itemPaddingY,
+            '--sd-chip-input-suggestion-padding-x': CHIP_INPUT_SUGGESTIONS.itemPaddingX,
+            '--sd-chip-input-suggestion-padding-right': CHIP_INPUT_SUGGESTIONS.itemPaddingRight,
+            '--sd-chip-input-suggestion-gap': CHIP_INPUT_SUGGESTIONS.itemGap,
+            '--sd-chip-input-suggestion-font-size': CHIP_INPUT_SUGGESTIONS.itemFontSize,
+            '--sd-chip-input-suggestion-font-weight': CHIP_INPUT_SUGGESTIONS.itemFontWeight,
+            '--sd-chip-input-suggestion-font-weight-selected': CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
+            '--sd-chip-input-suggestion-line-height': CHIP_INPUT_SUGGESTIONS.itemLineHeight,
+            '--sd-chip-input-suggestion-font-family': CHIP_INPUT_SUGGESTIONS.itemFontFamily,
+            '--sd-chip-input-suggestion-color': CHIP_INPUT_SUGGESTIONS.itemColor,
+            '--sd-chip-input-suggestion-color-hover': CHIP_INPUT_SUGGESTIONS.itemColorHover,
+            '--sd-chip-input-suggestion-bg-hover': CHIP_INPUT_SUGGESTIONS.itemBgHover,
+            '--sd-chip-input-suggestions-empty-color': CHIP_INPUT_SUGGESTIONS.emptyColor,
+            '--sd-chip-input-suggestions-empty-font-size': CHIP_INPUT_SUGGESTIONS.emptyFontSize,
+            '--sd-chip-input-suggestions-empty-line-height': CHIP_INPUT_SUGGESTIONS.emptyLineHeight,
         };
-        return (hAsync("sd-field", { key: 'ea69cfd9fd589f3657f3dff1f73196f684d35d80', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: 'b4948c02ea157000002661ca9374b300af5e71a8', class: "sd-chip-input", onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), hAsync("div", { key: 'ad36a2c8dd5b8d8ad00d7130da75e92a1fb3b350', class: {
+        const isMaxReached = this.maxCount != null && this.internalValues.length >= this.maxCount;
+        const showResetArea = (this.useReset && this.internalValues.length > 0) || this.maxCount != null;
+        const suggestions = this.suggestions ?? [];
+        const recommendedItems = this.recommendedItems ?? [];
+        const showAutocomplete = this.focused &&
+            this.inputValue !== '' &&
+            !this.suppressSuggestions &&
+            (suggestions.length > 0 || this.loadingSuggestions);
+        const showRecommendations = this.focused &&
+            this.inputValue === '' &&
+            !this.suppressRecommendations &&
+            (recommendedItems.length > 0 || this.loadingRecommendedItems);
+        const showDropdown = showAutocomplete || showRecommendations;
+        const dropdownItems = showAutocomplete ? suggestions : recommendedItems;
+        const isDropdownLoading = showAutocomplete
+            ? this.loadingSuggestions && suggestions.length === 0
+            : this.loadingRecommendedItems && recommendedItems.length === 0;
+        const suggestionBoxStyle = {
+            width: `${this.chipInputRef?.offsetWidth ?? 0}px`,
+            display: 'flex',
+            flexDirection: 'column',
+            boxSizing: 'border-box',
+            background: '#FFFFFF',
+            borderRadius: CHIP_INPUT_SUGGESTIONS.radius,
+            boxShadow: '2px 2px 12px 2px rgba(0, 0, 0, 0.1)',
+            maxHeight: CHIP_INPUT_SUGGESTIONS.maxHeight,
+            minHeight: '0',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            outline: 'none',
+        };
+        const suggestionItemStyle = {
+            display: 'flex',
+            alignItems: 'center',
+            gap: CHIP_INPUT_SUGGESTIONS.itemGap,
+            padding: `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingRight} ` +
+                `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingX}`,
+            fontSize: CHIP_INPUT_SUGGESTIONS.itemFontSize,
+            lineHeight: CHIP_INPUT_SUGGESTIONS.itemLineHeight,
+            fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeight,
+            fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
+            color: CHIP_INPUT_SUGGESTIONS.itemColor,
+            cursor: 'pointer',
+            userSelect: 'none',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        };
+        const suggestionEmptyStyle = {
+            padding: '12px',
+            textAlign: 'center',
+            fontSize: CHIP_INPUT_SUGGESTIONS.emptyFontSize,
+            lineHeight: CHIP_INPUT_SUGGESTIONS.emptyLineHeight,
+            fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
+            color: CHIP_INPUT_SUGGESTIONS.emptyColor,
+        };
+        return (hAsync("sd-field", { key: '6ff0688cd9a076cd81693364bfeb6a98b5bf018e', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '0c6ae92de4dcb44ed4fbcd12f1dddef93cec12db', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: 'df111f3110b444ed296db8c6b7f00d9209f858af', class: {
                 'sd-chip-input__field': true,
                 'sd-chip-input__field--filled': this.inputValue !== '',
                 'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -8065,7 +8408,20 @@ class SdChipInput {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, hAsync("input", { key: '6ea7cdaa1011543b6c7784561d3752e4ed4a9d7d', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })), this.useReset && this.internalValues.length > 0 && (hAsync("div", { key: '65c366e84ba427704a9c89f6f5c6fdeeb5889554', class: "sd-chip-input__reset" }, this.inputValue === '' && hAsync("span", { key: 'e78f17df8e2fd9a91cc5f0450d22542720adef1b', class: "sd-chip-input__divider" }), hAsync("sd-text-link", { key: '298bd3ce40e0c0c4b91337548d6c6887d5239ccc', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput }))))));
+                    : '' }, hAsync("input", { key: '8e170c84cedab36edbdd0a84e7e2e1ac0fba9632', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (hAsync("div", { key: '5b30bb4f89c9d3c9b18870acccad22bd97e1d748', class: "sd-chip-input__reset" }, this.inputValue === '' && hAsync("span", { key: '6fbf74a5a77b70789a609d28f5c4b6dd2aab57ef', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: 'fbb21a27bdd2aa38870cfd8d16b7e5293769eaf3', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '83626145602b13d7a00ef955a6db59f41c152529', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (hAsync("sd-portal", { key: '1682a89b513098f192f776af782aa9ee432574e8', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: '3efb484bd5616e411824f7014a759a34a9e93d8b', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (hAsync("div", { key: 'b5b1d5e6db03f6fe60864b6c19e9b2c753468447', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (hAsync("div", { key: item, class: {
+                'sd-chip-input__suggestion-item': true,
+                'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
+            }, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex
+                ? {
+                    ...suggestionItemStyle,
+                    background: CHIP_INPUT_SUGGESTIONS.itemBgHover,
+                    color: CHIP_INPUT_SUGGESTIONS.itemColorHover,
+                    fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
+                }
+                : suggestionItemStyle, onMouseDown: e => {
+                e.preventDefault();
+                this.addChip(item);
+            } }, item)))))))));
     }
     static get watchers() { return {
         "values": [{
@@ -8073,6 +8429,12 @@ class SdChipInput {
             }],
         "errors": [{
                 "errorsChanged": 0
+            }],
+        "suggestions": [{
+                "suggestionsChanged": 0
+            }],
+        "recommendedItems": [{
+                "recommendedItemsChanged": 0
             }]
     }; }
     static get style() { return sdChipInputCss(); }
@@ -8090,6 +8452,11 @@ class SdChipInput {
             "rules": [16],
             "error": [1028],
             "useReset": [4, "use-reset"],
+            "maxCount": [2, "max-count"],
+            "suggestions": [1040],
+            "loadingSuggestions": [4, "loading-suggestions"],
+            "recommendedItems": [1040],
+            "loadingRecommendedItems": [4, "loading-recommended-items"],
             "label": [1],
             "labelWidth": [8, "label-width"],
             "hint": [1],
@@ -8104,6 +8471,9 @@ class SdChipInput {
             "focused": [32],
             "hovered": [32],
             "inputValue": [32],
+            "activeSuggestionIndex": [32],
+            "suppressSuggestions": [32],
+            "suppressRecommendations": [32],
             "sdValidate": [64],
             "sdReset": [64],
             "sdResetValidate": [64],
@@ -8147,42 +8517,6 @@ var progressTokens = {
 	progress: progress
 };
 
-const color = {
-	bg: {
-		frame: "#FFFFFF",
-		accent: {
-			"default": "#0075FF"}},
-	fg: {
-		primary: "#222222",
-		secondary: "#555555",
-		tertiary: "#888888",
-		success: "#00973C",
-		accent: "#0075FF",
-		inverse: "#FFFFFF"
-	},
-	divider: {
-		"default": "#E1E1E1"
-	},
-	blue: {
-		strong: "#0075FF"},
-	darkblue: {
-		strong: "#006AC1"},
-	grey: {
-		strong: "#737373"}};
-const shadow = {
-	spread: {
-		md: {
-			x: "0",
-			y: "0",
-			blur: "24",
-			spread: "0",
-			color: "rgba(34,34,34,0.2)"}
-	}};
-var systemTokens = {
-	color: color,
-	shadow: shadow
-};
-
 const CIRCLE_PROGRESS_LABEL_COLOR = progressTokens.progress.color.label;
 const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.fg.tertiary;
 // TODO: error/complete 색상 및 inverse 흰색은 토큰 반영 후 교체
@@ -8241,7 +8575,7 @@ class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (hAsync(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, hAsync("svg", { key: '34117c89eb180370a215807e614ad08f4f72b517', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '5ae0a53ce10bd5a8b2f316ebd00d3ee28c4336d6', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', class: "sd-circle-progress__label" }, this.label)));
+        return (hAsync(Host, { key: '35b4dc433f5e2bbd02dc3422b286da179472082f', style: hostStyle }, hAsync("svg", { key: 'de1d3e44eccf421491a1107ba234e1562917945b', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: 'b0a54a2e155222a416a6bdcb75f4fe54d9de8270', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '6bc314b3fce758d41a3499e9d87b7158b15777a5', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '16ec46b178d5f2f2f5ad245703c2f4362b8df261', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'c199799d2466c75f91f1bc1f20fdb7e71c64ba0e', class: "sd-circle-progress__label" }, this.label)));
     }
     static get style() { return sdCircleProgressCss(); }
     static get cmpMeta() { return {
@@ -8357,9 +8691,9 @@ class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (hAsync("div", { key: '4d3ce0662b2d860a4ed6ae3c8177ae75dae4fb92', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '7c406d59c2470b610a187bf45aa5cd4ab5c6b26b', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '10e3d2c8a87a728df4e3f3be7dfab96475738e2b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '9cc844c8cefb2fd0dc96871b55fc1c7c6e41c526', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'bbaa81a02c067d66c4cc19cf805b7a6939231311', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '31734f096eee6e6a9be770eafa43066c8e763608', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (hAsync("div", { key: 'a10838fb7c7081fdaa85cdaa33f92ef30c00a888', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (hAsync("div", { key: '51fb051b436cc511aeac2f578832a267e12ef3c4', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'dd9605e312eac8b0602ec558ad5439ea3daa7aa7', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '5027ec2d03731338a9197f7b5b910d2adbf83f0e', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '8456707355cc779c169b56abc16b0949909b829e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'd11cb38e749f54ce5767ba9b5cca0129df742aca', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'de653458605a9591d7c66d644a143d0f33738b28', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (hAsync("div", { key: '0517e400485551ab21f0f5452af764b5ede7a76d', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '540f3bb73aa61a1a2a041eba9a22a198c7772914', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '1944aeb4d140c779d0af1304160a86c5056335a8', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'efd463686d98e9d2edc3e1cd7b4f54d8da4fef56', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: 'b9033fb98acf3de36b7fb3e1969ccf5a7becef39', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'd542a08caee30ed7eb1d22ed85a51be6e1f6855e', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '02d012e899969ee55cba43c11d9caeaaff65a348', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'fd50d151e515646e5bef5658a1b05b2e26b21461', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '0c2092edf0866a8b1f4f432b176d78eedd9655d6', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get style() { return sdConfirmModalCss(); }
     static get cmpMeta() { return {
@@ -8646,9 +8980,9 @@ class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (hAsync("sd-field", { key: 'baa957e5534b6587da2ef067ecad4a0934693800', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '652f9f5c6bd5c6ee58f3c89eee45325a98234ac0', class: "sd-date-picker", ref: el => {
+        return (hAsync("sd-field", { key: '9e1e5cb7419027db803248a657d0d134be049637', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'fbd9adeaa08d19cac34b045aba2b3fbb8d4adc8c', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-date-picker-trigger", { key: '7b0f81badbcf7ca283afd274b4572e4a6eaa590b', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '65fbe892e4cdd9d643b5000d69220b5e28972902', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'e9187264f336295907f1d5574810df4a07a0f114', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, hAsync("sd-date-picker-trigger", { key: 'd51161c4b1eedcfd90832c9b6d049559ff5df08b', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'd6588d3991eff39eb717d4211b38d68f093aace5', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: '0dc6a8074fcfa63630aab7f0b126caa9f4c7b234', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -8731,7 +9065,7 @@ class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (hAsync("div", { key: '87ada0414ffc6404b27cf4a41ba7c9cb9903f498', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (hAsync("div", { key: '8ce4e5a7f355e15ad6662efc5d1a697c2f78d455', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -8739,7 +9073,7 @@ class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, hAsync("sd-icon", { key: 'e8eee3ed97ab7344e7658b7b22bc91f11aa0b068', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: 'ea25a13a72d00ca31fcddaf0183b520175ef7d93', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, hAsync("sd-icon", { key: '31d360adaf1a8a0d613d3809be7c724be9d7a29a', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: 'cf17fb4d5fdaadd99847ec9ce5440214c10a5797', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get style() { return sdDatePickerTriggerCss(); }
     static get cmpMeta() { return {
@@ -9159,7 +9493,7 @@ class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (hAsync(Fragment, { key: '91ba95cf0786d59363ac6b72e9c8f91d1802feee' }, hAsync("div", { key: '98f66737a15e5c3129dd20f674736115a4fad42e', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: 'd9f326b485864484ed786cb172d3bd33136987ea', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'df7d835ac0da6788f08c7963ed04ed98b7fd6091', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (hAsync(Fragment, { key: '71f25effececd0b83d9b33201230dc615ba87a30' }, hAsync("div", { key: 'f075474fb0be9f8e8562a013532b3cdbaadee069', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '4dfa1d65b971f7d80f0799482c8ce41522200a94', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '20149f97a5115115cc49894383ca7f989ba2b904', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{
@@ -9202,7 +9536,7 @@ class SdDivider {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (hAsync(Host, { key: '8282aae8e5cd26630c54f4347cd26f544672d15d', style: hostStyle }, hAsync("hr", { key: '94df7dc7465b05ecad6527da2c008a4ff503f034', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (hAsync(Host, { key: '886ca68599a925678d7c598daeff3bf653db513d', style: hostStyle }, hAsync("hr", { key: 'e213413f041cda5d18a74f8c0225c840d92f7dac', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
     static get style() { return sdDividerCss(); }
     static get cmpMeta() { return {
@@ -9355,6 +9689,13 @@ const DROPDOWN_CHEVRON_ICON_SIZE = {
     sm: 12,
     md: 16,
 };
+// 버튼 자체의 min-width (px). split 여부에 따라 chevron 버튼이 추가되므로 별도 값을 지정.
+// TODO: 디자인 토큰으로 관리될 때 대체 예정
+const DROPDOWN_BUTTON_MIN_WIDTH = {
+    xs: { default: 44, split: 60 },
+    sm: { default: 70, split: 76 },
+    md: { default: 100, split: 106 },
+};
 const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.button.bg.disabled;
 const DROPDOWN_DISABLED_TEXT = buttonTokens.button.text.disabled;
 const DROPDOWN_DISABLED_ICON = buttonTokens.button.icon.disabled;
@@ -9383,6 +9724,7 @@ class SdDropdownButton extends BaseDropdownEvent {
     isAnimatingOut = false;
     itemIndex = -1;
     triggerRef;
+    splitContainerRef;
     menuRef;
     closeAnimationTimer;
     click;
@@ -9561,10 +9903,11 @@ class SdDropdownButton extends BaseDropdownEvent {
         return classes.join(' ');
     }
     renderDropdown(preset) {
-        if ((!this.isOpen && !this.isAnimatingOut) || !this.triggerRef)
+        const anchorRef = this.split ? this.splitContainerRef : this.triggerRef;
+        if ((!this.isOpen && !this.isAnimatingOut) || !anchorRef)
             return null;
-        return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.triggerRef, onSdClose: this.closeDropdown }, hAsync("div", { style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
-                '--sd-dropdown-button-menu-min-width': `${this.triggerRef.offsetWidth}px`,
+        return (hAsync("sd-portal", { open: this.isOpen, parentRef: anchorRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
+                '--sd-dropdown-button-menu-min-width': `${anchorRef.offsetWidth}px`,
                 '--sd-dropdown-button-menu-item-color': PRESET_MENU_ITEM_COLORS[preset],
                 '--sd-dropdown-button-menu-item-active-bg': PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS[preset],
                 '--sd-dropdown-button-menu-item-active-color': PRESET_MENU_ITEM_ACTIVE_COLORS[preset],
@@ -9578,7 +9921,7 @@ class SdDropdownButton extends BaseDropdownEvent {
                         this.itemIndex = index;
                     }
                 } }, item.icon && (hAsync("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), hAsync("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: sanitizeInlineHtml(item.label) })));
-        })))));
+        }))));
     }
     renderChevron(size) {
         const iconName = this.split ? 'etc' : 'caretDown';
@@ -9590,10 +9933,11 @@ class SdDropdownButton extends BaseDropdownEvent {
     render() {
         const { config, preset } = this.resolvedConfig;
         const triggerStyle = this.getTriggerStyle(config, preset);
+        const minWidth = DROPDOWN_BUTTON_MIN_WIDTH[config.size];
         if (this.split) {
-            return (hAsync("div", { class: "sd-dropdown-button sd-dropdown-button--split" }, hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'label'), disabled: this.disabled, onClick: this.handleButtonClick, style: triggerStyle }, hAsync("span", { class: "sd-dropdown-button__trigger-label" }, this.label)), hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'chevron'), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), "aria-label": "dropdown toggle", onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, this.renderChevron(config.size)), this.renderDropdown(preset)));
+            return (hAsync("div", { class: "sd-dropdown-button sd-dropdown-button--split", ref: el => (this.splitContainerRef = el), style: { minWidth: `${minWidth.split}px` } }, hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'label'), disabled: this.disabled, onClick: this.handleButtonClick, style: triggerStyle }, hAsync("span", { class: "sd-dropdown-button__trigger-label" }, this.label)), hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'chevron'), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), "aria-label": "dropdown toggle", onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, this.renderChevron(config.size)), this.renderDropdown(preset)));
         }
-        return (hAsync("div", { class: "sd-dropdown-button" }, hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, hAsync("span", { class: "sd-dropdown-button__trigger-label" }, this.label), this.renderChevron(config.size)), this.renderDropdown(preset)));
+        return (hAsync("div", { class: "sd-dropdown-button" }, hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: { ...triggerStyle, minWidth: `${minWidth.default}px` } }, hAsync("span", { class: "sd-dropdown-button__trigger-label" }, this.label), this.renderChevron(config.size)), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -9834,21 +10178,21 @@ class SdField {
                     : {}),
             }
             : {};
-        return (hAsync("div", { key: 'a04858364c6b9afceedba2f5d7ee0e289a6b6782', class: {
+        return (hAsync("div", { key: '9edafceb24a4fcde7cfb966f421bfb73f1b07617', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '898f5af4d213745257b2666cbea56db591792054', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '488ab5c290258d0139f677319f21a55bb6c63876', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: 'e5c4a8aad05afb40f3eccc492135b2b968ffc646', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'e88d62a979eaab9f6794c851813e5f56c3c5c4ac', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, hAsync("div", { key: 'db8c388dd2c4743a287f7567cde4015cafed1d95', class: {
+                : {} }, hAsync("div", { key: 'be69d7e48d90dda0872ffc43c2a1b4044e99ac00', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && (hAsync("div", { key: '1049369f52322fb1a4f1b4baf50b1e4ef2e9e59e', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: 'f0a28d9bdf97730088454c64b71b7cbc1d4dd875', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: 'deee9ef5d166ab4d17451ad9d013b3b9d3d7aebe' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (hAsync("div", { key: '2c631ac0f8b9001cf6344908cf8cbcdf182cc1a7', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '34a49839ee200cd59c3ff5b84caf5ded2c50f7b0', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: '693f20c529e5f2ea84d381e59327392edb7b4c15' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -10361,7 +10705,7 @@ class SdFloatingPopover {
         }
     }
     render() {
-        return hAsync("slot", { key: '7931b1b9ee17e2de64a7fa87658ec7d4501f7ecd' });
+        return hAsync("slot", { key: 'f20806555ad198c33a62ec938ea7b77200fa1585' });
     }
     static get style() { return sdFloatingPortalCss(); }
     static get cmpMeta() { return {
@@ -11358,12 +11702,12 @@ class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (hAsync("sd-field", { key: 'fce402fae267b5700501e44935f23bebc28efb62', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'f7d8f95cf5ee38a7aa2e44940ba39b9eb001064c', class: "sd-input__content" }, hAsync("slot", { key: '23f1f770a268a0798293420ce0df9e5cc94e07b2', name: "prefix" }), hAsync("input", { key: 'b8c041cc4a8761cf1cf93a8d1af139cd7720d2d8', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '5a288d50726b21c156da480937b9759e6c76d33a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: 'b5315624a6fd5fdcb70526b1abea4fbac83641c1', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (hAsync("sd-field", { key: '64e7a3ba5e223341336248ba31e621b4416987fd', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'b66e286c35cc14c1eb02badcaaff24b38ff0a7b3', class: "sd-input__content" }, hAsync("slot", { key: 'dc8b900eb2b38c18b85663bc930e810be77bdbd7', name: "prefix" }), hAsync("input", { key: '36d35464338838aaaeff6f728020241d33a493ec', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '4f30d4a59794c0692f367d41af4311e191c5427b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '247da41512f20d8e562f345b08bd5bc13486734b', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '5ae70d65c531db0bc57d17f85c328a275f7aab2b', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '70c596ef0072bf369bd59e2c58d0a6f8c6fd1b11', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -11502,8 +11846,7 @@ const KEY_VALUE_TABLE_LAYOUT = {
     rowHeight: Number(t.keyValue.height),
     thWidth: 120,
     borderRadius: Number(t.radius),
-    paddingX: Number(t.body.paddingX),
-    paddingY: Number(t.keyValue.body.padding),
+    padding: Number(t.keyValue.body.padding),
     helpIconSize: 16,
     requiredIconSize: 12,
     gap: Number(t.header.gap),
@@ -11524,7 +11867,7 @@ const KEY_VALUE_TABLE_COLORS = {
 const KEY_VALUE_TABLE_TYPOGRAPHY = {
     labelFontFamily: t.header.typography.fontFamily,
     labelFontSize: Number(t.header.typography.fontSize),
-    labelFontWeight: Number(t.header.typography.fontWeight),
+    labelFontWeight: 700,
     labelLineHeight: Number(t.header.typography.lineHeight),
     tdFontFamily: t.body.typography.fontFamily,
     tdFontSize: Number(t.body.typography.fontSize),
@@ -11532,7 +11875,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
     tdLineHeight: Number(t.body.typography.lineHeight),
 };
 
-const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding-y) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);padding:var(--sd-kvt-padding-y) var(--sd-kvt-padding-x);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
+const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);padding:var(--sd-kvt-padding);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
 
 class SdKeyValueTable {
     constructor(hostRef) {
@@ -11640,6 +11983,28 @@ class SdKeyValueTable {
         });
         return max;
     }
+    /**
+     * thStyle의 CSS 속성 값을 해당 CSS 변수로도 반영.
+     * label span이 var()로 스타일을 참조하기 때문에, 인라인 스타일만으로는 상속이 되지 않음.
+     */
+    buildThStyle(thStyle) {
+        const s = { ...thStyle };
+        if (thStyle.color != null)
+            s['--sd-kvt-th-color'] = thStyle.color;
+        if (thStyle.background != null)
+            s['--sd-kvt-th-bg'] = thStyle.background;
+        if (thStyle.backgroundColor != null)
+            s['--sd-kvt-th-bg'] = thStyle.backgroundColor;
+        if (thStyle.fontFamily != null)
+            s['--sd-kvt-label-font-family'] = thStyle.fontFamily;
+        if (thStyle.fontSize != null)
+            s['--sd-kvt-label-font-size'] = thStyle.fontSize;
+        if (thStyle.fontWeight != null)
+            s['--sd-kvt-label-font-weight'] = thStyle.fontWeight;
+        if (thStyle.lineHeight != null)
+            s['--sd-kvt-label-line-height'] = thStyle.lineHeight;
+        return s;
+    }
     renderTh(field, r, c) {
         const thRowSpan = field.thRowSpan != null && field.thRowSpan > 1 ? field.thRowSpan : undefined;
         const thColSpan = field.thColSpan != null && field.thColSpan > 1 ? field.thColSpan : undefined;
@@ -11650,7 +12015,8 @@ class SdKeyValueTable {
         else if (Array.isArray(field.thClass)) {
             field.thClass.forEach(cls => (classObj[cls] = true));
         }
-        return (hAsync("th", { key: `th-${r}-${c}`, class: classObj, style: field.thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, hAsync("div", { class: "sd-key-value-table__th-inner" }, hAsync("span", { class: "sd-key-value-table__label" }, field.label, field.required && (hAsync("sd-icon", { class: "sd-key-value-table__required", name: "star", size: KEY_VALUE_TABLE_LAYOUT.requiredIconSize, color: KEY_VALUE_TABLE_COLORS.required, label: "required" }))), field.helpText && this.renderHelpIcon(field.helpText))));
+        const thStyle = field.thStyle != null ? this.buildThStyle(field.thStyle) : undefined;
+        return (hAsync("th", { key: `th-${r}-${c}`, class: classObj, style: thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, hAsync("div", { class: "sd-key-value-table__th-inner" }, hAsync("span", { class: "sd-key-value-table__label" }, field.label, field.required && (hAsync("sd-icon", { class: "sd-key-value-table__required", name: "star", size: KEY_VALUE_TABLE_LAYOUT.requiredIconSize, color: KEY_VALUE_TABLE_COLORS.required, label: "required" }))), field.helpText && this.renderHelpIcon(field.helpText))));
     }
     renderTd(field, r, c) {
         const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
@@ -11678,8 +12044,7 @@ class SdKeyValueTable {
             '--sd-kvt-row-height': `${KEY_VALUE_TABLE_LAYOUT.rowHeight}px`,
             '--sd-kvt-th-width': `${KEY_VALUE_TABLE_LAYOUT.thWidth}px`,
             '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
-            '--sd-kvt-padding-x': `${KEY_VALUE_TABLE_LAYOUT.paddingX}px`,
-            '--sd-kvt-padding-y': `${KEY_VALUE_TABLE_LAYOUT.paddingY}px`,
+            '--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
             '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
             '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
             '--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,
@@ -11792,7 +12157,7 @@ class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (hAsync(Host, { key: '49452751b0aaf5e6b49d809272620cf4b198ecc1', style: hostStyle }, hAsync("div", { key: 'aec62dae8fa8d4a9d6e64e305fadc63836a1fef6', class: 'sd-linear-progress__track' }, hAsync("div", { key: '0f7cce4cf0ebe6ce40cc127ab8b91fdaf88440cc', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'af2f415ba6cc27c209eed2ff38b02ce58f81a861', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '2c21c62faf93ee809ae6fa098f7bf88e20447ca8', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '571c78db5fc8d7a6e4db2ed78e8c75c8be953e2f', class: 'sd-linear-progress__label' }, this.label)));
+        return (hAsync(Host, { key: '26b1e15732e289a9a37a6d3dbea24aec1ab60ffd', style: hostStyle }, hAsync("div", { key: '5162d60390656286b56f6a96fd4b3932f399412a', class: 'sd-linear-progress__track' }, hAsync("div", { key: 'a46b815f935b243e4b7f8988af65167e3f87b554', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'bc91914addd5addb84c7684a1f862033950905fc', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: 'c62cdc59464823286ff42fc7e97a7a255a2beeb4', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '4c7c280885c8411329f99c3fe04f5ede8b1f0708', class: 'sd-linear-progress__label' }, this.label)));
     }
     static get style() { return sdLinearProgressCss(); }
     static get cmpMeta() { return {
@@ -11826,10 +12191,10 @@ class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (hAsync("div", { key: '314f23e9da2ec850d62b4d4e347055669841c1fe', class: {
+        return (hAsync("div", { key: '2ad17acec76cfb7ceba0629f055600a7240a67e8', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '541eb68218969c73e52bc8cbdb79171ee0ba908e', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '95192e0c936419248c46a57acb4c5ab63465a2f5', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '5584a90aa595d3eaffc3597604a9dc359b22bcaf', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: 'e9dc0afbe43a318d7e776dd2f0bafa68ebe8536e', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '1e842f21f2990b22820974147b22d859be010683', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '4a48bafd9882a22c210dd1b2ca45efc43cc0c8da', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '8eb7377230f0e8c9c482dfc9ca1313f323895d14', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: 'af2fc52b0740ee1d2cea55b688e5b4b77e80c7e3', class: "sd-loading-container__message" }, this.message)))));
     }
     static get style() { return sdLoadingContainerCss(); }
     static get cmpMeta() { return {
@@ -11926,7 +12291,7 @@ class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (hAsync(Host, { key: '17636253239532d90e596f20d84795fe2e65508d', style: hostStyle }, hAsync("div", { key: '2f925afceca4102049d7876ab4d1e33fa1ef5ef7', class: "sd-loading-modal" }, hAsync("div", { key: '0598cff340210ca9ec5e28fb1992cbbc1b8e5a06', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '3d699238c19ee66fd3afc72194133a865501cc08', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: 'd454a168360cd23a3e71482d67ee81d8eabdec58', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '0aa26dc830d1c4827f2ee0ca0bfdf4bb8cd2c9f5', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (hAsync(Host, { key: 'f40dcf4fa7e2ee7b4023be11be2b9361ec167610', style: hostStyle }, hAsync("div", { key: '02bab8da4e09156340e8e9badef25755b57193d5', class: "sd-loading-modal" }, hAsync("div", { key: '776833f7f85a5587dda59fe75e36ebb4b9109c3e', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '4bb9e434a4a2d6be6dbbe2ed4e89563bf7278c65', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '5da761513fdc38e5e646f72f75072e25d5313384', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '2bf9beb84ab4a6c1e6793db453e04b947c432d13', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get style() { return sdLoadingModalCss(); }
     static get cmpMeta() { return {
@@ -12159,7 +12524,14 @@ class SdModalContainer {
         });
     }
     attachModalEventListeners(id, modalEl) {
-        modalEl.addEventListener('sdOk', () => this.requestDismiss(id, 'confirm'));
+        modalEl.addEventListener('sdOk', () => {
+            const entry = this.entries.find(e => e.id === id);
+            if (entry?.modalRef._hasSubmit?.()) {
+                entry.modalRef._triggerSubmit?.();
+                return;
+            }
+            this.requestDismiss(id, 'confirm');
+        });
         modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
         modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
     }
@@ -12709,15 +13081,15 @@ class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (hAsync("sd-field", { key: '53c6935bbf98ed1eb0f28d6bed675ea369b0b2bc', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '8f0da8b179cd3946d625ab6b525a2ffd614a5333', class: {
+        return (hAsync("sd-field", { key: 'ad212dcbaf8e19cac070e6bdfa292ca614480fbc', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'b9c403df166e2f05f815ebf3851b6517b8afbd2a', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (hAsync("button", { key: '1be42c16d5e671c567d4768f505c2c17c50f1b60', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'dc074328208c8da2ee43ea2cb03dbc838b7d46c9', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (hAsync("button", { key: '206f45b19bf8dd56b65ff55fb65d760e36d80ba7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'd39cadc9a83cf7a0170144b8734a90f71d7aa9d1', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '84896d40d79e936480052ab45d618cd73550ee87', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: 'f2c8995b6c059c2a4130018b2ff0c7eabcd7abfb', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '0c97309540467d56ee3415001df7a027ba581a3d', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '9462f0c7ac028c038894ad184c7cf052e366e48c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && hAsync("span", { key: 'd6b1ca9f5991f1b2382dd4a35ae4f20832192e3c', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '56a59f94ca27e8ef4255cabdd5fe003c602bb8d6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '1b8fca91e893b5ade47ed63db4d4d54933c94e53', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && hAsync("span", { key: 'fdd4f4e680fe5de55cb68c848615ec6b00f00430', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '8cdfcc46a010fb0f503b48c34290fd096403524a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'ec8826370cd9d8c6054ca6ab216de6baa62d90db', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -12927,13 +13299,13 @@ class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (hAsync("div", { key: 'abfac6b075ce59ac37f747bf15729bf3879b1749', class: {
+        return (hAsync("div", { key: 'c1925f0f312cf5c18f08f158efb599e5b6f0d503', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, hAsync("div", { key: '6c8a3eb2ad708649054068a671cf156fe154fae3', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, hAsync("div", { key: '1f22be76697820bf455cea5476efa84a09d03c44', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'f0013d0057e6addb6a7fae39ebddd2c4f7af5bd0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'b85b00b637152d5071db0652b6682541fbfd6ab5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -13159,7 +13531,7 @@ class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (hAsync("div", { key: 'ea933af50e1ad1a29cf8d73ce70222e2f44c0bb5', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '50f1773d911175182888a98a0759b8d3d8829d2f', class: "sd-popup__header" }, hAsync("h2", { key: '4e21a73a6e26388c6b1c814a91ee8a79bf57c576', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'dd6ace33c6d8b3e20c0c85c95580efbf8ad6747c', class: "sd-popup__body" }, hAsync("slot", { key: 'e40fbea5b93016131df544f32b74676d2892204e' })), this.useFooter && (hAsync("footer", { key: '96b27f465a804859a15e9105fcd64c7205bc2143', class: "sd-popup__footer" }, hAsync("div", { key: '6715ba330610850ea235ddde5f2da00584204286', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '092aca3ad212b7218ce4ba247b78b7b45d9e4299', name: "footer-left" })), hAsync("sd-button", { key: '290cd49879cc4868be69ceb60567eab57b5f26fe', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (hAsync("div", { key: 'a978706454e3964818cc96b3a583880b952c2533', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '1164fc29d4040d51b74ebc45fedc4fd19038e900', class: "sd-popup__header" }, hAsync("h2", { key: '6ac1ea61e52f952f3bea4c4149222b4ff43b61db', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'fe8cebfc5ea513ae07e3a2987a8c7d9b36ed26e9', class: "sd-popup__body" }, hAsync("slot", { key: 'f7ce06ae60cc8af6dbae2b24db4fd6b00e13d365' })), this.useFooter && (hAsync("footer", { key: '84251ae1e48522fcf47d0081c9c0689e5fb236a6', class: "sd-popup__footer" }, hAsync("div", { key: 'c7d4a8546bd185c812a98569cc3b2a818cbb2963', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '474e09481472b96ff4eacc66502aa06987b463b8', name: "footer-left" })), hAsync("sd-button", { key: '2b23204ffad997f022dd06b772433ceb69950d04', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get style() { return sdPopupCss(); }
     static get cmpMeta() { return {
@@ -13230,7 +13602,7 @@ class SdPortal {
     createWrapper() {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
-            position: 'absolute',
+            position: 'fixed',
             top: '0',
             left: '0',
             zIndex: (this.zIndex ?? 998).toString(),
@@ -13304,13 +13676,13 @@ class SdPortal {
             const wrapperRect = this.wrapper.getBoundingClientRect();
             const availableBelow = viewport.height - parentRect.bottom - offset[1] - viewportPadding;
             const availableAbove = parentRect.top - offset[1] - viewportPadding;
-            let top = parentRect.bottom + window.scrollY + offset[1];
-            let left = parentRect.left + window.scrollX + offset[0];
+            let top = parentRect.bottom + offset[1];
+            let left = parentRect.left + offset[0];
             if (availableBelow < wrapperRect.height && availableAbove > availableBelow) {
-                top = parentRect.top + window.scrollY - wrapperRect.height - offset[1];
+                top = parentRect.top - wrapperRect.height - offset[1];
             }
-            const minTop = window.scrollY + viewportPadding;
-            const maxTop = window.scrollY + viewport.height - viewportPadding - wrapperRect.height;
+            const minTop = viewportPadding;
+            const maxTop = viewport.height - viewportPadding - wrapperRect.height;
             if (maxTop < minTop) {
                 top = minTop;
             }
@@ -13318,10 +13690,10 @@ class SdPortal {
                 top = Math.min(Math.max(top, minTop), maxTop);
             }
             if (parentRect.left + wrapperRect.width + offset[0] > viewport.width - viewportPadding) {
-                left = parentRect.right + window.scrollX - wrapperRect.width - offset[0];
+                left = parentRect.right - wrapperRect.width - offset[0];
             }
-            const minLeft = window.scrollX + viewportPadding;
-            const maxLeft = window.scrollX + viewport.width - viewportPadding - wrapperRect.width;
+            const minLeft = viewportPadding;
+            const maxLeft = viewport.width - viewportPadding - wrapperRect.width;
             if (maxLeft < minLeft) {
                 left = minLeft;
             }
@@ -13388,21 +13760,25 @@ class SdPortal {
         }
         return scrollParents;
     }
+    isInsideTarget(target) {
+        return !!((this.wrapper?.contains(target)) ||
+            (this.parentRef?.contains(target)));
+    }
     // 외부 클릭 감지
     handleMouseDown(e) {
-        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
+        this.isInsideClick = this.isInsideTarget(e.target);
     }
     handleWindowClick(e) {
         if (this.isInsideClick) {
             this.isInsideClick = false;
             return;
         }
-        if (this.wrapper?.contains(e.target))
+        if (this.isInsideTarget(e.target))
             return;
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: 'f7b160cb574608fa16f6edd27d259b85787e6144' });
+        return hAsync("slot", { key: '22e09896836d017f33a9c6b92772a00fc85f8997' });
     }
     static get watchers() { return {
         "open": [{
@@ -14092,15 +14468,15 @@ class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (hAsync("sd-field", { key: '29ea3526b5ef4a6f64bac810204cb7862a184503', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (hAsync("sd-field", { key: 'fced3680a535c60d5750908acf1226426e12182b', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, hAsync("div", { key: 'e23ef16cf8af59d2e9dd6ee39a297c4338e0a056', class: "sd-select", ref: el => {
+            } }, hAsync("div", { key: '38d53e92c022affd40bfc7951bbcdf7e02071446', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-select-trigger", { key: 'b6811644cb571bb738d604ce31b233ff76a32d16', ref: el => {
+            } }, hAsync("sd-select-trigger", { key: '9cd9bdb89db37204f9a5c312d26277da772b1209', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'b9b191bd7eefcb4d69be21f51740dd1cd993a3e7', ...portalProps }, hAsync("sd-select-listbox", { key: 'f04d988c8491eeea284dc4fdce91dadfd33965f8', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '8666dc885f3dcbae13011fd312eb72b7e6c906d9', ...portalProps }, hAsync("sd-select-listbox", { key: '04e6dba3d2837cbef68ded80bd2f89c5bbe9dc01', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -14174,54 +14550,6 @@ var selectTokens = {
 	select: select
 };
 
-const listItem = {
-	paddingY: "4",
-	paddingRight: "12",
-	gap: "8",
-	paddingLeft: {
-		depth1: "12",
-		depth2: "20",
-		depth3: "28"
-	},
-	typography: {
-		"default": {
-			fontWeight: "400",
-			fontSize: "12",
-			lineHeight: "20"},
-		selected: {
-			fontWeight: "700"}
-	},
-	bg: {
-		"default": "#FFFFFF",
-		hover: "#0075FF"
-	},
-	content: {
-		"default": "#222222",
-		hover: "#FFFFFF",
-		disabled: "#888888",
-		selected: "#0075FF"
-	},
-	depth1: {
-		bg: {
-			"default": "#EFF6FF"},
-		border: {
-			color: "#E1E1E1",
-			width: "1"
-		}},
-	depth2: {
-		middle: {
-			bg: "#F6F6F6"}
-	}};
-var listItemTokens = {
-	listItem: listItem
-};
-
-const listBox = {
-	radius: "4"};
-var listBoxTokens = {
-	listBox: listBox
-};
-
 // ── Select Trigger Tokens ──
 const SELECT_LAYOUT = {
     paddingX: selectTokens.select.sm.paddingX,
@@ -14301,10 +14629,10 @@ function countLeaves(options) {
     }, 0);
 }
 function filterTree(options, keyword) {
-    const lowerKeyword = keyword.toLowerCase();
+    const lowerKeyword = (keyword ?? '').toLowerCase();
     return options.reduce((acc, option) => {
         const labelText = isHtmlLabel(option.label) ? extractText(option.label) : option.label;
-        const selfMatch = labelText.toLowerCase().includes(lowerKeyword);
+        const selfMatch = labelText != null && labelText.toLowerCase().includes(lowerKeyword);
         if (option.children) {
             // 그룹: 자식은 항상 추가로 필터링한다.
             // - 자식 중 일치하는 게 있으면 그 자식들만 노출
@@ -14402,7 +14730,7 @@ class SdSelectListItem {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        hAsync("div", { key: '55ebe094653cb89d5c70916c3e0a2f4ccb5551f8', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        hAsync("div", { key: 'c964b0cf5b064c74a7e063be21350bca8124d77d', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -14412,7 +14740,7 @@ class SdSelectListItem {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'f636931bc20264db98e521b11b819610cda764cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: '89750bc08c03915b738da390f4255e7451aa9d6d', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '981e055f47aa512d18d61ae938b41942197f3088', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: 'ac34372d921afcb3eba0a51bed3dd70b4e8f1d0f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get style() { return sdSelectListItemCss(); }
     static get cmpMeta() { return {
@@ -14480,15 +14808,15 @@ class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (hAsync("div", { key: '6cf78c7d616dc21a7a6e806c184322d12cacb50d', class: {
+        return (hAsync("div", { key: '6250cee5611a36f6c5fb317d7d24abeae1ed142f', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, hAsync("div", { key: 'dd9fa44fed1f3ec7a222dacaa710cdf32ddbe6fc', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '2d65a81b7b6160ac4e93016adea0da43d5d01ec8', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '0d5c4bb09778518aa17a210a2d1a9eb620a1dd7b', ref: el => {
+            } }, hAsync("div", { key: 'fa48adb1406c8922b61083a19cc270f02ddab100', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '868519f09dc11fc4e9bde7a1148ce5ce666dd851', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: 'ff946fa2f360cd21eb785d13cb91e23f18abe05c', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'e9708437f310788bf8b9a4d358dea9b83cc88ed8', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'e70e4c0af6e11f89d2893ae5bb28887a0ed8a5ee', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'ed8b1c93809f823205f357b059a8b556e0278b1c', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '57b4af6446a565b6e1e95153e8553b1c3c363a33', name: "close", size: 12, color: "#888888" })))));
     }
     static get style() { return sdSelectListItemSearchCss(); }
     static get cmpMeta() { return {
@@ -14573,14 +14901,14 @@ class SdSelectListbox {
         return count >= SEARCH_THRESHOLD;
     }
     get filteredOptions() {
-        if (this.searchKeyword === '')
+        if (this.searchKeyword == null || this.searchKeyword === '')
             return this.options;
         if (this.isDepth)
             return filterTree(this.options, this.searchKeyword);
         const keyword = this.searchKeyword.toLowerCase();
         return this.options.filter(o => {
             const labelText = isHtmlLabel(o.label) ? extractText(o.label) : o.label;
-            return labelText.toLowerCase().includes(keyword);
+            return labelText != null && labelText.toLowerCase().includes(keyword);
         });
     }
     get isEmpty() {
@@ -14862,9 +15190,9 @@ class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (hAsync("div", { key: '6c2cbad13f8aaa8c0552068c7cbc35a147bee77d', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '052d783e27e2458aa397c77fe891dad4a440f09e', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'bba95f3c4475d01a65562ba079c8666e3325195d', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (hAsync("div", { key: 'fe30af2954ea5669f2071698e6ef9e2b26244d9b', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: 'aa7ce87d8c0c7163921445325121562603edd960', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'e8b5b3f73653ddc5096101f7109d427de1efa93a', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '2f55bbacbed71952903599db0739773176ac55fd', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '7fbde730eca0b8234475b714ea38a4393425410e', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -14945,7 +15273,7 @@ class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (hAsync("div", { key: 'b5a4f750c00889d0d9b985211063fc6b20bc2e38', ref: el => {
+        return (hAsync("div", { key: '0a929b8c0d68e25a64c352b5ea93b2e9c5f52611', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -14956,7 +15284,7 @@ class SdSelectTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'be0b61c0550618602ef016504fa1672f7520fa93', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: '9d60c3eeae54ce6ed9609534e3530d0349d1a3ff', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'd8c91e392604c462aa9228147eb18c0b2ac13851', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: '1afdcb944b30b675d4d2b31d6aeaa2ce41045d36', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));
@@ -15081,7 +15409,7 @@ class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (hAsync("label", { key: '70b779b6d8fc42e94110d7fb9d88aba22290af3a', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '41281a03161608ce507dd14c8a2a5a47063556ca', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '0c712f35c9594380b666a03387f0563cfcb1257d', class: "sd-switch__track" }, hAsync("div", { key: 'a96915c01e3a33017d9024e1aea9cd8f50fdd933', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '51d9d2f4a7072cb288ce4257df825ad2d9053f35', class: "sd-switch__label" }, this.label)));
+        return (hAsync("label", { key: '8038810bfcf78ddea9ef73706689e19fdfe0b57f', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'ee4c60f379f20f56af01bafb0533e6b64bb3054a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '8ce56df6d631b742331466ded340298a888576c7', class: "sd-switch__track" }, hAsync("div", { key: 'e02c48a7af9e005524b5d3ba8689e99dd42555f2', class: "sd-switch__knob" })), this.label && hAsync("span", { key: 'c1533c489ef8d0a2b8374d2eaeeb0ac743a9c507', class: "sd-switch__label" }, this.label)));
     }
     static get style() { return sdSwitchCss(); }
     static get cmpMeta() { return {
@@ -16014,24 +16342,24 @@ class SdTable {
             '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (hAsync(Host, { key: '164ba96033be0195fa50e3d4d684059b9c471479', style: hostStyle }, hAsync("div", { key: '2f1a1be73f86c72e7caa46981ee691d29bb237c7', class: "sd-table__container", style: {
+        return (hAsync(Host, { key: '337909d6279baf60effec188eb60422ce47c0585', style: hostStyle }, hAsync("div", { key: '46d53ced85e1700da3c6ca082d5752c0bb4a155b', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, hAsync("div", { key: '16976d24d4c21714183f9691b06c503b86388c54', class: {
+            } }, hAsync("div", { key: '159fad6dec16b3328d0da4ce22ae6bca537046e9', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--use-top': this.useTop,
-            } }, hAsync("div", { key: 'fdd0dcfbff4c3a5e441d720d2e1a39a69c51f9cf', class: {
+            } }, hAsync("div", { key: '22acbc7de61e11807b1a8919090286bb04a98bed', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (hAsync("div", { key: 'facb26c0d1651d4a2a6e0dee5c1b8ca73586de89', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '844b92fc9fc38f95d51092b698b67b685bcba076', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '458c8e24b85c0e7c99afe940c3d5856e63bc582a', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'bd29a77ac11da7e5d513955a4c4baa0dd89a623d', class: "sd-table__no-data" }, hAsync("div", { key: '7db0e8e3888e97638f3c78d560e844cc0f8b2944', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (hAsync("div", { key: '040736d35428396068d5237a17f23f8f70ba2541', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'eae076a71161e315951692f051522b8b5f094271', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'e8bdf5ae38a77988fce0a60ae9309f5d03b34928', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'd6ce4d4479eb927137b1afd5494a91494568b274', class: "sd-table__no-data" }, hAsync("div", { key: 'cfccc6382e7d0cc76d7f50515cd157ccd56cbac8', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, hAsync("slot", { key: 'fa175041907d4af7e5e0db7cad6e9a3e16e96901', name: "no-data" }, hAsync("span", { key: '3fae3a23d86dc543502f74574a4b5c3f026b9992' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '9ae98e0697e045b308f7e584fb496692acade8ba', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, hAsync("slot", { key: '45a2df0c0fa234408ca5a5fb76b5a74729cad482', name: "no-data" }, hAsync("span", { key: 'a126d8ce4149ac87e55f5a6acc67bbb3a650cdf4' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'aa4b94ed02700edd1846ca51235f47fe7de570be', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (hAsync("div", { key: 'a0da779351490332035ec784bc301ea2cb017afd', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '8c3bcd06e1644afaebabd3762cdb03900f727142', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '4bff157ac6e0fb5efe03663d4bbf58d67f8308b6', value: this.useInternalPagination
+            !this.useVirtualScroll && (hAsync("div", { key: 'f4d357d62af40e3ea8f35c799b4409c7deb2606f', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '6aad139f1f06d1851f30b5c8331899fe9d23ba37', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '85aa19726fca6dce007d8ffcc5550de8115546cb', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -16336,7 +16664,7 @@ class SdTabs {
         };
     }
     render() {
-        return (hAsync("div", { key: '1c670c50ff7f5489a77043bc030fe3a65eb894ab', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (hAsync("div", { key: 'fd65e555621e8b9f9c8e93578f41f1c24a8cbeda', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (hAsync("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -16575,7 +16903,7 @@ class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (hAsync("span", { key: 'f5dd5e267ffdde104f36ec7f19390357dbf03610', class: "sd-tag", style: {
+        return (hAsync("span", { key: 'b4d86dee7290a74d73fd27a9a4133c5c0ef9b750', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -16585,7 +16913,7 @@ class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '53c649171b1bba53bf71bbf8f382c0678f1a3a6f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '490c703ca9ce3d0516b1da89fec18045a750d715', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get style() { return sdTagCss(); }
     static get cmpMeta() { return {
@@ -16653,9 +16981,9 @@ class SdTbody {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'bc05db24c914d72f0480e0d6d9b594e21cf03153', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'ba4eb8fcbc184bcd245f47093ca5acfacc3aebf3', class: { tbody: true } }, [
+        return (hAsync(Host, { key: '1f9dba3a06233de0457c6fe7d2df39e0e406fb30', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '758d795512ff546ec23863a1b9a0940f5d0f445a', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            hAsync("slot", { key: '3c9d25b226dfb20b044a718416d3cdda13eff798' }),
+            hAsync("slot", { key: 'cd9755c4f082478b1e75a6efcf9b4e7a9a9767b4' }),
             this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -16830,7 +17158,7 @@ class SdTd {
         }
     }
     render() {
-        return (hAsync(Host, { key: '95f97474c4d00a35085c558bf43593322a9f69e7', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'f67d1e8b125c10446dac3abdfa0da01bfb83f470' })));
+        return (hAsync(Host, { key: '02464050ab6179a4d19bc5885aff8c2690cc3dd6', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'a4cde26644aea2e1a99690c407b7020b20bd3981' })));
     }
     static get watchers() { return {
         "field": [{
@@ -17010,7 +17338,7 @@ class SdTextLink {
         this.click.emit();
     };
     render() {
-        const sizeConfig = TEXT_LINK_SIZE_CONFIG[this.size];
+        const sizeConfig = TEXT_LINK_SIZE_CONFIG[this.size] ?? TEXT_LINK_SIZE_CONFIG.sm;
         const typo = this.underline ? sizeConfig.typography.underline : sizeConfig.typography.default;
         const labelClassName = ['sd-text-link__label', this.labelClass].filter(Boolean).join(' ');
         const iconColor = this.disabled
@@ -17024,7 +17352,7 @@ class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (hAsync("span", { key: '89b8117d19d149faf70d026ef560acdfa0096daa', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (hAsync("span", { key: '74e9dd05f3efa3ecfec4edca1b74c29bb7207894', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -17032,13 +17360,13 @@ class SdTextLink {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (hAsync("sd-icon", { key: '684c7b31abc6cb806944c03a016c4520c4721a7c', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '272f5b4c889b099ede7b5146ea4828648d89ad69', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (hAsync("span", { key: '142d37f856df2e5858df5d976e4d8ac4ee2f2607', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (hAsync("sd-icon", { key: 'e60be0764adf889af988fd887582776d44239e07', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '17996ef0620948fe1660945e68c9bb55e62fc982', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (hAsync("span", { key: 'b9cfc03d4295beb9956f661032ea3fd1d9acfbe9', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 height: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, hAsync("sd-icon", { key: '5da12b6077fb33912260b353cb6fe7d533eab937', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
+            } }, hAsync("sd-icon", { key: '6c2e4640a767acd5e66089e7e78f27c0fb8a0955', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
     }
     static get style() { return sdTextLinkCss(); }
     static get cmpMeta() { return {
@@ -17186,7 +17514,7 @@ class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (hAsync("sd-field", { key: '2a1cd03e4f0fa5457b3164f1b6b71d808633414c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'b4e25ced8e583ed3d6e8a6026db0d3a2f198acb4', class: "sd-textarea__content" }, hAsync("textarea", { key: '4faeceee380a7ab9a4ff337d16f46c4d7f42fa50', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (hAsync("sd-field", { key: '526fc1a73f13e5170125a570c5a1c8459931aa25', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'e3c52fccc564a2488eb9e0d9399437b76e919c6a', class: "sd-textarea__content" }, hAsync("textarea", { key: '3253873da3b9591e64a6dfd170c8d9ccb4861599', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{
@@ -17403,16 +17731,16 @@ class SdThead {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (hAsync(Host, { key: '822abd0e5ff71d9e55b6478d56c9277009983deb', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '7c690c49eb0d9be48637b8a6e92287fac22bf377', class: {
+        return (hAsync(Host, { key: '1e352d3996dc6cd60acd20c22c8c426edabaa9ea', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'd76dbdd5b03096197fe09d69c198ab3a5892106c', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, hAsync("tr", { key: '81c64bb5b06d7e8525ebceaf6a229034e90f7a48', class: "tr" }, this._selectable && (hAsync("th", { key: 'fe00535fb5cd54d053c17b3d3a6fa8869d483b8b', class: {
+            } }, hAsync("tr", { key: 'fb0c1f8ff93ddb8682b07e9b4f55eaf56b1be41a', class: "tr" }, this._selectable && (hAsync("th", { key: 'a53b9771dbec3ef7f3888bf9fc9393c683356c50', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: 'de1a3ddf9b3df06d8cc9b85431c31ff84b7b8218', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), hAsync("div", { key: 'afe516ce212b24abcb075b6e6eb661ffcb6ce297', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '8dc233b34b68a5daca91a60364ec8faffeb4b21d', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), hAsync("div", { key: 'bfc496c2468f3f81c1db4ffe70584a9229bd3512', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
@@ -17563,12 +17891,12 @@ class SdToast {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (hAsync("div", { key: '82c8063406a534e60c985d3c8321612077f75623', style: {
+        return (hAsync("div", { key: '656bf6231262cc7d974adbe5f0ce0053d03aca84', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, hAsync("div", { key: 'e83c5b7ddc0edec3fb9e29325dcb52e3295fad4d', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'd249e5915f0c92a0a2cff43dee5c61d809ffc7f0', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '088da81d0083cc0ca72f2bf59392a72d3f2ed4de', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '5cad9a3a81b00d8926d92d9895c4cca1389dc63b', class: "sd-toast__content" }, hAsync("span", { key: '1fbc72aac70fbb3bb630ad10343ea2c8f76f924c', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '769a85fa539bab8b478ef999cab615285a842085', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '77612614898b6abdade4b4599987cbb90bc09c4e', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '3bef6c0e7f3dec3f2b1f493f9c979a121bc897e9', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, hAsync("div", { key: '1e15e50c926ce65cea86db069dd1e79a642da01c', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '692277c23c4530d9fa0c5e26ea9d3b9759024dea', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '0a15993313f3a9d1f27d6ae727c2c248c3390701', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '9c1af0c9cedbb772b9b59ae80a0ff861066aa0de', class: "sd-toast__content" }, hAsync("span", { key: '2aacd89fe1cf31f271da027459a6cfaece3dbdbf', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '094a68e843d9ab50cea46a506d6ccdc1ebf375d7', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '7dabe182870a01cf285ee7441dfe39b07e943751', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '2a893c6ace888d8f21ce16c9dbf2a35b23bc9372', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get style() { return sdToastCss(); }
     static get cmpMeta() { return {
@@ -17821,7 +18149,7 @@ class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (hAsync("div", { key: '2b0bc86b7e2ea19a44f3c0b870ce5dec1de3a140', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (hAsync("div", { key: '44b4f34b231186fd00ef9c1a65bd68a83fced6da', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {
@@ -17979,7 +18307,7 @@ class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (hAsync("label", { key: 'f61e80701bc85205794aec0c960965d29b94a247', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '26a31febfdae6bebe55291d3454a177366dc3db0', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: '5657698c379c71e770b18006b5f5c69c122a06a7', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '8f72307d4efd029df200243cf670377aea2cff02', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -18153,7 +18481,7 @@ class SdTooltip {
         const bodyHTML = this.message && this.message.length > 0
             ? this.message.map(line => `<div>${line}</div>`).join('')
             : this.slotContentHTML;
-        return (hAsync(Fragment, { key: 'f00448f29503fd9adba06c7213123db1cebd4fbb' }, hAsync("div", { key: '07bd69c34c0e70e1feba5a836a0a68e27c5bae19', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '5d0bb60a23c2684b554b7ccfd0950f403b52271c', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '71c3e01f0f053c3e0fd5cfd2ca7ea293f84dab5f', ref: el => (this.menuEl = el), class: {
+        return (hAsync(Fragment, { key: 'c0d000057ed61fe7b6b4d92bc0df5e0c6d42d714' }, hAsync("div", { key: '4ae084008ddec50e912fa81efbe3adbe0428d7ea', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: 'd5a8718b4e4556b989e5439b89296a259d99c636', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: 'e81f2704ddbc90a19c1e8dd0c4660c4b057ca895', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -18161,7 +18489,7 @@ class SdTooltip {
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: 'afdcd221a431225919ef813eeda9c00cbf791842', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '9722c8b78eda399d00d760bf09bf588aed5ff049' })), hAsync("div", { key: 'befe12ad984ca7d902ce9da41199045687fd1057', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: 'b5dad91a49447251f69676c1ff9084c096d1b28f', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
+            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '735cfb9956644542afb3b9f65aea127c37d756b2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '53bac0c98b652b580b53b206d3da77deac0eea77' })), hAsync("div", { key: '50c55e606002225363364ca6b5238a55a25374ba', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '7ab15f030aef1ecda2a3be0c08af2c7ab4992f1c', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {