@sellmate/design-system 1.0.75 → 1.0.77

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 (460) hide show
  1. package/dist/cjs/design-system.cjs.js +2 -2
  2. package/dist/cjs/{index-Dptupbm0.js → index-CaGGRpd8.js} +1 -1
  3. package/dist/cjs/index.cjs.js +5 -0
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/sd-action-modal.cjs.entry.js +2 -2
  6. package/dist/cjs/sd-badge.cjs.entry.js +2 -2
  7. package/dist/cjs/sd-barcode-input.cjs.entry.js +2 -2
  8. package/dist/cjs/sd-button-v2_2.cjs.entry.js +3 -3
  9. package/dist/cjs/sd-button_4.cjs.entry.js +10 -13
  10. package/dist/cjs/sd-calendar.cjs.entry.js +1 -1
  11. package/dist/cjs/sd-card.cjs.entry.js +2 -2
  12. package/dist/cjs/sd-checkbox.cjs.entry.js +7 -4
  13. package/dist/cjs/sd-chip.cjs.entry.js +2 -2
  14. package/dist/cjs/sd-circle-progress.cjs.entry.js +3 -3
  15. package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +4 -4
  16. package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
  17. package/dist/cjs/sd-date-picker-calendar.cjs.entry.js +2 -2
  18. package/dist/cjs/sd-date-picker-trigger.cjs.entry.js +3 -3
  19. package/dist/cjs/sd-date-picker.cjs.entry.js +3 -3
  20. package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +2 -2
  21. package/dist/cjs/sd-date-range-picker.cjs.entry.js +1 -1
  22. package/dist/cjs/sd-dropdown-button.cjs.entry.js +94 -7
  23. package/dist/cjs/sd-file-picker.cjs.entry.js +2 -2
  24. package/dist/cjs/sd-form.cjs.entry.js +1 -1
  25. package/dist/cjs/sd-ghost-button.cjs.entry.js +11 -6
  26. package/dist/cjs/sd-guide.cjs.entry.js +2 -2
  27. package/dist/cjs/{sd-input_2.cjs.entry.js → sd-input.cjs.entry.js} +3 -43
  28. package/dist/cjs/sd-linear-progress.cjs.entry.js +3 -3
  29. package/dist/cjs/sd-loading-container.cjs.entry.js +3 -3
  30. package/dist/cjs/sd-modal-container.cjs.entry.js +77 -69
  31. package/dist/cjs/sd-number-input.cjs.entry.js +4 -4
  32. package/dist/cjs/sd-pagination_5.cjs.entry.js +921 -0
  33. package/dist/cjs/sd-popover.cjs.entry.js +2 -2
  34. package/dist/cjs/sd-portal.cjs.entry.js +2 -2
  35. package/dist/cjs/sd-radio-button.cjs.entry.js +7 -2
  36. package/dist/cjs/sd-radio-group.cjs.entry.js +1 -1
  37. package/dist/cjs/sd-radio.cjs.entry.js +1 -1
  38. package/dist/cjs/{sd-select-v2-list-item_4.cjs.entry.js → sd-select-list-item_4.cjs.entry.js} +108 -48
  39. package/dist/cjs/sd-switch.cjs.entry.js +2 -2
  40. package/dist/cjs/sd-table.cjs.entry.js +178 -21
  41. package/dist/cjs/sd-table.config-hnNodd18.js +105 -0
  42. package/dist/cjs/sd-tabs.cjs.entry.js +2 -2
  43. package/dist/cjs/sd-tag.cjs.entry.js +3 -3
  44. package/dist/cjs/sd-td.cjs.entry.js +54 -2
  45. package/dist/cjs/sd-text-link.cjs.entry.js +4 -4
  46. package/dist/cjs/sd-textarea.cjs.entry.js +2 -2
  47. package/dist/cjs/sd-toast-container.cjs.entry.js +2 -2
  48. package/dist/cjs/sd-toast.cjs.entry.js +3 -3
  49. package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
  50. package/dist/cjs/{system-BbCUNhDJ.js → system-DRemSdU1.js} +7 -1
  51. package/dist/cjs/{tooltipArrow-DuANjCfc.js → tooltipArrow-BEff0q3z.js} +1 -1
  52. package/dist/collection/collection-manifest.json +11 -21
  53. package/dist/collection/components/sd-action-modal/sd-action-modal.js +1 -1
  54. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  55. package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +1 -1
  56. package/dist/collection/components/sd-button-v2/sd-button-v2.js +2 -2
  57. package/dist/collection/components/sd-card/sd-card.js +1 -1
  58. package/dist/collection/components/sd-checkbox/sd-checkbox.js +6 -3
  59. package/dist/collection/components/sd-chip/sd-chip.js +1 -1
  60. package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
  61. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
  62. package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js +1 -1
  63. package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
  64. package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
  65. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
  66. package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js +3 -3
  67. package/dist/collection/components/sd-field/sd-field.js +5 -8
  68. package/dist/collection/components/sd-file-picker/sd-file-picker.js +1 -1
  69. package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
  70. package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +10 -5
  71. package/dist/collection/components/sd-input/sd-input.js +2 -2
  72. package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
  73. package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
  74. package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
  75. package/dist/collection/components/sd-modal-container/sd-modal-container.js +77 -71
  76. package/dist/collection/components/sd-number-input/sd-number-input.js +3 -3
  77. package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
  78. package/dist/collection/components/sd-portal/sd-portal.js +1 -1
  79. package/dist/collection/components/sd-radio-button/sd-radio-button.js +6 -1
  80. package/dist/collection/components/{sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.css → sd-select/sd-select-list-item/sd-select-list-item.css} +13 -13
  81. package/dist/collection/components/{sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js → sd-select/sd-select-list-item/sd-select-list-item.js} +28 -28
  82. package/dist/collection/components/{sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.css → sd-select/sd-select-list-item-search/sd-select-list-item-search.css} +11 -11
  83. package/dist/collection/components/{sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js → sd-select/sd-select-list-item-search/sd-select-list-item-search.js} +13 -13
  84. package/dist/collection/components/{sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.css → sd-select/sd-select-listbox/sd-select-listbox.css} +3 -3
  85. package/dist/collection/components/{sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js → sd-select/sd-select-listbox/sd-select-listbox.js} +133 -33
  86. package/dist/collection/components/{sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.css → sd-select/sd-select-trigger/sd-select-trigger.css} +7 -7
  87. package/dist/collection/components/{sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js → sd-select/sd-select-trigger/sd-select-trigger.js} +12 -12
  88. package/dist/collection/components/sd-select/sd-select.css +3 -47
  89. package/dist/collection/components/sd-select/sd-select.js +413 -294
  90. package/dist/collection/components/sd-switch/sd-switch.js +1 -1
  91. package/dist/collection/components/sd-table/sd-table.config.js +81 -0
  92. package/dist/collection/components/sd-table/sd-table.css +17 -9
  93. package/dist/collection/components/sd-table/sd-table.js +179 -21
  94. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.css +0 -8
  95. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +9 -5
  96. package/dist/collection/components/sd-table/sd-td/sd-td.js +91 -1
  97. package/dist/collection/components/sd-table/sd-thead/sd-thead.css +16 -12
  98. package/dist/collection/components/sd-table/sd-thead/sd-thead.js +58 -9
  99. package/dist/collection/components/sd-table/sd-tr/sd-tr.css +11 -3
  100. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +75 -12
  101. package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
  102. package/dist/collection/components/sd-tag/sd-tag.js +2 -2
  103. package/dist/collection/components/sd-text-link/sd-text-link.js +3 -3
  104. package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
  105. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  106. package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
  107. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  108. package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
  109. package/dist/collection/utils/modal.js +5 -0
  110. package/dist/collection/utils/testing/index.js +2 -0
  111. package/dist/collection/utils/testing/mocks.js +35 -0
  112. package/dist/components/index.js +1 -1
  113. package/dist/components/p-B6KZfiQ5.js +1 -0
  114. package/dist/components/{p-CTwEbxRN.js → p-BEOrkEV1.js} +1 -1
  115. package/dist/components/p-BJJvCBQs.js +1 -0
  116. package/dist/components/p-BM_PRj8W.js +1 -0
  117. package/dist/components/p-BR_ZAr48.js +1 -0
  118. package/dist/components/p-BeNJfxnb.js +1 -0
  119. package/dist/components/{p-BLwIhCdO.js → p-BfoLbEZx.js} +1 -1
  120. package/dist/components/p-Bm8Fue-a.js +1 -0
  121. package/dist/components/{p-DaAhgdib.js → p-BynnUMVZ.js} +1 -1
  122. package/dist/components/{p-D5HLYqT-.js → p-C52iEAqd.js} +1 -1
  123. package/dist/components/p-C8Dy_x5h.js +1 -0
  124. package/dist/components/{p-C3dI7f7C.js → p-CJAQuJik.js} +1 -1
  125. package/dist/components/{p-iAWNMLXh.js → p-CJqZcEqD.js} +1 -1
  126. package/dist/components/{p-H-9uoufd.js → p-CNm5Qbf-.js} +1 -1
  127. package/dist/components/{p-B3xZdEDI.js → p-CQy5JErK.js} +1 -1
  128. package/dist/components/{p-BgFLSKqC.js → p-CZxeqYuw.js} +1 -1
  129. package/dist/components/{p-SDBnyM8D.js → p-CkgQbCMR.js} +1 -1
  130. package/dist/components/p-CvnC61M9.js +1 -0
  131. package/dist/components/{p-6LtMeKKA.js → p-D1SJ2TMu.js} +1 -1
  132. package/dist/components/{p-BXdEjuI_.js → p-D2FOkhao.js} +1 -1
  133. package/dist/components/p-D66nhMt3.js +1 -0
  134. package/dist/components/p-DDDZWrWj.js +1 -0
  135. package/dist/components/p-DK3vj3bG.js +1 -0
  136. package/dist/components/{p-CZPR_5mk.js → p-DcuLMUdl.js} +1 -1
  137. package/dist/components/p-DxXwz3cY.js +1 -0
  138. package/dist/components/p-NlCzTjK4.js +1 -0
  139. package/dist/components/{p-BZm6KN1s.js → p-RpjjrX78.js} +1 -1
  140. package/dist/components/{p-BM0sVq5Z.js → p-ZH78tQXS.js} +1 -1
  141. package/dist/components/{p-DQfNwvwx.js → p-ZLsQA11g.js} +1 -1
  142. package/dist/components/{p-DdJyzIYe.js → p-eGToaKCt.js} +1 -1
  143. package/dist/components/p-hTUSl23P.js +1 -0
  144. package/dist/components/p-mqa9-iql.js +1 -0
  145. package/dist/components/sd-action-modal.js +1 -1
  146. package/dist/components/sd-badge.js +1 -1
  147. package/dist/components/sd-barcode-input.js +1 -1
  148. package/dist/components/sd-button-v2.js +1 -1
  149. package/dist/components/sd-button.js +1 -1
  150. package/dist/components/sd-calendar.js +1 -1
  151. package/dist/components/sd-card.js +1 -1
  152. package/dist/components/sd-checkbox.js +1 -1
  153. package/dist/components/sd-chip.js +1 -1
  154. package/dist/components/sd-circle-progress.js +1 -1
  155. package/dist/components/sd-confirm-modal.js +1 -1
  156. package/dist/components/sd-date-box.js +1 -1
  157. package/dist/components/sd-date-picker-calendar.js +1 -1
  158. package/dist/components/sd-date-picker-trigger.js +1 -1
  159. package/dist/components/sd-date-picker.js +1 -1
  160. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  161. package/dist/components/sd-date-range-picker.js +1 -1
  162. package/dist/components/sd-dropdown-button.js +1 -1
  163. package/dist/components/sd-field.js +1 -1
  164. package/dist/components/sd-file-picker.js +1 -1
  165. package/dist/components/sd-floating-portal.js +1 -1
  166. package/dist/components/sd-form.js +1 -1
  167. package/dist/components/sd-ghost-button.js +1 -1
  168. package/dist/components/sd-guide.js +1 -1
  169. package/dist/components/sd-icon.js +1 -1
  170. package/dist/components/sd-input.js +1 -1
  171. package/dist/components/sd-linear-progress.js +1 -1
  172. package/dist/components/sd-loading-container.js +1 -1
  173. package/dist/components/sd-loading-modal.js +1 -1
  174. package/dist/components/sd-modal-container.js +1 -1
  175. package/dist/components/sd-number-input.js +1 -1
  176. package/dist/components/sd-pagination.js +1 -1
  177. package/dist/components/sd-popover.js +1 -1
  178. package/dist/components/sd-portal.js +1 -1
  179. package/dist/components/sd-radio-button.js +1 -1
  180. package/dist/components/sd-radio-group.js +1 -1
  181. package/dist/components/sd-radio.js +1 -1
  182. package/dist/components/sd-select-list-item-search.d.ts +11 -0
  183. package/dist/components/sd-select-list-item-search.js +1 -0
  184. package/dist/components/{sd-select-multiple.d.ts → sd-select-list-item.d.ts} +4 -4
  185. package/dist/components/sd-select-list-item.js +1 -0
  186. package/dist/components/{sd-select-option.d.ts → sd-select-listbox.d.ts} +4 -4
  187. package/dist/components/sd-select-listbox.js +1 -0
  188. package/dist/components/{sd-select-group.d.ts → sd-select-trigger.d.ts} +4 -4
  189. package/dist/components/sd-select-trigger.js +1 -0
  190. package/dist/components/sd-select.js +1 -1
  191. package/dist/components/sd-switch.js +1 -1
  192. package/dist/components/sd-table.js +1 -1
  193. package/dist/components/sd-tabs.js +1 -1
  194. package/dist/components/sd-tag.js +1 -1
  195. package/dist/components/sd-tbody.js +1 -1
  196. package/dist/components/sd-td.js +1 -1
  197. package/dist/components/sd-text-link.js +1 -1
  198. package/dist/components/sd-textarea.js +1 -1
  199. package/dist/components/sd-thead.js +1 -1
  200. package/dist/components/sd-toast-container.js +1 -1
  201. package/dist/components/sd-toast.js +1 -1
  202. package/dist/components/sd-toggle.js +1 -1
  203. package/dist/components/sd-tooltip.js +1 -1
  204. package/dist/components/sd-tr.js +1 -1
  205. package/dist/design-system/design-system.css +1 -1
  206. package/dist/design-system/design-system.esm.js +1 -1
  207. package/dist/design-system/index.esm.js +1 -1
  208. package/dist/design-system/{p-dad07e1a.entry.js → p-120df622.entry.js} +1 -1
  209. package/dist/design-system/{p-6af9e663.entry.js → p-28b727df.entry.js} +1 -1
  210. package/dist/design-system/{p-05a1c092.entry.js → p-2cd2fb76.entry.js} +1 -1
  211. package/dist/design-system/p-3f9d60a0.entry.js +1 -0
  212. package/dist/design-system/p-400b3676.entry.js +1 -0
  213. package/dist/design-system/{p-2eb910ec.entry.js → p-41ea33fb.entry.js} +1 -1
  214. package/dist/design-system/{p-c7bcb232.entry.js → p-42906763.entry.js} +1 -1
  215. package/dist/design-system/p-42a8f8a2.entry.js +1 -0
  216. package/dist/design-system/{p-fdcfaa7c.entry.js → p-43ffe7b0.entry.js} +1 -1
  217. package/dist/design-system/p-4ad9a5b8.entry.js +1 -0
  218. package/dist/design-system/{p-3a9559ee.entry.js → p-504033e8.entry.js} +1 -1
  219. package/dist/design-system/p-64d3c984.entry.js +1 -0
  220. package/dist/design-system/{p-ce3d0f9c.entry.js → p-67f88b1a.entry.js} +1 -1
  221. package/dist/design-system/{p-6a3f8588.entry.js → p-68d0fa15.entry.js} +1 -1
  222. package/dist/design-system/p-6dc47f4c.entry.js +1 -0
  223. package/dist/design-system/{p-d6896893.entry.js → p-6f9b0b32.entry.js} +1 -1
  224. package/dist/design-system/{p-3ca5c303.entry.js → p-704dc1f1.entry.js} +1 -1
  225. package/dist/design-system/{p-17cd3a33.entry.js → p-732ee178.entry.js} +1 -1
  226. package/dist/design-system/{p-8200b5f2.entry.js → p-7d892b68.entry.js} +1 -1
  227. package/dist/design-system/{p-16a15368.entry.js → p-809e616c.entry.js} +1 -1
  228. package/dist/design-system/p-80c51996.entry.js +1 -0
  229. package/dist/design-system/{p-b745cd95.entry.js → p-889971bc.entry.js} +1 -1
  230. package/dist/design-system/{p-33bec0e3.entry.js → p-8abc2413.entry.js} +1 -1
  231. package/dist/design-system/{p-bb492ba7.entry.js → p-970f9ea5.entry.js} +1 -1
  232. package/dist/design-system/p-BHmXH7dZ.js +2 -0
  233. package/dist/design-system/{p-BgFLSKqC.js → p-CZxeqYuw.js} +1 -1
  234. package/dist/design-system/p-DDDZWrWj.js +1 -0
  235. package/dist/design-system/p-DG7d45mX.js +1 -0
  236. package/dist/design-system/{p-280dc548.entry.js → p-a69d6a99.entry.js} +1 -1
  237. package/dist/design-system/{p-49f78122.entry.js → p-ab5a94c8.entry.js} +1 -1
  238. package/dist/design-system/{p-f4a00276.entry.js → p-ae626d30.entry.js} +1 -1
  239. package/dist/design-system/p-b9a870bf.entry.js +1 -0
  240. package/dist/design-system/{p-97ebf578.entry.js → p-bab814c5.entry.js} +1 -1
  241. package/dist/design-system/{p-eb29dc9f.entry.js → p-c21f30de.entry.js} +1 -1
  242. package/dist/design-system/p-c863a31d.entry.js +1 -0
  243. package/dist/design-system/{p-a8bde8d9.entry.js → p-cab35b9a.entry.js} +1 -1
  244. package/dist/design-system/p-cea424f6.entry.js +1 -0
  245. package/dist/design-system/p-d8bb2cb4.entry.js +1 -0
  246. package/dist/design-system/p-dd63e10f.entry.js +1 -0
  247. package/dist/design-system/p-e04302a2.entry.js +1 -0
  248. package/dist/design-system/{p-5f6379e9.entry.js → p-e84d1bac.entry.js} +1 -1
  249. package/dist/design-system/p-ebbffddb.entry.js +1 -0
  250. package/dist/design-system/{p-d1dfa0e1.entry.js → p-ec02b3e8.entry.js} +1 -1
  251. package/dist/design-system/{p-8ff967f7.entry.js → p-ed1c4625.entry.js} +1 -1
  252. package/dist/design-system/{p-2d154fe0.entry.js → p-f06038fd.entry.js} +1 -1
  253. package/dist/design-system/{p-2cd2f2dd.entry.js → p-f80d10ad.entry.js} +1 -1
  254. package/dist/design-system/p-fbb7e090.entry.js +1 -0
  255. package/dist/design-system/{p-a9fc2c21.entry.js → p-feb84f87.entry.js} +1 -1
  256. package/dist/esm/design-system.js +3 -3
  257. package/dist/esm/{index-Bp7ytJz5.js → index-BHmXH7dZ.js} +1 -1
  258. package/dist/esm/index.js +5 -0
  259. package/dist/esm/loader.js +3 -3
  260. package/dist/esm/sd-action-modal.entry.js +2 -2
  261. package/dist/esm/sd-badge.entry.js +2 -2
  262. package/dist/esm/sd-barcode-input.entry.js +2 -2
  263. package/dist/esm/sd-button-v2_2.entry.js +3 -3
  264. package/dist/esm/sd-button_4.entry.js +10 -13
  265. package/dist/esm/sd-calendar.entry.js +1 -1
  266. package/dist/esm/sd-card.entry.js +2 -2
  267. package/dist/esm/sd-checkbox.entry.js +7 -4
  268. package/dist/esm/sd-chip.entry.js +2 -2
  269. package/dist/esm/sd-circle-progress.entry.js +3 -3
  270. package/dist/esm/sd-confirm-modal_2.entry.js +4 -4
  271. package/dist/esm/sd-date-box.entry.js +1 -1
  272. package/dist/esm/sd-date-picker-calendar.entry.js +2 -2
  273. package/dist/esm/sd-date-picker-trigger.entry.js +3 -3
  274. package/dist/esm/sd-date-picker.entry.js +3 -3
  275. package/dist/esm/sd-date-range-picker-calendar.entry.js +2 -2
  276. package/dist/esm/sd-date-range-picker.entry.js +1 -1
  277. package/dist/esm/sd-dropdown-button.entry.js +93 -6
  278. package/dist/esm/sd-file-picker.entry.js +2 -2
  279. package/dist/esm/sd-form.entry.js +1 -1
  280. package/dist/esm/sd-ghost-button.entry.js +11 -6
  281. package/dist/esm/sd-guide.entry.js +2 -2
  282. package/dist/esm/{sd-input_2.entry.js → sd-input.entry.js} +4 -43
  283. package/dist/esm/sd-linear-progress.entry.js +3 -3
  284. package/dist/esm/sd-loading-container.entry.js +3 -3
  285. package/dist/esm/sd-modal-container.entry.js +77 -69
  286. package/dist/esm/sd-number-input.entry.js +4 -4
  287. package/dist/esm/sd-pagination_5.entry.js +915 -0
  288. package/dist/esm/sd-popover.entry.js +2 -2
  289. package/dist/esm/sd-portal.entry.js +2 -2
  290. package/dist/esm/sd-radio-button.entry.js +7 -2
  291. package/dist/esm/sd-radio-group.entry.js +1 -1
  292. package/dist/esm/sd-radio.entry.js +1 -1
  293. package/dist/esm/{sd-select-v2-list-item_4.entry.js → sd-select-list-item_4.entry.js} +105 -45
  294. package/dist/esm/sd-switch.entry.js +2 -2
  295. package/dist/esm/sd-table.config-DKkzCQwJ.js +94 -0
  296. package/dist/esm/sd-table.entry.js +178 -21
  297. package/dist/esm/sd-tabs.entry.js +2 -2
  298. package/dist/esm/sd-tag.entry.js +3 -3
  299. package/dist/esm/sd-td.entry.js +54 -2
  300. package/dist/esm/sd-text-link.entry.js +4 -4
  301. package/dist/esm/sd-textarea.entry.js +2 -2
  302. package/dist/esm/sd-toast-container.entry.js +2 -2
  303. package/dist/esm/sd-toast.entry.js +3 -3
  304. package/dist/esm/sd-toggle.entry.js +2 -2
  305. package/dist/esm/{system-BgFLSKqC.js → system-CZxeqYuw.js} +7 -1
  306. package/dist/esm/{tooltipArrow-BHRQVawd.js → tooltipArrow-DZ-N5HBq.js} +1 -1
  307. package/dist/types/components/sd-ghost-button/sd-ghost-button.d.ts +1 -0
  308. package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +1 -1
  309. package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +6 -4
  310. package/dist/types/components/sd-radio-button/sd-radio-button.d.ts +1 -0
  311. package/dist/types/components/{sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.d.ts → sd-select/sd-select-list-item/sd-select-list-item.d.ts} +4 -4
  312. package/dist/types/components/{sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.d.ts → sd-select/sd-select-list-item-search/sd-select-list-item-search.d.ts} +1 -1
  313. package/dist/types/components/{sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.d.ts → sd-select/sd-select-listbox/sd-select-listbox.d.ts} +15 -6
  314. package/dist/types/components/{sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.d.ts → sd-select/sd-select-trigger/sd-select-trigger.d.ts} +1 -1
  315. package/dist/types/components/{sd-select-v2/sd-select-v2.config.d.ts → sd-select/sd-select.config.d.ts} +12 -12
  316. package/dist/types/components/sd-select/sd-select.d.ts +56 -84
  317. package/dist/types/components/sd-table/constants.d.ts +4 -1
  318. package/dist/types/components/sd-table/sd-table.config.d.ts +64 -0
  319. package/dist/types/components/sd-table/sd-table.d.ts +17 -0
  320. package/dist/types/components/sd-table/sd-td/sd-td.d.ts +8 -0
  321. package/dist/types/components/sd-table/sd-thead/sd-thead.d.ts +5 -0
  322. package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +4 -0
  323. package/dist/types/components.d.ts +1012 -2402
  324. package/dist/types/utils/testing/index.d.ts +2 -0
  325. package/dist/types/utils/testing/mocks.d.ts +4 -0
  326. package/hydrate/index.js +821 -2272
  327. package/hydrate/index.mjs +821 -2272
  328. package/package.json +1 -1
  329. package/dist/cjs/base-dropdown-event-BTPlZ1KF.js +0 -91
  330. package/dist/cjs/sd-pagination_2.cjs.entry.js +0 -427
  331. package/dist/cjs/sd-progress.cjs.entry.js +0 -63
  332. package/dist/cjs/sd-select-dropdown_2.cjs.entry.js +0 -231
  333. package/dist/cjs/sd-select-group.cjs.entry.js +0 -332
  334. package/dist/cjs/sd-select-multiple-group.cjs.entry.js +0 -458
  335. package/dist/cjs/sd-select-multiple.cjs.entry.js +0 -191
  336. package/dist/cjs/sd-select-option-group.cjs.entry.js +0 -68
  337. package/dist/cjs/sd-select.cjs.entry.js +0 -181
  338. package/dist/cjs/sd-tbody.cjs.entry.js +0 -66
  339. package/dist/cjs/sd-thead.cjs.entry.js +0 -179
  340. package/dist/cjs/sd-tr.cjs.entry.js +0 -171
  341. package/dist/cjs/select-keyboard-navigation-CErfIrGV.js +0 -27
  342. package/dist/cjs/table-test.cjs.entry.js +0 -96
  343. package/dist/collection/components/sd-progress/sd-progress.css +0 -63
  344. package/dist/collection/components/sd-progress/sd-progress.js +0 -186
  345. package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.css +0 -30
  346. package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js +0 -444
  347. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.css +0 -36
  348. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +0 -257
  349. package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.css +0 -23
  350. package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +0 -161
  351. package/dist/collection/components/sd-select-group/sd-select-group.css +0 -81
  352. package/dist/collection/components/sd-select-group/sd-select-group.js +0 -1061
  353. package/dist/collection/components/sd-select-multiple/sd-select-multiple.css +0 -54
  354. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +0 -770
  355. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +0 -79
  356. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +0 -1183
  357. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.css +0 -75
  358. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +0 -305
  359. package/dist/collection/components/sd-select-v2/sd-select-v2.css +0 -11
  360. package/dist/collection/components/sd-select-v2/sd-select-v2.js +0 -819
  361. package/dist/collection/components/table-test/table-test.css +0 -59
  362. package/dist/collection/components/table-test/table-test.js +0 -316
  363. package/dist/components/p-9ZtJl4s6.js +0 -1
  364. package/dist/components/p-BALOEavB.js +0 -1
  365. package/dist/components/p-BZc6lwGD.js +0 -1
  366. package/dist/components/p-Bbs5Ws0k.js +0 -1
  367. package/dist/components/p-Bp0B8tcl.js +0 -1
  368. package/dist/components/p-Btx5sC7s.js +0 -1
  369. package/dist/components/p-CHFGWh0m.js +0 -1
  370. package/dist/components/p-CNAzAL53.js +0 -1
  371. package/dist/components/p-CWEeXx2E.js +0 -1
  372. package/dist/components/p-CgL8_FSD.js +0 -1
  373. package/dist/components/p-CqghR1aS.js +0 -1
  374. package/dist/components/p-Cy6HMEsK.js +0 -1
  375. package/dist/components/p-D8fG9Yt7.js +0 -1
  376. package/dist/components/p-DBex-RJU.js +0 -1
  377. package/dist/components/p-DEBakAhm.js +0 -1
  378. package/dist/components/p-DWMY9O2B.js +0 -1
  379. package/dist/components/p-DuMkBStM.js +0 -1
  380. package/dist/components/p-vQDL-PZ8.js +0 -1
  381. package/dist/components/sd-progress.d.ts +0 -11
  382. package/dist/components/sd-progress.js +0 -1
  383. package/dist/components/sd-select-dropdown.d.ts +0 -11
  384. package/dist/components/sd-select-dropdown.js +0 -1
  385. package/dist/components/sd-select-group.js +0 -1
  386. package/dist/components/sd-select-multiple-group.d.ts +0 -11
  387. package/dist/components/sd-select-multiple-group.js +0 -1
  388. package/dist/components/sd-select-multiple.js +0 -1
  389. package/dist/components/sd-select-option-group.d.ts +0 -11
  390. package/dist/components/sd-select-option-group.js +0 -1
  391. package/dist/components/sd-select-option.js +0 -1
  392. package/dist/components/sd-select-search-input.d.ts +0 -11
  393. package/dist/components/sd-select-search-input.js +0 -1
  394. package/dist/components/sd-select-v2-list-item-search.d.ts +0 -11
  395. package/dist/components/sd-select-v2-list-item-search.js +0 -1
  396. package/dist/components/sd-select-v2-list-item.d.ts +0 -11
  397. package/dist/components/sd-select-v2-list-item.js +0 -1
  398. package/dist/components/sd-select-v2-listbox.d.ts +0 -11
  399. package/dist/components/sd-select-v2-listbox.js +0 -1
  400. package/dist/components/sd-select-v2-trigger.d.ts +0 -11
  401. package/dist/components/sd-select-v2-trigger.js +0 -1
  402. package/dist/components/sd-select-v2.d.ts +0 -11
  403. package/dist/components/sd-select-v2.js +0 -1
  404. package/dist/components/table-test.d.ts +0 -11
  405. package/dist/components/table-test.js +0 -1
  406. package/dist/design-system/p-00612047.entry.js +0 -1
  407. package/dist/design-system/p-07adda3c.entry.js +0 -1
  408. package/dist/design-system/p-1573f415.entry.js +0 -1
  409. package/dist/design-system/p-1b9f6cef.entry.js +0 -1
  410. package/dist/design-system/p-1cc7d81f.entry.js +0 -1
  411. package/dist/design-system/p-1fa6c17f.entry.js +0 -1
  412. package/dist/design-system/p-380198bc.entry.js +0 -1
  413. package/dist/design-system/p-4114eea3.entry.js +0 -1
  414. package/dist/design-system/p-5e300b77.entry.js +0 -1
  415. package/dist/design-system/p-6b537e2f.entry.js +0 -1
  416. package/dist/design-system/p-6e90fb80.entry.js +0 -1
  417. package/dist/design-system/p-711c59fc.entry.js +0 -1
  418. package/dist/design-system/p-7b77c65c.entry.js +0 -1
  419. package/dist/design-system/p-850de8d4.entry.js +0 -1
  420. package/dist/design-system/p-8f88bd67.entry.js +0 -1
  421. package/dist/design-system/p-9fee77f0.entry.js +0 -1
  422. package/dist/design-system/p-BPGLtKk5.js +0 -1
  423. package/dist/design-system/p-Bp7ytJz5.js +0 -2
  424. package/dist/design-system/p-CRdYeSBK.js +0 -1
  425. package/dist/design-system/p-Cy6HMEsK.js +0 -1
  426. package/dist/design-system/p-ba5fea6f.entry.js +0 -1
  427. package/dist/design-system/p-be54d6bd.entry.js +0 -1
  428. package/dist/design-system/p-c3379a6e.entry.js +0 -1
  429. package/dist/design-system/p-cc62c180.entry.js +0 -1
  430. package/dist/design-system/p-ce2210ad.entry.js +0 -1
  431. package/dist/design-system/p-d52f25c6.entry.js +0 -1
  432. package/dist/design-system/p-dbcbbf1e.entry.js +0 -1
  433. package/dist/design-system/p-dc07d618.entry.js +0 -1
  434. package/dist/design-system/p-ef09409c.entry.js +0 -1
  435. package/dist/design-system/p-f8237991.entry.js +0 -1
  436. package/dist/esm/base-dropdown-event-CRdYeSBK.js +0 -89
  437. package/dist/esm/sd-pagination_2.entry.js +0 -424
  438. package/dist/esm/sd-progress.entry.js +0 -61
  439. package/dist/esm/sd-select-dropdown_2.entry.js +0 -228
  440. package/dist/esm/sd-select-group.entry.js +0 -330
  441. package/dist/esm/sd-select-multiple-group.entry.js +0 -456
  442. package/dist/esm/sd-select-multiple.entry.js +0 -189
  443. package/dist/esm/sd-select-option-group.entry.js +0 -66
  444. package/dist/esm/sd-select.entry.js +0 -179
  445. package/dist/esm/sd-tbody.entry.js +0 -64
  446. package/dist/esm/sd-thead.entry.js +0 -177
  447. package/dist/esm/sd-tr.entry.js +0 -169
  448. package/dist/esm/select-keyboard-navigation-Cy6HMEsK.js +0 -25
  449. package/dist/esm/table-test.entry.js +0 -94
  450. package/dist/types/components/sd-progress/sd-progress.d.ts +0 -15
  451. package/dist/types/components/sd-select/sd-select-dropdown/sd-select-dropdown.d.ts +0 -41
  452. package/dist/types/components/sd-select/sd-select-option/sd-select-option.d.ts +0 -23
  453. package/dist/types/components/sd-select/sd-select-search-input/sd-select-search-input.d.ts +0 -11
  454. package/dist/types/components/sd-select-group/sd-select-group.d.ts +0 -86
  455. package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts +0 -64
  456. package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +0 -110
  457. package/dist/types/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.d.ts +0 -29
  458. package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +0 -71
  459. package/dist/types/components/table-test/table-test.d.ts +0 -46
  460. /package/dist/collection/components/{sd-select-v2/sd-select-v2.config.js → sd-select/sd-select.config.js} +0 -0
