@sellmate/design-system 1.16.0 → 1.18.0

package/dist/esm/sd-button_2.entry.js

@@ -56,6 +56,11 @@ const Bell = (props) => {
     return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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" }), h("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" })));
@@ -176,6 +181,11 @@ const Copy = (props) => {
     return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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" }), h("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" }), h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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" }), h("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" }), h("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" })));
@@ -186,6 +196,16 @@ const DateIcon = (props) => {
     return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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" }), h("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" }), h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor" })));
+};
+
 const Download = (props) => {
     const { size = 24, ...rest } = props;
     return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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" })));
@@ -246,6 +266,11 @@ const Inline = (props) => {
     return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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" }), h("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" }), h("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" }), h("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" }), h("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" }), h("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" }), h("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" }), h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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" }), h("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" }), h("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" }), h("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" })));
@@ -266,6 +291,11 @@ const Minus = (props) => {
     return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" })));
@@ -346,11 +376,26 @@ const Setting = (props) => {
     return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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 (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("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" }), h("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" })));
@@ -413,6 +458,7 @@ const Icons = {
     attachFile: AttachFile,
     barcode: Barcode,
     bell: Bell,
+    bill: Bill,
     board: Board,
     box: Box,
     camera: Camera,
@@ -437,8 +483,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,
@@ -451,10 +500,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,
@@ -471,7 +522,10 @@ const Icons = {
     save: Save,
     search: Search,
     setting: Setting,
+    shield: Shield,
+    sidebar: Sidebar,
     star: Star,
+    store: Store,
     synchronize: Synchronize,
     updown: Updown,
     user: User,

package/dist/esm/sd-calendar_2.entry.js

@@ -246,7 +246,7 @@ const SdDatePickerTrigger = class {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '87ada0414ffc6404b27cf4a41ba7c9cb9903f498', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("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 => {
@@ -254,7 +254,7 @@ const SdDatePickerTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: 'e8eee3ed97ab7344e7658b7b22bc91f11aa0b068', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: 'ea25a13a72d00ca31fcddaf0183b520175ef7d93', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: '31d360adaf1a8a0d613d3809be7c724be9d7a29a', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: 'cf17fb4d5fdaadd99847ec9ce5440214c10a5797', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
 };
 SdDatePickerTrigger.style = sdDatePickerTriggerCss();

package/dist/esm/sd-chip-input.entry.js

@@ -1,5 +1,7 @@
 import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CAxodB5I.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
+import { s as systemTokens } from './system-BJfiMC9H.js';
+import { l as listBoxTokens, a as listItemTokens } from './component.listItem-U8VaRj9c.js';
 import { C as CHIP_TYPOGRAPHY, a as CHIP_COLORS, b as CHIP_LAYOUT } from './sd-chip.config-DDj5KTBF.js';
 
 const chipInput = {
@@ -74,8 +76,34 @@ const CHIP_INPUT_RESET = {
     iconColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
     labelColor: '#555555', // TODO: 토큰 반영 후 교체 (grey_70)
 };
+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%;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 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)}`;
 
 const SdChipInput = class {
     constructor(hostRef) {
@@ -83,7 +111,9 @@ const SdChipInput = class {
         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 = [];
@@ -95,6 +125,11 @@ const SdChipInput = class {
     rules = [];
     error = false;
     useReset = false;
+    maxCount;
+    suggestions = [];
+    loadingSuggestions = false;
+    recommendedItems = [];
+    loadingRecommendedItems = false;
     // sd-field props
     label = '';
     labelWidth = '';
@@ -110,8 +145,12 @@ const SdChipInput = class {
     focused = false;
     hovered = false;
     inputValue = '';
+    activeSuggestionIndex = -1;
+    suppressSuggestions = false;
+    suppressRecommendations = false;
     inputEl;
     formField;
+    chipInputRef;
     get value() {
         return this.internalValues;
     }
@@ -123,6 +162,17 @@ const SdChipInput = class {
             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)) {
@@ -147,6 +197,7 @@ const SdChipInput = class {
     update;
     focusEvent;
     blurEvent;
+    inputEvent;
     async sdValidate() {
         return this.formField?.sdValidate();
     }
@@ -159,6 +210,31 @@ const SdChipInput = class {
     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;
@@ -172,26 +248,54 @@ const SdChipInput = class {
             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;
             }
-            input.value = '';
-            this.inputValue = '';
-            this.update.emit(next);
+            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;
+            }
+        }
+        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))
@@ -212,16 +316,35 @@ const SdChipInput = class {
         }
     };
     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();
@@ -278,8 +401,84 @@ const SdChipInput = class {
             '--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 (h("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) }, h("div", { key: 'b4948c02ea157000002661ca9374b300af5e71a8', class: "sd-chip-input", onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), h("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 (h("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) }, h("div", { key: '0c6ae92de4dcb44ed4fbcd12f1dddef93cec12db', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("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,
@@ -287,7 +486,20 @@ const SdChipInput = class {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, h("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 && (h("div", { key: '65c366e84ba427704a9c89f6f5c6fdeeb5889554', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: 'e78f17df8e2fd9a91cc5f0450d22542720adef1b', class: "sd-chip-input__divider" }), h("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 }))))));
+                    : '' }, h("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 && (h("div", { key: '5b30bb4f89c9d3c9b18870acccad22bd97e1d748', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: '6fbf74a5a77b70789a609d28f5c4b6dd2aab57ef', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'fbb21a27bdd2aa38870cfd8d16b7e5293769eaf3', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("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 && (h("sd-portal", { key: '1682a89b513098f192f776af782aa9ee432574e8', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '3efb484bd5616e411824f7014a759a34a9e93d8b', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: 'b5b1d5e6db03f6fe60864b6c19e9b2c753468447', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (h("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": [{
@@ -295,6 +507,12 @@ const SdChipInput = class {
             }],
         "errors": [{
                 "errorsChanged": 0
+            }],
+        "suggestions": [{
+                "suggestionsChanged": 0
+            }],
+        "recommendedItems": [{
+                "recommendedItemsChanged": 0
             }]
     }; }
 };

package/dist/esm/sd-circle-progress.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-CAxodB5I.js';
 import { p as progressTokens } from './component.progress-D1vaasIp.js';
-import { s as systemTokens } from './system-j2khhcHY.js';
+import { s as systemTokens } from './system-BJfiMC9H.js';
 
 const spinner = {
 	color: {
@@ -70,7 +70,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, h("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" }, h("circle", { key: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("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 && (h("span", { key: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '35b4dc433f5e2bbd02dc3422b286da179472082f', style: hostStyle }, h("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" }, h("circle", { key: 'b0a54a2e155222a416a6bdcb75f4fe54d9de8270', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("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 && (h("span", { key: '16ec46b178d5f2f2f5ad245703c2f4362b8df261', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c199799d2466c75f91f1bc1f20fdb7e71c64ba0e', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();