@sellmate/design-system 1.0.67 → 1.0.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (426) hide show
  1. package/dist/cjs/{component.textinput-C4SsDjA1.js → component.textinput-BpXDeZPD.js} +3 -2
  2. package/dist/cjs/design-system.cjs.js +2 -2
  3. package/dist/cjs/{index-BpT5VmKY.js → index-B2QvhbC3.js} +1 -1
  4. package/dist/cjs/index.cjs.js +36 -41
  5. package/dist/cjs/loader.cjs.js +2 -2
  6. package/dist/cjs/modal-stack-DucFLON7.js +112 -0
  7. package/dist/cjs/sd-action-modal.cjs.entry.js +2 -2
  8. package/dist/cjs/sd-badge.cjs.entry.js +2 -2
  9. package/dist/cjs/sd-barcode-input.cjs.entry.js +4 -3
  10. package/dist/cjs/sd-button-v2_2.cjs.entry.js +3 -3
  11. package/dist/cjs/sd-button_4.cjs.entry.js +35 -18
  12. package/dist/cjs/sd-calendar.cjs.entry.js +1 -1
  13. package/dist/cjs/sd-card.cjs.entry.js +2 -2
  14. package/dist/cjs/sd-checkbox.cjs.entry.js +1 -1
  15. package/dist/cjs/sd-chip.cjs.entry.js +312 -0
  16. package/dist/cjs/sd-circle-progress.cjs.entry.js +2 -2
  17. package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +4 -4
  18. package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
  19. package/dist/cjs/sd-date-picker-calendar.cjs.entry.js +2 -2
  20. package/dist/cjs/sd-date-picker-trigger.cjs.entry.js +3 -3
  21. package/dist/cjs/sd-date-picker.cjs.entry.js +4 -3
  22. package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +2 -2
  23. package/dist/cjs/sd-date-range-picker.cjs.entry.js +4 -3
  24. package/dist/cjs/sd-dropdown-button.cjs.entry.js +8 -19
  25. package/dist/cjs/sd-file-picker.cjs.entry.js +5 -4
  26. package/dist/cjs/sd-form.cjs.entry.js +1 -1
  27. package/dist/cjs/sd-ghost-button.cjs.entry.js +6 -6
  28. package/dist/cjs/sd-guide.cjs.entry.js +167 -34
  29. package/dist/cjs/sd-input_2.cjs.entry.js +8 -7
  30. package/dist/cjs/sd-loading-container.cjs.entry.js +4 -4
  31. package/dist/cjs/sd-modal-container.cjs.entry.js +126 -155
  32. package/dist/cjs/sd-number-input.cjs.entry.js +5 -4
  33. package/dist/cjs/sd-pagination_2.cjs.entry.js +117 -42
  34. package/dist/cjs/sd-popover.cjs.entry.js +4 -4
  35. package/dist/cjs/sd-portal.cjs.entry.js +4 -4
  36. package/dist/cjs/sd-progress.cjs.entry.js +3 -3
  37. package/dist/cjs/sd-radio-button.cjs.entry.js +2 -2
  38. package/dist/cjs/sd-radio-group.cjs.entry.js +2 -2
  39. package/dist/cjs/sd-radio.cjs.entry.js +2 -2
  40. package/dist/cjs/sd-select-dropdown_2.cjs.entry.js +4 -4
  41. package/dist/cjs/sd-select-group.cjs.entry.js +3 -2
  42. package/dist/cjs/sd-select-multiple-group.cjs.entry.js +2 -2
  43. package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
  44. package/dist/cjs/sd-select-option-group.cjs.entry.js +4 -4
  45. package/dist/cjs/sd-select-v2-list-item_4.cjs.entry.js +12 -16
  46. package/dist/cjs/sd-select.cjs.entry.js +3 -2
  47. package/dist/cjs/sd-switch.cjs.entry.js +2 -2
  48. package/dist/cjs/sd-table.cjs.entry.js +6 -6
  49. package/dist/cjs/sd-tabs.cjs.entry.js +2 -2
  50. package/dist/cjs/sd-tag.cjs.entry.js +3 -3
  51. package/dist/cjs/sd-tbody.cjs.entry.js +2 -2
  52. package/dist/cjs/sd-td.cjs.entry.js +2 -2
  53. package/dist/cjs/sd-text-link.cjs.entry.js +4 -4
  54. package/dist/cjs/sd-textarea.cjs.entry.js +4 -3
  55. package/dist/cjs/sd-thead.cjs.entry.js +4 -4
  56. package/dist/cjs/sd-toast-container.cjs.entry.js +3 -3
  57. package/dist/cjs/sd-toast.cjs.entry.js +3 -3
  58. package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
  59. package/dist/cjs/sd-tr.cjs.entry.js +3 -3
  60. package/dist/cjs/system-C89o3A9Z.js +16 -0
  61. package/dist/cjs/table-test.cjs.entry.js +2 -2
  62. package/dist/cjs/{tooltipArrow-C9i0ZsG_.js → tooltipArrow-Xkv-p1bY.js} +1 -1
  63. package/dist/collection/collection-manifest.json +2 -1
  64. package/dist/collection/components/sd-action-modal/sd-action-modal.js +1 -1
  65. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  66. package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +29 -1
  67. package/dist/collection/components/sd-button-v2/sd-button-v2.js +2 -2
  68. package/dist/collection/components/sd-card/sd-card.js +1 -1
  69. package/dist/collection/components/sd-chip/sd-chip.config.js +37 -0
  70. package/dist/collection/components/sd-chip/sd-chip.css +56 -0
  71. package/dist/collection/components/sd-chip/sd-chip.js +544 -0
  72. package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
  73. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
  74. package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js +1 -1
  75. package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
  76. package/dist/collection/components/sd-date-picker/sd-date-picker.js +30 -2
  77. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
  78. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +30 -2
  79. package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js +3 -3
  80. package/dist/collection/components/sd-field/sd-field.config.js +5 -0
  81. package/dist/collection/components/sd-field/sd-field.css +4 -0
  82. package/dist/collection/components/sd-field/sd-field.js +39 -5
  83. package/dist/collection/components/sd-file-picker/sd-file-picker.css +1 -1
  84. package/dist/collection/components/sd-file-picker/sd-file-picker.js +30 -2
  85. package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +12 -8
  86. package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +5 -5
  87. package/dist/collection/components/sd-guide/sd-guide.config.js +48 -0
  88. package/dist/collection/components/sd-guide/sd-guide.css +58 -29
  89. package/dist/collection/components/sd-guide/sd-guide.js +69 -40
  90. package/dist/collection/components/sd-input/sd-input.js +30 -2
  91. package/dist/collection/components/sd-loading-container/sd-loading-container.config.js +1 -1
  92. package/dist/collection/components/sd-loading-container/sd-loading-container.css +1 -1
  93. package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
  94. package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
  95. package/dist/collection/components/sd-modal-container/sd-modal-container.css +11 -10
  96. package/dist/collection/components/sd-modal-container/sd-modal-container.js +150 -164
  97. package/dist/collection/components/sd-number-input/sd-number-input.js +31 -3
  98. package/dist/collection/components/sd-pagination/sd-pagination.config.js +25 -0
  99. package/dist/collection/components/sd-pagination/sd-pagination.css +69 -53
  100. package/dist/collection/components/sd-pagination/sd-pagination.js +53 -37
  101. package/dist/collection/components/sd-popover/sd-popover.js +2 -2
  102. package/dist/collection/components/sd-portal/sd-portal.js +4 -4
  103. package/dist/collection/components/sd-progress/sd-progress.js +2 -2
  104. package/dist/collection/components/sd-radio/sd-radio.js +1 -1
  105. package/dist/collection/components/sd-radio-button/sd-radio-button.js +1 -1
  106. package/dist/collection/components/sd-radio-group/sd-radio-group.js +1 -1
  107. package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js +2 -2
  108. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
  109. package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +3 -3
  110. package/dist/collection/components/sd-select/sd-select.js +29 -1
  111. package/dist/collection/components/sd-select-group/sd-select-group.js +29 -1
  112. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +1 -1
  113. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +1 -1
  114. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
  115. package/dist/collection/components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js +2 -2
  116. package/dist/collection/components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js +4 -4
  117. package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.css +5 -5
  118. package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js +2 -2
  119. package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js +2 -2
  120. package/dist/collection/components/sd-select-v2/sd-select-v2.config.js +0 -1
  121. package/dist/collection/components/sd-select-v2/sd-select-v2.js +31 -3
  122. package/dist/collection/components/sd-switch/sd-switch.js +1 -1
  123. package/dist/collection/components/sd-table/sd-table.js +5 -5
  124. package/dist/collection/components/sd-table/sd-table.stories.helpers.js +146 -0
  125. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +1 -1
  126. package/dist/collection/components/sd-table/sd-td/sd-td.js +1 -1
  127. package/dist/collection/components/sd-table/sd-thead/sd-thead.js +3 -3
  128. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +2 -2
  129. package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
  130. package/dist/collection/components/sd-tag/sd-tag.js +2 -2
  131. package/dist/collection/components/sd-text-link/sd-text-link.js +3 -3
  132. package/dist/collection/components/sd-textarea/sd-textarea.js +29 -1
  133. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  134. package/dist/collection/components/sd-toast-container/sd-toast-container.config.js +1 -1
  135. package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
  136. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  137. package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
  138. package/dist/collection/components/table-test/table-test.js +1 -1
  139. package/dist/collection/utils/modal-stack.js +109 -0
  140. package/dist/collection/utils/modal.js +17 -23
  141. package/dist/components/index.js +1 -1
  142. package/dist/components/{p-DHh_uT9m.js → p-B1j9ZWLJ.js} +1 -1
  143. package/dist/components/{p-DPJPXCqf.js → p-BBluw-CU.js} +1 -1
  144. package/dist/components/{p-D74FHxKd.js → p-BFd54Imz.js} +1 -1
  145. package/dist/components/{p-IbLrnrk8.js → p-BJshZele.js} +1 -1
  146. package/dist/components/p-BaHpEtbz.js +1 -0
  147. package/dist/components/{p-DZJZLfsh.js → p-BlqLear7.js} +1 -1
  148. package/dist/components/{p-CJwbBrt5.js → p-ByhWX2NK.js} +1 -1
  149. package/dist/components/{p-ByYIyCZY.js → p-BylHC3lv.js} +1 -1
  150. package/dist/components/p-C-txBx-h.js +1 -0
  151. package/dist/components/p-C0VkfKIA.js +1 -0
  152. package/dist/components/p-C4uWhzoG.js +1 -0
  153. package/dist/components/p-CEnwrYaY.js +1 -0
  154. package/dist/components/{p-DDOw5GBw.js → p-CLZ8NObl.js} +1 -1
  155. package/dist/components/{p-tZWFjQm2.js → p-COM91Bya.js} +1 -1
  156. package/dist/components/{p-BH4I7hqf.js → p-CS62OEXf.js} +1 -1
  157. package/dist/components/{p-iWu6aGXE.js → p-CX0V7awA.js} +1 -1
  158. package/dist/components/{p-DlsWuYWL.js → p-Cb1M05mf.js} +1 -1
  159. package/dist/{design-system/p-CRTx3YEe.js → components/p-Cj4NAUzE.js} +1 -1
  160. package/dist/components/{p-1iOCtFn5.js → p-CsPyZohK.js} +1 -1
  161. package/dist/components/{p-DhkPKN1J.js → p-CsVPC3FD.js} +1 -1
  162. package/dist/components/{p-tvysh3yO.js → p-Csfk-CtX.js} +1 -1
  163. package/dist/components/{p-DqYRbHxW.js → p-CtrDZYN5.js} +1 -1
  164. package/dist/components/p-D21iKAp7.js +1 -0
  165. package/dist/components/{p-cNJ6VOYI.js → p-D6C4-apu.js} +1 -1
  166. package/dist/components/p-D99-lhhk.js +1 -0
  167. package/dist/components/{p-V6yl4lMM.js → p-DGPGMB_Z.js} +1 -1
  168. package/dist/components/{p-CymMpTU-.js → p-DIro-Wat.js} +1 -1
  169. package/dist/components/{p-BstWg2vS.js → p-DPCj-bFr.js} +1 -1
  170. package/dist/components/p-DRVnqiWc.js +1 -0
  171. package/dist/components/p-D_lyw4rN.js +1 -0
  172. package/dist/components/{p-DL69hClF.js → p-Diis5oCN.js} +1 -1
  173. package/dist/components/{p-BRRvU4ZQ.js → p-DlkxQ9Jn.js} +1 -1
  174. package/dist/components/{p-Ds4UCVE1.js → p-DoSEK0_q.js} +1 -1
  175. package/dist/components/p-DukibDDA.js +1 -0
  176. package/dist/components/{p-hN9rpxkR.js → p-T5BGXHZg.js} +1 -1
  177. package/dist/components/{p-BF4hokOY.js → p-YgnF5oje.js} +1 -1
  178. package/dist/components/{p-CX2EDIQM.js → p-z9MoRjYX.js} +1 -1
  179. package/dist/components/sd-action-modal.js +1 -1
  180. package/dist/components/sd-badge.js +1 -1
  181. package/dist/components/sd-barcode-input.js +1 -1
  182. package/dist/components/sd-button-v2.js +1 -1
  183. package/dist/components/sd-button.js +1 -1
  184. package/dist/components/sd-calendar.js +1 -1
  185. package/dist/components/sd-card.js +1 -1
  186. package/dist/components/sd-checkbox.js +1 -1
  187. package/dist/components/sd-chip.d.ts +11 -0
  188. package/dist/components/sd-chip.js +1 -0
  189. package/dist/components/sd-circle-progress.js +1 -1
  190. package/dist/components/sd-confirm-modal.js +1 -1
  191. package/dist/components/sd-date-box.js +1 -1
  192. package/dist/components/sd-date-picker-calendar.js +1 -1
  193. package/dist/components/sd-date-picker-trigger.js +1 -1
  194. package/dist/components/sd-date-picker.js +1 -1
  195. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  196. package/dist/components/sd-date-range-picker.js +1 -1
  197. package/dist/components/sd-dropdown-button.js +1 -1
  198. package/dist/components/sd-field.js +1 -1
  199. package/dist/components/sd-file-picker.js +1 -1
  200. package/dist/components/sd-floating-portal.js +1 -1
  201. package/dist/components/sd-form.js +1 -1
  202. package/dist/components/sd-ghost-button.js +1 -1
  203. package/dist/components/sd-guide.js +1 -1
  204. package/dist/components/sd-icon.js +1 -1
  205. package/dist/components/sd-input.js +1 -1
  206. package/dist/components/sd-loading-container.js +1 -1
  207. package/dist/components/sd-loading-modal.js +1 -1
  208. package/dist/components/sd-modal-container.js +1 -1
  209. package/dist/components/sd-number-input.js +1 -1
  210. package/dist/components/sd-pagination.js +1 -1
  211. package/dist/components/sd-popover.js +1 -1
  212. package/dist/components/sd-portal.js +1 -1
  213. package/dist/components/sd-progress.js +1 -1
  214. package/dist/components/sd-radio-button.js +1 -1
  215. package/dist/components/sd-radio-group.js +1 -1
  216. package/dist/components/sd-radio.js +1 -1
  217. package/dist/components/sd-select-dropdown.js +1 -1
  218. package/dist/components/sd-select-group.js +1 -1
  219. package/dist/components/sd-select-multiple-group.js +1 -1
  220. package/dist/components/sd-select-multiple.js +1 -1
  221. package/dist/components/sd-select-option-group.js +1 -1
  222. package/dist/components/sd-select-option.js +1 -1
  223. package/dist/components/sd-select-search-input.js +1 -1
  224. package/dist/components/sd-select-v2-list-item-search.js +1 -1
  225. package/dist/components/sd-select-v2-list-item.js +1 -1
  226. package/dist/components/sd-select-v2-listbox.js +1 -1
  227. package/dist/components/sd-select-v2-trigger.js +1 -1
  228. package/dist/components/sd-select-v2.js +1 -1
  229. package/dist/components/sd-select.js +1 -1
  230. package/dist/components/sd-switch.js +1 -1
  231. package/dist/components/sd-table.js +1 -1
  232. package/dist/components/sd-tabs.js +1 -1
  233. package/dist/components/sd-tag.js +1 -1
  234. package/dist/components/sd-tbody.js +1 -1
  235. package/dist/components/sd-td.js +1 -1
  236. package/dist/components/sd-text-link.js +1 -1
  237. package/dist/components/sd-textarea.js +1 -1
  238. package/dist/components/sd-thead.js +1 -1
  239. package/dist/components/sd-toast-container.js +1 -1
  240. package/dist/components/sd-toast.js +1 -1
  241. package/dist/components/sd-toggle.js +1 -1
  242. package/dist/components/sd-tooltip.js +1 -1
  243. package/dist/components/sd-tr.js +1 -1
  244. package/dist/components/table-test.js +1 -1
  245. package/dist/design-system/design-system.css +1 -1
  246. package/dist/design-system/design-system.esm.js +1 -1
  247. package/dist/design-system/index.esm.js +1 -1
  248. package/dist/design-system/{p-c44ba991.entry.js → p-002e10ac.entry.js} +1 -1
  249. package/dist/design-system/p-01ac7743.entry.js +1 -0
  250. package/dist/design-system/p-06080355.entry.js +1 -0
  251. package/dist/design-system/p-0929f910.entry.js +1 -0
  252. package/dist/design-system/{p-b2b5b2d3.entry.js → p-0b216b11.entry.js} +1 -1
  253. package/dist/design-system/{p-5b2486c9.entry.js → p-0bffdbf4.entry.js} +1 -1
  254. package/dist/design-system/{p-5224553e.entry.js → p-0d485537.entry.js} +1 -1
  255. package/dist/design-system/p-1389a68e.entry.js +1 -0
  256. package/dist/design-system/{p-aebf903f.entry.js → p-1a455448.entry.js} +1 -1
  257. package/dist/design-system/{p-10763304.entry.js → p-1b8e63a6.entry.js} +1 -1
  258. package/dist/design-system/{p-525aefd5.entry.js → p-23c31074.entry.js} +1 -1
  259. package/dist/design-system/{p-87a23bd0.entry.js → p-2a4b6bc7.entry.js} +1 -1
  260. package/dist/design-system/{p-fa1072f7.entry.js → p-308c2a72.entry.js} +1 -1
  261. package/dist/design-system/p-35b29182.entry.js +1 -0
  262. package/dist/design-system/{p-9e0b944f.entry.js → p-449e58ee.entry.js} +1 -1
  263. package/dist/design-system/{p-73383b2f.entry.js → p-48f1f9ff.entry.js} +1 -1
  264. package/dist/design-system/{p-504fdb4e.entry.js → p-4d434794.entry.js} +1 -1
  265. package/dist/design-system/p-4de3b6b1.entry.js +1 -0
  266. package/dist/design-system/p-4f9f25a1.entry.js +1 -0
  267. package/dist/design-system/p-5442b4b4.entry.js +1 -0
  268. package/dist/design-system/{p-40371bf6.entry.js → p-59aa62ff.entry.js} +1 -1
  269. package/dist/design-system/{p-7b433296.entry.js → p-5a0b0a1b.entry.js} +1 -1
  270. package/dist/design-system/p-609b3748.entry.js +1 -0
  271. package/dist/design-system/p-60ece09d.entry.js +1 -0
  272. package/dist/design-system/{p-10ed0768.entry.js → p-641c2f3d.entry.js} +1 -1
  273. package/dist/design-system/{p-2841d5e1.entry.js → p-64a56a4e.entry.js} +1 -1
  274. package/dist/design-system/{p-dff0060e.entry.js → p-6b2f6efb.entry.js} +1 -1
  275. package/dist/design-system/{p-e1202ad3.entry.js → p-6b478f5c.entry.js} +1 -1
  276. package/dist/design-system/{p-337267a7.entry.js → p-6ef2d08f.entry.js} +1 -1
  277. package/dist/design-system/{p-51fcc29f.entry.js → p-703eee55.entry.js} +1 -1
  278. package/dist/design-system/p-71897864.entry.js +1 -0
  279. package/dist/design-system/p-731429da.entry.js +1 -0
  280. package/dist/design-system/p-75c5e31b.entry.js +1 -0
  281. package/dist/design-system/{p-768efd5a.entry.js → p-7dd8beba.entry.js} +1 -1
  282. package/dist/design-system/{p-348eff76.entry.js → p-7ef0c428.entry.js} +1 -1
  283. package/dist/design-system/p-87222184.entry.js +1 -0
  284. package/dist/design-system/p-8cd1b533.entry.js +1 -0
  285. package/dist/design-system/{p-f9559741.entry.js → p-92a52f89.entry.js} +1 -1
  286. package/dist/design-system/{p-19257b97.entry.js → p-95d96917.entry.js} +1 -1
  287. package/dist/design-system/p-9dd7befe.entry.js +1 -0
  288. package/dist/design-system/{p-fb7e8c54.entry.js → p-9ecde011.entry.js} +1 -1
  289. package/dist/design-system/{p-b4e56b67.entry.js → p-9f0fe1f6.entry.js} +1 -1
  290. package/dist/design-system/p-BGyJgVXm.js +2 -0
  291. package/dist/design-system/{p-CJwbBrt5.js → p-ByhWX2NK.js} +1 -1
  292. package/dist/design-system/p-C-txBx-h.js +1 -0
  293. package/dist/design-system/p-C4tHYnB4.js +1 -0
  294. package/dist/design-system/p-DRVnqiWc.js +1 -0
  295. package/dist/design-system/p-a7ef7465.entry.js +1 -0
  296. package/dist/design-system/p-ac9f7551.entry.js +1 -0
  297. package/dist/design-system/{p-513d85e1.entry.js → p-ade9319d.entry.js} +1 -1
  298. package/dist/design-system/{p-671a9ca8.entry.js → p-aeadfb9c.entry.js} +1 -1
  299. package/dist/design-system/p-b3d959b0.entry.js +1 -0
  300. package/dist/design-system/{p-b6e7b8c8.entry.js → p-cdedac3c.entry.js} +1 -1
  301. package/dist/design-system/{p-5982bcd0.entry.js → p-d43772c0.entry.js} +1 -1
  302. package/dist/design-system/p-d668fd71.entry.js +1 -0
  303. package/dist/design-system/{p-c6d2f909.entry.js → p-dfa716e0.entry.js} +1 -1
  304. package/dist/design-system/{p-a66529a5.entry.js → p-e1288299.entry.js} +1 -1
  305. package/dist/design-system/p-e3a1e677.entry.js +1 -0
  306. package/dist/design-system/{p-e385cbf4.entry.js → p-fa888a37.entry.js} +1 -1
  307. package/dist/esm/{component.textinput-CJwbBrt5.js → component.textinput-ByhWX2NK.js} +3 -2
  308. package/dist/esm/design-system.js +3 -3
  309. package/dist/esm/{index-Dcpqhs6V.js → index-BGyJgVXm.js} +1 -1
  310. package/dist/esm/index.js +36 -41
  311. package/dist/esm/loader.js +3 -3
  312. package/dist/esm/modal-stack-DRVnqiWc.js +105 -0
  313. package/dist/esm/sd-action-modal.entry.js +2 -2
  314. package/dist/esm/sd-badge.entry.js +2 -2
  315. package/dist/esm/sd-barcode-input.entry.js +4 -3
  316. package/dist/esm/sd-button-v2_2.entry.js +3 -3
  317. package/dist/esm/sd-button_4.entry.js +35 -18
  318. package/dist/esm/sd-calendar.entry.js +1 -1
  319. package/dist/esm/sd-card.entry.js +2 -2
  320. package/dist/esm/sd-checkbox.entry.js +1 -1
  321. package/dist/esm/sd-chip.entry.js +310 -0
  322. package/dist/esm/sd-circle-progress.entry.js +2 -2
  323. package/dist/esm/sd-confirm-modal_2.entry.js +4 -4
  324. package/dist/esm/sd-date-box.entry.js +1 -1
  325. package/dist/esm/sd-date-picker-calendar.entry.js +2 -2
  326. package/dist/esm/sd-date-picker-trigger.entry.js +3 -3
  327. package/dist/esm/sd-date-picker.entry.js +4 -3
  328. package/dist/esm/sd-date-range-picker-calendar.entry.js +2 -2
  329. package/dist/esm/sd-date-range-picker.entry.js +4 -3
  330. package/dist/esm/sd-dropdown-button.entry.js +5 -16
  331. package/dist/esm/sd-file-picker.entry.js +5 -4
  332. package/dist/esm/sd-form.entry.js +1 -1
  333. package/dist/esm/sd-ghost-button.entry.js +6 -6
  334. package/dist/esm/sd-guide.entry.js +167 -34
  335. package/dist/esm/sd-input_2.entry.js +8 -7
  336. package/dist/esm/sd-loading-container.entry.js +4 -4
  337. package/dist/esm/sd-modal-container.entry.js +126 -155
  338. package/dist/esm/sd-number-input.entry.js +5 -4
  339. package/dist/esm/sd-pagination_2.entry.js +117 -42
  340. package/dist/esm/sd-popover.entry.js +4 -4
  341. package/dist/esm/sd-portal.entry.js +4 -4
  342. package/dist/esm/sd-progress.entry.js +3 -3
  343. package/dist/esm/sd-radio-button.entry.js +2 -2
  344. package/dist/esm/sd-radio-group.entry.js +2 -2
  345. package/dist/esm/sd-radio.entry.js +2 -2
  346. package/dist/esm/sd-select-dropdown_2.entry.js +4 -4
  347. package/dist/esm/sd-select-group.entry.js +3 -2
  348. package/dist/esm/sd-select-multiple-group.entry.js +2 -2
  349. package/dist/esm/sd-select-multiple.entry.js +2 -2
  350. package/dist/esm/sd-select-option-group.entry.js +4 -4
  351. package/dist/esm/sd-select-v2-list-item_4.entry.js +12 -16
  352. package/dist/esm/sd-select.entry.js +3 -2
  353. package/dist/esm/sd-switch.entry.js +2 -2
  354. package/dist/esm/sd-table.entry.js +6 -6
  355. package/dist/esm/sd-tabs.entry.js +2 -2
  356. package/dist/esm/sd-tag.entry.js +3 -3
  357. package/dist/esm/sd-tbody.entry.js +2 -2
  358. package/dist/esm/sd-td.entry.js +2 -2
  359. package/dist/esm/sd-text-link.entry.js +4 -4
  360. package/dist/esm/sd-textarea.entry.js +4 -3
  361. package/dist/esm/sd-thead.entry.js +4 -4
  362. package/dist/esm/sd-toast-container.entry.js +3 -3
  363. package/dist/esm/sd-toast.entry.js +3 -3
  364. package/dist/esm/sd-toggle.entry.js +2 -2
  365. package/dist/esm/sd-tr.entry.js +3 -3
  366. package/dist/esm/system-C-txBx-h.js +14 -0
  367. package/dist/esm/table-test.entry.js +2 -2
  368. package/dist/esm/{tooltipArrow-fP-ISMAm.js → tooltipArrow-BAjP9_Hx.js} +1 -1
  369. package/dist/types/components/sd-barcode-input/sd-barcode-input.d.ts +2 -0
  370. package/dist/types/components/sd-chip/sd-chip.config.d.ts +36 -0
  371. package/dist/types/components/sd-chip/sd-chip.d.ts +47 -0
  372. package/dist/types/components/sd-date-picker/sd-date-picker.d.ts +2 -0
  373. package/dist/types/components/sd-date-range-picker/sd-date-range-picker.d.ts +2 -0
  374. package/dist/types/components/sd-field/sd-field.config.d.ts +2 -0
  375. package/dist/types/components/sd-field/sd-field.d.ts +2 -1
  376. package/dist/types/components/sd-file-picker/sd-file-picker.d.ts +2 -0
  377. package/dist/types/components/sd-guide/sd-guide.config.d.ts +44 -0
  378. package/dist/types/components/sd-guide/sd-guide.d.ts +3 -4
  379. package/dist/types/components/sd-input/sd-input.d.ts +2 -0
  380. package/dist/types/components/sd-loading-container/sd-loading-container.config.d.ts +1 -1
  381. package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +12 -16
  382. package/dist/types/components/sd-number-input/sd-number-input.d.ts +2 -0
  383. package/dist/types/components/sd-pagination/sd-pagination.config.d.ts +23 -0
  384. package/dist/types/components/sd-pagination/sd-pagination.d.ts +3 -3
  385. package/dist/types/components/sd-select/sd-select.d.ts +2 -0
  386. package/dist/types/components/sd-select-group/sd-select-group.d.ts +2 -0
  387. package/dist/types/components/sd-select-v2/sd-select-v2.config.d.ts +0 -1
  388. package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +2 -0
  389. package/dist/types/components/sd-table/sd-table.stories.helpers.d.ts +29 -0
  390. package/dist/types/components/sd-textarea/sd-textarea.d.ts +2 -0
  391. package/dist/types/components/sd-toast-container/sd-toast-container.config.d.ts +1 -1
  392. package/dist/types/components.d.ts +226 -18
  393. package/dist/types/utils/modal-stack.d.ts +17 -0
  394. package/hydrate/index.js +1000 -358
  395. package/hydrate/index.mjs +1000 -358
  396. package/package.json +1 -1
  397. package/dist/components/p-B_7ozne7.js +0 -1
  398. package/dist/components/p-BsPBl6g5.js +0 -1
  399. package/dist/components/p-BuSniZ67.js +0 -1
  400. package/dist/components/p-C02KLCcO.js +0 -1
  401. package/dist/components/p-CCHce_Dt.js +0 -1
  402. package/dist/components/p-CkMs7IA8.js +0 -1
  403. package/dist/components/p-DLeCo2gh.js +0 -1
  404. package/dist/components/p-DNVUhw5A.js +0 -1
  405. package/dist/components/p-UR2Cf2Sm.js +0 -1
  406. package/dist/design-system/p-1645da95.entry.js +0 -1
  407. package/dist/design-system/p-244d2d6e.entry.js +0 -1
  408. package/dist/design-system/p-298d9b57.entry.js +0 -1
  409. package/dist/design-system/p-2edd355b.entry.js +0 -1
  410. package/dist/design-system/p-3b8595de.entry.js +0 -1
  411. package/dist/design-system/p-3bbf23b4.entry.js +0 -1
  412. package/dist/design-system/p-4c55ba79.entry.js +0 -1
  413. package/dist/design-system/p-6e9d6063.entry.js +0 -1
  414. package/dist/design-system/p-6eb3462d.entry.js +0 -1
  415. package/dist/design-system/p-7cf63a80.entry.js +0 -1
  416. package/dist/design-system/p-7fe09661.entry.js +0 -1
  417. package/dist/design-system/p-87b2c270.entry.js +0 -1
  418. package/dist/design-system/p-9925857c.entry.js +0 -1
  419. package/dist/design-system/p-9cb3be8c.entry.js +0 -1
  420. package/dist/design-system/p-Dcpqhs6V.js +0 -2
  421. package/dist/design-system/p-b56ae914.entry.js +0 -1
  422. package/dist/design-system/p-d263d476.entry.js +0 -1
  423. package/dist/design-system/p-e1c17466.entry.js +0 -1
  424. package/dist/design-system/p-e232fb11.entry.js +0 -1
  425. package/dist/design-system/p-e474fa8c.entry.js +0 -1
  426. package/dist/design-system/p-e9d36c02.entry.js +0 -1