package/hydrate/index.js CHANGED
@@ -136,7 +136,7 @@ var node_crypto = require('node:crypto');
136
136
  const NAMESPACE = 'design-system';
137
137
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
138
138
 
139
- const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-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-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-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-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-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-stack-gap-relaxed:8px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--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-disabled:#E1E1E1;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-content-primary:#222222;--sd-system-color-content-secondary:#555555;--sd-system-color-content-tertiary:#888888;--sd-system-color-content-quaternary:#AAAAAA;--sd-system-color-content-brand:#005CC9;--sd-system-color-content-subtle:#066D9B;--sd-system-color-content-accent:#0075FF;--sd-system-color-content-danger-default:#E30000;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-warning:#FF6B00;--sd-system-color-content-inverse:#FFFFFF;--sd-system-color-text-disabled:#888888;--sd-system-color-link-accent:#006AC1;--sd-system-color-icon-brand:#025497;--sd-system-color-icon-accent:#0075FF;--sd-system-color-icon-danger:#E30000;--sd-system-color-icon-warning:#FF6B00;--sd-system-color-icon-success:#00973C;--sd-system-color-icon-inverse:#FFFFFF;--sd-system-color-icon-disabled:#BBBBBB;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-border-disabled:#CCCCCC;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-icon-default:#888888;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-strong-dropdown-divider:#006AC1;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-subtle-dropdown-divider:#5CB0F3;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-content:#222222;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-strong-dropdown-divider:#FF7C7C;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-gap:4px;--sd-text-link-text-link-size-icon:16px;--sd-text-link-text-link-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-default-font-size:12px;--sd-text-link-text-link-typography-default-font-weight:500;--sd-text-link-text-link-typography-default-text-decoration:none;--sd-text-link-text-link-typography-default-line-height:20px;--sd-text-link-text-link-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-underline-font-size:12px;--sd-text-link-text-link-typography-underline-font-weight:500;--sd-text-link-text-link-typography-underline-text-decoration:underline;--sd-text-link-text-link-typography-underline-line-height:22px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-bg:#FFFFFF;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:12px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:20px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-font-weight:400;--sd-checkbox-checkbox-typography-font-size:12px;--sd-checkbox-checkbox-typography-line-height:20px;--sd-checkbox-checkbox-typography-text-decoration:none;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-font-weight:400;--sd-radio-radio-typography-font-size:12px;--sd-radio-radio-typography-line-height:20px;--sd-radio-radio-typography-text-decoration:none;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-height:28px;--sd-select-select-radius:4px;--sd-select-select-border-width:1px;--sd-select-select-padding-x:12px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-gap:8px;--sd-select-select-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-typography-font-weight:400;--sd-select-select-typography-font-size:12px;--sd-select-select-typography-line-height:20px;--sd-select-select-typography-text-decoration:none;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-select-select-size-icon:16px;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-text-hint:#555555;--sd-textinput-textinput-text-error-message:#E30000;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-hint-typography-font-weight:400;--sd-textinput-textinput-hint-typography-font-size:12px;--sd-textinput-textinput-hint-typography-line-height:20px;--sd-textinput-textinput-hint-typography-text-decoration:none;--sd-textinput-textinput-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-error-message-typography-font-weight:400;--sd-textinput-textinput-error-message-typography-font-size:12px;--sd-textinput-textinput-error-message-typography-line-height:20px;--sd-textinput-textinput-error-message-typography-text-decoration:none;--sd-textinput-textinput-contents-gap:4px;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size: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-border-width:1px;--sd-number-input-number-input-contents-gap:4px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-hint-color:#555555;--sd-number-input-number-input-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-hint-typography-font-weight:400;--sd-number-input-number-input-hint-typography-font-size:12px;--sd-number-input-number-input-hint-typography-line-height:20px;--sd-number-input-number-input-hint-typography-text-decoration:none;--sd-number-input-number-input-error-message-color:#E30000;--sd-number-input-number-input-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-error-message-typography-font-weight:400;--sd-number-input-number-input-error-message-typography-font-size:12px;--sd-number-input-number-input-error-message-typography-line-height:20px;--sd-number-input-number-input-error-message-typography-text-decoration:none;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-filepicker-filepicker-height:28px;--sd-filepicker-filepicker-padding-x:12px;--sd-filepicker-filepicker-gap:8px;--sd-filepicker-filepicker-radius:4px;--sd-filepicker-filepicker-border-width:1px;--sd-filepicker-filepicker-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-typography-font-weight:400;--sd-filepicker-filepicker-typography-font-size:12px;--sd-filepicker-filepicker-typography-line-height:20px;--sd-filepicker-filepicker-typography-text-decoration:none;--sd-filepicker-filepicker-size-icon:16px;--sd-filepicker-filepicker-contents-gap:4px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-sm-date-gap:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size: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-md-date-gap:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-hint:#555555;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-contents-gap:4px;--sd-datepicker-datepicker-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-hint-typography-font-weight:400;--sd-datepicker-datepicker-hint-typography-font-size:12px;--sd-datepicker-datepicker-hint-typography-line-height:20px;--sd-datepicker-datepicker-hint-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-content-default:#888888;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#555555;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-gap:12px;--sd-popover-popover-body-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-bg:#07284A;--sd-popover-popover-title-color:#FFFFFF;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-description-color:#FFFFFF;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-color:#D8D8D8;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:700;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-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-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}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
139
+ const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-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-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-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-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-disabled:#E1E1E1;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-content-primary:#222222;--sd-system-color-content-secondary:#555555;--sd-system-color-content-tertiary:#888888;--sd-system-color-content-quaternary:#AAAAAA;--sd-system-color-content-brand:#005CC9;--sd-system-color-content-subtle:#066D9B;--sd-system-color-content-accent:#0075FF;--sd-system-color-content-danger-default:#E30000;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-warning:#FF6B00;--sd-system-color-content-inverse:#FFFFFF;--sd-system-color-text-disabled:#888888;--sd-system-color-link-accent:#006AC1;--sd-system-color-icon-brand:#025497;--sd-system-color-icon-accent:#0075FF;--sd-system-color-icon-danger:#E30000;--sd-system-color-icon-warning:#FF6B00;--sd-system-color-icon-success:#00973C;--sd-system-color-icon-inverse:#FFFFFF;--sd-system-color-icon-disabled:#BBBBBB;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-border-disabled:#CCCCCC;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-icon-default:#888888;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-strong-dropdown-divider:#006AC1;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-subtle-dropdown-divider:#5CB0F3;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-content:#222222;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-strong-dropdown-divider:#FF7C7C;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-gap:4px;--sd-text-link-text-link-size-icon:16px;--sd-text-link-text-link-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-default-font-size:12px;--sd-text-link-text-link-typography-default-font-weight:500;--sd-text-link-text-link-typography-default-text-decoration:none;--sd-text-link-text-link-typography-default-line-height:20px;--sd-text-link-text-link-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-underline-font-size:12px;--sd-text-link-text-link-typography-underline-font-weight:500;--sd-text-link-text-link-typography-underline-text-decoration:underline;--sd-text-link-text-link-typography-underline-line-height:22px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-bg:#FFFFFF;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:12px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:20px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-font-weight:400;--sd-checkbox-checkbox-typography-font-size:12px;--sd-checkbox-checkbox-typography-line-height:20px;--sd-checkbox-checkbox-typography-text-decoration:none;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-font-weight:400;--sd-radio-radio-typography-font-size:12px;--sd-radio-radio-typography-line-height:20px;--sd-radio-radio-typography-text-decoration:none;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-height:28px;--sd-select-select-radius:4px;--sd-select-select-border-width:1px;--sd-select-select-padding-x:12px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-gap:8px;--sd-select-select-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-typography-font-weight:400;--sd-select-select-typography-font-size:12px;--sd-select-select-typography-line-height:20px;--sd-select-select-typography-text-decoration:none;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-select-select-size-icon:16px;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-text-hint:#555555;--sd-textinput-textinput-text-error-message:#E30000;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-hint-typography-font-weight:400;--sd-textinput-textinput-hint-typography-font-size:12px;--sd-textinput-textinput-hint-typography-line-height:20px;--sd-textinput-textinput-hint-typography-text-decoration:none;--sd-textinput-textinput-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-error-message-typography-font-weight:400;--sd-textinput-textinput-error-message-typography-font-size:12px;--sd-textinput-textinput-error-message-typography-line-height:20px;--sd-textinput-textinput-error-message-typography-text-decoration:none;--sd-textinput-textinput-contents-gap:4px;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size: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-border-width:1px;--sd-number-input-number-input-contents-gap:4px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-hint-color:#555555;--sd-number-input-number-input-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-hint-typography-font-weight:400;--sd-number-input-number-input-hint-typography-font-size:12px;--sd-number-input-number-input-hint-typography-line-height:20px;--sd-number-input-number-input-hint-typography-text-decoration:none;--sd-number-input-number-input-error-message-color:#E30000;--sd-number-input-number-input-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-error-message-typography-font-weight:400;--sd-number-input-number-input-error-message-typography-font-size:12px;--sd-number-input-number-input-error-message-typography-line-height:20px;--sd-number-input-number-input-error-message-typography-text-decoration:none;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-filepicker-filepicker-height:28px;--sd-filepicker-filepicker-padding-x:12px;--sd-filepicker-filepicker-gap:8px;--sd-filepicker-filepicker-radius:4px;--sd-filepicker-filepicker-border-width:1px;--sd-filepicker-filepicker-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-typography-font-weight:400;--sd-filepicker-filepicker-typography-font-size:12px;--sd-filepicker-filepicker-typography-line-height:20px;--sd-filepicker-filepicker-typography-text-decoration:none;--sd-filepicker-filepicker-size-icon:16px;--sd-filepicker-filepicker-contents-gap:4px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-sm-date-gap:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size: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-md-date-gap:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-hint:#555555;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-contents-gap:4px;--sd-datepicker-datepicker-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-hint-typography-font-weight:400;--sd-datepicker-datepicker-hint-typography-font-size:12px;--sd-datepicker-datepicker-hint-typography-line-height:20px;--sd-datepicker-datepicker-hint-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-content-default:#888888;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#555555;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-gap:12px;--sd-popover-popover-body-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-bg:#07284A;--sd-popover-popover-title-color:#FFFFFF;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-description-color:#FFFFFF;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-color:#D8D8D8;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:700;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-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-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-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-default:#E1E1E1;--sd-table-table-border-width-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-vlaue-height:44px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
140
140
 
