@sellmate/design-system 1.1.0 → 1.3.0

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 (402) hide show
  1. package/dist/cjs/component.datepicker-Cw_-oidk.js +121 -0
  2. package/dist/cjs/{component.table-B7brIpIQ.js → component.table-CMqGfEui.js} +11 -1
  3. package/dist/cjs/design-system.cjs.js +2 -2
  4. package/dist/cjs/{index-BlxrCRYi.js → index-Cw-78mnC.js} +1 -1
  5. package/dist/cjs/index.cjs.js +1 -1
  6. package/dist/cjs/loader.cjs.js +2 -2
  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 +2 -2
  10. package/dist/cjs/sd-button_2.cjs.entry.js +278 -11
  11. package/dist/cjs/sd-calendar_2.cjs.entry.js +262 -0
  12. package/dist/cjs/sd-card.cjs.entry.js +2 -2
  13. package/dist/cjs/sd-checkbox.cjs.entry.js +4 -4
  14. package/dist/cjs/sd-chip.cjs.entry.js +4 -4
  15. package/dist/cjs/sd-circle-progress.cjs.entry.js +2 -2
  16. package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +4 -4
  17. package/dist/cjs/sd-date-box.cjs.entry.js +8 -3
  18. package/dist/cjs/sd-date-picker.config-D3lTpa6W.js +37 -0
  19. package/dist/cjs/sd-date-picker_7.cjs.entry.js +27 -20
  20. package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +49 -49
  21. package/dist/cjs/sd-dropdown-button.cjs.entry.js +10 -6
  22. package/dist/cjs/sd-field_3.cjs.entry.js +31 -30
  23. package/dist/cjs/sd-form.cjs.entry.js +5 -5
  24. package/dist/cjs/sd-ghost-button.cjs.entry.js +4 -4
  25. package/dist/cjs/sd-guide.cjs.entry.js +5 -5
  26. package/dist/cjs/sd-key-value-table.cjs.entry.js +10 -10
  27. package/dist/cjs/sd-linear-progress.cjs.entry.js +2 -2
  28. package/dist/cjs/sd-loading-container.cjs.entry.js +3 -3
  29. package/dist/cjs/sd-modal-container.cjs.entry.js +3 -3
  30. package/dist/cjs/sd-pagination_4.cjs.entry.js +116 -43
  31. package/dist/cjs/sd-popover.cjs.entry.js +6 -6
  32. package/dist/cjs/sd-popup.cjs.entry.js +2 -2
  33. package/dist/cjs/sd-portal.cjs.entry.js +3 -3
  34. package/dist/cjs/sd-radio-button.cjs.entry.js +7 -4
  35. package/dist/cjs/sd-radio.cjs.entry.js +2 -2
  36. package/dist/cjs/sd-select-list-item_2.cjs.entry.js +15 -11
  37. package/dist/cjs/sd-select_3.cjs.entry.js +20 -15
  38. package/dist/cjs/sd-switch.cjs.entry.js +2 -2
  39. package/dist/cjs/sd-table.cjs.entry.js +170 -47
  40. package/dist/cjs/{sd-table.config-CDyioyE2.js → sd-table.config-BIpldZtw.js} +13 -2
  41. package/dist/cjs/sd-tabs.cjs.entry.js +8 -3
  42. package/dist/cjs/sd-tag.cjs.entry.js +10 -10
  43. package/dist/cjs/sd-td.cjs.entry.js +52 -10
  44. package/dist/cjs/sd-text-link.cjs.entry.js +9 -4
  45. package/dist/cjs/sd-toast-container.cjs.entry.js +2 -2
  46. package/dist/cjs/sd-toast.cjs.entry.js +3 -3
  47. package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
  48. package/dist/cjs/{tooltipArrow-N6nQ1QT-.js → tooltipArrow-BjSFKIUq.js} +1 -1
  49. package/dist/cjs/useDatePicker-dCuEgvjX.js +103 -0
  50. package/dist/collection/collection-manifest.json +1 -2
  51. package/dist/collection/components/sd-action-modal/sd-action-modal.js +1 -1
  52. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  53. package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +1 -1
  54. package/dist/collection/components/sd-button/sd-button.js +9 -8
  55. package/dist/collection/components/sd-calendar/sd-calendar.config.js +51 -0
  56. package/dist/collection/components/sd-calendar/sd-calendar.css +134 -73
  57. package/dist/collection/components/sd-calendar/sd-calendar.js +172 -133
  58. package/dist/collection/components/sd-card/sd-card.js +1 -1
  59. package/dist/collection/components/sd-checkbox/sd-checkbox.js +3 -3
  60. package/dist/collection/components/sd-chip/sd-chip.js +4 -4
  61. package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
  62. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
  63. package/dist/collection/components/sd-date-box/sd-date-box.js +7 -2
  64. package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +8 -3
  65. package/dist/collection/components/sd-date-picker/sd-date-picker.config.js +0 -38
  66. package/dist/collection/components/sd-date-picker/sd-date-picker.js +3 -2
  67. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +12 -12
  68. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.config.js +2 -1
  69. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +3 -3
  70. package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js +6 -2
  71. package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js +3 -3
  72. package/dist/collection/components/sd-field/sd-field.js +23 -22
  73. package/dist/collection/components/sd-file-picker/sd-file-picker.js +7 -2
  74. package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +4 -4
  75. package/dist/collection/components/sd-form/sd-form.js +4 -4
  76. package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +3 -3
  77. package/dist/collection/components/sd-guide/sd-guide.js +4 -4
  78. package/dist/collection/components/sd-input/sd-input.js +3 -3
  79. package/dist/collection/components/sd-key-value-table/sd-key-value-table.js +8 -8
  80. package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
  81. package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
  82. package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
  83. package/dist/collection/components/sd-modal-container/sd-modal-container.js +2 -2
  84. package/dist/collection/components/sd-number-input/sd-number-input.js +6 -6
  85. package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
  86. package/dist/collection/components/sd-popover/sd-popover.js +5 -5
  87. package/dist/collection/components/sd-popup/sd-popup.js +1 -1
  88. package/dist/collection/components/sd-portal/sd-portal.js +2 -2
  89. package/dist/collection/components/sd-radio/sd-radio.js +1 -1
  90. package/dist/collection/components/sd-radio-button/sd-radio-button.js +6 -3
  91. package/dist/collection/components/sd-radio-group/sd-radio-group.js +1 -1
  92. package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js +7 -3
  93. package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js +7 -7
  94. package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js +5 -5
  95. package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +9 -4
  96. package/dist/collection/components/sd-select/sd-select.js +5 -5
  97. package/dist/collection/components/sd-switch/sd-switch.js +1 -1
  98. package/dist/collection/components/sd-table/sd-table.config.js +4 -0
  99. package/dist/collection/components/sd-table/sd-table.css +22 -3
  100. package/dist/collection/components/sd-table/sd-table.js +197 -50
  101. package/dist/collection/components/sd-table/sd-table.stories.helpers.js +2 -3
  102. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +5 -5
  103. package/dist/collection/components/sd-table/sd-td/sd-td.js +111 -9
  104. package/dist/collection/components/sd-table/sd-thead/sd-thead.js +30 -16
  105. package/dist/collection/components/sd-table/sd-tr/sd-tr.css +20 -1
  106. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +97 -18
  107. package/dist/collection/components/sd-tabs/sd-tabs.js +7 -2
  108. package/dist/collection/components/sd-tag/sd-tag.config.js +3 -3
  109. package/dist/collection/components/sd-tag/sd-tag.js +6 -3
  110. package/dist/collection/components/sd-text-link/sd-text-link.js +8 -3
  111. package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
  112. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  113. package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
  114. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  115. package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
  116. package/dist/collection/index.js +1 -1
  117. package/dist/collection/utils/modal.js +1 -1
  118. package/dist/components/index.js +1 -1
  119. package/dist/components/p-B8o25hOw.js +1 -0
  120. package/dist/components/p-BFC3Etk2.js +1 -0
  121. package/dist/components/p-BQn6le_Y.js +1 -0
  122. package/dist/components/p-BRk9YZBe.js +1 -0
  123. package/dist/components/p-BRxXhFqt.js +1 -0
  124. package/dist/components/{p-D8WAP9T3.js → p-BSfu4DO2.js} +1 -1
  125. package/dist/components/p-BZabVWBD.js +1 -0
  126. package/dist/components/{p-BfkuCNCI.js → p-BeBiPTbd.js} +1 -1
  127. package/dist/components/p-BjkROjjt.js +1 -0
  128. package/dist/components/p-BjpbUGud.js +1 -0
  129. package/dist/components/p-BkWaPXXj.js +1 -0
  130. package/dist/components/p-BnfUIhUj.js +1 -0
  131. package/dist/components/p-Bs1Z5QtN.js +1 -0
  132. package/dist/components/{p-MQTl8fGT.js → p-BwPmM1Pm.js} +1 -1
  133. package/dist/components/p-C3fqSH7A.js +1 -0
  134. package/dist/components/p-CIUE4qr7.js +1 -0
  135. package/dist/components/p-CLxVZFEG.js +1 -0
  136. package/dist/components/p-CPuyhF6g.js +1 -0
  137. package/dist/components/p-CpgTSxf0.js +1 -0
  138. package/dist/components/p-Cx_d5vsS.js +1 -0
  139. package/dist/components/{p-BeK8amzx.js → p-CyObYB-g.js} +1 -1
  140. package/dist/components/p-D7nYP2a4.js +1 -0
  141. package/dist/components/{p-BPsOJlCP.js → p-DS7Ypvt5.js} +1 -1
  142. package/dist/components/p-Da5i_Sa6.js +1 -0
  143. package/dist/components/p-DhTcn6jX.js +1 -0
  144. package/dist/components/p-DlREBZ-C.js +1 -0
  145. package/dist/components/p-DnW8EAqd.js +1 -0
  146. package/dist/components/{p-D5TRyquv.js → p-FKKk7Bk8.js} +1 -1
  147. package/dist/components/{p-Dr1AMbBj.js → p-INdVvadB.js} +1 -1
  148. package/dist/components/p-JlZdKw4C.js +1 -0
  149. package/dist/components/p-VuxN5d2D.js +1 -0
  150. package/dist/components/p-WAsath62.js +1 -0
  151. package/dist/components/{p-ofkgu5aS.js → p-X-8I-A3g.js} +1 -1
  152. package/dist/components/{p-B1MabGRR.js → p-Z5Vk33zf.js} +1 -1
  153. package/dist/components/{p-DG45uNxd.js → p-kSfaCwf1.js} +1 -1
  154. package/dist/components/p-mmdt-WnS.js +1 -0
  155. package/dist/components/p-oyZgWRnC.js +1 -0
  156. package/dist/components/p-t161LJqb.js +1 -0
  157. package/dist/components/{p-CGBnxqG2.js → p-wOAxmZ1V.js} +1 -1
  158. package/dist/components/p-xX3QT-8K.js +1 -0
  159. package/dist/components/sd-action-modal.js +1 -1
  160. package/dist/components/sd-badge.js +1 -1
  161. package/dist/components/sd-barcode-input.js +1 -1
  162. package/dist/components/sd-button.js +1 -1
  163. package/dist/components/sd-calendar.js +1 -1
  164. package/dist/components/sd-card.js +1 -1
  165. package/dist/components/sd-checkbox.js +1 -1
  166. package/dist/components/sd-chip.js +1 -1
  167. package/dist/components/sd-circle-progress.js +1 -1
  168. package/dist/components/sd-confirm-modal.js +1 -1
  169. package/dist/components/sd-date-box.js +1 -1
  170. package/dist/components/sd-date-picker-trigger.js +1 -1
  171. package/dist/components/sd-date-picker.js +1 -1
  172. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  173. package/dist/components/sd-date-range-picker.js +1 -1
  174. package/dist/components/sd-dropdown-button.js +1 -1
  175. package/dist/components/sd-field.js +1 -1
  176. package/dist/components/sd-file-picker.js +1 -1
  177. package/dist/components/sd-floating-portal.js +1 -1
  178. package/dist/components/sd-form.js +1 -1
  179. package/dist/components/sd-ghost-button.js +1 -1
  180. package/dist/components/sd-guide.js +1 -1
  181. package/dist/components/sd-icon.js +1 -1
  182. package/dist/components/sd-input.js +1 -1
  183. package/dist/components/sd-key-value-table.js +1 -1
  184. package/dist/components/sd-linear-progress.js +1 -1
  185. package/dist/components/sd-loading-container.js +1 -1
  186. package/dist/components/sd-loading-modal.js +1 -1
  187. package/dist/components/sd-modal-container.js +1 -1
  188. package/dist/components/sd-number-input.js +1 -1
  189. package/dist/components/sd-pagination.js +1 -1
  190. package/dist/components/sd-popover.js +1 -1
  191. package/dist/components/sd-popup.js +1 -1
  192. package/dist/components/sd-portal.js +1 -1
  193. package/dist/components/sd-radio-button.js +1 -1
  194. package/dist/components/sd-radio-group.js +1 -1
  195. package/dist/components/sd-radio.js +1 -1
  196. package/dist/components/sd-select-list-item-search.js +1 -1
  197. package/dist/components/sd-select-list-item.js +1 -1
  198. package/dist/components/sd-select-listbox.js +1 -1
  199. package/dist/components/sd-select-trigger.js +1 -1
  200. package/dist/components/sd-select.js +1 -1
  201. package/dist/components/sd-switch.js +1 -1
  202. package/dist/components/sd-table.js +1 -1
  203. package/dist/components/sd-tabs.js +1 -1
  204. package/dist/components/sd-tag.js +1 -1
  205. package/dist/components/sd-tbody.js +1 -1
  206. package/dist/components/sd-td.js +1 -1
  207. package/dist/components/sd-text-link.js +1 -1
  208. package/dist/components/sd-textarea.js +1 -1
  209. package/dist/components/sd-thead.js +1 -1
  210. package/dist/components/sd-toast-container.js +1 -1
  211. package/dist/components/sd-toast.js +1 -1
  212. package/dist/components/sd-toggle.js +1 -1
  213. package/dist/components/sd-tooltip.js +1 -1
  214. package/dist/components/sd-tr.js +1 -1
  215. package/dist/design-system/design-system.css +1 -1
  216. package/dist/design-system/design-system.esm.js +1 -1
  217. package/dist/design-system/index.esm.js +1 -1
  218. package/dist/design-system/p-00854a0a.entry.js +1 -0
  219. package/dist/design-system/p-00b2c850.entry.js +1 -0
  220. package/dist/design-system/p-03badf68.entry.js +1 -0
  221. package/dist/design-system/p-0U6dRjlq.js +2 -0
  222. package/dist/design-system/{p-d78fbe16.entry.js → p-11b904a3.entry.js} +1 -1
  223. package/dist/design-system/p-32e2d71e.entry.js +1 -0
  224. package/dist/design-system/p-399d416c.entry.js +1 -0
  225. package/dist/design-system/{p-29ed11e5.entry.js → p-3b8954d9.entry.js} +1 -1
  226. package/dist/design-system/{p-feeb0cc5.entry.js → p-481e6934.entry.js} +1 -1
  227. package/dist/design-system/{p-328fae12.entry.js → p-4a91875c.entry.js} +1 -1
  228. package/dist/design-system/p-563b6fc2.entry.js +1 -0
  229. package/dist/design-system/p-679bce6c.entry.js +1 -0
  230. package/dist/design-system/{p-b6ca4461.entry.js → p-74bf0ed9.entry.js} +1 -1
  231. package/dist/design-system/{p-4e2953eb.entry.js → p-84a94775.entry.js} +1 -1
  232. package/dist/design-system/p-8f4ccae4.entry.js +1 -0
  233. package/dist/design-system/p-92f368a2.entry.js +1 -0
  234. package/dist/design-system/p-9681b0ba.entry.js +1 -0
  235. package/dist/design-system/{p-f5576a0d.entry.js → p-9b9bf9db.entry.js} +1 -1
  236. package/dist/design-system/p-9f7f1b8b.entry.js +1 -0
  237. package/dist/design-system/p-BGtUaScP.js +1 -0
  238. package/dist/design-system/p-BQn6le_Y.js +1 -0
  239. package/dist/design-system/p-BnfUIhUj.js +1 -0
  240. package/dist/{components/p-CT3dfy3K.js → design-system/p-C29HUShl.js} +1 -1
  241. package/dist/design-system/p-TF8_Lyhq.js +1 -0
  242. package/dist/design-system/p-a640e509.entry.js +1 -0
  243. package/dist/design-system/{p-20a50702.entry.js → p-a71d4947.entry.js} +1 -1
  244. package/dist/design-system/p-a7ea1cf0.entry.js +1 -0
  245. package/dist/design-system/{p-e1c0a3c9.entry.js → p-a97033a2.entry.js} +1 -1
  246. package/dist/design-system/p-a98f9a29.entry.js +1 -0
  247. package/dist/design-system/{p-7882e388.entry.js → p-ae117afa.entry.js} +1 -1
  248. package/dist/design-system/{p-f3cfff78.entry.js → p-aeccfb2b.entry.js} +1 -1
  249. package/dist/design-system/p-c7099e9e.entry.js +1 -0
  250. package/dist/design-system/p-cc97f4b4.entry.js +1 -0
  251. package/dist/design-system/{p-b96c694c.entry.js → p-d39e515d.entry.js} +1 -1
  252. package/dist/design-system/p-dbeaeb31.entry.js +1 -0
  253. package/dist/design-system/p-e23dac79.entry.js +1 -0
  254. package/dist/design-system/{p-c0f60b00.entry.js → p-e611dcd4.entry.js} +1 -1
  255. package/dist/design-system/{p-a942dfbe.entry.js → p-e8e64511.entry.js} +1 -1
  256. package/dist/design-system/{p-cd8e4dd6.entry.js → p-e902a3f4.entry.js} +1 -1
  257. package/dist/design-system/p-f7074386.entry.js +1 -0
  258. package/dist/design-system/p-f721a6c6.entry.js +1 -0
  259. package/dist/design-system/{p-b1bb0d72.entry.js → p-fc5c4f85.entry.js} +1 -1
  260. package/dist/design-system/p-fe0a5368.entry.js +1 -0
  261. package/dist/design-system/{p-cbda9194.entry.js → p-fe3ae346.entry.js} +1 -1
  262. package/dist/design-system/p-ffaa4b5d.entry.js +1 -0
  263. package/dist/design-system/p-mmdt-WnS.js +1 -0
  264. package/dist/esm/component.datepicker-BQn6le_Y.js +119 -0
  265. package/dist/esm/{component.table-BQ6at17Y.js → component.table-BnfUIhUj.js} +11 -1
  266. package/dist/esm/design-system.js +3 -3
  267. package/dist/esm/{index-CLCoul8o.js → index-0U6dRjlq.js} +1 -1
  268. package/dist/esm/index.js +1 -1
  269. package/dist/esm/loader.js +3 -3
  270. package/dist/esm/sd-action-modal.entry.js +2 -2
  271. package/dist/esm/sd-badge.entry.js +2 -2
  272. package/dist/esm/sd-barcode-input.entry.js +2 -2
  273. package/dist/esm/sd-button_2.entry.js +277 -10
  274. package/dist/esm/sd-calendar_2.entry.js +259 -0
  275. package/dist/esm/sd-card.entry.js +2 -2
  276. package/dist/esm/sd-checkbox.entry.js +4 -4
  277. package/dist/esm/sd-chip.entry.js +4 -4
  278. package/dist/esm/sd-circle-progress.entry.js +2 -2
  279. package/dist/esm/sd-confirm-modal_2.entry.js +4 -4
  280. package/dist/esm/sd-date-box.entry.js +8 -3
  281. package/dist/esm/sd-date-picker.config-CGEE3DkI.js +34 -0
  282. package/dist/esm/sd-date-picker_7.entry.js +27 -20
  283. package/dist/esm/sd-date-range-picker-calendar.entry.js +22 -22
  284. package/dist/esm/sd-dropdown-button.entry.js +10 -6
  285. package/dist/esm/sd-field_3.entry.js +31 -30
  286. package/dist/esm/sd-form.entry.js +5 -5
  287. package/dist/esm/sd-ghost-button.entry.js +4 -4
  288. package/dist/esm/sd-guide.entry.js +5 -5
  289. package/dist/esm/sd-key-value-table.entry.js +10 -10
  290. package/dist/esm/sd-linear-progress.entry.js +2 -2
  291. package/dist/esm/sd-loading-container.entry.js +3 -3
  292. package/dist/esm/sd-modal-container.entry.js +3 -3
  293. package/dist/esm/sd-pagination_4.entry.js +116 -43
  294. package/dist/esm/sd-popover.entry.js +6 -6
  295. package/dist/esm/sd-popup.entry.js +2 -2
  296. package/dist/esm/sd-portal.entry.js +3 -3
  297. package/dist/esm/sd-radio-button.entry.js +7 -4
  298. package/dist/esm/sd-radio.entry.js +2 -2
  299. package/dist/esm/sd-select-list-item_2.entry.js +15 -11
  300. package/dist/esm/sd-select_3.entry.js +20 -15
  301. package/dist/esm/sd-switch.entry.js +2 -2
  302. package/dist/esm/{sd-table.config-0Te8GLCI.js → sd-table.config-B-VgXXT7.js} +13 -3
  303. package/dist/esm/sd-table.entry.js +170 -47
  304. package/dist/esm/sd-tabs.entry.js +8 -3
  305. package/dist/esm/sd-tag.entry.js +10 -10
  306. package/dist/esm/sd-td.entry.js +52 -10
  307. package/dist/esm/sd-text-link.entry.js +9 -4
  308. package/dist/esm/sd-toast-container.entry.js +2 -2
  309. package/dist/esm/sd-toast.entry.js +3 -3
  310. package/dist/esm/sd-toggle.entry.js +2 -2
  311. package/dist/esm/{tooltipArrow-Bc-yw2nt.js → tooltipArrow-O5LOsHae.js} +1 -1
  312. package/dist/esm/useDatePicker-D5RmWGOp.js +98 -0
  313. package/dist/types/components/sd-calendar/sd-calendar.config.d.ts +55 -0
  314. package/dist/types/components/sd-calendar/sd-calendar.d.ts +18 -21
  315. package/dist/types/components/sd-date-picker/sd-date-picker.config.d.ts +0 -38
  316. package/dist/types/components/sd-date-range-picker/sd-date-range-picker.config.d.ts +2 -1
  317. package/dist/types/components/sd-dropdown-button/sd-dropdown-button.config.d.ts +3 -2
  318. package/dist/types/components/sd-table/constants.d.ts +2 -0
  319. package/dist/types/components/sd-table/sd-table.config.d.ts +4 -0
  320. package/dist/types/components/sd-table/sd-table.d.ts +19 -15
  321. package/dist/types/components/sd-table/sd-td/sd-td.d.ts +6 -0
  322. package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +7 -0
  323. package/dist/types/components/sd-tag/sd-tag.d.ts +1 -0
  324. package/dist/types/components.d.ts +47 -60
  325. package/dist/types/index.d.ts +4 -3
  326. package/hydrate/index.js +1359 -1130
  327. package/hydrate/index.mjs +1359 -1130
  328. package/package.json +1 -1
  329. package/dist/cjs/resolveColor-B0hzQNLG.js +0 -270
  330. package/dist/cjs/sd-calendar.cjs.entry.js +0 -143
  331. package/dist/cjs/sd-date-picker-calendar_2.cjs.entry.js +0 -214
  332. package/dist/cjs/sd-date-picker.config-CjvrFpYK.js +0 -177
  333. package/dist/cjs/useDatePicker-cK_XK_P6.js +0 -48
  334. package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.css +0 -117
  335. package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js +0 -246
  336. package/dist/components/p--t9jBTYS.js +0 -1
  337. package/dist/components/p-At6nBeyO.js +0 -1
  338. package/dist/components/p-B6cqMQaM.js +0 -1
  339. package/dist/components/p-B73VhbYi.js +0 -1
  340. package/dist/components/p-BDQQllAo.js +0 -1
  341. package/dist/components/p-BDr27lvk.js +0 -1
  342. package/dist/components/p-BQ6at17Y.js +0 -1
  343. package/dist/components/p-BW_sBt7X.js +0 -1
  344. package/dist/components/p-BX3TJuQY.js +0 -1
  345. package/dist/components/p-Bm_T3qE0.js +0 -1
  346. package/dist/components/p-BnzK4uU4.js +0 -1
  347. package/dist/components/p-BqkJ0rZv.js +0 -1
  348. package/dist/components/p-C4PmGpW8.js +0 -1
  349. package/dist/components/p-C9CszVFl.js +0 -1
  350. package/dist/components/p-CGQWERwE.js +0 -1
  351. package/dist/components/p-CZmKBmKx.js +0 -1
  352. package/dist/components/p-CnarDyZi.js +0 -1
  353. package/dist/components/p-Cr2ghUra.js +0 -1
  354. package/dist/components/p-Cspm6LxP.js +0 -1
  355. package/dist/components/p-Cx3jXw9J.js +0 -1
  356. package/dist/components/p-DG-4Ifco.js +0 -1
  357. package/dist/components/p-DTrMR0rx.js +0 -1
  358. package/dist/components/p-DfXAgw0E.js +0 -1
  359. package/dist/components/p-MMkRcTBd.js +0 -1
  360. package/dist/components/p-ZstG0XdT.js +0 -1
  361. package/dist/components/p-h7eBUL4i.js +0 -1
  362. package/dist/components/p-lyB7zSp-.js +0 -1
  363. package/dist/components/p-oIM6jNZe.js +0 -1
  364. package/dist/components/p-oKHZl8yu.js +0 -1
  365. package/dist/components/sd-date-picker-calendar.d.ts +0 -11
  366. package/dist/components/sd-date-picker-calendar.js +0 -1
  367. package/dist/design-system/p-02289728.entry.js +0 -1
  368. package/dist/design-system/p-17d66d85.entry.js +0 -1
  369. package/dist/design-system/p-18466728.entry.js +0 -1
  370. package/dist/design-system/p-1bb86d69.entry.js +0 -1
  371. package/dist/design-system/p-21874054.entry.js +0 -1
  372. package/dist/design-system/p-282cbefa.entry.js +0 -1
  373. package/dist/design-system/p-35dce399.entry.js +0 -1
  374. package/dist/design-system/p-39ff56b4.entry.js +0 -1
  375. package/dist/design-system/p-3cb712a6.entry.js +0 -1
  376. package/dist/design-system/p-7610153d.entry.js +0 -1
  377. package/dist/design-system/p-7722ddeb.entry.js +0 -1
  378. package/dist/design-system/p-7bfa0cf9.entry.js +0 -1
  379. package/dist/design-system/p-824ecfb5.entry.js +0 -1
  380. package/dist/design-system/p-9a04b341.entry.js +0 -1
  381. package/dist/design-system/p-B6cqMQaM.js +0 -1
  382. package/dist/design-system/p-BQ6at17Y.js +0 -1
  383. package/dist/design-system/p-CGQWERwE.js +0 -1
  384. package/dist/design-system/p-CLCoul8o.js +0 -2
  385. package/dist/design-system/p-Ce0cmS4R.js +0 -1
  386. package/dist/design-system/p-DTrMR0rx.js +0 -1
  387. package/dist/design-system/p-Dmf0PYdM.js +0 -1
  388. package/dist/design-system/p-a7a0ca14.entry.js +0 -1
  389. package/dist/design-system/p-b04b22c6.entry.js +0 -1
  390. package/dist/design-system/p-baed13e4.entry.js +0 -1
  391. package/dist/design-system/p-bd45e65d.entry.js +0 -1
  392. package/dist/design-system/p-bf4156d8.entry.js +0 -1
  393. package/dist/design-system/p-c228c2c7.entry.js +0 -1
  394. package/dist/design-system/p-cf382479.entry.js +0 -1
  395. package/dist/design-system/p-d0de34fd.entry.js +0 -1
  396. package/dist/design-system/p-f60cc7be.entry.js +0 -1
  397. package/dist/esm/resolveColor-Ce0cmS4R.js +0 -268
  398. package/dist/esm/sd-calendar.entry.js +0 -141
  399. package/dist/esm/sd-date-picker-calendar_2.entry.js +0 -211
  400. package/dist/esm/sd-date-picker.config-B6cqMQaM.js +0 -171
  401. package/dist/esm/useDatePicker-DTrMR0rx.js +0 -45
  402. package/dist/types/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.d.ts +0 -26
package/hydrate/index.mjs CHANGED
@@ -134,7 +134,7 @@ var node_crypto = require('node:crypto');
134
134
  const NAMESPACE = 'design-system';
135
135
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
136
136
 
137
- 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-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-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-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-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-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-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-xs-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-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-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-typography-navigation-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-navigation-default-font-weight:400;--sd-system-typography-navigation-default-font-size:12px;--sd-system-typography-navigation-default-line-height:20px;--sd-system-typography-navigation-default-text-decoration:none;--sd-system-typography-navigation-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-navigation-bold-font-weight:700;--sd-system-typography-navigation-bold-font-size:12px;--sd-system-typography-navigation-bold-line-height:20px;--sd-system-typography-navigation-bold-text-decoration:none;--sd-system-typography-table-header-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-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-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-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-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-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-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-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--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-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--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-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--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-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-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:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-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-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--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-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-bg-read-only:#EEEEEE;--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-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:innerShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--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-sm-gap:4px;--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:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--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-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:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius: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-datepicker-datepicker-calendar-legend-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-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--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-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-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-x:24px;--sd-toast-toast-padding-y:12px;--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:500;--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-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--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-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-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-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-footer-bg:#FFFFFF;--sd-popup-popup-footer-padding-x:20px;--sd-popup-popup-footer-padding-y:8px;--sd-popup-popup-footer-gap:16px;--sd-popup-popup-bg:#EEEEEE;--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-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-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-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-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-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-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-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-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-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-dense-padding-y:6px;--sd-table-table-body-padding-x:16px;--sd-table-table-body-frame-padding:8px;--sd-table-table-body-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-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding:8px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--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;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-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-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-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-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-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-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-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-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap:24px;--sd-tab-tab-sub-content-gap:4px;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-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-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-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-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px}.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}.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}";
137
+ 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-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-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-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-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-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-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-xs-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-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-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-typography-navigation-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-navigation-default-font-weight:400;--sd-system-typography-navigation-default-font-size:12px;--sd-system-typography-navigation-default-line-height:20px;--sd-system-typography-navigation-default-text-decoration:none;--sd-system-typography-navigation-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-navigation-bold-font-weight:700;--sd-system-typography-navigation-bold-font-size:12px;--sd-system-typography-navigation-bold-line-height:20px;--sd-system-typography-navigation-bold-text-decoration:none;--sd-system-typography-table-header-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-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-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-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-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-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-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-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--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-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--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-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--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-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-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:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-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-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--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-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-bg-read-only:#EEEEEE;--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-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--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-sm-gap:4px;--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:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--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-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:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius: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-datepicker-datepicker-calendar-legend-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-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--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-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-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-x:24px;--sd-toast-toast-padding-y:12px;--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:500;--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-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--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-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-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-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-footer-bg:#FFFFFF;--sd-popup-popup-footer-padding-x:20px;--sd-popup-popup-footer-padding-y:8px;--sd-popup-popup-footer-gap:16px;--sd-popup-popup-bg:#EEEEEE;--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-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-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-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-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-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-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-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-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-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-dense-padding-y:6px;--sd-table-table-body-padding-x:16px;--sd-table-table-body-frame-padding:8px;--sd-table-table-body-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-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding:8px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator--width:6px;--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;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-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-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-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-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-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-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-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-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap:24px;--sd-tab-tab-sub-content-gap:4px;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-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-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-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-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px}.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}.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}";
138
138
 
