@sellmate/design-system 0.0.49 → 0.0.51

package/dist/components/{p-CVDnYikl.js → p-S7M--xNH.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, F as Fragment } from './p-TFWJruz2.js';
 import { T as TooltipArrow } from './p-gnOKrd57.js';
-import { d as defineCustomElement$3 } from './p-DC5fpNnQ.js';
-import { d as defineCustomElement$2 } from './p-D2aGA3BX.js';
-import { d as defineCustomElement$1 } from './p-CRB0WJnC.js';
+import { d as defineCustomElement$3 } from './p-DiehM5Y0.js';
+import { d as defineCustomElement$2 } from './p-BsyfatBe.js';
+import { d as defineCustomElement$1 } from './p-CJ0qTKU7.js';
 
 const sdTooltipCss = "sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__content p{margin:0}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}";
 
@@ -55,20 +55,20 @@ const SdTooltip = /*@__PURE__*/ proxyCustomElement(class SdTooltip extends H {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: 'ca85f7063d836f7a33d893d262aea709e0db1d00' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: 'ab8656db09fc630085a684ef124486551e33f910', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: 'ccd2369218d5b4dcb23280760c584f214beea932', class: {
+        return (h(Fragment, { key: '44ccb9c1a2e9113160ccb516e62fbd175e139f50' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '83f82f27164df34a1a8e0d1d8975b4f89a82691a', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '544085a133cdbbe707ec0c2be35a9a42cd2372bc', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, h("i", { key: '077a1c19e4fa7a54a80dff168950ee0327240724', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '09d265c0412099b0bc64e6a5297011d7f4e74bb3', class: {
+            } }, h("i", { key: '4b335754d346d6ae244e83ccdcae25edf05a306a', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '567fc901e95b918fb0883f9c241836a10e1e58e9', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: '13a0d079cae19cf77c55b9aa3b8325dc1d4daf82', class: "sd-tooltip-menu__content", ref: el => {
+            } })), h("div", { key: '1475d6f5d76f4e3860e2524cb571eb2704460203', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && h("span", { key: '79315652fc9db9aca0f06ef0f402d3302b909275' }, this.el.textContent)), this.useClose && (h("div", { key: '5ab0323020a5d3f2c13d690a906fde8de9df36c9', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'deed089b5bb820f54471d44ff0c69e69ffcddf22', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '6c93da0c7f425ad1111b68c508476db74462e2ad', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && h("span", { key: 'f821b0aa74de05c7728b06a2bd78367e43703684' }, this.el.textContent)), this.useClose && (h("div", { key: '2068c369ef957cb25b9ec74e22e2c78f9ffa6232', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'f61156a86ce1b3fd4f2fb97e507711f9602ac157', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '3ba6f3f4dc5379eb2d13aecb9ec1d5d6fdf20dec', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get style() { return sdTooltipCss; }
 }, [768, "sd-tooltip", {
@@ -116,6 +116,6 @@ function defineCustomElement() {
 }
 
 export { SdTooltip as S, defineCustomElement as d };
-//# sourceMappingURL=p-CVDnYikl.js.map
+//# sourceMappingURL=p-S7M--xNH.js.map
 
-//# sourceMappingURL=p-CVDnYikl.js.map
+//# sourceMappingURL=p-S7M--xNH.js.map

package/dist/components/{p-CVDnYikl.js.map → p-S7M--xNH.js.map}

@@ -1 +1 @@
-{"file":"p-CVDnYikl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["sd-tooltip {\r\n [slot='content'] {\r\n  display: none;\r\n }\r\n\r\n .sd-tooltip {\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n }\r\n}\r\n\r\n.sd-tooltip-menu {\r\n width: fit-content;\r\n padding: 8px 16px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n align-items: start;\r\n justify-content: center;\r\n gap: 12px;\r\n\r\n &--with-close {\r\n  padding-right: 12px !important;\r\n }\r\n\r\n &__arrow {\r\n  position: absolute;\r\n  display: flex;\r\n  width: 9.6px;\r\n  height: 7.2px;\r\n  svg {\r\n   width: 100%;\r\n   height: 100%;\r\n  }\r\n  &--top {\r\n   bottom: -7.2px;\r\n   left: 50%;\r\n   transform: translateX(-50%);\r\n  }\r\n  &--bottom {\r\n   top: -7.2px;\r\n   left: 50%;\r\n   transform: translateX(-50%) rotate(180deg);\r\n  }\r\n  &--left {\r\n   right: -7.2px;\r\n   top: 50%;\r\n   transform: translateY(-50%) rotate(-90deg);\r\n  }\r\n  &--right {\r\n   left: -7.2px;\r\n   top: 50%;\r\n   transform: translateY(-50%) rotate(90deg);\r\n  }\r\n }\r\n\r\n &__content {\r\n  line-height: 20px;\r\n  font-weight: 500;\r\n\r\n  p {\r\n   margin: 0;\r\n  }\r\n }\r\n\r\n &__close-button {\r\n  padding-top: 4px;\r\n  display: flex;\r\n  button {\r\n   padding: 0;\r\n   background: none;\r\n   border: none;\r\n   cursor: pointer;\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-tooltip',\r\n styleUrl: 'sd-tooltip.scss',\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() trigger: 'hover' | 'click' = 'hover';\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\r\n @Prop() color: string = '#01BB4B';\r\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\r\n\r\n @Prop() icon: IconName = 'helpOutline';\r\n @Prop() iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop() buttonSize: ButtonSize = 'sm';\r\n @Prop() buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showTooltip: boolean = false;\r\n @State() slotContent: HTMLElement | null = null;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n  default: { background: 'oceanblue_85', text: 'white' },\r\n  caution: { background: 'red_20', text: 'red_70' },\r\n  notice: { background: 'orange_10', text: 'orange_65' },\r\n  accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\r\n };\r\n\r\n private buttonEl?: HTMLStencilElement;\r\n\r\n private handleClose = () => {\r\n  this.showTooltip = false;\r\n };\r\n\r\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\r\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\r\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\r\n componentWillLoad() {\r\n  const contentEl = this.el.querySelector('[slot=\"content\"]');\r\n  if (contentEl) {\r\n   this.slotContent = contentEl.cloneNode(true) as HTMLElement;\r\n  }\r\n }\r\n\r\n render() {\r\n  const handleTrigger =\r\n   this.trigger === 'hover'\r\n    ? {\r\n       onMouseEnter: () => (this.showTooltip = true),\r\n       onMouseLeave: () => (this.showTooltip = false),\r\n      }\r\n    : {\r\n       onClick: () => (this.showTooltip = !this.showTooltip),\r\n      };\r\n\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-tooltip\"\r\n      {...handleTrigger}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-tooltip\"\r\n      {...handleTrigger}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showTooltip && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={() => this.handleClose()}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-tooltip-menu': true,\r\n        [`sd-tooltip-menu--${this.type}`]: true,\r\n        [`sd-tooltip-menu--${this.placement}`]: true,\r\n        'sd-tooltip-menu--with-close': this.useClose,\r\n        [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n        [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\r\n       }}\r\n      >\r\n       <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow\r\n         class={{\r\n          [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n         }}\r\n        ></TooltipArrow>\r\n       </i>\r\n\r\n       <div\r\n        class=\"sd-tooltip-menu__content\"\r\n        ref={el => {\r\n         if (el && this.slotContent && !el.hasChildNodes()) {\r\n          el.appendChild(this.slotContent.cloneNode(true));\r\n         }\r\n        }}\r\n       >\r\n        {!this.slotContent && <span>{this.el.textContent}</span>}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <div class=\"sd-tooltip-menu__close-button\">\r\n         <button\r\n          type=\"button\"\r\n          aria-label=\"Close tooltip\"\r\n          title=\"Close tooltip\"\r\n          onClick={() => this.handleClose()}\r\n         >\r\n          <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n         </button>\r\n        </div>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"],"version":3}
+{"file":"p-S7M--xNH.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["sd-tooltip {\r\n [slot='content'] {\r\n  display: none;\r\n }\r\n\r\n .sd-tooltip {\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n }\r\n}\r\n\r\n.sd-tooltip-menu {\r\n width: fit-content;\r\n padding: 8px 16px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n align-items: start;\r\n justify-content: center;\r\n gap: 12px;\r\n\r\n &--with-close {\r\n  padding-right: 12px !important;\r\n }\r\n\r\n &__arrow {\r\n  position: absolute;\r\n  display: flex;\r\n  width: 9.6px;\r\n  height: 7.2px;\r\n  svg {\r\n   width: 100%;\r\n   height: 100%;\r\n  }\r\n  &--top {\r\n   bottom: -7.2px;\r\n   left: 50%;\r\n   transform: translateX(-50%);\r\n  }\r\n  &--bottom {\r\n   top: -7.2px;\r\n   left: 50%;\r\n   transform: translateX(-50%) rotate(180deg);\r\n  }\r\n  &--left {\r\n   right: -7.2px;\r\n   top: 50%;\r\n   transform: translateY(-50%) rotate(-90deg);\r\n  }\r\n  &--right {\r\n   left: -7.2px;\r\n   top: 50%;\r\n   transform: translateY(-50%) rotate(90deg);\r\n  }\r\n }\r\n\r\n &__content {\r\n  line-height: 20px;\r\n  font-weight: 500;\r\n\r\n  p {\r\n   margin: 0;\r\n  }\r\n }\r\n\r\n &__close-button {\r\n  padding-top: 4px;\r\n  display: flex;\r\n  button {\r\n   padding: 0;\r\n   background: none;\r\n   border: none;\r\n   cursor: pointer;\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-tooltip',\r\n styleUrl: 'sd-tooltip.scss',\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() trigger: 'hover' | 'click' = 'hover';\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\r\n @Prop() color: string = '#01BB4B';\r\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\r\n\r\n @Prop() icon: IconName = 'helpOutline';\r\n @Prop() iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop() buttonSize: ButtonSize = 'sm';\r\n @Prop() buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showTooltip: boolean = false;\r\n @State() slotContent: HTMLElement | null = null;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n  default: { background: 'oceanblue_85', text: 'white' },\r\n  caution: { background: 'red_20', text: 'red_70' },\r\n  notice: { background: 'orange_10', text: 'orange_65' },\r\n  accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\r\n };\r\n\r\n private buttonEl?: HTMLStencilElement;\r\n\r\n private handleClose = () => {\r\n  this.showTooltip = false;\r\n };\r\n\r\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\r\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\r\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\r\n componentWillLoad() {\r\n  const contentEl = this.el.querySelector('[slot=\"content\"]');\r\n  if (contentEl) {\r\n   this.slotContent = contentEl.cloneNode(true) as HTMLElement;\r\n  }\r\n }\r\n\r\n render() {\r\n  const handleTrigger =\r\n   this.trigger === 'hover'\r\n    ? {\r\n       onMouseEnter: () => (this.showTooltip = true),\r\n       onMouseLeave: () => (this.showTooltip = false),\r\n      }\r\n    : {\r\n       onClick: () => (this.showTooltip = !this.showTooltip),\r\n      };\r\n\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-tooltip\"\r\n      {...handleTrigger}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-tooltip\"\r\n      {...handleTrigger}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showTooltip && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={() => this.handleClose()}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-tooltip-menu': true,\r\n        [`sd-tooltip-menu--${this.type}`]: true,\r\n        [`sd-tooltip-menu--${this.placement}`]: true,\r\n        'sd-tooltip-menu--with-close': this.useClose,\r\n        [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n        [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\r\n       }}\r\n      >\r\n       <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow\r\n         class={{\r\n          [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n         }}\r\n        ></TooltipArrow>\r\n       </i>\r\n\r\n       <div\r\n        class=\"sd-tooltip-menu__content\"\r\n        ref={el => {\r\n         if (el && this.slotContent && !el.hasChildNodes()) {\r\n          el.appendChild(this.slotContent.cloneNode(true));\r\n         }\r\n        }}\r\n       >\r\n        {!this.slotContent && <span>{this.el.textContent}</span>}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <div class=\"sd-tooltip-menu__close-button\">\r\n         <button\r\n          type=\"button\"\r\n          aria-label=\"Close tooltip\"\r\n          title=\"Close tooltip\"\r\n          onClick={() => this.handleClose()}\r\n         >\r\n          <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n         </button>\r\n        </div>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-C930Kn80.js → p-wQDv-v0B.js}

@@ -10,7 +10,7 @@ const SdLoadingSpinner = /*@__PURE__*/ proxyCustomElement(class SdLoadingSpinner
         }
     }
     render() {
-        return (h(Host, { key: 'd064701b25e190fc5b7feefb542cbc7d30afc3f3' }, h("svg", { key: 'ec37a9ebea3e5b48817c687fae543186bb3cf29a', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '0b61caa65955019ddb08ed52a51718cf3f55a6e3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Host, { key: '7538c9986c448d666ea1993324d8fd811c2ba289' }, h("svg", { key: '7e254a0b15ecda3e480582c336b33b1020715125', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '8a6356ba2e8d42c9d1c789ba5676ca6f7485cda1', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get style() { return sdLoadingSpinnerCss; }
 }, [256, "sd-loading-spinner"]);
@@ -29,6 +29,6 @@ function defineCustomElement() {
 }
 
 export { SdLoadingSpinner as S, defineCustomElement as d };
-//# sourceMappingURL=p-C930Kn80.js.map
+//# sourceMappingURL=p-wQDv-v0B.js.map
 
-//# sourceMappingURL=p-C930Kn80.js.map
+//# sourceMappingURL=p-wQDv-v0B.js.map

package/dist/components/{p-C930Kn80.js.map → p-wQDv-v0B.js.map}

@@ -1 +1 @@
-{"file":"p-C930Kn80.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,ypBAAypB;;MCMxqB,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;IAC5B,MAAM,GAAA;AACL,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kCAAkC,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAA,EAC7F,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EAAA,mBAAA,EACE,IAAI,EAAA,CACb,CACL,CACA;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-loading-spinner/sd-loading-spinner.scss?tag=sd-loading-spinner","src/components/sd-loading-spinner/sd-loading-spinner.tsx"],"sourcesContent":["sd-loading-spinner {\r\n display: block;\r\n\r\n .sd-loading-spinner {\r\n  animation: sd-loading-spin 2s linear infinite;\r\n  transform-origin: center center;\r\n  .path {\r\n   animation: sd-loading-spin-path 1.5s ease-in-out infinite;\r\n  }\r\n\r\n  @keyframes sd-loading-spin {\r\n   0% {\r\n    transform: rotate3d(0, 0, 1, 0deg);\r\n   }\r\n   25% {\r\n    transform: rotate3d(0, 0, 1, 90deg);\r\n   }\r\n   50% {\r\n    transform: rotate3d(0, 0, 1, 180deg);\r\n   }\r\n   75% {\r\n    transform: rotate3d(0, 0, 1, 270deg);\r\n   }\r\n   100% {\r\n    transform: rotate3d(0, 0, 1, 359deg);\r\n   }\r\n  }\r\n\r\n  @keyframes sd-loading-spin-path {\r\n   0% {\r\n    stroke-dasharray: 1, 200;\r\n    stroke-dashoffset: 0;\r\n   }\r\n   50% {\r\n    stroke-dasharray: 89, 200;\r\n    stroke-dashoffset: -35px;\r\n   }\r\n\r\n   100% {\r\n    stroke-dasharray: 89, 200;\r\n    stroke-dashoffset: -124px;\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-loading-spinner',\r\n styleUrl: 'sd-loading-spinner.scss',\r\n})\r\nexport class SdLoadingSpinner {\r\n render() {\r\n  return (\r\n   <Host>\r\n    <svg class=\"sd-loading-spinner text-positive\" width=\"72px\" height=\"72px\" viewBox=\"25 25 50 50\">\r\n     <circle\r\n      class=\"path\"\r\n      cx=\"50\"\r\n      cy=\"50\"\r\n      r=\"20\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"5\"\r\n      stroke-miterlimit=\"10\"\r\n     ></circle>\r\n    </svg>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}
+{"file":"p-wQDv-v0B.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,ypBAAypB;;MCMxqB,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;IAC5B,MAAM,GAAA;AACL,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kCAAkC,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAA,EAC7F,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EAAA,mBAAA,EACE,IAAI,EAAA,CACb,CACL,CACA;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-loading-spinner/sd-loading-spinner.scss?tag=sd-loading-spinner","src/components/sd-loading-spinner/sd-loading-spinner.tsx"],"sourcesContent":["sd-loading-spinner {\r\n display: block;\r\n\r\n .sd-loading-spinner {\r\n  animation: sd-loading-spin 2s linear infinite;\r\n  transform-origin: center center;\r\n  .path {\r\n   animation: sd-loading-spin-path 1.5s ease-in-out infinite;\r\n  }\r\n\r\n  @keyframes sd-loading-spin {\r\n   0% {\r\n    transform: rotate3d(0, 0, 1, 0deg);\r\n   }\r\n   25% {\r\n    transform: rotate3d(0, 0, 1, 90deg);\r\n   }\r\n   50% {\r\n    transform: rotate3d(0, 0, 1, 180deg);\r\n   }\r\n   75% {\r\n    transform: rotate3d(0, 0, 1, 270deg);\r\n   }\r\n   100% {\r\n    transform: rotate3d(0, 0, 1, 359deg);\r\n   }\r\n  }\r\n\r\n  @keyframes sd-loading-spin-path {\r\n   0% {\r\n    stroke-dasharray: 1, 200;\r\n    stroke-dashoffset: 0;\r\n   }\r\n   50% {\r\n    stroke-dasharray: 89, 200;\r\n    stroke-dashoffset: -35px;\r\n   }\r\n\r\n   100% {\r\n    stroke-dasharray: 89, 200;\r\n    stroke-dashoffset: -124px;\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-loading-spinner',\r\n styleUrl: 'sd-loading-spinner.scss',\r\n})\r\nexport class SdLoadingSpinner {\r\n render() {\r\n  return (\r\n   <Host>\r\n    <svg class=\"sd-loading-spinner text-positive\" width=\"72px\" height=\"72px\" viewBox=\"25 25 50 50\">\r\n     <circle\r\n      class=\"path\"\r\n      cx=\"50\"\r\n      cy=\"50\"\r\n      r=\"20\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"5\"\r\n      stroke-miterlimit=\"10\"\r\n     ></circle>\r\n    </svg>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/sd-badge.js

@@ -15,7 +15,7 @@ const SdBadge$1 = /*@__PURE__*/ proxyCustomElement(class SdBadge extends H {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (h(Host, { key: '88cb068e4c73a9abb0c4b7c4321ec7d861ec1395' }, h("div", { key: '09371f2e449a0f1db15fe08d7045313a86555f70', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '4e7bb2717bc999d06dfa861474a833448f497431', class: "sd-badge__dot" }), h("div", { key: '0711cac45b6535cd67279785dfe6a89cbbd6739a', class: "sd-badge__label" }, this.label))));
+        return (h(Host, { key: '2599667a6e14485cc9aeb5cb7f9f8c2fa6be9730' }, h("div", { key: '411c02845794514d4ae7c0849e4e9479bfce257b', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '72c8fe5094b0c8dc4065dd0646200c052cd7cfca', class: "sd-badge__dot" }), h("div", { key: 'e9e338154b11ba92b32a748d11d09899fad29442', class: "sd-badge__label" }, this.label))));
     }
     static get style() { return sdBadgeCss; }
 }, [770, "sd-badge", {

package/dist/components/sd-button.js

@@ -1,4 +1,4 @@
-import { S as SdButton$1, d as defineCustomElement$1 } from './p-DC5fpNnQ.js';
+import { S as SdButton$1, d as defineCustomElement$1 } from './p-DiehM5Y0.js';
 
 const SdButton = SdButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-card.js

@@ -12,7 +12,7 @@ const SdCard$1 = /*@__PURE__*/ proxyCustomElement(class SdCard extends H {
     bordered = true;
     class = '';
     render() {
-        return (h(Host, { key: 'e9653557b36889a75002c32bde005c7b480b2f4b' }, h("div", { key: 'e34f53b49bdc412eaf82dbe21918cd6599d1d2c6', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: 'b5d06b44a1a960fe12424f43a39647a4646610d6' }))));
+        return (h(Host, { key: 'f19b796cbe69bb22165a52864cf0eef7c8afeac1' }, h("div", { key: '2a6272608b5fca143883d477ddb7f8fdb60acb0d', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: '60f687272faa536e182e9a65ea0c07a233194bd8' }))));
     }
     static get style() { return sdCardCss; }
 }, [772, "sd-card", {

package/dist/components/sd-checkbox.js

@@ -1,4 +1,4 @@
-import { S as SdCheckbox$1, d as defineCustomElement$1 } from './p-D2YMmHfl.js';
+import { S as SdCheckbox$1, d as defineCustomElement$1 } from './p-CkKxyn_K.js';
 
 const SdCheckbox = SdCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-date-picker.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-TFWJruz2.js';
 import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
 import { d as defineCustomElement$5 } from './p-DY6t0qQj.js';
-import { d as defineCustomElement$4 } from './p-D2aGA3BX.js';
-import { d as defineCustomElement$3 } from './p-RZm_wGW3.js';
-import { d as defineCustomElement$2 } from './p-LziGti_p.js';
+import { d as defineCustomElement$4 } from './p-BsyfatBe.js';
+import { d as defineCustomElement$3 } from './p-C6tAa8Q4.js';
+import { d as defineCustomElement$2 } from './p-Dgxczhd0.js';
 
 const sdDatePickerCss = ".sd-date-picker.sc-sd-date-picker-h{width:160px;display:inline-block}.sd-date-picker__menu.sc-sd-date-picker{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker button.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker button.sc-sd-date-picker{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav__current.sc-sd-date-picker{width:40px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav__current.sc-sd-date-picker{width:100px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker .day.sc-sd-date-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__body.sc-sd-date-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}";
 
@@ -87,7 +87,7 @@ const SdDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDatePicker exten
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '3fe32fb440e95d43a7ba5ae40eebfec5b1f292f7', class: "sd-date-picker" }, h("sd-input", { key: '8aa313f14bd0305c0d28ba8e388c5c7d2ae2d3ec', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: '350af44747b5f87c0e25dc01fc8aa25590363d5b', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '1c05d0d0b9cd54bd67b1d4411bd3ad2aded758ba', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '273c93d7b9635ebfab1350568f30da3f62996003', class: "sd-date-picker__menu" }, h("div", { key: '9da1cf5d0dc35f00018a2718787007749a84ca99', class: "sd-date-picker__header" }, h("div", { key: 'c2afcc7006276eca26d4f0d0c91350a0dee070cf', class: "year-nav" }, h("button", { key: '1b53d6e96c6f9ab93d67440450b35be096e9607b', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '7acd8f69406a83bcc9fef1745523d997d1b3f219', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'ad5f412960af38938d6efea1f0909293c3c6682c', class: "year-nav__current" }, this.currentYear), h("button", { key: 'fe2480d51d8a8a3b09d3d0d5e5c5c53982ebd20d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'e7175f73e5efcef04a2b33a2ee7a57d2b025c3d8', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '76dcf13a864dffcb6a49683b590c19efb05c7367', class: "month-nav" }, h("button", { key: '2d300218750da2716e2558ff3145337ee6bcfa80', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '1972506ecb42922b6c742bd34186bdbf23f8d6b5', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '3037310072a6dcb71f2e662fb1dcfa07d44f2a70', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '7cd60a470fd27f2028935748047f76945fc4fe99', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'd656f3dd638cab72e94f12036e77f46b9ab31c7f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '1710f916652929515916a122affda7cbdd311153', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '201f7499819e88f291a3889fcbe854d2e2145fde', class: "sd-date-picker__body" }, [
+        return (h(Host, { key: '6f835c6778d618a0285dc070c43022e4787e9eb6', class: "sd-date-picker" }, h("sd-input", { key: '9d09bd679c1c239ad6106464b9b6b2bd2fd164cc', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: 'd3790bf739adeef7b381e983bb7426e8684b9e66', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '6e6833f13a1ec4083f06b09ebc61e378e47599cf', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'd6b36f1a26904a8287bcb3b3d64981a0f628a911', class: "sd-date-picker__menu" }, h("div", { key: '37b9795686360b719b69a9a385a7e4bf27c217e5', class: "sd-date-picker__header" }, h("div", { key: 'c885554693c93eddb3d1148e12ca8610f23625a4', class: "year-nav" }, h("button", { key: '8628fca079f02183aaf07f953ebcf9e4141060f3', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '3597f373c01ff11b4dcc97e692cedc31bcd8d548', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'ed71145dc3a34b8ae491088f65ea43b4cd0acec3', class: "year-nav__current" }, this.currentYear), h("button", { key: 'b1bbd644e7ff7bb8141758e3b897c93f5d2c1a38', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '5a55e81f9e01f3acb73bbb7b6c6f4034430ad2a4', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '1e95092fd966e7d8c2480fd8823e8886a141c83b', class: "month-nav" }, h("button", { key: 'e49b6e1528ff2f814e021fb70a7df0425f0efb11', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '4d0e61ccb0fcf006d11b48acff31593c95426acd', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '8eacea2970a8b9f2963f4afd3f0e7aa4ee2bdca9', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'd209068e6b0e244b572c42cdc5a3ece8ed4be0fa', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'a067b7c5e59ae9b32f1e13e1a80b49055b451a80', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'c99e6a24b1113f5c78d17586a9491053e23ee053', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '9e243d5edf78f0fd606e787b714ae993c549b828', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/components/sd-date-range-picker.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, c as Host } from './p-TFWJruz2.js';
 import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
 import { d as defineCustomElement$5 } from './p-DY6t0qQj.js';
-import { d as defineCustomElement$4 } from './p-D2aGA3BX.js';
-import { d as defineCustomElement$3 } from './p-RZm_wGW3.js';
-import { d as defineCustomElement$2 } from './p-LziGti_p.js';
+import { d as defineCustomElement$4 } from './p-BsyfatBe.js';
+import { d as defineCustomElement$3 } from './p-C6tAa8Q4.js';
+import { d as defineCustomElement$2 } from './p-Dgxczhd0.js';
 
 const addDays = (inputDate, days) => {
     const [year, month, day] = inputDate.split('-').map(Number);
@@ -162,9 +162,9 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'b5f7be556686c3bb50147ed0b28cd47698d90e5c', class: "sd-date-range-picker" }, h("sd-input", { key: 'a457ab2b61354fe100fa31e1ab357649ceef63aa', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: 'a546e1ab7d199688377b3852b51711b283ed9735', class: "sd-date-range-picker" }, h("sd-input", { key: 'f7edc5f8e03d0f781f906cf1abc9f6eddd93f3b6', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: 'cc068925914495e21172020763c18627d3c8e8a2', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0486ab86c422d98aa2e86bd4d327cc42f0e72ae9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '8b86d95d279d6f3036f2aacc0421ec4f715d91e7', class: "sd-date-range-picker__menu" }, h("div", { key: '0fa223b5fdc0a8195e1fbd433c235dc4473ad146', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '2d512e7ffa9461f18ca67236a0539cdabcb384ac', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'aa23e83e33bfaaaee02f771e9aa3e7f84fe7ceae', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '5c6e6ea57120081b466faa827e7bb014b5d20905', class: "header-label" }, this.prevYear), h("button", { key: '51f89a92ca77a98283a883316981b7df08e1fcef', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '19a594a16b65668db23f5e77e61db7182591ac57', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '21073a5c2d4dd68aa4dce7be48eab0339dd3791d', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: 'dbd1acab929f74afd822c9c9e2ca4bd8e6e25c02', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '86f98f816b61f3dcb49eb284266c32dd644d1641', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '221f126d9d4c92daf84312459b4e6aa9069b4131', class: "sd-date-range-picker__menu" }, h("div", { key: 'c3b10e8544af4e52509a90650946045c33cf909c', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '253cdb65199cff3d4344eb0a1b0920939f917a18', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '33480e0a2f498f5481908e9e1541bb1a26f2b9d2', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '2db9fed11f2c923a6fba475cacb72cc1865beecd', class: "header-label" }, this.prevYear), h("button", { key: '36603bc40a926337d45f60b416d6dabaaa3cfc7e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '8d46e41a1fc5d4de945f92c5ae8842f8dd2c75cf', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '236b93e84d17746e4f8852a9beda0d398edf096b', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===

package/dist/components/sd-guide.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-TFWJruz2.js';
 import { c as colors } from './p-BYf-ybt2.js';
-import { d as defineCustomElement$4 } from './p-DC5fpNnQ.js';
-import { d as defineCustomElement$3 } from './p-D2aGA3BX.js';
-import { d as defineCustomElement$2 } from './p-LziGti_p.js';
+import { d as defineCustomElement$4 } from './p-DiehM5Y0.js';
+import { d as defineCustomElement$3 } from './p-BsyfatBe.js';
+import { d as defineCustomElement$2 } from './p-Dgxczhd0.js';
 
 const sdGuideCss = "@charset \"UTF-8\";sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-block;height:fit-content}sd-guide .sd-guide{display:inline-block}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #12b553}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:\"•\"}.sd-guide__popup__list__item--depth-2{padding-left:26px}";
 
@@ -60,11 +60,11 @@ const SdGuide$1 = /*@__PURE__*/ proxyCustomElement(class SdGuide extends H {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h(Host, { key: 'd9bf823d000e8181c61798d9656c428c4a3cd6b6', style: {
+        return (h(Host, { key: '32cff34a733ab423b4db37aaa91f4c63152566a3', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: 'fd25039c644bdd6e802624f2cbef3bfb4d797220', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '3bb296fa9a9419534af30fe3d2e2dd1bffe2aa53', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '2aacb47b2acedceb9114737da8d061022fea27a8', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'd4e3a1b49d15782a2b4cc50d6ebfc62ca19da555', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            } }, h("sd-button", { key: '7efc84462239fcab6ac7d532d75ff418bebee957', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '9868dd7fd8b5e42cfd6b2011c2a8679a8f9ece02', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '974448ac29c162372a7a5e8ba12c493d4e8a2287', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'e28679c5cdeac9ca8e0b5701d4979a94a7c4f182', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
             // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), h("div", { key: 'ca5d8332066af0bac3083443488c3ebe5c064931', class: "sd-guide__popup__header" }, h("sd-icon", { key: '752a3ea8dde595e459b0681b317486c3896aa71f', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '52d5bdae6b82d9aabbf8dc98c2f05379fb8ffe7d', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '07fe0fe4f2b9831721e95f318dfcd818ee11a415', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), h("div", { key: 'c598b70154a4b2c4a4a2790a0072eaf4f7de7099', class: "sd-guide__popup__header" }, h("sd-icon", { key: '6837f7934c24a7da2bf0558d7cdcd5effcdb5481', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '6b7b8f9d6f3602f3cd036efdd308318988ce339b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'fbee7a0d4ad49cd6cac2ef5bb4617937aaff5882', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/components/sd-icon.js

@@ -1,4 +1,4 @@
-import { S as SdIcon$1, d as defineCustomElement$1 } from './p-D2aGA3BX.js';
+import { S as SdIcon$1, d as defineCustomElement$1 } from './p-BsyfatBe.js';
 
 const SdIcon = SdIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-input.js

@@ -1,4 +1,4 @@
-import { S as SdInput$1, d as defineCustomElement$1 } from './p-RZm_wGW3.js';
+import { S as SdInput$1, d as defineCustomElement$1 } from './p-C6tAa8Q4.js';
 
 const SdInput = SdInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-loading-spinner.js

@@ -1,4 +1,4 @@
-import { S as SdLoadingSpinner$1, d as defineCustomElement$1 } from './p-C930Kn80.js';
+import { S as SdLoadingSpinner$1, d as defineCustomElement$1 } from './p-wQDv-v0B.js';
 
 const SdLoadingSpinner = SdLoadingSpinner$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-modal-card.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-TFWJruz2.js';
 import { r as resolveColor } from './p-BYf-ybt2.js';
-import { d as defineCustomElement$3 } from './p-DC5fpNnQ.js';
-import { d as defineCustomElement$2 } from './p-D2aGA3BX.js';
+import { d as defineCustomElement$3 } from './p-DiehM5Y0.js';
+import { d as defineCustomElement$2 } from './p-BsyfatBe.js';
 
 const sdModalCardCss = "sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2)}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}";
 

package/dist/components/sd-pagination.js

@@ -1,4 +1,4 @@
-import { S as SdPagination$1, d as defineCustomElement$1 } from './p-BozMKCTh.js';
+import { S as SdPagination$1, d as defineCustomElement$1 } from './p-1SxxSEqq.js';
 
 const SdPagination = SdPagination$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-popover.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, F as Fragment } from './p-TFWJruz2.js';
 import { T as TooltipArrow } from './p-gnOKrd57.js';
-import { d as defineCustomElement$4 } from './p-DC5fpNnQ.js';
-import { d as defineCustomElement$3 } from './p-D2aGA3BX.js';
-import { d as defineCustomElement$2 } from './p-CRB0WJnC.js';
+import { d as defineCustomElement$4 } from './p-DiehM5Y0.js';
+import { d as defineCustomElement$3 } from './p-BsyfatBe.js';
+import { d as defineCustomElement$2 } from './p-CJ0qTKU7.js';
 
 const sdPopoverCss = ".sd-popover{position:relative;cursor:pointer;display:inline-block}";
 
@@ -43,11 +43,11 @@ const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '596dfc584e73c7d7093e15a91046e14b7801138a' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: '9bf784d6946cd5fd8b6ecfd3a6e9d976f44a2a90', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '409afdeee8e96ce019594cd2aaa16034e4339a35', class: {
+        return (h(Fragment, { key: '8c7efcbf49754c518a6a9cf492b300c07ef980f5' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: 'c61e5138ebba94a31d621ff1b3439d3c37ceb629', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'c88706aa4e7aec4a105459e429a8cfa9313c7aa8', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '2ff3545fb7b13c11d4f128616a68f0a230087447', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '3da84311b01c95d92b91327ce66e49e1d0243b37' })), h("div", { key: 'aa861155d8c9194dffafd8b834e58108995f33ed', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '534c0871ff6b909c87eba179be23c7e2fa4ce0e9', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'a601e50189ca95fa007e68edf64c1a0aa1e990d0', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '63ee5c3dcdf167e0b35b5ed96a516b91ff007355', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '6f8f0a6dfd113603105652686b5426e3a0313d4e', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '9f1aedb7e6e9e519fa890856ea9c185e393f5f43', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'f79cb7d4784bc70d89ed5a3d5fa63af3ffb94921', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'e5e6148d67858f972b00ec55e174685cd87c6608' })), h("div", { key: '17d4f8a35d85bf48a6155bf0581f37530c5ea492', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '26d5195b0cde90c8b9251622180021eb33027f6b', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'd1eca72d7d97d16a6caa6a9094c93555ea0cbd53', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '2c8258470a30a604398f680b5d02527303d3b6c7', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '480f0a2b1e9aa0f6d31257f1a13fe441c3685e2b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '73d77f0e344a86c4a81c0aab4289b6fb5d3603c2', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]

package/dist/components/sd-portal.js

@@ -1,4 +1,4 @@
-import { S as SdPortal$1, d as defineCustomElement$1 } from './p-LziGti_p.js';
+import { S as SdPortal$1, d as defineCustomElement$1 } from './p-Dgxczhd0.js';
 
 const SdPortal = SdPortal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-progress.js

@@ -22,10 +22,10 @@ const SdProgress$1 = /*@__PURE__*/ proxyCustomElement(class SdProgress extends H
         error: '#FB4444',
     };
     render() {
-        return (h(Host, { key: 'fa4a0bdd1e76231bc3ff349c5e94a18f1d747bf4', style: {
+        return (h(Host, { key: 'd491ac2f5e734f653a991afa1c9e25ceb9947335', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '2c356835e29ec88765f0be0efbe9ee416f1e27ea', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '0741e3f5492c4f870cc9657e27d3d1a1d73bee10', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));

package/dist/components/sd-radio-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SdRadioGroup extends Components.SdRadioGroup, HTMLElement {}
+export const SdRadioGroup: {
+    prototype: SdRadioGroup;
+    new (): SdRadioGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sd-radio-group.js

@@ -0,0 +1,99 @@
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-TFWJruz2.js';
+
+const sdRadioGroupCss = "sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}sd-radio-group .sd-radio-group__option{width:fit-content;display:flex;align-items:center;gap:8px;font-weight:400;font-size:12px;line-height:20px;cursor:pointer}sd-radio-group .sd-radio-group__option:has(input:disabled){cursor:default}sd-radio-group .sd-radio-group__option input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;cursor:pointer;accent-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked{border-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked::before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio-group .sd-radio-group__option input:disabled{cursor:default;border-color:#cccccc;background-color:#eeeeee}sd-radio-group .sd-radio-group__option input:disabled:checked::before{background-color:#cccccc}sd-radio-group .sd-radio-group__option input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio-group .sd-radio-group__label{font-size:12px;color:#333333;line-height:20px;user-select:none}sd-radio-group .sd-radio-group__option--disabled .sd-radio-group__label{color:#888888}";
+
+const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.sdChange = createEvent(this, "sdChange");
+    }
+    value;
+    radioOptions = [];
+    direction = 'vertical';
+    disabled = false;
+    name;
+    selectedValue;
+    sdChange;
+    componentWillLoad() {
+        if (this.value) {
+            this.selectedValue = this.value;
+        }
+    }
+    valueChanged(newValue) {
+        this.selectedValue = newValue;
+    }
+    handleRadioChange = (optionValue, optionDisabled) => {
+        if (this.disabled || optionDisabled)
+            return;
+        this.selectedValue = optionValue;
+        this.value = optionValue;
+        this.sdChange.emit(optionValue);
+    };
+    isOptionSelected(option) {
+        return this.selectedValue === option.value;
+    }
+    isOptionDisabled(option) {
+        return this.disabled || !!option.disabled;
+    }
+    getRadioClasses(option) {
+        const classes = [
+            'sd-radio-group__option',
+            this.isOptionSelected(option)
+                ? 'sd-radio-group__option--selected'
+                : 'sd-radio-group__option--unselected',
+        ];
+        if (this.isOptionDisabled(option)) {
+            classes.push('sd-radio-group__option--disabled');
+        }
+        return classes.join(' ');
+    }
+    getGroupClasses() {
+        const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];
+        return classes.join(' ');
+    }
+    render() {
+        const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
+        return (h("div", { key: 'f817ced0e784c418c09c6c3e1cd6d9e045d32598', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+            const isSelected = this.isOptionSelected(option);
+            const isDisabled = this.isOptionDisabled(option);
+            return (h("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-group__label" }, option.label)));
+        })));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return sdRadioGroupCss; }
+}, [768, "sd-radio-group", {
+        "value": [1544],
+        "radioOptions": [1040],
+        "direction": [1],
+        "disabled": [4],
+        "name": [1],
+        "selectedValue": [32]
+    }, undefined, {
+        "value": ["valueChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-radio-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-radio-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SdRadioGroup$1);
+            }
+            break;
+    } });
+}
+
+const SdRadioGroup = SdRadioGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SdRadioGroup, defineCustomElement };
+//# sourceMappingURL=sd-radio-group.js.map
+
+//# sourceMappingURL=sd-radio-group.js.map

package/dist/components/sd-radio-group.js.map

@@ -0,0 +1 @@
+{"file":"sd-radio-group.js","mappings":"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","names":["SdRadioGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-group/sd-radio-group.scss?tag=sd-radio-group","src/components/sd-radio-group/sd-radio-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-radio-group {\r\n display: inline-block;\r\n\r\n .sd-radio-group {\r\n  display: flex;\r\n\r\n  &--vertical {\r\n   flex-direction: column;\r\n   gap: 8px;\r\n  }\r\n\r\n  &--horizontal {\r\n   flex-direction: row;\r\n   align-items: center;\r\n   gap: 20px;\r\n  }\r\n\r\n  &__option {\r\n   width: fit-content;\r\n   display: flex;\r\n   align-items: center;\r\n   gap: 8px;\r\n   font-weight: 400;\r\n   font-size: 12px;\r\n   line-height: 20px;\r\n   cursor: pointer;\r\n\r\n   &:has(input:disabled) {\r\n    cursor: default;\r\n   }\r\n\r\n   input {\r\n    position: relative;\r\n    appearance: none;\r\n    margin: 0;\r\n    width: 16px;\r\n    height: 16px;\r\n    border: 1px solid $grey_65;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    accent-color: $brilliantblue_75;\r\n    background-color: white;\r\n\r\n    &:checked {\r\n     border-color: $brilliantblue_75;\r\n     background-color: white;\r\n    }\r\n\r\n    &:checked::before {\r\n     content: '';\r\n     position: absolute;\r\n     top: 50%;\r\n     left: 50%;\r\n     transform: translate(-50%, -50%);\r\n     width: 10px;\r\n     height: 10px;\r\n     border-radius: 50%;\r\n     background-color: $brilliantblue_75;\r\n    }\r\n\r\n    &:disabled {\r\n     cursor: default;\r\n     border-color: $grey_45;\r\n     background-color: $grey_20;\r\n    }\r\n\r\n    &:disabled:checked::before {\r\n     background-color: $grey_45;\r\n    }\r\n\r\n    &:not(:disabled):hover {\r\n     border-color: $brilliantblue_75;\r\n     background-color: $brilliantblue_25;\r\n    }\r\n   }\r\n  }\r\n\r\n  &__label {\r\n   font-size: 12px;\r\n   color: $grey_90;\r\n   line-height: 20px;\r\n   user-select: none;\r\n  }\r\n\r\n  &__option--disabled {\r\n   .sd-radio-group__label {\r\n    color: $grey_65;\r\n   }\r\n  }\r\n }\r\n}","import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\r\n\r\nexport type RadioValue = string | number | boolean;\r\nexport type RadioOption = {\r\n label: string;\r\n value: RadioValue;\r\n disabled?: boolean;\r\n};\r\n\r\n@Component({\r\n tag: 'sd-radio-group',\r\n styleUrl: 'sd-radio-group.scss',\r\n})\r\nexport class SdRadioGroup {\r\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\r\n\r\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\r\n\r\n @Prop() direction: 'horizonal' | 'vertical' = 'vertical';\r\n\r\n @Prop() disabled: boolean = false;\r\n\r\n @Prop() name?: string;\r\n\r\n @State() private selectedValue!: RadioValue;\r\n\r\n @Event()\r\n sdChange!: EventEmitter<RadioValue>;\r\n\r\n componentWillLoad() {\r\n  if (this.value) {\r\n   this.selectedValue = this.value;\r\n  }\r\n }\r\n\r\n @Watch('value')\r\n valueChanged(newValue: RadioValue) {\r\n  this.selectedValue = newValue;\r\n }\r\n\r\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\r\n  if (this.disabled || optionDisabled) return;\r\n  this.selectedValue = optionValue;\r\n  this.value = optionValue;\r\n  this.sdChange.emit(optionValue);\r\n };\r\n\r\n private isOptionSelected(option: RadioOption): boolean {\r\n  return this.selectedValue === option.value;\r\n }\r\n\r\n private isOptionDisabled(option: RadioOption): boolean {\r\n  return this.disabled || !!option.disabled;\r\n }\r\n\r\n private getRadioClasses(option: RadioOption): string {\r\n  const classes = [\r\n   'sd-radio-group__option',\r\n   this.isOptionSelected(option)\r\n    ? 'sd-radio-group__option--selected'\r\n    : 'sd-radio-group__option--unselected',\r\n  ];\r\n\r\n  if (this.isOptionDisabled(option)) {\r\n   classes.push('sd-radio-group__option--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private getGroupClasses(): string {\r\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;\r\n\r\n  return (\r\n   <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\r\n    {this.radioOptions.map((option, index) => {\r\n     const isSelected = this.isOptionSelected(option);\r\n     const isDisabled = this.isOptionDisabled(option);\r\n\r\n     return (\r\n      <label\r\n       key={`radio-${index}`}\r\n       class={this.getRadioClasses(option)}\r\n       role=\"radio\"\r\n       aria-checked={isSelected.toString()}\r\n       aria-disabled={isDisabled.toString()}\r\n       aria-label={option.label || 'radio option'}\r\n      >\r\n       <input\r\n        type=\"radio\"\r\n        name={groupName}\r\n        value={option.value.toString()}\r\n        checked={isSelected}\r\n        disabled={isDisabled}\r\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\r\n       />\r\n       {option.label && <span class=\"sd-radio-group__label\">{option.label}</span>}\r\n      </label>\r\n     );\r\n    })}\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/sd-select-multiple-group.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, d as createEvent, h, c as Host, F as Fragment } from './p-TFWJruz2.js';
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-BpNH68jy.js';
-import { d as defineCustomElement$6 } from './p-D2YMmHfl.js';
-import { d as defineCustomElement$5 } from './p-D2aGA3BX.js';
-import { d as defineCustomElement$4 } from './p-RZm_wGW3.js';
-import { d as defineCustomElement$3 } from './p-LziGti_p.js';
-import { d as defineCustomElement$2 } from './p-BAhPNR2w.js';
+import { d as defineCustomElement$6 } from './p-CkKxyn_K.js';
+import { d as defineCustomElement$5 } from './p-BsyfatBe.js';
+import { d as defineCustomElement$4 } from './p-C6tAa8Q4.js';
+import { d as defineCustomElement$3 } from './p-Dgxczhd0.js';
+import { d as defineCustomElement$2 } from './p-C9fSCxHc.js';
 
 const sdSelectMultipleGroupCss = ".sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}sd-select-multiple-group{display:inline-block;height:fit-content}sd-select-multiple-group .sd-select-multiple-group{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white;color:#333333}sd-select-multiple-group .sd-select-multiple-group:hover:not(.sd-select-multiple-group--disabled){background:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__label{border-right:1px solid #cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger{color:#888888}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-visible,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group__container{position:relative;width:100%;display:flex}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container sd-input{width:100%}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px}";
 
@@ -350,11 +350,11 @@ const SdSelectMultipleGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectM
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: 'bcafcfbb33940882bd7e22a6d197974194554968', style: style }, h("div", { key: 'a8547e4aa07d8ccdfbb7955f122eaa3955c5d30e', class: {
+        return (h(Host, { key: '2fb8b95f341cea6870702474d549b10b46a33551', style: style }, h("div", { key: 'f0ffc9960ae27bc1e76e3cd59592de205ae0071d', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: '90ba61f1d83692e2eaf430f42a1a0fd55380d774', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: '1496b603a09001a571388baade46e4d14f19e51d', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label, labelStyle) {
         if (!label)