141
141
  /*
142
142
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5209,116 +5209,6 @@ var setScopedSSR = (opts) => {
5209
5209
  var needsScopedSSR = () => scopedSSR;
5210
5210
  var scopedSSR = false;
5211
5211
 
5212
- const tableTestCss = () => `:host{display:block}.table-wrapper{width:100%;overflow-x:auto}.templates-slot{display:none}.data-table{width:100%;border-collapse:collapse;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;font-size:14px}.data-table th,.data-table td{padding:12px 16px;text-align:left;vertical-align:middle}.data-table th{font-weight:600;background-color:#f8f9fa;color:#333}.data-table.bordered th,.data-table.bordered td{border:1px solid #dee2e6}.data-table.striped tbody tr:nth-child(odd){background-color:#f8f9fa}.data-table tbody tr:hover{background-color:#e9ecef}.data-table .cell-flex{display:flex;align-items:center;gap:8px}.data-table .cell-image{width:24px;height:16px;object-fit:cover;border-radius:2px}`;
5213
-
5214
- class DataTable {
5215
- constructor(hostRef) {
5216
- registerInstance(this, hostRef);
5217
- this.tableReady = createEvent(this, "tableReady", 7);
5218
- }
5219
- get el() { return getElement(this); }
5220
- /** Column definitions array */
5221
- columns = [];
5222
- /** Row data array */
5223
- rows = [];
5224
- /** Show cell borders */
5225
- bordered = true;
5226
- /** Alternate row colors */
5227
- striped = false;
5228
- cellRenderers = new Map();
5229
- headerRenderers = new Map();
5230
- tableReady;
5231
- dataChanged() {
5232
- this.tableReady.emit();
5233
- }
5234
- componentDidLoad() {
5235
- this.tableReady.emit();
5236
- }
5237
- async setCellRenderer(field, renderer) {
5238
- this.cellRenderers = new Map(this.cellRenderers).set(field, renderer);
5239
- }
5240
- async setHeaderRenderer(field, renderer) {
5241
- this.headerRenderers = new Map(this.headerRenderers).set(field, renderer);
5242
- }
5243
- async removeCellRenderer(field) {
5244
- const newMap = new Map(this.cellRenderers);
5245
- newMap.delete(field);
5246
- this.cellRenderers = newMap;
5247
- }
5248
- async clearAllRenderers() {
5249
- this.cellRenderers = new Map();
5250
- this.headerRenderers = new Map();
5251
- }
5252
- renderCellContent(column, row, rowIndex) {
5253
- const value = row[column.field];
5254
- const renderer = this.cellRenderers.get(column.field);
5255
- if (renderer) {
5256
- const html = renderer({ field: column.field, value, row, rowIndex });
5257
- return hAsync("span", { class: "cell-content", innerHTML: html });
5258
- }
5259
- const template = this.el.querySelector(`[slot="cell-${column.field}"]`);
5260
- if (template) {
5261
- const html = this.processTemplate(template.innerHTML, { value, row, rowIndex });
5262
- return hAsync("span", { class: "cell-content", innerHTML: html });
5263
- }
5264
- return hAsync("span", { class: "cell-content" }, value);
5265
- }
5266
- renderHeaderContent(column) {
5267
- const renderer = this.headerRenderers.get(column.field);
5268
- if (renderer) {
5269
- const html = renderer({ field: column.field, column });
5270
- return hAsync("span", { innerHTML: html });
5271
- }
5272
- const template = this.el.querySelector(`[slot="header-${column.field}"]`);
5273
- if (template) {
5274
- return hAsync("span", { innerHTML: template.innerHTML });
5275
- }
5276
- return column.header || column.field;
5277
- }
5278
- processTemplate(html, data) {
5279
- return html
5280
- .replace(/\{\{value\}\}/g, this.escapeHtml(String(data.value ?? '')))
5281
- .replace(/\{\{rowIndex\}\}/g, String(data.rowIndex))
5282
- .replace(/\{\{row\.(\w+)\}\}/g, (_, prop) => this.escapeHtml(String(data.row[prop] ?? '')));
5283
- }
5284
- escapeHtml(str) {
5285
- const el = document.createElement('div');
5286
- el.textContent = str;
5287
- return el.innerHTML;
5288
- }
5289
- render() {
5290
- return (hAsync("div", { key: 'a34267f6b11cdd0dff53bfa3da62b7a47934c73b', class: "table-wrapper" }, hAsync("table", { key: 'b23ac2cd9a785d8fc89c09a04a6aa29a63e6d2b4', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, hAsync("thead", { key: 'e08ff945e40f3ec6db10285840d4185d110a1dc0' }, hAsync("tr", { key: 'ffe2e7253865f5a650611e2859f979d0204fca2a' }, this.columns.map(column => (hAsync("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), hAsync("tbody", { key: '2d47105abba4eecad71b549282650b7f2b056b4c' }, this.rows.map((row, rowIndex) => (hAsync("tr", { key: rowIndex }, this.columns.map(column => (hAsync("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), hAsync("div", { key: '99fe2715e69abf50f69a844e76a3ad422f5b870b', class: "templates-slot", hidden: true }, hAsync("slot", { key: '8c56201e8edb251c5f7494e00acdc5e5fbb67d00' }))));
5291
- }
5292
- static get watchers() { return {
5293
- "columns": [{
5294
- "dataChanged": 0
5295
- }],
5296
- "rows": [{
5297
- "dataChanged": 0
5298
- }]
5299
- }; }
5300
- static get style() { return tableTestCss(); }
5301
- static get cmpMeta() { return {
5302
- "$flags$": 777,
5303
- "$tagName$": "table-test",
5304
- "$members$": {
5305
- "columns": [16],
5306
- "rows": [16],
5307
- "bordered": [4],
5308
- "striped": [4],
5309
- "cellRenderers": [32],
5310
- "headerRenderers": [32],
5311
- "setCellRenderer": [64],
5312
- "setHeaderRenderer": [64],
5313
- "removeCellRenderer": [64],
5314
- "clearAllRenderers": [64]
5315
- },
5316
- "$listeners$": undefined,
5317
- "$lazyBundleId$": "-",
5318
- "$attrsToReflect$": []
5319
- }; }
5320
- }
5321
-
5322
5212
  const modal$1 = {
5323
5213
  radius: "8",
5324
5214
  confirm: {
@@ -5448,7 +5338,7 @@ class SdActionModal {
5448
5338
  if (this.height != null && this.height !== '') {
5449
5339
  sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
5450
5340
  }
5451
- return (hAsync("div", { key: 'c8fdd9cdb0ce6850b900744f087ace5739b13e1f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: 'a8ba3d0c496f7fbf0291818c5136e466dfbe3cab', class: "sd-action-modal__header" }, hAsync("h2", { key: 'df021377c4368ecf2316a019dbf3126923912ea2', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: '19f226d875e53f12192975165f6c0686120692c1', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '859a677df07d6d869fbebcadfa59aab54da08cab', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '3fab2e805587a3bfe450696a568c67ff08a7920a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '94911045fe85bd87a9c2ba84ae2e8ff57b1f91ad', class: "sd-action-modal__body" }, hAsync("slot", { key: '12430e8a43dbe76fde667b2ac5b79fa5fae89248', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: 'd90243f5ce989e19e8f1f2b0d4dbab426908d706', class: "sd-action-modal__footer" }, hAsync("div", { key: '512b80f97adbe1ba36805418476ff2e611855338', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '9ee6b21a2e004074f1e468893ae5831eb440501b', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: '48bd4e35cc5ae630989d057f41df028824e9da78', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
5341
+ return (hAsync("div", { key: '8aa9962dd66af45cbb9f7a16e087b8e5553692b5', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: 'fe47461827e9ded9a055134869744b9ae57be7bd', class: "sd-action-modal__header" }, hAsync("h2", { key: '911619c8669b1ea109bdc35aa8c6850eade4c49e', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'af2959f85fbedaa0f2f04d3c0bfb110338ab7c30', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '21801f18cce8eb0fec750ed4dbbe7eb78b6bba89', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '6b3cbb9f3bc8566bde5a3245384bab03b71ba41f', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '0fb3e066792e018282644123978bb395a56cdf66', class: "sd-action-modal__body" }, hAsync("slot", { key: 'ba8436ff647e422602b92ba982145e4db9366b1e', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '72a21271d7f9301d3bb4e6beb8f66b33b85554e2', class: "sd-action-modal__footer" }, hAsync("div", { key: 'b53076fddc6a11bd64ff27bdf63577cc6f22c4bf', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: 'bdea9bd98cd8e5a3f0fec66c7d1424b86c7995d5', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: 'c2a222662a5f06dfc18928059e68837ddb0b5e95', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
5452
5342
  }
5453
5343
  static get style() { return sdActionModalCss(); }
5454
5344
  static get cmpMeta() { return {
@@ -5501,7 +5391,7 @@ class SdBadge {
5501
5391
  label = '';
5502
5392
  render() {
5503
5393
  const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
5504
- return (hAsync("div", { key: '6050de370a7c9cbad2c4eb2d9e19180d54bcf64f', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '34c8fdf04e61f9fb16b651764e4cb13b2c6ec0c5', class: "sd-badge__dot" }), hAsync("div", { key: '03ceee1c7d54589dfa61aef8e80be5799a816a66', class: "sd-badge__label" }, this.label)));
5394
+ return (hAsync("div", { key: '3737fa6c3023e7adaaf3ae4086efe6d9acadcb67', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'f13d60974520124abeb4fcd49fed638002674267', class: "sd-badge__dot" }), hAsync("div", { key: '29c528444f3e4e4b41315586f7d31e2e828400df', class: "sd-badge__label" }, this.label)));
5505
5395
  }
5506
5396
  static get style() { return sdBadgeCss(); }
5507
5397
  static get cmpMeta() { return {
@@ -5711,7 +5601,7 @@ class SdBarcodeInput {
5711
5601
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
5712
5602
  '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
5713
5603
  };
5714
- return (hAsync("sd-field", { key: 'c537aef39f971023f90d7d0d7ad6cb6819b06b48', 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: '2ca7874dd2d9965f3246746a6f0311ce6cc6fe8e', class: "sd-barcode-input__content" }, hAsync("slot", { key: 'dfed2f18620c5ee6902e1f2083b2e046190ad852', name: "prefix" }), hAsync("input", { key: '80dbd54234b7a1b0db8ae8b3165653f63e8c9039', 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: 'd0b0c22126506e16b23ce9cce1a280366d7d4f4c', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '41ae6b492877ca5c3aa1083372878c9c41f694e3', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5604
+ return (hAsync("sd-field", { key: '359bac03c40af3bfc067957220124c00d0f542a1', 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: '0512c6c4ba9f778c65d6aaf9fd441e66d3e09cf7', class: "sd-barcode-input__content" }, hAsync("slot", { key: '47f7ff7b11b0f10a6f6efce02473c63a02ab9129', name: "prefix" }), hAsync("input", { key: '3f9150a1f188339a9d119475070eb53bca76b61a', 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: 'e193c4921de2cd71962841745e163620b3eac436', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '4ca22273d2ef5c79d439c9469bf8dbef5439e685', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5715
5605
  if (this.disabled)
5716
5606
  return;
5717
5607
  this.internalValue = '';
@@ -6438,13 +6328,13 @@ class SdButtonV2 {
6438
6328
  const hasLabel = Boolean(this.label);
6439
6329
  const iconOnly = !this.label && Boolean(this.icon) !== Boolean(this.rightIcon);
6440
6330
  const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
6441
- return (hAsync("button", { key: '19a9be4f92af097e104f64e890203aab3f897c61', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
6331
+ return (hAsync("button", { key: 'e3e2074fbe2b48117d5834efac7ff3036757aab3', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
6442
6332
  '--sd-button-v2-bg': config.color,
6443
6333
  '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
6444
6334
  '--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
6445
6335
  '--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
6446
6336
  '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
6447
- }, onClick: this.handleClick }, hAsync("span", { key: '813e88dce8e00e983caa70da63fe7766ee115b68', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: '31b6980a27ddbeff51b1f28e13b197164ab3175f', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && hAsync("span", { key: '85737212b55b6d48c9c17312f0ae7a419298da4c', class: "sd-button-v2__label" }, this.label), this.rightIcon && (hAsync("sd-icon", { key: 'ef8b914dec71d6857c26a26be74e63d9440a46de', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
6337
+ }, onClick: this.handleClick }, hAsync("span", { key: '90ea3bf42c9e16c836c6fdfdf26a74c8a848c31b', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: 'b9f4a1c42ae866aac1f65f4bbedb282ae0c10c72', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && hAsync("span", { key: '5e5dfbabdbec86c2da625c6a70fcda10303d0e50', class: "sd-button-v2__label" }, this.label), this.rightIcon && (hAsync("sd-icon", { key: 'f1c3a74b6d7e83fa755c97f83c6d97dea8411537', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
6448
6338
  }
6449
6339
  static get style() { return sdButtonV2Css(); }
6450
6340
  static get cmpMeta() { return {
@@ -6682,7 +6572,7 @@ class SdCard {
6682
6572
  bordered = false;
6683
6573
  sdClass = '';
6684
6574
  render() {
6685
- return (hAsync(Fragment, { key: '299b67c4e5a95d03c67bfe7a7cc13cfda642e494' }, hAsync("div", { key: '44630cec810c1ee0cc6526764adbae866f3d68f0', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'bbcb7e2332b1772cff4fd3b132e6378f6fbc0832' }))));
6575
+ return (hAsync(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, hAsync("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
6686
6576
  }
6687
6577
  static get style() { return sdCardCss(); }
6688
6578
  static get cmpMeta() { return {
@@ -6856,6 +6746,9 @@ class SdCheckbox {
6856
6746
  valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
6857
6747
  newValue = Array.from(valueSet);
6858
6748
  }
6749
+ else if (this.value === null) {
6750
+ newValue = false;
6751
+ }
6859
6752
  else {
6860
6753
  newValue = !this.isChecked;
6861
6754
  }
@@ -6883,13 +6776,13 @@ class SdCheckbox {
6883
6776
  '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
6884
6777
  '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
6885
6778
  };
6886
- return (hAsync("label", { key: '1a1c4dac0a2ce24ae51ce0baba74a7add387aa2f', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '4a45bc9bbaaf6ddaebf3445045ab7b1f789f81d5', type: "checkbox", ref: el => {
6779
+ return (hAsync("label", { key: '0e4a142753f8ceda6356c184f1f227e9f11b8a43', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '53f7bac2fbc2c197ddcc2bb3cd0779598155af4c', type: "checkbox", ref: el => {
6887
6780
  this.inputEl = el;
6888
- }, 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: '7d8ae7276470bf4543cdee1a0b25793f07d23c66', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
6781
+ }, 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: '0725d9e2ed16bec52b6340c9633ffed021558560', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
6889
6782
  ? CHECKBOX_COLORS.checked.iconDisabled
6890
6783
  : this.inverse
6891
6784
  ? CHECKBOX_COLORS.checked.iconInverse
6892
- : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: 'd791d977073b0916917c7ce770cf73c1ff81f3bd', class: "sd-checkbox__label" }, this.label)));
6785
+ : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: 'dcb8b972e88aa06d0a338ce8d2e2b86a0fbd8f3f', class: "sd-checkbox__label" }, this.label)));
6893
6786
  }
6894
6787
  static get watchers() { return {
6895
6788
  "value": [{
@@ -7203,7 +7096,7 @@ class SdChip {
7203
7096
  '--sd-chip-font-weight': typography.fontWeight,
7204
7097
  '--sd-chip-line-height': typography.lineHeight,
7205
7098
  };
7206
- return (hAsync("span", { key: '7d84dd478510c7e144fd049028f2f0a70a909016', class: {
7099
+ return (hAsync("span", { key: 'a821268b6bc2d04bd311b238009b750424e04e72', class: {
7207
7100
  'sd-chip': true,
7208
7101
  [`sd-chip--${state}`]: true,
7209
7102
  'sd-chip--disabled': this.disabled,
@@ -7285,7 +7178,13 @@ const color = {
7285
7178
  secondary: "#555555",
7286
7179
  tertiary: "#888888",
7287
7180
  inverse: "#FFFFFF"
7288
- }};
7181
+ },
7182
+ blue: {
7183
+ strong: "#0075FF"},
7184
+ darkblue: {
7185
+ strong: "#006AC1"},
7186
+ grey: {
7187
+ strong: "#737373"}};
7289
7188
  var systemTokens = {
7290
7189
  color: color
7291
7190
  };
@@ -7348,7 +7247,7 @@ class SdCircleProgress {
7348
7247
  }
7349
7248
  const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
7350
7249
  const showPercent = !this.indeterminate;
7351
- return (hAsync(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, hAsync("svg", { key: '34117c89eb180370a215807e614ad08f4f72b517', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '5ae0a53ce10bd5a8b2f316ebd00d3ee28c4336d6', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', class: "sd-circle-progress__label" }, this.label)));
7250
+ return (hAsync(Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, hAsync("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', 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: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', 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: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
7352
7251
  }
7353
7252
  static get style() { return sdCircleProgressCss(); }
7354
7253
  static get cmpMeta() { return {
@@ -7459,9 +7358,9 @@ class SdConfirmModal {
7459
7358
  render() {
7460
7359
  const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
7461
7360
  const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
7462
- return (hAsync("div", { key: 'e4fa59bb7bfb335bc16f4e13e49a10c517e2520c', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'ada7366093d2453dc354b534433647a07cecd632', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: 'a3578b9366349289866e312929f53cefe3b9fcd7', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'c1880435ede221bfbfad4df31b222c486471d364', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: '1f1edc065f2985c3ad9d3dd72db74a285474bc7a', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'a198f9d6d64f19919c11bb101a192e04043c7e6f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: '30b62d85ce7fe447643fbe19379cc39ccc44b9d0', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
7361
+ return (hAsync("div", { key: '4ef44b1b2a86914eae3fc59e3c383b12646d1d0c', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'aa62624aaf76a23eb4f1d30b846e6054f3cf001c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: 'd1329b8e71d455357790a4aa5f73547142830532', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '2c5e0f902327c5eb663e6ccc5057e22e2be11c03', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: '1917ef85f9f06de3dd321d664d4022dd4a1524ff', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'afa7e6671f4849b7a90317664d07d3c04178c554', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: 'd4c06bfdd2222212b1cf8e3ec86ccaca4c394394', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
7463
7362
  this.customContentRef = el;
7464
- } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '4d45291fafdd6dc5d70e69969cad5d3d7ea19bcc', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: 'f7ff30646b1bb772d8f41044fab5642408df25d5', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: '1750bfe43e9d00ff8a46777000c4ed8728502bb5', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button-v2", { key: 'ca0f57d4bdfe8f3a337de8dbe05b98e49e3f5a18', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
7363
+ } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '8af201f6b6b08991ba31db2f2e59ee44a7b10d50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '733f478a57a68bd9d4cc6563558bc0fafbfa5b9a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: 'a7be74a833fbd012d14e79b570a4d97e3a495a52', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button-v2", { key: 'e09be98a918aafd291a7b12c221b70e72ba14ab9', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
7465
7364
  }
7466
7365
  static get style() { return sdConfirmModalCss(); }
7467
7366
  static get cmpMeta() { return {
@@ -7819,9 +7718,9 @@ class SdDatePicker {
7819
7718
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
7820
7719
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
7821
7720
  };
7822
- return (hAsync("sd-field", { key: '97dcd4d3065ba7c0fa587b3d533dcda82b87c188', 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: '9c0a6874eb6fbf3e8a928048f189d3b139e385df', class: "sd-date-picker", ref: el => {
7721
+ return (hAsync("sd-field", { key: 'd55b2123cc862d5f12fdd429b02b622946b58cc4', 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: '79e47e4e02e8b30dc2651a9c4aab3950a8662f52', class: "sd-date-picker", ref: el => {
7823
7722
  this.triggerRef = el;
7824
- } }, hAsync("sd-date-picker-trigger", { key: 'e54065e86cb36c8abed1041a2d13edcbba861d8f', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '96c2aa277f54315ac2f6e29b861ebb94b3cc4f75', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: 'ea2513fb3d150a53895b6f657a7a6acc5541045f', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7723
+ } }, hAsync("sd-date-picker-trigger", { key: '7b09873b1e58aed36d4fb0dadb02d21ea6c2b309', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'fd60a9df30dfc459798a8e537acdf16ed9f94844', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: '0478f726cb51fe533b829f3eb0ce46d2fbf0ba94', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7825
7724
  }
7826
7725
  static get watchers() { return {
7827
7726
  "isOpen": [{
@@ -8003,7 +7902,7 @@ class SdDatePickerCalendar {
8003
7902
  '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
8004
7903
  '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
8005
7904
  };
8006
- return (hAsync("div", { key: 'ac86be94b03ba15d7dfd885f96fb29a988468e30', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '64a116ef69725d8f51eed4b54ed0f73e1dc23f9d', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: 'f0372d3d91dc9d1917ada3677baa4841074d6e22', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '133611ecd17975064fce932a6cc6c23478d93c3a', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '4445d069e21ac31b46c62ee8d7c213b72c7f787c', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '407f906335b31b5c70018f53a21d0e7d0cbc39ee', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: 'ddf5d7348d5833988b5a12ece9209624842e40ee', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '19a362b93db20bfaf63b6f8552a60d9baf3d7c24', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '9618b3ebfadf65a7d8abfa8a7360b8fcccbf68b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '2b989a40ad784a08f42a6571817431c028720564', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '60ab56cdfbd93e2cd0fa4453d44e540393ac5296', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: '337ad71a09089b1771e734aa591b243abe226d92', 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: 'baf0ad26ee64044f0af3b8126efaafe94feba8a4', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
7905
+ return (hAsync("div", { key: 'baeaf5925dd87084b4f22445cc2fa6fe879d8faf', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '784e0bb6698dc097d8fa9b136ec8bc1d82cfe798', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: 'e42d77c2a1c5d7c23e058b111ed87d3d27c9b465', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: 'fd5573590ca5c7aaf5b07a594d65f4f168d526d7', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: 'd8d2f3fcb2dca348c99f5a461260278ddf1ab16b', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: 'f134fdd299bcead5d9ce594355f1c58be057fbbe', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '14ab983354ded802bb715516872b0148acc3cd66', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: 'f8b0754ff487c944cf95fcb2fd05c2ca596b3107', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '47d95d368b04f1ff81c416d93ba3bb9a5481f3cb', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'baf40a29a0aacd3c868c0ca63035c09080f412af', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '4b8f189022d7c61072f07b23c5576410183bc801', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'c6b4251396b957905e0462a62ca5b8475c375dd6', 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: '76a1fe94ca8943f8cf0e7be30b8a9838a9cd22ef', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
8007
7906
  const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
8008
7907
  const isToday = cell.inCurrentMonth && today === cell.date;
8009
7908
  const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -8074,10 +7973,10 @@ class SdDatePickerTrigger {
8074
7973
  ? DATEPICKER_COLORS.icon.disabled
8075
7974
  : DATEPICKER_COLORS.icon.default,
8076
7975
  };
8077
- return (hAsync("div", { key: '48f426459dfa50a5fab8e8e9c597b9a3c3f011c1', class: {
7976
+ return (hAsync("div", { key: 'f541c11d4e7385993628e10f0eeb7a339f80e1f6', class: {
8078
7977
  'sd-date-picker-trigger': true,
8079
7978
  'sd-date-picker-trigger--disabled': this.disabled,
8080
- }, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: 'd5309ad89fe5232fea4a086784cfd28f920450c0', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '6885fdfce1384cc43cded08a40889edb15ba1108', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
7979
+ }, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: '19c51b2ae2dc354010f6727048fd7a64c17ed36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '73a6dd7cd398202edabecd348a4856315e077088', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
8081
7980
  }
8082
7981
  static get style() { return sdDatePickerTriggerCss(); }
8083
7982
  static get cmpMeta() { return {
@@ -8497,7 +8396,7 @@ class SdDateRangePickerCalendar {
8497
8396
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
8498
8397
  '--range-divider': RANGE_LAYOUT.divider,
8499
8398
  };
8500
- return (hAsync(Fragment, { key: 'b420e317ccefa8b143d781d916c0a60c8be15d2f' }, hAsync("div", { key: 'ec537bf3ed58f6b18e80f885d78d8e5dcca7ecfe', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '70afdc7311c5707c6d639034fa14c6f5ca2aa3d2', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'a400c8d9d3a0b1a4e13e7d4de004da550e91916f', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
8399
+ return (hAsync(Fragment, { key: 'acc32d9c349c4cee32bb923ce66d17122527b524' }, hAsync("div", { key: 'bd579429ae609c3ff21a542bf69c1dc9a907846a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '8a46d922fcaa09bd7f778d00e77324d1710b92c7', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '8234838995f1e5d945f85169e702cb0b32018f36', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
8501
8400
  }
8502
8401
  static get watchers() { return {
8503
8402
  "value": [{
@@ -8852,7 +8751,7 @@ class SdDropdownButton extends BaseDropdownEvent {
8852
8751
  }
8853
8752
  render() {
8854
8753
  const { config, preset } = this.resolvedConfig;
8855
- return (hAsync("div", { key: '3a9e74c689c0345c89dbaeba5814164b72fe7108', class: "sd-dropdown-button" }, hAsync("button", { key: '1633f3a0348082ec2433a6a1e7c41a64a797a725', 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: {
8754
+ return (hAsync("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, hAsync("button", { key: '4bd3e86eec90698188a834eb35ff922dee7d1855', 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: {
8856
8755
  '--sd-dropdown-button-bg': config.color,
8857
8756
  '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
8858
8757
  '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -8862,10 +8761,10 @@ class SdDropdownButton extends BaseDropdownEvent {
8862
8761
  '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
8863
8762
  '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
8864
8763
  '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
8865
- } }, hAsync("span", { key: '7378e3aa3c4cf2991f3a92511f10ca1834af9563', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: 'd5b59ccaad1985e3a50bb9a53b0a156a1e2e28a9', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'a24ed74d95ac1866abf9f3ed7a1c4b7bfe2c56c8', class: {
8764
+ } }, hAsync("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
8866
8765
  'sd-dropdown-button__trigger-icon': true,
8867
8766
  'sd-dropdown-button__trigger-icon--open': this.isOpen,
8868
- }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '7cb8cf5665f3ee2e252f4c0471daee31f4af0c7b', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
8767
+ }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
8869
8768
  }
8870
8769
  static get watchers() { return {
8871
8770
  "isOpen": [{
@@ -8965,14 +8864,11 @@ const FIELD_LABEL_SIZE_MAP = {
8965
8864
  const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
8966
8865
 
8967
8866
  const FORM_PARENT_TAGS = [
8968
- 'sd-select',
8969
- 'sd-select-multiple',
8970
- 'sd-select-multiple-group',
8971
8867
  'sd-input',
8972
8868
  'sd-barcode-input',
8973
8869
  'sd-textarea',
8974
8870
  'sd-number-input',
8975
- 'sd-select-v2',
8871
+ 'sd-select',
8976
8872
  'sd-file-picker',
8977
8873
  'sd-date-picker',
8978
8874
  'sd-date-range-picker',
@@ -9136,20 +9032,20 @@ class SdField {
9136
9032
  : {}),
9137
9033
  }
9138
9034
  : {};
9139
- return (hAsync("div", { key: '218df97b257b97f4801a31a11d4cf2072f981f07', class: {
9035
+ return (hAsync("div", { key: 'f7cec98818159adf5fd398bd15547ed1ec555092', class: {
9140
9036
  'sd-field': true,
9141
9037
  'sd-field--has-label': !!this.label,
9142
9038
  'sd-field--has-addon': !!addon,
9143
9039
  [this.fieldStatus]: !!this.fieldStatus,
9144
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '66fb430b166850197649a46cd07068782636e932', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'f9dafcf19258a3253de84d35a7fd368d87232f95', class: "sd-field__main", style: this.width
9040
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '2d6ffefc9211137dc215686874060b1d5067031d', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '2163413b937af3c1874f41bc2581a0304b7d069a', class: "sd-field__main", style: this.width
9145
9041
  ? {
9146
9042
  width: typeof this.width === 'number' ? `${this.width}px` : this.width,
9147
9043
  flex: 'none',
9148
9044
  }
9149
- : {} }, hAsync("div", { key: '1f4176fb04ba648fc2971904daa88974a4526868', class: {
9045
+ : {} }, hAsync("div", { key: '0dbb6cbe768bac1c64d72d37d270805e16936e24', class: {
9150
9046
  'sd-field__control': true,
9151
9047
  'sd-field__control--has-addon': !!addon,
9152
- } }, addon && hAsync("div", { key: 'fd90999129ed8ab6b9870d73083048de8e8987f6', class: "sd-field__addon" }, addon), hAsync("slot", { key: '9dbf3d99538016095c436619f9ad20f64fa20834' })), 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))))));
9048
+ } }, addon && hAsync("div", { key: '8b4bfbf6ad67084a0bc9c3ff6789936ad895e3c5', class: "sd-field__addon" }, addon), hAsync("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })), 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))))));
9153
9049
  }
9154
9050
  renderLabel(label) {
9155
9051
  if (!label)
@@ -9295,7 +9191,7 @@ class SdFilePicker {
9295
9191
  if (this.fileInputRef) {
9296
9192
  this.fileInputRef.value = '';
9297
9193
  }
9298
- await this.formField?.sdReset();
9194
+ await this.formField?.sdResetValidation();
9299
9195
  }
9300
9196
  async sdResetValidate() {
9301
9197
  await this.formField?.sdResetValidation();
@@ -9628,7 +9524,7 @@ class SdFloatingPopover {
9628
9524
  }
9629
9525
  }
9630
9526
  render() {
9631
- return hAsync("slot", { key: '2ee14400df156cb766c0f88b77bc232263b3c7e2' });
9527
+ return hAsync("slot", { key: '2383aafb9b01881f06e4fc97c5903c19453b8b4c' });
9632
9528
  }
9633
9529
  static get style() { return sdFloatingPortalCss(); }
9634
9530
  static get cmpMeta() { return {
@@ -9869,6 +9765,11 @@ class SdGhostButton {
9869
9765
  disabled = false;
9870
9766
  click;
9871
9767
  hasWarnedMissingAriaLabel = false;
9768
+ componentWillLoad() {
9769
+ this.size ??= 'sm';
9770
+ this.intent ??= 'default';
9771
+ this.ariaLabel ??= '';
9772
+ }
9872
9773
  handleClick = (event) => {
9873
9774
  if (this.disabled) {
9874
9775
  event.preventDefault();
@@ -9893,19 +9794,19 @@ class SdGhostButton {
9893
9794
  render() {
9894
9795
  const sizeConfig = GHOST_BUTTON_SIZES[this.size];
9895
9796
  const contentColor = this.disabled
9896
- ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
9897
- : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
9797
+ ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
9798
+ : GHOST_BUTTON_CONTENT_COLORS[this.intent];
9898
9799
  const accessibleName = this.ariaLabel.trim() || undefined;
9899
- return (hAsync("button", { key: '34c5026b4819b624b19d1773bad413b689633c2a', class: {
9800
+ return (hAsync("button", { key: '57793e0911fc49c62ab627bd7234caf9c0a04097', class: {
9900
9801
  'sd-ghost-button': true,
9901
9802
  'sd-ghost-button--disabled': this.disabled,
9902
9803
  }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
9903
9804
  '--sd-ghost-button-size': `${sizeConfig.size}px`,
9904
9805
  '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
9905
- '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
9806
+ '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
9906
9807
  '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
9907
9808
  '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
9908
- }, onClick: this.handleClick }, hAsync("sd-icon", { key: '063f7cfabfdbf0f4f2f4c1a2c811e6c3734d941f', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9809
+ }, onClick: this.handleClick }, hAsync("sd-icon", { key: 'cf81a34495eacad4052ad7bbd5cba837b905610b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9909
9810
  }
9910
9811
  static get style() { return sdGhostButtonCss(); }
9911
9812
  static get cmpMeta() { return {
@@ -10816,12 +10717,12 @@ class SdInput {
10816
10717
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
10817
10718
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
10818
10719
  };
10819
- return (hAsync("sd-field", { key: 'ff73dfa4d23c7bf1a29f853d50e0d31bddb094ea', 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: '0a986cccfbd55984a51676cbf5393634819e766d', class: "sd-input__content" }, hAsync("slot", { key: '068bfd70601f3b191a51bb45ac02679acf99a069', name: "prefix" }), hAsync("input", { key: '54dbd7b7e4bffcfa25b9d68800fb334c0dfa0da0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'c0e03839176c6612eb8b0532bce3341de3db90c3', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '0019f58900c721c52216f7686b8b198f855c76ec', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10720
+ return (hAsync("sd-field", { key: 'ff139feaafdaa57e012dc559ab1a0db26dfd97b0', 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: '188f24de316b14315fa0bdf312c58140e757cfa3', class: "sd-input__content" }, hAsync("slot", { key: '35d2213601e3c3508b7392096719d7841aebc6bb', name: "prefix" }), hAsync("input", { key: '0148de670febb2bc02a95a3c6c4c1a6cee523626', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '4a8bd55a4cfd25f482b1fcabb84f8ffffbbc8072', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '5c11a19971dceba378a4ea77f3f40d7b3d928214', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10820
10721
  if (this.disabled)
10821
10722
  return;
10822
10723
  this.internalValue = '';
10823
10724
  await this.formField?.sdValidate();
10824
- } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '63dbd526a1a9e67bd41483211bf9a005dc0dc93f', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
10725
+ } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '92cb57b65e70a499c48e73f028e30715f1b1356c', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
10825
10726
  if (this.disabled)
10826
10727
  return;
10827
10728
  this.passwordVisible = !this.passwordVisible;
@@ -10931,7 +10832,7 @@ class SdLinearProgress {
10931
10832
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
10932
10833
  };
10933
10834
  const valueText = `${Math.round(this.clampedValue)}%`;
10934
- return (hAsync(Host, { key: '7a639f88907718e71692f08beaa4ff32a913990c', style: hostStyle }, hAsync("div", { key: '0e9dc34a18d5497c67ce890e9976d98ff46a7cae', class: 'sd-linear-progress__track' }, hAsync("div", { key: 'b06985fa70196b47046907bbf72f73518e731614', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'b7ca66daa73439d52243f21991131dd40704c018', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: 'c2a8886d6e8402c29607287ae3a1c489138b38ce', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '36024d7cfbe5c932821744fa30f6366bf7a75302', class: 'sd-linear-progress__label' }, this.label)));
10835
+ return (hAsync(Host, { key: 'c7f2324ff98e1ec6e0d1d6c7a3328dd383a1abab', style: hostStyle }, hAsync("div", { key: 'cff100404519c4114c0dd1240715beafb91acf1f', class: 'sd-linear-progress__track' }, hAsync("div", { key: '1c7fdff123778a40cd0c3f3310141ac369205352', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'ae0b515a9bb9d5561d603fa8e88c144603af8af5', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '5d7cdf9daccd9729729bec7bc65456b5727d4738', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'd131eeb581e33f40878b47541f662aca269a6759', class: 'sd-linear-progress__label' }, this.label)));
10935
10836
  }
10936
10837
  static get style() { return sdLinearProgressCss(); }
10937
10838
  static get cmpMeta() { return {
@@ -10965,10 +10866,10 @@ class SdLoadingContainer {
10965
10866
  this.visible = false;
10966
10867
  }
10967
10868
  render() {
10968
- return (hAsync("div", { key: '14ae9c222f613129ac2819ee46b7dd0a248b93da', class: {
10869
+ return (hAsync("div", { key: 'a83b33262d59ecba12b7db9ed6bfe9f1fea4a54a', class: {
10969
10870
  'sd-loading-container': true,
10970
10871
  'sd-loading-container--visible': this.visible,
10971
- }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: 'a84dca0f4d3582c041ee97965db92a1fff778bd4', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '9793e443e8371a30572ca9b185e0bcfb09d2d1e1', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '1ea2e88043ece1b7c6ff9fe210d7d765d738bbfa', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '20e8a1cd1205186ec419b164b9e4873eb37045ea', class: "sd-loading-container__message" }, this.message)))));
10872
+ }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '64631929afd47606df0d397747495d2a11d62932', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '4a304e0fb66f720b57da1e4de03fa9aa5468d5d4', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '3981cb8e994384279a812864037a8e9cec34cc35', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '8adec0ef2424fa3ea30a58b27efa6344ada94070', class: "sd-loading-container__message" }, this.message)))));
10972
10873
  }
10973
10874
  static get style() { return sdLoadingContainerCss(); }
10974
10875
  static get cmpMeta() { return {
@@ -11061,7 +10962,7 @@ class SdLoadingModal {
11061
10962
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
11062
10963
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
11063
10964
  };
11064
- return (hAsync(Host, { key: '3113deea33ae8f08ac631e53744c94dfc0ffe829', style: hostStyle }, hAsync("div", { key: 'd6afa60fe2cf83bd1afd707e8aa218d2c66d761b', class: "sd-loading-modal" }, hAsync("div", { key: 'be70c3adcbea4fca528f459ad7fbc33e82649073', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '9aa73a423423e093606e58796490be123e5fa52a', 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: '59fd5cf61b53f1362974a7b92ad6e6319f141def', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '9bfe53124cd1f8a3008d8a2ccc6ea9d8af5d62c2', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
10965
+ return (hAsync(Host, { key: '4245588093d82ec791b4ba7260eb3a1314c0e7a8', style: hostStyle }, hAsync("div", { key: '4ad4c57bf68a5e33b453ed5ebb19f590f2ff8a9d', class: "sd-loading-modal" }, hAsync("div", { key: 'bd45817bad45b9cffc9917d5f6570cb7409e8703', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '16a09029e732058a4cdf0330e4afaf7322a88f76', 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: 'cdf9a51d233efcc86fa2405960f2ed304a07127b', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '36cd4b36d92fb725eb35a9d6bee7fd0c8fcf3395', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
11065
10966
  }
11066
10967
  static get style() { return sdLoadingModalCss(); }
11067
10968
  static get cmpMeta() { return {
@@ -11189,10 +11090,8 @@ class SdModalContainer {
11189
11090
  }
11190
11091
  get el() { return getElement(this); }
11191
11092
  autoRemove = false;
11192
- entry;
11193
- isVisible = false;
11194
- backdropVisible = false;
11195
- layerRef;
11093
+ entries = [];
11094
+ layerRefs = new Map();
11196
11095
  async open(options, modalRef) {
11197
11096
  const id = `modal-${++modalIdCounter}`;
11198
11097
  const modalEl = this.createConfirmModal(id, options);
@@ -11203,6 +11102,7 @@ class SdModalContainer {
11203
11102
  modalRef,
11204
11103
  persistent: !!options.persistent,
11205
11104
  closing: false,
11105
+ backdropVisible: false,
11206
11106
  });
11207
11107
  return id;
11208
11108
  }
@@ -11216,6 +11116,7 @@ class SdModalContainer {
11216
11116
  modalRef,
11217
11117
  persistent: !!options.persistent,
11218
11118
  closing: false,
11119
+ backdropVisible: false,
11219
11120
  });
11220
11121
  return id;
11221
11122
  }
@@ -11230,91 +11131,93 @@ class SdModalContainer {
11230
11131
  modalRef,
11231
11132
  persistent: !!options.persistent,
11232
11133
  closing: false,
11134
+ backdropVisible: false,
11233
11135
  });
11234
11136
  return id;
11235
11137
  }
11236
11138
  componentDidRender() {
11237
- if (!this.entry || this.entry.closing || !this.layerRef)
11139
+ if (!Array.isArray(this.entries))
11238
11140
  return;
11239
- if (this.entry.modalEl.isConnected)
11240
- return;
11241
- const { id, modalEl } = this.entry;
11242
- this.layerRef.appendChild(modalEl);
11243
- this.waitForModalReady(modalEl).then(() => {
11244
- requestAnimationFrame(() => {
11245
- if (!this.entry || this.entry.id !== id || this.entry.closing || !modalEl.isConnected)
11246
- return;
11247
- this.backdropVisible = true;
11248
- modalEl.classList.add('sd-modal-container__modal--visible');
11141
+ for (const entry of this.entries) {
11142
+ if (entry.closing || entry.modalEl.isConnected)
11143
+ continue;
11144
+ const layerRef = this.layerRefs.get(entry.id);
11145
+ if (!layerRef)
11146
+ continue;
11147
+ const { id, modalEl } = entry;
11148
+ layerRef.appendChild(modalEl);
11149
+ this.waitForModalReady(modalEl).then(() => {
11150
+ requestAnimationFrame(() => {
11151
+ const current = this.entries.find(e => e.id === id);
11152
+ if (!current || current.closing || !modalEl.isConnected)
11153
+ return;
11154
+ this.entries = this.entries.map(e => e.id === id ? { ...e, backdropVisible: true } : e);
11155
+ modalEl.classList.add('sd-modal-container__modal--visible');
11156
+ });
11249
11157
  });
11250
- });
11158
+ }
11251
11159
  }
11252
11160
  disconnectedCallback() {
11253
- if (this.entry?.dismissTimerId)
11254
- clearTimeout(this.entry.dismissTimerId);
11255
- if (this.entry)
11256
- unregisterModal(this.entry.id);
11161
+ for (const entry of this.entries ?? []) {
11162
+ if (entry.dismissTimerId)
11163
+ clearTimeout(entry.dismissTimerId);
11164
+ unregisterModal(entry.id);
11165
+ }
11257
11166
  }
11258
11167
  async dismissById(id, reason) {
11259
- if (this.entry?.id !== id)
11168
+ const entry = this.entries.find(e => e.id === id);
11169
+ if (!entry)
11260
11170
  return;
11261
- this.requestDismiss(reason);
11171
+ this.requestDismiss(id, reason);
11262
11172
  }
11263
11173
  async update(id, props) {
11264
- if (!this.entry || this.entry.id !== id || this.entry.closing)
11174
+ const entry = this.entries.find(e => e.id === id && !e.closing);
11175
+ if (!entry)
11265
11176
  return;
11266
- const tag = this.entry.modalEl.tagName.toLowerCase();
11177
+ const tag = entry.modalEl.tagName.toLowerCase();
11267
11178
  if (tag === 'sd-loading-modal') {
11268
- this.applyLoadingProps(this.entry.modalEl, props);
11179
+ this.applyLoadingProps(entry.modalEl, props);
11269
11180
  return;
11270
11181
  }
11271
- this.applyProps(this.entry.modalEl, props);
11182
+ this.applyProps(entry.modalEl, props);
11272
11183
  }
11273
11184
  mountEntry(entry) {
11274
- if (this.entry) {
11275
- throw new Error('[sd-modal-container] This instance already manages an active modal.');
11276
- }
11277
- this.entry = entry;
11278
- this.backdropVisible = false;
11279
- this.isVisible = true;
11185
+ this.entries = [...(this.entries ?? []), entry];
11280
11186
  registerModal({
11281
11187
  id: entry.id,
11282
11188
  persistent: entry.persistent,
11283
- requestClose: () => this.dispatchClose(),
11189
+ requestClose: () => this.dispatchClose(entry.id),
11284
11190
  shake: () => this.shakeModal(entry.modalEl),
11285
11191
  setZIndex: zIndex => {
11286
11192
  this.el.style.setProperty('--sd-modal-container-z-index', String(zIndex));
11287
11193
  },
11288
11194
  });
11289
11195
  }
11290
- attachModalEventListeners(_id, modalEl) {
11291
- modalEl.addEventListener('sdOk', () => this.requestDismiss('confirm'));
11292
- modalEl.addEventListener('sdCancel', () => this.requestDismiss('cancel'));
11293
- modalEl.addEventListener('sdClose', () => this.requestDismiss('close'));
11196
+ attachModalEventListeners(id, modalEl) {
11197
+ modalEl.addEventListener('sdOk', () => this.requestDismiss(id, 'confirm'));
11198
+ modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
11199
+ modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
11294
11200
  }
11295
- attachLoadingModalEventListeners(_id, modalEl) {
11201
+ attachLoadingModalEventListeners(id, modalEl) {
11296
11202
  modalEl.addEventListener('sdClick', () => {
11297
- this.entry?.modalRef._triggerClick?.();
11203
+ const entry = this.entries.find(e => e.id === id);
11204
+ entry?.modalRef._triggerClick?.();
11298
11205
  });
11299
11206
  }
11300
- dispatchClose() {
11301
- this.entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
11207
+ dispatchClose(id) {
11208
+ const entry = this.entries.find(e => e.id === id);
11209
+ entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
11302
11210
  }
11303
- requestDismiss(reason) {
11304
- const currentEntry = this.entry;
11211
+ requestDismiss(id, reason) {
11212
+ const currentEntry = this.entries.find(e => e.id === id);
11305
11213
  if (!currentEntry || currentEntry.closing)
11306
11214
  return;
11307
11215
  currentEntry.modalEl.classList.remove('sd-modal-container__modal--visible');
11308
11216
  const dismissTimerId = setTimeout(() => {
11309
- this.finalizeDismiss(currentEntry.id);
11217
+ this.finalizeDismiss(id);
11310
11218
  }, ANIMATION_DURATION);
11311
- setModalInteractive(currentEntry.id, false);
11312
- this.entry = {
11313
- ...currentEntry,
11314
- closing: true,
11315
- dismissTimerId,
11316
- };
11317
- this.backdropVisible = false;
11219
+ setModalInteractive(id, false);
11220
+ this.entries = (this.entries ?? []).map(e => e.id === id ? { ...e, closing: true, dismissTimerId, backdropVisible: false } : e);
11318
11221
  if (reason === 'confirm')
11319
11222
  currentEntry.modalRef._triggerOk();
11320
11223
  else if (reason === 'cancel')
@@ -11323,18 +11226,17 @@ class SdModalContainer {
11323
11226
  currentEntry.modalRef._triggerClose();
11324
11227
  }
11325
11228
  finalizeDismiss(id) {
11326
- const currentEntry = this.entry;
11327
- if (!currentEntry || currentEntry.id !== id)
11229
+ const currentEntry = this.entries.find(e => e.id === id);
11230
+ if (!currentEntry)
11328
11231
  return;
11329
11232
  if (currentEntry.dismissTimerId)
11330
11233
  clearTimeout(currentEntry.dismissTimerId);
11331
11234
  currentEntry.modalEl.remove();
11332
11235
  unregisterModal(id);
11333
11236
  currentEntry.modalRef._triggerDismissed();
11334
- this.entry = undefined;
11335
- this.backdropVisible = false;
11336
- this.isVisible = false;
11337
- if (this.autoRemove) {
11237
+ this.layerRefs.delete(id);
11238
+ this.entries = (this.entries ?? []).filter(e => e.id !== id);
11239
+ if (this.autoRemove && this.entries.length === 0) {
11338
11240
  this.el.remove();
11339
11241
  }
11340
11242
  }
@@ -11355,8 +11257,14 @@ class SdModalContainer {
11355
11257
  applyLoadingProps(el, options) {
11356
11258
  if (this.hasOwnProp(options, 'state'))
11357
11259
  this.setAttr(el, 'state', options.state);
11358
- if (this.hasOwnProp(options, 'message'))
11359
- this.setAttr(el, 'message', options.message);
11260
+ if (this.hasOwnProp(options, 'message')) {
11261
+ if (Array.isArray(options.message)) {
11262
+ el.message = options.message;
11263
+ }
11264
+ else {
11265
+ this.setAttr(el, 'message', options.message);
11266
+ }
11267
+ }
11360
11268
  if (this.hasOwnProp(options, 'useButton')) {
11361
11269
  if (options.useButton)
11362
11270
  el.setAttribute('use-button', '');
@@ -11402,11 +11310,11 @@ class SdModalContainer {
11402
11310
  if (this.hasOwnProp(options, 'tagContents'))
11403
11311
  el.tagContents = options.tagContents;
11404
11312
  }
11405
- handleBackdropClick = () => {
11406
- if (!this.entry || !isTopInteractiveModal(this.entry.id))
11313
+ handleBackdropClick(id) {
11314
+ if (!isTopInteractiveModal(id))
11407
11315
  return;
11408
- requestCloseForModal(this.entry.id);
11409
- };
11316
+ requestCloseForModal(id);
11317
+ }
11410
11318
  shakeModal(modalEl) {
11411
11319
  const cls = 'sd-modal-container__modal--shake';
11412
11320
  modalEl.classList.remove(cls);
@@ -11435,14 +11343,15 @@ class SdModalContainer {
11435
11343
  el.setAttribute(name, value);
11436
11344
  }
11437
11345
  render() {
11438
- if (!this.isVisible || !this.entry)
11346
+ if (!this.entries?.length)
11439
11347
  return null;
11440
- return (hAsync("div", { class: "sd-modal-container" }, hAsync("div", { class: "sd-modal-container__layer", "data-modal-id": this.entry.id, ref: el => {
11441
- this.layerRef = el;
11348
+ 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 => {
11349
+ if (el)
11350
+ this.layerRefs.set(entry.id, el);
11442
11351
  } }, hAsync("div", { class: {
11443
11352
  'sd-modal-container__backdrop': true,
11444
- 'sd-modal-container__backdrop--visible': this.backdropVisible,
11445
- }, onClick: this.handleBackdropClick }))));
11353
+ 'sd-modal-container__backdrop--visible': entry.backdropVisible,
11354
+ }, onClick: () => this.handleBackdropClick(entry.id) }))))));
11446
11355
  }
11447
11356
  static get style() { return sdModalContainerCss(); }
11448
11357
  static get cmpMeta() { return {
@@ -11450,9 +11359,7 @@ class SdModalContainer {
11450
11359
  "$tagName$": "sd-modal-container",
11451
11360
  "$members$": {
11452
11361
  "autoRemove": [4, "auto-remove"],
11453
- "entry": [32],
11454
- "isVisible": [32],
11455
- "backdropVisible": [32],
11362
+ "entries": [32],
11456
11363
  "open": [64],
11457
11364
  "openLoading": [64],
11458
11365
  "createCustom": [64],
@@ -11848,12 +11755,12 @@ class SdNumberInput {
11848
11755
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
11849
11756
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
11850
11757
  };
11851
- return (hAsync("sd-field", { key: 'a62a0abbef4e817173d3e627d61c36523c2db81a', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'd395366da25ef5ab333e4b314093a89e41519786', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'eb97c4c29165e6237064bbce54ea2031c756fe12', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '7cd260e4356d320825a75350982174446b40e15c', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11758
+ return (hAsync("sd-field", { key: '7f4012ec048ab69f3c6b241c7fc103fd798572ca', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '975c0800b1fd6e4ab3502fc966db8917fe60bb3e', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'f2a630109b883740362dd2946ceeeaa93bbfeb36', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'dcd539c5035b1363edacadf7ed9c1096ef24714a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11852
11759
  ? NUMBER_INPUT_STEPPER.icon.disabled
11853
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: 'a25c707b127f63239dbb92be5e9d569e1be58005', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '0dc0864a4434122a717041028c732aa5d370f65c', 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: {
11760
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '5acf113c5e60dd5f77fb1206a60d4b5ce14e2b7f', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '5dd0f9ba9643fce07de811b2a93c8763a3d84b2c', 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: {
11854
11761
  textAlign: this.useButton ? 'center' : 'right',
11855
11762
  ...this.inputStyle,
11856
- } }), this.inputSuffix && (hAsync("span", { key: 'd31337cdacceb84ee6347a2c38210ad491667d2c', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '217fcbc2b75e76adb0ed969a719e632b5eb74b27', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '48ff6d0417aadcd975a6863a0003e63ca525cdfd', name: "add", size: iconSize, color: this.isIncrementDisabled()
11763
+ } }), this.inputSuffix && (hAsync("span", { key: 'aa7e4dbb29d7e8de4e94f0411f2f4b622411a60a', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '40deeadfcfe87cb61f09ee2959b6afb5757ff56b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b8ffcbbf663bacb7249e696d3eabf8b9ac832ddc', name: "add", size: iconSize, color: this.isIncrementDisabled()
11857
11764
  ? NUMBER_INPUT_STEPPER.icon.disabled
11858
11765
  : NUMBER_INPUT_STEPPER.icon.default }))))));
11859
11766
  }
@@ -12060,13 +11967,13 @@ class SdPagination {
12060
11967
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
12061
11968
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
12062
11969
  };
12063
- return (hAsync("div", { key: '386fdd2d1c0b5a7284c299201f19fd3384670ab1', class: {
11970
+ return (hAsync("div", { key: 'e648886fbec4723b7be767d9e1bfc04004cca234', class: {
12064
11971
  'sd-pagination': true,
12065
11972
  'sd-pagination--simple': this.simple,
12066
- }, style: cssVars }, hAsync("div", { key: 'cd73997ae59f87b70c31e88fd5b4246bd6044bd0', 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: {
11973
+ }, style: cssVars }, hAsync("div", { key: '43ff8b8f6682c4d2b70c5085a6d3199de1d01596', 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: {
12067
11974
  'sd-pagination__item': true,
12068
11975
  'sd-pagination__item--selected': this.currentPage === n,
12069
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '86389ea83d2965efdd938d2f9b2e2c3469f05fe8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
11976
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '1975d14028485438a728b23d717abfcde8722fcf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
12070
11977
  }
12071
11978
  static get style() { return sdPaginationCss(); }
12072
11979
  static get cmpMeta() { return {
@@ -12402,7 +12309,7 @@ class SdPortal {
12402
12309
  this.close.emit();
12403
12310
  }
12404
12311
  render() {
12405
- return hAsync("slot", { key: '6fa44238ddbc26c355ddde102d2639db7dd50b94' });
12312
+ return hAsync("slot", { key: '28858d6833d8ff7f86295f7e445d51ffc84db99a' });
12406
12313
  }
12407
12314
  static get watchers() { return {
12408
12315
  "open": [{
@@ -12426,79 +12333,6 @@ class SdPortal {
12426
12333
  }; }
12427
12334
  }
12428
12335
 
12429
- const sdProgressCss = () => `sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:100%;height:20px;overflow:hidden;border-radius:4px;background-color:#EEEEEE;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075FF);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#EEEEEE;font-size:12px;font-weight:700;line-height:20px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075FF);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075FF);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075FF)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}`;
12430
-
12431
- class SdProgress {
12432
- constructor(hostRef) {
12433
- registerInstance(this, hostRef);
12434
- }
12435
- type = 'bar';
12436
- error = false;
12437
- percentage = 0;
12438
- size = 80;
12439
- strokeWidth = 12;
12440
- label;
12441
- statusColor = {
12442
- default: '#aaaaaa',
12443
- progress: '#0075ff',
12444
- complete: '#12B553',
12445
- error: '#FB4444',
12446
- };
12447
- get progressPercentage() {
12448
- if (this.error)
12449
- return 100;
12450
- return this.percentage;
12451
- }
12452
- get progressStatus() {
12453
- if (this.error)
12454
- return 'error';
12455
- switch (this.percentage) {
12456
- case 100:
12457
- return 'complete';
12458
- case 0:
12459
- return 'default';
12460
- default:
12461
- return 'progress';
12462
- }
12463
- }
12464
- get progressColor() {
12465
- return this.statusColor[this.progressStatus];
12466
- }
12467
- render() {
12468
- return (hAsync("div", { key: '34c1ecf23c120f53595529004ed3d6818896e816', style: {
12469
- '--progress-color': this.progressColor,
12470
- '--progress-percentage': `${this.progressPercentage}%`,
12471
- } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '29461b9428416262c10b1917eaee4e0091d290dc', class: "sd-progress__label" }, this.label)));
12472
- }
12473
- renderBarProgress() {
12474
- return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
12475
- }
12476
- renderSpinnerProgress() {
12477
- const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
12478
- const circumference = 2 * Math.PI * radius; // 원의 둘레
12479
- const offset = circumference - (this.progressPercentage / 100) * circumference; // 진행률에 따른 offset
12480
- const progressBgSize = `${this.size}px`;
12481
- const progressSize = `${this.size / 2}px`;
12482
- return (hAsync("div", { class: `sd-progress__spinner sd-progress__spinner--${this.progressStatus}` }, hAsync("svg", { width: progressBgSize, height: progressBgSize }, hAsync("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), hAsync("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.progressColor, "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), hAsync("strong", { class: "sd-progress__spinner__label" }, this.progressPercentage, " %")));
12483
- }
12484
- static get style() { return sdProgressCss(); }
12485
- static get cmpMeta() { return {
12486
- "$flags$": 512,
12487
- "$tagName$": "sd-progress",
12488
- "$members$": {
12489
- "type": [1],
12490
- "error": [4],
12491
- "percentage": [2],
12492
- "size": [2],
12493
- "strokeWidth": [2, "stroke-width"],
12494
- "label": [1]
12495
- },
12496
- "$listeners$": undefined,
12497
- "$lazyBundleId$": "-",
12498
- "$attrsToReflect$": []
12499
- }; }
12500
- }
12501
-
12502
12336
  const radio = {
12503
12337
  size: "16",
12504
12338
  borderWidth: "1",
@@ -12746,6 +12580,11 @@ class SdRadioButton {
12746
12580
  disabled = false;
12747
12581
  name;
12748
12582
  change;
12583
+ componentWillLoad() {
12584
+ this.size ??= 'sm';
12585
+ this.options ??= [];
12586
+ this.disabled ??= false;
12587
+ }
12749
12588
  handleRadioChange = (optionValue, optionDisabled) => {
12750
12589
  if (this.disabled || optionDisabled)
12751
12590
  return;
@@ -12806,7 +12645,7 @@ class SdRadioButton {
12806
12645
  '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
12807
12646
  '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
12808
12647
  };
12809
- return (hAsync("div", { key: '67c8e7ad03fb6ee4cabd06591e3e11e5d38914f0', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
12648
+ return (hAsync("div", { key: 'fbc0246d9cf615956121295e29bf8c702ee73edc', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
12810
12649
  const isSelected = this.isOptionSelected(option);
12811
12650
  const isDisabled = this.isOptionDisabled(option);
12812
12651
  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)));
@@ -12884,1873 +12723,158 @@ class SdRadioGroup {
12884
12723
  }; }
12885
12724
  }
12886
12725
 
12887
- class SelectKeyboardNavigation {
12888
- isSearchable;
12889
- filteredOptions;
12890
- constructor(isSearchable, filteredOptions) {
12891
- this.isSearchable = isSearchable;
12892
- this.filteredOptions = filteredOptions;
12893
- }
12894
- getNavigationBounds() {
12895
- return {
12896
- minIndex: this.isSearchable ? -1 : 0,
12897
- maxIndex: this.filteredOptions.length - 1,
12898
- };
12899
- }
12900
- getNextIndex(currentIndex, direction) {
12901
- const { minIndex, maxIndex } = this.getNavigationBounds();
12902
- if (direction === 'ArrowUp') {
12903
- return currentIndex > minIndex ? currentIndex - 1 : maxIndex;
12904
- }
12905
- else {
12906
- return currentIndex < maxIndex ? currentIndex + 1 : minIndex;
12907
- }
12908
- }
12909
- }
12910
-
12911
- const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select .sd-select .sd-select__trigger{cursor:not-allowed}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
12726
+ const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
12912
12727
 
12913
- /**
12914
- * @deprecated sd-select-v2를 사용하세요.
12915
- */
12916
- class SdSelect extends BaseDropdownEvent {
12728
+ class SdSelect {
12917
12729
  constructor(hostRef) {
12918
- super();
12919
12730
  registerInstance(this, hostRef);
12920
12731
  this.update = createEvent(this, "sdUpdate", 7);
12921
12732
  this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
12922
12733
  }
12734
+ static VIEWPORT_PADDING = 20;
12735
+ static PORTAL_OFFSET_Y = 4;
12736
+ static CLOSE_ANIMATION_DURATION = 150;
12923
12737
  get el() { return getElement(this); }
12924
- // props
12738
+ type = 'default';
12925
12739
  value = null;
12926
12740
  options = [];
12927
12741
  placeholder = '선택';
12928
- optionPlaceholder = '선택지가 없습니다.';
12929
- width = '200px';
12742
+ maxDropdownWidth = '640px';
12930
12743
  dropdownHeight = '260px';
12931
- autoFocus = false;
12932
12744
  disabled = false;
12933
- clearable = false;
12934
- searchable = false;
12935
- // props - label
12936
12745
  label = '';
12937
12746
  labelWidth = '';
12938
12747
  addonLabel = '';
12939
12748
  addonAlign = 'start';
12749
+ error = false;
12750
+ hint = '';
12751
+ errorMessage = '';
12752
+ rules = [];
12940
12753
  icon = undefined;
12941
12754
  labelTooltip = '';
12942
12755
  labelTooltipProps = null;
12943
- // props - form
12944
- rules = [];
12945
- error = false;
12946
- // props - custom slots
12947
- optionRenderer;
12948
- // states
12756
+ emitValue = false;
12757
+ width = '';
12758
+ useSearch = false;
12759
+ allSelectedLabel = '전체';
12760
+ useSelectAll = false;
12949
12761
  isOpen = false;
12950
- itemIndex = -1;
12951
- isScrolled = false;
12952
- // events
12762
+ isAnimatingOut = false;
12763
+ triggerWidth = '200px';
12764
+ resolvedDropdownHeight = '260px';
12765
+ resolvedMaxDropdownWidth = '640px';
12766
+ focused = false;
12767
+ hovered = false;
12953
12768
  update;
12954
12769
  dropDownShow;
12955
- selectRef;
12956
- triggerRef;
12957
- formField;
12958
- filteredOptions = [];
12959
- dropDownWidth = '200px';
12960
- name = nanoid$1();
12770
+ async sdFocus() {
12771
+ if (this.disabled)
12772
+ return;
12773
+ await this.triggerComponentRef?.sdFocus();
12774
+ }
12961
12775
  async sdOpen() {
12776
+ // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
12777
+ await new Promise(resolve => setTimeout(resolve, 0));
12778
+ if (this.disabled || this.isOpen)
12779
+ return;
12780
+ this.prepareDropdownGeometry();
12781
+ if (this.closeAnimationTimer)
12782
+ clearTimeout(this.closeAnimationTimer);
12783
+ this.isAnimatingOut = false;
12962
12784
  this.isOpen = true;
12963
12785
  }
12964
- async sdValidate() {
12965
- this.formField?.sdValidate();
12966
- }
12967
- async sdReset() {
12968
- this.formField?.sdReset();
12969
- }
12970
- async sdResetValidate() {
12971
- this.formField?.sdResetValidation();
12786
+ triggerRef;
12787
+ triggerComponentRef;
12788
+ closeAnimationTimer;
12789
+ name = nanoid$1();
12790
+ triggerHasFocus = false;
12791
+ watchIsOpen(newValue) {
12792
+ this.syncFocusedState(newValue);
12793
+ this.dropDownShow.emit({ isOpen: newValue });
12972
12794
  }
12973
- async sdFocus() {
12974
- this.formField?.sdFocus();
12795
+ get isMulti() {
12796
+ return this.type === 'multi' || this.type === 'multi_depth';
12975
12797
  }
12976
- async isOpenChanged() {
12977
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
12978
- this.onDropdownToggle(this.isOpen);
12979
- this.dropDownShow?.emit({ isOpen: this.isOpen });
12980
- if (this.isOpen === false) {
12981
- await this.formField?.sdValidate();
12798
+ get displayText() {
12799
+ if (this.isMulti) {
12800
+ if (!Array.isArray(this.value) || this.value.length === 0)
12801
+ return '';
12802
+ const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
12803
+ const selected = this.getSelectedOptions();
12804
+ const allSelected = nonDisabledLeaves.length > 0 &&
12805
+ nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
12806
+ if (allSelected)
12807
+ return this.allSelectedLabel ?? '전체';
12808
+ const flat = this.flattenOptions(this.options);
12809
+ return this.value
12810
+ .map(item => {
12811
+ if (item != null && typeof item === 'object') {
12812
+ const opt = item;
12813
+ return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
12814
+ }
12815
+ return flat.find(o => o.value === item)?.label ?? '';
12816
+ })
12817
+ .filter(Boolean)
12818
+ .join(', ');
12982
12819
  }
12983
- }
12984
- componentWillLoad() {
12985
- this.filteredOptions = this.options;
12986
- this.dropDownWidth = this.width;
12987
- this.initializeEvent();
12988
- }
12989
- componentDidLoad() {
12990
- if (this.autoFocus) {
12991
- this.selectRef?.focus();
12820
+ if (this.value == null)
12821
+ return '';
12822
+ if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
12823
+ return this.value.label ?? '';
12992
12824
  }
12825
+ const flat = this.flattenOptions(this.options);
12826
+ const found = flat.find(o => o.value === this.value);
12827
+ return found?.label ?? '';
12993
12828
  }
12994
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
12995
- componentDidRender() {
12996
- const trigger = this.triggerRef;
12997
- const rect = trigger?.getBoundingClientRect();
12998
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
12829
+ flattenOptions(options) {
12830
+ return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
12999
12831
  }
13000
- disconnectedCallback() {
13001
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
12832
+ getNonDisabledLeaves(options) {
12833
+ return options.flatMap(o => {
12834
+ if (o.disabled)
12835
+ return [];
12836
+ if (o.children)
12837
+ return this.getNonDisabledLeaves(o.children);
12838
+ return [o];
12839
+ });
13002
12840
  }
13003
- handleDocumentClick(event) {
13004
- if (!this.selectRef?.contains(event.target)) {
13005
- this.isOpen = false;
12841
+ getSelectedOptions() {
12842
+ const val = this.value;
12843
+ if (!val || !Array.isArray(val))
12844
+ return [];
12845
+ if (this.emitValue) {
12846
+ return val
12847
+ .map(v => this.findOriginalOption(v, this.options))
12848
+ .filter((o) => !!o);
13006
12849
  }
12850
+ return val;
13007
12851
  }
13008
- handleDocumentKeydown(keyboardEvent) {
13009
- keyboardEvent.stopPropagation();
13010
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13011
- if (!targetKey.includes(keyboardEvent.key))
13012
- return;
13013
- keyboardEvent.preventDefault();
13014
- switch (keyboardEvent.key) {
13015
- case 'ArrowDown':
13016
- case 'ArrowUp':
13017
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13018
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13019
- this.itemIndex = nextIndex;
13020
- break;
13021
- case 'Enter':
13022
- const selectedOption = this.filteredOptions[this.itemIndex];
13023
- if (selectedOption && !selectedOption.disabled) {
13024
- this.value = selectedOption.value;
13025
- this.isOpen = false;
13026
- }
13027
- break;
13028
- case 'Escape':
13029
- this.isOpen = false;
13030
- break;
13031
- }
12852
+ toMultiValue(options) {
12853
+ return this.emitValue ? options.map(o => o.value) : options;
13032
12854
  }
13033
- getSelectedOption() {
13034
- return this.options.find(option => option.value === this.value);
12855
+ parsePixelValue(value, fallback) {
12856
+ const parsed = Number.parseFloat(value);
12857
+ return Number.isFinite(parsed) ? parsed : fallback;
13035
12858
  }
13036
- closeDropdown() {
13037
- this.isOpen = false;
12859
+ updateDropdownViewportConstraints() {
12860
+ if (!this.triggerRef)
12861
+ return;
12862
+ const triggerRect = this.triggerRef.getBoundingClientRect();
12863
+ const viewportPadding = SdSelect.VIEWPORT_PADDING;
12864
+ const offsetY = SdSelect.PORTAL_OFFSET_Y;
12865
+ const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
12866
+ const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
12867
+ const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
12868
+ const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
12869
+ const availableHeight = Math.max(availableBelow, availableAbove);
12870
+ const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
12871
+ this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
12872
+ this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
13038
12873
  }
13039
- handleTriggerClick = (event) => {
13040
- event.stopPropagation();
13041
- if (!this.disabled) {
13042
- this.isOpen = !this.isOpen;
13043
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13044
- }
13045
- };
13046
- handleOptionClick = (detail) => {
13047
- const { option, event } = detail;
13048
- event.stopPropagation();
13049
- if (!option.disabled) {
13050
- this.value = option.value;
13051
- this.isOpen = false;
13052
- const selectedOption = this.getSelectedOption();
13053
- this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
13054
- }
13055
- };
13056
- render() {
13057
- return (hAsync("sd-field", { key: '28b4667a386236c2486af08f636ede3dc6c41f91', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'ccee78ca4a773c521634e4054ce3b3d8e9713362', class: {
13058
- 'sd-select': true,
13059
- 'sd-select--disabled': this.disabled,
13060
- 'sd-select--error': !!this.error,
13061
- 'sd-select--label': !!this.label,
13062
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13063
- }
13064
- renderTrigger() {
13065
- const selectedOption = this.getSelectedOption();
13066
- return (hAsync("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, hAsync("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (hAsync("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: async (event) => {
13067
- event.stopPropagation();
13068
- this.value = null;
13069
- await this.formField?.sdValidate();
13070
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
13071
- }
13072
- renderDropdown() {
13073
- if (this.isOpen === false)
13074
- return null;
13075
- const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||
13076
- this.selectRef);
13077
- return (hAsync("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, hAsync("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
13078
- }
13079
- static get watchers() { return {
13080
- "isOpen": [{
13081
- "isOpenChanged": 0
13082
- }]
13083
- }; }
13084
- static get style() { return sdSelectCss(); }
13085
- static get cmpMeta() { return {
13086
- "$flags$": 512,
13087
- "$tagName$": "sd-select",
13088
- "$members$": {
13089
- "value": [1032],
13090
- "options": [1040],
13091
- "placeholder": [1],
13092
- "optionPlaceholder": [1, "option-placeholder"],
13093
- "width": [1],
13094
- "dropdownHeight": [1, "dropdown-height"],
13095
- "autoFocus": [4, "auto-focus"],
13096
- "disabled": [4],
13097
- "clearable": [4],
13098
- "searchable": [4],
13099
- "label": [1],
13100
- "labelWidth": [8, "label-width"],
13101
- "addonLabel": [1, "addon-label"],
13102
- "addonAlign": [1, "addon-align"],
13103
- "icon": [16],
13104
- "labelTooltip": [1, "label-tooltip"],
13105
- "labelTooltipProps": [16],
13106
- "rules": [16],
13107
- "error": [4],
13108
- "optionRenderer": [16],
13109
- "name": [1],
13110
- "isOpen": [32],
13111
- "itemIndex": [32],
13112
- "isScrolled": [32],
13113
- "sdOpen": [64],
13114
- "sdValidate": [64],
13115
- "sdReset": [64],
13116
- "sdResetValidate": [64],
13117
- "sdFocus": [64]
13118
- },
13119
- "$listeners$": undefined,
13120
- "$lazyBundleId$": "-",
13121
- "$attrsToReflect$": []
13122
- }; }
13123
- }
13124
-
13125
- const sdSelectDropdownCss = () => `.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{overflow:auto;min-width:fit-content;width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
13126
-
13127
- class SdSelectDropdown {
13128
- constructor(hostRef) {
13129
- registerInstance(this, hostRef);
13130
- this.optionClick = createEvent(this, "sdOptionClick", 7);
13131
- this.optionFiltered = createEvent(this, "sdOptionFiltered", 7);
13132
- this.scroll = createEvent(this, "sdScroll", 7);
13133
- }
13134
- itemIndex;
13135
- value = null;
13136
- options;
13137
- width;
13138
- dropdownHeight;
13139
- searchable;
13140
- optionPlaceholder;
13141
- useCheckbox = false;
13142
- useAll = false;
13143
- filteredOptions = [];
13144
- searchText = null;
13145
- isScrolled = false;
13146
- isDropdownReady = false;
13147
- optionClick;
13148
- optionFiltered;
13149
- scroll;
13150
- filteredOptionsChanged(newValue) {
13151
- this.optionFiltered.emit(newValue);
13152
- }
13153
- searchTextChanged() {
13154
- this.filterOptions();
13155
- }
13156
- async itemIndexChanged(newIndex, oldIndex) {
13157
- if (this.searchable) {
13158
- const searchInput = await this.getNativeInputElement();
13159
- if (this.itemIndex === -1) {
13160
- searchInput?.focus({ preventScroll: true });
13161
- return;
13162
- }
13163
- else if (searchInput?.matches(':focus')) {
13164
- searchInput?.blur();
13165
- }
13166
- }
13167
- const optionElements = this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];
13168
- const currentItem = optionElements?.[this.itemIndex];
13169
- if (!currentItem)
13170
- return;
13171
- this.optionRef = currentItem;
13172
- const isOptionDisabled = await this.optionRef.sdIsDisabled();
13173
- if (isOptionDisabled) {
13174
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
13175
- return;
13176
- }
13177
- this.scrollToOption(currentItem);
13178
- }
13179
- componentWillLoad() {
13180
- this.filteredOptions = this.options;
13181
- // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
13182
- requestAnimationFrame(() => {
13183
- requestAnimationFrame(async () => {
13184
- const selectedOptions = this.getSelectedOption();
13185
- // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
13186
- if (selectedOptions) {
13187
- const selectedIndex = Array.isArray(selectedOptions)
13188
- ? this.options.indexOf(selectedOptions[0])
13189
- : this.options.indexOf(selectedOptions);
13190
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option') || []);
13191
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
13192
- const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
13193
- // 선택된 옵션이 화면 가운데에 오도록 index 조정
13194
- const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
13195
- const currentItem = optionElements?.[targetIndex];
13196
- if (currentItem) {
13197
- this.scrollToOption(currentItem, 'instant');
13198
- }
13199
- }
13200
- this.isDropdownReady = true;
13201
- if (this.searchable) {
13202
- const searchInput = await this.getNativeInputElement();
13203
- if (searchInput) {
13204
- requestAnimationFrame(() => {
13205
- searchInput.focus({ preventScroll: true });
13206
- });
13207
- }
13208
- }
13209
- });
13210
- });
13211
- }
13212
- dropdownRef;
13213
- searchRef;
13214
- optionRef;
13215
- get dropdownSize() {
13216
- return {
13217
- '--select-dropdown-width': this.width || '200px',
13218
- '--select-dropdown-height': this.dropdownHeight || '260px',
13219
- };
13220
- }
13221
- filterOptions() {
13222
- if (!this.searchText || this.searchText.trim() === '') {
13223
- // 검색어가 없으면 전체 옵션 표시
13224
- this.filteredOptions = this.options;
13225
- }
13226
- else {
13227
- // 검색어가 있으면 필터링
13228
- this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
13229
- }
13230
- }
13231
- getSelectedOption() {
13232
- if (typeof this.value !== 'object') {
13233
- return this.options.find(option => option.value === this.value);
13234
- }
13235
- return this.options.filter(option => this.value?.includes(option));
13236
- }
13237
- isOptionSelected(value) {
13238
- if (Array.isArray(this.value)) {
13239
- return this.value.some(selected => selected.value === value);
13240
- }
13241
- return value === this.value;
13242
- }
13243
- async getNativeInputElement() {
13244
- if (this.searchRef) {
13245
- return this.searchRef.sdGetNativeElement();
13246
- }
13247
- return null;
13248
- }
13249
- scrollToOption(optionElement, scrollBehavior = 'smooth') {
13250
- if (!this.dropdownRef || !optionElement)
13251
- return;
13252
- const dropdown = this.dropdownRef;
13253
- const optionTop = optionElement.offsetTop;
13254
- const optionHeight = optionElement.offsetHeight;
13255
- const dropdownScrollTop = dropdown.scrollTop;
13256
- const dropdownHeight = dropdown.clientHeight;
13257
- const searchContainer = dropdown.querySelector('.sd-select-search-input');
13258
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
13259
- const visibleTop = dropdownScrollTop + searchOffset;
13260
- const visibleBottom = dropdownScrollTop + dropdownHeight;
13261
- if (optionTop < visibleTop) {
13262
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });
13263
- }
13264
- else if (optionTop + optionHeight > visibleBottom) {
13265
- dropdown.scrollTo({
13266
- top: optionTop + optionHeight - dropdownHeight + searchOffset,
13267
- behavior: scrollBehavior,
13268
- });
13269
- }
13270
- }
13271
- handleDropdownScroll = (event) => {
13272
- const target = event.target;
13273
- const scrollTop = target.scrollTop;
13274
- // 스크롤이 조금이라도 되면 그림자 표시
13275
- this.isScrolled = scrollTop > 0;
13276
- };
13277
- render() {
13278
- return (hAsync("div", { key: 'a831a99130074fa072534d76f4b0db7169d906e2', class: {
13279
- 'sd-select-dropdown': true,
13280
- 'sd-select-dropdown--ready': this.isDropdownReady,
13281
- }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: 'f09a5575454c30387aeac9996d15625d7581a367', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
13282
- }
13283
- static get watchers() { return {
13284
- "filteredOptions": [{
13285
- "filteredOptionsChanged": 0
13286
- }],
13287
- "searchText": [{
13288
- "searchTextChanged": 0
13289
- }],
13290
- "itemIndex": [{
13291
- "itemIndexChanged": 0
13292
- }]
13293
- }; }
13294
- static get style() { return sdSelectDropdownCss(); }
13295
- static get cmpMeta() { return {
13296
- "$flags$": 772,
13297
- "$tagName$": "sd-select-dropdown",
13298
- "$members$": {
13299
- "itemIndex": [1026, "item-index"],
13300
- "value": [8],
13301
- "options": [16],
13302
- "width": [1],
13303
- "dropdownHeight": [1, "dropdown-height"],
13304
- "searchable": [4],
13305
- "optionPlaceholder": [1, "option-placeholder"],
13306
- "useCheckbox": [4, "use-checkbox"],
13307
- "useAll": [4, "use-all"],
13308
- "filteredOptions": [32],
13309
- "searchText": [32],
13310
- "isScrolled": [32],
13311
- "isDropdownReady": [32]
13312
- },
13313
- "$listeners$": undefined,
13314
- "$lazyBundleId$": "-",
13315
- "$attrsToReflect$": []
13316
- }; }
13317
- }
13318
-
13319
- const sdSelectGroupCss = () => `.sd-select-group__dropdown .sd-select-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-group:focus,sd-select-group:focus-visible,sd-select-group:focus-within{outline:none !important}sd-select-group .sd-select-group{width:100%}sd-select-group .sd-select-group .sd-select-group__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select-group .sd-select-group .sd-select-group__trigger{cursor:not-allowed}sd-select-group .sd-select-group .sd-select-group__trigger .sd-select-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-group .sd-select-group .sd-select-group__trigger .sd-select-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-group .sd-select-group .sd-select-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-group .sd-select-group .sd-select-group__arrow--open{transform:rotate(180deg)}.sd-select-group__dropdown{overflow:auto;width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-group__dropdown--ready{opacity:1}`;
13320
-
13321
- /**
13322
- * @deprecated sd-select-v2 (name="default_depth")를 사용하세요.
13323
- */
13324
- class SdSelectGroup extends BaseDropdownEvent {
13325
- constructor(hostRef) {
13326
- super();
13327
- registerInstance(this, hostRef);
13328
- this.update = createEvent(this, "sdUpdate", 7);
13329
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13330
- }
13331
- get el() { return getElement(this); }
13332
- // props
13333
- value = null;
13334
- options = [];
13335
- placeholder = '선택';
13336
- optionPlaceholder = '선택지가 없습니다.';
13337
- width = '200px';
13338
- dropdownHeight = '260px';
13339
- autoFocus = false;
13340
- disabled = false;
13341
- clearable = false;
13342
- searchable = false;
13343
- // props - label
13344
- label = '';
13345
- labelWidth = '';
13346
- addonLabel = '';
13347
- addonAlign = 'start';
13348
- icon = undefined;
13349
- labelTooltip = '';
13350
- labelTooltipProps = null;
13351
- // props - form
13352
- rules = [];
13353
- error = false;
13354
- // props - custom styles
13355
- containerStyle = {};
13356
- triggerStyle = {};
13357
- dropdownStyle = {};
13358
- optionStyle = {};
13359
- labelStyle = {};
13360
- // props - custom slots
13361
- optionRenderer;
13362
- // states
13363
- filteredOptions = [];
13364
- isOpen = false;
13365
- searchText = null;
13366
- itemIndex = -1;
13367
- isScrolled = false;
13368
- isDropdownReady = false;
13369
- // events
13370
- update;
13371
- dropDownShow;
13372
- selectRef;
13373
- searchRef;
13374
- triggerRef;
13375
- optionRef;
13376
- dropdownRef;
13377
- formField;
13378
- dropDownWidth = '200px';
13379
- name = nanoid$1();
13380
- async sdOpen() {
13381
- await new Promise(resolve => setTimeout(resolve, 0));
13382
- this.isOpen = true;
13383
- }
13384
- async sdValidate() {
13385
- this.formField?.sdValidate();
13386
- }
13387
- async sdReset() {
13388
- this.formField?.sdReset();
13389
- }
13390
- async sdResetValidate() {
13391
- this.formField?.sdResetValidation();
13392
- }
13393
- async sdFocus() {
13394
- this.formField?.sdFocus();
13395
- }
13396
- optionsChanged() {
13397
- this.filteredOptions = this.options;
13398
- this.filterOptions();
13399
- }
13400
- searchTextChanged() {
13401
- this.filterOptions();
13402
- }
13403
- async itemIndexChanged(newIndex, oldIndex) {
13404
- if (this.searchable) {
13405
- const searchInput = await this.getNativeInputElement();
13406
- if (this.itemIndex === -1) {
13407
- searchInput?.focus({ preventScroll: true });
13408
- return;
13409
- }
13410
- else if (searchInput?.matches(':focus')) {
13411
- searchInput?.blur();
13412
- }
13413
- }
13414
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
13415
- const currentItem = optionElements?.[this.itemIndex];
13416
- if (!currentItem || !this.isOpen)
13417
- return;
13418
- this.optionRef = currentItem;
13419
- const isOptionDisabled = await this.optionRef.isDisabled();
13420
- if (isOptionDisabled) {
13421
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
13422
- return;
13423
- }
13424
- this.scrollToOption(currentItem);
13425
- }
13426
- async isOpenChanged() {
13427
- this.onDropdownToggle(this.isOpen);
13428
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13429
- this.isDropdownReady = false;
13430
- if (this.isOpen === false) {
13431
- await this.formField?.sdValidate();
13432
- return;
13433
- }
13434
- requestAnimationFrame(() => {
13435
- requestAnimationFrame(async () => {
13436
- const selectedOption = this.getSelectedOption();
13437
- if (selectedOption) {
13438
- const selectedIndex = this.filteredOptions.indexOf(selectedOption);
13439
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
13440
- const targetIndex = Math.min(selectedIndex + 4, optionElements.length - 1);
13441
- const currentItem = optionElements?.[targetIndex];
13442
- if (currentItem) {
13443
- this.scrollToOption(currentItem);
13444
- }
13445
- }
13446
- this.isDropdownReady = true;
13447
- if (this.searchable) {
13448
- const searchInput = await this.getNativeInputElement();
13449
- if (searchInput) {
13450
- requestAnimationFrame(() => {
13451
- searchInput.focus({ preventScroll: true });
13452
- });
13453
- }
13454
- }
13455
- });
13456
- });
13457
- }
13458
- componentWillLoad() {
13459
- this.filteredOptions = this.options;
13460
- this.dropDownWidth = this.width;
13461
- this.initializeEvent();
13462
- }
13463
- componentDidLoad() {
13464
- if (this.autoFocus) {
13465
- this.selectRef?.focus();
13466
- }
13467
- }
13468
- componentDidRender() {
13469
- const trigger = this.triggerRef;
13470
- const rect = trigger?.getBoundingClientRect();
13471
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
13472
- }
13473
- disconnectedCallback() {
13474
- this.cleanupEvent();
13475
- }
13476
- handleDocumentClick(event) {
13477
- if (!this.selectRef?.contains(event.target)) {
13478
- this.isOpen = false;
13479
- }
13480
- }
13481
- handleDocumentKeydown(keyboardEvent) {
13482
- keyboardEvent.stopPropagation();
13483
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13484
- if (!targetKey.includes(keyboardEvent.key))
13485
- return;
13486
- keyboardEvent.preventDefault();
13487
- switch (keyboardEvent.key) {
13488
- case 'ArrowDown':
13489
- case 'ArrowUp':
13490
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13491
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13492
- this.itemIndex = nextIndex;
13493
- break;
13494
- case 'Enter':
13495
- const selectedOption = this.filteredOptions[this.itemIndex];
13496
- if (selectedOption && !selectedOption.disabled && selectedOption.type === 'item') {
13497
- this.handleOptionSelection(selectedOption);
13498
- }
13499
- break;
13500
- case 'Escape':
13501
- this.isOpen = false;
13502
- break;
13503
- }
13504
- }
13505
- // event handlers
13506
- handleTriggerClick = (event) => {
13507
- event.stopPropagation();
13508
- if (!this.disabled) {
13509
- this.isOpen = !this.isOpen;
13510
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13511
- }
13512
- };
13513
- handleOptionClick = (detail) => {
13514
- const { option, event } = detail;
13515
- event.stopPropagation();
13516
- if (option.type === 'item') {
13517
- this.handleOptionSelection(option);
13518
- }
13519
- };
13520
- filterOptions() {
13521
- if (!this.searchText || this.searchText.trim() === '') {
13522
- this.filteredOptions = this.options;
13523
- return;
13524
- }
13525
- const searchTerm = this.searchText.toLowerCase();
13526
- const matchedOptions = new Set();
13527
- this.options.forEach(option => {
13528
- if (option.label.toLowerCase().includes(searchTerm)) {
13529
- matchedOptions.add(option);
13530
- this.addParentGroups(option, matchedOptions);
13531
- }
13532
- });
13533
- this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
13534
- }
13535
- addParentGroups(option, matchedSet) {
13536
- if (!option.parent)
13537
- return;
13538
- const parentOption = this.options.find(opt => opt.value === option.parent);
13539
- if (parentOption && !matchedSet.has(parentOption)) {
13540
- matchedSet.add(parentOption);
13541
- this.addParentGroups(parentOption, matchedSet);
13542
- }
13543
- }
13544
- getSelectedOption() {
13545
- return this.options.find(option => option.value === this.value);
13546
- }
13547
- handleDropdownScroll = (event) => {
13548
- const target = event.target;
13549
- this.isScrolled = target.scrollTop > 0;
13550
- };
13551
- async getNativeInputElement() {
13552
- if (this.searchRef) {
13553
- return this.searchRef.sdGetNativeElement();
13554
- }
13555
- return null;
13556
- }
13557
- handleOptionSelection = (option) => {
13558
- if (!option || option.disabled)
13559
- return;
13560
- this.value = option.value;
13561
- this.isOpen = false;
13562
- const selectedOption = this.getSelectedOption();
13563
- this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
13564
- };
13565
- closeDropdown() {
13566
- this.isOpen = false;
13567
- }
13568
- async scrollToOption(optionElement) {
13569
- if (!this.dropdownRef || !optionElement)
13570
- return;
13571
- requestAnimationFrame(() => {
13572
- const dropdown = this.dropdownRef;
13573
- const optionTop = optionElement.offsetTop;
13574
- const optionHeight = optionElement.offsetHeight;
13575
- const dropdownScrollTop = dropdown.scrollTop;
13576
- const dropdownHeight = dropdown.clientHeight;
13577
- const searchContainer = dropdown.querySelector('.sd-select-group__search-container');
13578
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
13579
- const visibleContentHeight = dropdownHeight - searchOffset;
13580
- const visibleTop = dropdownScrollTop + searchOffset;
13581
- const visibleBottom = dropdownScrollTop + dropdownHeight;
13582
- if (optionTop < visibleTop) {
13583
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
13584
- }
13585
- else if (optionTop + optionHeight > visibleBottom) {
13586
- dropdown.scrollTo({
13587
- top: optionTop + optionHeight - visibleContentHeight - searchOffset,
13588
- behavior: 'instant',
13589
- });
13590
- }
13591
- });
13592
- }
13593
- render() {
13594
- return (hAsync("sd-field", { key: 'aa5470eaba6489d6eb380996eeb0c0c985e20fbf', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '90d4cc0bde3240be6a8406c9ea6c82c2fdad3482', class: {
13595
- 'sd-select-group': true,
13596
- 'sd-select-group--open': this.isOpen,
13597
- 'sd-select-group--disabled': this.disabled,
13598
- 'sd-select-group--label': !!this.label,
13599
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13600
- }
13601
- renderTrigger() {
13602
- const selectedOption = this.getSelectedOption();
13603
- return (hAsync("div", { class: "sd-select-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle, ref: el => (this.triggerRef = el) }, hAsync("span", { class: "sd-select-group__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "grey_65", class: "sd-select-group__clear", onClick: async (event) => {
13604
- event.stopPropagation();
13605
- this.value = null;
13606
- this.update?.emit({ value: null, option: null });
13607
- await this.formField?.sdValidate();
13608
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "grey_65", class: {
13609
- 'sd-select-group__arrow': true,
13610
- 'sd-select-group__arrow--open': this.isOpen,
13611
- } })));
13612
- }
13613
- renderDropdown() {
13614
- const style = {
13615
- '--select-width': this.dropDownWidth || '200px',
13616
- '--select-dropdown-height': this.dropdownHeight || '260px',
13617
- };
13618
- if (this.isOpen === false)
13619
- return null;
13620
- return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { style: { width: '0', height: '0', overflow: 'visible' } }, hAsync("div", { class: {
13621
- 'sd-select-group__dropdown': true,
13622
- 'sd-select-group__dropdown--ready': this.isDropdownReady,
13623
- }, style: { ...style, ...this.dropdownStyle }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (hAsync(Fragment, null, this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item' ? option.value === this.value : false, isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
13624
- if (option.type !== 'item')
13625
- return;
13626
- this.handleOptionClick(detail);
13627
- }, useCheckbox: false, useIndicator: false })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
13628
- }
13629
- static get watchers() { return {
13630
- "options": [{
13631
- "optionsChanged": 0
13632
- }],
13633
- "searchText": [{
13634
- "searchTextChanged": 0
13635
- }],
13636
- "itemIndex": [{
13637
- "itemIndexChanged": 0
13638
- }],
13639
- "isOpen": [{
13640
- "isOpenChanged": 0
13641
- }]
13642
- }; }
13643
- static get style() { return sdSelectGroupCss(); }
13644
- static get cmpMeta() { return {
13645
- "$flags$": 772,
13646
- "$tagName$": "sd-select-group",
13647
- "$members$": {
13648
- "value": [1032],
13649
- "options": [1040],
13650
- "placeholder": [1],
13651
- "optionPlaceholder": [1, "option-placeholder"],
13652
- "width": [1],
13653
- "dropdownHeight": [1, "dropdown-height"],
13654
- "autoFocus": [4, "auto-focus"],
13655
- "disabled": [4],
13656
- "clearable": [4],
13657
- "searchable": [4],
13658
- "label": [1],
13659
- "labelWidth": [8, "label-width"],
13660
- "addonLabel": [1, "addon-label"],
13661
- "addonAlign": [1, "addon-align"],
13662
- "icon": [16],
13663
- "labelTooltip": [1, "label-tooltip"],
13664
- "labelTooltipProps": [16],
13665
- "rules": [16],
13666
- "error": [4],
13667
- "containerStyle": [16],
13668
- "triggerStyle": [16],
13669
- "dropdownStyle": [16],
13670
- "optionStyle": [16],
13671
- "labelStyle": [16],
13672
- "optionRenderer": [16],
13673
- "name": [1],
13674
- "filteredOptions": [32],
13675
- "isOpen": [32],
13676
- "searchText": [32],
13677
- "itemIndex": [32],
13678
- "isScrolled": [32],
13679
- "isDropdownReady": [32],
13680
- "sdOpen": [64],
13681
- "sdValidate": [64],
13682
- "sdReset": [64],
13683
- "sdResetValidate": [64],
13684
- "sdFocus": [64]
13685
- },
13686
- "$listeners$": undefined,
13687
- "$lazyBundleId$": "-",
13688
- "$attrsToReflect$": []
13689
- }; }
13690
- }
13691
-
13692
- const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{cursor:not-allowed}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
13693
-
13694
- /**
13695
- * @deprecated sd-select-v2 (name="multi")를 사용하세요.
13696
- */
13697
- class SdSelectMultiple extends BaseDropdownEvent {
13698
- constructor(hostRef) {
13699
- super();
13700
- registerInstance(this, hostRef);
13701
- this.update = createEvent(this, "sdUpdate", 7);
13702
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13703
- }
13704
- get el() { return getElement(this); }
13705
- // props
13706
- value = null;
13707
- options = [];
13708
- placeholder = '선택';
13709
- optionPlaceholder = '선택지가 없습니다.';
13710
- width = '200px';
13711
- dropdownHeight = '260px';
13712
- autoFocus = false;
13713
- disabled = false;
13714
- clearable = false;
13715
- searchable = false;
13716
- // props - select multiple specific
13717
- useAll = false;
13718
- useCheckbox = false;
13719
- // props - label
13720
- label = '';
13721
- labelWidth = '';
13722
- icon = undefined;
13723
- labelTooltip = '';
13724
- labelTooltipProps = null;
13725
- // props - form
13726
- rules = [];
13727
- error = false;
13728
- optionRenderer;
13729
- // states
13730
- isOpen = false;
13731
- itemIndex = -1;
13732
- isScrolled = false;
13733
- // events
13734
- update;
13735
- dropDownShow;
13736
- selectRef;
13737
- triggerRef;
13738
- formField;
13739
- filteredOptions = [];
13740
- dropDownWidth = '200px';
13741
- name = nanoid$1();
13742
- async sdOpen() {
13743
- this.isOpen = true;
13744
- }
13745
- async sdValidate() {
13746
- this.formField?.sdValidate();
13747
- }
13748
- async sdReset() {
13749
- this.formField?.sdReset();
13750
- }
13751
- async sdResetValidate() {
13752
- this.formField?.sdResetValidation();
13753
- }
13754
- async sdFocus() {
13755
- this.formField?.sdFocus();
13756
- }
13757
- async isOpenChanged() {
13758
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
13759
- this.onDropdownToggle(this.isOpen);
13760
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13761
- if (this.isOpen === false) {
13762
- await this.formField?.sdValidate();
13763
- }
13764
- }
13765
- componentWillLoad() {
13766
- this.filteredOptions = this.options;
13767
- this.dropDownWidth = this.width;
13768
- this.initializeEvent();
13769
- }
13770
- componentDidLoad() {
13771
- if (this.autoFocus) {
13772
- this.selectRef?.focus();
13773
- }
13774
- }
13775
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
13776
- componentDidRender() {
13777
- const trigger = this.triggerRef;
13778
- const rect = trigger?.getBoundingClientRect();
13779
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
13780
- }
13781
- disconnectedCallback() {
13782
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
13783
- }
13784
- handleDocumentClick(event) {
13785
- if (!this.selectRef?.contains(event.target)) {
13786
- this.isOpen = false;
13787
- }
13788
- }
13789
- handleDocumentKeydown(keyboardEvent) {
13790
- keyboardEvent.stopPropagation();
13791
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13792
- if (!targetKey.includes(keyboardEvent.key))
13793
- return;
13794
- keyboardEvent.preventDefault();
13795
- switch (keyboardEvent.key) {
13796
- case 'ArrowDown':
13797
- case 'ArrowUp':
13798
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13799
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13800
- this.itemIndex = nextIndex;
13801
- break;
13802
- case 'Enter':
13803
- const selectedOption = this.filteredOptions[this.itemIndex];
13804
- if (selectedOption && !selectedOption.disabled) {
13805
- this.handleOptionSelection(selectedOption);
13806
- }
13807
- break;
13808
- case 'Escape':
13809
- this.isOpen = false;
13810
- break;
13811
- }
13812
- }
13813
- handleOptionSelection = (option) => {
13814
- if (!option || option.disabled)
13815
- return;
13816
- const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
13817
- if (isAlreadySelected) {
13818
- // 이미 선택된 옵션인 경우, 선택 해제
13819
- this.value = this.value?.filter(opt => opt.value !== option.value) || null;
13820
- }
13821
- else {
13822
- // 새로운 옵션 선택
13823
- this.value = [...(this.value || []), option];
13824
- }
13825
- this.update?.emit(this.value);
13826
- };
13827
- getSelectedOption() {
13828
- return this.options.filter(option => this.value?.includes(option));
13829
- }
13830
- closeDropdown() {
13831
- this.isOpen = false;
13832
- }
13833
- handleTriggerClick = (event) => {
13834
- event.stopPropagation();
13835
- if (!this.disabled) {
13836
- this.isOpen = !this.isOpen;
13837
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13838
- }
13839
- };
13840
- handleOptionClick = (detail) => {
13841
- const { option, event } = detail;
13842
- event.stopPropagation();
13843
- this.handleOptionSelection(option);
13844
- };
13845
- render() {
13846
- return (hAsync("sd-field", { key: '6fc9d0059e91044ef8e40881276bbef857ef1225', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'b2591c655dc27b1db16e8f40c0a33997acbee35b', class: {
13847
- 'sd-select-multiple': true,
13848
- 'sd-select-multiple--open': this.isOpen,
13849
- 'sd-select-multiple--disabled': this.disabled,
13850
- 'sd-select-multiple--error': !!this.error,
13851
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13852
- }
13853
- renderTrigger() {
13854
- const selectedOption = this.getSelectedOption();
13855
- return (hAsync("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, hAsync("span", { class: "sd-select-multiple__value" }, !selectedOption || selectedOption.length === 0
13856
- ? this.placeholder
13857
- : selectedOption.map(option => option.label).join(', ')), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: async (event) => {
13858
- event.stopPropagation();
13859
- this.value = null;
13860
- await this.formField?.sdValidate();
13861
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
13862
- }
13863
- renderDropdown() {
13864
- if (this.isOpen === false)
13865
- return null;
13866
- const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||
13867
- this.selectRef);
13868
- return (hAsync("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, hAsync("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, useCheckbox: this.useCheckbox, useAll: this.useAll, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
13869
- }
13870
- static get watchers() { return {
13871
- "isOpen": [{
13872
- "isOpenChanged": 0
13873
- }]
13874
- }; }
13875
- static get style() { return sdSelectMultipleCss(); }
13876
- static get cmpMeta() { return {
13877
- "$flags$": 512,
13878
- "$tagName$": "sd-select-multiple",
13879
- "$members$": {
13880
- "value": [1040],
13881
- "options": [1040],
13882
- "placeholder": [1],
13883
- "optionPlaceholder": [1, "option-placeholder"],
13884
- "width": [1],
13885
- "dropdownHeight": [1, "dropdown-height"],
13886
- "autoFocus": [4, "auto-focus"],
13887
- "disabled": [4],
13888
- "clearable": [4],
13889
- "searchable": [4],
13890
- "useAll": [4, "use-all"],
13891
- "useCheckbox": [4, "use-checkbox"],
13892
- "label": [1],
13893
- "labelWidth": [8, "label-width"],
13894
- "icon": [16],
13895
- "labelTooltip": [1, "label-tooltip"],
13896
- "labelTooltipProps": [16],
13897
- "rules": [16],
13898
- "error": [4],
13899
- "optionRenderer": [16],
13900
- "isOpen": [32],
13901
- "itemIndex": [32],
13902
- "isScrolled": [32],
13903
- "sdOpen": [64],
13904
- "sdValidate": [64],
13905
- "sdReset": [64],
13906
- "sdResetValidate": [64],
13907
- "sdFocus": [64]
13908
- },
13909
- "$listeners$": undefined,
13910
- "$lazyBundleId$": "-",
13911
- "$attrsToReflect$": []
13912
- }; }
13913
- }
13914
-
13915
- const sdSelectMultipleGroupCss = () => `.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-multiple-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple-group:focus,sd-select-multiple-group:focus-visible,sd-select-multiple-group:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group{width:100%}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger{cursor:not-allowed}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{overflow:auto;width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-multiple-group__dropdown--ready{opacity:1}`;
13916
-
13917
- /**
13918
- * @deprecated sd-select-v2 (name="multi_depth")를 사용하세요.
13919
- */
13920
- class SdSelectMultipleGroup extends BaseDropdownEvent {
13921
- constructor(hostRef) {
13922
- super();
13923
- registerInstance(this, hostRef);
13924
- this.update = createEvent(this, "sdUpdate", 7);
13925
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13926
- }
13927
- get el() { return getElement(this); }
13928
- // props
13929
- value = null;
13930
- options = [];
13931
- placeholder = '선택';
13932
- optionPlaceholder = '선택지가 없습니다.';
13933
- width = '200px';
13934
- dropdownHeight = '260px';
13935
- disabled = false;
13936
- clearable = false;
13937
- searchable = false;
13938
- useCheckbox = false;
13939
- useAll = false;
13940
- allCheckedLabel = '전체';
13941
- allCheckOptionLabel = '전체';
13942
- // props - label
13943
- label = '';
13944
- labelWidth = '';
13945
- icon = undefined;
13946
- labelTooltip = '';
13947
- labelTooltipProps = null;
13948
- // props - form
13949
- rules = [];
13950
- error = false;
13951
- // props - custom styles
13952
- containerStyle = {};
13953
- triggerStyle = {};
13954
- dropdownStyle = {};
13955
- optionStyle = {};
13956
- labelStyle = {};
13957
- // props - custom slots
13958
- optionRenderer;
13959
- // states
13960
- filteredOptions = [];
13961
- isOpen = false;
13962
- searchText = null;
13963
- itemIndex = -1;
13964
- isScrolled = false;
13965
- isDropdownReady = false;
13966
- // events
13967
- update;
13968
- dropDownShow;
13969
- selectRef;
13970
- searchRef;
13971
- triggerRef;
13972
- optionRef;
13973
- dropdownRef;
13974
- formField;
13975
- dropDownWidth = '200px';
13976
- name = nanoid$1();
13977
- async sdOpen() {
13978
- await new Promise(resolve => setTimeout(resolve, 0));
13979
- this.isOpen = true;
13980
- }
13981
- async sdValidate() {
13982
- this.formField?.sdValidate();
13983
- }
13984
- async sdReset() {
13985
- this.formField?.sdReset();
13986
- }
13987
- async sdResetValidate() {
13988
- this.formField?.sdResetValidation();
13989
- }
13990
- async sdFocus() {
13991
- this.formField?.sdFocus();
13992
- }
13993
- valueChanged() {
13994
- this.update?.emit(this.value);
13995
- }
13996
- optionsChanged() {
13997
- this.filteredOptions = this.options;
13998
- this.filterOptions();
13999
- }
14000
- searchTextChanged() {
14001
- this.filterOptions();
14002
- }
14003
- async itemIndexChanged(newIndex, oldIndex) {
14004
- if (this.searchable) {
14005
- const searchInput = await this.getNativeInputElement();
14006
- if (this.itemIndex === -1) {
14007
- searchInput?.focus({ preventScroll: true });
14008
- return;
14009
- }
14010
- else if (searchInput?.matches(':focus')) {
14011
- searchInput?.blur();
14012
- }
14013
- }
14014
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
14015
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
14016
- const actualIndex = this.useAll ? this.itemIndex + 1 : this.itemIndex;
14017
- const currentItem = optionElements?.[actualIndex];
14018
- if (!currentItem || !this.isOpen)
14019
- return;
14020
- this.optionRef = currentItem;
14021
- const isOptionDisabled = await this.optionRef.isDisabled();
14022
- if (isOptionDisabled) {
14023
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
14024
- return;
14025
- }
14026
- this.scrollToOption(currentItem);
14027
- }
14028
- async isOpenChanged() {
14029
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
14030
- this.onDropdownToggle(this.isOpen);
14031
- this.dropDownShow?.emit({ isOpen: this.isOpen });
14032
- this.isDropdownReady = false;
14033
- if (this.isOpen === false) {
14034
- await this.formField?.sdValidate();
14035
- return;
14036
- }
14037
- // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
14038
- requestAnimationFrame(() => {
14039
- requestAnimationFrame(async () => {
14040
- const selectedOptions = this.getSelectedOption();
14041
- // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
14042
- if (selectedOptions && selectedOptions.length > 0) {
14043
- const selectedIndex = this.options.indexOf(selectedOptions[0]);
14044
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
14045
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
14046
- const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
14047
- // 선택된 옵션이 화면 가운데에 오도록 index 조정
14048
- const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
14049
- const currentItem = optionElements?.[targetIndex];
14050
- if (currentItem) {
14051
- this.scrollToOption(currentItem);
14052
- }
14053
- }
14054
- this.isDropdownReady = true;
14055
- if (this.searchable) {
14056
- const searchInput = await this.getNativeInputElement();
14057
- if (searchInput) {
14058
- requestAnimationFrame(() => {
14059
- searchInput.focus({ preventScroll: true });
14060
- });
14061
- }
14062
- }
14063
- });
14064
- });
14065
- }
14066
- componentWillLoad() {
14067
- this.filteredOptions = this.options;
14068
- this.dropDownWidth = this.width;
14069
- this.initializeEvent();
14070
- }
14071
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
14072
- componentDidRender() {
14073
- const trigger = this.triggerRef;
14074
- const rect = trigger?.getBoundingClientRect();
14075
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
14076
- }
14077
- disconnectedCallback() {
14078
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
14079
- }
14080
- handleDocumentClick(event) {
14081
- if (!this.selectRef?.contains(event.target)) {
14082
- this.isOpen = false;
14083
- }
14084
- }
14085
- handleDocumentKeydown(keyboardEvent) {
14086
- keyboardEvent.stopPropagation();
14087
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
14088
- if (!targetKey.includes(keyboardEvent.key))
14089
- return;
14090
- keyboardEvent.preventDefault();
14091
- switch (keyboardEvent.key) {
14092
- case 'ArrowDown':
14093
- case 'ArrowUp':
14094
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
14095
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
14096
- this.itemIndex = nextIndex;
14097
- break;
14098
- case 'Enter':
14099
- const selectedOption = this.filteredOptions[this.itemIndex];
14100
- if (selectedOption && !selectedOption.disabled) {
14101
- this.handleOptionSelection(selectedOption);
14102
- }
14103
- break;
14104
- case 'Escape':
14105
- this.isOpen = false;
14106
- break;
14107
- }
14108
- }
14109
- // event handlers
14110
- handleTriggerClick = (event) => {
14111
- event.stopPropagation();
14112
- if (!this.disabled) {
14113
- this.isOpen = !this.isOpen;
14114
- this.dropDownShow?.emit({ isOpen: this.isOpen });
14115
- }
14116
- };
14117
- handleAllOptionClick = (detail) => {
14118
- if (detail.isSelected) {
14119
- // 이미 선택된 옵션인 경우, 선택 해제
14120
- const filterDisabledOptions = this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled);
14121
- this.value =
14122
- this.value?.filter(selected => !filterDisabledOptions.some(opt => opt.value === selected.value)) || this.value;
14123
- }
14124
- else {
14125
- // 새로운 옵션 선택
14126
- const valueSet = new Set([
14127
- ...(this.value || []),
14128
- ...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled),
14129
- ]);
14130
- this.value = Array.from(valueSet);
14131
- }
14132
- };
14133
- handleOptionClick = (detail) => {
14134
- const { option, event } = detail;
14135
- event.stopPropagation();
14136
- if (option.type === 'group')
14137
- this.handleGroupOptionClick(detail);
14138
- if (option.type === 'subgroup')
14139
- this.handleSubGroupOptionClick(detail);
14140
- if (option.type === 'item')
14141
- this.handleOptionSelection(option);
14142
- };
14143
- handleGroupOptionClick = (detail) => {
14144
- const { option, isSelected } = detail;
14145
- const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
14146
- childOptions.forEach(subgroup => {
14147
- this.handleSubGroupOptionClick({
14148
- option: subgroup,
14149
- isSelected: isSelected || isSelected === null,
14150
- });
14151
- });
14152
- };
14153
- handleSubGroupOptionClick = (detail) => {
14154
- const { option, isSelected } = detail;
14155
- const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
14156
- if (isSelected || isSelected === null) {
14157
- // 모든 자식 옵션이 선택된 경우, 모두 선택 해제
14158
- this.value =
14159
- this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||
14160
- null;
14161
- }
14162
- else {
14163
- // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택
14164
- const newSelections = childOptions.filter(child => !this.value?.some(selected => selected.value === child.value));
14165
- this.value = [...(this.value || []), ...newSelections];
14166
- }
14167
- };
14168
- filterOptions() {
14169
- if (!this.searchText || this.searchText.trim() === '') {
14170
- // 검색어가 없으면 전체 옵션 표시
14171
- this.filteredOptions = this.options;
14172
- return;
14173
- }
14174
- const searchTerm = this.searchText.toLowerCase();
14175
- const matchedOptions = new Set();
14176
- // 1. 직접 매칭되는 옵션들 찾기
14177
- this.options.forEach(option => {
14178
- if (option.label.toLowerCase().includes(searchTerm)) {
14179
- matchedOptions.add(option);
14180
- // 매칭된 옵션의 상위 그룹들도 포함
14181
- this.addParentGroups(option, matchedOptions);
14182
- }
14183
- });
14184
- // 2. Set을 배열로 변환하고 원본 순서 유지
14185
- this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
14186
- }
14187
- addParentGroups(option, matchedSet) {
14188
- if (!option.parent)
14189
- return;
14190
- const parentOption = this.options.find(opt => opt.value === option.parent);
14191
- if (parentOption && !matchedSet.has(parentOption)) {
14192
- matchedSet.add(parentOption);
14193
- // 재귀적으로 상위 그룹들도 추가
14194
- this.addParentGroups(parentOption, matchedSet);
14195
- }
14196
- }
14197
- getSelectedOption() {
14198
- return this.options.filter(option => this.value?.includes(option));
14199
- }
14200
- handleDropdownScroll = (event) => {
14201
- const target = event.target;
14202
- const scrollTop = target.scrollTop;
14203
- // 스크롤이 조금이라도 되면 그림자 표시
14204
- this.isScrolled = scrollTop > 0;
14205
- };
14206
- async getNativeInputElement() {
14207
- if (this.searchRef) {
14208
- return this.searchRef.sdGetNativeElement();
14209
- }
14210
- return null;
14211
- }
14212
- handleOptionSelection = (option) => {
14213
- if (!option || option.disabled)
14214
- return;
14215
- const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
14216
- if (isAlreadySelected) {
14217
- // 이미 선택된 옵션인 경우, 선택 해제
14218
- this.value = this.value?.filter(opt => opt.value !== option.value) || null;
14219
- }
14220
- else {
14221
- // 새로운 옵션 선택
14222
- this.value = [...(this.value || []), option];
14223
- }
14224
- };
14225
- getAllItemsUnderOption(parentOption, includeDisabled = false) {
14226
- const filterChildrenWithParent = (option) => option.parent === parentOption.value && (includeDisabled || !option.disabled);
14227
- if (parentOption.type === 'subgroup') {
14228
- return this.filteredOptions.filter(option => filterChildrenWithParent(option) && option.type === 'item');
14229
- }
14230
- const allItems = [];
14231
- const childOptions = this.filteredOptions.filter(filterChildrenWithParent);
14232
- const subgroupOptions = childOptions.filter(option => option.type === 'subgroup');
14233
- subgroupOptions.forEach(subgroup => {
14234
- const itemsUnderSubgroup = this.filteredOptions.filter(option => option.parent === subgroup.value &&
14235
- option.type === 'item' &&
14236
- (includeDisabled ? true : !option.disabled));
14237
- allItems.push(...itemsUnderSubgroup);
14238
- });
14239
- const directItems = childOptions.filter(option => option.type === 'item');
14240
- allItems.push(...directItems);
14241
- return allItems;
14242
- }
14243
- isAllChildrenSelected(groupOption) {
14244
- const allItems = this.getAllItemsUnderOption(groupOption);
14245
- if (allItems.length === 0)
14246
- return false;
14247
- const selectedItems = allItems.filter(item => this.value?.some(selected => selected.value === item.value));
14248
- if (selectedItems.length === allItems.length)
14249
- return true;
14250
- if (selectedItems.length > 0)
14251
- return null;
14252
- return false;
14253
- }
14254
- getChildrenOptions(parentOption) {
14255
- const allItems = this.getAllItemsUnderOption(parentOption, true);
14256
- const selectedCount = allItems.filter(item => this.value?.some(val => val.value === item.value)).length;
14257
- return {
14258
- selectedCount,
14259
- totalCount: allItems.length,
14260
- };
14261
- }
14262
- isAllOptionsSelected() {
14263
- if (!this.value || this.value.length === 0)
14264
- return false;
14265
- const selectableItems = this.options.filter(opt => opt.type === 'item' && !opt.disabled);
14266
- if (selectableItems.length === 0)
14267
- return false;
14268
- const selectedValues = new Set(this.value.map(v => v.value));
14269
- return selectableItems.every(option => selectedValues.has(option.value));
14270
- }
14271
- getTriggerLabel() {
14272
- const selectedOption = this.getSelectedOption();
14273
- if (!selectedOption)
14274
- return '선택';
14275
- if (selectedOption.length === 0)
14276
- return this.placeholder;
14277
- const isAllChecked = this.isAllOptionsSelected();
14278
- return isAllChecked
14279
- ? this.allCheckedLabel
14280
- : selectedOption.map(option => option.label).join(', ');
14281
- }
14282
- closeDropdown() {
14283
- this.isOpen = false;
14284
- }
14285
- async scrollToOption(optionElement) {
14286
- if (!this.dropdownRef || !optionElement)
14287
- return;
14288
- requestAnimationFrame(() => {
14289
- const dropdown = this.dropdownRef;
14290
- const optionTop = optionElement.offsetTop;
14291
- const optionHeight = optionElement.offsetHeight;
14292
- const dropdownScrollTop = dropdown.scrollTop;
14293
- const dropdownHeight = dropdown.clientHeight;
14294
- const searchContainer = dropdown.querySelector('.sd-select-multiple-group__search-container');
14295
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
14296
- const visibleContentHeight = dropdownHeight - searchOffset;
14297
- const visibleTop = dropdownScrollTop + searchOffset;
14298
- const visibleBottom = dropdownScrollTop + dropdownHeight;
14299
- if (optionTop < visibleTop) {
14300
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
14301
- }
14302
- else if (optionTop + optionHeight > visibleBottom) {
14303
- dropdown.scrollTo({
14304
- top: optionTop + optionHeight - visibleContentHeight - searchOffset,
14305
- behavior: 'instant',
14306
- });
14307
- }
14308
- });
14309
- }
14310
- render() {
14311
- return (hAsync("sd-field", { key: '4140b6529565f97fa65d81ae1462108476d52bcc', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '2dab2697f3e375d214b66464b0f57aa32e77757b', class: {
14312
- 'sd-select-multiple-group': true,
14313
- 'sd-select-multiple-group--open': this.isOpen,
14314
- 'sd-select-multiple-group--disabled': this.disabled,
14315
- 'sd-select-multiple-group--label': !!this.label,
14316
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
14317
- }
14318
- renderTrigger() {
14319
- const selectedOption = this.getSelectedOption();
14320
- return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: async (event) => {
14321
- event.stopPropagation();
14322
- this.value = null;
14323
- await this.formField?.sdValidate();
14324
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
14325
- 'sd-select-multiple-group__arrow': true,
14326
- 'sd-select-multiple-group__arrow--open': this.isOpen,
14327
- } })));
14328
- }
14329
- renderDropdown() {
14330
- const style = {
14331
- '--select-width': this.dropDownWidth || '200px',
14332
- '--select-dropdown-height': this.dropdownHeight || '260px',
14333
- };
14334
- if (this.isOpen === false)
14335
- return null;
14336
- return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { style: { width: '0', height: '0', overflow: 'visible' } }, hAsync("div", { class: {
14337
- 'sd-select-multiple-group__dropdown': true,
14338
- 'sd-select-multiple-group__dropdown--ready': this.isDropdownReady,
14339
- }, style: { ...style, ...this.dropdownStyle }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (hAsync(Fragment, null, this.useAll && (hAsync("sd-select-option-group", { option: { label: this.allCheckOptionLabel, value: '', type: 'all' }, index: 0, isSelected: this.isAllOptionsSelected(), isFocused: this.itemIndex === 0, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleAllOptionClick(detail), useCheckbox: this.useCheckbox, useIndicator: false })), this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item'
14340
- ? this.value?.some(selected => selected.value === option.value)
14341
- : this.isAllChildrenSelected(option), isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
14342
- if (option.type !== 'item' && !this.useCheckbox) {
14343
- return;
14344
- }
14345
- this.handleOptionClick(detail);
14346
- }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
14347
- }
14348
- static get watchers() { return {
14349
- "value": [{
14350
- "valueChanged": 0
14351
- }],
14352
- "options": [{
14353
- "optionsChanged": 0
14354
- }],
14355
- "searchText": [{
14356
- "searchTextChanged": 0
14357
- }],
14358
- "itemIndex": [{
14359
- "itemIndexChanged": 0
14360
- }],
14361
- "isOpen": [{
14362
- "isOpenChanged": 0
14363
- }]
14364
- }; }
14365
- static get style() { return sdSelectMultipleGroupCss(); }
14366
- static get cmpMeta() { return {
14367
- "$flags$": 772,
14368
- "$tagName$": "sd-select-multiple-group",
14369
- "$members$": {
14370
- "value": [1040],
14371
- "options": [1040],
14372
- "placeholder": [1],
14373
- "optionPlaceholder": [1, "option-placeholder"],
14374
- "width": [1],
14375
- "dropdownHeight": [1, "dropdown-height"],
14376
- "disabled": [4],
14377
- "clearable": [4],
14378
- "searchable": [4],
14379
- "useCheckbox": [4, "use-checkbox"],
14380
- "useAll": [4, "use-all"],
14381
- "allCheckedLabel": [1, "all-checked-label"],
14382
- "allCheckOptionLabel": [1, "all-check-option-label"],
14383
- "label": [1],
14384
- "labelWidth": [8, "label-width"],
14385
- "icon": [16],
14386
- "labelTooltip": [1, "label-tooltip"],
14387
- "labelTooltipProps": [16],
14388
- "rules": [16],
14389
- "error": [4],
14390
- "containerStyle": [16],
14391
- "triggerStyle": [16],
14392
- "dropdownStyle": [16],
14393
- "optionStyle": [16],
14394
- "labelStyle": [16],
14395
- "optionRenderer": [16],
14396
- "filteredOptions": [32],
14397
- "isOpen": [32],
14398
- "searchText": [32],
14399
- "itemIndex": [32],
14400
- "isScrolled": [32],
14401
- "isDropdownReady": [32],
14402
- "sdOpen": [64],
14403
- "sdValidate": [64],
14404
- "sdReset": [64],
14405
- "sdResetValidate": [64],
14406
- "sdFocus": [64]
14407
- },
14408
- "$listeners$": undefined,
14409
- "$lazyBundleId$": "-",
14410
- "$attrsToReflect$": []
14411
- }; }
14412
- }
14413
-
14414
- const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-content;line-height:0}sd-select-option .sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option .sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option .sd-select__option--focused{background-color:#E6F1FF}sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075FF;font-weight:700}sd-select-option .sd-select__option--disabled{color:#AAAAAA;cursor:not-allowed}sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075FF;color:white}`;
14415
-
14416
- class SdSelectOption {
14417
- constructor(hostRef) {
14418
- registerInstance(this, hostRef);
14419
- this.optionClick = createEvent(this, "optionClick", 7);
14420
- }
14421
- get el() { return getElement(this); }
14422
- option;
14423
- index;
14424
- isSelected = false;
14425
- isFocused = false;
14426
- optionStyle;
14427
- disabled = false;
14428
- useCheckbox = false;
14429
- isHovered = false;
14430
- async sdIsDisabled() {
14431
- return !!this.option.disabled;
14432
- }
14433
- optionClick;
14434
- handleClick = (event) => {
14435
- event.stopPropagation();
14436
- if (!this.option.disabled && !this.disabled) {
14437
- this.optionClick.emit({
14438
- option: this.option,
14439
- index: this.index,
14440
- event,
14441
- });
14442
- }
14443
- };
14444
- render() {
14445
- return (hAsync("div", { key: '413176678e27ad80c3ba51f8e32681f017d210ac', class: {
14446
- 'sd-select__option': true,
14447
- 'sd-select__option--selected': this.isSelected,
14448
- 'sd-select__option--disabled': !!this.option.disabled,
14449
- 'sd-select__option--focused': this.isFocused,
14450
- 'sd-select__option--use-checkbox': this.useCheckbox,
14451
- }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: this.handleClick }, this.useCheckbox ? (hAsync("div", { class: "sd-select__option__checkbox-wrapper" }, hAsync("sd-checkbox", { value: this.isSelected, disabled: this.option.disabled,
14452
- // checkboxStyle={
14453
- // !this.isSelected
14454
- // ? { borderColor: '#888' }
14455
- // : this.isHovered
14456
- // ? { borderColor: 'white' }
14457
- // : { borderColor: '#0075ff' }
14458
- // }
14459
- onClick: e => {
14460
- e.preventDefault();
14461
- this.handleClick(e);
14462
- } }), hAsync("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label)));
14463
- }
14464
- static get style() { return sdSelectOptionCss(); }
14465
- static get cmpMeta() { return {
14466
- "$flags$": 512,
14467
- "$tagName$": "sd-select-option",
14468
- "$members$": {
14469
- "option": [16],
14470
- "index": [2],
14471
- "isSelected": [4, "is-selected"],
14472
- "isFocused": [4, "is-focused"],
14473
- "optionStyle": [16],
14474
- "disabled": [4],
14475
- "useCheckbox": [4, "use-checkbox"],
14476
- "isHovered": [32],
14477
- "sdIsDisabled": [64]
14478
- },
14479
- "$listeners$": undefined,
14480
- "$lazyBundleId$": "-",
14481
- "$attrsToReflect$": []
14482
- }; }
14483
- }
14484
-
14485
- const sdSelectOptionGroupCss = () => `sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#F5FAFF !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#F9F9F9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#E6F1FF}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075FF;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#AAAAAA;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075FF;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}`;
14486
-
14487
- class SdSelectOptionGroup {
14488
- constructor(hostRef) {
14489
- registerInstance(this, hostRef);
14490
- this.optionClick = createEvent(this, "optionClick", 7);
14491
- }
14492
- get el() { return getElement(this); }
14493
- option;
14494
- index;
14495
- isSelected = false;
14496
- isFocused = false;
14497
- optionStyle;
14498
- disabled = false;
14499
- useCheckbox = false;
14500
- useIndicator = true;
14501
- countInfo = {
14502
- selectedCount: 0,
14503
- totalCount: 0,
14504
- };
14505
- isHovered = false;
14506
- async isDisabled() {
14507
- return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
14508
- }
14509
- optionClick;
14510
- handleClick = (option, isSelected, event) => {
14511
- event.stopPropagation();
14512
- if (option.type === 'group' || option.type === 'subgroup') {
14513
- this.optionClick.emit({
14514
- option: this.option,
14515
- isSelected,
14516
- index: this.index,
14517
- event,
14518
- });
14519
- return;
14520
- }
14521
- if (!this.option.disabled && !this.disabled) {
14522
- this.optionClick.emit({
14523
- option: this.option,
14524
- isSelected,
14525
- index: this.index,
14526
- event,
14527
- });
14528
- }
14529
- };
14530
- render() {
14531
- return (hAsync("div", { key: '647a7be115df96fe30d3b69d3b09ee45d229d86c', class: {
14532
- 'sd-select__option-group': true,
14533
- 'sd-select__option-group--selected': !!this.isSelected,
14534
- 'sd-select__option-group--disabled': !!this.option.disabled,
14535
- 'sd-select__option-group--focused': this.isFocused,
14536
- 'sd-select__option-group--use-checkbox': this.useCheckbox,
14537
- 'sd-select__option-group--group': this.option.type === 'group',
14538
- 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
14539
- 'sd-select__option-group--item': this.option.type === 'item',
14540
- }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'b1b1697c34e57667203992f8e4e6e9438f204dea', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'b67bec9cfd93739348f7d6c3e93945c28171e752', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
14541
- e.preventDefault();
14542
- this.handleClick(this.option, this.isSelected, e);
14543
- } })), hAsync("span", { key: 'a65090e487a45acec39155aa6df00a1500249e20', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '5024421742568127097655bcb39af70b61cc3403', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
14544
- }
14545
- static get style() { return sdSelectOptionGroupCss(); }
14546
- static get cmpMeta() { return {
14547
- "$flags$": 512,
14548
- "$tagName$": "sd-select-option-group",
14549
- "$members$": {
14550
- "option": [16],
14551
- "index": [2],
14552
- "isSelected": [4, "is-selected"],
14553
- "isFocused": [4, "is-focused"],
14554
- "optionStyle": [16],
14555
- "disabled": [4],
14556
- "useCheckbox": [4, "use-checkbox"],
14557
- "useIndicator": [4, "use-indicator"],
14558
- "countInfo": [16],
14559
- "isHovered": [32],
14560
- "isDisabled": [64]
14561
- },
14562
- "$listeners$": undefined,
14563
- "$lazyBundleId$": "-",
14564
- "$attrsToReflect$": []
14565
- }; }
14566
- }
14567
-
14568
- const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
14569
-
14570
- class SdSelectSearchInput {
14571
- constructor(hostRef) {
14572
- registerInstance(this, hostRef);
14573
- this.searchInput = createEvent(this, "sdSearchInput", 7);
14574
- this.searchFocus = createEvent(this, "sdSearchFocus", 7);
14575
- }
14576
- isScrolled = false;
14577
- searchText = '';
14578
- searchInput;
14579
- searchFocus;
14580
- searchRef;
14581
- async sdGetNativeElement() {
14582
- if (this.searchRef) {
14583
- return this.searchRef.sdGetNativeElement();
14584
- }
14585
- return null;
14586
- }
14587
- async sdSearchInputFocus() {
14588
- const input = await this.sdGetNativeElement();
14589
- input?.focus({ preventScroll: true });
14590
- }
14591
- render() {
14592
- return (hAsync("div", { key: 'f056d50b2a0ca1e40efabaae5071d56259d2094b', class: {
14593
- 'sd-select-search-input': true,
14594
- 'sd-select-search-input--scrolled': !!this.isScrolled,
14595
- }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '14a59374d1c7d661247ea506b4f5670893f16294', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
14596
- this.searchInput.emit(String(event?.detail));
14597
- }, onSdFocus: () => {
14598
- this.searchFocus.emit();
14599
- }, onKeyDown: event => {
14600
- if (event.code === 'Enter')
14601
- event.stopPropagation();
14602
- } }, hAsync("sd-icon", { key: 'd7e976a06b6a889a1be2b79252f1d57729953522', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
14603
- }
14604
- static get style() { return sdSelectSearchInputCss(); }
14605
- static get cmpMeta() { return {
14606
- "$flags$": 512,
14607
- "$tagName$": "sd-select-search-input",
14608
- "$members$": {
14609
- "isScrolled": [4, "is-scrolled"],
14610
- "searchText": [1, "search-text"],
14611
- "sdGetNativeElement": [64],
14612
- "sdSearchInputFocus": [64]
14613
- },
14614
- "$listeners$": undefined,
14615
- "$lazyBundleId$": "-",
14616
- "$attrsToReflect$": []
14617
- }; }
14618
- }
14619
-
14620
- const sdSelectV2Css = () => `sd-select-v2{display:inline-flex}sd-select-v2 sd-portal{display:none}sd-select-v2 .sd-select-v2{position:relative;width:100%;height:100%}`;
14621
-
14622
- class SdSelectV2 {
14623
- constructor(hostRef) {
14624
- registerInstance(this, hostRef);
14625
- this.update = createEvent(this, "sdUpdate", 7);
14626
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
14627
- }
14628
- static VIEWPORT_PADDING = 20;
14629
- static PORTAL_OFFSET_Y = 4;
14630
- static CLOSE_ANIMATION_DURATION = 150;
14631
- get el() { return getElement(this); }
14632
- type = 'default';
14633
- value = null;
14634
- options = [];
14635
- placeholder = '선택';
14636
- maxDropdownWidth = '640px';
14637
- dropdownHeight = '260px';
14638
- disabled = false;
14639
- label = '';
14640
- labelWidth = '';
14641
- addonLabel = '';
14642
- addonAlign = 'start';
14643
- error = false;
14644
- hint = '';
14645
- errorMessage = '';
14646
- rules = [];
14647
- icon = undefined;
14648
- labelTooltip = '';
14649
- labelTooltipProps = null;
14650
- emitValue = false;
14651
- width = '';
14652
- isOpen = false;
14653
- isAnimatingOut = false;
14654
- triggerWidth = '200px';
14655
- resolvedDropdownHeight = '260px';
14656
- resolvedMaxDropdownWidth = '640px';
14657
- focused = false;
14658
- hovered = false;
14659
- update;
14660
- dropDownShow;
14661
- async sdFocus() {
14662
- if (this.disabled)
14663
- return;
14664
- await this.triggerComponentRef?.sdFocus();
14665
- }
14666
- async sdOpen() {
14667
- // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
14668
- await new Promise(resolve => setTimeout(resolve, 0));
14669
- if (this.disabled || this.isOpen)
14670
- return;
14671
- this.prepareDropdownGeometry();
14672
- if (this.closeAnimationTimer)
14673
- clearTimeout(this.closeAnimationTimer);
14674
- this.isAnimatingOut = false;
14675
- this.isOpen = true;
14676
- }
14677
- triggerRef;
14678
- triggerComponentRef;
14679
- closeAnimationTimer;
14680
- name = nanoid$1();
14681
- triggerHasFocus = false;
14682
- watchIsOpen(newValue) {
14683
- this.syncFocusedState(newValue);
14684
- this.dropDownShow.emit({ isOpen: newValue });
14685
- }
14686
- get isMulti() {
14687
- return this.type === 'multi' || this.type === 'multi_depth';
14688
- }
14689
- get displayText() {
14690
- if (this.isMulti) {
14691
- if (!Array.isArray(this.value) || this.value.length === 0)
14692
- return '';
14693
- const flat = this.flattenOptions(this.options);
14694
- return this.value
14695
- .map(item => {
14696
- if (item != null && typeof item === 'object') {
14697
- const opt = item;
14698
- return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
14699
- }
14700
- return flat.find(o => o.value === item)?.label ?? '';
14701
- })
14702
- .filter(Boolean)
14703
- .join(', ');
14704
- }
14705
- if (this.value == null)
14706
- return '';
14707
- if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
14708
- return this.value.label ?? '';
14709
- }
14710
- const flat = this.flattenOptions(this.options);
14711
- const found = flat.find(o => o.value === this.value);
14712
- return found?.label ?? '';
14713
- }
14714
- flattenOptions(options) {
14715
- return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
14716
- }
14717
- getSelectedOptions() {
14718
- const val = this.value;
14719
- if (!val || !Array.isArray(val))
14720
- return [];
14721
- if (this.emitValue) {
14722
- return val
14723
- .map(v => this.findOriginalOption(v, this.options))
14724
- .filter((o) => !!o);
14725
- }
14726
- return val;
14727
- }
14728
- toMultiValue(options) {
14729
- return this.emitValue ? options.map(o => o.value) : options;
14730
- }
14731
- parsePixelValue(value, fallback) {
14732
- const parsed = Number.parseFloat(value);
14733
- return Number.isFinite(parsed) ? parsed : fallback;
14734
- }
14735
- updateDropdownViewportConstraints() {
14736
- if (!this.triggerRef)
14737
- return;
14738
- const triggerRect = this.triggerRef.getBoundingClientRect();
14739
- const viewportPadding = SdSelectV2.VIEWPORT_PADDING;
14740
- const offsetY = SdSelectV2.PORTAL_OFFSET_Y;
14741
- const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
14742
- const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
14743
- const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
14744
- const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
14745
- const availableHeight = Math.max(availableBelow, availableAbove);
14746
- const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
14747
- this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
14748
- this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
14749
- }
14750
- handleViewportResize = () => {
14751
- if (!this.isOpen)
14752
- return;
14753
- this.updateDropdownViewportConstraints();
12874
+ handleViewportResize = () => {
12875
+ if (!this.isOpen)
12876
+ return;
12877
+ this.updateDropdownViewportConstraints();
14754
12878
  };
14755
12879
  findOriginalOption(value, options) {
14756
12880
  for (const opt of options) {
@@ -14773,7 +12897,7 @@ class SdSelectV2 {
14773
12897
  clearTimeout(this.closeAnimationTimer);
14774
12898
  this.closeAnimationTimer = setTimeout(() => {
14775
12899
  this.isAnimatingOut = false;
14776
- }, SdSelectV2.CLOSE_ANIMATION_DURATION);
12900
+ }, SdSelect.CLOSE_ANIMATION_DURATION);
14777
12901
  }
14778
12902
  prepareDropdownGeometry() {
14779
12903
  if (this.triggerRef) {
@@ -14855,30 +12979,30 @@ class SdSelectV2 {
14855
12979
  const portalProps = {
14856
12980
  open: this.isOpen,
14857
12981
  parentRef: this.triggerRef,
14858
- viewportPadding: SdSelectV2.VIEWPORT_PADDING,
12982
+ viewportPadding: SdSelect.VIEWPORT_PADDING,
14859
12983
  onSdClose: () => {
14860
12984
  this.closeDropdown();
14861
12985
  },
14862
12986
  };
14863
- return (hAsync("sd-field", { key: '76b432c04fa0f9fca70e63e9c7d16ed768fc9dd1', 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: () => {
12987
+ return (hAsync("sd-field", { key: '76625e332090d20e2f66159bba5ee1b9a11320a6', 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: () => {
14864
12988
  this.hovered = true;
14865
12989
  }, onMouseLeave: () => {
14866
12990
  this.hovered = false;
14867
- } }, hAsync("div", { key: 'dba3a313b7e0171a441540877aacdc7d5c2e7f04', class: "sd-select-v2", ref: el => {
12991
+ } }, hAsync("div", { key: '8a0ae8a5e05459128409dbe21779f5e3d91b3a04', class: "sd-select", ref: el => {
14868
12992
  this.triggerRef = el;
14869
- } }, hAsync("sd-select-v2-trigger", { key: '7790357558f174eb70b15ed72574f738b062c479', ref: el => {
12993
+ } }, hAsync("sd-select-trigger", { key: '6b47231914655a8e197e3b38cd8e37c5214efc17', ref: el => {
14870
12994
  this.triggerComponentRef = el;
14871
- }, 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: '672f3583b24e363b74d184d13866ee19a78b04d9', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'f71d95ad06c74356e4d5ce94da7e720c002390b6', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
12995
+ }, 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: 'eaed402d276cc94a1324ede9cbf09bc436f8a1db', ...portalProps }, hAsync("sd-select-listbox", { key: 'a96f75e06d974c8fd88ac72f083fe4b0ef424a0b', 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) })))));
14872
12996
  }
14873
12997
  static get watchers() { return {
14874
12998
  "isOpen": [{
14875
12999
  "watchIsOpen": 0
14876
13000
  }]
14877
13001
  }; }
14878
- static get style() { return sdSelectV2Css(); }
13002
+ static get style() { return sdSelectCss(); }
14879
13003
  static get cmpMeta() { return {
14880
13004
  "$flags$": 512,
14881
- "$tagName$": "sd-select-v2",
13005
+ "$tagName$": "sd-select",
14882
13006
  "$members$": {
14883
13007
  "type": [1],
14884
13008
  "value": [1032],
@@ -14900,6 +13024,9 @@ class SdSelectV2 {
14900
13024
  "labelTooltipProps": [16],
14901
13025
  "emitValue": [4, "emit-value"],
14902
13026
  "width": [8],
13027
+ "useSearch": [4, "use-search"],
13028
+ "allSelectedLabel": [1, "all-selected-label"],
13029
+ "useSelectAll": [4, "use-select-all"],
14903
13030
  "name": [1],
14904
13031
  "isOpen": [32],
14905
13032
  "isAnimatingOut": [32],
@@ -15081,9 +13208,9 @@ function filterTree(options, keyword) {
15081
13208
  }, []);
15082
13209
  }
15083
13210
 
15084
- const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count{color:#ffffff}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}`;
13211
+ const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
15085
13212
 
15086
- class SdSelectV2ListItem {
13213
+ class SdSelectListItem {
15087
13214
  constructor(hostRef) {
15088
13215
  registerInstance(this, hostRef);
15089
13216
  this.listItemClick = createEvent(this, "sdListItemClick", 7);
@@ -15153,22 +13280,22 @@ class SdSelectV2ListItem {
15153
13280
  if (isDepth1Group) {
15154
13281
  cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
15155
13282
  }
15156
- return (hAsync("div", { key: '62974a8d1442730ca752b3fc11f151c4a5be4ad1', class: {
15157
- 'sd-select-v2-list-item': true,
15158
- 'sd-select-v2-list-item--group': isGroup,
15159
- 'sd-select-v2-list-item--depth1-group': isDepth1Group,
15160
- 'sd-select-v2-list-item--depth2-group': isDepth2Group,
15161
- 'sd-select-v2-list-item--selected': this.isSelected === true,
15162
- 'sd-select-v2-list-item--indeterminate': this.isSelected === null,
15163
- 'sd-select-v2-list-item--focused': this.isFocused,
15164
- 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
15165
- 'sd-select-v2-list-item--disabled': !!this.option.disabled,
15166
- }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'cf29df3617e45f3b9415b8da1beed7ba5918b8cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '478e566c74c0078ef72b90d836f67156e905bbac', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '0cde990cb1fff4898581c8c7d321c8669dfac226', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15167
- }
15168
- static get style() { return sdSelectV2ListItemCss(); }
13283
+ return (hAsync("div", { key: 'c6f959e9290213c9003914dbdd696c3c339cce51', class: {
13284
+ 'sd-select-list-item': true,
13285
+ 'sd-select-list-item--group': isGroup,
13286
+ 'sd-select-list-item--depth1-group': isDepth1Group,
13287
+ 'sd-select-list-item--depth2-group': isDepth2Group,
13288
+ 'sd-select-list-item--selected': this.isSelected === true,
13289
+ 'sd-select-list-item--indeterminate': this.isSelected === null,
13290
+ 'sd-select-list-item--focused': this.isFocused,
13291
+ 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
13292
+ 'sd-select-list-item--disabled': !!this.option.disabled,
13293
+ }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'a884bd82722cd45efc19abd2139d08596f7eda86', 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: '9aacbeca13e591406454ef7e1c7be40a56a2926b', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '76be4eda3799cfa329016c2ea636feaf624e5025', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
13294
+ }
13295
+ static get style() { return sdSelectListItemCss(); }
15169
13296
  static get cmpMeta() { return {
15170
13297
  "$flags$": 512,
15171
- "$tagName$": "sd-select-v2-list-item",
13298
+ "$tagName$": "sd-select-list-item",
15172
13299
  "$members$": {
15173
13300
  "option": [16],
15174
13301
  "depth": [2],
@@ -15183,9 +13310,9 @@ class SdSelectV2ListItem {
15183
13310
  }; }
15184
13311
  }
15185
13312
 
15186
- const sdSelectV2ListItemSearchCss = () => `sd-select-v2-list-item-search{display:block}sd-select-v2-list-item-search .sd-select-v2-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #CCCCCC;border-radius:4px;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner:focus-within{border-color:#0075FF}sd-select-v2-list-item-search .sd-select-v2-list-item-search__icon{flex-shrink:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input::placeholder{color:#AAAAAA}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear:hover{background:#F0F0F0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
13313
+ const sdSelectListItemSearchCss = () => `sd-select-list-item-search{display:block}sd-select-list-item-search .sd-select-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-list-item-search .sd-select-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-list-item-search .sd-select-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #CCCCCC;border-radius:4px;background:white}sd-select-list-item-search .sd-select-list-item-search__inner:focus-within{border-color:#0075FF}sd-select-list-item-search .sd-select-list-item-search__icon{flex-shrink:0}sd-select-list-item-search .sd-select-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-list-item-search .sd-select-list-item-search__input::placeholder{color:#AAAAAA}sd-select-list-item-search .sd-select-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-list-item-search .sd-select-list-item-search__clear:hover{background:#F0F0F0}sd-select-list-item-search .sd-select-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
15187
13314
 
15188
- class SdSelectV2ListItemSearch {
13315
+ class SdSelectListItemSearch {
15189
13316
  constructor(hostRef) {
15190
13317
  registerInstance(this, hostRef);
15191
13318
  this.searchFilter = createEvent(this, "sdSearchFilter", 7);
@@ -15231,20 +13358,20 @@ class SdSelectV2ListItemSearch {
15231
13358
  clearTimeout(this.debounceTimer);
15232
13359
  }
15233
13360
  render() {
15234
- return (hAsync("div", { key: '75c6b01fbe256bca732553a27711fa7197535688', class: {
15235
- 'sd-select-v2-list-item-search': true,
15236
- 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
15237
- } }, hAsync("div", { key: 'b66cd053b89942f3de55feecdd0eee79b863eb0d', class: "sd-select-v2-list-item-search__inner" }, hAsync("sd-icon", { key: 'bed6f00452187d1087b6bb4653c04e8babeaa277', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), hAsync("input", { key: '4c29192547fcf9ec2563b7d843b8e77a3eb900b1', ref: el => {
13361
+ return (hAsync("div", { key: '139aa74cb44baef15a5a75008dd291f11ad2965b', class: {
13362
+ 'sd-select-list-item-search': true,
13363
+ 'sd-select-list-item-search--scrolled': this.isScrolled,
13364
+ } }, hAsync("div", { key: '2df6559c3a0e769e50e72ef06828adcf595fc433', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '20dfe4a309c7879bcdd1e5890f183a9e1eb98fae', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '825724eedf71693ce39a21f413c5a4eb6f1495e3', ref: el => {
15238
13365
  this.inputEl = el;
15239
- }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '55f94ce6eb29cec10897259b894c3460d766268e', type: "button", class: {
15240
- 'sd-select-v2-list-item-search__clear': true,
15241
- 'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
15242
- }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: 'a7332ec5ecebf522797bb6db1fdc385c0dfa1abe', name: "close", size: 12, color: "#888888" })))));
13366
+ }, 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: '20fb0c745d423b008f482a2e33e7e711ea40b5df', type: "button", class: {
13367
+ 'sd-select-list-item-search__clear': true,
13368
+ 'sd-select-list-item-search__clear--hidden': !this.searchText,
13369
+ }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: 'ce6e4f9b5281ebb767d6542a223e425660ec01c9', name: "close", size: 12, color: "#888888" })))));
15243
13370
  }
15244
- static get style() { return sdSelectV2ListItemSearchCss(); }
13371
+ static get style() { return sdSelectListItemSearchCss(); }
15245
13372
  static get cmpMeta() { return {
15246
13373
  "$flags$": 512,
15247
- "$tagName$": "sd-select-v2-list-item-search",
13374
+ "$tagName$": "sd-select-list-item-search",
15248
13375
  "$members$": {
15249
13376
  "isScrolled": [4, "is-scrolled"],
15250
13377
  "searchText": [32],
@@ -15256,9 +13383,9 @@ class SdSelectV2ListItemSearch {
15256
13383
  }; }
15257
13384
  }
15258
13385
 
15259
- const sdSelectV2ListboxCss = () => `:host{display:block}:host .sd-select-v2-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
13386
+ const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
15260
13387
 
15261
- class SdSelectV2Listbox {
13388
+ class SdSelectListbox {
15262
13389
  constructor(hostRef) {
15263
13390
  registerInstance(this, hostRef);
15264
13391
  this.optionSelect = createEvent(this, "sdOptionSelect", 7);
@@ -15267,6 +13394,8 @@ class SdSelectV2Listbox {
15267
13394
  options = [];
15268
13395
  value = null;
15269
13396
  emitValue = false;
13397
+ useSearch = false;
13398
+ useSelectAll = false;
15270
13399
  triggerWidth = '200px';
15271
13400
  maxWidth = '640px';
15272
13401
  maxHeight = '260px';
@@ -15284,7 +13413,40 @@ class SdSelectV2Listbox {
15284
13413
  get isMulti() {
15285
13414
  return this.type === 'multi' || this.type === 'multi_depth';
15286
13415
  }
13416
+ static SELECT_ALL_OPTION = {
13417
+ value: '__select_all__',
13418
+ label: '전체',
13419
+ };
13420
+ get showSelectAll() {
13421
+ return this.useSelectAll && this.isMulti;
13422
+ }
13423
+ getAllNonDisabledLeaves() {
13424
+ const collect = (opts) => opts.flatMap(o => {
13425
+ if (o.disabled)
13426
+ return [];
13427
+ if (o.children)
13428
+ return collect(o.children);
13429
+ return [o];
13430
+ });
13431
+ return collect(this.options);
13432
+ }
13433
+ get selectAllState() {
13434
+ if (!this.showSelectAll)
13435
+ return false;
13436
+ const allLeaves = this.getAllNonDisabledLeaves();
13437
+ if (allLeaves.length === 0)
13438
+ return false;
13439
+ const selectedValues = this.getSelectedValues();
13440
+ const selectedCount = allLeaves.filter(l => selectedValues.has(l.value)).length;
13441
+ if (selectedCount === 0)
13442
+ return false;
13443
+ if (selectedCount === allLeaves.length)
13444
+ return true;
13445
+ return null;
13446
+ }
15287
13447
  get showSearch() {
13448
+ if (!this.useSearch)
13449
+ return false;
15288
13450
  const count = this.isDepth ? countLeaves(this.options) : this.options.length;
15289
13451
  return count >= SEARCH_THRESHOLD;
15290
13452
  }
@@ -15386,6 +13548,9 @@ class SdSelectV2Listbox {
15386
13548
  }
15387
13549
  get navigableOptions() {
15388
13550
  const items = [];
13551
+ if (this.showSelectAll) {
13552
+ items.push(SdSelectListbox.SELECT_ALL_OPTION);
13553
+ }
15389
13554
  const walk = (opts) => {
15390
13555
  for (const opt of opts) {
15391
13556
  const isGroup = !!opt.children;
@@ -15399,6 +13564,22 @@ class SdSelectV2Listbox {
15399
13564
  walk(this.filteredOptions);
15400
13565
  return items;
15401
13566
  }
13567
+ isSelectAllOption(option) {
13568
+ return this.showSelectAll && option.value === SdSelectListbox.SELECT_ALL_OPTION.value;
13569
+ }
13570
+ emitSelectAll() {
13571
+ if (!this.showSelectAll)
13572
+ return;
13573
+ const allLeaves = this.getAllNonDisabledLeaves();
13574
+ this.optionSelect.emit({
13575
+ option: { ...SdSelectListbox.SELECT_ALL_OPTION, children: allLeaves },
13576
+ leaves: allLeaves,
13577
+ });
13578
+ }
13579
+ handleSelectAllClick = (e) => {
13580
+ e.stopPropagation();
13581
+ this.emitSelectAll();
13582
+ };
15402
13583
  isOptionFocused(option) {
15403
13584
  if (this.focusedIndex < 0)
15404
13585
  return false;
@@ -15471,7 +13652,13 @@ class SdSelectV2Listbox {
15471
13652
  return;
15472
13653
  e.preventDefault();
15473
13654
  e.stopPropagation();
15474
- this.emitOptionSelect(items[this.focusedIndex]);
13655
+ const focused = items[this.focusedIndex];
13656
+ if (this.isSelectAllOption(focused)) {
13657
+ this.emitSelectAll();
13658
+ }
13659
+ else {
13660
+ this.emitOptionSelect(focused);
13661
+ }
15475
13662
  }
15476
13663
  };
15477
13664
  /**
@@ -15492,7 +13679,7 @@ class SdSelectV2Listbox {
15492
13679
  */
15493
13680
  scrollFocusedIntoView() {
15494
13681
  const list = this.listEl;
15495
- const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
13682
+ const focusedEl = list?.querySelector('.sd-select-list-item--focused');
15496
13683
  if (!list || !focusedEl)
15497
13684
  return;
15498
13685
  const listRect = list.getBoundingClientRect();
@@ -15538,7 +13725,7 @@ class SdSelectV2Listbox {
15538
13725
  return options.map(option => {
15539
13726
  const isGroup = !!option.children;
15540
13727
  return [
15541
- hAsync("sd-select-v2-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
13728
+ hAsync("sd-select-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
15542
13729
  isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
15543
13730
  ];
15544
13731
  });
@@ -15550,24 +13737,26 @@ class SdSelectV2Listbox {
15550
13737
  '--listbox-max-height': this.maxHeight,
15551
13738
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15552
13739
  };
15553
- return (hAsync("div", { key: 'd4d80ebd565436cd929961a2f9ce50adf92c124b', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: 'bd549975fe6187aa7e77e718c8d2ba4a6d6e33de', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '4ac6a1512781942fef3e42d6ca32762962df1836', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
13740
+ return (hAsync("div", { key: 'c1582b1bc6058b78a8581511854f0878e7f39a94', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '4fd2099bf8069f258596479123053a34a41c528d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'ff8643a308b07dbaebf627c7082a37efa6b72a10', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
15554
13741
  this.listEl = el;
15555
- } }, this.isEmpty ? (hAsync("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
13742
+ } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '30f0cfbc24304af8c704db33d0e51236971226ee', 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) })))))));
15556
13743
  }
15557
13744
  static get watchers() { return {
15558
13745
  "searchKeyword": [{
15559
13746
  "resetFocusOnFilter": 0
15560
13747
  }]
15561
13748
  }; }
15562
- static get style() { return sdSelectV2ListboxCss(); }
13749
+ static get style() { return sdSelectListboxCss(); }
15563
13750
  static get cmpMeta() { return {
15564
13751
  "$flags$": 521,
15565
- "$tagName$": "sd-select-v2-listbox",
13752
+ "$tagName$": "sd-select-listbox",
15566
13753
  "$members$": {
15567
13754
  "type": [1],
15568
13755
  "options": [16],
15569
13756
  "value": [8],
15570
13757
  "emitValue": [4, "emit-value"],
13758
+ "useSearch": [4, "use-search"],
13759
+ "useSelectAll": [4, "use-select-all"],
15571
13760
  "triggerWidth": [1, "trigger-width"],
15572
13761
  "maxWidth": [1, "max-width"],
15573
13762
  "maxHeight": [1, "max-height"],
@@ -15581,9 +13770,9 @@ class SdSelectV2Listbox {
15581
13770
  }; }
15582
13771
  }
15583
13772
 
15584
- const sdSelectV2TriggerCss = () => `sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}`;
13773
+ const sdSelectTriggerCss = () => `sd-select-trigger{display:block;width:100%;height:100%}sd-select-trigger .sd-select-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-trigger .sd-select-trigger--disabled{cursor:not-allowed}sd-select-trigger .sd-select-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-trigger .sd-select-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-trigger .sd-select-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-trigger .sd-select-trigger__icon--open{transform:rotate(180deg)}`;
15585
13774
 
15586
- class SdSelectV2Trigger {
13775
+ class SdSelectTrigger {
15587
13776
  constructor(hostRef) {
15588
13777
  registerInstance(this, hostRef);
15589
13778
  this.triggerClick = createEvent(this, "sdTriggerClick", 7);
@@ -15631,21 +13820,21 @@ class SdSelectV2Trigger {
15631
13820
  ? SELECT_COLORS.icon.disabled
15632
13821
  : SELECT_COLORS.icon.default,
15633
13822
  };
15634
- return (hAsync("div", { key: '7c4f60c972c17b5954cbf0d0cc7ee38c8e6c16a3', ref: el => {
13823
+ return (hAsync("div", { key: 'dddccfd47738e104a9c715a0c93df1882d28d704', ref: el => {
15635
13824
  this.triggerEl = el;
15636
13825
  }, tabindex: this.disabled ? -1 : 0, class: {
15637
- 'sd-select-v2-trigger': true,
15638
- 'sd-select-v2-trigger--open': this.isOpen,
15639
- 'sd-select-v2-trigger--disabled': this.disabled,
15640
- }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'de5f5a44626fce29c5a83cf0a14dd03352d40b57', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: 'a36a013e9ef359160c2b9d24b42ee6f228aca302', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: '4bfcfce96fbe2008517ee26d7802d4492292faa5', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
15641
- 'sd-select-v2-trigger__icon': true,
15642
- 'sd-select-v2-trigger__icon--open': this.isOpen,
13826
+ 'sd-select-trigger': true,
13827
+ 'sd-select-trigger--open': this.isOpen,
13828
+ 'sd-select-trigger--disabled': this.disabled,
13829
+ }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '9f8572c4ec3fa02c9f94bb94a8a10358c4d6b3ae', class: "sd-select-trigger__content" }, hAsync("span", { key: 'a4b5b27fc3a84adbd2e24981742ca45402993afb', class: "sd-select-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: '97bbcda656bae2248ca83fb2bd56373b2dd8dd41', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
13830
+ 'sd-select-trigger__icon': true,
13831
+ 'sd-select-trigger__icon--open': this.isOpen,
15643
13832
  } }))));
15644
13833
  }
15645
- static get style() { return sdSelectV2TriggerCss(); }
13834
+ static get style() { return sdSelectTriggerCss(); }
15646
13835
  static get cmpMeta() { return {
15647
13836
  "$flags$": 512,
15648
- "$tagName$": "sd-select-v2-trigger",
13837
+ "$tagName$": "sd-select-trigger",
15649
13838
  "$members$": {
15650
13839
  "displayText": [1, "display-text"],
15651
13840
  "placeholder": [1],
@@ -15759,7 +13948,7 @@ class SdSwitch {
15759
13948
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
15760
13949
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
15761
13950
  };
15762
- return (hAsync("label", { key: 'ac6a35d06ddd04bc94369014ff586766dd745bbb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '9ebc810e93c9dfa3bf7407f279dadbada579196e', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '7add76be99645d6434e95305f6318fac7da0de57', class: "sd-switch__track" }, hAsync("div", { key: 'ed90778aa4dcd6f0853029579c36cfdb8640afcf', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '70e3ddf819e77da4c693a4853ddb7f392381964e', class: "sd-switch__label" }, this.label)));
13951
+ return (hAsync("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, hAsync("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
15763
13952
  }
15764
13953
  static get style() { return sdSwitchCss(); }
15765
13954
  static get cmpMeta() { return {
@@ -15803,7 +13992,98 @@ function nanoid(size = 21) {
15803
13992
 
15804
13993
  const TABLE_ID_ATTR = 'table-id';
15805
13994
 
15806
- 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, auto);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__clip{width:100%;min-width:0;height:var(--table-container-height, 400px);border:1px solid #E1E1E1;border-radius:8px;overflow:hidden}.sd-table__clip--has-pagination{border-radius:8px 8px 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-size:12px;overflow:auto;background:#FFFFFF}.sd-table__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--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:12px;color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.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:1px solid #E1E1E1;border-top:none;border-radius:0 0 8px 8px}.sd-table__pagination sd-select-v2{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
13995
+ const table = {
13996
+ header: {
13997
+ height: "36",
13998
+ paddingX: "16",
13999
+ gap: "4",
14000
+ bg: "#F5FAFF",
14001
+ typography: {
14002
+ 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",
14003
+ fontWeight: "500",
14004
+ fontSize: "12",
14005
+ lineHeight: "20",
14006
+ textDecoration: "none"
14007
+ },
14008
+ resizingBar: {
14009
+ color: "#CCCCCC",
14010
+ height: "16"
14011
+ }
14012
+ },
14013
+ body: {
14014
+ "default": {
14015
+ height: "44"},
14016
+ paddingX: "16",
14017
+ typography: {
14018
+ 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",
14019
+ fontWeight: "400",
14020
+ fontSize: "12",
14021
+ lineHeight: "20",
14022
+ textDecoration: "none"
14023
+ }
14024
+ },
14025
+ border: {
14026
+ "default": "#E1E1E1",
14027
+ width: {
14028
+ width: "1"
14029
+ }
14030
+ },
14031
+ radius: "8"};
14032
+ var tableTokens = {
14033
+ table: table
14034
+ };
14035
+
14036
+ // ── Header Tokens ──
14037
+ const TABLE_HEADER_LAYOUT = {
14038
+ height: tableTokens.table.header.height,
14039
+ paddingX: tableTokens.table.header.paddingX,
14040
+ gap: tableTokens.table.header.gap,
14041
+ };
14042
+ const TABLE_HEADER_TYPOGRAPHY = {
14043
+ fontFamily: tableTokens.table.header.typography.fontFamily,
14044
+ fontWeight: tableTokens.table.header.typography.fontWeight,
14045
+ fontSize: tableTokens.table.header.typography.fontSize,
14046
+ lineHeight: tableTokens.table.header.typography.lineHeight,
14047
+ textDecoration: tableTokens.table.header.typography.textDecoration,
14048
+ };
14049
+ const TABLE_HEADER_COLORS = {
14050
+ bg: tableTokens.table.header.bg,
14051
+ };
14052
+ const TABLE_HEADER_RESIZING_BAR = {
14053
+ color: tableTokens.table.header.resizingBar.color,
14054
+ height: tableTokens.table.header.resizingBar.height,
14055
+ };
14056
+ // ── Body Tokens ──
14057
+ const TABLE_BODY_LAYOUT = {
14058
+ default: {
14059
+ height: tableTokens.table.body.default.height},
14060
+ paddingX: tableTokens.table.body.paddingX};
14061
+ const TABLE_BODY_TYPOGRAPHY = {
14062
+ fontFamily: tableTokens.table.body.typography.fontFamily,
14063
+ fontWeight: tableTokens.table.body.typography.fontWeight,
14064
+ fontSize: tableTokens.table.body.typography.fontSize,
14065
+ lineHeight: tableTokens.table.body.typography.lineHeight,
14066
+ textDecoration: tableTokens.table.body.typography.textDecoration,
14067
+ };
14068
+ // ── Frame / Border Tokens ──
14069
+ const TABLE_BORDER = {
14070
+ color: tableTokens.table.border.default,
14071
+ width: tableTokens.table.border.width.width,
14072
+ };
14073
+ const TABLE_RADIUS = tableTokens.table.radius;
14074
+ // ── Header Icon Color Defaults ──
14075
+ const ICON_DEFAULT_COLOR = {
14076
+ pageEdit: systemTokens.color.darkblue.strong,
14077
+ arrowDown: systemTokens.color.darkblue.strong,
14078
+ arrowUp: systemTokens.color.darkblue.strong,
14079
+ updown: systemTokens.color.grey.strong,
14080
+ pageMove: systemTokens.color.darkblue.strong,
14081
+ star: systemTokens.color.blue.strong,
14082
+ };
14083
+ const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
14084
+ const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
14085
+
14086
+ 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__clip{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__clip--has-pagination{border-radius:var(--table-radius, 8px) var(--table-radius, 8px) 0 0}.sd-table__wrapper{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__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--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);border-top:none;border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
15807
14087
 
15808
14088
  class SdTable {
15809
14089
  constructor(hostRef) {
@@ -15859,11 +14139,17 @@ class SdTable {
15859
14139
  scrolledRight = false;
15860
14140
  rowCount = 0;
15861
14141
  loadingScrollTop = 0;
14142
+ // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
14143
+ // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
14144
+ autoThead = false;
14145
+ autoTbody = false;
15862
14146
  vsStart = 0;
15863
14147
  vsEnd = 0;
15864
14148
  lastReachEndNotifiedRowCount = -1;
15865
14149
  scrollContainer = null;
15866
14150
  onScroll;
14151
+ // 키: `${rowKey}::${field}` → { rowspan, colspan }
14152
+ spanRegistry = new Map();
15867
14153
  toFiniteNumber(value, fallback) {
15868
14154
  const n = typeof value === 'number' ? value : Number(value);
15869
14155
  return Number.isFinite(n) ? n : fallback;
@@ -15942,9 +14228,16 @@ class SdTable {
15942
14228
  this.innerRowsPerPage = newVal.rowsPerPage;
15943
14229
  }
15944
14230
  }
14231
+ detectChildren() {
14232
+ const hasThead = !!this.el.querySelector(':scope > sd-thead');
14233
+ const hasTbody = !!this.el.querySelector(':scope > sd-tbody');
14234
+ this.autoThead = !hasThead;
14235
+ this.autoTbody = !hasTbody;
14236
+ }
15945
14237
  componentWillLoad() {
15946
14238
  this.syncTableIdAttribute();
15947
14239
  this.handleNoDataLabelChange(this.noDataLabel);
14240
+ this.detectChildren();
15948
14241
  this.innerSelected = new Set(this.selected || []);
15949
14242
  this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
15950
14243
  if (this.pagination?.page) {
@@ -15967,6 +14260,11 @@ class SdTable {
15967
14260
  el.getTableIdSync = () => this.getResolvedTableId();
15968
14261
  el.getVirtualScrollConfigSync = this.getVirtualScrollConfigSync.bind(this);
15969
14262
  el.calculateVisibleRange = this.calculateVisibleRange.bind(this);
14263
+ el.registerSpanSync = this.registerSpanSync.bind(this);
14264
+ el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
14265
+ el.getSpanSync = this.getSpanSync.bind(this);
14266
+ el.isCoveredSync = this.isCoveredSync.bind(this);
14267
+ el.hasRowspanSync = this.hasRowspanSync.bind(this);
15970
14268
  if (Array.isArray(this.rows)) {
15971
14269
  this.rowCount = this.rows.length;
15972
14270
  this.pushRowsToChildren(this.rows);
@@ -16015,11 +14313,22 @@ class SdTable {
16015
14313
  this.scrollContainer.removeEventListener('scroll', this.onScroll);
16016
14314
  }
16017
14315
  }
14316
+ // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
14317
+ queryChildEl(selector) {
14318
+ return (this.el.querySelector(selector) ??
14319
+ this.el.shadowRoot?.querySelector(selector) ??
14320
+ null);
14321
+ }
14322
+ queryAllTr() {
14323
+ const light = Array.from(this.el.querySelectorAll('sd-tr'));
14324
+ const shadow = Array.from(this.el.shadowRoot?.querySelectorAll('sd-tr') ?? []);
14325
+ return [...light, ...shadow];
14326
+ }
16018
14327
  pushRowsToChildren(rows) {
16019
- const tbody = this.el.querySelector('sd-tbody');
14328
+ const tbody = this.queryChildEl('sd-tbody');
16020
14329
  if (tbody)
16021
14330
  tbody.rows = rows;
16022
- const thead = this.el.querySelector('sd-thead');
14331
+ const thead = this.queryChildEl('sd-thead');
16023
14332
  if (thead)
16024
14333
  thead.rows = rows;
16025
14334
  }
@@ -16030,16 +14339,14 @@ class SdTable {
16030
14339
  this.refreshChildrenConfig();
16031
14340
  };
16032
14341
  refreshChildrenSelection() {
16033
- const thead = this.el.querySelector('sd-thead');
16034
- const rows = this.el.querySelectorAll('sd-tr');
14342
+ const thead = this.queryChildEl('sd-thead');
16035
14343
  thead?.refreshSelection?.();
16036
- rows.forEach(tr => tr?.refreshSelection?.());
14344
+ this.queryAllTr().forEach(tr => tr?.refreshSelection?.());
16037
14345
  }
16038
14346
  refreshChildrenConfig() {
16039
- const thead = this.el.querySelector('sd-thead');
16040
- const rows = this.el.querySelectorAll('sd-tr');
14347
+ const thead = this.queryChildEl('sd-thead');
16041
14348
  thead?.refreshConfig?.();
16042
- rows.forEach(tr => tr?.refreshConfig?.());
14349
+ this.queryAllTr().forEach(tr => tr?.refreshConfig?.());
16043
14350
  }
16044
14351
  maybeEmitVirtualReachEnd(start, end) {
16045
14352
  const threshold = Math.max(1, this.virtualEndThreshold);
@@ -16071,7 +14378,7 @@ class SdTable {
16071
14378
  this.vsEnd = end;
16072
14379
  const topHeight = start * this.rowHeight;
16073
14380
  const bottomHeight = Math.max(0, (this.rowCount - end) * this.rowHeight);
16074
- const tbody = this.el.querySelector('sd-tbody');
14381
+ const tbody = this.queryChildEl('sd-tbody');
16075
14382
  tbody?.setSpacersSync?.(topHeight, bottomHeight);
16076
14383
  if (rangeChanged) {
16077
14384
  this.sdVirtualUpdate.emit({
@@ -16163,8 +14470,7 @@ class SdTable {
16163
14470
  this.updateRowsVisibility();
16164
14471
  }
16165
14472
  updateRowsVisibility() {
16166
- const rows = this.el.querySelectorAll('sd-tr');
16167
- rows.forEach(tr => tr?.updateVisibility?.());
14473
+ this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
16168
14474
  }
16169
14475
  changeRowsPerPage(perPage) {
16170
14476
  const changedRowsPerPage = perPage ? Number(perPage) : 0;
@@ -16201,10 +14507,9 @@ class SdTable {
16201
14507
  const delta = moveEvent.clientX - startX;
16202
14508
  const newWidth = Math.min(Math.max(startWidth + (reversed ? -delta : delta), minWidth), maxWidth);
16203
14509
  this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
16204
- const thead = this.el.querySelector('sd-thead');
16205
- const rows = this.el.querySelectorAll('sd-tr');
14510
+ const thead = this.queryChildEl('sd-thead');
16206
14511
  thead?.setColumnWidths?.(this.columnWidths);
16207
- rows.forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
14512
+ this.queryAllTr().forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
16208
14513
  const stickyRightCount = this.stickyColumn?.right || 0;
16209
14514
  const visibleColCount = this.columns.filter(c => c.visible !== false).length;
16210
14515
  const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
@@ -16241,6 +14546,109 @@ class SdTable {
16241
14546
  async getStickyStyle(colIdx) {
16242
14547
  return this.getStickyStyleSync(colIdx);
16243
14548
  }
14549
+ // ─── rowspan / colspan registry ─────────────────────────────────
14550
+ // sd-td가 mount/unmount 시 자기 (rowKey, field)와 span을 등록한다.
14551
+ // sd-tr는 render마다 isCoveredSync로 자신의 셀 위치가 다른 셀의 span에
14552
+ // 덮였는지 판정해 <td>를 그릴지 결정한다.
14553
+ spanKey(rowKey, field) {
14554
+ return `${rowKey}::${field}`;
14555
+ }
14556
+ // span 등록은 sd-td의 lifecycle에서 비동기적으로 일어나므로,
14557
+ // 등록/해제 직후 형제 sd-tr들이 새 레지스트리 상태로 다시 그려져야
14558
+ // 덮인 셀이 사라지거나 다시 나타난다.
14559
+ // forceUpdate는 React 래퍼 환경에서 prop 동기화 사이클과 부딪혀 누락되는
14560
+ // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
14561
+ requestAllTrUpdate() {
14562
+ this.queryAllTr().forEach(tr => {
14563
+ const trAny = tr;
14564
+ if (typeof trAny.bumpSpansVersion === 'function') {
14565
+ trAny.bumpSpansVersion();
14566
+ }
14567
+ });
14568
+ }
14569
+ registerSpanSync(rowKey, field, rowspan, colspan) {
14570
+ if (rowKey == null || !field)
14571
+ return;
14572
+ const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
14573
+ const safeColspan = Math.max(1, Math.floor(colspan || 1));
14574
+ const key = this.spanKey(rowKey, field);
14575
+ const prev = this.spanRegistry.get(key);
14576
+ if (safeRowspan === 1 && safeColspan === 1) {
14577
+ if (!prev)
14578
+ return;
14579
+ this.spanRegistry.delete(key);
14580
+ this.requestAllTrUpdate();
14581
+ return;
14582
+ }
14583
+ if (prev && prev.rowspan === safeRowspan && prev.colspan === safeColspan)
14584
+ return;
14585
+ this.spanRegistry.set(key, { rowspan: safeRowspan, colspan: safeColspan });
14586
+ this.requestAllTrUpdate();
14587
+ }
14588
+ unregisterSpanSync(rowKey, field) {
14589
+ if (rowKey == null || !field)
14590
+ return;
14591
+ const key = this.spanKey(rowKey, field);
14592
+ if (!this.spanRegistry.has(key))
14593
+ return;
14594
+ this.spanRegistry.delete(key);
14595
+ this.requestAllTrUpdate();
14596
+ }
14597
+ getSpanSync(rowKey, field) {
14598
+ return this.spanRegistry.get(this.spanKey(rowKey, field));
14599
+ }
14600
+ // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
14601
+ // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
14602
+ hasRowspanSync() {
14603
+ for (const span of this.spanRegistry.values()) {
14604
+ if (span.rowspan > 1)
14605
+ return true;
14606
+ }
14607
+ return false;
14608
+ }
14609
+ isCoveredSync(rowKey, colIdx, columns) {
14610
+ if (this.spanRegistry.size === 0)
14611
+ return false;
14612
+ const visibleCols = columns.filter(c => c.visible !== false);
14613
+ // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
14614
+ for (let i = 0; i < colIdx; i++) {
14615
+ const c = visibleCols[i];
14616
+ if (!c)
14617
+ continue;
14618
+ const field = typeof c.field === 'string' ? c.field : c.name;
14619
+ const span = this.spanRegistry.get(this.spanKey(rowKey, field));
14620
+ if (!span)
14621
+ continue;
14622
+ if (i + span.colspan > colIdx)
14623
+ return true;
14624
+ }
14625
+ // 2. 위쪽 행 스캔 — 숫자 변환 가능한 rowKey만 rowspan 평가
14626
+ const myRowIdx = Number(rowKey);
14627
+ if (!Number.isFinite(myRowIdx))
14628
+ return false;
14629
+ for (const [key, span] of this.spanRegistry) {
14630
+ if (span.rowspan <= 1)
14631
+ continue;
14632
+ const sepIdx = key.indexOf('::');
14633
+ if (sepIdx < 0)
14634
+ continue;
14635
+ const otherRowKey = key.slice(0, sepIdx);
14636
+ const otherField = key.slice(sepIdx + 2);
14637
+ const otherRowIdx = Number(otherRowKey);
14638
+ if (!Number.isFinite(otherRowIdx))
14639
+ continue;
14640
+ if (otherRowIdx >= myRowIdx)
14641
+ continue;
14642
+ if (otherRowIdx + span.rowspan <= myRowIdx)
14643
+ continue;
14644
+ const otherColIdx = visibleCols.findIndex(c => (typeof c.field === 'string' ? c.field : c.name) === otherField);
14645
+ if (otherColIdx < 0)
14646
+ continue;
14647
+ if (otherColIdx <= colIdx && otherColIdx + span.colspan > colIdx)
14648
+ return true;
14649
+ }
14650
+ return false;
14651
+ }
16244
14652
  setRowCountSync(count) {
16245
14653
  const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
16246
14654
  if (safeCount !== this.rowCount) {
@@ -16288,6 +14696,20 @@ class SdTable {
16288
14696
  return null;
16289
14697
  return { from: this.vsStart, to: this.vsEnd };
16290
14698
  }
14699
+ // autoTbody fallback에서 sd-table이 직접 sd-tr을 만들어내는 경로.
14700
+ // 가상 스크롤은 사용자가 직접 SdTbody+SdTr을 작성해야 하므로 빈 배열을 반환한다.
14701
+ renderAutoRows() {
14702
+ if (this.useVirtualScroll)
14703
+ return null;
14704
+ const allRows = this.rows ?? [];
14705
+ const pageInfo = this.getPaginationInfoSync();
14706
+ const startIdx = pageInfo?.startIndex ?? 0;
14707
+ const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
14708
+ return displayed.map((row, i) => {
14709
+ const absoluteIdx = startIdx + i;
14710
+ return hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
14711
+ });
14712
+ }
16291
14713
  get tableClasses() {
16292
14714
  return [
16293
14715
  'sd-table',
@@ -16307,24 +14729,34 @@ class SdTable {
16307
14729
  }
16308
14730
  render() {
16309
14731
  const resolvedTableId = this.getResolvedTableId();
16310
- return (hAsync(Host, { key: '0b90643721a90b7bb59a6c31f6edeb313849b973' }, hAsync("div", { key: 'e55fe4f476dbea4888a168861e7e6d6951d7d489', class: "sd-table__container", style: {
14732
+ const hostStyle = {
14733
+ '--table-radius': `${TABLE_RADIUS}px`,
14734
+ '--table-border-color': TABLE_BORDER.color,
14735
+ '--table-border-width': `${TABLE_BORDER.width}px`,
14736
+ '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
14737
+ '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
14738
+ '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
14739
+ '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
14740
+ '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
14741
+ };
14742
+ return (hAsync(Host, { key: '1a80b7c3589a8a2eefaabf24ed895c927543aac4', style: hostStyle }, hAsync("div", { key: 'd97aa6c04948153671e26066b6df02e206fc35e6', class: "sd-table__container", style: {
16311
14743
  '--table-width': this.width,
16312
14744
  '--table-height': this.height,
16313
14745
  '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
16314
- } }, hAsync("div", { key: 'de18a900037a7b2f619dd22981c30ed76f5a8111', class: {
14746
+ } }, hAsync("div", { key: '0e13dbbe062953c93a0acaaf5c00ca40a5b7e245', class: {
16315
14747
  'sd-table__clip': true,
16316
14748
  'sd-table__clip--has-pagination': !!(this.pagination &&
16317
14749
  this.pagination.rowsPerPage > 0 &&
16318
14750
  this.rowCount > 0 &&
16319
14751
  !this.useVirtualScroll),
16320
- } }, hAsync("div", { key: '028e0982d415033adaf420ee6b953241c8f3dbec', class: {
14752
+ } }, hAsync("div", { key: 'c800ecac543d1540d9b6c9faf06753c9dc10aaf3', class: {
16321
14753
  'sd-table__wrapper': true,
16322
14754
  'sd-table__wrapper--loading': this.isLoading,
16323
14755
  'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
16324
- } }, this.isLoading && (hAsync("div", { key: '8c9110c9c2c26cddbbed8e1f2782ecfaafd3679c', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '51b61f91b0ecebf63fe3e65b94012963f0375e5c', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '0a7a45049014869b8164b081a251218d3c814e87', class: "sd-table__no-data" }, hAsync("slot", { key: 'd4b6219e5dcaaa22be3360f7f0f05a8b32533890', name: "no-data" }, hAsync("span", { key: 'c76848aad8a1d3967f3cd239090e97266e46ab3e' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '2b560d112402549c7043b337d944b0de88c3ba0e', class: this.tableClasses }, hAsync("slot", { key: '1c4583148df6a585f389c1bed0426fa4a3cb4899', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), hAsync("slot", { key: 'a5d983106de61c829f9cbeb541d1908fee48468c', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
14756
+ } }, this.isLoading && (hAsync("div", { key: '656bc53538c8513e014f31f1e976fd66ce79c7aa', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '74078add6860fc95e238d89335d57e205e751cd6', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '18a33a7247bde3d08472f8082325c76217734e5d', class: "sd-table__no-data" }, hAsync("slot", { key: '966cb066f721695013a3e5a1a64543544b09fa77', name: "no-data" }, hAsync("span", { key: 'd335a9b1b2e847b267cefb9d12f7265c5f67f394' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '8fd0a2428bfd4dd6a574bbb02139088c31408866', 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 &&
16325
14757
  this.pagination.rowsPerPage > 0 &&
16326
14758
  this.rowCount > 0 &&
16327
- !this.useVirtualScroll && (hAsync("div", { key: '004355d84e2cfc2fd38a9d4811f14fd66dc5c21b', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '463586c7e57782a7989962f73cb3d4e8c04f5bce', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select-v2", { key: '1f26de447da63ef0c4a24ffb49666a0687db9991', value: this.useInternalPagination
14759
+ !this.useVirtualScroll && (hAsync("div", { key: '6f483b1a23456bbe42ff769a50c9de5638e7754f', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '841c545c23de8b4bba4cce3c9f6608d16f7b4e54', 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: 'a67e17bf3067953169ffa119ee41b1d7f46c2058', value: this.useInternalPagination
16328
14760
  ? this.innerRowsPerPage
16329
14761
  : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
16330
14762
  if (!this.isRowsPerPageValue(e.detail))
@@ -16405,6 +14837,8 @@ class SdTable {
16405
14837
  "scrolledRight": [32],
16406
14838
  "rowCount": [32],
16407
14839
  "loadingScrollTop": [32],
14840
+ "autoThead": [32],
14841
+ "autoTbody": [32],
16408
14842
  "isRowSelected": [64],
16409
14843
  "updateRowSelect": [64],
16410
14844
  "toggleSelectAll": [64],
@@ -16605,7 +15039,7 @@ class SdTabs {
16605
15039
  };
16606
15040
  }
16607
15041
  render() {
16608
- return (hAsync("div", { key: '390edfad274caa06df38af9d04580015a1744a44', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
15042
+ return (hAsync("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16609
15043
  const badgeName = this.getBadgeName(tab);
16610
15044
  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() }))));
16611
15045
  })));
@@ -16801,7 +15235,7 @@ class SdTag {
16801
15235
  render() {
16802
15236
  const config = this.resolvedConfig;
16803
15237
  const iconNode = this.renderIcon(config.icon, config.iconSize);
16804
- return (hAsync("span", { key: 'da19900d267d2b2f000e1790133966a7976bcded', class: "sd-tag", style: {
15238
+ return (hAsync("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
16805
15239
  '--sd-tag-background': config.background,
16806
15240
  '--sd-tag-content': config.content,
16807
15241
  '--sd-tag-height': config.height,
@@ -16811,7 +15245,7 @@ class SdTag {
16811
15245
  '--sd-tag-font-weight': config.fontWeight,
16812
15246
  '--sd-tag-line-height': config.lineHeight,
16813
15247
  '--sd-tag-radius': config.radius,
16814
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: 'e426021988395058367872ac23658586b2895764', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
15248
+ }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '8da56711cb12127f96195404799581480280507f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
16815
15249
  }
16816
15250
  static get style() { return sdTagCss(); }
16817
15251
  static get cmpMeta() { return {
@@ -16829,7 +15263,7 @@ class SdTag {
16829
15263
  }; }
16830
15264
  }
16831
15265
 
16832
- const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}.tbody--empty .tbody__no-data-row{display:table-row}.tbody--empty .tbody__no-data-cell{display:table-cell;padding:0;border-bottom:none}`;
15266
+ const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
16833
15267
 
16834
15268
  class SdTbody {
16835
15269
  constructor(hostRef) {
@@ -16862,7 +15296,12 @@ class SdTbody {
16862
15296
  this.syncTableContext();
16863
15297
  }
16864
15298
  syncTableContext() {
16865
- const table = this.el.closest('sd-table');
15299
+ // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
15300
+ // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
15301
+ const closest = this.el.closest('sd-table');
15302
+ const root = this.el.getRootNode();
15303
+ const fromShadow = root instanceof ShadowRoot ? root.host : null;
15304
+ const table = closest ?? fromShadow;
16866
15305
  this.tableEl = table;
16867
15306
  const fromMethod = table?.getTableIdSync?.();
16868
15307
  const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
@@ -16874,12 +15313,11 @@ class SdTbody {
16874
15313
  }
16875
15314
  }
16876
15315
  render() {
16877
- const hasRows = this.rows.length > 0;
16878
- return (hAsync(Host, { key: 'e4c64dbf97185bbc6eaec4b883c65dc8ebd34ece', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'b2fb886684a5a6055d3af659bba75dd9bc801b73', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
15316
+ return (hAsync(Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', class: { tbody: true } }, [
16879
15317
  this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
16880
- hAsync("slot", null),
15318
+ hAsync("slot", { key: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
16881
15319
  this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
16882
- ]) : (hAsync("tr", { class: "tbody__no-data-row" }, hAsync("td", { class: "tbody__no-data-cell", colSpan: 100 }, hAsync("slot", { name: "no-data" })))))));
15320
+ ])));
16883
15321
  }
16884
15322
  static get watchers() { return {
16885
15323
  "rows": [{
@@ -16912,20 +15350,63 @@ class SdTd {
16912
15350
  field;
16913
15351
  rowKey;
16914
15352
  align;
15353
+ rowspan;
15354
+ colspan;
16915
15355
  handleFieldChange() {
16916
15356
  this.syncSlotName();
15357
+ this.syncSpanRegistration();
16917
15358
  }
16918
15359
  handleRowKeyChange() {
16919
15360
  this.syncSlotName();
15361
+ this.syncSpanRegistration();
15362
+ }
15363
+ handleSpanChange() {
15364
+ this.syncSpanRegistration();
16920
15365
  }
16921
15366
  componentWillLoad() {
16922
15367
  this.syncSlotName();
15368
+ this.syncSpanRegistration();
16923
15369
  // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
16924
15370
  const parentTr = this.el.parentElement;
16925
15371
  if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
16926
15372
  }
16927
15373
  componentDidLoad() {
16928
15374
  this.syncSlotName();
15375
+ this.syncSpanRegistration();
15376
+ }
15377
+ // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
15378
+ // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
15379
+ // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
15380
+ connectedCallback() {
15381
+ this.syncSpanRegistration();
15382
+ }
15383
+ disconnectedCallback() {
15384
+ const table = this.findTable();
15385
+ if (table?.unregisterSpanSync && this.field && this.rowKey != null) {
15386
+ table.unregisterSpanSync(String(this.rowKey), this.field);
15387
+ this.requestParentTrUpdate();
15388
+ }
15389
+ }
15390
+ findTable() {
15391
+ return this.el.closest('sd-table');
15392
+ }
15393
+ requestParentTrUpdate() {
15394
+ const parentTr = this.el.parentElement;
15395
+ if (parentTr?.tagName?.toLowerCase() !== 'sd-tr')
15396
+ return;
15397
+ const trAny = parentTr;
15398
+ if (typeof trAny.bumpSpansVersion === 'function') {
15399
+ trAny.bumpSpansVersion();
15400
+ }
15401
+ }
15402
+ syncSpanRegistration() {
15403
+ const table = this.findTable();
15404
+ if (!table?.registerSpanSync || !this.field || this.rowKey == null)
15405
+ return;
15406
+ const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
15407
+ const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
15408
+ table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
15409
+ this.requestParentTrUpdate();
16929
15410
  }
16930
15411
  syncSlotName() {
16931
15412
  const table = this.el.closest('sd-table');
@@ -16939,7 +15420,7 @@ class SdTd {
16939
15420
  }
16940
15421
  }
16941
15422
  render() {
16942
- return (hAsync(Host, { key: '672c967273dac405ed4a47fa5939463265075681', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'c15e572fdf4a8c68fff8b69b586dfbf9f01dce1b' })));
15423
+ return (hAsync(Host, { key: '1702396f538453cf26beb81b63926ea73b7baa89', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'bd04afefd83178f48eb93b4e7d189386a817ff72' })));
16943
15424
  }
16944
15425
  static get watchers() { return {
16945
15426
  "field": [{
@@ -16947,6 +15428,12 @@ class SdTd {
16947
15428
  }],
16948
15429
  "rowKey": [{
16949
15430
  "handleRowKeyChange": 0
15431
+ }],
15432
+ "rowspan": [{
15433
+ "handleSpanChange": 0
15434
+ }],
15435
+ "colspan": [{
15436
+ "handleSpanChange": 0
16950
15437
  }]
16951
15438
  }; }
16952
15439
  static get style() { return sdTdCss(); }
@@ -16956,7 +15443,9 @@ class SdTd {
16956
15443
  "$members$": {
16957
15444
  "field": [1],
16958
15445
  "rowKey": [1, "row-key"],
16959
- "align": [1]
15446
+ "align": [1],
15447
+ "rowspan": [2],
15448
+ "colspan": [2]
16960
15449
  },
16961
15450
  "$listeners$": undefined,
16962
15451
  "$lazyBundleId$": "-",
@@ -17035,16 +15524,16 @@ class SdTextLink {
17035
15524
  '--sd-text-link-text-decoration': typo.textDecoration,
17036
15525
  ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
17037
15526
  };
17038
- return (hAsync("span", { key: '1128254cddacf5869f320ce2b788b06646f27d7f', class: {
15527
+ return (hAsync("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
17039
15528
  'sd-text-link': true,
17040
15529
  'sd-text-link--disabled': this.disabled,
17041
- }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '52c069d637a2ccf9cd4e7bd1ab3a62ea981d2e1e', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '99a09359c75c2eb6c2e2ef6b9e3b87d92c3f7810', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: 'c7e77454d9d002c0e043dc71a418c65ecd60cff5', class: "sd-text-link__arrow", style: {
15530
+ }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '9d63aea3c45c4962e5766e7059a166a85e7a357f', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: 'dc73d60dd1e593c597a6b5dd977db380c21ff680', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: '2b25dfb6ae2f857b674341427f93ee34e4691893', class: "sd-text-link__arrow", style: {
17042
15531
  width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
17043
15532
  height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
17044
15533
  display: 'inline-flex',
17045
15534
  alignItems: 'center',
17046
15535
  justifyContent: 'center',
17047
- } }, hAsync("sd-icon", { key: '677c88823b02084449cd2dec83cc6bd27dfb8006', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
15536
+ } }, hAsync("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
17048
15537
  }
17049
15538
  static get style() { return sdTextLinkCss(); }
17050
15539
  static get cmpMeta() { return {
@@ -17191,7 +15680,7 @@ class SdTextarea {
17191
15680
  '--sd-system-size-field-sm-height': 'auto',
17192
15681
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
17193
15682
  };
17194
- return (hAsync("sd-field", { key: '345a70f335ee103a4e45c75e17559359beec01c9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'dc09d61d06f3cefb15dce980e293a266fdf3d79d', class: "sd-textarea__content" }, hAsync("textarea", { key: '085de248d7376e0d19d3588bc836bd5ad17cb335', 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 }))));
15683
+ return (hAsync("sd-field", { key: 'ca7dc6c13d22ba43cd99ee1e976599d7efb1eceb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'a36ffabff714596bf780f2a63ccfde3e02eadda7', class: "sd-textarea__content" }, hAsync("textarea", { key: 'b7f8a55b7ee4dfc394c380a97e21c6cc34d12b9b', 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 }))));
17195
15684
  }
17196
15685
  static get watchers() { return {
17197
15686
  "value": [{
@@ -17245,11 +15734,12 @@ class SdTextarea {
17245
15734
  }; }
17246
15735
  }
17247
15736
 
17248
- const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:36px}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:#F5FAFF;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #E1E1E1;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:#F5FAFF;z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:#F5FAFF;z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.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}.th.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}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC}.th__resizer--left{right:auto;left:0}`;
15737
+ const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.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}.th.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}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
17249
15738
 
17250
15739
  class SdThead {
17251
15740
  constructor(hostRef) {
17252
15741
  registerInstance(this, hostRef);
15742
+ this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
17253
15743
  }
17254
15744
  get el() { return getElement(this); }
17255
15745
  columns;
@@ -17261,6 +15751,7 @@ class SdThead {
17261
15751
  scrolledRight;
17262
15752
  rows = [];
17263
15753
  columnWidths = [];
15754
+ sdColumnSort;
17264
15755
  tableId = '';
17265
15756
  _columns = [];
17266
15757
  _selectable = false;
@@ -17288,7 +15779,12 @@ class SdThead {
17288
15779
  this.resolveConfig();
17289
15780
  }
17290
15781
  syncTableContext() {
17291
- const table = this.el.closest('sd-table');
15782
+ // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
15783
+ // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
15784
+ const closest = this.el.closest('sd-table');
15785
+ const root = this.el.getRootNode();
15786
+ const fromShadow = root instanceof ShadowRoot ? root.host : null;
15787
+ const table = closest ?? fromShadow;
17292
15788
  this.tableEl = table;
17293
15789
  const fromMethod = table?.getTableIdSync?.();
17294
15790
  const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
@@ -17356,9 +15852,11 @@ class SdThead {
17356
15852
  this.tableEl.handleResize(index, event, reversed);
17357
15853
  }
17358
15854
  }
15855
+ handleColumnSort = (col) => {
15856
+ this.sdColumnSort.emit({ column: col });
15857
+ };
17359
15858
  handleSelectAll(checked) {
17360
- const currentState = this.getIsAllChecked();
17361
- const nextChecked = currentState === null ? false : !!checked;
15859
+ const nextChecked = !!checked;
17362
15860
  const safeRows = Array.isArray(this.rows) ? this.rows : [];
17363
15861
  if (this.tableEl?.toggleSelectAllSync) {
17364
15862
  this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
@@ -17378,27 +15876,42 @@ class SdThead {
17378
15876
  const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
17379
15877
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
17380
15878
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
17381
- return (hAsync(Host, { key: '2358499ef65d88005d03b1246604c0fd8eefdde1', slot: `${this.tableId}-head` }, hAsync("thead", { key: '49bb43a19aeb83f3a60367b26dbb6535ebcec743', class: {
15879
+ const headStyle = {
15880
+ '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
15881
+ '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
15882
+ '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
15883
+ '--table-header-bg': TABLE_HEADER_COLORS.bg,
15884
+ '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
15885
+ '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
15886
+ '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
15887
+ '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
15888
+ '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
15889
+ '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
15890
+ '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
15891
+ '--table-border-color': TABLE_BORDER.color,
15892
+ '--table-border-width': `${TABLE_BORDER.width}px`,
15893
+ };
15894
+ return (hAsync(Host, { key: 'c4468056cc20a78516e61bccaf4d11c098e83ec6', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'a9befd1728baf2104bfb9132557d5c5c0eb49748', class: {
17382
15895
  'thead': true,
17383
15896
  'thead--sticky': this._stickyHeader,
17384
- } }, hAsync("tr", { key: 'cd6388d79e9a4a5d9edbbda05601abbbefcb1ff4', class: "tr" }, this._selectable && (hAsync("th", { key: 'fa09e82368d45e9fb1d32838ef44e609c698609d', class: {
15897
+ } }, hAsync("tr", { key: 'da786d82d4896b6124becf42f634bcc5b0a6ffb7', class: "tr" }, this._selectable && (hAsync("th", { key: 'b257c5475b7e528fbfc52ea85031a4c49bed7b36', class: {
17385
15898
  'th': true,
17386
15899
  'th--selected': true,
17387
15900
  'sticky-left': true,
17388
15901
  'sticky-left-edge': stickyLeftCount === 0,
17389
15902
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
17390
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '5ab4861aecfac9495101363d5bd809d077c7dbc3', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
15903
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '6624026c1811c809eeb5131518ddb8c11f66b541', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
17391
15904
  'th': true,
17392
15905
  [`${col.thClass}`]: Boolean(col.thClass),
17393
15906
  'sticky-left': true,
17394
15907
  'sticky-left-edge': idx === stickyLeftCount - 1,
17395
15908
  'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
17396
- }, 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.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), 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) => {
15909
+ }, 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) => {
17397
15910
  const actualColIdx = stickyLeftCount + relativeIdx;
17398
15911
  return (hAsync("th", { key: col.name, class: {
17399
15912
  th: true,
17400
15913
  [`${col.thClass}`]: Boolean(col.thClass),
17401
- }, 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.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), 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) }))));
15914
+ }, 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) }))));
17402
15915
  }), stickyRightCols.map((col, relativeIdx) => {
17403
15916
  const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
17404
15917
  return (hAsync("th", { key: col.name, class: {
@@ -17407,7 +15920,7 @@ class SdThead {
17407
15920
  'sticky-right': true,
17408
15921
  'sticky-right-edge': relativeIdx === 0,
17409
15922
  'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
17410
- }, 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.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), 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) }))));
15923
+ }, 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) }))));
17411
15924
  })))));
17412
15925
  }
17413
15926
  static get watchers() { return {
@@ -17502,10 +16015,10 @@ class SdToast {
17502
16015
  render() {
17503
16016
  const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
17504
16017
  const iconSize = Number(TOAST_LAYOUT.iconSize);
17505
- return (hAsync("div", { key: 'd4b73e2503514143f5174bc8859baf0e59c2f8da', style: {
16018
+ return (hAsync("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
17506
16019
  '--sd-toast-bg': typeConfig.bg,
17507
16020
  '--sd-toast-text': typeConfig.content,
17508
- } }, hAsync("div", { key: '7334daee691fb03a1005c2afac64033554489046', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '297ada835b0710bf43a936b02e53b0873b7f4af3', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'b5bc4716df28231dc7af15db63595ae9044189b5', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: 'd0239c8f8b495fbdaedad0f65a6d0a0edfaada60', class: "sd-toast__content" }, hAsync("span", { key: 'dc70d403673bb8f99cfd91393054a86bf17e5ac2', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '1a76bcee482720693b501d3a13c54e720bbe44fc', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: 'a8dc3c15cabf5ca4e075e75c4fb2744dd5da4fa0', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
16021
+ } }, hAsync("div", { key: '68362fac26744fc7e805a18c589f4aff5845edc1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '8ec7941b469b6d0242ab68b7928a9dbf6e75bb5f', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'c057a100de91cecc3435bfa6a95c928727eb1836', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '21e84dd6cdf7efa52611da532a0983268c7c2cb2', class: "sd-toast__content" }, hAsync("span", { key: '99c370fe3d4a54103fbccef395afadf2923f3613', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '3ce7109c2d1f5cd03f4fcc6bb01ede14c6400734', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: '2cf982fd1fe538533ceff61bbdecdacd2d69e51c', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
17509
16022
  }
17510
16023
  static get style() { return sdToastCss(); }
17511
16024
  static get cmpMeta() { return {
@@ -17757,7 +16270,7 @@ class SdToastContainer {
17757
16270
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
17758
16271
  const indexMap = new Map();
17759
16272
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
17760
- return (hAsync("div", { key: '601c4c5aa55df02459866607ca7c59da53c2eda5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
16273
+ return (hAsync("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
17761
16274
  this.expanded = true;
17762
16275
  this.pauseTimers();
17763
16276
  }, onMouseLeave: () => {
@@ -17915,7 +16428,7 @@ class SdToggle {
17915
16428
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
17916
16429
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
17917
16430
  };
17918
- return (hAsync("label", { key: 'fe56ffe876ccc859536ca74703e0870ad97e1668', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: 'f473fd71c03d0e4e3e8fb354753d769033f148f2', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
16431
+ return (hAsync("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
17919
16432
  }
17920
16433
  static get style() { return sdToggleCss(); }
17921
16434
  static get cmpMeta() { return {
@@ -18042,14 +16555,14 @@ class SdTooltip {
18042
16555
  const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
18043
16556
  const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
18044
16557
  const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
18045
- return (hAsync(Fragment, { key: 'e0211f8c80222e357d278c81582baf40ef47a8a6' }, hAsync("div", { key: '9747aa6130dbf0d7e29bbe2d7222c22c8001c6a5', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '7f3e8e2758ef78ca1765bd7e4ec8d6849698ff88', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '86a3a006bdcee86f16da7ebea04ff267a7f029b9', ref: el => (this.menuEl = el), class: {
16558
+ return (hAsync(Fragment, { key: '9e14a4013ea6d04a37529cf7afdb10fe4b3d98eb' }, hAsync("div", { key: 'd98396d4440a795e59b0d2fede7381f8e0da7280', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '59d42ad7aafd94fbe89fc5af3bddf5a305e13a4c', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '88a927d2c3461c7c68865262e8565d0d1385e9af', ref: el => (this.menuEl = el), class: {
18046
16559
  'sd-floating-menu': true,
18047
16560
  [`sd-floating-menu--${tooltipType}`]: true,
18048
16561
  [`sd-floating-menu--${placement}`]: true,
18049
16562
  }, style: {
18050
16563
  '--sd-floating-bg': typeConfig.bg,
18051
16564
  '--sd-floating-content': typeConfig.content,
18052
- }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '50268080023fc252774a7fb564bdbf6c007c115e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '28b2948d9570157c6c40e7738498266ca8c8ec64' })), hAsync("div", { key: 'e2057da013a2700e8614f1e8d8e5164aec8efb18', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
16565
+ }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'eb2bcb4e6faa2066e309b662f372fbf8bef42a3e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'f13005f88ef3194d43de72a87ee78f2c0858682e' })), hAsync("div", { key: '726aff3af3603593d0b994ee17ba88cec071868a', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
18053
16566
  }
18054
16567
  static get style() { return sdTooltipCss(); }
18055
16568
  static get cmpMeta() { return {
@@ -18076,7 +16589,7 @@ class SdTooltip {
18076
16589
  }; }
18077
16590
  }
18078
16591
 
18079
- const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.td{display:table-cell;height:44px;padding:0 16px;border-bottom:1px solid #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}`;
16592
+ 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}`;
18080
16593
 
18081
16594
  class SdTr {
18082
16595
  constructor(hostRef) {
@@ -18091,6 +16604,7 @@ class SdTr {
18091
16604
  tableId = '';
18092
16605
  columnWidths = [];
18093
16606
  isVisible = true;
16607
+ spansVersion = 0;
18094
16608
  _columns = [];
18095
16609
  _selectable = false;
18096
16610
  _stickyColumn = { left: 0, right: 0 };
@@ -18108,7 +16622,12 @@ class SdTr {
18108
16622
  this.syncTableContext();
18109
16623
  }
18110
16624
  syncTableContext() {
18111
- const table = this.el.closest('sd-table');
16625
+ // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
16626
+ // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
16627
+ const closest = this.el.closest('sd-table');
16628
+ const root = this.el.getRootNode();
16629
+ const fromShadow = root instanceof ShadowRoot ? root.host : null;
16630
+ const table = closest ?? fromShadow;
18112
16631
  this.tableEl = table;
18113
16632
  const fromMethod = table?.getTableIdSync?.();
18114
16633
  const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
@@ -18133,6 +16652,9 @@ class SdTr {
18133
16652
  async refreshConfig() {
18134
16653
  this.resolveConfig();
18135
16654
  }
16655
+ async bumpSpansVersion() {
16656
+ this.spansVersion = this.spansVersion + 1;
16657
+ }
18136
16658
  async updateVisibility() {
18137
16659
  this.updateVisibilitySync();
18138
16660
  }
@@ -18198,37 +16720,72 @@ class SdTr {
18198
16720
  this.tableEl.updateRowSelectSync(this.row);
18199
16721
  }
18200
16722
  }
16723
+ getSpanFor(col) {
16724
+ if (!this.tableEl?.getSpanSync)
16725
+ return undefined;
16726
+ const fieldName = typeof col.field === 'string' ? col.field : col.name;
16727
+ return this.tableEl.getSpanSync(this.rowKey, fieldName);
16728
+ }
16729
+ isCovered(colIdx) {
16730
+ if (!this.tableEl?.isCoveredSync)
16731
+ return false;
16732
+ return this.tableEl.isCoveredSync(this.rowKey, colIdx, this._columns);
16733
+ }
18201
16734
  render() {
18202
16735
  const stickyLeftCount = this._stickyColumn.left || 0;
18203
16736
  const stickyRightCount = this._stickyColumn.right || 0;
18204
16737
  const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
18205
16738
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
18206
16739
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
18207
- return (hAsync(Host, { key: 'd6259e5c87cce0fa70f1d849e11416ad69b0cac1', style: { display: this.isVisible ? '' : 'none' } }, hAsync("tr", { key: '90e36c39bede0e07fc1c4d90183a73ebc99b6ed8', class: "tr" }, this._selectable && (hAsync("td", { key: '601f1747063d8e73803304abc2cd767f420f359c', class: {
16740
+ const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
16741
+ const rowStyle = {
16742
+ display: this.isVisible ? '' : 'none',
16743
+ '--table-body-height': `${TABLE_BODY_LAYOUT.default.height}px`,
16744
+ '--table-body-padding-x': `${TABLE_BODY_LAYOUT.paddingX}px`,
16745
+ '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
16746
+ '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
16747
+ '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
16748
+ '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
16749
+ '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
16750
+ '--table-border-color': TABLE_BORDER.color,
16751
+ '--table-border-width': `${TABLE_BORDER.width}px`,
16752
+ };
16753
+ return (hAsync(Host, { key: '33228ee9f020f915e77f9827e9360087fc2cd565', style: rowStyle }, hAsync("tr", { key: '2f308a547ad19584e509543027cf60ff8faec2f8', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { key: '94f50aa6fd31a63d8d99e8c6f25faf8ba6f68ddf', class: {
18208
16754
  'td': true,
18209
16755
  'td--selected': true,
18210
16756
  'sticky-left': true,
18211
16757
  'sticky-left-edge': stickyLeftCount === 0,
18212
16758
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
18213
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '97068a623d3b7876c7e6392e3f5ed81cfc60d592', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (hAsync("td", { key: col.name, class: {
18214
- 'td': true,
18215
- [`td--${col.align || 'left'}`]: true,
18216
- 'sticky-left': true,
18217
- 'sticky-left-edge': idx === stickyLeftCount - 1,
18218
- 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
18219
- [`${col.tdClass}`]: Boolean(col.tdClass),
18220
- }, 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)))))), middleCols.map((col, relativeIdx) => {
16759
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: 'e8808068b601529c95b8055c16e7af8a746bdccc', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
16760
+ if (this.isCovered(idx))
16761
+ return null;
16762
+ const span = this.getSpanFor(col);
16763
+ return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
16764
+ 'td': true,
16765
+ [`td--${col.align || 'left'}`]: true,
16766
+ 'sticky-left': true,
16767
+ 'sticky-left-edge': idx === stickyLeftCount - 1,
16768
+ 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
16769
+ [`${col.tdClass}`]: Boolean(col.tdClass),
16770
+ }, 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)))));
16771
+ }), middleCols.map((col, relativeIdx) => {
18221
16772
  const actualColIdx = stickyLeftCount + relativeIdx;
16773
+ if (this.isCovered(actualColIdx))
16774
+ return null;
18222
16775
  const fieldName = typeof col.field === 'string' ? col.field : col.name;
18223
- return (hAsync("td", { key: col.name, class: {
16776
+ const span = this.getSpanFor(col);
16777
+ return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
18224
16778
  td: true,
18225
16779
  [`td--${col.align || 'left'}`]: true,
18226
16780
  [`${col.tdClass}`]: Boolean(col.tdClass),
18227
16781
  }, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
18228
16782
  }), stickyRightCols.map((col, relativeIdx) => {
18229
16783
  const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
16784
+ if (this.isCovered(actualColIdx))
16785
+ return null;
18230
16786
  const fieldName = typeof col.field === 'string' ? col.field : col.name;
18231
- return (hAsync("td", { key: col.name, class: {
16787
+ const span = this.getSpanFor(col);
16788
+ return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
18232
16789
  'td': true,
18233
16790
  [`td--${col.align || 'left'}`]: true,
18234
16791
  'sticky-right': true,
@@ -18251,12 +16808,14 @@ class SdTr {
18251
16808
  "tableId": [32],
18252
16809
  "columnWidths": [32],
18253
16810
  "isVisible": [32],
16811
+ "spansVersion": [32],
18254
16812
  "_columns": [32],
18255
16813
  "_selectable": [32],
18256
16814
  "_stickyColumn": [32],
18257
16815
  "_scrolledLeft": [32],
18258
16816
  "_scrolledRight": [32],
18259
16817
  "refreshConfig": [64],
16818
+ "bumpSpansVersion": [64],
18260
16819
  "updateVisibility": [64],
18261
16820
  "setColumnWidths": [64],
18262
16821
  "refreshSelection": [64]
@@ -18268,7 +16827,6 @@ class SdTr {
18268
16827
  }
18269
16828
 
18270
16829
  registerComponents([
18271
- DataTable,
18272
16830
  SdActionModal,
18273
16831
  SdBadge,
18274
16832
  SdBarcodeInput,
@@ -18303,23 +16861,14 @@ registerComponents([
18303
16861
  SdPagination,
18304
16862
  SdPopover,
18305
16863
  SdPortal,
18306
- SdProgress,
18307
16864
  SdRadio,
18308
16865
  SdRadioButton,
18309
16866
  SdRadioGroup,
18310
16867
  SdSelect,
18311
- SdSelectDropdown,
18312
- SdSelectGroup,
18313
- SdSelectMultiple,
18314
- SdSelectMultipleGroup,
18315
- SdSelectOption,
18316
- SdSelectOptionGroup,
18317
- SdSelectSearchInput,
18318
- SdSelectV2,
18319
- SdSelectV2ListItem,
18320
- SdSelectV2ListItemSearch,
18321
- SdSelectV2Listbox,
18322
- SdSelectV2Trigger,
16868
+ SdSelectListItem,
16869
+ SdSelectListItemSearch,
16870
+ SdSelectListbox,
16871
+ SdSelectTrigger,
18323
16872
  SdSwitch,
18324
16873
  SdTable,
18325
16874
  SdTabs,