package/hydrate/index.js CHANGED
@@ -136,7 +136,7 @@ var node_crypto = require('node:crypto');
136
136
  const NAMESPACE = 'design-system';
137
137
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
138
138
 
139
- const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-font-size:12px;--sd-system-typography-control-xs-font-weight:500;--sd-system-typography-control-xs-text-decoration:none;--sd-system-typography-control-xs-line-height:20px;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:12px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:20px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:12px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:22px;--sd-system-typography-control-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-font-size:16px;--sd-system-typography-control-md-font-weight:500;--sd-system-typography-control-md-text-decoration:none;--sd-system-typography-control-md-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#D9EAFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-disabled:#E1E1E1;--sd-system-color-content-primary:#222222;--sd-system-color-content-secondary:#555555;--sd-system-color-content-tertiary:#888888;--sd-system-color-content-quaternary:#AAAAAA;--sd-system-color-content-brand:#005CC9;--sd-system-color-content-subtle:#066D9B;--sd-system-color-content-accent:#0075FF;--sd-system-color-content-danger-default:#E30000;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-warning:#FF6B00;--sd-system-color-content-inverse:#FFFFFF;--sd-system-color-text-disabled:#888888;--sd-system-color-link-accent:#006AC1;--sd-system-color-icon-brand:#025497;--sd-system-color-icon-accent:#0075FF;--sd-system-color-icon-danger:#E30000;--sd-system-color-icon-warning:#FF6B00;--sd-system-color-icon-success:#00973C;--sd-system-color-icon-inverse:#FFFFFF;--sd-system-color-icon-disabled:#BBBBBB;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-border-disabled:#CCCCCC;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-icon-default:#888888;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-strong-dropdown-divider:#006AC1;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-subtle-dropdown-divider:#5CB0F3;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-content:#222222;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-strong-dropdown-divider:#FF7C7C;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-gap:4px;--sd-text-link-text-link-size-icon:16px;--sd-text-link-text-link-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-default-font-size:12px;--sd-text-link-text-link-typography-default-font-weight:500;--sd-text-link-text-link-typography-default-text-decoration:none;--sd-text-link-text-link-typography-default-line-height:20px;--sd-text-link-text-link-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-underline-font-size:12px;--sd-text-link-text-link-typography-underline-font-weight:500;--sd-text-link-text-link-typography-underline-text-decoration:underline;--sd-text-link-text-link-typography-underline-line-height:22px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-bg:#FFFFFF;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:12px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:20px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-font-weight:400;--sd-checkbox-checkbox-typography-font-size:12px;--sd-checkbox-checkbox-typography-line-height:20px;--sd-checkbox-checkbox-typography-text-decoration:none;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-font-weight:400;--sd-radio-radio-typography-font-size:12px;--sd-radio-radio-typography-line-height:20px;--sd-radio-radio-typography-text-decoration:none;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-padding-bottom:4px;--sd-select-select-height:28px;--sd-select-select-radius:4px;--sd-select-select-border-width:1px;--sd-select-select-padding-x:12px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-gap:8px;--sd-select-select-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-typography-font-weight:400;--sd-select-select-typography-font-size:12px;--sd-select-select-typography-line-height:20px;--sd-select-select-typography-text-decoration:none;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-select-select-size-icon:16px;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:16px;--sd-field-field-label-md-typography-line-height:26px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:16px;--sd-textinput-textinput-md-typography-line-height:26px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-text-hint:#555555;--sd-textinput-textinput-text-error-message:#E30000;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-hint-typography-font-weight:400;--sd-textinput-textinput-hint-typography-font-size:12px;--sd-textinput-textinput-hint-typography-line-height:20px;--sd-textinput-textinput-hint-typography-text-decoration:none;--sd-textinput-textinput-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-error-message-typography-font-weight:400;--sd-textinput-textinput-error-message-typography-font-size:12px;--sd-textinput-textinput-error-message-typography-line-height:20px;--sd-textinput-textinput-error-message-typography-text-decoration:none;--sd-textinput-textinput-contents-gap:4px;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:16px;--sd-number-input-number-input-md-typography-line-height:26px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-contents-gap:4px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-hint-color:#555555;--sd-number-input-number-input-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-hint-typography-font-weight:400;--sd-number-input-number-input-hint-typography-font-size:12px;--sd-number-input-number-input-hint-typography-line-height:20px;--sd-number-input-number-input-hint-typography-text-decoration:none;--sd-number-input-number-input-error-message-color:#E30000;--sd-number-input-number-input-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-error-message-typography-font-weight:400;--sd-number-input-number-input-error-message-typography-font-size:12px;--sd-number-input-number-input-error-message-typography-line-height:20px;--sd-number-input-number-input-error-message-typography-text-decoration:none;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-filepicker-filepicker-height:28px;--sd-filepicker-filepicker-padding-x:12px;--sd-filepicker-filepicker-gap:8px;--sd-filepicker-filepicker-radius:4px;--sd-filepicker-filepicker-border-width:1px;--sd-filepicker-filepicker-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-typography-font-weight:400;--sd-filepicker-filepicker-typography-font-size:12px;--sd-filepicker-filepicker-typography-line-height:20px;--sd-filepicker-filepicker-typography-text-decoration:none;--sd-filepicker-filepicker-size-icon:16px;--sd-filepicker-filepicker-contents-gap:4px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-sm-date-gap:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:16px;--sd-datepicker-datepicker-md-typography-line-height:26px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-md-date-gap:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-hint:#555555;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-contents-gap:4px;--sd-datepicker-datepicker-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-hint-typography-font-weight:400;--sd-datepicker-datepicker-hint-typography-font-size:12px;--sd-datepicker-datepicker-hint-typography-line-height:20px;--sd-datepicker-datepicker-hint-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-gap:12px;--sd-popover-popover-body-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-bg:#07284A;--sd-popover-popover-title-color:#FFFFFF;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-description-color:#FFFFFF;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-color:#D8D8D8;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:700;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-active:#00973C;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-paddng-x:24px;--sd-guide-guide-contents-paddng-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
139
+ const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-regular-font-size:12px;--sd-system-typography-control-xs-regular-font-weight:400;--sd-system-typography-control-xs-regular-text-decoration:none;--sd-system-typography-control-xs-regular-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:12px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:20px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:12px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:22px;--sd-system-typography-control-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-font-size:16px;--sd-system-typography-control-md-font-weight:500;--sd-system-typography-control-md-text-decoration:none;--sd-system-typography-control-md-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-stack-gap-relaxed:8px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#D9EAFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-disabled:#E1E1E1;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-content-primary:#222222;--sd-system-color-content-secondary:#555555;--sd-system-color-content-tertiary:#888888;--sd-system-color-content-quaternary:#AAAAAA;--sd-system-color-content-brand:#005CC9;--sd-system-color-content-subtle:#066D9B;--sd-system-color-content-accent:#0075FF;--sd-system-color-content-danger-default:#E30000;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-warning:#FF6B00;--sd-system-color-content-inverse:#FFFFFF;--sd-system-color-text-disabled:#888888;--sd-system-color-link-accent:#006AC1;--sd-system-color-icon-brand:#025497;--sd-system-color-icon-accent:#0075FF;--sd-system-color-icon-danger:#E30000;--sd-system-color-icon-warning:#FF6B00;--sd-system-color-icon-success:#00973C;--sd-system-color-icon-inverse:#FFFFFF;--sd-system-color-icon-disabled:#BBBBBB;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-border-disabled:#CCCCCC;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-icon-default:#888888;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-strong-dropdown-divider:#006AC1;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-subtle-dropdown-divider:#5CB0F3;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-content:#222222;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-strong-dropdown-divider:#FF7C7C;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-gap:4px;--sd-text-link-text-link-size-icon:16px;--sd-text-link-text-link-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-default-font-size:12px;--sd-text-link-text-link-typography-default-font-weight:500;--sd-text-link-text-link-typography-default-text-decoration:none;--sd-text-link-text-link-typography-default-line-height:20px;--sd-text-link-text-link-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-underline-font-size:12px;--sd-text-link-text-link-typography-underline-font-weight:500;--sd-text-link-text-link-typography-underline-text-decoration:underline;--sd-text-link-text-link-typography-underline-line-height:22px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-bg:#FFFFFF;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:12px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:20px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-font-weight:400;--sd-checkbox-checkbox-typography-font-size:12px;--sd-checkbox-checkbox-typography-line-height:20px;--sd-checkbox-checkbox-typography-text-decoration:none;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-font-weight:400;--sd-radio-radio-typography-font-size:12px;--sd-radio-radio-typography-line-height:20px;--sd-radio-radio-typography-text-decoration:none;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-height:28px;--sd-select-select-radius:4px;--sd-select-select-border-width:1px;--sd-select-select-padding-x:12px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-gap:8px;--sd-select-select-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-typography-font-weight:400;--sd-select-select-typography-font-size:12px;--sd-select-select-typography-line-height:20px;--sd-select-select-typography-text-decoration:none;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-select-select-size-icon:16px;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-text-hint:#555555;--sd-textinput-textinput-text-error-message:#E30000;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-hint-typography-font-weight:400;--sd-textinput-textinput-hint-typography-font-size:12px;--sd-textinput-textinput-hint-typography-line-height:20px;--sd-textinput-textinput-hint-typography-text-decoration:none;--sd-textinput-textinput-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-error-message-typography-font-weight:400;--sd-textinput-textinput-error-message-typography-font-size:12px;--sd-textinput-textinput-error-message-typography-line-height:20px;--sd-textinput-textinput-error-message-typography-text-decoration:none;--sd-textinput-textinput-contents-gap:4px;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:16px;--sd-number-input-number-input-md-typography-line-height:26px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-contents-gap:4px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-hint-color:#555555;--sd-number-input-number-input-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-hint-typography-font-weight:400;--sd-number-input-number-input-hint-typography-font-size:12px;--sd-number-input-number-input-hint-typography-line-height:20px;--sd-number-input-number-input-hint-typography-text-decoration:none;--sd-number-input-number-input-error-message-color:#E30000;--sd-number-input-number-input-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-error-message-typography-font-weight:400;--sd-number-input-number-input-error-message-typography-font-size:12px;--sd-number-input-number-input-error-message-typography-line-height:20px;--sd-number-input-number-input-error-message-typography-text-decoration:none;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-filepicker-filepicker-height:28px;--sd-filepicker-filepicker-padding-x:12px;--sd-filepicker-filepicker-gap:8px;--sd-filepicker-filepicker-radius:4px;--sd-filepicker-filepicker-border-width:1px;--sd-filepicker-filepicker-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-typography-font-weight:400;--sd-filepicker-filepicker-typography-font-size:12px;--sd-filepicker-filepicker-typography-line-height:20px;--sd-filepicker-filepicker-typography-text-decoration:none;--sd-filepicker-filepicker-size-icon:16px;--sd-filepicker-filepicker-contents-gap:4px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-sm-date-gap:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:16px;--sd-datepicker-datepicker-md-typography-line-height:26px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-md-date-gap:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-hint:#555555;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-contents-gap:4px;--sd-datepicker-datepicker-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-hint-typography-font-weight:400;--sd-datepicker-datepicker-hint-typography-font-size:12px;--sd-datepicker-datepicker-hint-typography-line-height:20px;--sd-datepicker-datepicker-hint-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-content-default:#888888;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#555555;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-gap:12px;--sd-popover-popover-body-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-bg:#07284A;--sd-popover-popover-title-color:#FFFFFF;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-description-color:#FFFFFF;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-color:#D8D8D8;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:700;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
140
140
 