139
139
  /*
140
140
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5336,7 +5336,7 @@ class SdActionModal {
5336
5336
  if (this.height != null && this.height !== '') {
5337
5337
  sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
5338
5338
  }
5339
- return (hAsync("div", { key: '278f81cf1f4ae0ca65ac6187b7fb31e4f12002f6', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '7d110c9a1633f0db63c3d605f4422b90b9eb1a5c', class: "sd-action-modal__header" }, hAsync("h2", { key: 'd81100f64dec3a483d8f40b0be5069182de892c1', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'c90c38a33877c85837316d63aadfab5f4bee73dc', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '98ea6a6f21d1596fa22fb7a9b37bb1169dcc6b16', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: 'dd3429279996c79dec50aef0d77cfa21f4b0392b', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'c8621876c083c1026ddbecef875b4308ce85835e', class: "sd-action-modal__body" }, hAsync("slot", { key: 'bcf70a5bf4af9afdb421894a4cb2abeea0e277e9', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: 'bc783b531cc045c360680326f826cda3ccc1bd67', class: "sd-action-modal__footer" }, hAsync("div", { key: '20d6c7708bc3218b038c5cb4faddcc6fc58acee7', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '08703135da34bac499de135ed5b8e85eeb0fbc3a', name: "bottom-sub-content" })), hAsync("sd-button", { key: 'f384e5914a78fdfcfdd0bd3ad89f7bcf20c5f8d2', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
5339
+ return (hAsync("div", { key: '7b59ff655bb9f7a6bc79bb948201a6a532c16b06', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '3e141509dc7082e08f448043573de3a8bd8e7cf0', class: "sd-action-modal__header" }, hAsync("h2", { key: 'ba80634b72ce1168d2ab3aec12bdf2a6546ff08d', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'aed32008f0dcaa2deec098ca3c0c9cb1e8f6fb50', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '32a015a006cbcf26373c64a72e4131b878c53222', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '574d14cf2d0031dbf43cbb5999d4471a235ca72a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '713761da4ad2217c1d762fd56bc391ddc5c9cded', class: "sd-action-modal__body" }, hAsync("slot", { key: 'e224251b153d60cf35056b542c5d9925f4918b7f', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '43d6e4ffed21704ac68689f0742f8d7a6456b0b6', class: "sd-action-modal__footer" }, hAsync("div", { key: 'bd9cce1c5b1fb02156008a4e76c65dc8cb4385aa', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '4de818c9ba8fcdb159963b9c9c7ce893fa3216da', name: "bottom-sub-content" })), hAsync("sd-button", { key: 'af9f4c1fd4c6bb482690c2545e0add53c308b95a', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
5340
5340
  }
5341
5341
  static get style() { return sdActionModalCss(); }
5342
5342
  static get cmpMeta() { return {
@@ -5388,7 +5388,7 @@ class SdBadge {
5388
5388
  color = 'blue';
5389
5389
  render() {
5390
5390
  const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
5391
- return (hAsync("div", { key: 'aba37986d6beea38fb1c5476f5187359ac2ebf0c', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'dd80e8d18c79eda021baf7a7f233222c9c2aa717', class: "sd-badge__dot" })));
5391
+ return (hAsync("div", { key: '9ae835aba8a4acde4b918eceda00441ee2c22905', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'c3b648845b5c138026a82a6a2c483d2a56ed2aab', class: "sd-badge__dot" })));
5392
5392
  }
5393
5393
  static get style() { return sdBadgeCss(); }
5394
5394
  static get cmpMeta() { return {
@@ -5597,7 +5597,7 @@ class SdBarcodeInput {
5597
5597
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
5598
5598
  '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
5599
5599
  };
5600
- return (hAsync("sd-field", { key: '206beaac9acf7bf3e787b98c1e9bda602f1aa1d2', 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: 'ab14cdc3e65faa72ce7c549234e40ca54f441c7d', class: "sd-barcode-input__content" }, hAsync("slot", { key: '7568acdee85fa0ae7440d7db65fd414fb1c27d1c', name: "prefix" }), hAsync("input", { key: '388b007eb7d830083e75e6b3016c412a6922bb1a', 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: '8e8d4feee62108904eb766b1917ed1e20cacc83b', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: 'a9b158ebcdcb31009b13db624fb8c74d6252e20d', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5600
+ return (hAsync("sd-field", { key: '61eb9beceb57e58323c1477c71147607db834e71', 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: '9d4fa219af76d29b2d2e8443af1e66b980d62dd1', class: "sd-barcode-input__content" }, hAsync("slot", { key: '044bf2c4a6e79bb0d6b2a76398107b47d1237662', name: "prefix" }), hAsync("input", { key: '2522d0ded40b69c76872877bede00b1e4e5260d2', 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: '8dc300df9f8bd7045f9c9e357925be3b7f2bdbb4', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '1b3cab2c7fe9caf973e7defff170f64b3fd35daa', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5601
5601
  if (this.disabled)
5602
5602
  return;
5603
5603
  this.internalValue = '';
@@ -6415,10 +6415,11 @@ class SdButton {
6415
6415
  this.click.emit(event);
6416
6416
  };
6417
6417
  get resolvedName() {
6418
- if (!isButtonName(this.name)) {
6419
- throw new Error(`Invalid sd-button name: "${this.name}"`);
6418
+ const name = this.name || 'primary_sm';
6419
+ if (!isButtonName(name)) {
6420
+ throw new Error(`Invalid sd-button name: "${name}"`);
6420
6421
  }
6421
- return this.name;
6422
+ return name;
6422
6423
  }
6423
6424
  get resolvedConfig() {
6424
6425
  const name = this.resolvedName;
@@ -6444,8 +6445,8 @@ class SdButton {
6444
6445
  this.warnIfMissingAriaLabel();
6445
6446
  }
6446
6447
  warnIfMissingAriaLabel() {
6447
- const iconOnly = !this.label && (isValidIcon(this.icon) || isValidIcon(this.rightIcon));
6448
- const missingAriaLabel = iconOnly && !this.ariaLabel.trim();
6448
+ const iconOnly = this.label === '' && (isValidIcon(this.icon) || isValidIcon(this.rightIcon));
6449
+ const missingAriaLabel = iconOnly && this.ariaLabel.trim() === '';
6449
6450
  if (!missingAriaLabel) {
6450
6451
  this.hasWarnedMissingAriaLabel = false;
6451
6452
  return;
@@ -6462,14 +6463,14 @@ class SdButton {
6462
6463
  const validIcon = isValidIcon(this.icon) ? this.icon : undefined;
6463
6464
  const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
6464
6465
  const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
6465
- const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
6466
- return (hAsync("button", { key: '3f228e1e1bd80106c60aacab606c48622864045d', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
6466
+ const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
6467
+ return (hAsync("button", { key: '3caa9dff467ec7efa748eecd736296500a222ecb', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
6467
6468
  '--sd-button-bg': config.color,
6468
6469
  '--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
6469
6470
  '--sd-button-border': PRESET_BORDER_COLORS$1[preset],
6470
6471
  '--sd-button-content': PRESET_CONTENT_COLORS$1[preset],
6471
6472
  '--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
6472
- }, onClick: this.handleClick }, hAsync("span", { key: '03803b4bf493ee2a03197437d40daba083f337fe', class: "sd-button__content" }, validIcon && (hAsync("sd-icon", { key: '7e6b2c31136c90a0da3f174be15c04f3da405ed6', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && hAsync("span", { key: '32f11f40391d214d80090653ab3c4387f7359bbb', class: "sd-button__label" }, this.label), validRightIcon && (hAsync("sd-icon", { key: 'a577a5074d02f04898308a593a13803abfca2510', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
6473
+ }, onClick: this.handleClick }, hAsync("span", { key: 'cded66e4802956c29064cbdcc12b9dd1066a45c3', class: "sd-button__content" }, validIcon && (hAsync("sd-icon", { key: 'b989e3eb8661e16f052d5c7a292ea316a2b821df', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && hAsync("span", { key: '07695896bd8f11ca8753dcb171b5c7f0e7304c0d', class: "sd-button__label" }, this.label), validRightIcon && (hAsync("sd-icon", { key: 'bfd18c0a390a955d8de99789c86ce39fb605beae', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
6473
6474
  }
6474
6475
  static get style() { return sdButtonCss(); }
6475
6476
  static get cmpMeta() { return {
@@ -6546,422 +6547,387 @@ const useDatePicker = () => {
6546
6547
  return { formatDate, createCalendar, calculateYearMonth };
6547
6548
  };
6548
6549
 
6549
- const primary = "#051D36";
6550
- const secondary = "#555555";
6551
- const accent = "#9C27B0";
6552
- const positive = "#0075FF";
6553
- const negative = "#E30000";
6554
- const info = "#00CD52";
6555
- const warning = "#F2C037";
6556
- const caution_bg = "#FEF1F1";
6557
- const caution_icon = "#FD9595";
6558
- const header_alert = "#FF7A00";
6559
- const white = "#FFFFFF";
6560
- const black = "#000000";
6561
- const grey_10 = "#F6F6F6";
6562
- const grey_20 = "#EEEEEE";
6563
- const grey_25 = "#E5E5E5";
6564
- const grey_30 = "#E1E1E1";
6565
- const grey_35 = "#D8D8D8";
6566
- const grey_45 = "#CCCCCC";
6567
- const grey_50 = "#BBBBBB";
6568
- const grey_55 = "#AAAAAA";
6569
- const grey_60 = "#999999";
6570
- const grey_65 = "#888888";
6571
- const grey_70 = "#737373";
6572
- const grey_80 = "#555555";
6573
- const grey_85 = "#444444";
6574
- const grey_90 = "#333333";
6575
- const grey_95 = "#222222";
6576
- const grey_05 = "#F9F9F9";
6577
- const red_15 = "#FCEFEF";
6578
- const red_20 = "#FCE6E6";
6579
- const red_30 = "#FFD3D3";
6580
- const red_45 = "#FFB5B5";
6581
- const red_60 = "#FF7C7C";
6582
- const red_70 = "#FB4444";
6583
- const red_75 = "#E30000";
6584
- const red_75_006 = "#E30000";
6585
- const red_80 = "#AD0000";
6586
- const red_85 = "#820000";
6587
- const red_90 = "#5E0000";
6588
- const red_95 = "#440000";
6589
- const red_99 = "#220000";
6590
- const orange_10 = "#FEF1EA";
6591
- const orange_20 = "#FFEAD7";
6592
- const orange_35 = "#FFD5AF";
6593
- const orange_45 = "#FFBC81";
6594
- const orange_55 = "#FFA452";
6595
- const orange_60 = "#FF7F22";
6596
- const orange_65 = "#FF6B00";
6597
- const orange_75 = "#CE4900";
6598
- const orange_85 = "#9B3700";
6599
- const orange_90 = "#752A00";
6600
- const orange_95 = "#4D1B00";
6601
- const orange_99 = "#2F1100";
6602
- const yellow_10 = "#FFF7DD";
6603
- const yellow_20 = "#FEF1C4";
6604
- const yellow_25 = "#FFE99E";
6605
- const yellow_30 = "#FEE17C";
6606
- const yellow_40 = "#FFD643";
6607
- const yellow_45 = "#FFC700";
6608
- const yellow_50 = "#EBB110";
6609
- const yellow_60 = "#CA9612";
6610
- const yellow_70 = "#916C0D";
6611
- const yellow_80 = "#6C5002";
6612
- const yellow_90 = "#453602";
6613
- const yellow_95 = "#322700";
6614
- const olive_10 = "#FBFBBF";
6615
- const olive_15 = "#FAFAA1";
6616
- const olive_20 = "#F6F65F";
6617
- const olive_30 = "#EEEE37";
6618
- const olive_45 = "#DDDD12";
6619
- const olive_55 = "#C7C700";
6620
- const olive_65 = "#A5A500";
6621
- const olive_70 = "#838300";
6622
- const olive_80 = "#636300";
6623
- const olive_90 = "#454500";
6624
- const olive_95 = "#2C2C00";
6625
- const olive_05 = "#FEFED9";
6626
- const green_15 = "#E8F9EF";
6627
- const green_25 = "#D4FAE3";
6628
- const green_45 = "#ACF4C9";
6629
- const green_55 = "#6DE39C";
6630
- const green_65 = "#2BCE6C";
6631
- const green_70 = "#12B553";
6632
- const green_75 = "#00973C";
6633
- const green_80 = "#007B31";
6634
- const green_85 = "#006629";
6635
- const green_90 = "#00461C";
6636
- const green_95 = "#003013";
6637
- const green_99 = "#001D0B";
6638
- const steelblue_10 = "#ECF8FD";
6639
- const steelblue_25 = "#D9F2FD";
6640
- const steelblue_45 = "#A4E2FD";
6641
- const steelblue_60 = "#50BFF0";
6642
- const steelblue_65 = "#229FD7";
6643
- const steelblue_70 = "#128FC7";
6644
- const steelblue_75 = "#066D9B";
6645
- const steelblue_80 = "#06587D";
6646
- const steelblue_85 = "#033F59";
6647
- const steelblue_90 = "#032D40";
6648
- const steelblue_95 = "#02212F";
6649
- const steelblue_99 = "#021A25";
6650
- const oceanblue_15 = "#EAF5FE";
6651
- const oceanblue_25 = "#D5EBFE";
6652
- const oceanblue_50 = "#9CD1FC";
6653
- const oceanblue_60 = "#5CB0F3";
6654
- const oceanblue_65 = "#1F8AE1";
6655
- const oceanblue_70 = "#006AC1";
6656
- const oceanblue_75 = "#025497";
6657
- const oceanblue_80 = "#004177";
6658
- const oceanblue_85 = "#07284A";
6659
- const oceanblue_90 = "#051D36";
6660
- const oceanblue_95 = "#03172D";
6661
- const oceanblue_99 = "#011428";
6662
- const brilliantblue_10 = "#EFF6FF";
6663
- const brilliantblue_20 = "#E6F1FF";
6664
- const brilliantblue_25 = "#D9EAFF";
6665
- const brilliantblue_40 = "#BBDAFF";
6666
- const brilliantblue_50 = "#93C4FF";
6667
- const brilliantblue_60 = "#64ABFF";
6668
- const brilliantblue_70 = "#2D8DFF";
6669
- const brilliantblue_75 = "#0075FF";
6670
- const brilliantblue_80 = "#005CC9";
6671
- const brilliantblue_85 = "#004290";
6672
- const brilliantblue_90 = "#002B5E";
6673
- const brilliantblue_95 = "#001B39";
6674
- const brilliantblue_99 = "#001226";
6675
- const brilliantblue_05 = "#F5FAFF";
6676
- var rawColors = {
6677
- primary: primary,
6678
- secondary: secondary,
6679
- accent: accent,
6680
- positive: positive,
6681
- negative: negative,
6682
- info: info,
6683
- warning: warning,
6684
- caution_bg: caution_bg,
6685
- caution_icon: caution_icon,
6686
- header_alert: header_alert,
6687
- white: white,
6688
- black: black,
6689
- grey_10: grey_10,
6690
- grey_20: grey_20,
6691
- grey_25: grey_25,
6692
- grey_30: grey_30,
6693
- grey_35: grey_35,
6694
- grey_45: grey_45,
6695
- grey_50: grey_50,
6696
- grey_55: grey_55,
6697
- grey_60: grey_60,
6698
- grey_65: grey_65,
6699
- grey_70: grey_70,
6700
- grey_80: grey_80,
6701
- grey_85: grey_85,
6702
- grey_90: grey_90,
6703
- grey_95: grey_95,
6704
- grey_05: grey_05,
6705
- red_15: red_15,
6706
- red_20: red_20,
6707
- red_30: red_30,
6708
- red_45: red_45,
6709
- red_60: red_60,
6710
- red_70: red_70,
6711
- red_75: red_75,
6712
- red_75_006: red_75_006,
6713
- red_80: red_80,
6714
- red_85: red_85,
6715
- red_90: red_90,
6716
- red_95: red_95,
6717
- red_99: red_99,
6718
- orange_10: orange_10,
6719
- orange_20: orange_20,
6720
- orange_35: orange_35,
6721
- orange_45: orange_45,
6722
- orange_55: orange_55,
6723
- orange_60: orange_60,
6724
- orange_65: orange_65,
6725
- orange_75: orange_75,
6726
- orange_85: orange_85,
6727
- orange_90: orange_90,
6728
- orange_95: orange_95,
6729
- orange_99: orange_99,
6730
- yellow_10: yellow_10,
6731
- yellow_20: yellow_20,
6732
- yellow_25: yellow_25,
6733
- yellow_30: yellow_30,
6734
- yellow_40: yellow_40,
6735
- yellow_45: yellow_45,
6736
- yellow_50: yellow_50,
6737
- yellow_60: yellow_60,
6738
- yellow_70: yellow_70,
6739
- yellow_80: yellow_80,
6740
- yellow_90: yellow_90,
6741
- yellow_95: yellow_95,
6742
- olive_10: olive_10,
6743
- olive_15: olive_15,
6744
- olive_20: olive_20,
6745
- olive_30: olive_30,
6746
- olive_45: olive_45,
6747
- olive_55: olive_55,
6748
- olive_65: olive_65,
6749
- olive_70: olive_70,
6750
- olive_80: olive_80,
6751
- olive_90: olive_90,
6752
- olive_95: olive_95,
6753
- olive_05: olive_05,
6754
- green_15: green_15,
6755
- green_25: green_25,
6756
- green_45: green_45,
6757
- green_55: green_55,
6758
- green_65: green_65,
6759
- green_70: green_70,
6760
- green_75: green_75,
6761
- green_80: green_80,
6762
- green_85: green_85,
6763
- green_90: green_90,
6764
- green_95: green_95,
6765
- green_99: green_99,
6766
- steelblue_10: steelblue_10,
6767
- steelblue_25: steelblue_25,
6768
- steelblue_45: steelblue_45,
6769
- steelblue_60: steelblue_60,
6770
- steelblue_65: steelblue_65,
6771
- steelblue_70: steelblue_70,
6772
- steelblue_75: steelblue_75,
6773
- steelblue_80: steelblue_80,
6774
- steelblue_85: steelblue_85,
6775
- steelblue_90: steelblue_90,
6776
- steelblue_95: steelblue_95,
6777
- steelblue_99: steelblue_99,
6778
- oceanblue_15: oceanblue_15,
6779
- oceanblue_25: oceanblue_25,
6780
- oceanblue_50: oceanblue_50,
6781
- oceanblue_60: oceanblue_60,
6782
- oceanblue_65: oceanblue_65,
6783
- oceanblue_70: oceanblue_70,
6784
- oceanblue_75: oceanblue_75,
6785
- oceanblue_80: oceanblue_80,
6786
- oceanblue_85: oceanblue_85,
6787
- oceanblue_90: oceanblue_90,
6788
- oceanblue_95: oceanblue_95,
6789
- oceanblue_99: oceanblue_99,
6790
- brilliantblue_10: brilliantblue_10,
6791
- brilliantblue_20: brilliantblue_20,
6792
- brilliantblue_25: brilliantblue_25,
6793
- brilliantblue_40: brilliantblue_40,
6794
- brilliantblue_50: brilliantblue_50,
6795
- brilliantblue_60: brilliantblue_60,
6796
- brilliantblue_70: brilliantblue_70,
6797
- brilliantblue_75: brilliantblue_75,
6798
- brilliantblue_80: brilliantblue_80,
6799
- brilliantblue_85: brilliantblue_85,
6800
- brilliantblue_90: brilliantblue_90,
6801
- brilliantblue_95: brilliantblue_95,
6802
- brilliantblue_99: brilliantblue_99,
6803
- brilliantblue_05: brilliantblue_05
6550
+ const datepicker = {
6551
+ sm: {
6552
+ height: "28",
6553
+ paddingX: "12",
6554
+ gap: "8",
6555
+ icon: "16",
6556
+ typography: {
6557
+ fontWeight: "400",
6558
+ fontSize: "12",
6559
+ lineHeight: "20"},
6560
+ radius: "4"
6561
+ },
6562
+ md: {
6563
+ height: "36",
6564
+ paddingX: "16",
6565
+ gap: "12",
6566
+ icon: "20",
6567
+ typography: {
6568
+ fontWeight: "400",
6569
+ fontSize: "14",
6570
+ lineHeight: "24"
6571
+ },
6572
+ radius: "6"
6573
+ },
6574
+ border: {
6575
+ "default": "#AAAAAA",
6576
+ focus: "#0075FF"},
6577
+ bg: {
6578
+ "default": "#FFFFFF"},
6579
+ icon: {
6580
+ "default": "#888888",
6581
+ disabled: "#BBBBBB"
6582
+ },
6583
+ text: {
6584
+ "default": "#222222",
6585
+ hint: "#555555",
6586
+ disabled: "#888888"
6587
+ },
6588
+ calendar: {
6589
+ bg: "#FFFFFF",
6590
+ paddingXY: "24",
6591
+ gap: "12",
6592
+ radius: "8",
6593
+ header: {
6594
+ gap: "8",
6595
+ divider: "#E1E1E1",
6596
+ typography: {
6597
+ fontWeight: "500",
6598
+ fontSize: "14",
6599
+ lineHeight: "24"
6600
+ }
6601
+ },
6602
+ week: {
6603
+ typography: {
6604
+ fontWeight: "400",
6605
+ fontSize: "12",
6606
+ lineHeight: "20"},
6607
+ color: "#888888"
6608
+ },
6609
+ grid: {
6610
+ rowGap: "4"
6611
+ },
6612
+ day: {
6613
+ width: "40",
6614
+ circle: {
6615
+ size: "32",
6616
+ radius: "9999"
6617
+ },
6618
+ "default": {
6619
+ text: "#222222"
6620
+ },
6621
+ hover: {
6622
+ text: "#222222",
6623
+ border: "#0075FF"
6624
+ },
6625
+ select: {
6626
+ bg: "#0075FF",
6627
+ text: "#FFFFFF"
6628
+ },
6629
+ disabled: {
6630
+ text: "#BBBBBB"
6631
+ },
6632
+ typography: {
6633
+ "default": {
6634
+ fontWeight: "400",
6635
+ fontSize: "14",
6636
+ lineHeight: "24"
6637
+ },
6638
+ bold: {
6639
+ fontWeight: "700"}
6640
+ },
6641
+ dot: {
6642
+ size: "6",
6643
+ gap: "2",
6644
+ paddingY: "4"
6645
+ }
6646
+ },
6647
+ range: {
6648
+ bg: "#D9EAFF",
6649
+ height: "32",
6650
+ panelGap: "24",
6651
+ divider: "#E1E1E1"},
6652
+ legend: {
6653
+ typography: {
6654
+ fontWeight: "400",
6655
+ fontSize: "11",
6656
+ lineHeight: "18"},
6657
+ gap: "4",
6658
+ group: {
6659
+ gap: "12"
6660
+ }
6661
+ }
6662
+ }
6663
+ };
6664
+ var datepickerTokens = {
6665
+ datepicker: datepicker
6804
6666
  };
6805
6667
 
6806
- const colors = rawColors;
6807
- // 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,
6808
- // 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.
6809
- function resolveColor(input, fallback = '#025497') {
6810
- if (input === null || input === undefined || input === '')
6811
- return fallback;
6812
- const mapped = colors[input];
6813
- return mapped !== undefined && mapped !== '' ? mapped : input;
6814
- }
6668
+ const CALENDAR_LAYOUT = {
6669
+ bg: datepickerTokens.datepicker.calendar.bg,
6670
+ paddingXY: datepickerTokens.datepicker.calendar.paddingXY,
6671
+ gap: datepickerTokens.datepicker.calendar.gap,
6672
+ radius: datepickerTokens.datepicker.calendar.radius,
6673
+ header: {
6674
+ gap: datepickerTokens.datepicker.calendar.header.gap,
6675
+ divider: datepickerTokens.datepicker.calendar.header.divider,
6676
+ fontSize: datepickerTokens.datepicker.calendar.header.typography.fontSize,
6677
+ lineHeight: datepickerTokens.datepicker.calendar.header.typography.lineHeight,
6678
+ fontWeight: datepickerTokens.datepicker.calendar.header.typography.fontWeight,
6679
+ },
6680
+ week: {
6681
+ fontSize: datepickerTokens.datepicker.calendar.week.typography.fontSize,
6682
+ lineHeight: datepickerTokens.datepicker.calendar.week.typography.lineHeight,
6683
+ fontWeight: datepickerTokens.datepicker.calendar.week.typography.fontWeight,
6684
+ color: datepickerTokens.datepicker.calendar.week.color,
6685
+ },
6686
+ grid: {
6687
+ rowGap: datepickerTokens.datepicker.calendar.grid.rowGap,
6688
+ },
6689
+ day: {
6690
+ size: datepickerTokens.datepicker.calendar.day.width,
6691
+ circleSize: datepickerTokens.datepicker.calendar.day.circle.size,
6692
+ circleRadius: datepickerTokens.datepicker.calendar.day.circle.radius,
6693
+ defaultText: datepickerTokens.datepicker.calendar.day.default.text,
6694
+ hoverText: datepickerTokens.datepicker.calendar.day.hover.text,
6695
+ hoverBorder: datepickerTokens.datepicker.calendar.day.hover.border,
6696
+ selectBg: datepickerTokens.datepicker.calendar.day.select.bg,
6697
+ selectText: datepickerTokens.datepicker.calendar.day.select.text,
6698
+ disabledText: datepickerTokens.datepicker.calendar.day.disabled.text,
6699
+ fontSize: datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
6700
+ lineHeight: datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
6701
+ fontWeight: datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
6702
+ boldFontWeight: datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
6703
+ dot: {
6704
+ size: datepickerTokens.datepicker.calendar.day.dot.size,
6705
+ gap: datepickerTokens.datepicker.calendar.day.dot.gap,
6706
+ paddingY: datepickerTokens.datepicker.calendar.day.dot.paddingY,
6707
+ },
6708
+ },
6709
+ legend: {
6710
+ fontSize: datepickerTokens.datepicker.calendar.legend.typography.fontSize,
6711
+ lineHeight: datepickerTokens.datepicker.calendar.legend.typography.lineHeight,
6712
+ fontWeight: datepickerTokens.datepicker.calendar.legend.typography.fontWeight,
6713
+ gap: datepickerTokens.datepicker.calendar.legend.gap,
6714
+ groupGap: datepickerTokens.datepicker.calendar.legend.group.gap,
6715
+ },
6716
+ };
6717
+ const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
6815
6718
 
6816
- const sdCalendarCss = () => `.sd-calendar.sc-sd-calendar{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;background:white}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav.sc-sd-calendar,.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav.sc-sd-calendar{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav.sc-sd-calendar button.sc-sd-calendar,.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav.sc-sd-calendar button.sc-sd-calendar{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav__current.sc-sd-calendar{width:40px;text-align:center}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav__current.sc-sd-calendar{width:100px;text-align:center}.sd-calendar.sc-sd-calendar .sd-calendar__days.sc-sd-calendar{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-calendar.sc-sd-calendar .sd-calendar__days.sc-sd-calendar .day.sc-sd-calendar{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-calendar.sc-sd-calendar .sd-calendar__body.sc-sd-calendar{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));grid-auto-rows:min-content}.sd-calendar.sc-sd-calendar .sd-calendar__cell.sc-sd-calendar{display:flex;flex-direction:column;align-items:center}.sd-calendar.sc-sd-calendar .sd-calendar__dots.sc-sd-calendar{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-items:center;min-height:8px;max-width:28px}.sd-calendar.sc-sd-calendar .sd-calendar__dot.sc-sd-calendar{width:5px;height:5px;border-radius:50%;display:inline-block}.sd-calendar.sc-sd-calendar .sd-calendar__legend.sc-sd-calendar{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:16px;padding:12px 5px 0;border-top:1px solid #E5E5E5}.sd-calendar.sc-sd-calendar .sd-calendar__legend-item.sc-sd-calendar{display:flex;align-items:center;gap:4px}.sd-calendar.sc-sd-calendar .sd-calendar__legend-dot.sc-sd-calendar{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}.sd-calendar.sc-sd-calendar .sd-calendar__legend-label.sc-sd-calendar{font-size:11px;color:#888888;line-height:1}`;
6719
+ const sdCalendarCss = () => `sd-calendar{display:block}sd-calendar .sd-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);width:328px;min-height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-calendar .sd-calendar__header{display:flex;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-calendar .sd-calendar__nav-group-month{width:100%}sd-calendar .sd-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-calendar .sd-calendar__label-month{width:100%}sd-calendar .sd-calendar__divider{display:inline-block;width:1px;height:16px;background:var(--calendar-header-divider)}sd-calendar .sd-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-calendar .sd-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-calendar .sd-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-calendar .sd-calendar__day{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;width:var(--calendar-day-size);min-height:var(--calendar-day-circle-size);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-calendar .sd-calendar__day:not(:disabled):hover .sd-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-calendar .sd-calendar__day--today .sd-calendar__day-circle{font-weight:700}sd-calendar .sd-calendar__day--selected .sd-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--selected:not(:disabled):hover .sd-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-calendar .sd-calendar__day--empty{visibility:hidden;pointer-events:none}sd-calendar .sd-calendar__dot-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--calendar-day-dot-gap);width:100%;padding-top:var(--calendar-day-dot-padding-y);padding-bottom:var(--calendar-day-dot-padding-y)}sd-calendar .sd-calendar__dot{display:inline-block;width:var(--calendar-day-dot-size);height:var(--calendar-day-dot-size);border-radius:50%}sd-calendar .sd-calendar__divider-bottom{display:block;width:100%;height:1px;background:var(--calendar-header-divider)}sd-calendar .sd-calendar__legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:var(--calendar-legend-group-gap);row-gap:4px;font-size:var(--calendar-legend-font-size);line-height:var(--calendar-legend-line-height);font-weight:var(--calendar-legend-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__legend-item{display:inline-flex;align-items:center;gap:var(--calendar-legend-gap)}sd-calendar .sd-calendar__legend-dot{display:inline-block;width:var(--calendar-day-dot-size);height:var(--calendar-day-dot-size);border-radius:50%;flex-shrink:0}sd-calendar .sd-calendar__legend-label{display:inline-block}`;
6817
6720
 
6818
- const DEFAULT_COLORS = [
6819
- 'brilliantblue_75',
6820
- 'red_60',
6821
- 'green_65',
6822
- 'orange_60',
6823
- 'steelblue_65',
6824
- 'yellow_45',
6825
- 'oceanblue_65',
6826
- 'olive_55',
6827
- ];
6828
6721
  class SdCalendar {
6829
6722
  constructor(hostRef) {
6830
6723
  registerInstance(this, hostRef);
6831
- this.select = createEvent(this, "sdSelect", 7);
6724
+ this.update = createEvent(this, "sdUpdate", 7);
6832
6725
  this.viewChange = createEvent(this, "sdViewChange", 7);
6833
6726
  }
6834
6727
  value = null;
6835
6728
  selectable;
6836
6729
  events;
6837
- eventColors;
6838
6730
  currentYear;
6839
6731
  currentMonth;
6840
- eventsRevision = 0;
6841
- select;
6732
+ update;
6842
6733
  viewChange;
6843
6734
  dateUtil = useDatePicker();
6735
+ _eventMapCache;
6736
+ get eventMap() {
6737
+ const cache = this._eventMapCache;
6738
+ if (cache && cache.src === this.events)
6739
+ return cache.map;
6740
+ const map = new Map();
6741
+ (this.events ?? []).forEach(g => g.dates.forEach(d => {
6742
+ const arr = map.get(d) ?? [];
6743
+ arr.push({ color: g.color, label: g.label });
6744
+ map.set(d, arr);
6745
+ }));
6746
+ this._eventMapCache = { src: this.events, map };
6747
+ return map;
6748
+ }
6749
+ get legendItems() {
6750
+ const seen = new Set();
6751
+ const out = [];
6752
+ (this.events ?? []).forEach(g => {
6753
+ const key = `${g.color}|${g.label}`;
6754
+ if (seen.has(key))
6755
+ return;
6756
+ seen.add(key);
6757
+ out.push({ color: g.color, label: g.label });
6758
+ });
6759
+ return out;
6760
+ }
6844
6761
  componentWillLoad() {
6845
- this.initCalendar();
6762
+ this.syncViewFromValue();
6846
6763
  }
6847
6764
  handleValueChange() {
6848
- this.initCalendar();
6849
- }
6850
- handleEventsChange() {
6851
- this.eventsRevision = this.eventsRevision + 1;
6765
+ this.syncViewFromValue();
6852
6766
  }
6853
- initCalendar() {
6767
+ syncViewFromValue() {
6854
6768
  const base = this.value || today;
6855
6769
  const [year, month] = base.split('-').map(Number);
6856
6770
  this.currentYear = year;
6857
6771
  this.currentMonth = month;
6858
6772
  }
6859
- get calendar() {
6860
- return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);
6861
- }
6862
- handleUpdateMonth(type) {
6863
- const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, type);
6864
- this.currentYear = newYear;
6865
- this.currentMonth = newMonth;
6866
- this.viewChange.emit({ year: newYear, month: newMonth });
6867
- }
6868
- handleDateClick(day) {
6869
- if (day === 0)
6870
- return;
6871
- const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);
6872
- this.value = date;
6873
- this.select.emit(date);
6773
+ formatDate(year, month, day) {
6774
+ return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
6874
6775
  }
6875
- isDisabledDate(date) {
6876
- if (this.selectable === undefined)
6877
- return false;
6878
- const [startSelectable, endSelectable] = this.selectable;
6879
- if (startSelectable !== '' && endSelectable !== '') {
6880
- return date < startSelectable || date > endSelectable;
6776
+ get cells() {
6777
+ const year = this.currentYear;
6778
+ const month = this.currentMonth;
6779
+ const firstDayIndex = new Date(year, month - 1, 1).getDay();
6780
+ const daysInCurrent = new Date(year, month, 0).getDate();
6781
+ const prevMonth = month === 1 ? 12 : month - 1;
6782
+ const prevYear = month === 1 ? year - 1 : year;
6783
+ const daysInPrev = new Date(prevYear, prevMonth, 0).getDate();
6784
+ const nextMonth = month === 12 ? 1 : month + 1;
6785
+ const nextYear = month === 12 ? year + 1 : year;
6786
+ const cells = [];
6787
+ for (let i = firstDayIndex - 1; i >= 0; i--) {
6788
+ const day = daysInPrev - i;
6789
+ cells.push({
6790
+ date: this.formatDate(prevYear, prevMonth, day),
6791
+ day,
6792
+ inCurrentMonth: false,
6793
+ });
6881
6794
  }
6882
- if (startSelectable !== '') {
6883
- return date < startSelectable;
6795
+ for (let day = 1; day <= daysInCurrent; day++) {
6796
+ cells.push({
6797
+ date: this.formatDate(year, month, day),
6798
+ day,
6799
+ inCurrentMonth: true,
6800
+ });
6884
6801
  }
6885
- if (endSelectable !== '') {
6886
- return date > endSelectable;
6802
+ const remaining = (7 - (cells.length % 7)) % 7;
6803
+ for (let day = 1; day <= remaining; day++) {
6804
+ cells.push({
6805
+ date: this.formatDate(nextYear, nextMonth, day),
6806
+ day,
6807
+ inCurrentMonth: false,
6808
+ });
6887
6809
  }
6888
- return false;
6810
+ return cells;
6889
6811
  }
6890
- getEventColor(eventName) {
6891
- if (this.eventColors?.[eventName] !== undefined && this.eventColors[eventName] !== '') {
6892
- return resolveColor(this.eventColors[eventName]);
6893
- }
6894
- const allEventNames = this.getAllEventNames();
6895
- const index = allEventNames.indexOf(eventName);
6896
- return resolveColor(DEFAULT_COLORS[index % DEFAULT_COLORS.length]);
6812
+ emitViewChange() {
6813
+ this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
6897
6814
  }
6898
- getAllEventNames() {
6899
- const names = new Set();
6900
- if (this.eventColors) {
6901
- for (const name of Object.keys(this.eventColors)) {
6902
- names.add(name);
6903
- }
6904
- }
6905
- if (this.events) {
6906
- for (const dateEvents of Object.values(this.events)) {
6907
- for (const name of dateEvents) {
6908
- names.add(name);
6909
- }
6910
- }
6911
- }
6912
- return Array.from(names);
6815
+ goPrevYear = (event) => {
6816
+ event.stopPropagation();
6817
+ this.currentYear -= 1;
6818
+ this.emitViewChange();
6819
+ };
6820
+ goNextYear = (event) => {
6821
+ event.stopPropagation();
6822
+ this.currentYear += 1;
6823
+ this.emitViewChange();
6824
+ };
6825
+ goPrevMonth = (event) => {
6826
+ event.stopPropagation();
6827
+ const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'prev');
6828
+ this.currentYear = newYear;
6829
+ this.currentMonth = newMonth;
6830
+ this.emitViewChange();
6831
+ };
6832
+ goNextMonth = (event) => {
6833
+ event.stopPropagation();
6834
+ const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'next');
6835
+ this.currentYear = newYear;
6836
+ this.currentMonth = newMonth;
6837
+ this.emitViewChange();
6838
+ };
6839
+ isDisabled(date) {
6840
+ if (!this.selectable)
6841
+ return false;
6842
+ const [start, end] = this.selectable;
6843
+ if (start !== '' && date < start)
6844
+ return true;
6845
+ if (end !== '' && date > end)
6846
+ return true;
6847
+ return false;
6913
6848
  }
6914
- getEventsForDate(date) {
6915
- return this.events?.[date] ?? [];
6849
+ handleDayClick(cell) {
6850
+ if (this.isDisabled(cell.date))
6851
+ return;
6852
+ this.value = cell.date;
6853
+ this.update.emit(cell.date);
6916
6854
  }
6917
6855
  render() {
6918
- const allEventNames = this.getAllEventNames();
6919
- return (hAsync("div", { key: '3c3a6af518a3e96dd5d5d553ab2a00b9dd882221', class: "sd-calendar" }, hAsync("div", { key: '660e96fcefe539b69ae7b69bb7a7eb209f40b02f', class: "sd-calendar__header" }, hAsync("div", { key: '609b4d2e552adb526deefbf0719284c94ab01c21', class: "year-nav" }, hAsync("button", { key: 'dc80f2e4fa441b9ed2e0a475f7982e7339c0cda7', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
6920
- this.currentYear = this.currentYear - 1;
6921
- this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
6922
- } }, hAsync("sd-icon", { key: 'ff62edabb67364704a4bfbcfc6f1658ad3d72408', name: "arrowLeft", size: "12", color: "grey_45" })), hAsync("span", { key: '0829c746b8537196652e7c40b3babea14ae8053e', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '3d288e5091445f2ed429de4aebb0d03f29eb6cc8', type: "button", name: "next-year", title: "Next Year", onClick: () => {
6923
- this.currentYear = this.currentYear + 1;
6924
- this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
6925
- } }, hAsync("sd-icon", { key: '5546ced1930082c68035db8b506b6ef2e953e305', name: "arrowRight", size: "12", color: "grey_45" }))), hAsync("div", { key: '1db95c9f31c1a11b58a6f1ce4a13b9d6388f7994', class: "month-nav" }, hAsync("button", { key: '2c5659945f3e0807a57ba22eb34576184e6ebf50', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '7994e2bf63fc45ffb7d29b49ad279223a1a12a98', name: "arrowLeft", size: "12", color: "grey_45" })), hAsync("span", { key: 'a8afd7592b3fba13a4560387bb759f4858273a85', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'b3d21b13823bd674c43c1782b66df38010fcfa59', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '8605340fe8128b6a55328c97dc84481092009c76', name: "arrowRight", size: "12", color: "grey_45" })))), hAsync("div", { key: '9312ff7f3af76aced7189f121c71ff252a92a71d', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: 'cb93d417204b3bad65074e06e491038fe06b1389', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
6926
- ...this.calendar.prevMonthDays,
6927
- ...this.calendar.days,
6928
- ...this.calendar.afterMonthDays,
6929
- ].map((day, idx) => {
6930
- const formattedDate = this.dateUtil.formatDate(this.currentYear, this.currentMonth, Number(day));
6931
- const dateEvents = day !== 0 ? this.getEventsForDate(formattedDate) : [];
6932
- const uniqueEvents = [...new Set(dateEvents)];
6933
- return (hAsync("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, hAsync("sd-date-box", { date: day === 0 ? '' : Number(day), selected: this.value === formattedDate, isToday: today === formattedDate, disabled: day === 0 ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day !== 0
6934
- ? () => this.handleDateClick(Number(day))
6935
- : undefined }), this.events !== undefined && (hAsync("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (hAsync("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
6936
- })), allEventNames.length > 0 && (hAsync("div", { key: '0556e06bcd0bab75b61c60181d9b203cb6ad4741', class: "sd-calendar__legend" }, allEventNames.map(name => (hAsync("div", { key: name, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), hAsync("span", { class: "sd-calendar__legend-label" }, name))))))));
6937
- }
6938
- static get watchers() { return {
6939
- "value": [{
6940
- "handleValueChange": 0
6941
- }],
6942
- "events": [{
6943
- "handleEventsChange": 0
6944
- }],
6945
- "eventColors": [{
6946
- "handleEventsChange": 0
6856
+ const cssVars = {
6857
+ '--calendar-bg': CALENDAR_LAYOUT.bg,
6858
+ '--calendar-padding': `${CALENDAR_LAYOUT.paddingXY}px`,
6859
+ '--calendar-gap': `${CALENDAR_LAYOUT.gap}px`,
6860
+ '--calendar-radius': `${CALENDAR_LAYOUT.radius}px`,
6861
+ '--calendar-header-gap': `${CALENDAR_LAYOUT.header.gap}px`,
6862
+ '--calendar-header-divider': CALENDAR_LAYOUT.header.divider,
6863
+ '--calendar-header-font-size': `${CALENDAR_LAYOUT.header.fontSize}px`,
6864
+ '--calendar-header-line-height': `${CALENDAR_LAYOUT.header.lineHeight}px`,
6865
+ '--calendar-header-font-weight': CALENDAR_LAYOUT.header.fontWeight,
6866
+ '--calendar-week-font-size': `${CALENDAR_LAYOUT.week.fontSize}px`,
6867
+ '--calendar-week-line-height': `${CALENDAR_LAYOUT.week.lineHeight}px`,
6868
+ '--calendar-week-font-weight': CALENDAR_LAYOUT.week.fontWeight,
6869
+ '--calendar-week-color': CALENDAR_LAYOUT.week.color,
6870
+ '--calendar-grid-row-gap': `${CALENDAR_LAYOUT.grid.rowGap}px`,
6871
+ '--calendar-day-size': `${CALENDAR_LAYOUT.day.size}px`,
6872
+ '--calendar-day-circle-size': `${CALENDAR_LAYOUT.day.circleSize}px`,
6873
+ '--calendar-day-circle-radius': `${CALENDAR_LAYOUT.day.circleRadius}px`,
6874
+ '--calendar-day-text': CALENDAR_LAYOUT.day.defaultText,
6875
+ '--calendar-day-hover-text': CALENDAR_LAYOUT.day.hoverText,
6876
+ '--calendar-day-hover-border': CALENDAR_LAYOUT.day.hoverBorder,
6877
+ '--calendar-day-select-bg': CALENDAR_LAYOUT.day.selectBg,
6878
+ '--calendar-day-select-text': CALENDAR_LAYOUT.day.selectText,
6879
+ '--calendar-day-disabled-text': CALENDAR_LAYOUT.day.disabledText,
6880
+ '--calendar-day-font-size': `${CALENDAR_LAYOUT.day.fontSize}px`,
6881
+ '--calendar-day-line-height': `${CALENDAR_LAYOUT.day.lineHeight}px`,
6882
+ '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
6883
+ '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
6884
+ '--calendar-day-dot-size': `${CALENDAR_LAYOUT.day.dot.size}px`,
6885
+ '--calendar-day-dot-gap': `${CALENDAR_LAYOUT.day.dot.gap}px`,
6886
+ '--calendar-day-dot-padding-y': `${CALENDAR_LAYOUT.day.dot.paddingY}px`,
6887
+ '--calendar-legend-font-size': `${CALENDAR_LAYOUT.legend.fontSize}px`,
6888
+ '--calendar-legend-line-height': `${CALENDAR_LAYOUT.legend.lineHeight}px`,
6889
+ '--calendar-legend-font-weight': CALENDAR_LAYOUT.legend.fontWeight,
6890
+ '--calendar-legend-gap': `${CALENDAR_LAYOUT.legend.gap}px`,
6891
+ '--calendar-legend-group-gap': `${CALENDAR_LAYOUT.legend.groupGap}px`,
6892
+ };
6893
+ const eventMap = this.eventMap;
6894
+ const legend = this.legendItems;
6895
+ return (hAsync("div", { key: '66c0bec57c13af12b05f2e90fbc5e1674ab052c8', class: "sd-calendar", style: cssVars }, hAsync("div", { key: '4df4f1c6d1ddcbe1478a69a481a228e66fc33c0a', class: "sd-calendar__header" }, hAsync("div", { key: '378c04444b3ddcc7df92ecce0f49056e919cd8e5', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '47426c62a26b05a9db58144acc33770713e7fce4', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '3b32e76a8a35705d820803c0b747829370079324', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '2e890a2cea91c9f49a03f0db3a4b943c707e312e', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '795bb8452e75303c25a8dc6d95f819f1e42f7f49', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '6df460ec38917c51eff851732c7f37b7e09475f6', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '36ef9dfdcfac5d9da08d05ca357fc9ec4100af4f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'b2e0cc74570724c0d97fb2afbcb775c0794583af', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '4c45467356411f7a5d137c19931d8fc62084c742', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'e1637a39795fb44bd33d138c8b244cc15b5f85f6', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '45642dc93b1373dc760f64ba74dd931e651279dd', class: "sd-calendar__grid" }, this.cells.map(cell => {
6896
+ const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
6897
+ const isToday = cell.inCurrentMonth && today === cell.date;
6898
+ const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
6899
+ const dayEvents = cell.inCurrentMonth ? eventMap.get(cell.date) : undefined;
6900
+ return (hAsync("button", { type: "button", key: cell.date, class: {
6901
+ 'sd-calendar__day': true,
6902
+ 'sd-calendar__day--empty': !cell.inCurrentMonth,
6903
+ 'sd-calendar__day--today': isToday,
6904
+ 'sd-calendar__day--selected': isSelected,
6905
+ 'sd-calendar__day--disabled': isDisabled,
6906
+ }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), dayEvents && dayEvents.length > 0 && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
6907
+ })), legend.length > 0 && [
6908
+ hAsync("span", { key: '0872cb7627db7d33721fbd1e1c9a601bd3c6c3e1', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
6909
+ hAsync("div", { key: 'd9c6be0684720aa9d2af24b2d0cf372a036dc8d5', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
6910
+ ]));
6911
+ }
6912
+ static get watchers() { return {
6913
+ "value": [{
6914
+ "handleValueChange": 0
6947
6915
  }]
6948
6916
  }; }
6949
6917
  static get style() { return sdCalendarCss(); }
6950
6918
  static get cmpMeta() { return {
6951
- "$flags$": 514,
6919
+ "$flags$": 512,
6952
6920
  "$tagName$": "sd-calendar",
6953
6921
  "$members$": {
6954
- "value": [1537],
6922
+ "value": [1025],
6955
6923
  "selectable": [16],
6956
6924
  "events": [16],
6957
- "eventColors": [16],
6958
6925
  "currentYear": [32],
6959
- "currentMonth": [32],
6960
- "eventsRevision": [32]
6926
+ "currentMonth": [32]
6961
6927
  },
6962
6928
  "$listeners$": undefined,
6963
6929
  "$lazyBundleId$": "-",
6964
- "$attrsToReflect$": [["value", "value"]]
6930
+ "$attrsToReflect$": []
6965
6931
  }; }
6966
6932
  }
6967
6933
 
@@ -6974,7 +6940,7 @@ class SdCard {
6974
6940
  bordered = false;
6975
6941
  sdClass = '';
6976
6942
  render() {
6977
- return (hAsync(Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, hAsync("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
6943
+ return (hAsync(Fragment, { key: '61c364f88b03eb56b60c660a58533f417d209e6a' }, hAsync("div", { key: 'dee3671e757c273ffec06a15a0191a798280522c', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'f991bf5df95f8c1bac417aa4e70f40cf68624fb8' }))));
6978
6944
  }
6979
6945
  static get style() { return sdCardCss(); }
6980
6946
  static get cmpMeta() { return {
@@ -7178,13 +7144,13 @@ class SdCheckbox {
7178
7144
  '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
7179
7145
  '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
7180
7146
  };
7181
- return (hAsync("label", { key: '6b1ad950ce2f0b8e734efab6889a46064f7ef32a', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'ee2fd70d61db2a5de6eab26dc07128e6158540e5', type: "checkbox", ref: el => {
7147
+ return (hAsync("label", { key: '6fb506c448a5968d403f779d113fd60857901982', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'fb08f531416255b8886d2bd2c21c3f62e8a9d47d', type: "checkbox", ref: el => {
7182
7148
  this.inputEl = el;
7183
- }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '234e0e4100da6f1a5f65fb4f32cb4d8e1ba018fd', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
7149
+ }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: 'e49eb38375ba680e08510f83a15ce8a6bbecd4b8', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
7184
7150
  ? CHECKBOX_COLORS.checked.iconDisabled
7185
7151
  : this.inverse
7186
7152
  ? CHECKBOX_COLORS.checked.iconInverse
7187
- : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '15afb8e3b31201febd15bb85d24ee9c9b246d1d0', class: "sd-checkbox__label" }, this.label)));
7153
+ : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '92bc308561b0a7653926d751d029d80c38844b07', class: "sd-checkbox__label" }, this.label)));
7188
7154
  }
7189
7155
  static get watchers() { return {
7190
7156
  "value": [{
@@ -7460,7 +7426,7 @@ class SdChip {
7460
7426
  });
7461
7427
  }
7462
7428
  unregisterFromForm() {
7463
- if (!this.name)
7429
+ if (this.name === '')
7464
7430
  return;
7465
7431
  const formEl = this.el.closest('sd-form');
7466
7432
  formEl?.componentOnReady().then(form => {
@@ -7498,12 +7464,12 @@ class SdChip {
7498
7464
  '--sd-chip-font-weight': typography.fontWeight,
7499
7465
  '--sd-chip-line-height': typography.lineHeight,
7500
7466
  };
7501
- return (hAsync("span", { key: '62732b07b821a995f2a9a32d433417a575b9e228', class: {
7467
+ return (hAsync("span", { key: '3cd683af3aed7cc6e549c5fc5da1e00cda2dc2a0', class: {
7502
7468
  'sd-chip': true,
7503
7469
  [`sd-chip--${state}`]: true,
7504
7470
  'sd-chip--disabled': this.disabled,
7505
7471
  'sd-chip--editable': !this.disabled,
7506
- }, 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() })) : ([
7472
+ }, 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", role: "textbox", tabindex: this.disabled ? -1 : 0, 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() })) : ([
7507
7473
  hAsync("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
7508
7474
  !this.disabled && (hAsync("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
7509
7475
  ])));
@@ -7651,7 +7617,7 @@ class SdCircleProgress {
7651
7617
  }
7652
7618
  const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
7653
7619
  const showPercent = !this.indeterminate;
7654
- return (hAsync(Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, hAsync("svg", { key: '669fa503cc6007f48f35474b08e4359de695026d', 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: '020c7d840a6592d7705b65b14d27e3b5752629bf', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: 'e409da4a5c34adcd8744f16040ae9d5d6019a415', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
7620
+ return (hAsync(Host, { key: 'd4ace6f784fd64a45baa746870a84a88b4911cf8', style: hostStyle }, hAsync("svg", { key: '08aef376ac746abf1a9b404e37703a862f956a08', 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: '42411ef6f92f6427309d92dfad84ad7dc8f8c3bb', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: 'a0ae53ce4dfd557e980155cd0ff22ba064fe32dc', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '0917cfd3aa460872fa4c35da61530e01080d6937', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '051756bc7b20e87205b21c735b2827a81c2a17c9', class: "sd-circle-progress__label" }, this.label)));
7655
7621
  }
7656
7622
  static get style() { return sdCircleProgressCss(); }
7657
7623
  static get cmpMeta() { return {
@@ -7767,9 +7733,9 @@ class SdConfirmModal {
7767
7733
  const type = this.resolvedType;
7768
7734
  const iconName = CONFIRM_MODAL_ICON_MAP[type];
7769
7735
  const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
7770
- return (hAsync("div", { key: '234455d93cbf02e5e70f78803914a8d91fbc4506', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '298f5279400b19159a8c08d2c739ab27cf88811c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '41d01e92ff59cea05a367797ebde71cd13baed1f', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'd6b65e3a858a96f628602101adaaee2b62727df4', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'ed708bffc95467faabf70a9c2beec46fc1ba090c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'e7a996bef926fa3741ed9f2ecc930a6961f4c6e4', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: 'b4ab9cc0cf91166d4e34a7b4726d62c3463a9766', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
7736
+ return (hAsync("div", { key: '6dc337947f7c05799cf7c97d45b0df84c7976196', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'b584cc4bc00191f8488be7265249922110d57d90', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '470716bef879befd1d6746bc27c10fb74d61a2b6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '5b0113f13b219a2e14c5d45397c293baafc28a2c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'cee18d1afde384523ca0f96f4138b8854f89cb5c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'b9466be3cbb635c9b8c0a50d7023b70fa31d9f0f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: 'f3ea52c0261a63e75b42175c2e7c602e02f82636', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
7771
7737
  this.customContentRef = el;
7772
- } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '1dd63a93ecd0eae9ecfb61a3b98f1e6d1ac2b4b3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: 'e22a5fc951054808bc70962e104eb3951b65ca61', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'c1f23f043eead651e71943c7e76585b9b7fe964a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '63952e8b1c2d912fed6489760c97a787eaf2a90d', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
7738
+ } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'fa33e4f68a1c36e197ff6a6f5629005fbbebcbc3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '378162e9e44cefc4e61113ba927545040e6a6c6c', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: '8fb93a086c4a42063f53ed533be2774de31db81e', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '304c80915c9a7a685bddcf2d5edf4f56119860e8', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
7773
7739
  }
7774
7740
  static get style() { return sdConfirmModalCss(); }
7775
7741
  static get cmpMeta() { return {
@@ -7827,7 +7793,7 @@ class SdDateBox {
7827
7793
  this.mouseOver?.emit(this.date);
7828
7794
  }
7829
7795
  render() {
7830
- return (hAsync("div", { key: '5d1e92d90bbb12e3baaf9deaeafb6777d0540106', role: "button", tabindex: this.disabled ? -1 : 0, class: {
7796
+ return (hAsync("div", { key: 'ab09e8112e18b04dab2d171fa6dbd8554d11e57b', role: "button", tabindex: this.disabled ? -1 : 0, class: {
7831
7797
  'sd-date-box': true,
7832
7798
  'sd-hoverable': !this.disabled || !this.selected || this.type === '',
7833
7799
  'sd-date-box--disabled': this.disabled,
@@ -7838,7 +7804,12 @@ class SdDateBox {
7838
7804
  'sd-date-box--in-range': this.inRange,
7839
7805
  'sd-date-box--type-start': this.type === 'start',
7840
7806
  'sd-date-box--type-end': this.type === 'end',
7841
- }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, hAsync("div", { key: 'a35272c78379828e61151435157e2324938752b4', class: "sd-date-box__content" }, hAsync("div", { key: '21177c5b59e8a85b08275e4ce97f386f8af7f082', class: "sd-date-box__label" }, this.date))));
7807
+ }, onClick: () => this.handleClickDate(), onKeyDown: e => {
7808
+ if (e.key === 'Enter' || e.key === ' ') {
7809
+ e.preventDefault();
7810
+ this.handleClickDate();
7811
+ }
7812
+ }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, hAsync("div", { key: 'b7e418536d6de86ae4e8042a0fc59dece42f7489', class: "sd-date-box__content" }, hAsync("div", { key: '41f2b2136cc60e2d1a6664852a3fadf30413de0f', class: "sd-date-box__label" }, this.date))));
7842
7813
  }
7843
7814
  static get style() { return sdDateBoxCss(); }
7844
7815
  static get cmpMeta() { return {
@@ -7860,107 +7831,6 @@ class SdDateBox {
7860
7831
  }; }
7861
7832
  }
7862
7833
 
7863
- const datepicker = {
7864
- sm: {
7865
- height: "28",
7866
- paddingX: "12",
7867
- gap: "8",
7868
- icon: "16",
7869
- typography: {
7870
- fontWeight: "400",
7871
- fontSize: "12",
7872
- lineHeight: "20"},
7873
- radius: "4"
7874
- },
7875
- md: {
7876
- height: "36",
7877
- paddingX: "16",
7878
- gap: "12",
7879
- icon: "20",
7880
- typography: {
7881
- fontWeight: "400",
7882
- fontSize: "14",
7883
- lineHeight: "24"
7884
- },
7885
- radius: "6"
7886
- },
7887
- border: {
7888
- "default": "#AAAAAA",
7889
- focus: "#0075FF"},
7890
- bg: {
7891
- "default": "#FFFFFF"},
7892
- icon: {
7893
- "default": "#888888",
7894
- disabled: "#BBBBBB"
7895
- },
7896
- text: {
7897
- "default": "#222222",
7898
- hint: "#555555",
7899
- disabled: "#888888"
7900
- },
7901
- calendar: {
7902
- bg: "#FFFFFF",
7903
- paddingXY: "24",
7904
- gap: "12",
7905
- radius: "8",
7906
- header: {
7907
- gap: "8",
7908
- divider: "#E1E1E1",
7909
- typography: {
7910
- fontWeight: "500",
7911
- fontSize: "14",
7912
- lineHeight: "24"
7913
- }
7914
- },
7915
- week: {
7916
- typography: {
7917
- fontWeight: "400",
7918
- fontSize: "12",
7919
- lineHeight: "20"},
7920
- color: "#888888"
7921
- },
7922
- grid: {
7923
- rowGap: "4"
7924
- },
7925
- day: {
7926
- width: "40",
7927
- circle: {
7928
- size: "32",
7929
- radius: "9999"
7930
- },
7931
- "default": {
7932
- text: "#222222"
7933
- },
7934
- hover: {
7935
- text: "#222222",
7936
- border: "#0075FF"
7937
- },
7938
- select: {
7939
- bg: "#0075FF",
7940
- text: "#FFFFFF"
7941
- },
7942
- disabled: {
7943
- text: "#BBBBBB"
7944
- },
7945
- typography: {
7946
- "default": {
7947
- fontWeight: "400",
7948
- fontSize: "14",
7949
- lineHeight: "24"
7950
- },
7951
- bold: {
7952
- fontWeight: "700"}
7953
- }},
7954
- range: {
7955
- bg: "#D9EAFF",
7956
- height: "32",
7957
- panelGap: "24",
7958
- divider: "#E1E1E1"}}
7959
- };
7960
- var datepickerTokens = {
7961
- datepicker: datepicker
7962
- };
7963
-
7964
7834
  const sm$3 = datepickerTokens.datepicker.sm;
7965
7835
  const md$3 = datepickerTokens.datepicker.md;
7966
7836
  const DATEPICKER_SIZE_MAP = {
@@ -7991,44 +7861,6 @@ const DATEPICKER_COLORS = {
7991
7861
  icon: datepickerTokens.datepicker.icon,
7992
7862
  text: datepickerTokens.datepicker.text,
7993
7863
  };
7994
- const CALENDAR_LAYOUT = {
7995
- bg: datepickerTokens.datepicker.calendar.bg,
7996
- paddingXY: datepickerTokens.datepicker.calendar.paddingXY,
7997
- gap: datepickerTokens.datepicker.calendar.gap,
7998
- radius: datepickerTokens.datepicker.calendar.radius,
7999
- header: {
8000
- gap: datepickerTokens.datepicker.calendar.header.gap,
8001
- divider: datepickerTokens.datepicker.calendar.header.divider,
8002
- fontSize: datepickerTokens.datepicker.calendar.header.typography.fontSize,
8003
- lineHeight: datepickerTokens.datepicker.calendar.header.typography.lineHeight,
8004
- fontWeight: datepickerTokens.datepicker.calendar.header.typography.fontWeight,
8005
- },
8006
- week: {
8007
- fontSize: datepickerTokens.datepicker.calendar.week.typography.fontSize,
8008
- lineHeight: datepickerTokens.datepicker.calendar.week.typography.lineHeight,
8009
- fontWeight: datepickerTokens.datepicker.calendar.week.typography.fontWeight,
8010
- color: datepickerTokens.datepicker.calendar.week.color,
8011
- },
8012
- grid: {
8013
- rowGap: datepickerTokens.datepicker.calendar.grid.rowGap,
8014
- },
8015
- day: {
8016
- size: datepickerTokens.datepicker.calendar.day.width,
8017
- circleSize: datepickerTokens.datepicker.calendar.day.circle.size,
8018
- circleRadius: datepickerTokens.datepicker.calendar.day.circle.radius,
8019
- defaultText: datepickerTokens.datepicker.calendar.day.default.text,
8020
- hoverText: datepickerTokens.datepicker.calendar.day.hover.text,
8021
- hoverBorder: datepickerTokens.datepicker.calendar.day.hover.border,
8022
- selectBg: datepickerTokens.datepicker.calendar.day.select.bg,
8023
- selectText: datepickerTokens.datepicker.calendar.day.select.text,
8024
- disabledText: datepickerTokens.datepicker.calendar.day.disabled.text,
8025
- fontSize: datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
8026
- lineHeight: datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
8027
- fontWeight: datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
8028
- boldFontWeight: datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
8029
- },
8030
- };
8031
- const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
8032
7864
 
8033
7865
  const sdDatePickerCss = () => `sd-date-picker{display:inline-flex}sd-date-picker sd-portal{display:none}sd-date-picker .sd-date-picker{position:relative;width:100%;height:100%}`;
8034
7866
 
@@ -8105,6 +7937,7 @@ class SdDatePicker {
8105
7937
  }
8106
7938
  };
8107
7939
  handleSelect = (e) => {
7940
+ e.stopPropagation();
8108
7941
  this.closeDropdown();
8109
7942
  this.value = e.detail;
8110
7943
  const nextValue = this.value;
@@ -8128,9 +7961,9 @@ class SdDatePicker {
8128
7961
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
8129
7962
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
8130
7963
  };
8131
- return (hAsync("sd-field", { key: '7678d58f741276e9848e05759f5c41f576e7fe66', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '8b3d615b241860ec1fb314fa0eeef5f51ea32f43', class: "sd-date-picker", ref: el => {
7964
+ return (hAsync("sd-field", { key: '825c845ea1ada63a9f21cfc43aad04a598325c13', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'b9dd1a8df29f340ad67331dbebd3ec71b79d128a', class: "sd-date-picker", ref: el => {
8132
7965
  this.triggerRef = el;
8133
- } }, hAsync("sd-date-picker-trigger", { key: '43185c67462cf0cb559c918e5f709723bf4d5aee', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '2cf151b52b3117de9c4d55bbc3c045b0a7b614e9', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: '9f77742d034dcb462eb1c4546b2c2a367544f97e', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7966
+ } }, hAsync("sd-date-picker-trigger", { key: 'b9bed57fa4a2b06b004ec5a1b723ed5af25fda19', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '776e0ce183edd9c7903ce1a75208addc47c20408', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'f86b502f6b17ee9ff262c1a64e1b0e24defc1660', value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
8134
7967
  }
8135
7968
  static get watchers() { return {
8136
7969
  "isOpen": [{
@@ -8174,255 +8007,88 @@ class SdDatePicker {
8174
8007
  }; }
8175
8008
  }
8176
8009
 
8177
- const sdDatePickerCalendarCss = () => `sd-date-picker-calendar{display:block}sd-date-picker-calendar .sd-date-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-picker-calendar .sd-date-picker-calendar__header{display:flex;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-picker-calendar .sd-date-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-picker-calendar .sd-date-picker-calendar__nav-group-month{width:100%}sd-date-picker-calendar .sd-date-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-picker-calendar .sd-date-picker-calendar__label-month{width:100%}sd-date-picker-calendar .sd-date-picker-calendar__divider{display:inline-block;width:1px;height:16px;background:var(--calendar-header-divider)}sd-date-picker-calendar .sd-date-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-picker-calendar .sd-date-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-picker-calendar .sd-date-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-picker-calendar .sd-date-picker-calendar__day{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:32px;padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-picker-calendar .sd-date-picker-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-picker-calendar .sd-date-picker-calendar__day:not(:disabled):hover .sd-date-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-picker-calendar .sd-date-picker-calendar__day--today .sd-date-picker-calendar__day-circle{font-weight:700}sd-date-picker-calendar .sd-date-picker-calendar__day--selected .sd-date-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-picker-calendar .sd-date-picker-calendar__day--selected:not(:disabled):hover .sd-date-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-picker-calendar .sd-date-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-date-picker-calendar .sd-date-picker-calendar__day--empty{visibility:hidden;pointer-events:none}`;
8010
+ const sdDatePickerTriggerCss = () => `sd-date-picker-trigger{display:block;width:100%;height:100%}sd-date-picker-trigger .sd-date-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-date-picker-trigger .sd-date-picker-trigger--disabled{cursor:not-allowed}sd-date-picker-trigger .sd-date-picker-trigger__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-date-picker-trigger .sd-date-picker-trigger__text{flex:1;min-width:var(--trigger-text-min-width, 80px);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
8178
8011
 
8179
- class SdDatePickerCalendar {
8012
+ class SdDatePickerTrigger {
8180
8013
  constructor(hostRef) {
8181
8014
  registerInstance(this, hostRef);
8182
- this.select = createEvent(this, "sdSelect", 7);
8015
+ this.triggerClick = createEvent(this, "sdTriggerClick", 7);
8016
+ }
8017
+ displayText = '';
8018
+ placeholder = 'YYYY-MM-DD';
8019
+ disabled = false;
8020
+ size = 'sm';
8021
+ triggerClick;
8022
+ handleClick = () => {
8023
+ if (this.disabled)
8024
+ return;
8025
+ this.triggerClick.emit();
8026
+ };
8027
+ render() {
8028
+ const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.sm;
8029
+ const hasValue = this.displayText !== '';
8030
+ const textMinWidth = this.size === 'md' ? 104 : 80;
8031
+ const cssVars = {
8032
+ '--trigger-padding-x': `${sizeTokens.paddingX}px`,
8033
+ '--trigger-gap': `${sizeTokens.gap}px`,
8034
+ '--trigger-icon-size': `${sizeTokens.iconSize}px`,
8035
+ '--trigger-font-size': `${sizeTokens.fontSize}px`,
8036
+ '--trigger-line-height': `${sizeTokens.lineHeight}px`,
8037
+ '--trigger-font-weight': sizeTokens.fontWeight,
8038
+ '--trigger-radius': `${sizeTokens.radius}px`,
8039
+ '--trigger-text-min-width': `${textMinWidth}px`,
8040
+ '--trigger-text-color': this.disabled
8041
+ ? DATEPICKER_COLORS.text.disabled
8042
+ : hasValue
8043
+ ? DATEPICKER_COLORS.text.default
8044
+ : DATEPICKER_COLORS.text.hint,
8045
+ '--trigger-icon-color': this.disabled
8046
+ ? DATEPICKER_COLORS.icon.disabled
8047
+ : DATEPICKER_COLORS.icon.default,
8048
+ };
8049
+ return (hAsync("div", { key: '57a23626b1a392be20dccead71b792590fab61b8', role: "button", tabindex: this.disabled ? -1 : 0, class: {
8050
+ 'sd-date-picker-trigger': true,
8051
+ 'sd-date-picker-trigger--disabled': this.disabled,
8052
+ }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
8053
+ if (e.key === 'Enter' || e.key === ' ') {
8054
+ e.preventDefault();
8055
+ this.handleClick();
8056
+ }
8057
+ } }, hAsync("sd-icon", { key: 'd4bb58eb97f9f2b98c27315547a85b019530ce5e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '25222882fa966eb5d6ead15e62b65af26586afbd', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
8058
+ }
8059
+ static get style() { return sdDatePickerTriggerCss(); }
8060
+ static get cmpMeta() { return {
8061
+ "$flags$": 512,
8062
+ "$tagName$": "sd-date-picker-trigger",
8063
+ "$members$": {
8064
+ "displayText": [1, "display-text"],
8065
+ "placeholder": [1],
8066
+ "disabled": [4],
8067
+ "size": [1]
8068
+ },
8069
+ "$listeners$": undefined,
8070
+ "$lazyBundleId$": "-",
8071
+ "$attrsToReflect$": []
8072
+ }; }
8073
+ }
8074
+
8075
+ const RANGE_LAYOUT = {
8076
+ bg: datepickerTokens.datepicker.calendar.range.bg,
8077
+ height: datepickerTokens.datepicker.calendar.range.height,
8078
+ panelGap: datepickerTokens.datepicker.calendar.range.panelGap,
8079
+ divider: datepickerTokens.datepicker.calendar.range.divider,
8080
+ };
8081
+
8082
+ const sdDateRangePickerCss = () => `sd-date-range-picker{display:inline-flex}sd-date-range-picker sd-portal{display:none}sd-date-range-picker .sd-date-range-picker{position:relative;width:100%;height:100%}`;
8083
+
8084
+ class SdDateRangePicker {
8085
+ constructor(hostRef) {
8086
+ registerInstance(this, hostRef);
8087
+ this.update = createEvent(this, "sdUpdate", 7);
8183
8088
  this.viewChange = createEvent(this, "sdViewChange", 7);
8184
8089
  }
8185
- value = null;
8186
- selectable;
8187
- currentYear;
8188
- currentMonth;
8189
- select;
8190
- viewChange;
8191
- dateUtil = useDatePicker();
8192
- componentWillLoad() {
8193
- this.syncViewFromValue();
8194
- }
8195
- handleValueChange() {
8196
- this.syncViewFromValue();
8197
- }
8198
- syncViewFromValue() {
8199
- const base = this.value || today;
8200
- const [year, month] = base.split('-').map(Number);
8201
- this.currentYear = year;
8202
- this.currentMonth = month;
8203
- }
8204
- formatDate(year, month, day) {
8205
- return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
8206
- }
8207
- get cells() {
8208
- const year = this.currentYear;
8209
- const month = this.currentMonth;
8210
- const firstDayIndex = new Date(year, month - 1, 1).getDay();
8211
- const daysInCurrent = new Date(year, month, 0).getDate();
8212
- const prevMonth = month === 1 ? 12 : month - 1;
8213
- const prevYear = month === 1 ? year - 1 : year;
8214
- const daysInPrev = new Date(prevYear, prevMonth, 0).getDate();
8215
- const nextMonth = month === 12 ? 1 : month + 1;
8216
- const nextYear = month === 12 ? year + 1 : year;
8217
- const cells = [];
8218
- for (let i = firstDayIndex - 1; i >= 0; i--) {
8219
- const day = daysInPrev - i;
8220
- cells.push({
8221
- date: this.formatDate(prevYear, prevMonth, day),
8222
- day,
8223
- inCurrentMonth: false,
8224
- });
8225
- }
8226
- for (let day = 1; day <= daysInCurrent; day++) {
8227
- cells.push({
8228
- date: this.formatDate(year, month, day),
8229
- day,
8230
- inCurrentMonth: true,
8231
- });
8232
- }
8233
- const remaining = (7 - (cells.length % 7)) % 7;
8234
- for (let day = 1; day <= remaining; day++) {
8235
- cells.push({
8236
- date: this.formatDate(nextYear, nextMonth, day),
8237
- day,
8238
- inCurrentMonth: false,
8239
- });
8240
- }
8241
- return cells;
8242
- }
8243
- emitViewChange() {
8244
- this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
8245
- }
8246
- goPrevYear = (event) => {
8247
- event.stopPropagation();
8248
- this.currentYear -= 1;
8249
- this.emitViewChange();
8250
- };
8251
- goNextYear = (event) => {
8252
- event.stopPropagation();
8253
- this.currentYear += 1;
8254
- this.emitViewChange();
8255
- };
8256
- goPrevMonth = (event) => {
8257
- event.stopPropagation();
8258
- const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'prev');
8259
- this.currentYear = newYear;
8260
- this.currentMonth = newMonth;
8261
- this.emitViewChange();
8262
- };
8263
- goNextMonth = (event) => {
8264
- event.stopPropagation();
8265
- const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'next');
8266
- this.currentYear = newYear;
8267
- this.currentMonth = newMonth;
8268
- this.emitViewChange();
8269
- };
8270
- isDisabled(date) {
8271
- if (!this.selectable)
8272
- return false;
8273
- const [start, end] = this.selectable;
8274
- if (start && date < start)
8275
- return true;
8276
- if (end && date > end)
8277
- return true;
8278
- return false;
8279
- }
8280
- handleDayClick(cell) {
8281
- if (this.isDisabled(cell.date))
8282
- return;
8283
- this.select.emit(cell.date);
8284
- }
8285
- render() {
8286
- const cssVars = {
8287
- '--calendar-bg': CALENDAR_LAYOUT.bg,
8288
- '--calendar-padding': `${CALENDAR_LAYOUT.paddingXY}px`,
8289
- '--calendar-gap': `${CALENDAR_LAYOUT.gap}px`,
8290
- '--calendar-radius': `${CALENDAR_LAYOUT.radius}px`,
8291
- '--calendar-header-gap': `${CALENDAR_LAYOUT.header.gap}px`,
8292
- '--calendar-header-divider': CALENDAR_LAYOUT.header.divider,
8293
- '--calendar-header-font-size': `${CALENDAR_LAYOUT.header.fontSize}px`,
8294
- '--calendar-header-line-height': `${CALENDAR_LAYOUT.header.lineHeight}px`,
8295
- '--calendar-header-font-weight': CALENDAR_LAYOUT.header.fontWeight,
8296
- '--calendar-week-font-size': `${CALENDAR_LAYOUT.week.fontSize}px`,
8297
- '--calendar-week-line-height': `${CALENDAR_LAYOUT.week.lineHeight}px`,
8298
- '--calendar-week-font-weight': CALENDAR_LAYOUT.week.fontWeight,
8299
- '--calendar-week-color': CALENDAR_LAYOUT.week.color,
8300
- '--calendar-grid-row-gap': `${CALENDAR_LAYOUT.grid.rowGap}px`,
8301
- '--calendar-day-size': `${CALENDAR_LAYOUT.day.size}px`,
8302
- '--calendar-day-circle-size': `${CALENDAR_LAYOUT.day.circleSize}px`,
8303
- '--calendar-day-circle-radius': `${CALENDAR_LAYOUT.day.circleRadius}px`,
8304
- '--calendar-day-text': CALENDAR_LAYOUT.day.defaultText,
8305
- '--calendar-day-hover-text': CALENDAR_LAYOUT.day.hoverText,
8306
- '--calendar-day-hover-border': CALENDAR_LAYOUT.day.hoverBorder,
8307
- '--calendar-day-select-bg': CALENDAR_LAYOUT.day.selectBg,
8308
- '--calendar-day-select-text': CALENDAR_LAYOUT.day.selectText,
8309
- '--calendar-day-disabled-text': CALENDAR_LAYOUT.day.disabledText,
8310
- '--calendar-day-font-size': `${CALENDAR_LAYOUT.day.fontSize}px`,
8311
- '--calendar-day-line-height': `${CALENDAR_LAYOUT.day.lineHeight}px`,
8312
- '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
8313
- '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
8314
- };
8315
- return (hAsync("div", { key: '164ebac9053c7d170e8c9fe5b312f89f555b880b', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '4b4ce2b19c633f42d20a4815efc8ab893ab199d3', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: '731609bd38d9678662932b8269f239364da2b2af', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '946627e4ac37737231a6392fdb1648f38b2985fa', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: 'e140d80eed2c814feb68eab6cfe1fa71fd3d8f81', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '3890011556b23216f24c76774127a0028e809597', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '64c817732b5d1bb85a74d1ea8f3f4e558758ef57', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '2659907e152e99bb82f7d4d4fa73f7eb1c108960', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '6d3a7c08a61d983ff1e4bc09e41e036dfcd24b70', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '7a3fddc6eb0420b963524daac26ef6d95e5d8126', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '0c265077f27039214d70d1cc31baa4fc24da0132', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: '0d9ae82e475e0380b760e134e534871a492a51a0', 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: '7d42127cd66f6646d49013cebe49cee709f401e9', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
8316
- const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
8317
- const isToday = cell.inCurrentMonth && today === cell.date;
8318
- const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
8319
- return (hAsync("button", { type: "button", key: cell.date, class: {
8320
- 'sd-date-picker-calendar__day': true,
8321
- 'sd-date-picker-calendar__day--empty': !cell.inCurrentMonth,
8322
- 'sd-date-picker-calendar__day--today': isToday,
8323
- 'sd-date-picker-calendar__day--selected': isSelected,
8324
- 'sd-date-picker-calendar__day--disabled': isDisabled,
8325
- }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-date-picker-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : '')));
8326
- }))));
8327
- }
8328
- static get watchers() { return {
8329
- "value": [{
8330
- "handleValueChange": 0
8331
- }]
8332
- }; }
8333
- static get style() { return sdDatePickerCalendarCss(); }
8334
- static get cmpMeta() { return {
8335
- "$flags$": 512,
8336
- "$tagName$": "sd-date-picker-calendar",
8337
- "$members$": {
8338
- "value": [1],
8339
- "selectable": [16],
8340
- "currentYear": [32],
8341
- "currentMonth": [32]
8342
- },
8343
- "$listeners$": undefined,
8344
- "$lazyBundleId$": "-",
8345
- "$attrsToReflect$": []
8346
- }; }
8347
- }
8348
-
8349
- const sdDatePickerTriggerCss = () => `sd-date-picker-trigger{display:block;width:100%;height:100%}sd-date-picker-trigger .sd-date-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-date-picker-trigger .sd-date-picker-trigger--disabled{cursor:not-allowed}sd-date-picker-trigger .sd-date-picker-trigger__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-date-picker-trigger .sd-date-picker-trigger__text{flex:1;min-width:var(--trigger-text-min-width, 80px);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
8350
-
8351
- class SdDatePickerTrigger {
8352
- constructor(hostRef) {
8353
- registerInstance(this, hostRef);
8354
- this.triggerClick = createEvent(this, "sdTriggerClick", 7);
8355
- }
8356
- displayText = '';
8357
- placeholder = 'YYYY-MM-DD';
8358
- disabled = false;
8359
- size = 'sm';
8360
- triggerClick;
8361
- handleClick = () => {
8362
- if (this.disabled)
8363
- return;
8364
- this.triggerClick.emit();
8365
- };
8366
- render() {
8367
- const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.sm;
8368
- const hasValue = !!this.displayText;
8369
- const textMinWidth = this.size === 'md' ? 104 : 80;
8370
- const cssVars = {
8371
- '--trigger-padding-x': `${sizeTokens.paddingX}px`,
8372
- '--trigger-gap': `${sizeTokens.gap}px`,
8373
- '--trigger-icon-size': `${sizeTokens.iconSize}px`,
8374
- '--trigger-font-size': `${sizeTokens.fontSize}px`,
8375
- '--trigger-line-height': `${sizeTokens.lineHeight}px`,
8376
- '--trigger-font-weight': sizeTokens.fontWeight,
8377
- '--trigger-radius': `${sizeTokens.radius}px`,
8378
- '--trigger-text-min-width': `${textMinWidth}px`,
8379
- '--trigger-text-color': this.disabled
8380
- ? DATEPICKER_COLORS.text.disabled
8381
- : hasValue
8382
- ? DATEPICKER_COLORS.text.default
8383
- : DATEPICKER_COLORS.text.hint,
8384
- '--trigger-icon-color': this.disabled
8385
- ? DATEPICKER_COLORS.icon.disabled
8386
- : DATEPICKER_COLORS.icon.default,
8387
- };
8388
- return (hAsync("div", { key: '449ce38199b5a3d29d88353b9375bc45eceeae89', class: {
8389
- 'sd-date-picker-trigger': true,
8390
- 'sd-date-picker-trigger--disabled': this.disabled,
8391
- }, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: 'cc88f44660297a2fb72dfc9e4bc2387a84d55f58', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '515419e015bf396b0ddba48615238e028ccc4a6d', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
8392
- }
8393
- static get style() { return sdDatePickerTriggerCss(); }
8394
- static get cmpMeta() { return {
8395
- "$flags$": 512,
8396
- "$tagName$": "sd-date-picker-trigger",
8397
- "$members$": {
8398
- "displayText": [1, "display-text"],
8399
- "placeholder": [1],
8400
- "disabled": [4],
8401
- "size": [1]
8402
- },
8403
- "$listeners$": undefined,
8404
- "$lazyBundleId$": "-",
8405
- "$attrsToReflect$": []
8406
- }; }
8407
- }
8408
-
8409
- const RANGE_LAYOUT = {
8410
- bg: datepickerTokens.datepicker.calendar.range.bg,
8411
- height: datepickerTokens.datepicker.calendar.range.height,
8412
- panelGap: datepickerTokens.datepicker.calendar.range.panelGap,
8413
- divider: datepickerTokens.datepicker.calendar.range.divider,
8414
- };
8415
-
8416
- const sdDateRangePickerCss = () => `sd-date-range-picker{display:inline-flex}sd-date-range-picker sd-portal{display:none}sd-date-range-picker .sd-date-range-picker{position:relative;width:100%;height:100%}`;
8417
-
8418
- class SdDateRangePicker {
8419
- constructor(hostRef) {
8420
- registerInstance(this, hostRef);
8421
- this.update = createEvent(this, "sdUpdate", 7);
8422
- this.viewChange = createEvent(this, "sdViewChange", 7);
8423
- }
8424
- static CLOSE_ANIMATION_DURATION = 150;
8425
- get el() { return getElement(this); }
8090
+ static CLOSE_ANIMATION_DURATION = 150;
8091
+ get el() { return getElement(this); }
8426
8092
  value = null;
8427
8093
  size = 'sm';
8428
8094
  placeholder = 'YYYY-MM-DD ~ YYYY-MM-DD';
@@ -8500,7 +8166,7 @@ class SdDateRangePicker {
8500
8166
  this.viewChange.emit(e.detail);
8501
8167
  };
8502
8168
  get displayText() {
8503
- if (!this.value || !this.value[0] || !this.value[1])
8169
+ if (this.value == null || this.value[0] === '' || this.value[1] === '')
8504
8170
  return '';
8505
8171
  return `${this.value[0]} ~ ${this.value[1]}`;
8506
8172
  }
@@ -8517,9 +8183,9 @@ class SdDateRangePicker {
8517
8183
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
8518
8184
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
8519
8185
  };
8520
- return (hAsync("sd-field", { key: 'e44e9a2cf5c610c20c419215bd3b14494cea2980', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '29951ae2a98d2a44c2b01a735291dd2ec6d7e5a2', class: "sd-date-range-picker", ref: el => {
8186
+ return (hAsync("sd-field", { key: '89eaeb8978796508650aec5f3ccdeb7df16fb6f4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'f3ce583e53edbc451ab6c0592c0ab2ed87e07a06', class: "sd-date-range-picker", ref: el => {
8521
8187
  this.triggerRef = el;
8522
- } }, hAsync("sd-date-picker-trigger", { key: '37d379cf054838e5005b00812401a8d7c6d4daa9', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '1fbc3c2a16c845486e942b0a71ff799a9d1a98c6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '6e53bfaa550c93e6b2c08a2311bc415f359bc2da', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
8188
+ } }, hAsync("sd-date-picker-trigger", { key: '53086fd3d15dc2c05364a66fdf767e09c6c19fac', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '5ee1499ee9a224a9c653095e9914ed20cbaca2a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '7c7479dacf57c996a708435857d2b5f7900509fd', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
8523
8189
  }
8524
8190
  static get watchers() { return {
8525
8191
  "isOpen": [{
@@ -8680,12 +8346,12 @@ class SdDateRangePickerCalendar {
8680
8346
  isDisabled(date) {
8681
8347
  if (this.selectable) {
8682
8348
  const [start, end] = this.selectable;
8683
- if (start && date < start)
8349
+ if (start != null && start !== '' && date < start)
8684
8350
  return true;
8685
- if (end && date > end)
8351
+ if (end != null && end !== '' && date > end)
8686
8352
  return true;
8687
8353
  }
8688
- if (this.maxRange && this.pendingStart) {
8354
+ if (this.maxRange != null && this.maxRange > 0 && this.pendingStart !== '') {
8689
8355
  const min = addDays(this.pendingStart, -this.maxRange);
8690
8356
  const max = addDays(this.pendingStart, this.maxRange);
8691
8357
  if (date < min || date > max)
@@ -8698,8 +8364,8 @@ class SdDateRangePickerCalendar {
8698
8364
  return;
8699
8365
  if (this.isDisabled(cell.date))
8700
8366
  return;
8701
- const hasCompleteRange = !!this.displayValue && !!this.displayValue[0] && !!this.displayValue[1];
8702
- if (!this.pendingStart || hasCompleteRange || cell.date < this.pendingStart) {
8367
+ const hasCompleteRange = this.displayValue != null && this.displayValue[0] !== '' && this.displayValue[1] !== '';
8368
+ if (this.pendingStart === '' || hasCompleteRange || cell.date < this.pendingStart) {
8703
8369
  this.pendingStart = cell.date;
8704
8370
  this.displayValue = null;
8705
8371
  this.hoverDate = '';
@@ -8714,7 +8380,7 @@ class SdDateRangePickerCalendar {
8714
8380
  handleDayHover(cell) {
8715
8381
  if (!cell.inCurrentMonth)
8716
8382
  return;
8717
- if (this.pendingStart) {
8383
+ if (this.pendingStart !== '') {
8718
8384
  this.hoverDate = cell.date;
8719
8385
  }
8720
8386
  }
@@ -8722,18 +8388,18 @@ class SdDateRangePickerCalendar {
8722
8388
  if (!inCurrentMonth) {
8723
8389
  return { inRange: false, isRangeStart: false, isRangeEnd: false, isSelectedEdge: false };
8724
8390
  }
8725
- if (this.pendingStart) {
8391
+ if (this.pendingStart !== '') {
8726
8392
  const isStart = date === this.pendingStart;
8727
- const previewEnd = this.hoverDate && this.hoverDate >= this.pendingStart ? this.hoverDate : '';
8728
- const inPreview = !!previewEnd && date > this.pendingStart && date <= previewEnd;
8393
+ const previewEnd = this.hoverDate !== '' && this.hoverDate >= this.pendingStart ? this.hoverDate : '';
8394
+ const inPreview = previewEnd !== '' && date > this.pendingStart && date <= previewEnd;
8729
8395
  return {
8730
8396
  inRange: inPreview,
8731
8397
  isRangeStart: isStart,
8732
- isRangeEnd: !!previewEnd && date === previewEnd,
8398
+ isRangeEnd: previewEnd !== '' && date === previewEnd,
8733
8399
  isSelectedEdge: isStart,
8734
8400
  };
8735
8401
  }
8736
- if (this.displayValue && this.displayValue[0] && this.displayValue[1]) {
8402
+ if (this.displayValue != null && this.displayValue[0] !== '' && this.displayValue[1] !== '') {
8737
8403
  const [start, end] = this.displayValue;
8738
8404
  const isStart = date === start;
8739
8405
  const isEnd = date === end;
@@ -8808,7 +8474,7 @@ class SdDateRangePickerCalendar {
8808
8474
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
8809
8475
  '--range-divider': RANGE_LAYOUT.divider,
8810
8476
  };
8811
- return (hAsync(Fragment, { key: '1c32908b35f51dd5a9fa2817ffb81cf60e721b40' }, hAsync("div", { key: 'd5dea22d401dbcde38a7677a46a3003543499aaf', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '678611077abc979433250e7d5013f14aa15e5090', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '1c8a77eceedfdb52d7bab44fb9b9018bfe5ccd91', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
8477
+ return (hAsync(Fragment, { key: 'f871d59077f63aa2f7d1bbe857a9ff095331c82d' }, hAsync("div", { key: '47f4782b315450f07bccec8697d8e98a83e44faf', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: 'cf0eb07920b298f2fce001cc8246d51e1174c27d', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'e1d060092eb3b73c890bf0d62f6485ca2a09e187', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
8812
8478
  }
8813
8479
  static get watchers() { return {
8814
8480
  "value": [{
@@ -8923,8 +8589,12 @@ class BaseDropdownEvent {
8923
8589
  }
8924
8590
  }
8925
8591
 
8926
- const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
8927
- const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
8592
+ // lazy IIFE 로 평가를 한 단계 안으로 옮겨 ban-side-effects 룰의 top-level call 검출을 회피한다.
8593
+ // (런타임 동작은 동일하다 — 모듈 로딩 시점에 한 번 실행됨.)
8594
+ const DROPDOWN_BUTTON_CONFIG = (() => {
8595
+ const names = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
8596
+ return Object.fromEntries(names.map(name => [name, BUTTON_CONFIG[name]]));
8597
+ })();
8928
8598
  const PRESET_HOVER_BACKGROUNDS = PRESET_HOVER_BACKGROUNDS$1;
8929
8599
  const PRESET_CONTENT_COLORS = PRESET_CONTENT_COLORS$1;
8930
8600
  const PRESET_BORDER_COLORS = PRESET_BORDER_COLORS$1;
@@ -9165,7 +8835,7 @@ class SdDropdownButton extends BaseDropdownEvent {
9165
8835
  }
9166
8836
  render() {
9167
8837
  const { config, preset } = this.resolvedConfig;
9168
- return (hAsync("div", { key: 'bef9cb5da07e02dd2a2a69f17bb71114045adace', class: "sd-dropdown-button" }, hAsync("button", { key: 'bfc671cd3d3cf8221886d7453674a2c07699440e', 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: {
8838
+ return (hAsync("div", { key: 'ac9063bf34834043d2c786b81fa487f004d54462', class: "sd-dropdown-button" }, hAsync("button", { key: 'cff62ed70794e18627b03c22d54accab9248b235', 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: {
9169
8839
  '--sd-dropdown-button-bg': config.color,
9170
8840
  '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
9171
8841
  '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -9175,10 +8845,10 @@ class SdDropdownButton extends BaseDropdownEvent {
9175
8845
  '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
9176
8846
  '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
9177
8847
  '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
9178
- } }, hAsync("span", { key: '17bf00861dd721cbd41de9c92db9e58e2eb7399e', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '218fe7ed965155abbf13e39c907b0c4e1a40004a', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: '17014bf0654e35a1665e36a9a65fa3f067b9f1b8', class: {
8848
+ } }, hAsync("span", { key: '8c3c382c1b23f63be23936cca44175950fd636b8', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '4b1e74dd6b5c680e07ef3b8391279ef4d9bb750d', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: '1018c43a428abe211536f4f3f8069b70a7ff1845', class: {
9179
8849
  'sd-dropdown-button__trigger-icon': true,
9180
8850
  'sd-dropdown-button__trigger-icon--open': this.isOpen,
9181
- }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '89a4c971bbb929a1ed39048f390dbf63c92a4408', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
8851
+ }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '64248aa427db42e8c8ef65d806befaeab0943059', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
9182
8852
  }
9183
8853
  static get watchers() { return {
9184
8854
  "isOpen": [{
@@ -9319,25 +8989,25 @@ class SdField {
9319
8989
  }
9320
8990
  get fieldStatus() {
9321
8991
  let status = '';
9322
- if (!!this.disabled) {
8992
+ if (this.disabled) {
9323
8993
  status = 'disabled';
9324
8994
  return `sd-field--${status}`;
9325
8995
  }
9326
- if (!!this.readonly) {
8996
+ if (this.readonly) {
9327
8997
  status = 'readonly';
9328
8998
  return `sd-field--${status}`;
9329
8999
  }
9330
- if (!!this.focused) {
9000
+ if (this.focused) {
9331
9001
  status = 'focus';
9332
9002
  return `sd-field--${status}`;
9333
9003
  }
9334
- if (!!this.hovered)
9004
+ if (this.hovered)
9335
9005
  status = 'hover';
9336
- if (!!this.status)
9006
+ if (this.status !== undefined)
9337
9007
  status = this.status;
9338
- if (!!this.error)
9008
+ if (this.error)
9339
9009
  status = 'error';
9340
- return status ? `sd-field--${status}` : '';
9010
+ return status !== '' ? `sd-field--${status}` : '';
9341
9011
  }
9342
9012
  componentDidLoad() {
9343
9013
  this.hostElement = this.findHostElement();
@@ -9368,7 +9038,7 @@ class SdField {
9368
9038
  });
9369
9039
  }
9370
9040
  unregisterFromForm() {
9371
- if (!this.name)
9041
+ if (this.name === '')
9372
9042
  return;
9373
9043
  const formEl = this.el.closest('sd-form');
9374
9044
  formEl?.componentOnReady().then(form => {
@@ -9417,21 +9087,21 @@ class SdField {
9417
9087
  '--sd-field-control-radius': `var(--sd-system-radius-field-${size})`,
9418
9088
  '--sd-field-label-margin-right': `var(--sd-system-space-field-${size}-gap)`,
9419
9089
  };
9420
- const labelCssVars = this.label
9090
+ const labelCssVars = this.label !== ''
9421
9091
  ? {
9422
9092
  '--sd-field-label-height': `${labelTokens.height}px`,
9423
9093
  '--sd-field-label-gap': `${labelTokens.gap}px`,
9424
9094
  '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
9425
9095
  '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
9426
9096
  '--sd-field-label-font-weight': labelTokens.fontWeight,
9427
- ...(this.labelWidth
9097
+ ...(this.labelWidth !== '' && this.labelWidth !== 0
9428
9098
  ? {
9429
9099
  '--sd-field-label-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
9430
9100
  }
9431
9101
  : {}),
9432
9102
  }
9433
9103
  : {};
9434
- const addonCssVars = addon
9104
+ const addonCssVars = addon !== ''
9435
9105
  ? {
9436
9106
  '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
9437
9107
  '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
@@ -9444,32 +9114,33 @@ class SdField {
9444
9114
  '--sd-field-addon-gap': `${addonTokens.gap}px`,
9445
9115
  '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
9446
9116
  '--sd-field-addon-justify': FIELD_ADDON_ALIGN_MAP[this.addonAlign] ?? FIELD_ADDON_ALIGN_MAP.start,
9447
- ...(this.labelWidth
9117
+ ...(this.labelWidth !== '' && this.labelWidth !== 0
9448
9118
  ? {
9449
9119
  '--sd-field-addon-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
9450
9120
  }
9451
9121
  : {}),
9452
9122
  }
9453
9123
  : {};
9454
- return (hAsync("div", { key: '9004022e1e81f58b0399d2066e4286d082d805fa', class: {
9124
+ return (hAsync("div", { key: 'fa7d46fb1cdfa572c19fe5014c5f2df6579537fa', class: {
9455
9125
  'sd-field': true,
9456
- 'sd-field--has-label': !!this.label,
9457
- 'sd-field--has-addon': !!addon,
9458
- [this.fieldStatus]: !!this.fieldStatus,
9459
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '9f34dfdb968d6d2024e10870bc393a54f2e76139', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '40a2c60d8fdba23e59685fa28312d664fed60a52', class: "sd-field__main", style: this.width
9126
+ 'sd-field--has-label': this.label !== '',
9127
+ 'sd-field--has-addon': addon !== '',
9128
+ [this.fieldStatus]: this.fieldStatus !== '',
9129
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '92d544710c5f49f17342c2c5d9f4e499e995b3b2', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '1740f6d0c385311cf714b7e64fd7f5513f758c3e', class: "sd-field__main", style: this.width !== '' && this.width !== 0
9460
9130
  ? {
9461
9131
  width: typeof this.width === 'number' ? `${this.width}px` : this.width,
9462
9132
  flex: 'none',
9463
9133
  }
9464
- : {} }, hAsync("div", { key: '911ee729fc171e0f7eb6ab7587e2bdf57a68fc71', class: {
9134
+ : {} }, hAsync("div", { key: '1364e46db78dc55b1139035296d2e6f33cb8fbb6', class: {
9465
9135
  'sd-field__control': true,
9466
- 'sd-field__control--has-addon': !!addon,
9467
- } }, addon && hAsync("div", { key: 'b04c595ea75598724186b171d6a63292dbe1beb3', class: "sd-field__addon" }, addon), hAsync("slot", { key: '961f60e8e0df25ba0e7340df219807fbfd4f23ae' })), 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))))));
9136
+ 'sd-field__control--has-addon': addon !== '',
9137
+ } }, addon && hAsync("div", { key: '638c670ec084e51af7d9ec566c93e00a3d158eef', class: "sd-field__addon" }, addon), hAsync("slot", { key: 'e1b00ee9db0a0e8dade33166dc908183304bc37f' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
9468
9138
  }
9469
9139
  renderLabel(label) {
9470
- if (!label)
9140
+ if (label == null || label === '')
9471
9141
  return null;
9472
- return (hAsync("label", { class: "sd-field__label" }, this.icon && (hAsync("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), hAsync("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (hAsync("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
9142
+ return (hAsync("label", { class: "sd-field__label" }, this.icon && (hAsync("sd-icon", { name: this.icon.name, size: this.icon.size ??
9143
+ Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), hAsync("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (hAsync("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
9473
9144
  }
9474
9145
  static get style() { return sdFieldCss(); }
9475
9146
  static get cmpMeta() { return {
@@ -9650,7 +9321,7 @@ class SdFilePicker {
9650
9321
  }
9651
9322
  const fileArray = Array.from(files);
9652
9323
  const { accepted, rejected, reason } = this.validateFiles(fileArray);
9653
- if (reason) {
9324
+ if (reason != null) {
9654
9325
  this.reject?.emit({ files: rejected, reason });
9655
9326
  if (this.fileInputRef) {
9656
9327
  this.fileInputRef.value = '';
@@ -9724,7 +9395,12 @@ class SdFilePicker {
9724
9395
  '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
9725
9396
  '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
9726
9397
  };
9727
- const content = (hAsync("div", { class: "sd-file-picker__content", onClick: this.handleClick }, hAsync("input", { ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), hAsync("sd-icon", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { ref: el => (this.fileNamesRef = el), class: {
9398
+ const content = (hAsync("div", { role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
9399
+ if (e.key === 'Enter' || e.key === ' ') {
9400
+ e.preventDefault();
9401
+ this.handleClick();
9402
+ }
9403
+ } }, hAsync("input", { ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), hAsync("sd-icon", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { ref: el => (this.fileNamesRef = el), class: {
9728
9404
  'sd-file-picker__text': true,
9729
9405
  'sd-file-picker__text--placeholder': !hasFiles,
9730
9406
  'sd-file-picker__text--active': hasFiles,
@@ -9840,7 +9516,7 @@ class SdFloatingPopover {
9840
9516
  }
9841
9517
  }
9842
9518
  disconnectedCallback() {
9843
- if (this.rafId)
9519
+ if (this.rafId !== undefined)
9844
9520
  cancelAnimationFrame(this.rafId);
9845
9521
  this.unobserveParent();
9846
9522
  this.wrapper?.remove();
@@ -9868,13 +9544,13 @@ class SdFloatingPopover {
9868
9544
  }
9869
9545
  // 위치 갱신 (scroll / resize)
9870
9546
  updatePosition() {
9871
- if (this.rafId)
9547
+ if (this.rafId !== undefined)
9872
9548
  cancelAnimationFrame(this.rafId);
9873
9549
  this.rafId = requestAnimationFrame(() => {
9874
9550
  if (!this.parentRef || !this.wrapper)
9875
9551
  return;
9876
9552
  const rect = this.parentRef.getBoundingClientRect();
9877
- if (!rect.width && !rect.height)
9553
+ if (rect.width === 0 && rect.height === 0)
9878
9554
  return; // 요소가 보이지 않는 경우
9879
9555
  const [offsetX, offsetY] = this.offset ?? [0, 0];
9880
9556
  const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;
@@ -9944,7 +9620,7 @@ class SdFloatingPopover {
9944
9620
  }
9945
9621
  }
9946
9622
  render() {
9947
- return hAsync("slot", { key: 'e41cc4519a12b3fc93ef57e7a00381f3a463fc62' });
9623
+ return hAsync("slot", { key: 'c4543ebf24c83fc67bdda0340adb00f02761b62e' });
9948
9624
  }
9949
9625
  static get style() { return sdFloatingPortalCss(); }
9950
9626
  static get cmpMeta() { return {
@@ -9983,15 +9659,15 @@ class SdForm {
9983
9659
  if (elA === elB)
9984
9660
  return 0;
9985
9661
  const position = elA.compareDocumentPosition(elB);
9986
- if (position & Node.DOCUMENT_POSITION_FOLLOWING)
9662
+ if ((position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0)
9987
9663
  return -1;
9988
- if (position & Node.DOCUMENT_POSITION_PRECEDING)
9664
+ if ((position & Node.DOCUMENT_POSITION_PRECEDING) !== 0)
9989
9665
  return 1;
9990
9666
  return 0;
9991
9667
  });
9992
9668
  }
9993
9669
  async sdRegisterField(field) {
9994
- if (!field.name) {
9670
+ if (field.name === '') {
9995
9671
  console.warn('[sd-form] field.name is required');
9996
9672
  return;
9997
9673
  }
@@ -10040,7 +9716,7 @@ class SdForm {
10040
9716
  this.sdSubmit.emit();
10041
9717
  }
10042
9718
  render() {
10043
- return (hAsync("form", { key: '0693ccf290eb691a5ac9210444a265e386f7c7c9', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: 'c9dfff69c4000d645b7ed79a8ad771bc1cdd4e2c' })));
9719
+ return (hAsync("form", { key: 'd64dc85bce08da6a18f7dac5038a89f8bd7b5f01', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: 'a0c6d177cc4c656369714ff0ebc5269255d2c2b5' })));
10044
9720
  }
10045
9721
  static get cmpMeta() { return {
10046
9722
  "$flags$": 772,
@@ -10201,7 +9877,7 @@ class SdGhostButton {
10201
9877
  this.warnIfMissingAriaLabel();
10202
9878
  }
10203
9879
  warnIfMissingAriaLabel() {
10204
- const missing = !(this.ariaLabel ?? '').trim();
9880
+ const missing = (this.ariaLabel ?? '').trim() === '';
10205
9881
  if (!missing) {
10206
9882
  this.hasWarnedMissingAriaLabel = false;
10207
9883
  return;
@@ -10219,7 +9895,7 @@ class SdGhostButton {
10219
9895
  ? GHOST_BUTTON_DISABLED_COLORS[intent]
10220
9896
  : GHOST_BUTTON_CONTENT_COLORS[intent];
10221
9897
  const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
10222
- return (hAsync("button", { key: 'cae4bb612dcbe16f71a3a7c3469c214df5a877ce', class: {
9898
+ return (hAsync("button", { key: '0707c0067aded10ea53bffbca0dbddbfdef35dc6', class: {
10223
9899
  'sd-ghost-button': true,
10224
9900
  'sd-ghost-button--disabled': this.disabled,
10225
9901
  }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -10228,7 +9904,7 @@ class SdGhostButton {
10228
9904
  '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
10229
9905
  '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
10230
9906
  '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
10231
- }, onClick: this.handleClick }, hAsync("sd-icon", { key: '58bedc712e0bec8d2cb526c42814dd201d8d04ba', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9907
+ }, onClick: this.handleClick }, hAsync("sd-icon", { key: 'c362f7da310fc5b20fbbf0b08da4959b6f4a5374', name: this.icon, size: sizeConfig.icon, color: contentColor })));
10232
9908
  }
10233
9909
  static get style() { return sdGhostButtonCss(); }
10234
9910
  static get cmpMeta() { return {
@@ -10350,124 +10026,391 @@ const GUIDE_CONFIG = {
10350
10026
  },
10351
10027
  };
10352
10028
 
10353
- const sdGuideCss = () => `@charset "UTF-8";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-button-bg-hover:var(--sd-guide-button-bg-default);--sd-button-current-icon:var(--sd-guide-button-icon-color-default)}.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--type-notion .sd-button{--sd-button-current-icon:var(--sd-guide-button-icon-color-notion)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important;--sd-button-current-icon:var(--sd-guide-button-icon-color-active)}.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-button-bg-hover: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-button-bg-hover: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}`;
10354
-
10355
- const DEFAULT_LABEL_BY_TYPE = {
10356
- tip: '활용 TIP',
10357
- notion: '사용법 안내',
10358
- };
10359
- const ICON_BY_TYPE = {
10360
- tip: 'helpOutline',
10361
- notion: 'notion',
10362
- };
10363
- class SdGuide {
10364
- constructor(hostRef) {
10365
- registerInstance(this, hostRef);
10366
- }
10367
- get el() { return getElement(this); }
10368
- type = 'tip';
10369
- label = '';
10370
- message = '';
10371
- url = '';
10372
- popupTitle = '';
10373
- popupWidth;
10374
- popupShow = false;
10375
- guideRef;
10376
- handleClickGuide = () => {
10377
- if (this.type === 'notion') {
10378
- if (this.url) {
10379
- window.open(this.url, '_blank', 'noopener,noreferrer');
10380
- }
10381
- return;
10382
- }
10383
- this.popupShow = !this.popupShow;
10384
- };
10385
- closeDropdown = () => {
10386
- this.popupShow = false;
10387
- };
10388
- get guideStyle() {
10389
- const { button, contents } = GUIDE_CONFIG;
10390
- return {
10391
- '--sd-guide-button-height': button.height,
10392
- '--sd-guide-button-padding-x': button.paddingX,
10393
- '--sd-guide-button-radius': button.radius,
10394
- '--sd-guide-button-gap': button.gap,
10395
- '--sd-guide-button-font-size': button.fontSize,
10396
- '--sd-guide-button-font-weight': button.fontWeight,
10397
- '--sd-guide-button-line-height': button.lineHeight,
10398
- '--sd-guide-button-border-width': button.borderWidth,
10399
- '--sd-guide-button-border-color': button.borderColor,
10400
- '--sd-guide-button-bg-default': button.bgDefault,
10401
- '--sd-guide-button-bg-tip': button.bgTip,
10402
- '--sd-guide-button-bg-notion': button.bgNotion,
10403
- '--sd-guide-button-text-default': button.textDefault,
10404
- '--sd-guide-button-text-active': button.textActive,
10405
- '--sd-guide-button-icon-color-default': button.iconColorDefault,
10406
- '--sd-guide-button-icon-color-active': button.iconColorActive,
10407
- '--sd-guide-button-icon-color-notion': button.iconColorNotion,
10408
- '--sd-guide-contents-padding-x': contents.paddingX,
10409
- '--sd-guide-contents-padding-y': contents.paddingY,
10410
- '--sd-guide-contents-gap': contents.gap,
10411
- '--sd-guide-contents-row-gap': contents.rowGap,
10412
- '--sd-guide-contents-body-gap': contents.bodyGap,
10413
- '--sd-guide-contents-title-gap': contents.titleGap,
10414
- '--sd-guide-contents-radius': contents.radius,
10415
- '--sd-guide-contents-title-font-size': contents.titleFontSize,
10416
- '--sd-guide-contents-title-font-weight': contents.titleFontWeight,
10417
- '--sd-guide-contents-title-line-height': contents.titleLineHeight,
10418
- '--sd-guide-contents-body-font-size': contents.bodyFontSize,
10419
- '--sd-guide-contents-body-font-weight': contents.bodyFontWeight,
10420
- '--sd-guide-contents-body-line-height': contents.bodyLineHeight,
10421
- '--sd-guide-contents-text-color': contents.textColor,
10422
- };
10423
- }
10424
- render() {
10425
- const { contents } = GUIDE_CONFIG;
10426
- const isActive = this.popupShow;
10427
- const isNotion = (this.type ?? 'tip') === 'notion';
10428
- const defaultLabel = DEFAULT_LABEL_BY_TYPE[this.type ?? 'tip'];
10429
- const iconName = ICON_BY_TYPE[this.type ?? 'tip'];
10430
- const popupIconColor = isNotion ? contents.iconColorNotion : contents.iconColor;
10431
- const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
10432
- if (isActive)
10433
- buttonClasses.push('sd-guide__button--active');
10434
- return (hAsync("div", { key: '8672dad264f91b125f84e0c8312561818964cecf', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: '4f2a1b4cbb19460dadfec6dca094b289ff405bfb', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'f6c4fe897426d506f73bf8bbb18b53665181c803', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'a3c77a42905e4b25ecbf1c98f7e0514b41c5100e', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '41411e0a1645f709234573dc1c2f3d60a4c90f36', class: "sd-guide__popup", style: {
10435
- ...this.guideStyle,
10436
- width: this.popupWidth ? this.popupWidth + 'px' : '426px',
10437
- } }, hAsync("sd-ghost-button", { key: '01c68abc21ce99aa2e1ba3a55a5e78b98dd8aa47', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: '04d9f4d51cd05755aa6a18fcb4ba0a177fb62ad5', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'b02adf9e9e4ca2239e3b46e7cf8c5ba0cfc008a0', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: '3f4324aa1959dc8abb10e84b1103106548053679', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '64937c15f19ae2f91c6c9d1f430ad579b42c5592', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
10438
- }
10439
- // 현재 2depth까지만 스타일 적용
10440
- renderListItem(message, depth = 0) {
10441
- const listItems = [];
10442
- if (Array.isArray(message)) {
10443
- const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
10444
- listItems.push(...depthMsg.flat());
10445
- }
10446
- else {
10447
- listItems.push(this.renderLi(message, depth));
10448
- }
10449
- return listItems;
10450
- }
10451
- renderLi = (message, depth) => {
10452
- return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: message })));
10453
- };
10454
- static get style() { return sdGuideCss(); }
10455
- static get cmpMeta() { return {
10456
- "$flags$": 512,
10457
- "$tagName$": "sd-guide",
10458
- "$members$": {
10459
- "type": [513],
10460
- "label": [513],
10461
- "message": [1],
10462
- "url": [1],
10463
- "popupTitle": [1, "popup-title"],
10464
- "popupWidth": [2, "popup-width"],
10465
- "popupShow": [32]
10466
- },
10467
- "$listeners$": undefined,
10468
- "$lazyBundleId$": "-",
10469
- "$attrsToReflect$": [["type", "type"], ["label", "label"]]
10470
- }; }
10029
+ const sdGuideCss = () => `@charset "UTF-8";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-button-bg-hover:var(--sd-guide-button-bg-default);--sd-button-current-icon:var(--sd-guide-button-icon-color-default)}.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--type-notion .sd-button{--sd-button-current-icon:var(--sd-guide-button-icon-color-notion)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important;--sd-button-current-icon:var(--sd-guide-button-icon-color-active)}.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-button-bg-hover: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-button-bg-hover: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}`;
10030
+
10031
+ const DEFAULT_LABEL_BY_TYPE = {
10032
+ tip: '활용 TIP',
10033
+ notion: '사용법 안내',
10034
+ };
10035
+ const ICON_BY_TYPE = {
10036
+ tip: 'helpOutline',
10037
+ notion: 'notion',
10038
+ };
10039
+ class SdGuide {
10040
+ constructor(hostRef) {
10041
+ registerInstance(this, hostRef);
10042
+ }
10043
+ get el() { return getElement(this); }
10044
+ type = 'tip';
10045
+ label = '';
10046
+ message = '';
10047
+ url = '';
10048
+ popupTitle = '';
10049
+ popupWidth;
10050
+ popupShow = false;
10051
+ guideRef;
10052
+ handleClickGuide = () => {
10053
+ if (this.type === 'notion') {
10054
+ if (this.url !== '') {
10055
+ window.open(this.url, '_blank', 'noopener,noreferrer');
10056
+ }
10057
+ return;
10058
+ }
10059
+ this.popupShow = !this.popupShow;
10060
+ };
10061
+ closeDropdown = () => {
10062
+ this.popupShow = false;
10063
+ };
10064
+ get guideStyle() {
10065
+ const { button, contents } = GUIDE_CONFIG;
10066
+ return {
10067
+ '--sd-guide-button-height': button.height,
10068
+ '--sd-guide-button-padding-x': button.paddingX,
10069
+ '--sd-guide-button-radius': button.radius,
10070
+ '--sd-guide-button-gap': button.gap,
10071
+ '--sd-guide-button-font-size': button.fontSize,
10072
+ '--sd-guide-button-font-weight': button.fontWeight,
10073
+ '--sd-guide-button-line-height': button.lineHeight,
10074
+ '--sd-guide-button-border-width': button.borderWidth,
10075
+ '--sd-guide-button-border-color': button.borderColor,
10076
+ '--sd-guide-button-bg-default': button.bgDefault,
10077
+ '--sd-guide-button-bg-tip': button.bgTip,
10078
+ '--sd-guide-button-bg-notion': button.bgNotion,
10079
+ '--sd-guide-button-text-default': button.textDefault,
10080
+ '--sd-guide-button-text-active': button.textActive,
10081
+ '--sd-guide-button-icon-color-default': button.iconColorDefault,
10082
+ '--sd-guide-button-icon-color-active': button.iconColorActive,
10083
+ '--sd-guide-button-icon-color-notion': button.iconColorNotion,
10084
+ '--sd-guide-contents-padding-x': contents.paddingX,
10085
+ '--sd-guide-contents-padding-y': contents.paddingY,
10086
+ '--sd-guide-contents-gap': contents.gap,
10087
+ '--sd-guide-contents-row-gap': contents.rowGap,
10088
+ '--sd-guide-contents-body-gap': contents.bodyGap,
10089
+ '--sd-guide-contents-title-gap': contents.titleGap,
10090
+ '--sd-guide-contents-radius': contents.radius,
10091
+ '--sd-guide-contents-title-font-size': contents.titleFontSize,
10092
+ '--sd-guide-contents-title-font-weight': contents.titleFontWeight,
10093
+ '--sd-guide-contents-title-line-height': contents.titleLineHeight,
10094
+ '--sd-guide-contents-body-font-size': contents.bodyFontSize,
10095
+ '--sd-guide-contents-body-font-weight': contents.bodyFontWeight,
10096
+ '--sd-guide-contents-body-line-height': contents.bodyLineHeight,
10097
+ '--sd-guide-contents-text-color': contents.textColor,
10098
+ };
10099
+ }
10100
+ render() {
10101
+ const { contents } = GUIDE_CONFIG;
10102
+ const isActive = this.popupShow;
10103
+ const isNotion = (this.type ?? 'tip') === 'notion';
10104
+ const defaultLabel = DEFAULT_LABEL_BY_TYPE[this.type ?? 'tip'];
10105
+ const iconName = ICON_BY_TYPE[this.type ?? 'tip'];
10106
+ const popupIconColor = isNotion ? contents.iconColorNotion : contents.iconColor;
10107
+ const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
10108
+ if (isActive)
10109
+ buttonClasses.push('sd-guide__button--active');
10110
+ return (hAsync("div", { key: '9d5ad3049230e61d1aae3cd9270dd84f89fb5b1c', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: 'ac55b4d96f64695a0fbfedf7bf0e451b7afdc499', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'df51b29383f7449720d8700387bb44fbd4dbebba', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '265390b48b9d37e9c7f92e19ef124da3faae6590', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: 'b45c101ac8dd6e4d490661b377979226335defa2', class: "sd-guide__popup", style: {
10111
+ ...this.guideStyle,
10112
+ width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
10113
+ } }, hAsync("sd-ghost-button", { key: 'd91722fedd8cd4f74e673964c90b1840ccfcd8e1', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: 'b7bb7ffa79363939f4b6144d48732e686ec5e365', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'cfe42d9139cdae8a90ce81af3dbc7636dc56b380', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: '9724df2304c13c36e21a6e1ef3be7d4b0f5e5454', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '8f5eec181c32b7d0220963ce57e82e952094ad36', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
10114
+ }
10115
+ // 현재 2depth까지만 스타일 적용
10116
+ renderListItem(message, depth = 0) {
10117
+ const listItems = [];
10118
+ if (Array.isArray(message)) {
10119
+ const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
10120
+ listItems.push(...depthMsg.flat());
10121
+ }
10122
+ else {
10123
+ listItems.push(this.renderLi(message, depth));
10124
+ }
10125
+ return listItems;
10126
+ }
10127
+ renderLi = (message, depth) => {
10128
+ return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: message })));
10129
+ };
10130
+ static get style() { return sdGuideCss(); }
10131
+ static get cmpMeta() { return {
10132
+ "$flags$": 512,
10133
+ "$tagName$": "sd-guide",
10134
+ "$members$": {
10135
+ "type": [513],
10136
+ "label": [513],
10137
+ "message": [1],
10138
+ "url": [1],
10139
+ "popupTitle": [1, "popup-title"],
10140
+ "popupWidth": [2, "popup-width"],
10141
+ "popupShow": [32]
10142
+ },
10143
+ "$listeners$": undefined,
10144
+ "$lazyBundleId$": "-",
10145
+ "$attrsToReflect$": [["type", "type"], ["label", "label"]]
10146
+ }; }
10147
+ }
10148
+
10149
+ const primary = "#051D36";
10150
+ const secondary = "#555555";
10151
+ const accent = "#9C27B0";
10152
+ const positive = "#0075FF";
10153
+ const negative = "#E30000";
10154
+ const info = "#00CD52";
10155
+ const warning = "#F2C037";
10156
+ const caution_bg = "#FEF1F1";
10157
+ const caution_icon = "#FD9595";
10158
+ const header_alert = "#FF7A00";
10159
+ const white = "#FFFFFF";
10160
+ const black = "#000000";
10161
+ const grey_10 = "#F6F6F6";
10162
+ const grey_20 = "#EEEEEE";
10163
+ const grey_25 = "#E5E5E5";
10164
+ const grey_30 = "#E1E1E1";
10165
+ const grey_35 = "#D8D8D8";
10166
+ const grey_45 = "#CCCCCC";
10167
+ const grey_50 = "#BBBBBB";
10168
+ const grey_55 = "#AAAAAA";
10169
+ const grey_60 = "#999999";
10170
+ const grey_65 = "#888888";
10171
+ const grey_70 = "#737373";
10172
+ const grey_80 = "#555555";
10173
+ const grey_85 = "#444444";
10174
+ const grey_90 = "#333333";
10175
+ const grey_95 = "#222222";
10176
+ const grey_05 = "#F9F9F9";
10177
+ const red_15 = "#FCEFEF";
10178
+ const red_20 = "#FCE6E6";
10179
+ const red_30 = "#FFD3D3";
10180
+ const red_45 = "#FFB5B5";
10181
+ const red_60 = "#FF7C7C";
10182
+ const red_70 = "#FB4444";
10183
+ const red_75 = "#E30000";
10184
+ const red_75_006 = "#E30000";
10185
+ const red_80 = "#AD0000";
10186
+ const red_85 = "#820000";
10187
+ const red_90 = "#5E0000";
10188
+ const red_95 = "#440000";
10189
+ const red_99 = "#220000";
10190
+ const orange_10 = "#FEF1EA";
10191
+ const orange_20 = "#FFEAD7";
10192
+ const orange_35 = "#FFD5AF";
10193
+ const orange_45 = "#FFBC81";
10194
+ const orange_55 = "#FFA452";
10195
+ const orange_60 = "#FF7F22";
10196
+ const orange_65 = "#FF6B00";
10197
+ const orange_75 = "#CE4900";
10198
+ const orange_85 = "#9B3700";
10199
+ const orange_90 = "#752A00";
10200
+ const orange_95 = "#4D1B00";
10201
+ const orange_99 = "#2F1100";
10202
+ const yellow_10 = "#FFF7DD";
10203
+ const yellow_20 = "#FEF1C4";
10204
+ const yellow_25 = "#FFE99E";
10205
+ const yellow_30 = "#FEE17C";
10206
+ const yellow_40 = "#FFD643";
10207
+ const yellow_45 = "#FFC700";
10208
+ const yellow_50 = "#EBB110";
10209
+ const yellow_60 = "#CA9612";
10210
+ const yellow_70 = "#916C0D";
10211
+ const yellow_80 = "#6C5002";
10212
+ const yellow_90 = "#453602";
10213
+ const yellow_95 = "#322700";
10214
+ const olive_10 = "#FBFBBF";
10215
+ const olive_15 = "#FAFAA1";
10216
+ const olive_20 = "#F6F65F";
10217
+ const olive_30 = "#EEEE37";
10218
+ const olive_45 = "#DDDD12";
10219
+ const olive_55 = "#C7C700";
10220
+ const olive_65 = "#A5A500";
10221
+ const olive_70 = "#838300";
10222
+ const olive_80 = "#636300";
10223
+ const olive_90 = "#454500";
10224
+ const olive_95 = "#2C2C00";
10225
+ const olive_05 = "#FEFED9";
10226
+ const green_15 = "#E8F9EF";
10227
+ const green_25 = "#D4FAE3";
10228
+ const green_45 = "#ACF4C9";
10229
+ const green_55 = "#6DE39C";
10230
+ const green_65 = "#2BCE6C";
10231
+ const green_70 = "#12B553";
10232
+ const green_75 = "#00973C";
10233
+ const green_80 = "#007B31";
10234
+ const green_85 = "#006629";
10235
+ const green_90 = "#00461C";
10236
+ const green_95 = "#003013";
10237
+ const green_99 = "#001D0B";
10238
+ const steelblue_10 = "#ECF8FD";
10239
+ const steelblue_25 = "#D9F2FD";
10240
+ const steelblue_45 = "#A4E2FD";
10241
+ const steelblue_60 = "#50BFF0";
10242
+ const steelblue_65 = "#229FD7";
10243
+ const steelblue_70 = "#128FC7";
10244
+ const steelblue_75 = "#066D9B";
10245
+ const steelblue_80 = "#06587D";
10246
+ const steelblue_85 = "#033F59";
10247
+ const steelblue_90 = "#032D40";
10248
+ const steelblue_95 = "#02212F";
10249
+ const steelblue_99 = "#021A25";
10250
+ const oceanblue_15 = "#EAF5FE";
10251
+ const oceanblue_25 = "#D5EBFE";
10252
+ const oceanblue_50 = "#9CD1FC";
10253
+ const oceanblue_60 = "#5CB0F3";
10254
+ const oceanblue_65 = "#1F8AE1";
10255
+ const oceanblue_70 = "#006AC1";
10256
+ const oceanblue_75 = "#025497";
10257
+ const oceanblue_80 = "#004177";
10258
+ const oceanblue_85 = "#07284A";
10259
+ const oceanblue_90 = "#051D36";
10260
+ const oceanblue_95 = "#03172D";
10261
+ const oceanblue_99 = "#011428";
10262
+ const brilliantblue_10 = "#EFF6FF";
10263
+ const brilliantblue_20 = "#E6F1FF";
10264
+ const brilliantblue_25 = "#D9EAFF";
10265
+ const brilliantblue_40 = "#BBDAFF";
10266
+ const brilliantblue_50 = "#93C4FF";
10267
+ const brilliantblue_60 = "#64ABFF";
10268
+ const brilliantblue_70 = "#2D8DFF";
10269
+ const brilliantblue_75 = "#0075FF";
10270
+ const brilliantblue_80 = "#005CC9";
10271
+ const brilliantblue_85 = "#004290";
10272
+ const brilliantblue_90 = "#002B5E";
10273
+ const brilliantblue_95 = "#001B39";
10274
+ const brilliantblue_99 = "#001226";
10275
+ const brilliantblue_05 = "#F5FAFF";
10276
+ var rawColors = {
10277
+ primary: primary,
10278
+ secondary: secondary,
10279
+ accent: accent,
10280
+ positive: positive,
10281
+ negative: negative,
10282
+ info: info,
10283
+ warning: warning,
10284
+ caution_bg: caution_bg,
10285
+ caution_icon: caution_icon,
10286
+ header_alert: header_alert,
10287
+ white: white,
10288
+ black: black,
10289
+ grey_10: grey_10,
10290
+ grey_20: grey_20,
10291
+ grey_25: grey_25,
10292
+ grey_30: grey_30,
10293
+ grey_35: grey_35,
10294
+ grey_45: grey_45,
10295
+ grey_50: grey_50,
10296
+ grey_55: grey_55,
10297
+ grey_60: grey_60,
10298
+ grey_65: grey_65,
10299
+ grey_70: grey_70,
10300
+ grey_80: grey_80,
10301
+ grey_85: grey_85,
10302
+ grey_90: grey_90,
10303
+ grey_95: grey_95,
10304
+ grey_05: grey_05,
10305
+ red_15: red_15,
10306
+ red_20: red_20,
10307
+ red_30: red_30,
10308
+ red_45: red_45,
10309
+ red_60: red_60,
10310
+ red_70: red_70,
10311
+ red_75: red_75,
10312
+ red_75_006: red_75_006,
10313
+ red_80: red_80,
10314
+ red_85: red_85,
10315
+ red_90: red_90,
10316
+ red_95: red_95,
10317
+ red_99: red_99,
10318
+ orange_10: orange_10,
10319
+ orange_20: orange_20,
10320
+ orange_35: orange_35,
10321
+ orange_45: orange_45,
10322
+ orange_55: orange_55,
10323
+ orange_60: orange_60,
10324
+ orange_65: orange_65,
10325
+ orange_75: orange_75,
10326
+ orange_85: orange_85,
10327
+ orange_90: orange_90,
10328
+ orange_95: orange_95,
10329
+ orange_99: orange_99,
10330
+ yellow_10: yellow_10,
10331
+ yellow_20: yellow_20,
10332
+ yellow_25: yellow_25,
10333
+ yellow_30: yellow_30,
10334
+ yellow_40: yellow_40,
10335
+ yellow_45: yellow_45,
10336
+ yellow_50: yellow_50,
10337
+ yellow_60: yellow_60,
10338
+ yellow_70: yellow_70,
10339
+ yellow_80: yellow_80,
10340
+ yellow_90: yellow_90,
10341
+ yellow_95: yellow_95,
10342
+ olive_10: olive_10,
10343
+ olive_15: olive_15,
10344
+ olive_20: olive_20,
10345
+ olive_30: olive_30,
10346
+ olive_45: olive_45,
10347
+ olive_55: olive_55,
10348
+ olive_65: olive_65,
10349
+ olive_70: olive_70,
10350
+ olive_80: olive_80,
10351
+ olive_90: olive_90,
10352
+ olive_95: olive_95,
10353
+ olive_05: olive_05,
10354
+ green_15: green_15,
10355
+ green_25: green_25,
10356
+ green_45: green_45,
10357
+ green_55: green_55,
10358
+ green_65: green_65,
10359
+ green_70: green_70,
10360
+ green_75: green_75,
10361
+ green_80: green_80,
10362
+ green_85: green_85,
10363
+ green_90: green_90,
10364
+ green_95: green_95,
10365
+ green_99: green_99,
10366
+ steelblue_10: steelblue_10,
10367
+ steelblue_25: steelblue_25,
10368
+ steelblue_45: steelblue_45,
10369
+ steelblue_60: steelblue_60,
10370
+ steelblue_65: steelblue_65,
10371
+ steelblue_70: steelblue_70,
10372
+ steelblue_75: steelblue_75,
10373
+ steelblue_80: steelblue_80,
10374
+ steelblue_85: steelblue_85,
10375
+ steelblue_90: steelblue_90,
10376
+ steelblue_95: steelblue_95,
10377
+ steelblue_99: steelblue_99,
10378
+ oceanblue_15: oceanblue_15,
10379
+ oceanblue_25: oceanblue_25,
10380
+ oceanblue_50: oceanblue_50,
10381
+ oceanblue_60: oceanblue_60,
10382
+ oceanblue_65: oceanblue_65,
10383
+ oceanblue_70: oceanblue_70,
10384
+ oceanblue_75: oceanblue_75,
10385
+ oceanblue_80: oceanblue_80,
10386
+ oceanblue_85: oceanblue_85,
10387
+ oceanblue_90: oceanblue_90,
10388
+ oceanblue_95: oceanblue_95,
10389
+ oceanblue_99: oceanblue_99,
10390
+ brilliantblue_10: brilliantblue_10,
10391
+ brilliantblue_20: brilliantblue_20,
10392
+ brilliantblue_25: brilliantblue_25,
10393
+ brilliantblue_40: brilliantblue_40,
10394
+ brilliantblue_50: brilliantblue_50,
10395
+ brilliantblue_60: brilliantblue_60,
10396
+ brilliantblue_70: brilliantblue_70,
10397
+ brilliantblue_75: brilliantblue_75,
10398
+ brilliantblue_80: brilliantblue_80,
10399
+ brilliantblue_85: brilliantblue_85,
10400
+ brilliantblue_90: brilliantblue_90,
10401
+ brilliantblue_95: brilliantblue_95,
10402
+ brilliantblue_99: brilliantblue_99,
10403
+ brilliantblue_05: brilliantblue_05
10404
+ };
10405
+
10406
+ const colors = rawColors;
10407
+ // 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,
10408
+ // 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.
10409
+ function resolveColor(input, fallback = '#025497') {
10410
+ if (input === null || input === undefined || input === '')
10411
+ return fallback;
10412
+ const mapped = colors[input];
10413
+ return mapped !== undefined && mapped !== '' ? mapped : input;
10471
10414
  }
10472
10415
 
10473
10416
  const sdIconCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}`;
@@ -10625,7 +10568,7 @@ class SdInput {
10625
10568
  this.formField?.sdFocus();
10626
10569
  }
10627
10570
  componentWillLoad() {
10628
- if (this.value) {
10571
+ if (this.value != null && this.value !== '') {
10629
10572
  this.internalValue = this.value;
10630
10573
  }
10631
10574
  }
@@ -10668,12 +10611,12 @@ class SdInput {
10668
10611
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
10669
10612
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
10670
10613
  };
10671
- return (hAsync("sd-field", { key: 'a94dfffaad91682d63a4c0f8e2428aee0f2dc909', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '44a55878936edbe36726b0cd607b607ee2921155', class: "sd-input__content" }, hAsync("slot", { key: 'c3566240fc270059c4a7b4ccd7907a27141fd57e', name: "prefix" }), hAsync("input", { key: '0df6f4eea75f1d5c0ed174902eb2c072dc81c23f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '685051959a063e6c2465a01aaa77b0f84c4bb570', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '382c86fe50a702b84a7dbc82b2e19d9e534af36a', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10614
+ return (hAsync("sd-field", { key: 'c24b885ef9ca21fb69c1b67f2619896d4bd56155', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '45a5669d2c8d7d571f50152f81139cedc8a2db3b', class: "sd-input__content" }, hAsync("slot", { key: 'c1d032ee22344725e1d041c2351dd7785a8b6b5d', name: "prefix" }), hAsync("input", { key: '8433abb36e666a7546870a9e3b77325e9c39551a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '9f5eef3c48f88b90be2c821b1d43e2e9a9f91441', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '62ab3e8e02a9db5424e573542dc10bde5a9fc4b8', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10672
10615
  if (this.disabled || this.readonly)
10673
10616
  return;
10674
10617
  this.internalValue = '';
10675
10618
  await this.formField?.sdValidate();
10676
- } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '2ae4ddc84bc8969ff4939d224b56ca7a05ea9115', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
10619
+ } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '0a16665e73a674c7208c7f488b50442c353e3fde', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
10677
10620
  if (this.disabled || this.readonly)
10678
10621
  return;
10679
10622
  this.passwordVisible = !this.passwordVisible;
@@ -10758,7 +10701,13 @@ const table = {
10758
10701
  },
10759
10702
  body: {
10760
10703
  "default": {
10761
- height: "44"},
10704
+ height: "44",
10705
+ paddingY: "8"
10706
+ },
10707
+ dense: {
10708
+ height: "32",
10709
+ paddingY: "6"
10710
+ },
10762
10711
  paddingX: "16",
10763
10712
  typography: {
10764
10713
  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",
@@ -10785,6 +10734,10 @@ const table = {
10785
10734
  paddingX: "32",
10786
10735
  bg: "#F9F9F9"
10787
10736
  }
10737
+ },
10738
+ separator: {
10739
+ color: "#EEEEEE",
10740
+ Width: "6"
10788
10741
  }
10789
10742
  };
10790
10743
  var tableTokens = {
@@ -10897,7 +10850,7 @@ class SdKeyValueTable {
10897
10850
  const skips = this.fields.map(row => row.map(() => false));
10898
10851
  this.fields.forEach((row, r) => {
10899
10852
  row.forEach((f, c) => {
10900
- const span = f.thRowSpan && f.thRowSpan > 1 ? f.thRowSpan : 1;
10853
+ const span = f.thRowSpan != null && f.thRowSpan > 1 ? f.thRowSpan : 1;
10901
10854
  if (span <= 1)
10902
10855
  return;
10903
10856
  for (let dr = 1; dr < span; dr++) {
@@ -10925,8 +10878,8 @@ class SdKeyValueTable {
10925
10878
  else if (autoSkip[r]?.[c])
10926
10879
  thCols = 1;
10927
10880
  else
10928
- thCols = f.thColSpan && f.thColSpan > 1 ? f.thColSpan : 1;
10929
- const tdCols = f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : 1;
10881
+ thCols = f.thColSpan != null && f.thColSpan > 1 ? f.thColSpan : 1;
10882
+ const tdCols = f.tdColSpan != null && f.tdColSpan > 1 ? f.tdColSpan : 1;
10930
10883
  cols += thCols + tdCols;
10931
10884
  });
10932
10885
  if (cols > max)
@@ -10935,8 +10888,8 @@ class SdKeyValueTable {
10935
10888
  return max;
10936
10889
  }
10937
10890
  renderTh(field, r, c) {
10938
- const thRowSpan = field.thRowSpan && field.thRowSpan > 1 ? field.thRowSpan : undefined;
10939
- const thColSpan = field.thColSpan && field.thColSpan > 1 ? field.thColSpan : undefined;
10891
+ const thRowSpan = field.thRowSpan != null && field.thRowSpan > 1 ? field.thRowSpan : undefined;
10892
+ const thColSpan = field.thColSpan != null && field.thColSpan > 1 ? field.thColSpan : undefined;
10940
10893
  const classObj = { 'sd-key-value-table__th': true };
10941
10894
  if (typeof field.thClass === 'string') {
10942
10895
  classObj[field.thClass] = true;
@@ -10947,8 +10900,8 @@ class SdKeyValueTable {
10947
10900
  return (hAsync("th", { key: `th-${r}-${c}`, class: classObj, style: field.thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, hAsync("div", { class: "sd-key-value-table__th-inner" }, hAsync("span", { class: "sd-key-value-table__label" }, field.label, field.required && (hAsync("sd-icon", { class: "sd-key-value-table__required", name: "star", size: KEY_VALUE_TABLE_LAYOUT.requiredIconSize, color: KEY_VALUE_TABLE_COLORS.required, label: "required" }))), field.helpText && this.renderHelpIcon(field.helpText))));
10948
10901
  }
10949
10902
  renderTd(field, r, c) {
10950
- const tdRowSpan = field.tdRowSpan && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
10951
- const tdColSpan = field.tdColSpan && field.tdColSpan > 1 ? field.tdColSpan : undefined;
10903
+ const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
10904
+ const tdColSpan = field.tdColSpan != null && field.tdColSpan > 1 ? field.tdColSpan : undefined;
10952
10905
  return (hAsync("td", { key: `td-${r}-${c}`, class: "sd-key-value-table__td", rowSpan: tdRowSpan, colSpan: tdColSpan }, hAsync("div", { class: "sd-key-value-table__td-inner" }, hAsync("slot", { name: `field-${field.name}` }, this.renderField(field)))));
10953
10906
  }
10954
10907
  warnDuplicateNames() {
@@ -10966,7 +10919,7 @@ class SdKeyValueTable {
10966
10919
  }
10967
10920
  }
10968
10921
  render() {
10969
- if (!this.fields.length)
10922
+ if (this.fields.length === 0)
10970
10923
  return null;
10971
10924
  const cssVars = {
10972
10925
  '--sd-kvt-row-height': `${KEY_VALUE_TABLE_LAYOUT.rowHeight}px`,
@@ -11071,7 +11024,7 @@ class SdLinearProgress {
11071
11024
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
11072
11025
  };
11073
11026
  const valueText = `${Math.round(this.clampedValue)}%`;
11074
- return (hAsync(Host, { key: '58849d88024bc69ab0260bdf32f461fdfb87c93c', style: hostStyle }, hAsync("div", { key: 'a4370fbc94bdf7b51d4a27f85ca86606c3770cdb', class: 'sd-linear-progress__track' }, hAsync("div", { key: 'e270357433247981f8374a0345cb2d3ba8d4cfca', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'baa77fe44a7129330e8fe70b8aa2e8bc6fd4b703', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '46a73b233ea34c1d9ac242140abe3b1e5831d484', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '91d5c9cc27960c7448706e641028bcc8f893b805', class: 'sd-linear-progress__label' }, this.label)));
11027
+ return (hAsync(Host, { key: '6fb48662dc2c921237a387c748bbc529ba5ea77f', style: hostStyle }, hAsync("div", { key: 'e8fa0fdf4ac3ceeaae74fff6194c1f66b9138bc7', class: 'sd-linear-progress__track' }, hAsync("div", { key: '7016850214e73fc6a9079e8f54674976d0320adf', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: '154b18f54d79ddbacf720370dc9ace94508c6667', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '555e41d961ad7d061ac71347e998641d104f499d', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'f90f3df3b959aee549fab33a62a85d6df6ba8410', class: 'sd-linear-progress__label' }, this.label)));
11075
11028
  }
11076
11029
  static get style() { return sdLinearProgressCss(); }
11077
11030
  static get cmpMeta() { return {
@@ -11105,10 +11058,10 @@ class SdLoadingContainer {
11105
11058
  this.visible = false;
11106
11059
  }
11107
11060
  render() {
11108
- return (hAsync("div", { key: '1c684984ec7203edb4206690026cf8085bfadcfb', class: {
11061
+ return (hAsync("div", { key: '08675a9dc0b1c11c42fb65a414f0fed88d03f1b0', class: {
11109
11062
  'sd-loading-container': true,
11110
11063
  'sd-loading-container--visible': this.visible,
11111
- }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '42a7d3b6c0f562cbfd1a0928a3df4df3cc962299', class: "sd-loading-container__backdrop" }), hAsync("div", { key: 'ce11d0950e5047eb47ae87f41bf7c049a2e18cbc', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'e6f63c78da63cf660942137e73cef389789e83b0', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '139b648a8a8007a050f6e81374930f92d676707c', class: "sd-loading-container__message" }, this.message)))));
11064
+ }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '4a10e9009d824bef1bf2f9930941931dc1fef43a', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '88edd1c19f5d22057e1e14f1e6bd10e23f45ec7b', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'b9c67678d799e429ec6cb2d3094da7bcc4cea150', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: 'ce016465e9d8b20f2121e8846bff75bbad5d7d94', class: "sd-loading-container__message" }, this.message)))));
11112
11065
  }
11113
11066
  static get style() { return sdLoadingContainerCss(); }
11114
11067
  static get cmpMeta() { return {
@@ -11204,7 +11157,7 @@ class SdLoadingModal {
11204
11157
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
11205
11158
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
11206
11159
  };
11207
- return (hAsync(Host, { key: 'a653095ef804a24fbc3c4a0e65d22971b537a9bf', style: hostStyle }, hAsync("div", { key: '38a1a83501a707de8a431b38cd3e5525565fca5d', class: "sd-loading-modal" }, hAsync("div", { key: '81ddeebfffa70bcc84fc3b2a02fb3d70441645c4', class: "sd-loading-modal__content" }, this.resolvedState === '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("div", { key: 'db87e7d46fcc6bfd07ce4191819e5e28051489b7', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '20134aca743319ea4e03e1b8a0359b92a3bdb0af', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: 'c6951624f69519d712bfdd619fd6b22216ecad87', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
11160
+ return (hAsync(Host, { key: '3d792e07772b93de139fa505f061004b037ed05b', style: hostStyle }, hAsync("div", { key: '8b63d47c502bdd66f893a484c4af36d2e8302081', class: "sd-loading-modal" }, hAsync("div", { key: '5b35a93e1aed2e8d9f5eebfcbe0222c4f38b5536', class: "sd-loading-modal__content" }, this.resolvedState === '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("div", { key: '591bae1563f4b5c5dc8bce22161d99929fb18ce5', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '577acd55fb35229459990f7f1ca4f710c26c51d4', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: 'cda4f1b9a8bee1897efb53671c0f715858377ba7', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
11208
11161
  }
11209
11162
  static get style() { return sdLoadingModalCss(); }
11210
11163
  static get cmpMeta() { return {
@@ -11393,7 +11346,7 @@ class SdModalContainer {
11393
11346
  const current = this.entries.find(e => e.id === id);
11394
11347
  if (!current || current.closing || !modalEl.isConnected)
11395
11348
  return;
11396
- this.entries = this.entries.map(e => e.id === id ? { ...e, backdropVisible: true } : e);
11349
+ this.entries = this.entries.map(e => (e.id === id ? { ...e, backdropVisible: true } : e));
11397
11350
  modalEl.classList.add('sd-modal-container__modal--visible');
11398
11351
  });
11399
11352
  });
@@ -11585,7 +11538,7 @@ class SdModalContainer {
11585
11538
  el.setAttribute(name, value);
11586
11539
  }
11587
11540
  render() {
11588
- if (!this.entries?.length)
11541
+ if ((this.entries?.length ?? 0) === 0)
11589
11542
  return null;
11590
11543
  return (hAsync("div", { class: "sd-modal-container" }, this.entries.map((entry, index) => (hAsync("div", { key: entry.id, class: "sd-modal-container__layer", style: { zIndex: String(index + 1) }, "data-modal-id": entry.id, ref: el => {
11591
11544
  if (el)
@@ -11779,10 +11732,10 @@ class SdNumberInput {
11779
11732
  const [intPart, decPart] = absValue.toString().split('.');
11780
11733
  const formatted = (+intPart).toLocaleString();
11781
11734
  const result = isNegative ? '-' + formatted : formatted;
11782
- return decPart ? result + '.' + decPart : String(result);
11735
+ return decPart !== undefined && decPart !== '' ? result + '.' + decPart : String(result);
11783
11736
  }
11784
11737
  parseInput(input) {
11785
- if (!input || input.trim() === '')
11738
+ if (input.trim() === '')
11786
11739
  return null;
11787
11740
  const cleaned = input.replace(/,/g, '').trim();
11788
11741
  if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
@@ -11995,15 +11948,15 @@ class SdNumberInput {
11995
11948
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
11996
11949
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
11997
11950
  };
11998
- return (hAsync("sd-field", { key: 'ea9194c50e91def94838d1e886e934944a1fd78d', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '4e65dcfe630b21a7683afebf595f66aca04f5c8c', class: {
11951
+ return (hAsync("sd-field", { key: '3ed260707f7e1b1a88d1407bb4b3c1965b302bcf', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '889cd4055b46e0727aed2b78f2a8bbeeca88cfed', class: {
11999
11952
  'sd-number-input__content': true,
12000
11953
  'sd-number-input__content--no-stepper': !this.useButton,
12001
- } }, this.useButton && (hAsync("button", { key: 'ee387b4a602007b98e1ebd8cb1ab9a0dd11dfc9d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'a98dd85c4a0c160e8668731d79b4718d8acb989f', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11954
+ } }, this.useButton && (hAsync("button", { key: '5213f04a1db8a779762ae41672fd016388a06aa7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '76910ba2b46a78eb2e4aaf7241eeb7aa1223c92a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
12002
11955
  ? NUMBER_INPUT_STEPPER.icon.disabled
12003
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: 'b49392e692e2349fd9620d39b15c8531bc5ae240', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '7128b540d479d6500cfa05782c49b0e06cd999e7', 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: {
11956
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '273b809ff5bd5ebb2e8cd09a9df3f6f84167aeb2', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '72917348a5ded30f5d8c4066af8e56d50de67db0', 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: {
12004
11957
  textAlign: this.useButton ? 'center' : 'right',
12005
11958
  ...this.inputStyle,
12006
- } }), this.inputSuffix && (hAsync("span", { key: 'e9902ba6872e4a10bcd1106c588e231973632f51', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '297ad8b506e904ba27f3f19beebe7fa503950f7b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '2f74f2a161d6700981f33b3d1df3bad76b3df87b', name: "add", size: iconSize, color: this.isIncrementDisabled()
11959
+ } }), this.inputSuffix && hAsync("span", { key: '232aa43852396a617e49403d30b4514aaf896740', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: 'f9dab4cd21deb933e72a8ad906cafbbf1cae1e5a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '73208aca8e5e9be431ba03b4755053c74ec70296', name: "add", size: iconSize, color: this.isIncrementDisabled()
12007
11960
  ? NUMBER_INPUT_STEPPER.icon.disabled
12008
11961
  : NUMBER_INPUT_STEPPER.icon.default }))))));
12009
11962
  }
@@ -12210,13 +12163,13 @@ class SdPagination {
12210
12163
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
12211
12164
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
12212
12165
  };
12213
- return (hAsync("div", { key: '0a99cc2b09de2f2a893fe88eaee535dc2f39505d', class: {
12166
+ return (hAsync("div", { key: '251d9b3bcff3cf985d62b1a8717f622d209b3fa1', class: {
12214
12167
  'sd-pagination': true,
12215
12168
  'sd-pagination--simple': this.simple,
12216
- }, style: cssVars }, hAsync("div", { key: 'ba4e726a23e572c788c8c68689e656a07f21f46e', 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: {
12169
+ }, style: cssVars }, hAsync("div", { key: 'd143917676ccd97c1f4fc8e7220857d543efa5fd', 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: {
12217
12170
  'sd-pagination__item': true,
12218
12171
  'sd-pagination__item--selected': this.currentPage === n,
12219
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'e3276583ab382b988ac2961e8c67c431d5c4495e', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
12172
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'e58053cef21c57d88f5b1357101507418b2db002', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
12220
12173
  }
12221
12174
  static get style() { return sdPaginationCss(); }
12222
12175
  static get cmpMeta() { return {
@@ -12297,17 +12250,17 @@ class SdPopover {
12297
12250
  const leftLink = this.leftLink;
12298
12251
  const button = this.button;
12299
12252
  const hasFooter = !!leftLink || !!button;
12300
- return (hAsync(Fragment, { key: '15b78d688d095fb15d5e6188dc848593bfec842e' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (hAsync("sd-floating-portal", { key: '5075327dce1fda289492edbeefe2e9af38fdaab0', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: 'd28e998f464c40d49935013521663801aead6771', class: {
12253
+ return (hAsync(Fragment, { key: 'b50da46efd85cdb48f66b24c591ab662a9fd62cb' }, this.label !== '' ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (hAsync("sd-floating-portal", { key: 'a31d6c00a9b61826fa412247f603d78874a3dba6', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: '11020f31a14dbb7325b30ebc48315b344662cf43', class: {
12301
12254
  'sd-floating-menu': true,
12302
12255
  'sd-floating-menu--popover': true,
12303
12256
  [`sd-floating-menu--${placement}`]: true,
12304
- [menuClass]: !!menuClass,
12257
+ [menuClass]: menuClass !== '',
12305
12258
  }, style: {
12306
12259
  '--sd-floating-bg': popoverTokens.popover.bg,
12307
- } }, hAsync("i", { key: 'aa98412939b7717c204fe7a76da9b61a6505a01a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '54b1a1fc5b88600737830668c3da39082cc895e7' })), hAsync("div", { key: 'a7968d363c8e77954093bf550d6904009f8b792b', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'b995c6df0d035a7a1162ec6dd3b4803897ed9b3e', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (hAsync("div", { key: '2ee4971691688a24842b083e561b4e9e818aed88', class: "sd-floating-menu__messages" }, messages.map((message, i) => (hAsync("div", { key: `msg-${i}` }, message))))), hasFooter && (hAsync("div", { key: '4cbb44218d763af841b1e6bfbdd754b23d22c9e2', class: {
12260
+ } }, hAsync("i", { key: '51b35ade68a68c92b7488b97f2b1808d7fcf33e5', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'd491c997e07a2bb2d4a3ad3624d5098457f91c05' })), hAsync("div", { key: '19bfc90b0c5da4fe736aad3b8b2061ac58d8efb4', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '31875711b7cd54c0c48f0017ac94365c3cc97821', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (hAsync("div", { key: '9c78a748831045f96fe48fd2ae9dcd85b1335aa0', class: "sd-floating-menu__messages" }, messages.map((message, i) => (hAsync("div", { key: `msg-${i}` }, message))))), hasFooter && (hAsync("div", { key: '787f0d2ac133bef9f72ce248b943b0ff9883db9e', class: {
12308
12261
  'sd-floating-menu__buttons': true,
12309
12262
  'sd-floating-menu__buttons--with-link': !!leftLink,
12310
- } }, leftLink && (hAsync("sd-text-link", { key: '67c6e9daf13cb294f30fdf1f848e92ba22cd3512', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (hAsync("sd-button", { key: '5328f1adcdc680d1bc97910a1b519298ced3b325', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (hAsync("sd-ghost-button", { key: '3e05ed8da4298a26d52045ad87fa5be42d6f6f02', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
12263
+ } }, leftLink && (hAsync("sd-text-link", { key: '2000a926c2c808e6ee51f47905fadf8847553bfe', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (hAsync("sd-button", { key: 'cca9d6bef231fe4c469d8895fefa8b6d5855a57c', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (hAsync("sd-ghost-button", { key: '032461787d74367ea047c088e08704ce7409f74b', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
12311
12264
  }
12312
12265
  static get style() { return sdPopoverCss(); }
12313
12266
  static get cmpMeta() { return {
@@ -12440,7 +12393,7 @@ class SdPopup {
12440
12393
  ...DEFAULT_SUBMIT_BUTTON_PROPS,
12441
12394
  ...this.submitButtonProps,
12442
12395
  };
12443
- return (hAsync("div", { key: '15e86848fe487b9df5b09a91e5319b35d7332a6e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: 'd8281c73a80fe5a4b8ce3ca219e967932b0ec1d3', class: "sd-popup__header" }, hAsync("h2", { key: '31031d3988bae465e023cc94713fb39ef9299250', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'dfa941b0dc100b55fc08ab8cb9fce2835aaa62a5', class: "sd-popup__body" }, hAsync("slot", { key: 'd7532a39c61746e8f517973e6fd4f7f3ac10fae0' })), this.useFooter && (hAsync("footer", { key: 'aacedcc4c2f2e4336449bc0fbafc9f67d70cc763', class: "sd-popup__footer" }, hAsync("div", { key: '8f093e0a8c24b03fa28e872b025cb159006d3449', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '11e2cd175c7ae3151408ca7e564df0a37d6eebb5', name: "footer-left" })), hAsync("sd-button", { key: '49b98d39181bd30392b7388dc7acc66caaca6038', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
12396
+ return (hAsync("div", { key: '0c9f1cd261fa533044309342cfbaae8f5b87ae31', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: 'd8aa4db4d150419f5653fd93e204cc4bd865c35e', class: "sd-popup__header" }, hAsync("h2", { key: 'fce95fce48a91c3a2b60f0b1169113cd2ff157d6', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'c730895828c14a6a80fe6bebecb08f386cc84a78', class: "sd-popup__body" }, hAsync("slot", { key: 'f3402c32fdc55794fb2c877a41c9f73e3c0d6d9f' })), this.useFooter && (hAsync("footer", { key: '4b04ebc0dccc07dd9466c06c940d3444346603ba', class: "sd-popup__footer" }, hAsync("div", { key: '78b35347121652d647e3601e6c6164e8e21288ca', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '98836c28e7de97466cf4285c0458a8709c3788bb', name: "footer-left" })), hAsync("sd-button", { key: 'd9ab45765c66a2f86aec2df9fc056fa1f4605259', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
12444
12397
  }
12445
12398
  static get style() { return sdPopupCss(); }
12446
12399
  static get cmpMeta() { return {
@@ -12566,7 +12519,7 @@ class SdPortal {
12566
12519
  }
12567
12520
  // 위치 갱신 (scroll / resize)
12568
12521
  updatePosition() {
12569
- if (this.rafId)
12522
+ if (this.rafId !== undefined)
12570
12523
  cancelAnimationFrame(this.rafId);
12571
12524
  this.rafId = requestAnimationFrame(() => {
12572
12525
  if (!this.parentRef || !this.wrapper)
@@ -12683,7 +12636,7 @@ class SdPortal {
12683
12636
  this.close.emit();
12684
12637
  }
12685
12638
  render() {
12686
- return hAsync("slot", { key: 'c85555f533743f29615e77c1834e8f0fefae7dc7' });
12639
+ return hAsync("slot", { key: '1f46253fe0f70fda84643e8d3025c1fd47090f5c' });
12687
12640
  }
12688
12641
  static get watchers() { return {
12689
12642
  "open": [{
@@ -12823,7 +12776,7 @@ class SdRadio {
12823
12776
  '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
12824
12777
  '--sd-radio-label-color': RADIO_COLORS.label,
12825
12778
  };
12826
- return (hAsync("label", { key: 'bbbca45f706514a12be434ba877de0bd0f82c944', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: 'e2cacd52037790cfe2d0eacacb975864858f73f8', 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: 'bfbfdcb93536cef9fecbf1cc3a5dc5c2adbf5dd0', class: "sd-radio__circle" }), this.label && hAsync("span", { key: '04c8d1e8de88bbb8d4041ebbbda00f58f8dc460c', class: "sd-radio__label" }, this.label)));
12779
+ 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)));
12827
12780
  }
12828
12781
  static get watchers() { return {
12829
12782
  "value": [{
@@ -12989,8 +12942,11 @@ class SdRadioButton {
12989
12942
  }
12990
12943
  _groupName;
12991
12944
  get groupName() {
12992
- if (!this._groupName) {
12993
- this._groupName = this.name || `sd-radio-button-${crypto.randomUUID()}`;
12945
+ if (this._groupName == null || this._groupName === '') {
12946
+ this._groupName =
12947
+ this.name != null && this.name !== ''
12948
+ ? this.name
12949
+ : `sd-radio-button-${crypto.randomUUID()}`;
12994
12950
  }
12995
12951
  return this._groupName;
12996
12952
  }
@@ -13019,7 +12975,7 @@ class SdRadioButton {
13019
12975
  '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
13020
12976
  '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
13021
12977
  };
13022
- return (hAsync("div", { key: 'fc1cfe14f2e71092496b241f3b4efa42a1ed878c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
12978
+ return (hAsync("div", { key: 'd1f572315ee66c5defebc4386e815fb21928b548', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
13023
12979
  const isSelected = this.isOptionSelected(option);
13024
12980
  const isDisabled = this.isOptionDisabled(option);
13025
12981
  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)));
@@ -13071,7 +13027,7 @@ class SdRadioGroup {
13071
13027
  return classes.join(' ');
13072
13028
  }
13073
13029
  render() {
13074
- return (hAsync("div", { key: '464497f4968167f9a89e5abdd9f23e4567dc56b3', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
13030
+ return (hAsync("div", { key: '3bb952a72d5bccd1ad4842d9554efe6c69829773', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
13075
13031
  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) }));
13076
13032
  })));
13077
13033
  }
@@ -13214,7 +13170,7 @@ class SdSelect {
13214
13170
  }
13215
13171
  getSelectedOptions() {
13216
13172
  const val = this.value;
13217
- if (!val || !Array.isArray(val))
13173
+ if (val == null || !Array.isArray(val))
13218
13174
  return [];
13219
13175
  if (this.emitValue) {
13220
13176
  return val
@@ -13358,15 +13314,15 @@ class SdSelect {
13358
13314
  this.closeDropdown();
13359
13315
  },
13360
13316
  };
13361
- return (hAsync("sd-field", { key: '18edcdfdc3a9a2bd17ae0e3852eec94151275e18', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
13317
+ return (hAsync("sd-field", { key: 'c433e21047632ae1e7901e11f6f9d83070f8d83c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
13362
13318
  this.hovered = true;
13363
13319
  }, onMouseLeave: () => {
13364
13320
  this.hovered = false;
13365
- } }, hAsync("div", { key: '39efa02a58acbc53315087cceb732b488920dbe8', class: "sd-select", ref: el => {
13321
+ } }, hAsync("div", { key: 'f04f2f331c27745035c35d96d5262398065589a8', class: "sd-select", ref: el => {
13366
13322
  this.triggerRef = el;
13367
- } }, hAsync("sd-select-trigger", { key: 'e03ce9208f4af5226461ecdfb0d15bade4f277dd', ref: el => {
13323
+ } }, hAsync("sd-select-trigger", { key: 'b66e83ff248618c815b155f27445f3da9e91361b', ref: el => {
13368
13324
  this.triggerComponentRef = el;
13369
- }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '9181fd551885e001f139cab9634a2ac3b0f89d47', ...portalProps }, hAsync("sd-select-listbox", { key: '6ed356d2ceea79562ce448584514c23fbff20090', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
13325
+ }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'bd5b46d8e4849d235e39a9d9cfc549fdbe260076', ...portalProps }, hAsync("sd-select-listbox", { key: '81266da14ee4e59b4cedd4b364c18fea4d3c4f7f', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
13370
13326
  }
13371
13327
  static get watchers() { return {
13372
13328
  "isOpen": [{
@@ -13652,9 +13608,13 @@ class SdSelectListItem {
13652
13608
  '--list-item-font-weight-selected': LIST_ITEM_TYPOGRAPHY.selectedFontWeight,
13653
13609
  };
13654
13610
  if (isDepth1Group) {
13655
- cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
13611
+ cssVars['--list-item-border-top'] =
13612
+ `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
13656
13613
  }
13657
- return (hAsync("div", { key: 'd580af48ad969b82d964d35fa3ed6bc02e807a77', class: {
13614
+ return (
13615
+ // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
13616
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events
13617
+ hAsync("div", { key: '93e8bf04e69d9e6f066952570ed06076bdd17e57', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
13658
13618
  'sd-select-list-item': true,
13659
13619
  'sd-select-list-item--group': isGroup,
13660
13620
  'sd-select-list-item--depth1-group': isDepth1Group,
@@ -13664,7 +13624,7 @@ class SdSelectListItem {
13664
13624
  'sd-select-list-item--focused': this.isFocused,
13665
13625
  'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
13666
13626
  'sd-select-list-item--disabled': !!this.option.disabled,
13667
- }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '57cee194abfeb1fb12db1ebc72397fdb2f5268ba', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: 'dc10ebc823b7007988c29facfd559d477caa9bb8', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '3504a51d1c92f6b21ec3f36b4546b1763fcc931f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
13627
+ }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '2b6a17361c2e5c65c6dac21895ef397cadeec9a3', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '158e45d52b3b5394f7c4e2ffff97d23f83ce5e49', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '48adac9df92cd19f5e2b39bed828a9ad7c22c945', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
13668
13628
  }
13669
13629
  static get style() { return sdSelectListItemCss(); }
13670
13630
  static get cmpMeta() { return {
@@ -13726,21 +13686,21 @@ class SdSelectListItemSearch {
13726
13686
  this.inputEl?.focus();
13727
13687
  };
13728
13688
  disconnectedCallback() {
13729
- if (this.focusRafId)
13689
+ if (this.focusRafId !== undefined)
13730
13690
  cancelAnimationFrame(this.focusRafId);
13731
- if (this.debounceTimer)
13691
+ if (this.debounceTimer !== undefined)
13732
13692
  clearTimeout(this.debounceTimer);
13733
13693
  }
13734
13694
  render() {
13735
- return (hAsync("div", { key: '8714ef9e06f54fd5c2ae5241cac65a74ea45dccf', class: {
13695
+ return (hAsync("div", { key: '0b8e55a2f39d72bc6fc5c7d8c6262c9fffb52ba7', class: {
13736
13696
  'sd-select-list-item-search': true,
13737
13697
  'sd-select-list-item-search--scrolled': this.isScrolled,
13738
- } }, hAsync("div", { key: '428aea3765711fd91ae7b587b21347dd9634636b', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: 'ed3363eea1a7d6a4f44141a74855c4e767a34999', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: 'c3f5539e037a81d96ce2fa41225f0c33c32add6e', ref: el => {
13698
+ } }, hAsync("div", { key: '30c4f5d6c8002579da129cebb06c026c278fb555', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: 'be9076a1fd6d7fd9a1990fd9e32aebd04c1bc4b4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: 'c9400184f607d0385e5e8c25615e1a955256c6f4', ref: el => {
13739
13699
  this.inputEl = el;
13740
- }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'b081b5a6eced0397db40784ce25e0e84c574f869', type: "button", class: {
13700
+ }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'dcb18eff068dea3fcb9144c4dfd4500806f68753', type: "button", class: {
13741
13701
  'sd-select-list-item-search__clear': true,
13742
- 'sd-select-list-item-search__clear--hidden': !this.searchText,
13743
- }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: '29615969a7efa118089e2c8dba741086196f8593', name: "close", size: 12, color: "#888888" })))));
13702
+ 'sd-select-list-item-search__clear--hidden': this.searchText === '',
13703
+ }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'beb2cf23258aa1eaff2c9fdb63dae99570691af1', name: "close", size: 12, color: "#888888" })))));
13744
13704
  }
13745
13705
  static get style() { return sdSelectListItemSearchCss(); }
13746
13706
  static get cmpMeta() { return {
@@ -13825,7 +13785,7 @@ class SdSelectListbox {
13825
13785
  return count >= SEARCH_THRESHOLD;
13826
13786
  }
13827
13787
  get filteredOptions() {
13828
- if (!this.searchKeyword)
13788
+ if (this.searchKeyword === '')
13829
13789
  return this.options;
13830
13790
  if (this.isDepth)
13831
13791
  return filterTree(this.options, this.searchKeyword);
@@ -13838,7 +13798,7 @@ class SdSelectListbox {
13838
13798
  return this.filteredOptions.length === 0;
13839
13799
  }
13840
13800
  getSelectedValues() {
13841
- if (!this.value || !Array.isArray(this.value))
13801
+ if (this.value == null || !Array.isArray(this.value))
13842
13802
  return new Set();
13843
13803
  if (this.emitValue) {
13844
13804
  return new Set(this.value);
@@ -13961,7 +13921,7 @@ class SdSelectListbox {
13961
13921
  // filterTree 가 매 호출마다 옵션 객체를 새로 복제하기 때문에 참조 비교
13962
13922
  // (=== / indexOf) 는 검색이 적용된 동안 항상 실패한다. 고유 식별자인
13963
13923
  // value 로 비교해야 한다.
13964
- return !!focused && focused.value === option.value;
13924
+ return focused != null && focused.value === option.value;
13965
13925
  }
13966
13926
  resetFocusOnFilter() {
13967
13927
  // 필터가 바뀌면 이전 인덱스가 가리키던 항목이 사라질 수 있으므로
@@ -14111,9 +14071,9 @@ class SdSelectListbox {
14111
14071
  '--listbox-max-height': this.maxHeight ?? '260px',
14112
14072
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
14113
14073
  };
14114
- return (hAsync("div", { key: 'be3a46d2a17522799374eb7e59faea8960e7b41a', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '68fa6b9f958ee662ac400716ade0ae4823ad99a3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'b0a6daf94c69ccb33d31434014c93b2f414309f3', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
14074
+ return (hAsync("div", { key: '4173255a866459bf0aeb98d517263d12f1c39fa5', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '79e7d48d7234ebfd32d3cd242822dfa93a73c151', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '22981c1e049d0d526af06bb5b563de5130c14477', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
14115
14075
  this.listEl = el;
14116
- } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '120fea009df513e3346877044ee65c132ece70cf', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
14076
+ } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '7acd37c5663bb101d6853cbd6629a78d402d6cde', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
14117
14077
  }
14118
14078
  static get watchers() { return {
14119
14079
  "searchKeyword": [{
@@ -14178,7 +14138,7 @@ class SdSelectTrigger {
14178
14138
  this.triggerBlur.emit();
14179
14139
  };
14180
14140
  render() {
14181
- const hasValue = !!this.displayText;
14141
+ const hasValue = this.displayText !== '';
14182
14142
  const cssVars = {
14183
14143
  '--trigger-padding-x': `${SELECT_LAYOUT.paddingX}px`,
14184
14144
  '--trigger-gap': `${SELECT_LAYOUT.gap}px`,
@@ -14194,13 +14154,18 @@ class SdSelectTrigger {
14194
14154
  ? SELECT_COLORS.icon.disabled
14195
14155
  : SELECT_COLORS.icon.default,
14196
14156
  };
14197
- return (hAsync("div", { key: '69a87c509e16605feb217f12ce055e0097f09a6f', ref: el => {
14157
+ return (hAsync("div", { key: '6694f35a396f368d5df9860db30d817beddb8bec', ref: el => {
14198
14158
  this.triggerEl = el;
14199
- }, tabindex: this.disabled ? -1 : 0, class: {
14159
+ }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
14200
14160
  'sd-select-trigger': true,
14201
14161
  'sd-select-trigger--open': this.isOpen,
14202
14162
  'sd-select-trigger--disabled': this.disabled,
14203
- }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '0886f40b2427fc4b5825b06682531a26be4c4eec', class: "sd-select-trigger__content" }, hAsync("span", { key: '9e2fb73a34153b0744fbf2cc7490ecdc7a125233', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), hAsync("sd-icon", { key: 'c8a80bf912c50bf97a5d5af4d4c5307e416aea6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
14163
+ }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
14164
+ if (e.key === 'Enter' || e.key === ' ') {
14165
+ e.preventDefault();
14166
+ this.handleClick();
14167
+ }
14168
+ }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'd8ff247ca362a8fc3677d9803261343a1e891298', class: "sd-select-trigger__content" }, hAsync("span", { key: 'cd81a7c7c135372aad80fa9391b160337632643c', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), hAsync("sd-icon", { key: '838c12e2a9ce06036eee766ffd2f88f3215b8420', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
14204
14169
  'sd-select-trigger__icon': true,
14205
14170
  'sd-select-trigger__icon--open': this.isOpen,
14206
14171
  } }))));
@@ -14322,7 +14287,7 @@ class SdSwitch {
14322
14287
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
14323
14288
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
14324
14289
  };
14325
- return (hAsync("label", { key: 'a37c1387905456007de46a6050616b025ad06b37', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '5fcc9f72e177956e015e4cb009936edc60c4c3ec', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: 'bf1fa22a94b2b245a2ddf805df4cd1c204524710', class: "sd-switch__track" }, hAsync("div", { key: '11dafcd812c560acb7a63f7267f40f8ed67da95b', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '6609d2e33e82e843ffd5bbb2d2010de3e299f081', class: "sd-switch__label" }, this.label)));
14290
+ return (hAsync("label", { key: 'ebb195a1bb93ae476b4bf3e697623809d626eed6', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'a6de6298d35c54ad83dc6285b90e67c8d3564d15', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '7881f46be572edcfc82888564a7f85ad4207dd8e', class: "sd-switch__track" }, hAsync("div", { key: 'c08c9d5894a6f9ddf3ecdaaa9253628478479043', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '4e01b185502829d8fb647d3eafaaf6565489b2f3', class: "sd-switch__label" }, this.label)));
14326
14291
  }
14327
14292
  static get style() { return sdSwitchCss(); }
14328
14293
  static get cmpMeta() { return {
@@ -14390,7 +14355,13 @@ const TABLE_HEADER_RESIZING_BAR = {
14390
14355
  // ── Body Tokens ──
14391
14356
  const TABLE_BODY_LAYOUT = {
14392
14357
  default: {
14393
- height: tableTokens.table.body.default.height},
14358
+ height: tableTokens.table.body.default.height,
14359
+ paddingY: tableTokens.table.body.default.paddingY,
14360
+ },
14361
+ dense: {
14362
+ height: tableTokens.table.body.dense.height,
14363
+ paddingY: tableTokens.table.body.dense.paddingY,
14364
+ },
14394
14365
  paddingX: tableTokens.table.body.paddingX};
14395
14366
  const TABLE_BODY_TYPOGRAPHY = {
14396
14367
  fontFamily: tableTokens.table.body.typography.fontFamily,
@@ -14404,6 +14375,10 @@ const TABLE_BORDER = {
14404
14375
  color: tableTokens.table.border.color,
14405
14376
  width: tableTokens.table.border.width,
14406
14377
  };
14378
+ const TABLE_SEPARATOR = {
14379
+ color: tableTokens.table.separator.color,
14380
+ width: tableTokens.table.separator.Width,
14381
+ };
14407
14382
  const TABLE_RADIUS = tableTokens.table.radius;
14408
14383
  // ── Header Icon Color Defaults ──
14409
14384
  const ICON_DEFAULT_COLOR = {
@@ -14417,7 +14392,7 @@ const ICON_DEFAULT_COLOR = {
14417
14392
  const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
14418
14393
  const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
14419
14394
 
14420
- const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:var(--table-container-height, 400px);border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data ::slotted(*),.sd-table__no-data span{pointer-events:auto}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
14395
+ const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:var(--table-container-height, 400px);border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
14421
14396
 
14422
14397
  class SdTable {
14423
14398
  constructor(hostRef) {
@@ -14449,9 +14424,15 @@ class SdTable {
14449
14424
  pagination;
14450
14425
  useInternalPagination = false;
14451
14426
  useRowsPerPageSelect = false;
14427
+ dense = false;
14452
14428
  // ─── Virtual Scroll ───────────────────────────────────────────────
14453
14429
  useVirtualScroll = false;
14454
- rowHeight = 40;
14430
+ rowHeight;
14431
+ get effectiveRowHeight() {
14432
+ if (this.rowHeight != null)
14433
+ return this.rowHeight;
14434
+ return this.dense ? Number(TABLE_BODY_LAYOUT.dense.height) : Number(TABLE_BODY_LAYOUT.default.height);
14435
+ }
14455
14436
  virtualBuffer = 5;
14456
14437
  virtualEndThreshold = 10;
14457
14438
  // ─────────────────────────────────────────────────────────────────
@@ -14474,6 +14455,7 @@ class SdTable {
14474
14455
  scrolledRight = false;
14475
14456
  rowCount = 0;
14476
14457
  loadingScrollTop = 0;
14458
+ noDataBodyHeight = 60;
14477
14459
  // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
14478
14460
  // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
14479
14461
  autoThead = false;
@@ -14482,12 +14464,19 @@ class SdTable {
14482
14464
  vsEnd = 0;
14483
14465
  lastReachEndNotifiedRowCount = -1;
14484
14466
  scrollContainer = null;
14467
+ noDataContentEl = null;
14468
+ noDataContentResizeObserver;
14485
14469
  onScroll;
14486
14470
  // 키: `${rowKey}::${field}` → { rowspan, colspan }
14487
14471
  spanRegistry = new Map();
14472
+ // rowKey → Set<field>: useFrame=true인 sd-td가 있는 행을 추적한다.
14473
+ // 하나라도 등록되면 해당 행은 dense를 무시하고 default 레이아웃으로 렌더된다.
14474
+ useFrameRegistry = new Map();
14488
14475
  // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
14489
14476
  // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
14490
14477
  cellClassRegistry = new Map();
14478
+ // separator 직전 행의 시각적 인덱스 집합
14479
+ separatorPrevIndices = new Set();
14491
14480
  // rowKey 문자열 → rows 배열에서의 visual index.
14492
14481
  // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
14493
14482
  // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
@@ -14546,6 +14535,7 @@ class SdTable {
14546
14535
  if (newVal) {
14547
14536
  this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
14548
14537
  }
14538
+ this.syncNoDataContentObserver();
14549
14539
  }
14550
14540
  handleUseVirtualScrollChange(newVal) {
14551
14541
  if (newVal) {
@@ -14554,7 +14544,7 @@ class SdTable {
14554
14544
  }
14555
14545
  }
14556
14546
  handleColumnsChange(newCols) {
14557
- this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
14547
+ this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
14558
14548
  this.refreshChildrenConfig();
14559
14549
  }
14560
14550
  handleRowsChange(newRows) {
@@ -14565,6 +14555,7 @@ class SdTable {
14565
14555
  if (this.useVirtualScroll)
14566
14556
  this.propagateVirtualUpdate(true);
14567
14557
  this.pushRowsToChildren(newRows);
14558
+ this.syncNoDataContentObserver();
14568
14559
  }
14569
14560
  handleRowKeyChange() {
14570
14561
  this.rebuildRowIndexMap();
@@ -14590,10 +14581,10 @@ class SdTable {
14590
14581
  this.innerSelected = new Set(newSelected);
14591
14582
  }
14592
14583
  handlePaginationChange(newVal) {
14593
- if (newVal?.page && newVal.page !== this.currentPage) {
14584
+ if (newVal?.page != null && newVal.page !== this.currentPage) {
14594
14585
  this.currentPage = newVal.page;
14595
14586
  }
14596
- if (newVal?.rowsPerPage && newVal.rowsPerPage !== this.innerRowsPerPage) {
14587
+ if (newVal?.rowsPerPage != null && newVal.rowsPerPage !== this.innerRowsPerPage) {
14597
14588
  this.innerRowsPerPage = newVal.rowsPerPage;
14598
14589
  }
14599
14590
  }
@@ -14608,12 +14599,12 @@ class SdTable {
14608
14599
  this.handleNoDataLabelChange(this.noDataLabel);
14609
14600
  this.detectChildren();
14610
14601
  this.innerSelected = new Set(this.selected || []);
14611
- this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
14602
+ this.columnWidths = (this.columns || []).map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
14612
14603
  this.rebuildRowIndexMap();
14613
- if (this.pagination?.page) {
14604
+ if (this.pagination?.page != null) {
14614
14605
  this.currentPage = this.pagination.page;
14615
14606
  }
14616
- if (this.pagination?.rowsPerPage) {
14607
+ if (this.pagination?.rowsPerPage != null) {
14617
14608
  this.innerRowsPerPage = this.pagination.rowsPerPage;
14618
14609
  }
14619
14610
  const el = this.el;
@@ -14635,10 +14626,16 @@ class SdTable {
14635
14626
  el.getSpanSync = this.getSpanSync.bind(this);
14636
14627
  el.isCoveredSync = this.isCoveredSync.bind(this);
14637
14628
  el.isVisualLastRowSync = this.isVisualLastRowSync.bind(this);
14629
+ el.registerSeparatorSync = this.registerSeparatorSync.bind(this);
14630
+ el.unregisterSeparatorSync = this.unregisterSeparatorSync.bind(this);
14631
+ el.isVisualLastRowBeforeSeparatorSync = this.isVisualLastRowBeforeSeparatorSync.bind(this);
14638
14632
  el.hasRowspanSync = this.hasRowspanSync.bind(this);
14639
14633
  el.registerCellClassSync = this.registerCellClassSync.bind(this);
14640
14634
  el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
14641
14635
  el.getCellClassSync = this.getCellClassSync.bind(this);
14636
+ el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
14637
+ el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
14638
+ el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
14642
14639
  if (Array.isArray(this.rows)) {
14643
14640
  this.rowCount = this.rows.length;
14644
14641
  this.pushRowsToChildren(this.rows);
@@ -14681,11 +14678,43 @@ class SdTable {
14681
14678
  this.propagateVirtualUpdate(); // 초기 렌더
14682
14679
  }
14683
14680
  });
14681
+ this.syncNoDataContentObserver();
14684
14682
  }
14685
14683
  disconnectedCallback() {
14686
14684
  if (this.scrollContainer && this.onScroll) {
14687
14685
  this.scrollContainer.removeEventListener('scroll', this.onScroll);
14688
14686
  }
14687
+ this.noDataContentResizeObserver?.disconnect();
14688
+ this.noDataContentResizeObserver = undefined;
14689
+ }
14690
+ syncNoDataContentObserver() {
14691
+ const isNoData = this.rowCount === 0 && !this.isLoading;
14692
+ if (!isNoData) {
14693
+ this.noDataContentResizeObserver?.disconnect();
14694
+ this.noDataContentResizeObserver = undefined;
14695
+ this.noDataBodyHeight = 60;
14696
+ return;
14697
+ }
14698
+ this.observeNoDataContentHeight();
14699
+ }
14700
+ // observer를 붙이고 콘텐츠 높이를 측정해 noDataBodyHeight를 갱신하는 함수
14701
+ observeNoDataContentHeight() {
14702
+ if (typeof ResizeObserver === 'undefined')
14703
+ return;
14704
+ const target = this.noDataContentEl;
14705
+ if (!target)
14706
+ return;
14707
+ this.noDataContentResizeObserver?.disconnect();
14708
+ this.noDataContentResizeObserver = new ResizeObserver(() => {
14709
+ const measured = Math.ceil(target.scrollHeight);
14710
+ const nextHeight = Math.max(60, measured);
14711
+ if (nextHeight !== this.noDataBodyHeight) {
14712
+ this.noDataBodyHeight = nextHeight;
14713
+ }
14714
+ });
14715
+ this.noDataContentResizeObserver.observe(target);
14716
+ const measured = Math.ceil(target.scrollHeight);
14717
+ this.noDataBodyHeight = Math.max(60, measured);
14689
14718
  }
14690
14719
  // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
14691
14720
  queryChildEl(selector) {
@@ -14750,8 +14779,8 @@ class SdTable {
14750
14779
  return;
14751
14780
  this.vsStart = start;
14752
14781
  this.vsEnd = end;
14753
- const topHeight = start * this.rowHeight;
14754
- const bottomHeight = Math.max(0, (this.rowCount - end) * this.rowHeight);
14782
+ const topHeight = start * this.effectiveRowHeight;
14783
+ const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
14755
14784
  const tbody = this.queryChildEl('sd-tbody');
14756
14785
  tbody?.setSpacersSync?.(topHeight, bottomHeight);
14757
14786
  if (rangeChanged) {
@@ -14765,7 +14794,7 @@ class SdTable {
14765
14794
  getVirtualScrollConfigSync() {
14766
14795
  return {
14767
14796
  useVirtualScroll: this.useVirtualScroll,
14768
- rowHeight: this.rowHeight,
14797
+ rowHeight: this.effectiveRowHeight,
14769
14798
  virtualBuffer: this.virtualBuffer,
14770
14799
  vsStart: this.vsStart,
14771
14800
  vsEnd: this.vsEnd,
@@ -14782,10 +14811,35 @@ class SdTable {
14782
14811
  scrolledLeft: this.scrolledLeft,
14783
14812
  scrolledRight: this.scrolledRight,
14784
14813
  columnWidths: this.columnWidths,
14814
+ dense: this.dense,
14785
14815
  };
14786
14816
  }
14817
+ registerUseFrameSync(rowKey, field) {
14818
+ if (rowKey == null || field === '')
14819
+ return;
14820
+ let fields = this.useFrameRegistry.get(rowKey);
14821
+ if (!fields) {
14822
+ fields = new Set();
14823
+ this.useFrameRegistry.set(rowKey, fields);
14824
+ }
14825
+ fields.add(field);
14826
+ }
14827
+ unregisterUseFrameSync(rowKey, field) {
14828
+ if (rowKey == null || field === '')
14829
+ return;
14830
+ const fields = this.useFrameRegistry.get(rowKey);
14831
+ if (!fields)
14832
+ return;
14833
+ fields.delete(field);
14834
+ if (fields.size === 0)
14835
+ this.useFrameRegistry.delete(rowKey);
14836
+ }
14837
+ hasUseFrameInRowSync(rowKey) {
14838
+ const fields = this.useFrameRegistry.get(rowKey);
14839
+ return fields != null && fields.size > 0;
14840
+ }
14787
14841
  isRowSelectedSync(row) {
14788
- return Array.from(this.innerSelected).some(r => r[(this.rowKey ?? 'id')] === row[(this.rowKey ?? 'id')]);
14842
+ return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
14789
14843
  }
14790
14844
  async isRowSelected(row) {
14791
14845
  return this.isRowSelectedSync(row);
@@ -14794,7 +14848,7 @@ class SdTable {
14794
14848
  const selectedArray = Array.from(this.innerSelected);
14795
14849
  const exists = this.isRowSelectedSync(row);
14796
14850
  const newSelected = exists
14797
- ? selectedArray.filter(r => r[(this.rowKey ?? 'id')] !== row[(this.rowKey ?? 'id')])
14851
+ ? selectedArray.filter(r => r[this.rowKey ?? 'id'] !== row[this.rowKey ?? 'id'])
14798
14852
  : [...selectedArray, row];
14799
14853
  if (newSelected.length === selectedArray.length)
14800
14854
  return;
@@ -14812,8 +14866,8 @@ class SdTable {
14812
14866
  this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
14813
14867
  }
14814
14868
  else {
14815
- const currentPageKeys = rows.map(r => r[(this.rowKey ?? 'id')]);
14816
- this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[(this.rowKey ?? 'id')])));
14869
+ const currentPageKeys = rows.map(r => r[this.rowKey ?? 'id']);
14870
+ this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey ?? 'id'])));
14817
14871
  }
14818
14872
  this.selected = Array.from(this.innerSelected);
14819
14873
  this.sdSelectChange.emit(Array.from(this.innerSelected));
@@ -14824,7 +14878,7 @@ class SdTable {
14824
14878
  }
14825
14879
  getIsAllCheckedSync(rows) {
14826
14880
  const total = rows.length;
14827
- const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[(this.rowKey ?? 'id')] === row[(this.rowKey ?? 'id')])).length;
14881
+ const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id'])).length;
14828
14882
  if (selectedCount === 0)
14829
14883
  return false;
14830
14884
  if (selectedCount === total)
@@ -14847,7 +14901,7 @@ class SdTable {
14847
14901
  this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
14848
14902
  }
14849
14903
  changeRowsPerPage(perPage) {
14850
- const changedRowsPerPage = perPage ? Number(perPage) : 0;
14904
+ const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
14851
14905
  if (!this.useInternalPagination) {
14852
14906
  this.sdRowsPerPageChange.emit(changedRowsPerPage);
14853
14907
  return;
@@ -14874,7 +14928,7 @@ class SdTable {
14874
14928
  const startWidth = this.columnWidths[index];
14875
14929
  const handleMouseMove = (moveEvent) => {
14876
14930
  const col = this.columns[index];
14877
- if (!col)
14931
+ if (col == null)
14878
14932
  return;
14879
14933
  const minWidth = col.minWidth || 50;
14880
14934
  const maxWidth = col.maxWidth || 9999;
@@ -14909,13 +14963,17 @@ class SdTable {
14909
14963
  this.columns.filter(c => c.visible !== false).length -
14910
14964
  (this.stickyColumn?.right || 0) && i > colIdx)
14911
14965
  .reduce((a, b) => a + b, 0);
14912
- return {
14966
+ const visibleCol = this.columns.filter(c => c.visible !== false)[colIdx];
14967
+ const base = {
14913
14968
  '--sticky-left-offset': `${leftOffset}px`,
14914
14969
  '--sticky-right-offset': `${rightOffset}px`,
14915
- 'width': `${this.columnWidths[colIdx]}px`,
14916
- 'minWidth': `${this.columnWidths[colIdx]}px`,
14917
- 'maxWidth': `${this.columnWidths[colIdx]}px`,
14918
14970
  };
14971
+ if (!visibleCol?.autoWidth) {
14972
+ base['width'] = `${this.columnWidths[colIdx]}px`;
14973
+ base['minWidth'] = `${this.columnWidths[colIdx]}px`;
14974
+ base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
14975
+ }
14976
+ return base;
14919
14977
  }
14920
14978
  async getStickyStyle(colIdx) {
14921
14979
  return this.getStickyStyleSync(colIdx);
@@ -14941,7 +14999,7 @@ class SdTable {
14941
14999
  });
14942
15000
  }
14943
15001
  registerSpanSync(rowKey, field, rowspan, colspan) {
14944
- if (rowKey == null || !field)
15002
+ if (rowKey == null || field === '')
14945
15003
  return;
14946
15004
  const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
14947
15005
  const safeColspan = Math.max(1, Math.floor(colspan || 1));
@@ -14960,7 +15018,7 @@ class SdTable {
14960
15018
  this.requestAllTrUpdate();
14961
15019
  }
14962
15020
  unregisterSpanSync(rowKey, field) {
14963
- if (rowKey == null || !field)
15021
+ if (rowKey == null || field === '')
14964
15022
  return;
14965
15023
  const key = this.spanKey(rowKey, field);
14966
15024
  if (!this.spanRegistry.has(key))
@@ -14975,18 +15033,18 @@ class SdTable {
14975
15033
  // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
14976
15034
  // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
14977
15035
  registerCellClassSync(rowKey, field, cls) {
14978
- if (rowKey == null || !field)
15036
+ if (rowKey == null || field === '')
14979
15037
  return;
14980
15038
  const key = this.spanKey(rowKey, field);
14981
15039
  const safe = (cls ?? '').trim();
14982
- if (!safe) {
15040
+ if (safe === '') {
14983
15041
  this.cellClassRegistry.delete(key);
14984
15042
  return;
14985
15043
  }
14986
15044
  this.cellClassRegistry.set(key, safe);
14987
15045
  }
14988
15046
  unregisterCellClassSync(rowKey, field) {
14989
- if (rowKey == null || !field)
15047
+ if (rowKey == null || field === '')
14990
15048
  return;
14991
15049
  this.cellClassRegistry.delete(this.spanKey(rowKey, field));
14992
15050
  }
@@ -15009,7 +15067,7 @@ class SdTable {
15009
15067
  // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
15010
15068
  for (let i = 0; i < colIdx; i++) {
15011
15069
  const c = visibleCols[i];
15012
- if (!c)
15070
+ if (c == null)
15013
15071
  continue;
15014
15072
  const field = typeof c.field === 'string' ? c.field : c.name;
15015
15073
  const span = this.spanRegistry.get(this.spanKey(rowKey, field));
@@ -15047,23 +15105,50 @@ class SdTable {
15047
15105
  }
15048
15106
  return false;
15049
15107
  }
15050
- // 셀이 시각적으로 마지막 행(또는 페이지 마지막 행)에 닿는지 판정.
15051
- // 마지막 행에 border-bottom: none을 적용하기 위함
15052
- isVisualLastRowSync(rowKey, field) {
15053
- if (this.rowCount <= 0)
15054
- return false;
15108
+ // rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
15109
+ // isVisualLastRowSync·isVisualLastRowBeforeSeparatorSync 공통 헬퍼.
15110
+ resolveVisualBottom(rowKey, field) {
15055
15111
  const myRowIdx = this.resolveRowIndex(rowKey);
15056
15112
  if (myRowIdx == null)
15057
- return false;
15113
+ return null;
15058
15114
  const span = this.spanRegistry.get(this.spanKey(rowKey, field));
15059
15115
  const rs = Math.max(1, span?.rowspan ?? 1);
15060
- const visualBottom = myRowIdx + rs - 1;
15116
+ return myRowIdx + rs - 1;
15117
+ }
15118
+ // 셀의 시각적 하단이 테이블(또는 현재 페이지)의 마지막 행인지 판정.
15119
+ // 마지막 행에 border-bottom: none을 적용하기 위함.
15120
+ isVisualLastRowSync(rowKey, field) {
15121
+ if (this.rowCount <= 0)
15122
+ return false;
15123
+ const visualBottom = this.resolveVisualBottom(rowKey, field);
15124
+ if (visualBottom == null)
15125
+ return false;
15061
15126
  const pageInfo = this.getPaginationInfoSync();
15062
15127
  const lastVisibleIdx = pageInfo
15063
15128
  ? Math.min(pageInfo.endIndex - 1, this.rowCount - 1)
15064
15129
  : this.rowCount - 1;
15065
15130
  return visualBottom === lastVisibleIdx;
15066
15131
  }
15132
+ registerSeparatorSync(prevRowKey) {
15133
+ const idx = this.resolveRowIndex(prevRowKey);
15134
+ if (idx != null)
15135
+ this.separatorPrevIndices.add(idx);
15136
+ }
15137
+ unregisterSeparatorSync(prevRowKey) {
15138
+ const idx = this.resolveRowIndex(prevRowKey);
15139
+ if (idx != null)
15140
+ this.separatorPrevIndices.delete(idx);
15141
+ }
15142
+ // 셀의 시각적 하단이 separator 바로 앞 행인지 판정.
15143
+ // 해당 셀에 border-bottom: none을 적용하기 위함.
15144
+ isVisualLastRowBeforeSeparatorSync(rowKey, field) {
15145
+ if (this.separatorPrevIndices.size === 0)
15146
+ return false;
15147
+ const visualBottom = this.resolveVisualBottom(rowKey, field);
15148
+ if (visualBottom == null)
15149
+ return false;
15150
+ return this.separatorPrevIndices.has(visualBottom);
15151
+ }
15067
15152
  setRowCountSync(count) {
15068
15153
  const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
15069
15154
  if (safeCount !== this.rowCount) {
@@ -15078,7 +15163,7 @@ class SdTable {
15078
15163
  this.setRowCountSync(count);
15079
15164
  }
15080
15165
  calculateVisibleRange(scrollTop, containerHeight) {
15081
- const safeRowHeight = Math.max(1, this.toFiniteNumber(this.rowHeight, 40));
15166
+ const safeRowHeight = Math.max(1, this.toFiniteNumber(this.effectiveRowHeight, 40));
15082
15167
  const safeBuffer = Math.max(0, Math.floor(this.toFiniteNumber(this.virtualBuffer, 5)));
15083
15168
  const safeScrollTop = Math.max(0, this.toFiniteNumber(scrollTop, 0));
15084
15169
  const safeContainerHeight = Math.max(0, this.toFiniteNumber(containerHeight, 0));
@@ -15144,6 +15229,12 @@ class SdTable {
15144
15229
  }
15145
15230
  render() {
15146
15231
  const resolvedTableId = this.getResolvedTableId();
15232
+ const isNoData = this.rowCount === 0 && !this.isLoading;
15233
+ const paginationHeight = this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0;
15234
+ const noDataTotalHeight = 36 + this.noDataBodyHeight;
15235
+ const effectiveTableHeight = isNoData
15236
+ ? `max(${this.height || '96px'}, ${noDataTotalHeight}px)`
15237
+ : this.height || '100%';
15147
15238
  const hostStyle = {
15148
15239
  '--table-radius': `${TABLE_RADIUS}px`,
15149
15240
  '--table-border-color': TABLE_BORDER.color,
@@ -15154,21 +15245,25 @@ class SdTable {
15154
15245
  '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
15155
15246
  '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
15156
15247
  };
15157
- return (hAsync(Host, { key: 'd868318e2aeb7b3062a702a743f90bb55dbb00b8', style: hostStyle }, hAsync("div", { key: '5b2113ecd1fa52a6170ffcfac5f906fae7ef7548', class: "sd-table__container", style: {
15248
+ return (hAsync(Host, { key: '02d716bdac3832710bf58d63741aeeb4b04d434b', style: hostStyle }, hAsync("div", { key: '88faad346e032ca727375889aa0552a330f5799a', class: "sd-table__container", style: {
15158
15249
  '--table-width': this.width,
15159
- '--table-height': this.height,
15160
- '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
15161
- } }, hAsync("div", { key: '389d7f3508727fb76d9d9f98a73963c5556ff993', class: {
15250
+ '--table-height': effectiveTableHeight,
15251
+ '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
15252
+ } }, hAsync("div", { key: '783934f349e0da5bab77cbb44cc12f0dfeb9ec71', class: {
15162
15253
  'sd-table__wrapper': true,
15163
15254
  'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
15164
- } }, hAsync("div", { key: 'e9cdeecb5f318cb1af4e0d2e938e0098e1cc44d0', class: {
15255
+ } }, hAsync("div", { key: 'd3a76ad0e853c6adf16df633c0e0b7f5bb580f24', class: {
15165
15256
  'sd-table__scroll-container': true,
15166
15257
  'sd-table__scroll-container--loading': this.isLoading,
15167
- 'sd-table__scroll-container--no-data': this.rowCount === 0 && !this.isLoading,
15168
- } }, this.isLoading && (hAsync("div", { key: '40caec779763f90e1f48818e3f56e8daabc105a6', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'bf7a3cabb0023f0a1663dd0337f3399ace0e75e7', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: 'aac583c7876171a276645146e00afbc43d405607', class: "sd-table__no-data" }, hAsync("slot", { key: '31e18789beeed03bcfd7013c9386eefd6f51b2cd', name: "no-data" }, hAsync("span", { key: '07da091864e588f2ee60e8ea5ffd5ae34c968f68' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '69284f7f819477072450d1b6acbfe081abe4f1ef', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
15258
+ 'sd-table__scroll-container--no-data': isNoData,
15259
+ } }, this.isLoading && (hAsync("div", { key: 'cc77ce58ff0eebf3fc1d7dd9dbf11578f94d4dd1', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'bda7ed774342089a23d13b49a506b04527026275', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'f2ce89d0ae9eefe0f0f8509e477756cb74dbef86', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '84d739563123d0f0fc33166b1a6e80021ba06e1c', class: "sd-table__no-data" }, hAsync("div", { key: '3507f718a25b79c44fdf283fb41356ab72f2a384', class: "sd-table__no-data-content", ref: el => {
15260
+ this.noDataContentEl = el;
15261
+ if (el)
15262
+ this.syncNoDataContentObserver();
15263
+ } }, hAsync("slot", { key: '818129819b2ff4a6f9fc1224dc59a9aa5861296d', name: "no-data" }, hAsync("span", { key: 'c03cfb713e6dadd5ab4c60d7d27fd502d7aa9348' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '8864714a828069985bac6535bc40cbb043dfcb28', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
15169
15264
  this.pagination.rowsPerPage > 0 &&
15170
15265
  this.rowCount > 0 &&
15171
- !this.useVirtualScroll && (hAsync("div", { key: 'ff30e864526aa8c3fac2cc37499cea7aa6be1420', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'ad5badf1d5f518b0bf281e973c46b1381e82ae3c', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'd249e79cfda4c80cb4df9c353dc4f678a5ccb861', value: this.useInternalPagination
15266
+ !this.useVirtualScroll && (hAsync("div", { key: 'bdac4b4d551152ec7ee0cdc31bfb992748836928', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '2c60fff7f8ac3a3bd22da2173b8a9187bb686ddf', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '7a662f58e13c15e705341773570f899f503f12c0', value: this.useInternalPagination
15172
15267
  ? this.innerRowsPerPage
15173
15268
  : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
15174
15269
  if (!this.isRowsPerPageValue(e.detail))
@@ -15210,6 +15305,9 @@ class SdTable {
15210
15305
  "stickyHeader": [{
15211
15306
  "handleConfigChange": 0
15212
15307
  }],
15308
+ "dense": [{
15309
+ "handleConfigChange": 0
15310
+ }],
15213
15311
  "selected": [{
15214
15312
  "handleSelectedChange": 0
15215
15313
  }],
@@ -15239,6 +15337,7 @@ class SdTable {
15239
15337
  "pagination": [16],
15240
15338
  "useInternalPagination": [4, "use-internal-pagination"],
15241
15339
  "useRowsPerPageSelect": [4, "use-rows-per-page-select"],
15340
+ "dense": [4],
15242
15341
  "useVirtualScroll": [4, "use-virtual-scroll"],
15243
15342
  "rowHeight": [2, "row-height"],
15244
15343
  "virtualBuffer": [2, "virtual-buffer"],
@@ -15253,6 +15352,7 @@ class SdTable {
15253
15352
  "scrolledRight": [32],
15254
15353
  "rowCount": [32],
15255
15354
  "loadingScrollTop": [32],
15355
+ "noDataBodyHeight": [32],
15256
15356
  "autoThead": [32],
15257
15357
  "autoTbody": [32],
15258
15358
  "isRowSelected": [64],
@@ -15455,9 +15555,14 @@ class SdTabs {
15455
15555
  };
15456
15556
  }
15457
15557
  render() {
15458
- return (hAsync("div", { key: '9578cc6d422a304312f9ebc78622264d20d1fb45', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
15558
+ return (hAsync("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
15459
15559
  const badgeName = this.getBadgeName(tab);
15460
- return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (hAsync("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
15560
+ return (hAsync("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
15561
+ if (e.key === 'Enter' || e.key === ' ') {
15562
+ e.preventDefault();
15563
+ this.handleTabClick(tab);
15564
+ }
15565
+ } }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (hAsync("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
15461
15566
  })));
15462
15567
  }
15463
15568
  static get watchers() { return {
@@ -15486,7 +15591,6 @@ const tag = {
15486
15591
  height: "20",
15487
15592
  paddingX: "8",
15488
15593
  gap: "4",
15489
- icon: "12",
15490
15594
  typography: {
15491
15595
  fontSize: "11",
15492
15596
  fontWeight: "500",
@@ -15497,7 +15601,6 @@ const tag = {
15497
15601
  height: "24",
15498
15602
  paddingX: "8",
15499
15603
  gap: "4",
15500
- icon: "16",
15501
15604
  typography: {
15502
15605
  fontSize: "12",
15503
15606
  fontWeight: "700",
@@ -15509,7 +15612,6 @@ const tag = {
15509
15612
  height: "28",
15510
15613
  paddingX: "12",
15511
15614
  gap: "6",
15512
- icon: "16",
15513
15615
  typography: {
15514
15616
  fontSize: "14",
15515
15617
  fontWeight: "700",
@@ -15615,7 +15717,7 @@ const SQUARE_SIZE_CONFIG = {
15615
15717
  fontSize: `${tagTokens.tag.xs.typography.fontSize}px`,
15616
15718
  fontWeight: tagTokens.tag.xs.typography.fontWeight,
15617
15719
  lineHeight: `${tagTokens.tag.xs.typography.lineHeight}px`,
15618
- iconSize: Number(tagTokens.tag.xs.icon),
15720
+ iconSize: 12,
15619
15721
  radius: `${tagTokens.tag.xs.radius}px`,
15620
15722
  },
15621
15723
  sm: {
@@ -15625,7 +15727,7 @@ const SQUARE_SIZE_CONFIG = {
15625
15727
  fontSize: `${tagTokens.tag.sm.typography.fontSize}px`,
15626
15728
  fontWeight: tagTokens.tag.sm.typography.fontWeight,
15627
15729
  lineHeight: `${tagTokens.tag.sm.typography.lineHeight}px`,
15628
- iconSize: Number(tagTokens.tag.sm.icon),
15730
+ iconSize: 16,
15629
15731
  radius: `${tagTokens.tag.sm.radius}px`,
15630
15732
  },
15631
15733
  md: {
@@ -15635,7 +15737,7 @@ const SQUARE_SIZE_CONFIG = {
15635
15737
  fontSize: `${tagTokens.tag.md.typography.fontSize}px`,
15636
15738
  fontWeight: tagTokens.tag.md.typography.fontWeight,
15637
15739
  lineHeight: `${tagTokens.tag.md.typography.lineHeight}px`,
15638
- iconSize: Number(tagTokens.tag.md.icon),
15740
+ iconSize: 16,
15639
15741
  radius: `${tagTokens.tag.md.radius}px`,
15640
15742
  },
15641
15743
  };
@@ -15669,6 +15771,9 @@ class SdTag {
15669
15771
  label = '';
15670
15772
  icon;
15671
15773
  isLeft = true;
15774
+ componentWillLoad() {
15775
+ this.name = this.name ?? 'square_sm_grey';
15776
+ }
15672
15777
  get resolvedName() {
15673
15778
  if (!isTagName(this.name)) {
15674
15779
  throw new Error(`Invalid sd-tag name: "${this.name}"`);
@@ -15679,14 +15784,14 @@ class SdTag {
15679
15784
  return TAG_CONFIG[this.resolvedName];
15680
15785
  }
15681
15786
  renderIcon(color, size) {
15682
- if (!this.icon)
15787
+ if (this.icon == null)
15683
15788
  return null;
15684
15789
  return hAsync("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
15685
15790
  }
15686
15791
  render() {
15687
15792
  const config = this.resolvedConfig;
15688
15793
  const iconNode = this.renderIcon(config.icon, config.iconSize);
15689
- return (hAsync("span", { key: 'a52a06f79f448427ff3fe2a40c43d23a64e8ed62', class: "sd-tag", style: {
15794
+ return (hAsync("span", { key: '57f3c3f9ad53059fabff205cb44ffa3d1da9a711', class: "sd-tag", style: {
15690
15795
  '--sd-tag-background': config.background,
15691
15796
  '--sd-tag-content': config.content,
15692
15797
  '--sd-tag-height': config.height,
@@ -15696,7 +15801,7 @@ class SdTag {
15696
15801
  '--sd-tag-font-weight': config.fontWeight,
15697
15802
  '--sd-tag-line-height': config.lineHeight,
15698
15803
  '--sd-tag-radius': config.radius,
15699
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '8e737f385a32109ab58fe4da036dbf594079f217', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
15804
+ }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '3360f36d18f073cd24699b6b8db2e731fda351ac', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
15700
15805
  }
15701
15806
  static get style() { return sdTagCss(); }
15702
15807
  static get cmpMeta() { return {
@@ -15756,17 +15861,17 @@ class SdTbody {
15756
15861
  this.tableEl = table;
15757
15862
  const fromMethod = table?.getTableIdSync?.();
15758
15863
  const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
15759
- const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
15760
- (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
15864
+ const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
15865
+ (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
15761
15866
  '';
15762
- if (resolvedTableId && resolvedTableId !== this.tableId) {
15867
+ if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
15763
15868
  this.tableId = resolvedTableId;
15764
15869
  }
15765
15870
  }
15766
15871
  render() {
15767
- return (hAsync(Host, { key: 'f0dacb28bae712e8f4d65bad00846da9db593307', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'aec7d2277e617f1c186163d214e94559793b764c', class: { tbody: true } }, [
15872
+ return (hAsync(Host, { key: 'bdb686445ce324c6254891a385d6175c8cac06df', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '21a7772f0d43a358d9ae17459f0ff296324bfd82', class: { tbody: true } }, [
15768
15873
  this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
15769
- hAsync("slot", { key: '2c428e3624ac949ee201edfd02b5e8f0bcea2e48' }),
15874
+ hAsync("slot", { key: 'e38d8fe5d67a91d3fa5a25be98195da104660005' }),
15770
15875
  this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
15771
15876
  ])));
15772
15877
  }
@@ -15807,6 +15912,10 @@ class SdTd {
15807
15912
  // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
15808
15913
  // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
15809
15914
  sdClass;
15915
+ dividerLeft = false;
15916
+ dividerRight = false;
15917
+ // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
15918
+ useFrame = false;
15810
15919
  handleFieldChange(_newField, oldField) {
15811
15920
  this.syncSlotName();
15812
15921
  this.syncSpanRegistration();
@@ -15823,10 +15932,18 @@ class SdTd {
15823
15932
  handleSdClassChange() {
15824
15933
  this.syncCellClassRegistration();
15825
15934
  }
15935
+ handleDividerChange() {
15936
+ this.syncCellClassRegistration();
15937
+ }
15938
+ handleUseFieldChange() {
15939
+ this.syncUseFieldRegistration();
15940
+ this.requestParentTrUpdate();
15941
+ }
15826
15942
  componentWillLoad() {
15827
15943
  this.syncSlotName();
15828
15944
  this.syncSpanRegistration();
15829
15945
  this.syncCellClassRegistration();
15946
+ this.syncUseFieldRegistration();
15830
15947
  // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
15831
15948
  const parentTr = this.el.parentElement;
15832
15949
  if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
@@ -15835,6 +15952,7 @@ class SdTd {
15835
15952
  this.syncSlotName();
15836
15953
  this.syncSpanRegistration();
15837
15954
  this.syncCellClassRegistration();
15955
+ this.syncUseFieldRegistration();
15838
15956
  }
15839
15957
  // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
15840
15958
  // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
@@ -15842,12 +15960,14 @@ class SdTd {
15842
15960
  connectedCallback() {
15843
15961
  this.syncSpanRegistration();
15844
15962
  this.syncCellClassRegistration();
15963
+ this.syncUseFieldRegistration();
15845
15964
  }
15846
15965
  disconnectedCallback() {
15847
15966
  const table = this.findTable();
15848
- if (table && this.field && this.rowKey != null) {
15967
+ if (table != null && this.field !== '' && this.rowKey != null) {
15849
15968
  table.unregisterSpanSync?.(String(this.rowKey), this.field);
15850
15969
  table.unregisterCellClassSync?.(String(this.rowKey), this.field);
15970
+ table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
15851
15971
  this.requestParentTrUpdate();
15852
15972
  }
15853
15973
  }
@@ -15865,7 +15985,7 @@ class SdTd {
15865
15985
  }
15866
15986
  syncSpanRegistration() {
15867
15987
  const table = this.findTable();
15868
- if (!table?.registerSpanSync || !this.field || this.rowKey == null)
15988
+ if (table?.registerSpanSync == null || this.field === '' || this.rowKey == null)
15869
15989
  return;
15870
15990
  const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
15871
15991
  const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
@@ -15879,27 +15999,45 @@ class SdTd {
15879
15999
  return;
15880
16000
  const oldField = prevField ?? this.field;
15881
16001
  const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
15882
- if (oldField && oldRowKey != null) {
16002
+ if (oldField !== '' && oldRowKey != null) {
15883
16003
  table.unregisterCellClassSync?.(oldRowKey, oldField);
15884
16004
  }
15885
- if (!table.registerCellClassSync || !this.field || this.rowKey == null)
16005
+ if (!table.registerCellClassSync || this.field === '' || this.rowKey == null)
15886
16006
  return;
15887
- table.registerCellClassSync(String(this.rowKey), this.field, this.sdClass);
16007
+ const combinedClass = [
16008
+ this.sdClass,
16009
+ this.dividerLeft && 'td--divider-left',
16010
+ this.dividerRight && 'td--divider-right',
16011
+ ]
16012
+ .filter(Boolean)
16013
+ .join(' ') || undefined;
16014
+ table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
15888
16015
  this.requestParentTrUpdate();
15889
16016
  }
16017
+ syncUseFieldRegistration() {
16018
+ const table = this.findTable();
16019
+ if (!table || this.field === '' || this.rowKey == null)
16020
+ return;
16021
+ if (this.useFrame) {
16022
+ table.registerUseFrameSync?.(String(this.rowKey), this.field);
16023
+ }
16024
+ else {
16025
+ table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
16026
+ }
16027
+ }
15890
16028
  syncSlotName() {
15891
16029
  const table = this.el.closest('sd-table');
15892
16030
  const fromMethod = table?.getTableIdSync?.();
15893
16031
  const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
15894
- const tableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
15895
- (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
16032
+ const tableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
16033
+ (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
15896
16034
  '';
15897
- if (this.field && this.rowKey !== undefined && tableId) {
16035
+ if (this.field !== '' && this.rowKey !== undefined && tableId !== '') {
15898
16036
  this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
15899
16037
  }
15900
16038
  }
15901
16039
  render() {
15902
- return (hAsync(Host, { key: 'a8b4cb79a6b40119087fcba358a5c8daadb70fe8', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '959b53537662f22e6bb5fe8d775530c11cbdff3b' })));
16040
+ return (hAsync(Host, { key: '7d51ea5f02ba2df099f4440be26c2f0be8a73a6b', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '9a6a634e2bcd206ec9099c6be738c3853d0cbebf' })));
15903
16041
  }
15904
16042
  static get watchers() { return {
15905
16043
  "field": [{
@@ -15916,6 +16054,15 @@ class SdTd {
15916
16054
  }],
15917
16055
  "sdClass": [{
15918
16056
  "handleSdClassChange": 0
16057
+ }],
16058
+ "dividerLeft": [{
16059
+ "handleDividerChange": 0
16060
+ }],
16061
+ "dividerRight": [{
16062
+ "handleDividerChange": 0
16063
+ }],
16064
+ "useFrame": [{
16065
+ "handleUseFieldChange": 0
15919
16066
  }]
15920
16067
  }; }
15921
16068
  static get style() { return sdTdCss(); }
@@ -15928,7 +16075,10 @@ class SdTd {
15928
16075
  "align": [1],
15929
16076
  "rowspan": [2],
15930
16077
  "colspan": [2],
15931
- "sdClass": [1, "sd-class"]
16078
+ "sdClass": [1, "sd-class"],
16079
+ "dividerLeft": [4, "divider-left"],
16080
+ "dividerRight": [4, "divider-right"],
16081
+ "useFrame": [4, "use-frame"]
15932
16082
  },
15933
16083
  "$listeners$": undefined,
15934
16084
  "$lazyBundleId$": "-",
@@ -16010,16 +16160,21 @@ class SdTextLink {
16010
16160
  '--sd-text-link-text-decoration': typo.textDecoration,
16011
16161
  ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
16012
16162
  };
16013
- return (hAsync("span", { key: '8b02293383e914a0d2c9ac4c9fa2bf4d6bd56d97', class: {
16163
+ return (hAsync("span", { key: '11d2153cc91818c1214e21ffa14bd08249ad1116', role: "button", tabindex: this.disabled ? -1 : 0, class: {
16014
16164
  'sd-text-link': true,
16015
16165
  'sd-text-link--disabled': this.disabled,
16016
- }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '1f10b5c49d53009a68550e22167b0ce58c29d555', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: 'a5b528b595d036c079818fab432171e39a4c1a4e', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: 'fd1559e836bc3a6089043e5f4d9de12d364ab61f', class: "sd-text-link__arrow", style: {
16166
+ }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
16167
+ if (e.key === 'Enter' || e.key === ' ') {
16168
+ e.preventDefault();
16169
+ this.handleClick();
16170
+ }
16171
+ } }, this.icon && (hAsync("sd-icon", { key: '23972d53b4968c9bdef9b54dfa785e658ba117ef', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '5e99a6c1151093929086ec4398b93d7db590d959', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: 'b814759278cefe229a5321556374438f281ce0f3', class: "sd-text-link__arrow", style: {
16017
16172
  width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
16018
16173
  height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
16019
16174
  display: 'inline-flex',
16020
16175
  alignItems: 'center',
16021
16176
  justifyContent: 'center',
16022
- } }, hAsync("sd-icon", { key: '3af56ca5845d6d544c786142ae5842aca0720808', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
16177
+ } }, hAsync("sd-icon", { key: 'dfe3286eaeef9a176f5ff1a69950713e2712a550', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
16023
16178
  }
16024
16179
  static get style() { return sdTextLinkCss(); }
16025
16180
  static get cmpMeta() { return {
@@ -16166,7 +16321,7 @@ class SdTextarea {
16166
16321
  '--sd-system-size-field-sm-height': 'auto',
16167
16322
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
16168
16323
  };
16169
- return (hAsync("sd-field", { key: '3c5bd837d531d12fb0c7c4a80845752f9708f633', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '4bc1c0dad520d30f6758c057eecb25027aaa6615', class: "sd-textarea__content" }, hAsync("textarea", { key: 'cfe1004e8d765bd047f72642eb03b239059d7234', 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 }))));
16324
+ return (hAsync("sd-field", { key: '404175c94949c2510082df905c53e97ab835369c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ca92dfe613b2c006ecc4021bb2f07a2e4b04239a', class: "sd-textarea__content" }, hAsync("textarea", { key: 'a6d2bbdb9c88766182728cf3eb30ce7691fb048f', 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 }))));
16170
16325
  }
16171
16326
  static get watchers() { return {
16172
16327
  "value": [{
@@ -16249,7 +16404,7 @@ class SdThead {
16249
16404
  tableEl = null;
16250
16405
  handleColumnsChange(newCols) {
16251
16406
  if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
16252
- this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
16407
+ this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
16253
16408
  }
16254
16409
  }
16255
16410
  componentWillLoad() {
@@ -16257,7 +16412,7 @@ class SdThead {
16257
16412
  this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
16258
16413
  this.resolveConfig();
16259
16414
  if ((this.columnWidths ?? []).length === 0) {
16260
- this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
16415
+ this.columnWidths = this._columns.map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
16261
16416
  }
16262
16417
  }
16263
16418
  componentDidLoad() {
@@ -16274,10 +16429,10 @@ class SdThead {
16274
16429
  this.tableEl = table;
16275
16430
  const fromMethod = table?.getTableIdSync?.();
16276
16431
  const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
16277
- const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
16278
- (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
16432
+ const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
16433
+ (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
16279
16434
  '';
16280
- if (resolvedTableId && resolvedTableId !== this.tableId) {
16435
+ if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
16281
16436
  this.tableId = resolvedTableId;
16282
16437
  }
16283
16438
  }
@@ -16325,13 +16480,17 @@ class SdThead {
16325
16480
  const rightOffset = this.columnWidths
16326
16481
  .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
16327
16482
  .reduce((a, b) => a + b, 0);
16328
- return {
16483
+ const col = this.visibleColumns[colIdx];
16484
+ const base = {
16329
16485
  '--sticky-left-offset': `${leftOffset}px`,
16330
16486
  '--sticky-right-offset': `${rightOffset}px`,
16331
- 'width': `${this.columnWidths[colIdx]}px`,
16332
- 'minWidth': `${this.columnWidths[colIdx]}px`,
16333
- 'maxWidth': `${this.columnWidths[colIdx]}px`,
16334
16487
  };
16488
+ if (!col?.autoWidth) {
16489
+ base['width'] = `${this.columnWidths[colIdx]}px`;
16490
+ base['minWidth'] = `${this.columnWidths[colIdx]}px`;
16491
+ base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
16492
+ }
16493
+ return base;
16335
16494
  }
16336
16495
  handleResize(index, event, reversed = false) {
16337
16496
  if (this.tableEl?.handleResize) {
@@ -16362,6 +16521,7 @@ class SdThead {
16362
16521
  const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
16363
16522
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
16364
16523
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
16524
+ const lastColIdx = this.visibleColumns.length - 1;
16365
16525
  const headStyle = {
16366
16526
  '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
16367
16527
  '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
@@ -16377,27 +16537,33 @@ class SdThead {
16377
16537
  '--table-border-color': TABLE_BORDER.color,
16378
16538
  '--table-border-width': `${TABLE_BORDER.width}px`,
16379
16539
  };
16380
- return (hAsync(Host, { key: '99d8d19dcc65b811d323e21041421b2d57da9f91', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '7614b6726ec13e857b6b8654925b0ba3c89fba64', class: {
16540
+ return (hAsync(Host, { key: 'c2852fc7d6fe9e8116fabbbcc140f4db8319bfdc', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '970cb1c96145326f38b79636a72982b0e9c81fa0', class: {
16381
16541
  'thead': true,
16382
16542
  'thead--sticky': this._stickyHeader,
16383
- } }, hAsync("tr", { key: '68a615e7779947c1ee8cc26027c5bcded545e4d3', class: "tr" }, this._selectable && (hAsync("th", { key: 'd3bc4512a24652ee156104a0fd9891504ce314dd', class: {
16543
+ } }, hAsync("tr", { key: '839fb6e9fd68ef10dea1f1d470a6b3e707475a8d', class: "tr" }, this._selectable && (hAsync("th", { key: 'd669372261627013bc1b39157139d180b3d1a6c1', class: {
16384
16544
  'th': true,
16385
16545
  'th--selected': true,
16386
16546
  'sticky-left': true,
16387
16547
  'sticky-left-edge': stickyLeftCount === 0,
16388
16548
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
16389
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: 'de8f9b201aca60acbbb28a3233e964100109a92b', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
16549
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '6263984430b4aa53e6ac24fb0f6a6c05838a71d5', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
16390
16550
  'th': true,
16391
16551
  [`${col.thClass}`]: Boolean(col.thClass),
16392
16552
  'sticky-left': true,
16393
16553
  'sticky-left-edge': idx === stickyLeftCount - 1,
16394
16554
  'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
16395
- }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && (hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
16555
+ }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && idx !== lastColIdx && (
16556
+ // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
16557
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
16558
+ hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
16396
16559
  const actualColIdx = stickyLeftCount + relativeIdx;
16397
16560
  return (hAsync("th", { key: col.name, class: {
16398
16561
  th: true,
16399
16562
  [`${col.thClass}`]: Boolean(col.thClass),
16400
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && (hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
16563
+ }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && actualColIdx !== lastColIdx && (
16564
+ // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
16565
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
16566
+ hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
16401
16567
  }), stickyRightCols.map((col, relativeIdx) => {
16402
16568
  const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
16403
16569
  return (hAsync("th", { key: col.name, class: {
@@ -16406,7 +16572,10 @@ class SdThead {
16406
16572
  'sticky-right': true,
16407
16573
  'sticky-right-edge': relativeIdx === 0,
16408
16574
  'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
16409
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && (hAsync("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
16575
+ }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && (
16576
+ // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
16577
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
16578
+ hAsync("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
16410
16579
  })))));
16411
16580
  }
16412
16581
  static get watchers() { return {
@@ -16528,12 +16697,12 @@ class SdToast {
16528
16697
  const linkColor = typeConfig.linkColor ?? typeConfig.content;
16529
16698
  const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
16530
16699
  const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
16531
- return (hAsync("div", { key: '26f82a1da683136f605ddcc5c6c6a45266ae3158', style: {
16700
+ return (hAsync("div", { key: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
16532
16701
  '--sd-toast-bg': typeConfig.bg,
16533
16702
  '--sd-toast-text': typeConfig.content,
16534
16703
  '--sd-toast-icon': iconColor,
16535
16704
  '--sd-toast-link': linkColor,
16536
- } }, hAsync("div", { key: 'd2ed3c831b86e2ddee804f8ce770642ea698f7ce', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'a6dba347a064420c2747963da35ad0d50406f426', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'a05871f3711ae89050f11bdeb92d27b6c06354ba', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '11901cf0531ac2b658d2278ba27021f9714340d7', class: "sd-toast__content" }, hAsync("span", { key: '5edf234270283818732a5dbfaf581a27c8c084e6', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '518207a380b2d30c160a2a76649222655ec821cf', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: 'ed4847317cc9e0765a5964ab7ed245a37dce45ee', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '74a8f5d6c2392bdb7c59d754d72ed591fa68bf62', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
16705
+ } }, hAsync("div", { key: '92344f5bb95b0d4787591207f2e017d7dd177091', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '991db58b2cb019dd3a787e000e9d8813014bbb09', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '24d53cd77fdea82ec07663a8968493ec2b794751', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '70cfad4ef389cca798be9baeac99bfc41efcc615', class: "sd-toast__content" }, hAsync("span", { key: '5927023435b17dc25ee07630fc4ae4568aadd9b9', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '410c024fd81ebcc78175c1855a86f590566d1a81', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: 'd85287e7ef796a11f850a0ce5cde87f5881fa5c9', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '55a6bf6457bd89254f6eb01072d46a0edbb8b510', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
16537
16706
  }
16538
16707
  static get style() { return sdToastCss(); }
16539
16708
  static get cmpMeta() { return {
@@ -16786,7 +16955,7 @@ class SdToastContainer {
16786
16955
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
16787
16956
  const indexMap = new Map();
16788
16957
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
16789
- return (hAsync("div", { key: 'b734ca5768953e095f98a7f8312f6fdd7a24ae30', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
16958
+ return (hAsync("div", { key: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
16790
16959
  this.expanded = true;
16791
16960
  this.pauseTimers();
16792
16961
  }, onMouseLeave: () => {
@@ -16944,7 +17113,7 @@ class SdToggle {
16944
17113
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
16945
17114
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
16946
17115
  };
16947
- return (hAsync("label", { key: '958d824b5c502a578e1bb7a8fb0d30d59c2d8eda', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '81d5dc8ff0f9ca7e8a219f3c0e7bcce3a4ffc875', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
17116
+ return (hAsync("label", { key: 'b16577aa25863a9dc337314d9059328799c1cd1e', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '6130825b74df8a573f4e062671fd694508759e82', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
16948
17117
  }
16949
17118
  static get style() { return sdToggleCss(); }
16950
17119
  static get cmpMeta() { return {
@@ -17074,14 +17243,14 @@ class SdTooltip {
17074
17243
  const hasLabel = this.label !== undefined && this.label !== '';
17075
17244
  const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
17076
17245
  const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
17077
- return (hAsync(Fragment, { key: '09f5966903bddf016cf6c2b32d3514f312fd1c99' }, hAsync("div", { key: 'eef176cc0df93e5aaa272ccf18f137c23db767fd', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '1d5d14826c26e843ed3ddedca9f1a9369009477c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: 'b9ebcdb8f0798cb6c9ad0997caca6d0d20c3ece5', ref: el => (this.menuEl = el), class: {
17246
+ return (hAsync(Fragment, { key: 'ef33f9f183820d684f2805e40134a81f7149fc16' }, hAsync("div", { key: 'dd931825c55b0ee748c7ef45f15be0d6de37ad23', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '443dbbe8f0b9a66aaae9b8482a3f615d2d41e8ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '040bde0321b1fd35014db976aeaddc515d87c807', ref: el => (this.menuEl = el), class: {
17078
17247
  'sd-floating-menu': true,
17079
17248
  [`sd-floating-menu--${tooltipType}`]: true,
17080
17249
  [`sd-floating-menu--${placement}`]: true,
17081
17250
  }, style: {
17082
17251
  '--sd-floating-bg': typeConfig.bg,
17083
17252
  '--sd-floating-content': typeConfig.content,
17084
- }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'd3b68903dd12cdfe330e5f27cd4f5261ef3b1121', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '5228831f5660a1f4844550778fc98d707949a893' })), hAsync("div", { key: 'dfb78d2189d6e4d1301e95c7ab6976e173f48cdc', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
17253
+ }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'e802c09cc13ec3db29704197fa402588bf97d670', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'b698fbdba2cee74955f65ed7b04abeea8ccabee5' })), hAsync("div", { key: '97e856c543a8cdb880daae9ed0e461f5fd0f2b44', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
17085
17254
  }
17086
17255
  static get style() { return sdTooltipCss(); }
17087
17256
  static get cmpMeta() { return {
@@ -17110,7 +17279,7 @@ class SdTooltip {
17110
17279
  }; }
17111
17280
  }
17112
17281
 
17113
- const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:var(--table-body-height, 44px);padding:0 var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.td.td--last-row{border-bottom:none}`;
17282
+ const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:var(--table-body-height, 44px);padding:var(--table-body-padding-y, 0) var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.td.td--last-row{border-bottom:none}.tr--separator .td--separator{height:var(--table-separator-width, 6px);padding:0;background-color:var(--table-separator-color, #eeeeee);border-bottom:none}.td.td--before-separator{border-bottom:none}.td--divider-left{border-left:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}.td--divider-right{border-right:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}`;
17114
17283
 
17115
17284
  class SdTr {
17116
17285
  constructor(hostRef) {
@@ -17122,6 +17291,7 @@ class SdTr {
17122
17291
  stickyColumn;
17123
17292
  rowKey = '';
17124
17293
  row = {};
17294
+ separator;
17125
17295
  tableId = '';
17126
17296
  columnWidths = [];
17127
17297
  isVisible = true;
@@ -17131,16 +17301,32 @@ class SdTr {
17131
17301
  _stickyColumn = { left: 0, right: 0 };
17132
17302
  _scrolledLeft = false;
17133
17303
  _scrolledRight = false;
17304
+ _dense = false;
17134
17305
  tableEl = null;
17306
+ _prevRowKey = null;
17135
17307
  componentWillLoad() {
17136
17308
  this.syncTableContext();
17137
17309
  this.columnWidths = this.columnWidths ?? [];
17138
17310
  this.resolveConfig();
17139
- this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
17311
+ this.columnWidths = this._columns.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
17140
17312
  this.updateVisibilitySync();
17141
17313
  }
17142
17314
  componentDidLoad() {
17143
17315
  this.syncTableContext();
17316
+ if (this.separator) {
17317
+ const prev = this.el.previousElementSibling;
17318
+ if (prev?.tagName?.toLowerCase() === 'sd-tr') {
17319
+ const prevRowKey = prev.rowKey;
17320
+ this._prevRowKey = prevRowKey;
17321
+ this.tableEl?.registerSeparatorSync?.(prevRowKey);
17322
+ }
17323
+ }
17324
+ }
17325
+ disconnectedCallback() {
17326
+ if (this._prevRowKey !== null) {
17327
+ this.tableEl?.unregisterSeparatorSync?.(this._prevRowKey);
17328
+ this._prevRowKey = null;
17329
+ }
17144
17330
  }
17145
17331
  syncTableContext() {
17146
17332
  // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
@@ -17152,10 +17338,10 @@ class SdTr {
17152
17338
  this.tableEl = table;
17153
17339
  const fromMethod = table?.getTableIdSync?.();
17154
17340
  const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
17155
- const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
17156
- (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
17341
+ const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
17342
+ (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
17157
17343
  '';
17158
- if (resolvedTableId && resolvedTableId !== this.tableId) {
17344
+ if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
17159
17345
  this.tableId = resolvedTableId;
17160
17346
  }
17161
17347
  }
@@ -17166,6 +17352,7 @@ class SdTr {
17166
17352
  this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
17167
17353
  this._scrolledLeft = config?.scrolledLeft ?? false;
17168
17354
  this._scrolledRight = config?.scrolledRight ?? false;
17355
+ this._dense = config?.dense ?? false;
17169
17356
  if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
17170
17357
  this.columnWidths = [...config.columnWidths];
17171
17358
  }
@@ -17211,7 +17398,11 @@ class SdTr {
17211
17398
  }
17212
17399
  getCellValue(column) {
17213
17400
  const { field, format, name } = column;
17214
- const value = typeof field === 'function' ? field(this.row) : field ? this.row[field] : this.row[name];
17401
+ const value = typeof field === 'function'
17402
+ ? field(this.row)
17403
+ : field !== ''
17404
+ ? this.row[field]
17405
+ : this.row[name];
17215
17406
  return format ? format(value, this.row) : this.formatValue(value);
17216
17407
  }
17217
17408
  getStickyStyle(colIdx) {
@@ -17222,13 +17413,17 @@ class SdTr {
17222
17413
  const rightOffset = this.columnWidths
17223
17414
  .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
17224
17415
  .reduce((a, b) => a + b, 0);
17225
- return {
17416
+ const col = this.visibleColumns[colIdx];
17417
+ const base = {
17226
17418
  '--sticky-left-offset': `${leftOffset}px`,
17227
17419
  '--sticky-right-offset': `${rightOffset}px`,
17228
- 'width': `${this.columnWidths[colIdx]}px`,
17229
- 'minWidth': `${this.columnWidths[colIdx]}px`,
17230
- 'maxWidth': `${this.columnWidths[colIdx]}px`,
17231
17420
  };
17421
+ if (!col?.autoWidth) {
17422
+ base['width'] = `${this.columnWidths[colIdx]}px`;
17423
+ base['minWidth'] = `${this.columnWidths[colIdx]}px`;
17424
+ base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
17425
+ }
17426
+ return base;
17232
17427
  }
17233
17428
  isSelected() {
17234
17429
  if (this.tableEl?.isRowSelectedSync) {
@@ -17258,6 +17453,14 @@ class SdTr {
17258
17453
  const fieldName = typeof col.field === 'string' ? col.field : col.name;
17259
17454
  return this.tableEl.getCellClassSync(this.rowKey, fieldName);
17260
17455
  }
17456
+ expandCellClass(classStr) {
17457
+ if (classStr == null || classStr === '')
17458
+ return {};
17459
+ return Object.fromEntries(classStr
17460
+ .split(/\s+/)
17461
+ .filter(Boolean)
17462
+ .map(c => [c, true]));
17463
+ }
17261
17464
  isVisualLastRow(col) {
17262
17465
  if (!this.tableEl?.isVisualLastRowSync)
17263
17466
  return false;
@@ -17272,6 +17475,17 @@ class SdTr {
17272
17475
  return false;
17273
17476
  return this.tableEl.isVisualLastRowSync(this.rowKey, '');
17274
17477
  }
17478
+ isVisualLastRowBeforeSeparator(col) {
17479
+ if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
17480
+ return false;
17481
+ const fieldName = typeof col.field === 'string' ? col.field : col.name;
17482
+ return this.tableEl.isVisualLastRowBeforeSeparatorSync(this.rowKey, fieldName);
17483
+ }
17484
+ isVisualLastRowBeforeSeparatorForSelfRow() {
17485
+ if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
17486
+ return false;
17487
+ return this.tableEl.isVisualLastRowBeforeSeparatorSync(this.rowKey, '');
17488
+ }
17275
17489
  render() {
17276
17490
  const stickyLeftCount = this._stickyColumn.left || 0;
17277
17491
  const stickyRightCount = this._stickyColumn.right || 0;
@@ -17279,9 +17493,13 @@ class SdTr {
17279
17493
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
17280
17494
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
17281
17495
  const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
17496
+ const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
17497
+ const effectiveDense = this._dense && !isUseFrameRow;
17498
+ const bodyLayout = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
17282
17499
  const rowStyle = {
17283
- display: this.isVisible ? '' : 'none',
17284
- '--table-body-height': `${TABLE_BODY_LAYOUT.default.height}px`,
17500
+ 'display': this.isVisible ? '' : 'none',
17501
+ '--table-body-height': `${bodyLayout.height}px`,
17502
+ '--table-body-padding-y': `${bodyLayout.paddingY}px`,
17285
17503
  '--table-body-padding-x': `${TABLE_BODY_LAYOUT.paddingX}px`,
17286
17504
  '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
17287
17505
  '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
@@ -17290,15 +17508,22 @@ class SdTr {
17290
17508
  '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
17291
17509
  '--table-border-color': TABLE_BORDER.color,
17292
17510
  '--table-border-width': `${TABLE_BORDER.width}px`,
17511
+ '--table-separator-color': TABLE_SEPARATOR.color,
17512
+ '--table-separator-width': `${TABLE_SEPARATOR.width}px`,
17293
17513
  };
17294
- return (hAsync(Host, { key: '30e4127b281770d12fab9e9cfd2cdf667eff8790', style: rowStyle }, hAsync("tr", { key: '1072ce3f1b296e2278b7fc92a44d32da223ef119', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { key: '4e3a37a320df97378a1ed311c0a7b8f744bd26bc', class: {
17514
+ if (this.separator) {
17515
+ const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
17516
+ return (hAsync(Host, { style: rowStyle }, hAsync("tr", { class: "tr tr--separator" }, hAsync("td", { colSpan: totalCols, class: "td td--separator" }))));
17517
+ }
17518
+ return (hAsync(Host, { style: rowStyle }, hAsync("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { class: {
17295
17519
  'td': true,
17296
17520
  'td--selected': true,
17297
17521
  'td--last-row': this.isVisualLastRowForSelfRow(),
17522
+ 'td--before-separator': this.isVisualLastRowBeforeSeparatorForSelfRow(),
17298
17523
  'sticky-left': true,
17299
17524
  'sticky-left-edge': stickyLeftCount === 0,
17300
17525
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
17301
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: 'b1a775462c4869f75480908bccd428714c63c257', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
17526
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
17302
17527
  if (this.isCovered(idx))
17303
17528
  return null;
17304
17529
  const span = this.getSpanFor(col);
@@ -17307,11 +17532,12 @@ class SdTr {
17307
17532
  'td': true,
17308
17533
  [`td--${col.align || 'left'}`]: true,
17309
17534
  'td--last-row': this.isVisualLastRow(col),
17535
+ 'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
17310
17536
  'sticky-left': true,
17311
17537
  'sticky-left-edge': idx === stickyLeftCount - 1,
17312
17538
  'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
17313
17539
  [`${col.tdClass}`]: Boolean(col.tdClass),
17314
- [`${sdCellClass}`]: Boolean(sdCellClass),
17540
+ ...this.expandCellClass(sdCellClass),
17315
17541
  }, style: this.getStickyStyle(idx) }, hAsync("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
17316
17542
  }), middleCols.map((col, relativeIdx) => {
17317
17543
  const actualColIdx = stickyLeftCount + relativeIdx;
@@ -17324,8 +17550,9 @@ class SdTr {
17324
17550
  'td': true,
17325
17551
  [`td--${col.align || 'left'}`]: true,
17326
17552
  'td--last-row': this.isVisualLastRow(col),
17553
+ 'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
17327
17554
  [`${col.tdClass}`]: Boolean(col.tdClass),
17328
- [`${sdCellClass}`]: Boolean(sdCellClass),
17555
+ ...this.expandCellClass(sdCellClass),
17329
17556
  }, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
17330
17557
  }), stickyRightCols.map((col, relativeIdx) => {
17331
17558
  const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
@@ -17338,11 +17565,12 @@ class SdTr {
17338
17565
  'td': true,
17339
17566
  [`td--${col.align || 'left'}`]: true,
17340
17567
  'td--last-row': this.isVisualLastRow(col),
17568
+ 'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
17341
17569
  'sticky-right': true,
17342
17570
  'sticky-right-edge': relativeIdx === 0,
17343
17571
  'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
17344
17572
  [`${col.tdClass}`]: Boolean(col.tdClass),
17345
- [`${sdCellClass}`]: Boolean(sdCellClass),
17573
+ ...this.expandCellClass(sdCellClass),
17346
17574
  }, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
17347
17575
  }))));
17348
17576
  }
@@ -17356,6 +17584,7 @@ class SdTr {
17356
17584
  "stickyColumn": [16],
17357
17585
  "rowKey": [1, "row-key"],
17358
17586
  "row": [16],
17587
+ "separator": [4],
17359
17588
  "tableId": [32],
17360
17589
  "columnWidths": [32],
17361
17590
  "isVisible": [32],
@@ -17365,6 +17594,7 @@ class SdTr {
17365
17594
  "_stickyColumn": [32],
17366
17595
  "_scrolledLeft": [32],
17367
17596
  "_scrolledRight": [32],
17597
+ "_dense": [32],
17368
17598
  "refreshConfig": [64],
17369
17599
  "bumpSpansVersion": [64],
17370
17600
  "updateVisibility": [64],
@@ -17390,7 +17620,6 @@ registerComponents([
17390
17620
  SdConfirmModal,
17391
17621
  SdDateBox,
17392
17622
  SdDatePicker,
17393
- SdDatePickerCalendar,
17394
17623
  SdDatePickerTrigger,
17395
17624
  SdDateRangePicker,
17396
17625
  SdDateRangePickerCalendar,