141
141
  /*
142
142
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5287,7 +5287,7 @@ class DataTable {
5287
5287
  return el.innerHTML;
5288
5288
  }
5289
5289
  render() {
5290
- return (hAsync("div", { key: '6d2ff3676d082540cc70939363b0f07ff7252e8c', class: "table-wrapper" }, hAsync("table", { key: '3995aead06dfce42ea4e918486b1473c1740b96e', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, hAsync("thead", { key: '9cbe03cbe1f69d7546ba5037489d20d85bd4a534' }, hAsync("tr", { key: '7ab64e3e3ef214a19a010501d3ec9778c5594990' }, this.columns.map(column => (hAsync("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), hAsync("tbody", { key: '660707fb4d5075b98698718e8cfa8ed903f3d1e2' }, this.rows.map((row, rowIndex) => (hAsync("tr", { key: rowIndex }, this.columns.map(column => (hAsync("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), hAsync("div", { key: '9aabf030b814c340b2f4a1d66644516ed320f31b', class: "templates-slot", hidden: true }, hAsync("slot", { key: '532e40bf658706a99b57dc89c056d977db3e4d83' }))));
5290
+ return (hAsync("div", { key: 'eb6246d49bb46a1c2b2b9d93cff90e7c0d6788b4', class: "table-wrapper" }, hAsync("table", { key: '584d752e51f252f2dd7a29868ae4300b55c47065', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, hAsync("thead", { key: 'fd35de9ad1cb79cf77ab9f7a806d2d7258d8b11b' }, hAsync("tr", { key: '39a42d9fc76571aa5ef6073ec554471d5fd1b4c1' }, this.columns.map(column => (hAsync("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), hAsync("tbody", { key: '5c3a2b5853f619666b20145e0f7a221c75969071' }, this.rows.map((row, rowIndex) => (hAsync("tr", { key: rowIndex }, this.columns.map(column => (hAsync("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), hAsync("div", { key: 'bbbd15c2d1b517774340dbcdfb59338f260df21b', class: "templates-slot", hidden: true }, hAsync("slot", { key: '28733f09dd4a90976d9bb60102039981c736cf87' }))));
5291
5291
  }
5292
5292
  static get watchers() { return {
5293
5293
  "columns": [{
@@ -5448,7 +5448,7 @@ class SdActionModal {
5448
5448
  if (this.height != null && this.height !== '') {
5449
5449
  sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
5450
5450
  }
5451
- return (hAsync("div", { key: 'e741d601fd1c079ebee5b0c527bdf9ec62c43e65', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '9a083fe0d0f8d2b9509cb80af2e8091f4cb23c26', class: "sd-action-modal__header" }, hAsync("h2", { key: '1c91eecc04e5c70267ab571a5a7e8dab8fc97fa4', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: '67eba3fbada5580c5741387248d803d0299612e2', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '769583cdfdb8c5d1e2eb2bd1c240c9956f1530e3', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '05cb596931da687dd2fbf961bdbe116b0a83ee87', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'ecf3346b28bdf29d13fedb1d58f2119af73932a2', class: "sd-action-modal__body" }, hAsync("slot", { key: '276aa6ced63b887cda3b8a9790b4d5064763f556', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: 'fcf62d04efe0cfa46c3ceadda2314606a1e3588c', class: "sd-action-modal__footer" }, hAsync("div", { key: '61948bdf02737aed99420533f5fb9ab4e28be676', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '761a6a38ba2a86f932564a7d1e03e3277f9f917b', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: '242531f04700bea06c93c25a7eaf3e0b03dd628d', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
5451
+ return (hAsync("div", { key: '85e107137d01ef0a8fd8a839d7223c5163cb1a30', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '00d31be3a53866ecb5b72e76550c9501cdf6a106', class: "sd-action-modal__header" }, hAsync("h2", { key: '4e4d000f6261ee2147a3d943d5aedc41afe1b30c', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'f6df02450472e1969f5a96822058d2384af78a8a', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: 'ffb45a725e9e3c8ee56534ba3286897eaf33b844', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '26f68005c1b1ae18991a4da802cbfbd027af8536', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'ebc57d5a90530acf465fef3866d63d95e8bf8311', class: "sd-action-modal__body" }, hAsync("slot", { key: 'a55744951a9812373adabbb7d3db8c06b25f5c72', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '1aef0ac810ba08682c9b8cea47a48e4679a17ee0', class: "sd-action-modal__footer" }, hAsync("div", { key: 'eeeec98e930aa71fcfdd28a1d76a842083c6a185', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '7015d9593c5567824f40ab4c60ca2be8ac5f5989', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: 'c35ea44b195fd7725cb914cf3f04db9389abdfe3', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
5452
5452
  }
5453
5453
  static get style() { return sdActionModalCss(); }
5454
5454
  static get cmpMeta() { return {
@@ -5501,7 +5501,7 @@ class SdBadge {
5501
5501
  label = '';
5502
5502
  render() {
5503
5503
  const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
5504
- return (hAsync("div", { key: '7535760a065f5b0afa35d58c6f3017cacb31f507', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '1a42bf60039e469b0676b0266f9cbde168e8c27e', class: "sd-badge__dot" }), hAsync("div", { key: '2296c4187b5222849dbe0472d19669376b53350f', class: "sd-badge__label" }, this.label)));
5504
+ return (hAsync("div", { key: 'a4b84e172a57763fbef2feedaf52c1e8c219250d', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '723edda0c397241af91ccfc62d14cbfc131456cf', class: "sd-badge__dot" }), hAsync("div", { key: '80415403bea863a62ad5d8139cfcf8951bedee49', class: "sd-badge__label" }, this.label)));
5505
5505
  }
5506
5506
  static get style() { return sdBadgeCss(); }
5507
5507
  static get cmpMeta() { return {
@@ -5548,8 +5548,9 @@ const textinput = {
5548
5548
  radius: "6",
5549
5549
  typography: {
5550
5550
  fontWeight: "400",
5551
- fontSize: "16",
5552
- lineHeight: "26"}
5551
+ fontSize: "14",
5552
+ lineHeight: "24"
5553
+ }
5553
5554
  },
5554
5555
  border: {
5555
5556
  "default": "#AAAAAA"},
@@ -5614,6 +5615,7 @@ class SdBarcodeInput {
5614
5615
  value = null;
5615
5616
  size = 'sm';
5616
5617
  addonLabel = '';
5618
+ addonAlign = 'start';
5617
5619
  placeholder = '입력해 주세요.';
5618
5620
  disabled = false;
5619
5621
  clearable = false;
@@ -5709,7 +5711,7 @@ class SdBarcodeInput {
5709
5711
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
5710
5712
  '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
5711
5713
  };
5712
- return (hAsync("sd-field", { key: 'bba439856e0cbaedc7b54411dac904f9c845b50c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '8553cfb4b5ef9535608abc1f2987ce08970c318a', class: "sd-barcode-input__content" }, hAsync("slot", { key: '93db2b38e8d674230f48e3b9496a7221d8477da6', name: "prefix" }), hAsync("input", { key: '30997bea593052322a2d29fc1e517b00cf19b1fb', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '690daa6c1daa6058713ee09b0efe976557cde3ab', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '8ab4e45a23d1b06dc415d969e25ed5ea59540643', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5714
+ return (hAsync("sd-field", { key: '876c4e2cd41e62cd5486b7dec5ca1b34d10704b9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'e01920c2565e1f4487ccd516f864b9f68fa0cfd8', class: "sd-barcode-input__content" }, hAsync("slot", { key: 'd7be8745d6b0f510a11c88e1ca629f78fbc77348', name: "prefix" }), hAsync("input", { key: 'f214f2930fc54a0466a10ce295e46885352e0e88', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'a226a2c7ec43951ab9f048f8da25542784233e65', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: 'ff7f8853b43401f3bf4be051e69d8c459ca418aa', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5713
5715
  if (this.disabled)
5714
5716
  return;
5715
5717
  this.internalValue = '';
@@ -5732,6 +5734,7 @@ class SdBarcodeInput {
5732
5734
  "value": [1032],
5733
5735
  "size": [1],
5734
5736
  "addonLabel": [1, "addon-label"],
5737
+ "addonAlign": [1, "addon-align"],
5735
5738
  "placeholder": [1],
5736
5739
  "disabled": [4],
5737
5740
  "clearable": [4],
@@ -5765,7 +5768,7 @@ class SdBarcodeInput {
5765
5768
  }; }
5766
5769
  }
5767
5770
 
5768
- const button = {
5771
+ const button$1 = {
5769
5772
  xs: {
5770
5773
  icon: "12"
5771
5774
  },
@@ -5849,7 +5852,7 @@ const button = {
5849
5852
  }
5850
5853
  };
5851
5854
  var buttonTokens = {
5852
- button: button
5855
+ button: button$1
5853
5856
  };
5854
5857
 
5855
5858
  const primary = "#051D36";
@@ -6434,13 +6437,13 @@ class SdButtonV2 {
6434
6437
  const hasLabel = Boolean(this.label);
6435
6438
  const iconOnly = !this.label && (Boolean(this.icon) !== Boolean(this.rightIcon));
6436
6439
  const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
6437
- return (hAsync("button", { key: '50bb61cfbf36d2f002b6937603640ea585d42a0e', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
6440
+ return (hAsync("button", { key: '61dde2ec51ac5099909d38a7420568bfd4fcde0b', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
6438
6441
  '--sd-button-v2-bg': config.color,
6439
6442
  '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
6440
6443
  '--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
6441
6444
  '--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
6442
6445
  '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
6443
- }, onClick: this.handleClick }, hAsync("span", { key: 'a1f34337cc33a6eba29547ff7df39109739bb06c', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: 'fb4b8c87c57979f3c39eaa893626e6c3f5e56b08', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && hAsync("span", { key: '00e78a17818e7c286b33ca45e37eac78102cf590', class: "sd-button-v2__label" }, this.label), this.rightIcon && (hAsync("sd-icon", { key: '9e146585df41a6784a09e8239b28c8e8b4f30516', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
6446
+ }, onClick: this.handleClick }, hAsync("span", { key: 'dc433a47ace0d074503a2c0e5c47c4c8bfa6cb8c', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: '95e941490d78f1950f9f7759112fb714f191a504', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && hAsync("span", { key: 'c13f3fb5bec105d7737ef1f9db7dcd4ca93ce5be', class: "sd-button-v2__label" }, this.label), this.rightIcon && (hAsync("sd-icon", { key: 'fb20dde72eaab014ae0e658477db228c23eddea3', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
6444
6447
  }
6445
6448
  static get style() { return sdButtonV2Css(); }
6446
6449
  static get cmpMeta() { return {
@@ -6678,7 +6681,7 @@ class SdCard {
6678
6681
  bordered = false;
6679
6682
  sdClass = '';
6680
6683
  render() {
6681
- return (hAsync(Fragment, { key: 'dd37653555ffeab3b249575c8a1cbe9aa70498b1' }, hAsync("div", { key: 'eb0cea509b62fe1942d8ddfb955fee920b5c51a5', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'a792a49e58b1b1756f11d0bb6e7441674c63455e' }))));
6684
+ return (hAsync(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, hAsync("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
6682
6685
  }
6683
6686
  static get style() { return sdCardCss(); }
6684
6687
  static get cmpMeta() { return {
@@ -6910,6 +6913,336 @@ class SdCheckbox {
6910
6913
  }; }
6911
6914
  }
6912
6915
 
6916
+ const chip = {
6917
+ height: "24",
6918
+ paddingX: "8",
6919
+ gap: "4",
6920
+ radius: "9999",
6921
+ typography: {
6922
+ "default": {
6923
+ fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
6924
+ fontSize: "12",
6925
+ fontWeight: "500",
6926
+ lineHeight: "20"
6927
+ },
6928
+ focus: {
6929
+ fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
6930
+ fontSize: "12",
6931
+ fontWeight: "400",
6932
+ lineHeight: "20"
6933
+ }
6934
+ },
6935
+ bg: {
6936
+ "default": "#F6F6F6",
6937
+ error: "#FCEFEF",
6938
+ focus: "#FFFFFF"
6939
+ },
6940
+ content: {
6941
+ "default": "#888888",
6942
+ error: "#E30000",
6943
+ focus: "#555555"
6944
+ },
6945
+ border: {
6946
+ focus: "#E1E1E1",
6947
+ width: "1"
6948
+ }
6949
+ };
6950
+ var chipTokens = {
6951
+ chip: chip
6952
+ };
6953
+
6954
+ const CHIP_LAYOUT = {
6955
+ height: `${chipTokens.chip.height}px`,
6956
+ paddingX: `${chipTokens.chip.paddingX}px`,
6957
+ gap: `${chipTokens.chip.gap}px`,
6958
+ radius: `${chipTokens.chip.radius}px`,
6959
+ borderWidth: `${chipTokens.chip.border.width}px`,
6960
+ };
6961
+ const CHIP_COLORS = {
6962
+ bg: {
6963
+ default: chipTokens.chip.bg.default,
6964
+ error: chipTokens.chip.bg.error,
6965
+ focus: chipTokens.chip.bg.focus,
6966
+ },
6967
+ content: {
6968
+ default: chipTokens.chip.content.default,
6969
+ error: chipTokens.chip.content.error,
6970
+ focus: chipTokens.chip.content.focus,
6971
+ },
6972
+ border: {
6973
+ focus: chipTokens.chip.border.focus,
6974
+ },
6975
+ };
6976
+ const CHIP_TYPOGRAPHY = {
6977
+ default: {
6978
+ fontFamily: chipTokens.chip.typography.default.fontFamily,
6979
+ fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
6980
+ fontWeight: chipTokens.chip.typography.default.fontWeight,
6981
+ lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
6982
+ },
6983
+ focus: {
6984
+ fontFamily: chipTokens.chip.typography.focus.fontFamily,
6985
+ fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
6986
+ fontWeight: chipTokens.chip.typography.focus.fontWeight,
6987
+ lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
6988
+ },
6989
+ };
6990
+
6991
+ const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}`;
6992
+
6993
+ class SdChip {
6994
+ constructor(hostRef) {
6995
+ registerInstance(this, hostRef);
6996
+ this.update = createEvent(this, "sdUpdate", 7);
6997
+ this.remove = createEvent(this, "sdRemove", 7);
6998
+ this.focus = createEvent(this, "sdFocus", 7);
6999
+ this.blur = createEvent(this, "sdBlur", 7);
7000
+ }
7001
+ get el() { return getElement(this); }
7002
+ name = '';
7003
+ value = '';
7004
+ error = false;
7005
+ disabled = false;
7006
+ placeholder = '';
7007
+ rules = [];
7008
+ internalValue = '';
7009
+ isEditing = false;
7010
+ update;
7011
+ remove;
7012
+ focus;
7013
+ blur;
7014
+ inputEl;
7015
+ draftValue = '';
7016
+ shouldInitInput = false;
7017
+ valueChanged(newValue) {
7018
+ const nextValue = newValue ?? '';
7019
+ const wasEditing = this.isEditing;
7020
+ this.internalValue = nextValue;
7021
+ this.draftValue = nextValue;
7022
+ if (wasEditing) {
7023
+ this.isEditing = false;
7024
+ this.shouldInitInput = false;
7025
+ this.inputEl?.blur();
7026
+ this.blur.emit();
7027
+ }
7028
+ }
7029
+ componentWillLoad() {
7030
+ this.internalValue = this.value ?? '';
7031
+ }
7032
+ componentDidLoad() {
7033
+ this.registerToForm();
7034
+ }
7035
+ disconnectedCallback() {
7036
+ this.unregisterFromForm();
7037
+ }
7038
+ async sdValidate() {
7039
+ if (!this.rules || this.rules.length === 0) {
7040
+ this.error = false;
7041
+ return true;
7042
+ }
7043
+ for (const rule of this.rules) {
7044
+ const result = rule(this.internalValue ?? '');
7045
+ if (result !== true) {
7046
+ this.error = true;
7047
+ return false;
7048
+ }
7049
+ }
7050
+ this.error = false;
7051
+ return true;
7052
+ }
7053
+ async sdReset() {
7054
+ this.internalValue = '';
7055
+ this.value = '';
7056
+ this.error = false;
7057
+ this.draftValue = '';
7058
+ this.isEditing = false;
7059
+ this.shouldInitInput = false;
7060
+ }
7061
+ async sdResetValidate() {
7062
+ this.error = false;
7063
+ }
7064
+ async sdResetValidation() {
7065
+ this.error = false;
7066
+ }
7067
+ async sdFocus() {
7068
+ if (this.disabled)
7069
+ return;
7070
+ this.enterEditMode();
7071
+ }
7072
+ async sdGetNativeElement() {
7073
+ return this.inputEl ?? null;
7074
+ }
7075
+ enterEditMode = () => {
7076
+ if (this.disabled || this.isEditing)
7077
+ return;
7078
+ this.draftValue = this.internalValue;
7079
+ this.shouldInitInput = true;
7080
+ this.isEditing = true;
7081
+ this.focus.emit();
7082
+ };
7083
+ commitEdit = async () => {
7084
+ if (!this.isEditing)
7085
+ return;
7086
+ const next = (this.inputEl?.textContent ?? this.draftValue).trim();
7087
+ const changed = next !== this.draftValue;
7088
+ this.internalValue = next;
7089
+ this.isEditing = false;
7090
+ this.shouldInitInput = false;
7091
+ this.value = next;
7092
+ if (changed) {
7093
+ this.update.emit(next);
7094
+ }
7095
+ await this.sdValidate();
7096
+ this.blur.emit();
7097
+ };
7098
+ cancelEdit = () => {
7099
+ if (!this.isEditing)
7100
+ return;
7101
+ this.internalValue = this.draftValue;
7102
+ this.isEditing = false;
7103
+ this.shouldInitInput = false;
7104
+ this.blur.emit();
7105
+ };
7106
+ handleChipClick = () => {
7107
+ if (this.disabled || this.isEditing)
7108
+ return;
7109
+ this.enterEditMode();
7110
+ };
7111
+ handleChipKeyDown = (event) => {
7112
+ if (this.disabled || this.isEditing)
7113
+ return;
7114
+ if (event.key === 'Enter' || event.key === ' ') {
7115
+ event.preventDefault();
7116
+ this.enterEditMode();
7117
+ }
7118
+ };
7119
+ handleInputChange = (event) => {
7120
+ const target = event.target;
7121
+ this.internalValue = target.textContent ?? '';
7122
+ };
7123
+ handleInputKeyDown = (event) => {
7124
+ if (event.key === 'Enter') {
7125
+ event.preventDefault();
7126
+ this.commitEdit();
7127
+ }
7128
+ else if (event.key === 'Escape') {
7129
+ event.preventDefault();
7130
+ this.cancelEdit();
7131
+ }
7132
+ };
7133
+ handleInputBlur = () => {
7134
+ this.commitEdit();
7135
+ };
7136
+ handlePaste = (event) => {
7137
+ event.preventDefault();
7138
+ const text = event.clipboardData?.getData('text/plain') ?? '';
7139
+ document.execCommand('insertText', false, text);
7140
+ };
7141
+ handleRemoveClick = (event) => {
7142
+ event.stopPropagation();
7143
+ if (this.disabled)
7144
+ return;
7145
+ this.remove.emit();
7146
+ };
7147
+ syncInputValue(value) {
7148
+ if (!this.inputEl)
7149
+ return;
7150
+ this.inputEl.textContent = value;
7151
+ const range = document.createRange();
7152
+ range.selectNodeContents(this.inputEl);
7153
+ range.collapse(false);
7154
+ const selection = window.getSelection();
7155
+ selection?.removeAllRanges();
7156
+ selection?.addRange(range);
7157
+ }
7158
+ registerToForm() {
7159
+ const formEl = this.el.closest('sd-form');
7160
+ if (!formEl || typeof formEl.componentOnReady !== 'function')
7161
+ return;
7162
+ formEl.componentOnReady().then(form => {
7163
+ form.sdRegisterField(this);
7164
+ });
7165
+ }
7166
+ unregisterFromForm() {
7167
+ if (!this.name)
7168
+ return;
7169
+ const formEl = this.el.closest('sd-form');
7170
+ formEl?.componentOnReady().then(form => {
7171
+ form.sdUnregisterField(this.name);
7172
+ });
7173
+ }
7174
+ componentDidUpdate() {
7175
+ if (this.isEditing && this.inputEl && this.shouldInitInput) {
7176
+ this.inputEl.focus();
7177
+ this.syncInputValue(this.internalValue);
7178
+ this.shouldInitInput = false;
7179
+ }
7180
+ }
7181
+ resolveState() {
7182
+ if (this.isEditing)
7183
+ return 'focus';
7184
+ if (this.error)
7185
+ return 'error';
7186
+ return 'default';
7187
+ }
7188
+ render() {
7189
+ const state = this.resolveState();
7190
+ const typography = state === 'focus' ? CHIP_TYPOGRAPHY.focus : CHIP_TYPOGRAPHY.default;
7191
+ const cssVars = {
7192
+ '--sd-chip-height': CHIP_LAYOUT.height,
7193
+ '--sd-chip-padding-x': CHIP_LAYOUT.paddingX,
7194
+ '--sd-chip-gap': CHIP_LAYOUT.gap,
7195
+ '--sd-chip-radius': CHIP_LAYOUT.radius,
7196
+ '--sd-chip-border-width': CHIP_LAYOUT.borderWidth,
7197
+ '--sd-chip-bg': CHIP_COLORS.bg[state],
7198
+ '--sd-chip-content': CHIP_COLORS.content[state],
7199
+ '--sd-chip-border-color': state === 'focus' ? CHIP_COLORS.border.focus : 'transparent',
7200
+ '--sd-chip-font-family': typography.fontFamily,
7201
+ '--sd-chip-font-size': typography.fontSize,
7202
+ '--sd-chip-font-weight': typography.fontWeight,
7203
+ '--sd-chip-line-height': typography.lineHeight,
7204
+ };
7205
+ return (hAsync("span", { key: 'ec814d57fb4032de1370e56d61cd51b6e831312a', class: {
7206
+ 'sd-chip': true,
7207
+ [`sd-chip--${state}`]: true,
7208
+ 'sd-chip--disabled': this.disabled,
7209
+ 'sd-chip--editable': !this.disabled,
7210
+ }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (hAsync("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
7211
+ hAsync("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
7212
+ !this.disabled && (hAsync("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
7213
+ ])));
7214
+ }
7215
+ static get watchers() { return {
7216
+ "value": [{
7217
+ "valueChanged": 0
7218
+ }]
7219
+ }; }
7220
+ static get style() { return sdChipCss(); }
7221
+ static get cmpMeta() { return {
7222
+ "$flags$": 512,
7223
+ "$tagName$": "sd-chip",
7224
+ "$members$": {
7225
+ "name": [1],
7226
+ "value": [1025],
7227
+ "error": [1028],
7228
+ "disabled": [4],
7229
+ "placeholder": [1],
7230
+ "rules": [16],
7231
+ "internalValue": [32],
7232
+ "isEditing": [32],
7233
+ "sdValidate": [64],
7234
+ "sdReset": [64],
7235
+ "sdResetValidate": [64],
7236
+ "sdResetValidation": [64],
7237
+ "sdFocus": [64],
7238
+ "sdGetNativeElement": [64]
7239
+ },
7240
+ "$listeners$": undefined,
7241
+ "$lazyBundleId$": "-",
7242
+ "$attrsToReflect$": []
7243
+ }; }
7244
+ }
7245
+
6913
7246
  const spinner = {
6914
7247
  color: {
6915
7248
  track: "#EEEEEE",
@@ -6971,7 +7304,7 @@ class SdCircleProgress {
6971
7304
  arcStyle.strokeDashoffset = '0';
6972
7305
  }
6973
7306
  const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
6974
- return (hAsync(Host, { key: 'fb876909febfc95bb69c58031ac37419baa07137', style: hostStyle }, hAsync("svg", { key: '3bb8130bab317a74c1553dd2ceb52b8c0f65f69f', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '5904f93a6b1c333dbcbd805140d5e65b5af20080', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '4d8a1d352e4003a75dd63f67a66a05f595ae5700', 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 }))));
7307
+ return (hAsync(Host, { key: '50b598305810f4f91c5afb7ede87c60178e4e6df', style: hostStyle }, hAsync("svg", { key: '7edcf8a57bf5589910d08a47b64179222ce9c03b', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '43810b096bdd644e4b09bfd770de6b0194afe3c8', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '701cfdd0eadabea530d3a9deada993a568f3fb19', 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 }))));
6975
7308
  }
6976
7309
  static get style() { return sdCircleProgressCss(); }
6977
7310
  static get cmpMeta() { return {
@@ -7081,9 +7414,9 @@ class SdConfirmModal {
7081
7414
  render() {
7082
7415
  const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
7083
7416
  const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
7084
- return (hAsync("div", { key: 'c95e6e3992e9d63c19f27624e92c00b5046503e0', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'edab233c28ebcfc181062d78cb80ec27a3ace8b4', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '4ea2ef8ac6027a6455367b39b6d3cc6cf073f0a8', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '5a25a6f0812a6932949a2667db2af1b69d772293', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: 'b431572003c129a0d44095a317532b535753abd3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'cd425d24bde982323a0156ff18f4dcdc81660dd5', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: '9486cf19dc6692228f615112b0777b6167c1a8de', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
7417
+ return (hAsync("div", { key: '0ec5edeaef4920bb9193c225e5b39465e138eb25', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '78db09f415f399302048280a2d3eb6eb737c1d47', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '30921f2c1fc59b7baa608c5b270f45cced3b4a69', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'fdb1fa855a980ccad41101de0b1b0fc87a8a503b', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: 'e3539c1d7e82c957ba65e3d63e18e74108ed4ccc', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '010bb3a2918672714a664cc9afa561d82ea2af30', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: '6501c456b1cac2fc14e62e8094c5996472eb10cc', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
7085
7418
  this.customContentRef = el;
7086
- } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '7218d8bf72e26f36f88db68f57818911bb09056d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: 'e16de1bb3c851988050b12ac07c7adcedab560da', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: '8c14b099e6b8a93673ff3eb2f0931a45c98d620a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button-v2", { key: 'fb9a3984f0476d2fceca98bac186d0a52a0ab206', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
7419
+ } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'fb38b92bc7ee05ede36eab14d65062a0b6289762', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '7834c5baf84a1537e511f77f1d2bb2c018b2e5df', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: 'ca7a8fa074bde0339052adbacb52a60459e3da23', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button-v2", { key: '5e3238161e753a8ea2a0266d099ff03a89b63871', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
7087
7420
  }
7088
7421
  static get style() { return sdConfirmModalCss(); }
7089
7422
  static get cmpMeta() { return {
@@ -7362,6 +7695,7 @@ class SdDatePicker {
7362
7695
  label = '';
7363
7696
  labelWidth = '';
7364
7697
  addonLabel = '';
7698
+ addonAlign = 'start';
7365
7699
  hint = '';
7366
7700
  errorMessage = '';
7367
7701
  fieldName = '';
@@ -7440,9 +7774,9 @@ class SdDatePicker {
7440
7774
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
7441
7775
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
7442
7776
  };
7443
- return (hAsync("sd-field", { key: '693c0c75e6b0a9ee8323f4be7ec101592e586372', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ea7f506f0163119fac0c660ef1bef5781780a118', class: "sd-date-picker", ref: el => {
7777
+ return (hAsync("sd-field", { key: '1e0bdacf53850916778544e63ce11d5aab06eafc', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '63795f75a1b3723c2af166343dce5fd33afd5be2', class: "sd-date-picker", ref: el => {
7444
7778
  this.triggerRef = el;
7445
- } }, hAsync("sd-date-picker-trigger", { key: '0109eb0326655018bc02cc373e766ffdada85ff0', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '65a628af43ae036a752f3511341fd8c9c82303a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: '21f574fc9551f9aaccfcb5d49a81952dbba72d7a', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7779
+ } }, hAsync("sd-date-picker-trigger", { key: 'adea2cbad36285f546d3c29b66f2c74044427736', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '4da6ec2a3644201b6579fc2e9838d03ef22b7e57', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: '4b7e3757b7232110ec9865346fcd68868ac68081', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7446
7780
  }
7447
7781
  static get watchers() { return {
7448
7782
  "isOpen": [{
@@ -7463,6 +7797,7 @@ class SdDatePicker {
7463
7797
  "label": [1],
7464
7798
  "labelWidth": [8, "label-width"],
7465
7799
  "addonLabel": [1, "addon-label"],
7800
+ "addonAlign": [1, "addon-align"],
7466
7801
  "hint": [1],
7467
7802
  "errorMessage": [1, "error-message"],
7468
7803
  "fieldName": [1, "field-name"],
@@ -7623,7 +7958,7 @@ class SdDatePickerCalendar {
7623
7958
  '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
7624
7959
  '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
7625
7960
  };
7626
- return (hAsync("div", { key: '9e47bf6790f947639b1868a653c9d451905d4a49', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '641a9726b22aff0e465347bf3363fdd6f3110919', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: '71e4838be05148f989af7ccb692482db425c38d7', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '060795c43807ee50b13448ac559fb7945a48d8be', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '5cf2c070134aa04dc5f9d506b91bdff759d9453b', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: 'dd3c9d26bc4b79673e12b90d2a7d563e4adda707', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '962ee5b8adbcbf988bc94b81b3dd0fe4e388a588', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '54d1fcfbcbe1e232cbea5cdd9a948045207771c7', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: 'ff8011dbf88a257ba4b47dbcd1a3b8c414b4e7b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '2594eed1efacc8b3bdf648ab7527a81608e2321d', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: 'a83692da9caeaef4c02c777d43f769026182d5a2', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'bc131a11ed98ac84dee775090ca24be794fece55', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), hAsync("div", { key: 'bc4deb734c9c01806ae7e75640f97d76c9e79f64', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
7961
+ return (hAsync("div", { key: 'd23c08b38605dad1e5b3266a7e1ad72e0aeb7eb9', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '1c25bd19272e1e7f4e81601a0ffa13d7b882e4e4', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: 'aed9a7ff3282d363c61b49dde6b6e9d6131a456c', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '68ae361b1cc4bfd9351b093aee6d4193f2ac5549', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: 'e17d9a962faf96e8b70b0890e59e4c2e5ca515b0', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: 'ab65ce4f9f64fcc9f4084c073a0a0625ceeb9f2d', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: 'a01cb1691e9f112efdd6fd632c7594aa082d7f9f', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '577085a6007e5e2c6b291bbe0a27c0ff4ec4ca78', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: 'c6b51b60d1bcc06e537800c10946ac49639fcb2c', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '836008030a0d66533ffba9392fee0234a9b0b425', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: 'a602cb65934157c171201f01699aacf1eeee8a57', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: '0c1a368d4e878b2942f2b37ddff47ac13262c580', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), hAsync("div", { key: '31cfa57cd8890a7cd70209c771598d6350009cc6', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
7627
7962
  const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
7628
7963
  const isToday = cell.inCurrentMonth && today === cell.date;
7629
7964
  const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -7694,10 +8029,10 @@ class SdDatePickerTrigger {
7694
8029
  ? DATEPICKER_COLORS.icon.disabled
7695
8030
  : DATEPICKER_COLORS.icon.default,
7696
8031
  };
7697
- return (hAsync("div", { key: '5d8508069232bba144bfb9480b0befe420a3392b', class: {
8032
+ return (hAsync("div", { key: 'ebe886b3df3b50c53d31081f6ad7e251721b5cb1', class: {
7698
8033
  'sd-date-picker-trigger': true,
7699
8034
  'sd-date-picker-trigger--disabled': this.disabled,
7700
- }, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: '71131e34dd1225e9633395041f7a768c020343bd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '192520646e181add5f87f6ce1d3a5caf8556b163', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
8035
+ }, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: '563d3bb0221d5ba17788e1fa1e970fd2d702a4fd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '3bfc4c6671e70571a4b71a62cf0fd78f0297027f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
7701
8036
  }
7702
8037
  static get style() { return sdDatePickerTriggerCss(); }
7703
8038
  static get cmpMeta() { return {
@@ -7743,6 +8078,7 @@ class SdDateRangePicker {
7743
8078
  label = '';
7744
8079
  labelWidth = '';
7745
8080
  addonLabel = '';
8081
+ addonAlign = 'start';
7746
8082
  hint = '';
7747
8083
  errorMessage = '';
7748
8084
  fieldName = '';
@@ -7826,9 +8162,9 @@ class SdDateRangePicker {
7826
8162
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
7827
8163
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
7828
8164
  };
7829
- return (hAsync("sd-field", { key: '95ec666c91635d6b6b749d660b4495b7ebe48e6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '3051fda66e94d51208347ae2053173570d5f1ca9', class: "sd-date-range-picker", ref: el => {
8165
+ return (hAsync("sd-field", { key: '34c4d9ef2ba50f951fc6b6b09215e750ac61cd87', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'c92ab61d144c893077a9c81922ac24eff93314dd', class: "sd-date-range-picker", ref: el => {
7830
8166
  this.triggerRef = el;
7831
- } }, hAsync("sd-date-picker-trigger", { key: '71693b5a4cec562169d9427a4e19aed4d8b19a45', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '75b9f1c1ebdabcd1c1a33cad51189ba132274bb1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: 'f158eead4f44bc452bf102b3324721df84fc3b0c', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
8167
+ } }, hAsync("sd-date-picker-trigger", { key: '487b8a1af6e8dee063d70ffc030c314037741d74', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'f22c979943cebcc82e8d4d9f86037621e8c3983a', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: 'c19548d0074556f90c740b6ba35338ea4d41dd18', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7832
8168
  }
7833
8169
  static get watchers() { return {
7834
8170
  "isOpen": [{
@@ -7850,6 +8186,7 @@ class SdDateRangePicker {
7850
8186
  "label": [1],
7851
8187
  "labelWidth": [8, "label-width"],
7852
8188
  "addonLabel": [1, "addon-label"],
8189
+ "addonAlign": [1, "addon-align"],
7853
8190
  "hint": [1],
7854
8191
  "errorMessage": [1, "error-message"],
7855
8192
  "fieldName": [1, "field-name"],
@@ -8116,7 +8453,7 @@ class SdDateRangePickerCalendar {
8116
8453
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
8117
8454
  '--range-divider': RANGE_LAYOUT.divider,
8118
8455
  };
8119
- return (hAsync(Fragment, { key: '99b9de5fce7e4d039b40ed95b3451c28e7799dc8' }, hAsync("div", { key: 'b55374e977f79e6dd7cd5d4af9df30bf41e40fba', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '6bd94cde83d82efc270148434dfb6410dc5f9634', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '9e179166ebad4cf295e831ef2e63fc9677f65b82', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
8456
+ return (hAsync(Fragment, { key: '595c17bc338f96117d87c5ac3c2b26895b9e5283' }, hAsync("div", { key: '39ce76545cc612422ab5024a2838fbc9faabb9a8', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '21764e31a3fbcfa8de22d1f243f5739fc02c38fd', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '402ea75f3bf8b58d30c34238285eef7099118e28', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
8120
8457
  }
8121
8458
  static get watchers() { return {
8122
8459
  "value": [{
@@ -8236,6 +8573,7 @@ const color = {
8236
8573
  accent: {
8237
8574
  "default": "#0075FF"}},
8238
8575
  content: {
8576
+ primary: "#222222",
8239
8577
  secondary: "#555555",
8240
8578
  inverse: "#FFFFFF"
8241
8579
  }};
@@ -8483,7 +8821,7 @@ class SdDropdownButton extends BaseDropdownEvent {
8483
8821
  }
8484
8822
  render() {
8485
8823
  const { config, preset } = this.resolvedConfig;
8486
- return (hAsync("div", { key: '1a6fa00329392de05526a50de55dcd620a43a2db', class: "sd-dropdown-button" }, hAsync("button", { key: 'd73139863c8decca29079a8111e26ea5a2d21614', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
8824
+ return (hAsync("div", { key: '5493b94262ecdd20a5fbb7ad2993dd473b1ae9e3', class: "sd-dropdown-button" }, hAsync("button", { key: 'a64187dec0d84dce3532f8b3d7112ed6d6ae8e0d', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
8487
8825
  '--sd-dropdown-button-bg': config.color,
8488
8826
  '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
8489
8827
  '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -8493,10 +8831,10 @@ class SdDropdownButton extends BaseDropdownEvent {
8493
8831
  '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
8494
8832
  '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
8495
8833
  '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
8496
- } }, hAsync("span", { key: '52e30c7d5f55b2ed974944b23880a42fdf941e31', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '8d693a472783e552613b0c0503b85dc9b5ce0343', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'e9f0fc3980400150c8808e569904bee6c4629dc7', class: {
8834
+ } }, hAsync("span", { key: '71ed27650dcb1beb1cfa4864a6449ab190f04829', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '6c34575c0587fb288165cf0e15db52ed6b3f50db', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: '0544b9d36657a80b5f51b9c1849d55ab7a7dbdc2', class: {
8497
8835
  'sd-dropdown-button__trigger-icon': true,
8498
8836
  'sd-dropdown-button__trigger-icon--open': this.isOpen,
8499
- }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '13fda88989885a9096ed6ecf211b3aadad3f128a', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
8837
+ }, "aria-hidden": "true" }, hAsync("sd-icon", { key: 'cd73a4dffbe1fc31c76fea221cd080b455bb3131', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
8500
8838
  }
8501
8839
  static get watchers() { return {
8502
8840
  "isOpen": [{
@@ -8542,8 +8880,9 @@ const field = {
8542
8880
  icon: "16",
8543
8881
  typography: {
8544
8882
  fontWeight: "700",
8545
- fontSize: "16",
8546
- lineHeight: "26"}
8883
+ fontSize: "14",
8884
+ lineHeight: "24"
8885
+ }
8547
8886
  }
8548
8887
  },
8549
8888
  addonLabel: {
@@ -8566,6 +8905,11 @@ var fieldTokens = {
8566
8905
  field: field
8567
8906
  };
8568
8907
 
8908
+ const FIELD_ADDON_ALIGN_MAP = {
8909
+ start: 'flex-start',
8910
+ center: 'center',
8911
+ end: 'flex-end',
8912
+ };
8569
8913
  const sm$2 = fieldTokens.field.label.sm;
8570
8914
  const md$2 = fieldTokens.field.label.md;
8571
8915
  const FIELD_LABEL_SIZE_MAP = {
@@ -8587,7 +8931,7 @@ const FIELD_LABEL_SIZE_MAP = {
8587
8931
  },
8588
8932
  };
8589
8933
 
8590
- const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
8934
+ const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
8591
8935
 
8592
8936
  const FORM_PARENT_TAGS = [
8593
8937
  'sd-select',
@@ -8622,6 +8966,7 @@ class SdField {
8622
8966
  label = '';
8623
8967
  labelWidth = '';
8624
8968
  addonLabel = '';
8969
+ addonAlign = 'start';
8625
8970
  icon = undefined;
8626
8971
  labelTooltip = '';
8627
8972
  labelTooltipProps = null;
@@ -8752,22 +9097,28 @@ class SdField {
8752
9097
  : addonTokens.border.default,
8753
9098
  '--sd-field-addon-gap': `${addonTokens.gap}px`,
8754
9099
  '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
9100
+ '--sd-field-addon-justify': FIELD_ADDON_ALIGN_MAP[this.addonAlign] ?? FIELD_ADDON_ALIGN_MAP.start,
9101
+ ...(this.labelWidth
9102
+ ? {
9103
+ '--sd-field-addon-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
9104
+ }
9105
+ : {}),
8755
9106
  }
8756
9107
  : {};
8757
- return (hAsync("div", { key: 'f12b2e13ac8152d1e688f903a60a8fa670e99065', class: {
9108
+ return (hAsync("div", { key: '967c6e44e514001350f0ca7eedf97e12ec8bac89', class: {
8758
9109
  'sd-field': true,
8759
9110
  'sd-field--has-label': !!this.label,
8760
9111
  'sd-field--has-addon': !!addon,
8761
9112
  [this.fieldStatus]: !!this.fieldStatus,
8762
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '79f7a40b5e1ee95bb9075b0855e22261cd8adc6a', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '54b5bbfbe18df48c40cc30ec3d6761ccd8e446cc', class: "sd-field__main", style: this.width
9113
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '238c06bb4ea963c5e7b1ee31dfc7f4b7f4b88af1', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '2144211ec7096b3a36dab1bd494b633604fe942b', class: "sd-field__main", style: this.width
8763
9114
  ? {
8764
9115
  width: typeof this.width === 'number' ? `${this.width}px` : this.width,
8765
9116
  flex: 'none',
8766
9117
  }
8767
- : {} }, hAsync("div", { key: '39542908287175ade4d6e0f1acd2cb1f03c9e2a1', class: {
9118
+ : {} }, hAsync("div", { key: '8f5e0e010b5fe4ec60c6cae29a9a4510ba0f34a5', class: {
8768
9119
  'sd-field__control': true,
8769
9120
  'sd-field__control--has-addon': !!addon,
8770
- } }, addon && hAsync("div", { key: '236650de53d1d1951f26586aa0d22f0f267fc411', class: "sd-field__addon" }, addon), hAsync("slot", { key: '41df3dca21aa68d3324617891f2555f1c488a61b' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
9121
+ } }, addon && hAsync("div", { key: '853c73197999da0f753335a06e38aa850d0e9230', class: "sd-field__addon" }, addon), hAsync("slot", { key: '7e6d1d965d83df16e6294d259d1e25b2fab864cd' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
8771
9122
  }
8772
9123
  renderLabel(label) {
8773
9124
  if (!label)
@@ -8793,6 +9144,7 @@ class SdField {
8793
9144
  "label": [1],
8794
9145
  "labelWidth": [8, "label-width"],
8795
9146
  "addonLabel": [1, "addon-label"],
9147
+ "addonAlign": [1, "addon-align"],
8796
9148
  "icon": [16],
8797
9149
  "labelTooltip": [1, "label-tooltip"],
8798
9150
  "labelTooltipProps": [16],
@@ -8851,7 +9203,7 @@ const FILE_PICKER_COLORS = {
8851
9203
  },
8852
9204
  };
8853
9205
 
8854
- const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
9206
+ const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
8855
9207
 
8856
9208
  class SdFilePicker {
8857
9209
  constructor(hostRef) {
@@ -8874,6 +9226,7 @@ class SdFilePicker {
8874
9226
  label = '';
8875
9227
  labelWidth = '';
8876
9228
  addonLabel = '';
9229
+ addonAlign = 'start';
8877
9230
  hint = '';
8878
9231
  errorMessage = '';
8879
9232
  width = '';
@@ -9028,14 +9381,14 @@ class SdFilePicker {
9028
9381
  'sd-file-picker__text': true,
9029
9382
  'sd-file-picker__text--placeholder': !hasFiles,
9030
9383
  'sd-file-picker__text--active': hasFiles,
9031
- } }, displayText), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { class: "sd-file-picker__tooltip" }, displayText))));
9384
+ } }, displayText), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { class: "sd-file-picker__tooltip" }, displayText))));
9032
9385
  if (this.inline) {
9033
9386
  return (hAsync("div", { class: {
9034
9387
  'sd-file-picker--inline': true,
9035
9388
  'sd-file-picker--inline-disabled': this.disabled,
9036
9389
  }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
9037
9390
  }
9038
- return (hAsync("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
9391
+ return (hAsync("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
9039
9392
  }
9040
9393
  static get watchers() { return {
9041
9394
  "value": [{
@@ -9060,6 +9413,7 @@ class SdFilePicker {
9060
9413
  "label": [1],
9061
9414
  "labelWidth": [8, "label-width"],
9062
9415
  "addonLabel": [1, "addon-label"],
9416
+ "addonAlign": [1, "addon-align"],
9063
9417
  "hint": [1],
9064
9418
  "errorMessage": [1, "error-message"],
9065
9419
  "width": [8],
@@ -9094,7 +9448,7 @@ class SdFloatingPopover {
9094
9448
  to = 'body';
9095
9449
  parentRef = null;
9096
9450
  offset = [0, 0];
9097
- zIndex = 10000;
9451
+ zIndex = 998;
9098
9452
  placement = 'bottom';
9099
9453
  open = false;
9100
9454
  close;
@@ -9152,7 +9506,7 @@ class SdFloatingPopover {
9152
9506
  this.wrapper = document.createElement('div');
9153
9507
  Object.assign(this.wrapper.style, {
9154
9508
  position: 'absolute',
9155
- zIndex: (this.zIndex ?? 10000).toString(),
9509
+ zIndex: (this.zIndex ?? 998).toString(),
9156
9510
  transition: 'opacity 0.4s',
9157
9511
  top: '-9999px',
9158
9512
  left: '-9999px',
@@ -9182,18 +9536,22 @@ class SdFloatingPopover {
9182
9536
  switch (this.placement) {
9183
9537
  case 'top':
9184
9538
  top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
9185
- left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
9539
+ left =
9540
+ rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
9186
9541
  break;
9187
9542
  case 'bottom':
9188
9543
  top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
9189
- left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
9544
+ left =
9545
+ rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
9190
9546
  break;
9191
9547
  case 'left':
9192
- top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
9548
+ top =
9549
+ rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
9193
9550
  left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
9194
9551
  break;
9195
9552
  case 'right':
9196
- top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
9553
+ top =
9554
+ rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
9197
9555
  left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
9198
9556
  break;
9199
9557
  }
@@ -9234,7 +9592,7 @@ class SdFloatingPopover {
9234
9592
  this.close.emit();
9235
9593
  }
9236
9594
  render() {
9237
- return hAsync("slot", { key: '4dafb853b2a82e541f59056d2fedf08a6fa040ba' });
9595
+ return hAsync("slot", { key: 'f463fadca5060ebc995d8115575404611b94fb11' });
9238
9596
  }
9239
9597
  static get style() { return sdFloatingPortalCss(); }
9240
9598
  static get cmpMeta() { return {
@@ -9488,19 +9846,19 @@ class SdGhostButton {
9488
9846
  render() {
9489
9847
  const sizeConfig = GHOST_BUTTON_SIZES[this.size];
9490
9848
  const contentColor = this.disabled
9491
- ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
9492
- : GHOST_BUTTON_CONTENT_COLORS[this.intent];
9849
+ ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
9850
+ : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
9493
9851
  const accessibleName = this.ariaLabel.trim() || undefined;
9494
- return (hAsync("button", { key: 'eccb34969779d75bcd77dd6ae12cb99a419af121', class: {
9852
+ return (hAsync("button", { key: '690151271d15b4a3e07b47021f368647cc9daf62', class: {
9495
9853
  'sd-ghost-button': true,
9496
9854
  'sd-ghost-button--disabled': this.disabled,
9497
9855
  }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
9498
9856
  '--sd-ghost-button-size': `${sizeConfig.size}px`,
9499
9857
  '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
9500
- '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
9858
+ '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
9501
9859
  '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
9502
9860
  '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
9503
- }, onClick: this.handleClick }, hAsync("sd-icon", { key: '4ae160e73b72b0b4aa40947c126419b1016c81d3', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9861
+ }, onClick: this.handleClick }, hAsync("sd-icon", { key: '9769fff9f694e7d1fa2cba94fa8e80498d0afe2e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9504
9862
  }
9505
9863
  static get style() { return sdGhostButtonCss(); }
9506
9864
  static get cmpMeta() { return {
@@ -9519,62 +9877,194 @@ class SdGhostButton {
9519
9877
  }; }
9520
9878
  }
9521
9879
 
9522
- const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-button-radius-sm, 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;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.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:var(--sd-button-button-border-width-default, 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:var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);background:var(--sd-button-button-bg-disabled, #E1E1E1);color:var(--sd-button-button-text-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}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 #00973C}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}`;
9880
+ const guide = {
9881
+ button: {
9882
+ height: "28",
9883
+ paddingX: "12",
9884
+ radius: "9999",
9885
+ gap: "6",
9886
+ typography: {
9887
+ fontSize: "12",
9888
+ fontWeight: "500",
9889
+ lineHeight: "20"
9890
+ },
9891
+ icon: {
9892
+ size: "16",
9893
+ "default": "#00973C",
9894
+ active: "#FFFFFF"
9895
+ },
9896
+ border: {
9897
+ width: "1",
9898
+ "default": "#E1E1E1"
9899
+ },
9900
+ bg: {
9901
+ "default": "#FFFFFF",
9902
+ tip: "#00973C",
9903
+ notion: "#1F8AE1"
9904
+ },
9905
+ text: {
9906
+ "default": "#222222",
9907
+ active: "#FFFFFF"
9908
+ }
9909
+ },
9910
+ contents: {
9911
+ paddingX: "24",
9912
+ paddingY: "20",
9913
+ gap: "12",
9914
+ title: {
9915
+ gap: "8"
9916
+ },
9917
+ row: {
9918
+ gap: "8"
9919
+ },
9920
+ body: {
9921
+ gap: "2"
9922
+ },
9923
+ typography: {
9924
+ title: {
9925
+ fontWeight: "700",
9926
+ fontSize: "16",
9927
+ lineHeight: "26"
9928
+ },
9929
+ body: {
9930
+ fontWeight: "400",
9931
+ fontSize: "12",
9932
+ lineHeight: "20"},
9933
+ color: "#222222"
9934
+ },
9935
+ icon: "#00973C",
9936
+ radius: "8"}
9937
+ };
9938
+ var guideTokens = {
9939
+ guide: guide
9940
+ };
9941
+
9942
+ const { button, contents} = guideTokens.guide;
9943
+ const NOTION_ICON_COLOR = systemTokens.color.content.primary;
9944
+ const GUIDE_CONFIG = {
9945
+ button: {
9946
+ height: `${button.height}px`,
9947
+ paddingX: `${button.paddingX}px`,
9948
+ radius: `${button.radius}px`,
9949
+ gap: `${button.gap}px`,
9950
+ fontSize: `${button.typography.fontSize}px`,
9951
+ fontWeight: button.typography.fontWeight,
9952
+ lineHeight: `${button.typography.lineHeight}px`,
9953
+ iconSize: Number(button.icon.size),
9954
+ iconColorDefault: button.icon.default,
9955
+ iconColorActive: button.icon.active,
9956
+ iconColorNotion: NOTION_ICON_COLOR,
9957
+ borderWidth: `${button.border.width}px`,
9958
+ borderColor: button.border.default,
9959
+ bgDefault: button.bg.default,
9960
+ bgTip: button.bg.tip,
9961
+ bgNotion: button.bg.notion,
9962
+ textDefault: button.text.default,
9963
+ textActive: button.text.active,
9964
+ },
9965
+ contents: {
9966
+ paddingX: `${contents.paddingX}px`,
9967
+ paddingY: `${contents.paddingY}px`,
9968
+ gap: `${contents.gap}px`,
9969
+ rowGap: `${contents.row.gap}px`,
9970
+ bodyGap: `${contents.body.gap}px`,
9971
+ titleGap: `${contents.title.gap}px`,
9972
+ radius: `${contents.radius}px`,
9973
+ iconColor: contents.icon,
9974
+ iconColorNotion: NOTION_ICON_COLOR,
9975
+ titleFontSize: `${contents.typography.title.fontSize}px`,
9976
+ titleFontWeight: contents.typography.title.fontWeight,
9977
+ titleLineHeight: `${contents.typography.title.lineHeight}px`,
9978
+ bodyFontSize: `${contents.typography.body.fontSize}px`,
9979
+ bodyFontWeight: contents.typography.body.fontWeight,
9980
+ bodyLineHeight: `${contents.typography.body.lineHeight}px`,
9981
+ textColor: contents.typography.color,
9982
+ },
9983
+ };
9984
+
9985
+ const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-button-radius-sm, 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;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.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:var(--sd-button-button-border-width-default, 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:var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);background:var(--sd-button-button-bg-disabled, #E1E1E1);color:var(--sd-button-button-text-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide .sd-guide__button .sd-button{min-height:var(--sd-guide-button-height);padding:0 var(--sd-guide-button-padding-x);border-radius:var(--sd-guide-button-radius);border:var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);background:var(--sd-guide-button-bg-default);color:var(--sd-guide-button-text-default) !important;transition:none;display:flex;align-items:center;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content{color:var(--sd-guide-button-text-default) !important;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label{margin-left:0;color:var(--sd-guide-button-text-default) !important;font-size:var(--sd-guide-button-font-size);font-weight:var(--sd-guide-button-font-weight);line-height:var(--sd-guide-button-line-height)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-tip);border-color:var(--sd-guide-button-bg-tip)}.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-notion);border-color:var(--sd-guide-button-bg-notion)}.sd-guide__popup{position:relative;padding:var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);border-radius:var(--sd-guide-contents-radius);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:var(--sd-guide-contents-title-gap);margin-bottom:var(--sd-guide-contents-gap)}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;margin-bottom:0;font-size:var(--sd-guide-contents-title-font-size);font-weight:var(--sd-guide-contents-title-font-weight);line-height:var(--sd-guide-contents-title-line-height);color:var(--sd-guide-contents-text-color)}.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:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height)}.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:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height);margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-1:not(:first-child){margin-top:var(--sd-guide-contents-row-gap)}.sd-guide__popup__list__item--depth-2{margin-top:var(--sd-guide-contents-body-gap)}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
9523
9986
 
9524
- const GUIDE_LABEL = {
9525
- help: '활용 TIP',
9526
- pdf: 'PDF Guide',
9527
- youtube: 'Video Guide',
9987
+ const DEFAULT_LABEL_BY_TYPE = {
9988
+ tip: '활용 TIP',
9528
9989
  notion: '사용법 안내',
9529
- event: 'Event Button',
9530
9990
  };
9531
- const GUIDE_ICON = {
9532
- help: {
9533
- name: 'helpOutline',
9534
- size: 20,
9535
- color: 'green_75',
9536
- },
9537
- pdf: { name: 'pdf', size: 20, color: 'red_75' },
9538
- youtube: { name: 'youtube', size: 20, color: 'red_75' },
9539
- notion: { name: 'notion', size: 16, color: 'black' },
9540
- event: { name: 'event', size: 16, color: 'brilliantblue_70' },
9991
+ const ICON_BY_TYPE = {
9992
+ tip: 'helpOutline',
9993
+ notion: 'notion',
9541
9994
  };
9542
9995
  class SdGuide {
9543
9996
  constructor(hostRef) {
9544
9997
  registerInstance(this, hostRef);
9545
9998
  }
9546
9999
  get el() { return getElement(this); }
9547
- type = 'help';
10000
+ type = 'tip';
9548
10001
  label = '';
9549
10002
  message = '';
9550
- guideUrl = '';
10003
+ url = '';
9551
10004
  popupTitle = '';
9552
10005
  popupWidth;
9553
10006
  popupShow = false;
9554
10007
  guideRef;
9555
10008
  handleClickGuide = () => {
9556
- if (this.type === 'help') {
9557
- this.popupShow = !this.popupShow;
10009
+ if (this.type === 'notion') {
10010
+ if (this.url) {
10011
+ window.open(this.url, '_blank', 'noopener,noreferrer');
10012
+ }
9558
10013
  return;
9559
10014
  }
9560
- if (this.guideUrl) {
9561
- window.open(this.guideUrl, '_blank');
9562
- }
10015
+ this.popupShow = !this.popupShow;
9563
10016
  };
9564
- get guideClass() {
9565
- const classes = ['sd-guide', `sd-guide--${this.type}`];
9566
- if (this.popupShow)
9567
- classes.push('sd-guide--active');
9568
- return classes.join(' ');
9569
- }
9570
10017
  closeDropdown = () => {
9571
10018
  this.popupShow = false;
9572
10019
  };
10020
+ get guideStyle() {
10021
+ const { button, contents } = GUIDE_CONFIG;
10022
+ return {
10023
+ '--sd-guide-button-height': button.height,
10024
+ '--sd-guide-button-padding-x': button.paddingX,
10025
+ '--sd-guide-button-radius': button.radius,
10026
+ '--sd-guide-button-gap': button.gap,
10027
+ '--sd-guide-button-font-size': button.fontSize,
10028
+ '--sd-guide-button-font-weight': button.fontWeight,
10029
+ '--sd-guide-button-line-height': button.lineHeight,
10030
+ '--sd-guide-button-border-width': button.borderWidth,
10031
+ '--sd-guide-button-border-color': button.borderColor,
10032
+ '--sd-guide-button-bg-default': button.bgDefault,
10033
+ '--sd-guide-button-bg-tip': button.bgTip,
10034
+ '--sd-guide-button-bg-notion': button.bgNotion,
10035
+ '--sd-guide-button-text-default': button.textDefault,
10036
+ '--sd-guide-button-text-active': button.textActive,
10037
+ '--sd-guide-contents-padding-x': contents.paddingX,
10038
+ '--sd-guide-contents-padding-y': contents.paddingY,
10039
+ '--sd-guide-contents-gap': contents.gap,
10040
+ '--sd-guide-contents-row-gap': contents.rowGap,
10041
+ '--sd-guide-contents-body-gap': contents.bodyGap,
10042
+ '--sd-guide-contents-title-gap': contents.titleGap,
10043
+ '--sd-guide-contents-radius': contents.radius,
10044
+ '--sd-guide-contents-title-font-size': contents.titleFontSize,
10045
+ '--sd-guide-contents-title-font-weight': contents.titleFontWeight,
10046
+ '--sd-guide-contents-title-line-height': contents.titleLineHeight,
10047
+ '--sd-guide-contents-body-font-size': contents.bodyFontSize,
10048
+ '--sd-guide-contents-body-font-weight': contents.bodyFontWeight,
10049
+ '--sd-guide-contents-body-line-height': contents.bodyLineHeight,
10050
+ '--sd-guide-contents-text-color': contents.textColor,
10051
+ };
10052
+ }
9573
10053
  render() {
9574
- const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
9575
- return (hAsync("div", { key: '0f70d3686c37c029635c93a8ad8f937fb2ca73c2', class: "sd-guide", style: {
9576
- '--sd-guide-color': GUIDE_ICON[this.type].color,
9577
- } }, hAsync("sd-button", { key: 'f07235cc53a908237af2f13a98f325340c83fd0e', 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 && (hAsync("sd-portal", { key: '9c5ade0db41a02a343bb77bc1dcb44d12dba6c04', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'd59caf4107b678ce132accfe9f392c3cfa6b35f4', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '22aa97a939e27454dec067effc6911aea6ace2a4', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: '6bf404b6718bbd036acff51101538d967a2cd642', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: 'a63aa9263715f57f2e8bf977c4849f868803a704', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '8ba1969ada651d3226058bb9095ae8b794be1759', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: '41dd2533e146eae12ee7367a243e819362597761', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: 'b45bfd9ff793f0c0860789d16c1c17fef2ad01d5', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
10054
+ const { button, contents } = GUIDE_CONFIG;
10055
+ const isActive = this.popupShow;
10056
+ const isNotion = (this.type ?? 'tip') === 'notion';
10057
+ const defaultLabel = DEFAULT_LABEL_BY_TYPE[this.type ?? 'tip'];
10058
+ const iconName = ICON_BY_TYPE[this.type ?? 'tip'];
10059
+ const buttonIconDefault = isNotion ? button.iconColorNotion : button.iconColorDefault;
10060
+ const popupIconColor = isNotion ? contents.iconColorNotion : contents.iconColor;
10061
+ const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
10062
+ if (isActive)
10063
+ buttonClasses.push('sd-guide__button--active');
10064
+ return (hAsync("div", { key: '4b9aa8bafd13828a4ec29d726f7276fab3042f2d', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: 'e3a17c594d111e95d0cb42dd8315174ccf4dd908', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), variant: isActive ? 'primary' : 'outline', label: this.label || defaultLabel, size: "sm", icon: iconName, iconColor: isActive ? button.iconColorActive : buttonIconDefault, iconSize: button.iconSize, noHover: isActive, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'b57b09779ec23220eb466f710d55e678c913fe24', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'e62ca3a49a4976861a3e485166c8376a71286aba', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '837625b5ab61bd9383cf5329bea66ceb97ef3bac', class: "sd-guide__popup", style: {
10065
+ ...this.guideStyle,
10066
+ width: this.popupWidth ? this.popupWidth + 'px' : '426px',
10067
+ } }, hAsync("sd-ghost-button", { key: '0e3057af64b47e20234269c0e2bf07664b8b3b13', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: '544e3508d232229b4d1edd82fdefa58457cc595a', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '234fb04df972a50fa8deb1cacc6e34fab678d27b', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: '454d5ee4cdfc2a343d64e79dc642a2aee07ed448', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '875d5f5587808e5189e77ca02e55e8d7be1125da', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
9578
10068
  }
9579
10069
  // 현재 2depth까지만 스타일 적용
9580
10070
  renderListItem(message, depth = 0) {
@@ -9596,17 +10086,17 @@ class SdGuide {
9596
10086
  "$flags$": 512,
9597
10087
  "$tagName$": "sd-guide",
9598
10088
  "$members$": {
9599
- "type": [1],
9600
- "label": [1],
10089
+ "type": [513],
10090
+ "label": [513],
9601
10091
  "message": [1],
9602
- "guideUrl": [1, "guide-url"],
10092
+ "url": [1],
9603
10093
  "popupTitle": [1, "popup-title"],
9604
10094
  "popupWidth": [2, "popup-width"],
9605
10095
  "popupShow": [32]
9606
10096
  },
9607
10097
  "$listeners$": undefined,
9608
10098
  "$lazyBundleId$": "-",
9609
- "$attrsToReflect$": []
10099
+ "$attrsToReflect$": [["type", "type"], ["label", "label"]]
9610
10100
  }; }
9611
10101
  }
9612
10102
 
@@ -10174,6 +10664,7 @@ class SdInput {
10174
10664
  type = 'text';
10175
10665
  size = 'sm';
10176
10666
  addonLabel = '';
10667
+ addonAlign = 'start';
10177
10668
  placeholder = '입력해 주세요.';
10178
10669
  disabled = false;
10179
10670
  clearable = false;
@@ -10278,12 +10769,12 @@ class SdInput {
10278
10769
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
10279
10770
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
10280
10771
  };
10281
- return (hAsync("sd-field", { key: 'a72ce8674fb761de7cd188e99cc19d5f3731a899', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'e5cbdbc2b233bda57488ead19401d277891301ae', class: "sd-input__content" }, hAsync("slot", { key: 'a327005770df94ef61f2e08071e77407a24b7b5c', name: "prefix" }), hAsync("input", { key: '36301cd586151b8c607e14715b26fca467f68c13', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '532e201860db0709572502aa4275fc9251e1aeb1', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: 'cc6132852c65f0597cbe25751c7246b1cdad3096', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10772
+ return (hAsync("sd-field", { key: '3b607f0075786647d48ce470d40745e4d5fdcdc1', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '02902d50bbc3275860e814a5d354e83eeed72373', class: "sd-input__content" }, hAsync("slot", { key: '4fb6e53a98853c67e847cdd38b8ddbb606e3f0a1', name: "prefix" }), hAsync("input", { key: '291841a908b8502790f09833f1a30dc56f24ff52', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '13e21f184a9dcee81a1b6d3c11b9137a0ac7203e', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '4e708928b8465d6e8d5c1b6f4a983a9d8c1c8784', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10282
10773
  if (this.disabled)
10283
10774
  return;
10284
10775
  this.internalValue = '';
10285
10776
  await this.formField?.sdValidate();
10286
- } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: 'fd3d567346cf5771ec28c73f15cdf0db15835766', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
10777
+ } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: 'cc87104d0c9ef69659041fe233b3e432b62ed0b8', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
10287
10778
  if (this.disabled)
10288
10779
  return;
10289
10780
  this.passwordVisible = !this.passwordVisible;
@@ -10306,6 +10797,7 @@ class SdInput {
10306
10797
  "type": [1],
10307
10798
  "size": [1],
10308
10799
  "addonLabel": [1, "addon-label"],
10800
+ "addonAlign": [1, "addon-align"],
10309
10801
  "placeholder": [1],
10310
10802
  "disabled": [4],
10311
10803
  "clearable": [4],
@@ -10346,7 +10838,7 @@ class SdInput {
10346
10838
  }; }
10347
10839
  }
10348
10840
 
10349
- const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 10000);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
10841
+ const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
10350
10842
 
10351
10843
  class SdLoadingContainer {
10352
10844
  constructor(hostRef) {
@@ -10362,10 +10854,10 @@ class SdLoadingContainer {
10362
10854
  this.visible = false;
10363
10855
  }
10364
10856
  render() {
10365
- return (hAsync("div", { key: 'e4578e196ebd4ee69d424fe85c9bf651bc3382f7', class: {
10857
+ return (hAsync("div", { key: '8236579ed01f703fb105576c2fd575b157b3aa76', class: {
10366
10858
  'sd-loading-container': true,
10367
10859
  'sd-loading-container--visible': this.visible,
10368
- }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: 'ae9fae9408f9b69591554ca105abb2ece362db00', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '27d0c6518dacbb664cebb2fc76c9ceb14b2b3aac', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'ace74d2550a2ddb579c61e6f8daaaf64915e8666', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: 'af059ecdadf7b3b3c0a0437cbc4264ff550fa3c6', class: "sd-loading-container__message" }, this.message)))));
10860
+ }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '176473a839add91a86d207544e9cc5862b13d04f', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '2776ed326caa6870a79b94079ff6e778ee560b02', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '6977bfd46e06e9c13492a15b5081c98446770de5', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '7cea458c498a4682b1d4d5f07e059ed8e4905df0', class: "sd-loading-container__message" }, this.message)))));
10369
10861
  }
10370
10862
  static get style() { return sdLoadingContainerCss(); }
10371
10863
  static get cmpMeta() { return {
@@ -10458,7 +10950,7 @@ class SdLoadingModal {
10458
10950
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
10459
10951
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
10460
10952
  };
10461
- return (hAsync(Host, { key: '19735a93969986e8af39ae1dbe6b2373936e8304', style: hostStyle }, hAsync("div", { key: 'd82512e430460c47619ce54ceab5961637e43bc0', class: "sd-loading-modal" }, hAsync("div", { key: '265d697fe23e64366ce43ffc489c7c9a62c9a72c', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("p", { key: '17800ecf73823075c5efb694e244f986c07759be', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (hAsync("div", { key: '03b7d5599356974df47546e4256bd093a1a3c991', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '5dc71e51cc524a3dc01d7c020b763117718ec170', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
10953
+ return (hAsync(Host, { key: '8ecd5db2ffde201dd0c7d3c58b1da6b85b5a4116', style: hostStyle }, hAsync("div", { key: '61f79b16b22d5ab4bb4dca03f88568174cfcfb1f', class: "sd-loading-modal" }, hAsync("div", { key: 'bc373cfebab5949bee9c024bd86ca92d8294ff7b', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("p", { key: 'e9015b9c9813b1968c8ca7991d654761eb3ee9b3', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (hAsync("div", { key: '4ed941961611fe9533bd2b989c9b68ef6c7ca741', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '13f4c5ef5ad5285d846716e5dd72d9f2565c08f9', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
10462
10954
  }
10463
10955
  static get style() { return sdLoadingModalCss(); }
10464
10956
  static get cmpMeta() { return {
@@ -10478,7 +10970,105 @@ class SdLoadingModal {
10478
10970
  }; }
10479
10971
  }
10480
10972
 
10481
- const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 9999);display:flex;align-items:center;justify-content:center}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1}sd-modal-container .sd-modal-container__content{position:relative;z-index:1;display:grid;place-items:center}sd-modal-container .sd-modal-container__content>*{grid-row:1;grid-column:1}sd-modal-container .sd-modal-container__modal{opacity:0;transform:scale(0);transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
10973
+ const DEFAULT_BASE_Z_INDEX = 997;
10974
+ let baseZIndex = DEFAULT_BASE_Z_INDEX;
10975
+ let entries = [];
10976
+ let bodyScrollLocked = false;
10977
+ let previousBodyOverflow = null;
10978
+ let isKeydownAttached = false;
10979
+ function isBrowserEnvironment() {
10980
+ return typeof window !== 'undefined' && typeof document !== 'undefined';
10981
+ }
10982
+ function getTopInteractiveEntry() {
10983
+ return [...entries].reverse().find(entry => entry.interactive);
10984
+ }
10985
+ function syncBodyScrollLock() {
10986
+ if (!isBrowserEnvironment())
10987
+ return;
10988
+ const shouldLock = entries.length > 0;
10989
+ if (shouldLock === bodyScrollLocked)
10990
+ return;
10991
+ if (shouldLock) {
10992
+ previousBodyOverflow = document.body.style.overflow || '';
10993
+ document.body.style.overflow = 'hidden';
10994
+ }
10995
+ else {
10996
+ document.body.style.overflow = previousBodyOverflow ?? '';
10997
+ previousBodyOverflow = null;
10998
+ }
10999
+ bodyScrollLocked = shouldLock;
11000
+ }
11001
+ function updateEntryZIndices() {
11002
+ entries.forEach(entry => {
11003
+ entry.setZIndex(baseZIndex);
11004
+ });
11005
+ }
11006
+ function detachKeydownListener() {
11007
+ if (!isBrowserEnvironment() || !isKeydownAttached)
11008
+ return;
11009
+ window.removeEventListener('keydown', handleWindowKeydown);
11010
+ isKeydownAttached = false;
11011
+ }
11012
+ function attachKeydownListener() {
11013
+ if (!isBrowserEnvironment() || isKeydownAttached)
11014
+ return;
11015
+ window.addEventListener('keydown', handleWindowKeydown);
11016
+ isKeydownAttached = true;
11017
+ }
11018
+ function syncGlobalState() {
11019
+ updateEntryZIndices();
11020
+ syncBodyScrollLock();
11021
+ if (entries.length > 0)
11022
+ attachKeydownListener();
11023
+ else
11024
+ detachKeydownListener();
11025
+ }
11026
+ function handleWindowKeydown(e) {
11027
+ if (e.key !== 'Escape')
11028
+ return;
11029
+ const topEntry = getTopInteractiveEntry();
11030
+ if (!topEntry)
11031
+ return;
11032
+ if (topEntry.persistent) {
11033
+ topEntry.shake();
11034
+ return;
11035
+ }
11036
+ topEntry.requestClose('close');
11037
+ }
11038
+ function registerModal(entry) {
11039
+ entries = [
11040
+ ...entries.filter(item => item.id !== entry.id),
11041
+ {
11042
+ ...entry,
11043
+ interactive: true,
11044
+ },
11045
+ ];
11046
+ syncGlobalState();
11047
+ }
11048
+ function unregisterModal(id) {
11049
+ entries = entries.filter(entry => entry.id !== id);
11050
+ syncGlobalState();
11051
+ }
11052
+ function setModalInteractive(id, interactive) {
11053
+ entries = entries.map(entry => (entry.id === id ? { ...entry, interactive } : entry));
11054
+ syncGlobalState();
11055
+ }
11056
+ function isTopInteractiveModal(id) {
11057
+ return getTopInteractiveEntry()?.id === id;
11058
+ }
11059
+ function requestCloseForModal(id) {
11060
+ const topEntry = getTopInteractiveEntry();
11061
+ if (!topEntry || topEntry.id !== id)
11062
+ return false;
11063
+ if (topEntry.persistent) {
11064
+ topEntry.shake();
11065
+ return true;
11066
+ }
11067
+ topEntry.requestClose('close');
11068
+ return true;
11069
+ }
11070
+
11071
+ const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
10482
11072
 
10483
11073
  let modalIdCounter = 0;
10484
11074
  const ANIMATION_DURATION = 350;
@@ -10487,31 +11077,21 @@ class SdModalContainer {
10487
11077
  registerInstance(this, hostRef);
10488
11078
  }
10489
11079
  get el() { return getElement(this); }
10490
- entries = [];
11080
+ autoRemove = false;
11081
+ entry;
10491
11082
  isVisible = false;
10492
- isBackdropVisible = false;
10493
- contentRef;
10494
- containerDismissTimerId;
10495
- previousBodyOverflow = null;
10496
- bodyScrollLocked = false;
10497
- handleKeydown(e) {
10498
- if (e.key === 'Escape') {
10499
- const top = this.getTopEntry();
10500
- if (!top)
10501
- return;
10502
- if (top.persistent) {
10503
- this.shakeModal(top.modalEl);
10504
- return;
10505
- }
10506
- this.dispatchClose(top.modalEl);
10507
- }
10508
- }
11083
+ backdropVisible = false;
11084
+ layerRef;
10509
11085
  async open(options, modalRef) {
10510
11086
  const id = `modal-${++modalIdCounter}`;
10511
11087
  const modalEl = this.createConfirmModal(id, options);
10512
11088
  this.attachModalEventListeners(id, modalEl);
10513
- this.registerEntry(id, modalEl, modalRef, {
11089
+ this.mountEntry({
11090
+ id,
11091
+ modalEl,
11092
+ modalRef,
10514
11093
  persistent: !!options.persistent,
11094
+ closing: false,
10515
11095
  });
10516
11096
  return id;
10517
11097
  }
@@ -10519,8 +11099,12 @@ class SdModalContainer {
10519
11099
  const id = `modal-${++modalIdCounter}`;
10520
11100
  const modalEl = this.createLoadingModal(id, options);
10521
11101
  this.attachLoadingModalEventListeners(id, modalEl);
10522
- this.registerEntry(id, modalEl, modalRef, {
11102
+ this.mountEntry({
11103
+ id,
11104
+ modalEl,
11105
+ modalRef,
10523
11106
  persistent: !!options.persistent,
11107
+ closing: false,
10524
11108
  });
10525
11109
  return id;
10526
11110
  }
@@ -10529,70 +11113,118 @@ class SdModalContainer {
10529
11113
  element.setAttribute('data-modal-id', id);
10530
11114
  element.classList.add('sd-modal-container__modal');
10531
11115
  this.attachModalEventListeners(id, element);
10532
- this.registerEntry(id, element, modalRef, {
11116
+ this.mountEntry({
11117
+ id,
11118
+ modalEl: element,
11119
+ modalRef,
10533
11120
  persistent: !!options.persistent,
11121
+ closing: false,
10534
11122
  });
10535
11123
  return id;
10536
11124
  }
10537
- attachModalEventListeners(id, modalEl) {
10538
- modalEl.addEventListener('sdOk', () => this.requestDismiss(id, 'confirm'));
10539
- modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
10540
- modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
10541
- }
10542
- attachLoadingModalEventListeners(id, modalEl) {
10543
- modalEl.addEventListener('sdClick', () => {
10544
- const entry = (this.entries ?? []).find(item => item.id === id);
10545
- entry?.modalRef._triggerClick?.();
10546
- });
10547
- }
10548
- dispatchClose(modalEl) {
10549
- modalEl.dispatchEvent(new CustomEvent('sdClose'));
10550
- }
10551
- registerEntry(id, modalEl, modalRef, meta) {
10552
- if (this.containerDismissTimerId) {
10553
- clearTimeout(this.containerDismissTimerId);
10554
- this.containerDismissTimerId = undefined;
10555
- }
10556
- this.entries = [
10557
- ...(this.entries ?? []),
10558
- {
10559
- id,
10560
- modalEl,
10561
- modalRef,
10562
- persistent: meta.persistent,
10563
- closing: false,
10564
- },
10565
- ];
10566
- this.isVisible = true;
10567
- this.setBodyScrollLock(true);
10568
- requestAnimationFrame(() => {
10569
- if (!this.contentRef)
10570
- return;
10571
- this.contentRef.appendChild(modalEl);
10572
- this.waitForModalReady(modalEl).then(() => {
10573
- requestAnimationFrame(() => {
10574
- const currentEntry = (this.entries ?? []).find(item => item.id === id);
10575
- if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
10576
- return;
10577
- this.isBackdropVisible = true;
10578
- modalEl.classList.add('sd-modal-container__modal--visible');
10579
- });
11125
+ componentDidRender() {
11126
+ if (!this.entry || this.entry.closing || !this.layerRef)
11127
+ return;
11128
+ if (this.entry.modalEl.isConnected)
11129
+ return;
11130
+ const { id, modalEl } = this.entry;
11131
+ this.layerRef.appendChild(modalEl);
11132
+ this.waitForModalReady(modalEl).then(() => {
11133
+ requestAnimationFrame(() => {
11134
+ if (!this.entry || this.entry.id !== id || this.entry.closing || !modalEl.isConnected)
11135
+ return;
11136
+ this.backdropVisible = true;
11137
+ modalEl.classList.add('sd-modal-container__modal--visible');
10580
11138
  });
10581
11139
  });
10582
11140
  }
11141
+ disconnectedCallback() {
11142
+ if (this.entry?.dismissTimerId)
11143
+ clearTimeout(this.entry.dismissTimerId);
11144
+ if (this.entry)
11145
+ unregisterModal(this.entry.id);
11146
+ }
10583
11147
  async dismissById(id, reason) {
10584
- this.requestDismiss(id, reason);
11148
+ if (this.entry?.id !== id)
11149
+ return;
11150
+ this.requestDismiss(reason);
10585
11151
  }
10586
11152
  async update(id, props) {
10587
- const entry = (this.entries ?? []).find(e => e.id === id);
10588
- if (!entry || entry.closing)
11153
+ if (!this.entry || this.entry.id !== id || this.entry.closing)
10589
11154
  return;
10590
- const tag = entry.modalEl.tagName.toLowerCase();
11155
+ const tag = this.entry.modalEl.tagName.toLowerCase();
10591
11156
  if (tag === 'sd-loading-modal') {
10592
- this.applyLoadingProps(entry.modalEl, props);
11157
+ this.applyLoadingProps(this.entry.modalEl, props);
11158
+ return;
10593
11159
  }
10594
- else {
10595
- this.applyProps(entry.modalEl, props);
11160
+ this.applyProps(this.entry.modalEl, props);
11161
+ }
11162
+ mountEntry(entry) {
11163
+ if (this.entry) {
11164
+ throw new Error('[sd-modal-container] This instance already manages an active modal.');
11165
+ }
11166
+ this.entry = entry;
11167
+ this.backdropVisible = false;
11168
+ this.isVisible = true;
11169
+ registerModal({
11170
+ id: entry.id,
11171
+ persistent: entry.persistent,
11172
+ requestClose: () => this.dispatchClose(),
11173
+ shake: () => this.shakeModal(entry.modalEl),
11174
+ setZIndex: zIndex => {
11175
+ this.el.style.setProperty('--sd-modal-container-z-index', String(zIndex));
11176
+ },
11177
+ });
11178
+ }
11179
+ attachModalEventListeners(_id, modalEl) {
11180
+ modalEl.addEventListener('sdOk', () => this.requestDismiss('confirm'));
11181
+ modalEl.addEventListener('sdCancel', () => this.requestDismiss('cancel'));
11182
+ modalEl.addEventListener('sdClose', () => this.requestDismiss('close'));
11183
+ }
11184
+ attachLoadingModalEventListeners(_id, modalEl) {
11185
+ modalEl.addEventListener('sdClick', () => {
11186
+ this.entry?.modalRef._triggerClick?.();
11187
+ });
11188
+ }
11189
+ dispatchClose() {
11190
+ this.entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
11191
+ }
11192
+ requestDismiss(reason) {
11193
+ const currentEntry = this.entry;
11194
+ if (!currentEntry || currentEntry.closing)
11195
+ return;
11196
+ currentEntry.modalEl.classList.remove('sd-modal-container__modal--visible');
11197
+ const dismissTimerId = setTimeout(() => {
11198
+ this.finalizeDismiss(currentEntry.id);
11199
+ }, ANIMATION_DURATION);
11200
+ setModalInteractive(currentEntry.id, false);
11201
+ this.entry = {
11202
+ ...currentEntry,
11203
+ closing: true,
11204
+ dismissTimerId,
11205
+ };
11206
+ this.backdropVisible = false;
11207
+ if (reason === 'confirm')
11208
+ currentEntry.modalRef._triggerOk();
11209
+ else if (reason === 'cancel')
11210
+ currentEntry.modalRef._triggerCancel();
11211
+ else if (reason === 'close')
11212
+ currentEntry.modalRef._triggerClose();
11213
+ }
11214
+ finalizeDismiss(id) {
11215
+ const currentEntry = this.entry;
11216
+ if (!currentEntry || currentEntry.id !== id)
11217
+ return;
11218
+ if (currentEntry.dismissTimerId)
11219
+ clearTimeout(currentEntry.dismissTimerId);
11220
+ currentEntry.modalEl.remove();
11221
+ unregisterModal(id);
11222
+ currentEntry.modalRef._triggerDismissed();
11223
+ this.entry = undefined;
11224
+ this.backdropVisible = false;
11225
+ this.isVisible = false;
11226
+ if (this.autoRemove) {
11227
+ this.el.remove();
10596
11228
  }
10597
11229
  }
10598
11230
  createConfirmModal(id, options) {
@@ -10615,12 +11247,10 @@ class SdModalContainer {
10615
11247
  if (this.hasOwnProp(options, 'message'))
10616
11248
  this.setAttr(el, 'message', options.message);
10617
11249
  if (this.hasOwnProp(options, 'useButton')) {
10618
- if (options.useButton) {
11250
+ if (options.useButton)
10619
11251
  el.setAttribute('use-button', '');
10620
- }
10621
- else {
11252
+ else
10622
11253
  el.removeAttribute('use-button');
10623
- }
10624
11254
  }
10625
11255
  if (this.hasOwnProp(options, 'buttonLabel')) {
10626
11256
  this.setAttr(el, 'button-label', options.buttonLabel);
@@ -10662,14 +11292,9 @@ class SdModalContainer {
10662
11292
  el.tagContents = options.tagContents;
10663
11293
  }
10664
11294
  handleBackdropClick = () => {
10665
- const top = this.getTopEntry();
10666
- if (!top)
10667
- return;
10668
- if (top.persistent) {
10669
- this.shakeModal(top.modalEl);
11295
+ if (!this.entry || !isTopInteractiveModal(this.entry.id))
10670
11296
  return;
10671
- }
10672
- this.dispatchClose(top.modalEl);
11297
+ requestCloseForModal(this.entry.id);
10673
11298
  };
10674
11299
  shakeModal(modalEl) {
10675
11300
  const cls = 'sd-modal-container__modal--shake';
@@ -10679,73 +11304,6 @@ class SdModalContainer {
10679
11304
  modalEl.classList.add(cls);
10680
11305
  });
10681
11306
  }
10682
- disconnectedCallback() {
10683
- (this.entries ?? []).forEach(entry => {
10684
- if (entry.dismissTimerId)
10685
- clearTimeout(entry.dismissTimerId);
10686
- });
10687
- if (this.containerDismissTimerId)
10688
- clearTimeout(this.containerDismissTimerId);
10689
- this.setBodyScrollLock(false);
10690
- }
10691
- setBodyScrollLock(lock) {
10692
- if (typeof document === 'undefined')
10693
- return;
10694
- if (lock === this.bodyScrollLocked)
10695
- return;
10696
- if (lock) {
10697
- this.previousBodyOverflow = document.body.style.overflow || '';
10698
- document.body.style.overflow = 'hidden';
10699
- }
10700
- else {
10701
- document.body.style.overflow = this.previousBodyOverflow ?? '';
10702
- this.previousBodyOverflow = null;
10703
- }
10704
- this.bodyScrollLocked = lock;
10705
- }
10706
- getTopEntry() {
10707
- return [...(this.entries ?? [])].reverse().find(entry => !entry.closing);
10708
- }
10709
- requestDismiss(id, reason) {
10710
- const entry = (this.entries ?? []).find(item => item.id === id);
10711
- if (!entry || entry.closing)
10712
- return;
10713
- entry.modalEl.classList.remove('sd-modal-container__modal--visible');
10714
- const remainingActive = (this.entries ?? []).filter(item => item.id !== id && !item.closing);
10715
- if (remainingActive.length === 0) {
10716
- this.isBackdropVisible = false;
10717
- }
10718
- const dismissTimerId = setTimeout(() => {
10719
- this.finalizeDismiss(id);
10720
- }, ANIMATION_DURATION);
10721
- this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
10722
- if (reason === 'confirm')
10723
- entry.modalRef._triggerOk();
10724
- else if (reason === 'cancel')
10725
- entry.modalRef._triggerCancel();
10726
- else if (reason === 'close')
10727
- entry.modalRef._triggerClose();
10728
- }
10729
- finalizeDismiss(id) {
10730
- const entry = (this.entries ?? []).find(item => item.id === id);
10731
- if (!entry)
10732
- return;
10733
- if (entry.dismissTimerId)
10734
- clearTimeout(entry.dismissTimerId);
10735
- entry.modalEl.remove();
10736
- const nextEntries = (this.entries ?? []).filter(item => item.id !== id);
10737
- this.entries = nextEntries;
10738
- if (nextEntries.length === 0) {
10739
- this.setBodyScrollLock(false);
10740
- this.containerDismissTimerId = setTimeout(() => {
10741
- if ((this.entries ?? []).length === 0) {
10742
- this.isVisible = false;
10743
- }
10744
- this.containerDismissTimerId = undefined;
10745
- }, ANIMATION_DURATION);
10746
- }
10747
- entry.modalRef._triggerDismissed();
10748
- }
10749
11307
  waitForModalReady(modalEl) {
10750
11308
  const componentOnReady = modalEl.componentOnReady;
10751
11309
  if (typeof componentOnReady === 'function') {
@@ -10766,28 +11324,31 @@ class SdModalContainer {
10766
11324
  el.setAttribute(name, value);
10767
11325
  }
10768
11326
  render() {
10769
- if (!this.isVisible)
11327
+ if (!this.isVisible || !this.entry)
10770
11328
  return null;
10771
- return (hAsync("div", { class: "sd-modal-container" }, hAsync("div", { class: {
11329
+ return (hAsync("div", { class: "sd-modal-container" }, hAsync("div", { class: "sd-modal-container__layer", "data-modal-id": this.entry.id, ref: el => {
11330
+ this.layerRef = el;
11331
+ } }, hAsync("div", { class: {
10772
11332
  'sd-modal-container__backdrop': true,
10773
- 'sd-modal-container__backdrop--visible': this.isBackdropVisible,
10774
- }, onClick: this.handleBackdropClick }), hAsync("div", { class: "sd-modal-container__content", ref: el => { this.contentRef = el; } })));
11333
+ 'sd-modal-container__backdrop--visible': this.backdropVisible,
11334
+ }, onClick: this.handleBackdropClick }))));
10775
11335
  }
10776
11336
  static get style() { return sdModalContainerCss(); }
10777
11337
  static get cmpMeta() { return {
10778
11338
  "$flags$": 512,
10779
11339
  "$tagName$": "sd-modal-container",
10780
11340
  "$members$": {
10781
- "entries": [32],
11341
+ "autoRemove": [4, "auto-remove"],
11342
+ "entry": [32],
10782
11343
  "isVisible": [32],
10783
- "isBackdropVisible": [32],
11344
+ "backdropVisible": [32],
10784
11345
  "open": [64],
10785
11346
  "openLoading": [64],
10786
11347
  "createCustom": [64],
10787
11348
  "dismissById": [64],
10788
11349
  "update": [64]
10789
11350
  },
10790
- "$listeners$": [[8, "keydown", "handleKeydown"]],
11351
+ "$listeners$": undefined,
10791
11352
  "$lazyBundleId$": "-",
10792
11353
  "$attrsToReflect$": []
10793
11354
  }; }
@@ -10916,6 +11477,7 @@ class SdNumberInput {
10916
11477
  label;
10917
11478
  labelWidth = '';
10918
11479
  addonLabel = '';
11480
+ addonAlign = 'start';
10919
11481
  placeholder = '입력해 주세요.';
10920
11482
  disabled = false;
10921
11483
  width;
@@ -11174,12 +11736,12 @@ class SdNumberInput {
11174
11736
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
11175
11737
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
11176
11738
  };
11177
- return (hAsync("sd-field", { key: 'f81b01b27960130cbf6b37a29fc0ddc11750768e', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '0f9b5a0b966c7d51d5913c61a585ff789fa4973f', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'b037ee3062253bf229f9639dd04c7475657fabb6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '39a9f73a15008a481e758e663e027cd4f6454146', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11739
+ return (hAsync("sd-field", { key: 'a9512622774c930c8b70b3d739a405e2434f22a7', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'f068ab7a042a97dfac7aaf160508757306dddc14', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: '37341e813e7902f07c2731c708e1aadc53411653', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '740b2715518534b0ece5aa3b3f6dfd0dfafd6368', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11178
11740
  ? NUMBER_INPUT_STEPPER.icon.disabled
11179
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '050334ce25bb767e7f11dca886d4aeecaa1ed3dc', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: 'a72697d136eeee52ef23fee6ee2017b6dd37e54c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
11741
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '9b16f311a1408dfc84124ec938a98b13635f6dc6', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '572e2a8a1d7283e3568a85ba6c1bd506c3ec4453', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
11180
11742
  textAlign: this.useButton ? 'center' : 'right',
11181
11743
  ...this.inputStyle,
11182
- } }), this.inputSuffix && (hAsync("span", { key: '845202622b3377add18782d96d0af0c49caf95ec', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '208c976c1b755bec0cd7efb5ceacb3e07dce3a7d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'fe9848c8f044d01378dc183a80d3f81eb56a67f9', name: "add", size: iconSize, color: this.isIncrementDisabled()
11744
+ } }), this.inputSuffix && (hAsync("span", { key: '13a07217ee34c793669b061c240062805a40db60', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: 'c3557737be6cc5dc6c5ab171bcc078cf564fb2b0', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '530cf50331768df5be16639e46ce3f7f438ffe02', name: "add", size: iconSize, color: this.isIncrementDisabled()
11183
11745
  ? NUMBER_INPUT_STEPPER.icon.disabled
11184
11746
  : NUMBER_INPUT_STEPPER.icon.default }))))));
11185
11747
  }
@@ -11206,6 +11768,7 @@ class SdNumberInput {
11206
11768
  "label": [1],
11207
11769
  "labelWidth": [8, "label-width"],
11208
11770
  "addonLabel": [1, "addon-label"],
11771
+ "addonAlign": [1, "addon-align"],
11209
11772
  "placeholder": [1],
11210
11773
  "disabled": [4],
11211
11774
  "width": [8],
@@ -11236,16 +11799,75 @@ class SdNumberInput {
11236
11799
  }; }
11237
11800
  }
11238
11801
 
11239
- const sdPaginationCss = () => `.sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006AC1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006AC1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006AC1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006AC1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}`;
11802
+ const pagination = {
11803
+ height: "24",
11804
+ paddingX: "6",
11805
+ radius: "6",
11806
+ gap: "12",
11807
+ move: {
11808
+ gap: "4"
11809
+ },
11810
+ icon: "12",
11811
+ typography: {
11812
+ "default": {
11813
+ fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
11814
+ fontSize: "12",
11815
+ fontWeight: "500",
11816
+ lineHeight: "20"},
11817
+ selected: {
11818
+ fontWeight: "700"}
11819
+ },
11820
+ item: {
11821
+ bg: {
11822
+ hover: "#EEEEEE",
11823
+ selected: "#E6F1FF"
11824
+ },
11825
+ content: {
11826
+ "default": "#555555",
11827
+ hover: "#004290",
11828
+ selected: "#004290"
11829
+ }
11830
+ }
11831
+ };
11832
+ var paginationTokens = {
11833
+ pagination: pagination
11834
+ };
11240
11835
 
11241
- const BUTTON_WIDTH = {
11242
- 1: 26,
11243
- 2: 36,
11244
- 3: 42,
11245
- 4: 50,
11246
- 5: 58,
11836
+ const PAGINATION_LAYOUT = {
11837
+ height: `${paginationTokens.pagination.height}px`,
11838
+ paddingX: `${paginationTokens.pagination.paddingX}px`,
11839
+ radius: `${paginationTokens.pagination.radius}px`,
11840
+ gap: `${paginationTokens.pagination.gap}px`,
11841
+ moveGap: `${paginationTokens.pagination.move.gap}px`,
11842
+ iconSize: Number(paginationTokens.pagination.icon),
11247
11843
  };
11844
+ const PAGINATION_TYPOGRAPHY = {
11845
+ fontFamily: paginationTokens.pagination.typography.default.fontFamily,
11846
+ fontSize: `${paginationTokens.pagination.typography.default.fontSize}px`,
11847
+ lineHeight: `${paginationTokens.pagination.typography.default.lineHeight}px`,
11848
+ fontWeightDefault: paginationTokens.pagination.typography.default.fontWeight,
11849
+ fontWeightSelected: paginationTokens.pagination.typography.selected.fontWeight,
11850
+ };
11851
+ const PAGINATION_COLORS = {
11852
+ contentDefault: paginationTokens.pagination.item.content.default,
11853
+ contentHover: paginationTokens.pagination.item.content.hover,
11854
+ contentSelected: paginationTokens.pagination.item.content.selected,
11855
+ bgHover: paginationTokens.pagination.item.bg.hover,
11856
+ bgSelected: paginationTokens.pagination.item.bg.selected,
11857
+ // TODO: 토큰 반영 후 교체 — nav 화살표 색상은 현재 토큰에 없음
11858
+ iconDefault: '#888888',
11859
+ };
11860
+
11861
+ const sdPaginationCss = () => `sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected);cursor:default}.sd-pagination__item--selected:hover{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected)}.sd-pagination__info{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height)}.sd-pagination__current{color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}`;
11862
+
11248
11863
  const PER_PAGE = 10;
11864
+ const BUTTON_WIDTH = {
11865
+ 1: 24,
11866
+ 2: 34,
11867
+ 3: 40,
11868
+ 4: 48,
11869
+ 5: 56,
11870
+ };
11249
11871
  class SdPagination {
11250
11872
  constructor(hostRef) {
11251
11873
  registerInstance(this, hostRef);
@@ -11255,13 +11877,6 @@ class SdPagination {
11255
11877
  lastPage = 1;
11256
11878
  simple = false;
11257
11879
  pageChange;
11258
- get paginationClasses() {
11259
- const classes = ['sd-pagination'];
11260
- if (this.simple) {
11261
- classes.push('sd-pagination--simple');
11262
- }
11263
- return classes.join(' ');
11264
- }
11265
11880
  get pageNumbers() {
11266
11881
  const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
11267
11882
  const end = Math.min(start + PER_PAGE - 1, this.lastPage);
@@ -11272,51 +11887,73 @@ class SdPagination {
11272
11887
  const maxPageLength = lastPageNum.toString().length;
11273
11888
  return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
11274
11889
  }
11275
- handlePageChange(page) {
11890
+ get isFirstGroup() {
11891
+ return this.currentPage <= PER_PAGE;
11892
+ }
11893
+ get isLastGroup() {
11894
+ const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
11895
+ return startPageGroup + PER_PAGE - 1 >= this.lastPage;
11896
+ }
11897
+ handlePageChange = (page) => {
11276
11898
  if (page < 1 || page > this.lastPage)
11277
11899
  return;
11278
11900
  this.currentPage = page;
11279
11901
  this.pageChange.emit(page);
11280
- }
11281
- handleGroupChange(direction) {
11902
+ };
11903
+ handleGroupChange = (direction) => {
11282
11904
  const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
11283
11905
  const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
11284
11906
  this.handlePageChange(newPage);
11285
- }
11286
- get isFirstGroup() {
11287
- return this.currentPage <= PER_PAGE;
11288
- }
11289
- get isLastGroup() {
11290
- const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
11291
- return startPageGroup + PER_PAGE - 1 >= this.lastPage;
11907
+ };
11908
+ renderNavButton(iconName, ariaLabel, onClick) {
11909
+ return (hAsync("button", { type: "button", class: "sd-pagination__nav", "aria-label": ariaLabel, onClick: onClick }, hAsync("sd-icon", { name: iconName, size: PAGINATION_LAYOUT.iconSize, color: PAGINATION_COLORS.iconDefault })));
11292
11910
  }
11293
11911
  renderPrevButtons() {
11294
11912
  if (this.simple) {
11295
11913
  if (this.currentPage <= 1)
11296
11914
  return null;
11297
- return (hAsync(Fragment, null, hAsync("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, hAsync("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), hAsync("button", { "aria-label": "Go to previous page", onClick: () => this.handlePageChange(this.currentPage - 1) }, hAsync("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
11298
- }
11299
- if (!this.isFirstGroup) {
11300
- return (hAsync(Fragment, null, hAsync("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, hAsync("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), hAsync("button", { "aria-label": "Go to previous page group", onClick: () => this.handleGroupChange('backward') }, hAsync("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
11915
+ return (hAsync(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page', () => this.handlePageChange(this.currentPage - 1))));
11301
11916
  }
11917
+ if (this.isFirstGroup)
11918
+ return null;
11919
+ return (hAsync(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page group', () => this.handleGroupChange('backward'))));
11302
11920
  }
11303
11921
  renderNextButtons() {
11304
11922
  if (this.simple) {
11305
11923
  if (this.currentPage >= this.lastPage)
11306
11924
  return null;
11307
- return (hAsync(Fragment, null, hAsync("button", { "aria-label": "Go to next page", onClick: () => this.handlePageChange(this.currentPage + 1) }, hAsync("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), hAsync("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, hAsync("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
11308
- }
11309
- if (!this.isLastGroup) {
11310
- return (hAsync(Fragment, null, hAsync("button", { "aria-label": "Go to next page group", onClick: () => this.handleGroupChange('forward') }, hAsync("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), hAsync("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, hAsync("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
11925
+ return (hAsync(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page', () => this.handlePageChange(this.currentPage + 1)), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
11311
11926
  }
11927
+ if (this.isLastGroup)
11928
+ return null;
11929
+ return (hAsync(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page group', () => this.handleGroupChange('forward')), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
11312
11930
  }
11313
11931
  render() {
11314
- return (hAsync("div", { key: '5136947eb1aa1539d240af359eec8763d708906b', class: this.paginationClasses }, hAsync("div", { key: '3114f336a27b4f3bf6249fd82649b9d21831a57a', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
11315
- 'pagination-btn': true,
11316
- 'pagination-btn--selected': this.currentPage === n,
11317
- }, disabled: this.currentPage === n, style: {
11318
- '--pagination-btn-width': `${this.buttonWidth}px`,
11319
- }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: 'a85d2e89389d2638e797873e18717d1079a8b156', class: "append-btns" }, this.renderNextButtons())));
11932
+ const cssVars = {
11933
+ '--sd-pagination-height': PAGINATION_LAYOUT.height,
11934
+ '--sd-pagination-padding-x': PAGINATION_LAYOUT.paddingX,
11935
+ '--sd-pagination-radius': PAGINATION_LAYOUT.radius,
11936
+ '--sd-pagination-gap': PAGINATION_LAYOUT.gap,
11937
+ '--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
11938
+ '--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
11939
+ '--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
11940
+ '--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
11941
+ '--sd-pagination-font-weight-default': PAGINATION_TYPOGRAPHY.fontWeightDefault,
11942
+ '--sd-pagination-font-weight-selected': PAGINATION_TYPOGRAPHY.fontWeightSelected,
11943
+ '--sd-pagination-content': PAGINATION_COLORS.contentDefault,
11944
+ '--sd-pagination-content-hover': PAGINATION_COLORS.contentHover,
11945
+ '--sd-pagination-content-selected': PAGINATION_COLORS.contentSelected,
11946
+ '--sd-pagination-bg-hover': PAGINATION_COLORS.bgHover,
11947
+ '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
11948
+ '--sd-pagination-item-width': `${this.buttonWidth}px`,
11949
+ };
11950
+ return (hAsync("div", { key: '1f6d3909c5c7f17701c405f058bf999020d9424e', class: {
11951
+ 'sd-pagination': true,
11952
+ 'sd-pagination--simple': this.simple,
11953
+ }, style: cssVars }, hAsync("div", { key: '9faaf4f1033e406ecaad7ed593a1610bb7002631', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
11954
+ 'sd-pagination__item': true,
11955
+ 'sd-pagination__item--selected': this.currentPage === n,
11956
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'c8d21679938032bee223f6dfefff3a87dc5badec', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
11320
11957
  }
11321
11958
  static get style() { return sdPaginationCss(); }
11322
11959
  static get cmpMeta() { return {
@@ -11388,14 +12025,14 @@ class SdPopover {
11388
12025
  this.showPopover = false;
11389
12026
  };
11390
12027
  render() {
11391
- return (hAsync(Fragment, { key: 'e953f3dfbc34a7e6b4eee3b90bd9344d4ef7d8a2' }, this.label ? (hAsync("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", onSdClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("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 && (hAsync("sd-floating-portal", { key: '23128c3d7b03a236026a1557c441ff1ddaae7033', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, hAsync("div", { key: '620f97e29104979fd203f943bb516ea31696d737', class: {
12028
+ return (hAsync(Fragment, { key: '32e3a11baabd4f4fc8c570311b99b2113e4ce3b0' }, this.label ? (hAsync("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", onSdClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("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 && (hAsync("sd-floating-portal", { key: '8139e72f293319e4d5ed3fe67d4f47a03743b437', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, hAsync("div", { key: 'fdb76f4a9a54be08fdf0d352ff389453840c4789', class: {
11392
12029
  'sd-floating-menu': true,
11393
12030
  'sd-floating-menu--popover': true,
11394
12031
  [`sd-floating-menu--${this.placement}`]: true,
11395
12032
  [this.menuClass]: !!this.menuClass,
11396
12033
  }, style: {
11397
12034
  '--sd-floating-bg': popoverTokens.popover.bg,
11398
- } }, hAsync("i", { key: '027cd73af66a6a5161361625502496f8c9183e9d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '0db7efc9eaaecd48af55f7b46fa1c90eb0027d86' })), hAsync("div", { key: 'd007d9041093593b155df32d1f6420f401baf1fa', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '0746608da07343147896c59a9e8e27e15cd9fae2', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '76a1c19fe4871a7a0d5bd6fc2ee5228453aab5f2', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'ccfdc3a653b9a6fb0ea8ffb8dcb538638ae83e33', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("sd-ghost-button", { key: '6b53a200fdab5175b8346e1b916677a02a4ac0ad', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
12035
+ } }, hAsync("i", { key: '94cb19bdf7182cd311800ac4d3fdf49c61db75fb', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '67394b2b751c485fc7198a10d54df2659c6f222b' })), hAsync("div", { key: '1d6e143a931c24f28ef68afbfe7b84e73d3288db', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '33d47a87e6cab23131f360f7ea07809cec942ec0', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '28006b8958d1921eefa42c6282b8e735ae3e9367', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '574604775790aa49591848eb5f86ca0c6735558f', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("sd-ghost-button", { key: '027260d65fc575f480ce23e081b8b80ac8a1daea', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
11399
12036
  }
11400
12037
  static get watchers() { return {
11401
12038
  "show": [{
@@ -11440,7 +12077,7 @@ class SdPortal {
11440
12077
  parentRef = null;
11441
12078
  offset = [0, 4];
11442
12079
  viewportPadding = 0;
11443
- zIndex = 10000;
12080
+ zIndex = 998;
11444
12081
  open = false;
11445
12082
  close;
11446
12083
  container;
@@ -11486,7 +12123,7 @@ class SdPortal {
11486
12123
  position: 'absolute',
11487
12124
  top: '0',
11488
12125
  left: '0',
11489
- zIndex: (this.zIndex ?? 10000).toString(),
12126
+ zIndex: (this.zIndex ?? 998).toString(),
11490
12127
  opacity: '0',
11491
12128
  transition: 'opacity 0.15s ease-out',
11492
12129
  boxSizing: 'border-box',
@@ -11655,7 +12292,7 @@ class SdPortal {
11655
12292
  this.close.emit();
11656
12293
  }
11657
12294
  render() {
11658
- return hAsync("slot", { key: '7213237baa73430dbf3d01aeb6f7a3e5fe173ecb' });
12295
+ return hAsync("slot", { key: '394cce939280a171c13e875eaead3fbdd0163d5b' });
11659
12296
  }
11660
12297
  static get watchers() { return {
11661
12298
  "open": [{
@@ -11718,10 +12355,10 @@ class SdProgress {
11718
12355
  return this.statusColor[this.progressStatus];
11719
12356
  }
11720
12357
  render() {
11721
- return (hAsync("div", { key: '3afe47c0dd65ddb5a03c15591430febaa8947417', style: {
12358
+ return (hAsync("div", { key: 'b1c93dc549893b5a3ccef1ab9cea54ca8c9d8d44', style: {
11722
12359
  '--progress-color': this.progressColor,
11723
12360
  '--progress-percentage': `${this.progressPercentage}%`,
11724
- } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'd5bf1e43002f7b16f5b609e9b3cb7cc9d417a246', class: "sd-progress__label" }, this.label)));
12361
+ } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '843cb8d0994831da375d26f0421d98dddb068128', class: "sd-progress__label" }, this.label)));
11725
12362
  }
11726
12363
  renderBarProgress() {
11727
12364
  return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
@@ -11868,7 +12505,7 @@ class SdRadio {
11868
12505
  '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
11869
12506
  '--sd-radio-label-color': RADIO_COLORS.label,
11870
12507
  };
11871
- return (hAsync("label", { key: 'ad5c1811c6ee5c27f307ab5430e80845001b3415', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: 'bf4359db0e94f01afba8908e0d2f961f61158e21', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), hAsync("span", { key: '9de620deba0931a0c8b4c7b5a36b245c3cab40cd', class: "sd-radio__circle" }), this.label && hAsync("span", { key: '7572925680817bd7da65e61a4df7bb62a50a3b39', class: "sd-radio__label" }, this.label)));
12508
+ return (hAsync("label", { key: '2b7819249e5070a22b626530011db4a8e56194f1', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: '233699a7c3bc13708d43ca3719f61edf53836c83', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), hAsync("span", { key: 'eb665c5f8c6202b66b65b6b120f144970fba0a38', class: "sd-radio__circle" }), this.label && hAsync("span", { key: '3d0db13e083bacb4cb7ace9129fcfcd61f18dfc7', class: "sd-radio__label" }, this.label)));
11872
12509
  }
11873
12510
  static get watchers() { return {
11874
12511
  "value": [{
@@ -12059,7 +12696,7 @@ class SdRadioButton {
12059
12696
  '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
12060
12697
  '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
12061
12698
  };
12062
- return (hAsync("div", { key: '05bda776e2747aca3d7fca0286e3fa4062d7669b', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
12699
+ return (hAsync("div", { key: 'f4ac83797b2661b0c2a612674911cbb0e41350a6', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
12063
12700
  const isSelected = this.isOptionSelected(option);
12064
12701
  const isDisabled = this.isOptionDisabled(option);
12065
12702
  return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button__label" }, option.label)));
@@ -12111,7 +12748,7 @@ class SdRadioGroup {
12111
12748
  return classes.join(' ');
12112
12749
  }
12113
12750
  render() {
12114
- return (hAsync("div", { key: '4c34a3ab6790818e17c8452fa3233e7c720b8246', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
12751
+ return (hAsync("div", { key: '8b01aca15ce9452921f37ba648d2d47728b84f41', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
12115
12752
  return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
12116
12753
  })));
12117
12754
  }
@@ -12189,6 +12826,7 @@ class SdSelect extends BaseDropdownEvent {
12189
12826
  label = '';
12190
12827
  labelWidth = '';
12191
12828
  addonLabel = '';
12829
+ addonAlign = 'start';
12192
12830
  icon = undefined;
12193
12831
  labelTooltip = '';
12194
12832
  labelTooltipProps = null;
@@ -12306,7 +12944,7 @@ class SdSelect extends BaseDropdownEvent {
12306
12944
  }
12307
12945
  };
12308
12946
  render() {
12309
- return (hAsync("sd-field", { key: 'd96961fe4c425c3f0fcb1c2f438c8b70c510b632', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '0113ffb76ea79cbe3b77dff85d8186a5b994e7b6', class: {
12947
+ return (hAsync("sd-field", { key: 'bef5ef042c37b3abb97f8f5eafaee24d232132b7', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '9046ecdd771380312e7be3797ccac28d2315cfbe', class: {
12310
12948
  'sd-select': true,
12311
12949
  'sd-select--disabled': this.disabled,
12312
12950
  'sd-select--error': !!this.error,
@@ -12351,6 +12989,7 @@ class SdSelect extends BaseDropdownEvent {
12351
12989
  "label": [1],
12352
12990
  "labelWidth": [8, "label-width"],
12353
12991
  "addonLabel": [1, "addon-label"],
12992
+ "addonAlign": [1, "addon-align"],
12354
12993
  "icon": [16],
12355
12994
  "labelTooltip": [1, "label-tooltip"],
12356
12995
  "labelTooltipProps": [16],
@@ -12525,10 +13164,10 @@ class SdSelectDropdown {
12525
13164
  this.isScrolled = scrollTop > 0;
12526
13165
  };
12527
13166
  render() {
12528
- return (hAsync("div", { key: 'fdfad8ab2f1f6a26da8ad0ca0dcd17bfed7dcf9d', class: {
13167
+ return (hAsync("div", { key: '4d593edbf6e4480e171963aad54ceb2f489f189b', class: {
12529
13168
  'sd-select-dropdown': true,
12530
13169
  'sd-select-dropdown--ready': this.isDropdownReady,
12531
- }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '74cfba89d85a980c6c8074150bdba91387b9c115', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
13170
+ }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: 'ecea9b4ba816c6b0dcc8303f957f4b297251f65c', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
12532
13171
  }
12533
13172
  static get watchers() { return {
12534
13173
  "filteredOptions": [{
@@ -12594,6 +13233,7 @@ class SdSelectGroup extends BaseDropdownEvent {
12594
13233
  label = '';
12595
13234
  labelWidth = '';
12596
13235
  addonLabel = '';
13236
+ addonAlign = 'start';
12597
13237
  icon = undefined;
12598
13238
  labelTooltip = '';
12599
13239
  labelTooltipProps = null;
@@ -12840,7 +13480,7 @@ class SdSelectGroup extends BaseDropdownEvent {
12840
13480
  });
12841
13481
  }
12842
13482
  render() {
12843
- return (hAsync("sd-field", { key: '1e6a0f9947f5d137bb65844fe666c07b4eefb2f7', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '62dcd2f37c2eda0e51f2e77de36ece6ab592c4ce', class: {
13483
+ return (hAsync("sd-field", { key: '698b76ed0785f475a099fac99e3564b20c252c01', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'aa449fda5e32d0519792dc2e713d3c59658c86fa', class: {
12844
13484
  'sd-select-group': true,
12845
13485
  'sd-select-group--open': this.isOpen,
12846
13486
  'sd-select-group--disabled': this.disabled,
@@ -12907,6 +13547,7 @@ class SdSelectGroup extends BaseDropdownEvent {
12907
13547
  "label": [1],
12908
13548
  "labelWidth": [8, "label-width"],
12909
13549
  "addonLabel": [1, "addon-label"],
13550
+ "addonAlign": [1, "addon-align"],
12910
13551
  "icon": [16],
12911
13552
  "labelTooltip": [1, "label-tooltip"],
12912
13553
  "labelTooltipProps": [16],
@@ -13090,7 +13731,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
13090
13731
  this.handleOptionSelection(option);
13091
13732
  };
13092
13733
  render() {
13093
- return (hAsync("sd-field", { key: 'f5dda40563661955aa194d841ca89628afd496cb', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '81541d9adabfea7c3af1c22ed419036f56e1a353', class: {
13734
+ return (hAsync("sd-field", { key: '92f9f1efeb25431700b376300ba8f21120456a68', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '48adb7f279b77d1637e6a1790d1448d7d7306a7a', class: {
13094
13735
  'sd-select-multiple': true,
13095
13736
  'sd-select-multiple--open': this.isOpen,
13096
13737
  'sd-select-multiple--disabled': this.disabled,
@@ -13555,7 +14196,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
13555
14196
  });
13556
14197
  }
13557
14198
  render() {
13558
- return (hAsync("sd-field", { key: 'e7d00571a19a83e8d243d0c4f7433d931d4a2304', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '8c7288d853fed5bb829f1ef90af5e96a512c11b3', class: {
14199
+ return (hAsync("sd-field", { key: '8e0cfc89b55809d3c5b556fc5c59077c2c952ad5', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '852a713b4c38c4845c407cb04801d9b0c33f0515', class: {
13559
14200
  'sd-select-multiple-group': true,
13560
14201
  'sd-select-multiple-group--open': this.isOpen,
13561
14202
  'sd-select-multiple-group--disabled': this.disabled,
@@ -13689,7 +14330,7 @@ class SdSelectOption {
13689
14330
  }
13690
14331
  };
13691
14332
  render() {
13692
- return (hAsync("div", { key: '1366665f3ca8c37b23e6b6e9cfc5293c48ed5ed3', class: {
14333
+ return (hAsync("div", { key: '02e314232067bfb8f9bd882c01ae1462fa492cbf', class: {
13693
14334
  'sd-select__option': true,
13694
14335
  'sd-select__option--selected': this.isSelected,
13695
14336
  'sd-select__option--disabled': !!this.option.disabled,
@@ -13775,7 +14416,7 @@ class SdSelectOptionGroup {
13775
14416
  }
13776
14417
  };
13777
14418
  render() {
13778
- return (hAsync("div", { key: 'c1dd7d0232fff281261792ecb2137a1f09bc364d', class: {
14419
+ return (hAsync("div", { key: '748c32883a0262612daf9bafc0617563c77254f8', class: {
13779
14420
  'sd-select__option-group': true,
13780
14421
  'sd-select__option-group--selected': !!this.isSelected,
13781
14422
  'sd-select__option-group--disabled': !!this.option.disabled,
@@ -13784,10 +14425,10 @@ class SdSelectOptionGroup {
13784
14425
  'sd-select__option-group--group': this.option.type === 'group',
13785
14426
  'sd-select__option-group--subgroup': this.option.type === 'subgroup',
13786
14427
  'sd-select__option-group--item': this.option.type === 'item',
13787
- }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'a8ce6f2c13ea558413e61426dfbaa75e616f5687', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '3c53ea6005aa1288a4eae148bd9d6ed4573f0404', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
14428
+ }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: '5a8f15864a69887a7d2e2ec5b18b96b1f7bde809', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '202f92f4aac644802a58354d08b29451c9af863f', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
13788
14429
  e.preventDefault();
13789
14430
  this.handleClick(this.option, this.isSelected, e);
13790
- } })), hAsync("span", { key: 'c28aea2bf78120a42d6884c322cc2cf77713a6cb', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '6a51641a8c9da9957f1428a721de9ce2a1a2a86b', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
14431
+ } })), hAsync("span", { key: 'f9dc667e7d251a5efcf7391ec4f533a5e21276c9', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '2cd863d5bbdb1a9b5312c6eb7aa3be08a2093460', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
13791
14432
  }
13792
14433
  static get style() { return sdSelectOptionGroupCss(); }
13793
14434
  static get cmpMeta() { return {
@@ -13836,17 +14477,17 @@ class SdSelectSearchInput {
13836
14477
  input?.focus({ preventScroll: true });
13837
14478
  }
13838
14479
  render() {
13839
- return (hAsync("div", { key: '36003b7e0e7d8a3df224b18257d4d6b1712d47da', class: {
14480
+ return (hAsync("div", { key: '2629fd8c13f67bc89c3b66f5f8aa14f2fb2e5fcd', class: {
13840
14481
  'sd-select-search-input': true,
13841
14482
  'sd-select-search-input--scrolled': !!this.isScrolled,
13842
- }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '3b6f80d033a7903cb8e3692a2eebe0ab991e8d68', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
14483
+ }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: 'f49cccdb49d0b2b861b0836dd654b7ab353b48ce', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
13843
14484
  this.searchInput.emit(String(event?.detail));
13844
14485
  }, onSdFocus: () => {
13845
14486
  this.searchFocus.emit();
13846
14487
  }, onKeyDown: event => {
13847
14488
  if (event.code === 'Enter')
13848
14489
  event.stopPropagation();
13849
- } }, hAsync("sd-icon", { key: '7c453e87ba6b384c5be7bb142697ba43c0d1a20b', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
14490
+ } }, hAsync("sd-icon", { key: '773f5638821c73c20435f747c3dea5b6684b89eb', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
13850
14491
  }
13851
14492
  static get style() { return sdSelectSearchInputCss(); }
13852
14493
  static get cmpMeta() { return {
@@ -13886,6 +14527,7 @@ class SdSelectV2 {
13886
14527
  label = '';
13887
14528
  labelWidth = '';
13888
14529
  addonLabel = '';
14530
+ addonAlign = 'start';
13889
14531
  error = false;
13890
14532
  hint = '';
13891
14533
  errorMessage = '';
@@ -14078,13 +14720,13 @@ class SdSelectV2 {
14078
14720
  this.closeDropdown();
14079
14721
  },
14080
14722
  };
14081
- return (hAsync("sd-field", { key: 'c9f08598c8f9852ab4000f056621dfef238e16de', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
14723
+ return (hAsync("sd-field", { key: '6074cfea700e1f3ea03aaedb0146d7dffdaa7101', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
14082
14724
  this.hovered = true;
14083
14725
  }, onMouseLeave: () => {
14084
14726
  this.hovered = false;
14085
- } }, hAsync("div", { key: '302103a425963e5d577b01ad179d5af82e6f30b1', class: "sd-select-v2", ref: el => {
14727
+ } }, hAsync("div", { key: '4840cfcf19e262903110245f88b73f3f03713624', class: "sd-select-v2", ref: el => {
14086
14728
  this.triggerRef = el;
14087
- } }, hAsync("sd-select-v2-trigger", { key: 'a22bca400e5d10ee29e569da04d36b9291a1dade', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '0df4ad35bb284298708a0c1e11ce0e3c28d16ed8', ...portalProps }, hAsync("sd-select-v2-listbox", { key: '90c18612d553342be091a30e05194bab91407c76', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
14729
+ } }, hAsync("sd-select-v2-trigger", { key: '4b34dd8007864623d17c80b4e5cea02aa4db954a', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '7ec2c4ca8e32f877a894f9f766d3558c10d66596', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'c804a19a142d2978d8fb4eaa33ad2a6a7028e7d3', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
14088
14730
  }
14089
14731
  static get watchers() { return {
14090
14732
  "isOpen": [{
@@ -14106,6 +14748,7 @@ class SdSelectV2 {
14106
14748
  "label": [1],
14107
14749
  "labelWidth": [8, "label-width"],
14108
14750
  "addonLabel": [1, "addon-label"],
14751
+ "addonAlign": [1, "addon-align"],
14109
14752
  "error": [1028],
14110
14753
  "hint": [1],
14111
14754
  "errorMessage": [1, "error-message"],
@@ -14192,9 +14835,7 @@ var listItemTokens = {
14192
14835
  };
14193
14836
 
14194
14837
  const listBox = {
14195
- radius: "4",
14196
- paddingBottom: "4"
14197
- };
14838
+ radius: "4"};
14198
14839
  var listBoxTokens = {
14199
14840
  listBox: listBox
14200
14841
  };
@@ -14257,7 +14898,6 @@ const LIST_ITEM_COLORS = {
14257
14898
  // ── ListBox Tokens ──
14258
14899
  const LIST_BOX_LAYOUT = {
14259
14900
  radius: listBoxTokens.listBox.radius,
14260
- paddingBottom: listBoxTokens.listBox.paddingBottom,
14261
14901
  };
14262
14902
  // ── Constants ──
14263
14903
  const SEARCH_THRESHOLD = 11;
@@ -14369,7 +15009,7 @@ class SdSelectV2ListItem {
14369
15009
  if (isDepth1Group) {
14370
15010
  cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
14371
15011
  }
14372
- return (hAsync("div", { key: 'b11d22dad7151ec90f05a677b5589e11e0214259', class: {
15012
+ return (hAsync("div", { key: 'ad8ea94f02d9e114915e4115237aed32d89e93d9', class: {
14373
15013
  'sd-select-v2-list-item': true,
14374
15014
  'sd-select-v2-list-item--group': isGroup,
14375
15015
  'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -14379,7 +15019,7 @@ class SdSelectV2ListItem {
14379
15019
  'sd-select-v2-list-item--focused': this.isFocused,
14380
15020
  'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
14381
15021
  'sd-select-v2-list-item--disabled': !!this.option.disabled,
14382
- }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '12826e1e9ba2b9b31527ea975e59e2f25b50d9de', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '385180c1c0b1b4b057c81c9b34623f3e99626026', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: 'c1096ef274c19c9c408c64ea3a8f2962dc77e24a', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15022
+ }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'c3c5be89457efbd465ebcb89e304aaefaa85e245', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: 'ce5b528ec88cd6c862fe0df36cf1b46f054bcc0e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: 'e0120384115bb93819675335a574aeb072d0232c', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
14383
15023
  }
14384
15024
  static get style() { return sdSelectV2ListItemCss(); }
14385
15025
  static get cmpMeta() { return {
@@ -14447,15 +15087,15 @@ class SdSelectV2ListItemSearch {
14447
15087
  clearTimeout(this.debounceTimer);
14448
15088
  }
14449
15089
  render() {
14450
- return (hAsync("div", { key: '10f081acd51cad3b6632b2afcd5017c02fe2ed57', class: {
15090
+ return (hAsync("div", { key: '77b7f0742212b03108d5da3a1384766bc58da3ce', class: {
14451
15091
  'sd-select-v2-list-item-search': true,
14452
15092
  'sd-select-v2-list-item-search--scrolled': this.isScrolled,
14453
- } }, hAsync("div", { key: '585f29e2826841874e88ce01fa08306cffb39033', class: "sd-select-v2-list-item-search__inner" }, hAsync("sd-icon", { key: 'fe3d85e03b2e7302102babd3736e7aea0b08fcee', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), hAsync("input", { key: '62913d0721cf6171bc7dc52fb6548410fa87527e', ref: el => {
15093
+ } }, hAsync("div", { key: 'bf2086a00ca7924c3b13b28b056a1ee2351cce3d', class: "sd-select-v2-list-item-search__inner" }, hAsync("sd-icon", { key: '471c08d7b293003958e1e0be9c4521b8663c860b', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), hAsync("input", { key: 'b17d8610b73c3701711b5def9b34320156c5f554', ref: el => {
14454
15094
  this.inputEl = el;
14455
- }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '986ea74f6b02e65f138665f2afd19fa10f7f430a', type: "button", class: {
15095
+ }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '5b8c48df700862476b37b7c24741ee0f9b284c02', type: "button", class: {
14456
15096
  'sd-select-v2-list-item-search__clear': true,
14457
15097
  'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
14458
- }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: '344bbbb25eab6a6a3f4cce5cde8d9a10e9b13f25', name: "close", size: 12, color: "#888888" })))));
15098
+ }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: 'cbcec76b7eb4e400e7154cc652512a36c0660d45', name: "close", size: 12, color: "#888888" })))));
14459
15099
  }
14460
15100
  static get style() { return sdSelectV2ListItemSearchCss(); }
14461
15101
  static get cmpMeta() { return {
@@ -14472,7 +15112,7 @@ class SdSelectV2ListItemSearch {
14472
15112
  }; }
14473
15113
  }
14474
15114
 
14475
- const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select-v2-listbox .sd-select-v2-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}sd-select-v2-listbox .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:var(--listbox-padding-bottom)}sd-select-v2-listbox .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
15115
+ const sdSelectV2ListboxCss = () => `:host{display:block}:host .sd-select-v2-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
14476
15116
 
14477
15117
  class SdSelectV2Listbox {
14478
15118
  constructor(hostRef) {
@@ -14759,9 +15399,8 @@ class SdSelectV2Listbox {
14759
15399
  '--listbox-max-width': this.maxWidth,
14760
15400
  '--listbox-max-height': this.maxHeight,
14761
15401
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
14762
- '--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
14763
15402
  };
14764
- return (hAsync("div", { key: 'd3f41c72aa6d013efff695f2435e72482f25a28f', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: '6586d230d0eb3466cf30d644b3ebe94482e91847', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '9de0cfc6d458f48a3770fa61dfc019411cfd96bb', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
15403
+ return (hAsync("div", { key: 'ca3d529a4a20f394de1358cc0627c730843a8cf9', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: 'e7c421d676c6a94cc31b0df69a489818b26563e3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'f3f44e6df1fc8faf71c607cc0efb0d891dcbfb3d', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
14765
15404
  this.listEl = el;
14766
15405
  } }, this.isEmpty ? (hAsync("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
14767
15406
  }
@@ -14772,7 +15411,7 @@ class SdSelectV2Listbox {
14772
15411
  }; }
14773
15412
  static get style() { return sdSelectV2ListboxCss(); }
14774
15413
  static get cmpMeta() { return {
14775
- "$flags$": 512,
15414
+ "$flags$": 521,
14776
15415
  "$tagName$": "sd-select-v2-listbox",
14777
15416
  "$members$": {
14778
15417
  "name": [1],
@@ -14826,11 +15465,11 @@ class SdSelectV2Trigger {
14826
15465
  ? SELECT_COLORS.icon.disabled
14827
15466
  : SELECT_COLORS.icon.default,
14828
15467
  };
14829
- return (hAsync("div", { key: '906bfdacc9ec8028d61335dd8a6eb9fa887ccd2d', class: {
15468
+ return (hAsync("div", { key: '4b3f60a4bd00423337ebd472a628bc67f0a5d55c', class: {
14830
15469
  'sd-select-v2-trigger': true,
14831
15470
  'sd-select-v2-trigger--open': this.isOpen,
14832
15471
  'sd-select-v2-trigger--disabled': this.disabled,
14833
- }, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: '3688fb32fbc996ce423a92007d1208b950f7baba', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: '1c38cf28cb536aa93541e1bfd0b3736ba8b59782', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: '9bfc7681e142766eeaa42dd801c8ff88dec61861', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
15472
+ }, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: '8a6f9aa132aa6db4ba9035b3b97f91b4f29fa475', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: '3fb8fa054682eefc604623da9ecb906581cf1661', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: 'c6ae918c442452018513a144a6f14613a49dedd4', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
14834
15473
  'sd-select-v2-trigger__icon': true,
14835
15474
  'sd-select-v2-trigger__icon--open': this.isOpen,
14836
15475
  } }))));
@@ -14951,7 +15590,7 @@ class SdSwitch {
14951
15590
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
14952
15591
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
14953
15592
  };
14954
- return (hAsync("label", { key: '44ff8ae899d3f1d7f20df43cab5ceb0987d0dab3', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'c7bd9e8ab470c575a52c33b482f83e0113917fda', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '604c57baaea22b389e0d19b2c8a06421ab44063e', class: "sd-switch__track" }, hAsync("div", { key: 'a9329987d6c2295a90fe6b4904eeea98b075b30c', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '77cab17a2dbab5245f26c218a8b60f956770e316', class: "sd-switch__label" }, this.label)));
15593
+ return (hAsync("label", { key: '730eacd9dbc035c76ff99396caf13b37ecc19c86', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '2cb2e4ba617d6f9f2d86a56ac6cc134a43cd1594', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: 'b67a6243d2af4b89e433e44047da3336e87da9f9', class: "sd-switch__track" }, hAsync("div", { key: 'a99cf1e298cd3ed474cb7f94a48332475fe68641', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '084960a8dce47c47b17f807aa46acea3a08aa53b', class: "sd-switch__label" }, this.label)));
14955
15594
  }
14956
15595
  static get style() { return sdSwitchCss(); }
14957
15596
  static get cmpMeta() { return {
@@ -15499,24 +16138,24 @@ class SdTable {
15499
16138
  }
15500
16139
  render() {
15501
16140
  const resolvedTableId = this.getResolvedTableId();
15502
- return (hAsync(Host, { key: 'dd25a84ce29a197a7e853d1812ce0f0fbdf043bd' }, hAsync("div", { key: '8b256e995d55c36ff9622148054911fcbe8aa89b', class: "sd-table__container", style: {
16141
+ return (hAsync(Host, { key: 'd2a43d075579bf4ffc53949fb074afaf9987113d' }, hAsync("div", { key: '3e6b69b3ab38281c1763ab779d66b0916b2cb295', class: "sd-table__container", style: {
15503
16142
  '--table-width': this.width,
15504
16143
  '--table-height': this.height,
15505
16144
  '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
15506
- } }, hAsync("div", { key: 'b4949fed8c50b93bcddace22978aff358ea7c210', class: {
16145
+ } }, hAsync("div", { key: '60ac7f5d53cdfbb0225dd3ed57be4788e6b7ff2b', class: {
15507
16146
  'sd-table__clip': true,
15508
16147
  'sd-table__clip--has-pagination': !!(this.pagination &&
15509
16148
  this.pagination.rowsPerPage > 0 &&
15510
16149
  this.rowCount > 0 &&
15511
16150
  !this.useVirtualScroll),
15512
- } }, hAsync("div", { key: '5fcceeb27568afdd367e7dbf2886fcbd107089c5', class: {
16151
+ } }, hAsync("div", { key: 'ea4144995650e283bf62de067fe792e1b7d90eb1', class: {
15513
16152
  'sd-table__wrapper': true,
15514
16153
  'sd-table__wrapper--loading': this.isLoading,
15515
16154
  'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
15516
- } }, this.isLoading && (hAsync("div", { key: 'edabfb6b601cfad985e3b8614d603f2df1da8f98', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '40de9b2b97407523d1b02b97f208682e4946be66', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: 'fe0d54f45a2a0a8ca1cc6552a42c7725ecd84c99', class: "sd-table__no-data" }, hAsync("slot", { key: 'f64d232d1b3bd69d7c43a5170d06e73cbc586226', name: "no-data" }, hAsync("span", { key: '71f5dcf2e5af2403032bdefd19a3cc4793a823e9' }, this.resolvedNoDataLabel)))), hAsync("table", { key: 'e32c9f96523db174a57efffa584237836a67214a', class: this.tableClasses }, hAsync("slot", { key: 'ce5e49454ac9044d6b3fcf3ac51809bb1e5465f8', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), hAsync("slot", { key: '800b45ddc05aac02cf8827b31beca5d0f363b55f', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
16155
+ } }, this.isLoading && (hAsync("div", { key: '36fd919bbf313d4d5a62d657223ce7e68bd7678d', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '5854fbf9090072e1caf5d4a497fe35403c4c8c21', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '210bc0045bacd05d4134f96716f74c5893c494dd', class: "sd-table__no-data" }, hAsync("slot", { key: 'a2aabac27057d00a6352230d23a9c776a99818b5', name: "no-data" }, hAsync("span", { key: 'd030f9abc7bc3afd8cb70433513a8875ae3eecb2' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '731208435f8e018b74f2a0670e4c4f68f4c7fd58', class: this.tableClasses }, hAsync("slot", { key: 'd12bbe4ed17e9c0d781c50c6b4161c7bddec3480', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), hAsync("slot", { key: '555d63d8f0ad56d49bcc09451b893e05cc7110cd', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
15517
16156
  this.pagination.rowsPerPage > 0 &&
15518
16157
  this.rowCount > 0 &&
15519
- !this.useVirtualScroll && (hAsync("div", { key: 'ea2afbe59f7b249d3f4e9d9763ab402438e47008', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'a64223b9d2374142cbf12ec582e580f1b9f8f8dc', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select-v2", { key: '597cd596ac0ce2752ab6fc792887ce447c863eb8', value: this.useInternalPagination
16158
+ !this.useVirtualScroll && (hAsync("div", { key: '83b1c554f574013c8a93707f99d4224c581d485c', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '425c036f79001e4d7f012dc528d2c2ecec25ed9b', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select-v2", { key: '1c7c6ddacdd24cfa0cef627cd8ba06fe2466d415', value: this.useInternalPagination
15520
16159
  ? this.innerRowsPerPage
15521
16160
  : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
15522
16161
  if (!this.isRowsPerPageValue(e.detail))
@@ -15657,7 +16296,7 @@ class SdTabs {
15657
16296
  return `square_xs_${color}`;
15658
16297
  }
15659
16298
  render() {
15660
- return (hAsync("div", { key: '3ac46ee8a763ba5a4a566fb25d4e32366ff8288b', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
16299
+ return (hAsync("div", { key: '62ace36515932f8889fc35121b6a8cf98fd9a314', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
15661
16300
  const badgeName = this.getBadgeName(tab);
15662
16301
  return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && hAsync("sd-tag", { name: badgeName, label: tab.badge.toString() })));
15663
16302
  })));
@@ -15853,7 +16492,7 @@ class SdTag {
15853
16492
  render() {
15854
16493
  const config = this.resolvedConfig;
15855
16494
  const iconNode = this.renderIcon(config.icon, config.iconSize);
15856
- return (hAsync("span", { key: '773056b7cd351f05ec4c4b9fed8db790a8ab83d0', class: "sd-tag", style: {
16495
+ return (hAsync("span", { key: '3e3bf735f8d832e75f1061eac69ccd8972b9f40f', class: "sd-tag", style: {
15857
16496
  '--sd-tag-background': config.background,
15858
16497
  '--sd-tag-content': config.content,
15859
16498
  '--sd-tag-height': config.height,
@@ -15863,7 +16502,7 @@ class SdTag {
15863
16502
  '--sd-tag-font-weight': config.fontWeight,
15864
16503
  '--sd-tag-line-height': config.lineHeight,
15865
16504
  '--sd-tag-radius': config.radius,
15866
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '6271ce5e0f6cda83e668119e846a18cee3db3a16', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
16505
+ }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: 'a06237d1d29bb64b4b830294f5385a9b9b909624', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
15867
16506
  }
15868
16507
  static get style() { return sdTagCss(); }
15869
16508
  static get cmpMeta() { return {
@@ -15927,7 +16566,7 @@ class SdTbody {
15927
16566
  }
15928
16567
  render() {
15929
16568
  const hasRows = this.rows.length > 0;
15930
- return (hAsync(Host, { key: 'aaa6a5a3ae24728e004c769f8652c838f852aefc', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'de2909b4fe23293abd69778aed02abdab4ee8120', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
16569
+ return (hAsync(Host, { key: '82a437ddf0cb3c34877b9dbcb47b5406c20a0c0e', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '0f0257720491c781eda0479fb0c08d7dffc4f734', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
15931
16570
  this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
15932
16571
  hAsync("slot", null),
15933
16572
  this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
@@ -15991,7 +16630,7 @@ class SdTd {
15991
16630
  }
15992
16631
  }
15993
16632
  render() {
15994
- return (hAsync(Host, { key: '9fdf1f552785399ec47244f1d534d49070dd6fa1', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '845eddc0d15fd8bb2f2f93e146aa8fa1eb9d194f' })));
16633
+ return (hAsync(Host, { key: 'c6ddb546268b573694b827509ebdfe74fff8a15a', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '0b59fb8a0cfa1ef628f50496af96aa2f39fdc89a' })));
15995
16634
  }
15996
16635
  static get watchers() { return {
15997
16636
  "field": [{
@@ -16087,16 +16726,16 @@ class SdTextLink {
16087
16726
  '--sd-text-link-text-decoration': typo.textDecoration,
16088
16727
  ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
16089
16728
  };
16090
- return (hAsync("span", { key: '348dc67e12982d74cd3f8b02d8e02071ad074c3f', class: {
16729
+ return (hAsync("span", { key: 'c485091d0a9d7f8aa946ac54d96baab50bcaa3c7', class: {
16091
16730
  'sd-text-link': true,
16092
16731
  'sd-text-link--disabled': this.disabled,
16093
- }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '26c20691fd307e58b59339cf3b4fc1f3aab8c668', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: 'a767802a3df9fc15f7523d811d7dc69cc77404a1', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: 'a831f73d04cdfb970dcb78740889b6c5b242b880', class: "sd-text-link__arrow", style: {
16732
+ }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '98a2df9a2ba9b5d77eb73c0989cdf38383cfcd15', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '3c6867611e0d970855897b06f7e9368a8588ff76', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: '460bebf92782560d64e41b47ea9ef42b66cc08c0', class: "sd-text-link__arrow", style: {
16094
16733
  width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
16095
16734
  height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
16096
16735
  display: 'inline-flex',
16097
16736
  alignItems: 'center',
16098
16737
  justifyContent: 'center',
16099
- } }, hAsync("sd-icon", { key: 'a87e70e4977a2392de9876eb27904737c61b9e23', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
16738
+ } }, hAsync("sd-icon", { key: 'fee7c74359e683829ad3fa802191b651aa9e94da', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
16100
16739
  }
16101
16740
  static get style() { return sdTextLinkCss(); }
16102
16741
  static get cmpMeta() { return {
@@ -16156,6 +16795,7 @@ class SdTextarea {
16156
16795
  label = '';
16157
16796
  labelWidth = '';
16158
16797
  addonLabel = '';
16798
+ addonAlign = 'start';
16159
16799
  hint = '';
16160
16800
  errorMessage = '';
16161
16801
  icon = undefined;
@@ -16242,7 +16882,7 @@ class SdTextarea {
16242
16882
  '--sd-system-size-field-sm-height': 'auto',
16243
16883
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
16244
16884
  };
16245
- return (hAsync("sd-field", { key: '6b2360f01a356db14659e1ebc53d8c4d8c4f671f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'f43279ee861d3502c9130f1de0c47cba61ad0866', class: "sd-textarea__content" }, hAsync("textarea", { key: '0600b577417019ae36a0daba637168ebc5685220', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
16885
+ return (hAsync("sd-field", { key: '9f456eb1b18d0d83fb40f0b6b66125d587bcb4c6', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'f201962ed64908c97d24923b62e97c33b356170a', class: "sd-textarea__content" }, hAsync("textarea", { key: '826e4b3c4743dbf16387b68317bd09ca7c75746d', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
16246
16886
  }
16247
16887
  static get watchers() { return {
16248
16888
  "value": [{
@@ -16271,6 +16911,7 @@ class SdTextarea {
16271
16911
  "label": [1],
16272
16912
  "labelWidth": [8, "label-width"],
16273
16913
  "addonLabel": [1, "addon-label"],
16914
+ "addonAlign": [1, "addon-align"],
16274
16915
  "hint": [1],
16275
16916
  "errorMessage": [1, "error-message"],
16276
16917
  "icon": [16],
@@ -16427,16 +17068,16 @@ class SdThead {
16427
17068
  const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
16428
17069
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
16429
17070
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
16430
- return (hAsync(Host, { key: '5ccdb84a8876df2af0d73424be3f5a7fdb1979a5', slot: `${this.tableId}-head` }, hAsync("thead", { key: '6517b6f3baf56173f27b8194de7bd1de625ea304', class: {
17071
+ return (hAsync(Host, { key: '97badde9634e2e7363eace5a402fc49a587459c3', slot: `${this.tableId}-head` }, hAsync("thead", { key: 'd1ce731f6082679d8d61f4b74ac122f28f344909', class: {
16431
17072
  'thead': true,
16432
17073
  'thead--sticky': this._stickyHeader,
16433
- } }, hAsync("tr", { key: '8a9c268a3195376a8c9986411b29724896ff36d8', class: "tr" }, this._selectable && (hAsync("th", { key: 'f0fae86684bbef173019ddb1dd23a5f57956fb04', class: {
17074
+ } }, hAsync("tr", { key: 'd0f8b1e8b8a7174cc9b39fabf782eddf2e2accaa', class: "tr" }, this._selectable && (hAsync("th", { key: 'c422f5bd9f9a045785d2d91dd9e2dee6e8f91185', class: {
16434
17075
  'th': true,
16435
17076
  'th--selected': true,
16436
17077
  'sticky-left': true,
16437
17078
  'sticky-left-edge': stickyLeftCount === 0,
16438
17079
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
16439
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: 'cde120ec02f8bf03fa869eadbc0d91b4fde8e1ba', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
17080
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '32cea740457b21d4d6fd53a8f1c10b505a24a481', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
16440
17081
  'th': true,
16441
17082
  [`${col.thClass}`]: Boolean(col.thClass),
16442
17083
  'sticky-left': true,
@@ -16551,10 +17192,10 @@ class SdToast {
16551
17192
  render() {
16552
17193
  const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
16553
17194
  const iconSize = Number(TOAST_LAYOUT.iconSize);
16554
- return (hAsync("div", { key: '0ae35299510680fdb91dcb7c6ef841cba1287c1a', style: {
17195
+ return (hAsync("div", { key: 'a041d5561d09ef56f4afd722e141b0a2e3a9453f', style: {
16555
17196
  '--sd-toast-bg': typeConfig.bg,
16556
17197
  '--sd-toast-text': typeConfig.content,
16557
- } }, hAsync("div", { key: 'c0b4fb4e820e7e2435ce5516cebab1c3132dfe75', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '7c0b531a069b6fde7895b886603ceaf54f0a0a50', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '059de7e478b66a7e12c3e0560341311333e83b90', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '46911d81bc1cd24b541b6da71ec45a90237ea5a9', class: "sd-toast__content" }, hAsync("span", { key: 'e5e80c82cda36042ad078bf35d2fdcf1d8556497', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '95882e33b93d391fc00a92540c5f85d1235c0b8a', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: 'e65eede91a5160ec3a0f4cab9f1f4bb02dc695f3', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
17198
+ } }, hAsync("div", { key: 'bf2a397484ec5938c0442ee0ee98f0ce00ad1ec0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '4ea8468b31909e3aea1a293c393621e1815dea5c', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '407a0be71e36a6dca30f5cfb300f2c9ebf6b32c2', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '756ca54899ec4d6c3543f8fb1f681d09181674c9', class: "sd-toast__content" }, hAsync("span", { key: 'f0e66dbd5e99bc3921a354ac51294a3c29fe9ea0', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '9f4a1a938b7559b03d7dd824c7f2fdbcb093e6fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: '03d64765901bc8a93f09642b09ae733fa9da0db4', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
16558
17199
  }
16559
17200
  static get style() { return sdToastCss(); }
16560
17201
  static get cmpMeta() { return {
@@ -16577,7 +17218,7 @@ class SdToast {
16577
17218
  const DEFAULT_DURATION = 4000;
16578
17219
  const DEFAULT_MAX_VISIBLE = 3;
16579
17220
  const DEFAULT_GAP = 8;
16580
- const DEFAULT_Z_INDEX = 10000;
17221
+ const DEFAULT_Z_INDEX = 999;
16581
17222
  const TRANSITION_DURATION = 400;
16582
17223
  const TRANSITION_FALLBACK_BUFFER = 100;
16583
17224
  const COLLAPSED_SCALE_STEP = 0.05;
@@ -16806,7 +17447,7 @@ class SdToastContainer {
16806
17447
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
16807
17448
  const indexMap = new Map();
16808
17449
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
16809
- return (hAsync("div", { key: '8a63cb5f1e62fea7f562eac000743bb59ec69fda', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
17450
+ return (hAsync("div", { key: '4660dd2f2626d391bbcca7da59e16e6c4204d80d', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
16810
17451
  this.expanded = true;
16811
17452
  this.pauseTimers();
16812
17453
  }, onMouseLeave: () => {
@@ -16964,7 +17605,7 @@ class SdToggle {
16964
17605
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
16965
17606
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
16966
17607
  };
16967
- return (hAsync("label", { key: 'ec38c0ca834e5208d2cc5eb1fc32f959eacbb46d', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '2b47036dbd0cb880a7b7973523c985ae13e0cf22', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
17608
+ return (hAsync("label", { key: '1e0864450b0447ec08643290d1050e4d0ee0c4a4', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '7e44e8569de24839c41e8c28f579923e3a837366', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
16968
17609
  }
16969
17610
  static get style() { return sdToggleCss(); }
16970
17611
  static get cmpMeta() { return {
@@ -17091,14 +17732,14 @@ class SdTooltip {
17091
17732
  const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
17092
17733
  const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
17093
17734
  const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
17094
- return (hAsync(Fragment, { key: '097722e57d6a808193e8fc0d48cebc80ee13848a' }, hAsync("div", { key: '92c6fd83098faec1cfa405ace12530d0cb408395', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: 'd05d011181a8c183690607c974208e708ccba184', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '281c3994d52fcd1d6194edd12bd64ac9a42f5e71', ref: el => (this.menuEl = el), class: {
17735
+ return (hAsync(Fragment, { key: 'aade7a4be8e9955ca4dc437845ee8de9d212fd61' }, hAsync("div", { key: '332c4872541bea334c1f0b6f06de8a1789dc10b8', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '96f19d91f765020ae5663f216011e2000617c9d1', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '12c2f1fbf59dc1a790016da071805164b0426419', ref: el => (this.menuEl = el), class: {
17095
17736
  'sd-floating-menu': true,
17096
17737
  [`sd-floating-menu--${tooltipType}`]: true,
17097
17738
  [`sd-floating-menu--${placement}`]: true,
17098
17739
  }, style: {
17099
17740
  '--sd-floating-bg': typeConfig.bg,
17100
17741
  '--sd-floating-content': typeConfig.content,
17101
- }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '87374c0a423bc037decdc820e118c65ea7b3f75f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '9cdd8215849973011a2339ed80bfb2863b1e374e' })), hAsync("div", { key: '4f764958e07a8b2ed0ea093609f5a42d86fa3f3c', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
17742
+ }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'f69c0cb66d5be975f60bfa7cdbd46e0283d4af2b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '3fbc2c3baa903e80d525225ab1f1aa4b3ec6ad4b' })), hAsync("div", { key: 'a2286ef4e9f5d6c1b1a26ea044ddf1051900c5a2', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
17102
17743
  }
17103
17744
  static get style() { return sdTooltipCss(); }
17104
17745
  static get cmpMeta() { return {
@@ -17253,13 +17894,13 @@ class SdTr {
17253
17894
  const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
17254
17895
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
17255
17896
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
17256
- return (hAsync(Host, { key: 'e0b035db61ba424f4a33cdb470c839cb23c696cc', style: { display: this.isVisible ? '' : 'none' } }, hAsync("tr", { key: '224e8c360e01f81dee44d8c93f9e6724c3e87b4f', class: "tr" }, this._selectable && (hAsync("td", { key: '34afbe37ae3f86054cc6151c31a9de4f20296aef', class: {
17897
+ return (hAsync(Host, { key: '3bc910f3afa801d7824eee2e73456ef152c7dc93', style: { display: this.isVisible ? '' : 'none' } }, hAsync("tr", { key: '93b1f4113ae63aa1c0cf79addaa9e8d15c9e8287', class: "tr" }, this._selectable && (hAsync("td", { key: '0caba47c216126f4b7407dfe26afb9f0c75f6450', class: {
17257
17898
  'td': true,
17258
17899
  'td--selected': true,
17259
17900
  'sticky-left': true,
17260
17901
  'sticky-left-edge': stickyLeftCount === 0,
17261
17902
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
17262
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '29ad82d0b043964fdfc68cb250deddeda8029b39', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (hAsync("td", { key: col.name, class: {
17903
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '2e41b3902f489877b624266e588221698aaa8f12', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (hAsync("td", { key: col.name, class: {
17263
17904
  'td': true,
17264
17905
  [`td--${col.align || 'left'}`]: true,
17265
17906
  'sticky-left': true,
@@ -17326,6 +17967,7 @@ registerComponents([
17326
17967
  SdCalendar,
17327
17968
  SdCard,
17328
17969
  SdCheckbox,
17970
+ SdChip,
17329
17971
  SdCircleProgress,
17330
17972
  SdConfirmModal,
17331
17973
  SdDateBox,