@sellmate/design-system 1.0.76 → 1.0.78

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 (446) hide show
  1. package/dist/cjs/design-system.cjs.js +2 -2
  2. package/dist/cjs/{index-Dptupbm0.js → index--F2wGuAi.js} +1 -1
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/sd-action-modal.cjs.entry.js +2 -2
  5. package/dist/cjs/sd-badge.cjs.entry.js +2 -2
  6. package/dist/cjs/sd-barcode-input.cjs.entry.js +2 -2
  7. package/dist/cjs/sd-button-v2_2.cjs.entry.js +3 -3
  8. package/dist/cjs/sd-button_4.cjs.entry.js +10 -13
  9. package/dist/cjs/sd-calendar.cjs.entry.js +1 -1
  10. package/dist/cjs/sd-card.cjs.entry.js +2 -2
  11. package/dist/cjs/sd-checkbox.cjs.entry.js +7 -4
  12. package/dist/cjs/sd-chip.cjs.entry.js +2 -2
  13. package/dist/cjs/sd-circle-progress.cjs.entry.js +4 -4
  14. package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +4 -4
  15. package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
  16. package/dist/cjs/sd-date-picker-calendar.cjs.entry.js +3 -3
  17. package/dist/cjs/sd-date-picker-trigger.cjs.entry.js +4 -4
  18. package/dist/cjs/sd-date-picker.cjs.entry.js +4 -4
  19. package/dist/cjs/{sd-date-picker.config-B705zdZd.js → sd-date-picker.config-CRgCT5dn.js} +4 -2
  20. package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +3 -3
  21. package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
  22. package/dist/cjs/sd-dropdown-button.cjs.entry.js +96 -9
  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 +3 -3
  26. package/dist/cjs/sd-guide.cjs.entry.js +3 -3
  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 +4 -4
  29. package/dist/cjs/sd-loading-container.cjs.entry.js +3 -3
  30. package/dist/cjs/sd-modal-container.cjs.entry.js +1 -1
  31. package/dist/cjs/sd-number-input.cjs.entry.js +4 -4
  32. package/dist/cjs/sd-pagination_5.cjs.entry.js +77 -33
  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 +1 -1
  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} +50 -50
  39. package/dist/cjs/sd-switch.cjs.entry.js +2 -2
  40. package/dist/cjs/sd-table.cjs.entry.js +91 -16
  41. package/dist/cjs/sd-table.config-Cb0Ot3C6.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 +37 -6
  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 +4 -5
  49. package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
  50. package/dist/cjs/{system-BbCUNhDJ.js → system-DpTN1vBC.js} +8 -2
  51. package/dist/cjs/{tooltipArrow-DuANjCfc.js → tooltipArrow-D1-wcNm1.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.config.js +1 -1
  61. package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
  62. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
  63. package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js +1 -1
  64. package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
  65. package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
  66. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
  67. package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js +2 -2
  68. package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js +3 -3
  69. package/dist/collection/components/sd-field/sd-field.js +5 -8
  70. package/dist/collection/components/sd-file-picker/sd-file-picker.js +1 -1
  71. package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
  72. package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +2 -2
  73. package/dist/collection/components/sd-guide/sd-guide.config.js +1 -1
  74. package/dist/collection/components/sd-input/sd-input.js +2 -2
  75. package/dist/collection/components/sd-linear-progress/sd-linear-progress.config.js +1 -1
  76. package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
  77. package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
  78. package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
  79. package/dist/collection/components/sd-number-input/sd-number-input.js +3 -3
  80. package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
  81. package/dist/collection/components/sd-portal/sd-portal.js +1 -1
  82. 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
  83. 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
  84. 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
  85. 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
  86. 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
  87. 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} +35 -35
  88. 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
  89. 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
  90. package/dist/collection/components/sd-select/sd-select.css +3 -47
  91. package/dist/collection/components/sd-select/sd-select.js +413 -294
  92. package/dist/collection/components/sd-switch/sd-switch.js +1 -1
  93. package/dist/collection/components/sd-table/sd-table.config.js +80 -0
  94. package/dist/collection/components/sd-table/sd-table.css +16 -8
  95. package/dist/collection/components/sd-table/sd-table.js +88 -14
  96. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.css +0 -8
  97. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +3 -4
  98. package/dist/collection/components/sd-table/sd-td/sd-td.js +55 -5
  99. package/dist/collection/components/sd-table/sd-thead/sd-thead.css +16 -12
  100. package/dist/collection/components/sd-table/sd-thead/sd-thead.js +52 -8
  101. package/dist/collection/components/sd-table/sd-tr/sd-tr.css +3 -3
  102. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +27 -2
  103. package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
  104. package/dist/collection/components/sd-tag/sd-tag.js +2 -2
  105. package/dist/collection/components/sd-text-link/sd-text-link.js +3 -3
  106. package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
  107. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  108. package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
  109. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  110. package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
  111. package/dist/collection/utils/testing/index.js +2 -0
  112. package/dist/collection/utils/testing/mocks.js +35 -0
  113. package/dist/components/index.js +1 -1
  114. package/dist/components/{p-D5HLYqT-.js → p-B8jXOXtJ.js} +1 -1
  115. package/dist/components/p-BE6TxbtX.js +1 -0
  116. package/dist/components/{p-BBD_1E3n.js → p-BJsHakU2.js} +1 -1
  117. package/dist/components/{p-CgMyz4NQ.js → p-BStczlLa.js} +1 -1
  118. package/dist/components/{p-BM0sVq5Z.js → p-BcMNA89i.js} +1 -1
  119. package/dist/components/{p-6PsyRF61.js → p-BheX6lAy.js} +1 -1
  120. package/dist/components/p-BmYM7-4v.js +1 -0
  121. package/dist/components/{p-CUg9NH6y.js → p-BppjYHF6.js} +1 -1
  122. package/dist/components/{p-BLwIhCdO.js → p-Bvq0Vpln.js} +1 -1
  123. package/dist/components/{p-C7h8lwnU.js → p-BwWDMpJc.js} +1 -1
  124. package/dist/components/p-C5qZtNLl.js +1 -0
  125. package/dist/components/p-C7DajKYn.js +1 -0
  126. package/dist/components/p-CZ4ltUOw.js +1 -0
  127. package/dist/components/{p-d4UB2UF7.js → p-CeVMl_M9.js} +1 -1
  128. package/dist/components/p-D1DpOp6M.js +1 -0
  129. package/dist/components/p-D3gjBBCU.js +1 -0
  130. package/dist/components/{p-DQfNwvwx.js → p-DC-6inj0.js} +1 -1
  131. package/dist/components/p-DRF0He-x.js +1 -0
  132. package/dist/components/{p-B3xZdEDI.js → p-Dcc2Vm6z.js} +1 -1
  133. package/dist/components/p-DegvQLTF.js +1 -0
  134. package/dist/components/{p-Csfj4h1A.js → p-Dey-lS6x.js} +1 -1
  135. package/dist/components/p-DfH_fO01.js +1 -0
  136. package/dist/components/{p-DdJyzIYe.js → p-DkJqVXpD.js} +1 -1
  137. package/dist/components/{p-CZPR_5mk.js → p-DngV3MT1.js} +1 -1
  138. package/dist/components/{p-DaAhgdib.js → p-EbjZr2OA.js} +1 -1
  139. package/dist/components/p-LwWOleLJ.js +1 -0
  140. package/dist/components/p-Nvx13YlG.js +1 -0
  141. package/dist/components/{p-BXdEjuI_.js → p-TwGlKfsC.js} +1 -1
  142. package/dist/components/{p-6LtMeKKA.js → p-ZMpCZhXP.js} +1 -1
  143. package/dist/components/{p-BZm6KN1s.js → p-dNJIFthT.js} +1 -1
  144. package/dist/components/{p-iAWNMLXh.js → p-q0VWISKA.js} +1 -1
  145. package/dist/components/{p-BQvugXhH.js → p-xnLvZ-xn.js} +1 -1
  146. package/dist/components/sd-action-modal.js +1 -1
  147. package/dist/components/sd-badge.js +1 -1
  148. package/dist/components/sd-barcode-input.js +1 -1
  149. package/dist/components/sd-button-v2.js +1 -1
  150. package/dist/components/sd-button.js +1 -1
  151. package/dist/components/sd-calendar.js +1 -1
  152. package/dist/components/sd-card.js +1 -1
  153. package/dist/components/sd-checkbox.js +1 -1
  154. package/dist/components/sd-chip.js +1 -1
  155. package/dist/components/sd-circle-progress.js +1 -1
  156. package/dist/components/sd-confirm-modal.js +1 -1
  157. package/dist/components/sd-date-box.js +1 -1
  158. package/dist/components/sd-date-picker-calendar.js +1 -1
  159. package/dist/components/sd-date-picker-trigger.js +1 -1
  160. package/dist/components/sd-date-picker.js +1 -1
  161. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  162. package/dist/components/sd-date-range-picker.js +1 -1
  163. package/dist/components/sd-dropdown-button.js +1 -1
  164. package/dist/components/sd-field.js +1 -1
  165. package/dist/components/sd-file-picker.js +1 -1
  166. package/dist/components/sd-floating-portal.js +1 -1
  167. package/dist/components/sd-form.js +1 -1
  168. package/dist/components/sd-ghost-button.js +1 -1
  169. package/dist/components/sd-guide.js +1 -1
  170. package/dist/components/sd-icon.js +1 -1
  171. package/dist/components/sd-input.js +1 -1
  172. package/dist/components/sd-linear-progress.js +1 -1
  173. package/dist/components/sd-loading-container.js +1 -1
  174. package/dist/components/sd-loading-modal.js +1 -1
  175. package/dist/components/sd-modal-container.js +1 -1
  176. package/dist/components/sd-number-input.js +1 -1
  177. package/dist/components/sd-pagination.js +1 -1
  178. package/dist/components/sd-popover.js +1 -1
  179. package/dist/components/sd-portal.js +1 -1
  180. package/dist/components/sd-radio-button.js +1 -1
  181. package/dist/components/sd-radio-group.js +1 -1
  182. package/dist/components/sd-radio.js +1 -1
  183. package/dist/components/sd-select-list-item-search.d.ts +11 -0
  184. package/dist/components/sd-select-list-item-search.js +1 -0
  185. package/dist/components/{sd-select-multiple.d.ts → sd-select-list-item.d.ts} +4 -4
  186. package/dist/components/sd-select-list-item.js +1 -0
  187. package/dist/components/{sd-select-option.d.ts → sd-select-listbox.d.ts} +4 -4
  188. package/dist/components/sd-select-listbox.js +1 -0
  189. package/dist/components/{sd-select-group.d.ts → sd-select-trigger.d.ts} +4 -4
  190. package/dist/components/sd-select-trigger.js +1 -0
  191. package/dist/components/sd-select.js +1 -1
  192. package/dist/components/sd-switch.js +1 -1
  193. package/dist/components/sd-table.js +1 -1
  194. package/dist/components/sd-tabs.js +1 -1
  195. package/dist/components/sd-tag.js +1 -1
  196. package/dist/components/sd-tbody.js +1 -1
  197. package/dist/components/sd-td.js +1 -1
  198. package/dist/components/sd-text-link.js +1 -1
  199. package/dist/components/sd-textarea.js +1 -1
  200. package/dist/components/sd-thead.js +1 -1
  201. package/dist/components/sd-toast-container.js +1 -1
  202. package/dist/components/sd-toast.js +1 -1
  203. package/dist/components/sd-toggle.js +1 -1
  204. package/dist/components/sd-tooltip.js +1 -1
  205. package/dist/components/sd-tr.js +1 -1
  206. package/dist/design-system/design-system.css +1 -1
  207. package/dist/design-system/design-system.esm.js +1 -1
  208. package/dist/design-system/{p-6a3f8588.entry.js → p-0356c195.entry.js} +1 -1
  209. package/dist/design-system/{p-3a9559ee.entry.js → p-045bc426.entry.js} +1 -1
  210. package/dist/design-system/{p-c7bcb232.entry.js → p-12dfd239.entry.js} +1 -1
  211. package/dist/design-system/p-16d3a485.entry.js +1 -0
  212. package/dist/design-system/p-1706ed6f.entry.js +1 -0
  213. package/dist/design-system/{p-506f2b68.entry.js → p-182548f7.entry.js} +1 -1
  214. package/dist/design-system/p-1a79edce.entry.js +1 -0
  215. package/dist/design-system/{p-17cd3a33.entry.js → p-1cf87e87.entry.js} +1 -1
  216. package/dist/design-system/{p-dad07e1a.entry.js → p-25a08e98.entry.js} +1 -1
  217. package/dist/design-system/{p-b683f2fe.entry.js → p-2812b9ce.entry.js} +1 -1
  218. package/dist/design-system/{p-49f78122.entry.js → p-33bc3176.entry.js} +1 -1
  219. package/dist/design-system/p-38f661ea.entry.js +1 -0
  220. package/dist/design-system/{p-280dc548.entry.js → p-3f7bc660.entry.js} +1 -1
  221. package/dist/design-system/{p-eb29dc9f.entry.js → p-429dab5c.entry.js} +1 -1
  222. package/dist/design-system/p-455dccf5.entry.js +1 -0
  223. package/dist/design-system/{p-97ebf578.entry.js → p-59313838.entry.js} +1 -1
  224. package/dist/design-system/{p-5f6379e9.entry.js → p-6af01ab0.entry.js} +1 -1
  225. package/dist/design-system/{p-531a6a82.entry.js → p-6bfe3612.entry.js} +1 -1
  226. package/dist/design-system/{p-7fe3a466.entry.js → p-70d4903f.entry.js} +1 -1
  227. package/dist/design-system/p-767e99f9.entry.js +1 -0
  228. package/dist/design-system/{p-34f7345b.entry.js → p-797517b5.entry.js} +1 -1
  229. package/dist/design-system/p-7c370335.entry.js +1 -0
  230. package/dist/design-system/{p-a8bde8d9.entry.js → p-7fe8be6a.entry.js} +1 -1
  231. package/dist/design-system/{p-6af9e663.entry.js → p-83b262dc.entry.js} +1 -1
  232. package/dist/design-system/{p-11029f6e.entry.js → p-881adaa5.entry.js} +1 -1
  233. package/dist/design-system/{p-3ca5c303.entry.js → p-88d7303c.entry.js} +1 -1
  234. package/dist/design-system/{p-fdb52620.entry.js → p-8a601e0f.entry.js} +1 -1
  235. package/dist/design-system/p-C5qZtNLl.js +1 -0
  236. package/dist/design-system/p-CZ4ltUOw.js +1 -0
  237. package/dist/design-system/p-Cnwbjz1F.js +2 -0
  238. package/dist/design-system/p-DnCBBIoq.js +1 -0
  239. package/dist/design-system/{p-b745cd95.entry.js → p-a82be987.entry.js} +1 -1
  240. package/dist/design-system/p-b917c82a.entry.js +1 -0
  241. package/dist/design-system/{p-c9eb70f5.entry.js → p-b9f00eef.entry.js} +1 -1
  242. package/dist/design-system/{p-55b65a41.entry.js → p-bcb53788.entry.js} +1 -1
  243. package/dist/design-system/p-c24344ac.entry.js +1 -0
  244. package/dist/design-system/{p-2cd2f2dd.entry.js → p-d76192bd.entry.js} +1 -1
  245. package/dist/design-system/p-d9d8c51b.entry.js +1 -0
  246. package/dist/design-system/p-de67937d.entry.js +1 -0
  247. package/dist/design-system/{p-68d0d67e.entry.js → p-e5cebccd.entry.js} +1 -1
  248. package/dist/design-system/{p-a9fc2c21.entry.js → p-ea5e6c2c.entry.js} +1 -1
  249. package/dist/design-system/p-ead3e688.entry.js +1 -0
  250. package/dist/design-system/{p-f4a00276.entry.js → p-eeb1cac2.entry.js} +1 -1
  251. package/dist/design-system/{p-d6896893.entry.js → p-f1a74359.entry.js} +1 -1
  252. package/dist/design-system/{p-9466cd93.entry.js → p-f44786a9.entry.js} +1 -1
  253. package/dist/design-system/p-f522c91d.entry.js +1 -0
  254. package/dist/design-system/{p-bb492ba7.entry.js → p-f69c7539.entry.js} +1 -1
  255. package/dist/design-system/{p-ce3d0f9c.entry.js → p-fe9cef6a.entry.js} +1 -1
  256. package/dist/esm/design-system.js +3 -3
  257. package/dist/esm/{index-Bp7ytJz5.js → index-Cnwbjz1F.js} +1 -1
  258. package/dist/esm/loader.js +3 -3
  259. package/dist/esm/sd-action-modal.entry.js +2 -2
  260. package/dist/esm/sd-badge.entry.js +2 -2
  261. package/dist/esm/sd-barcode-input.entry.js +2 -2
  262. package/dist/esm/sd-button-v2_2.entry.js +3 -3
  263. package/dist/esm/sd-button_4.entry.js +10 -13
  264. package/dist/esm/sd-calendar.entry.js +1 -1
  265. package/dist/esm/sd-card.entry.js +2 -2
  266. package/dist/esm/sd-checkbox.entry.js +7 -4
  267. package/dist/esm/sd-chip.entry.js +2 -2
  268. package/dist/esm/sd-circle-progress.entry.js +4 -4
  269. package/dist/esm/sd-confirm-modal_2.entry.js +4 -4
  270. package/dist/esm/sd-date-box.entry.js +1 -1
  271. package/dist/esm/sd-date-picker-calendar.entry.js +3 -3
  272. package/dist/esm/sd-date-picker-trigger.entry.js +4 -4
  273. package/dist/esm/{sd-date-picker.config-DMbVR8K4.js → sd-date-picker.config-C2fDbE9d.js} +4 -2
  274. package/dist/esm/sd-date-picker.entry.js +4 -4
  275. package/dist/esm/sd-date-range-picker-calendar.entry.js +3 -3
  276. package/dist/esm/sd-date-range-picker.entry.js +2 -2
  277. package/dist/esm/sd-dropdown-button.entry.js +95 -8
  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 +3 -3
  281. package/dist/esm/sd-guide.entry.js +3 -3
  282. package/dist/esm/{sd-input_2.entry.js → sd-input.entry.js} +4 -43
  283. package/dist/esm/sd-linear-progress.entry.js +4 -4
  284. package/dist/esm/sd-loading-container.entry.js +3 -3
  285. package/dist/esm/sd-modal-container.entry.js +1 -1
  286. package/dist/esm/sd-number-input.entry.js +4 -4
  287. package/dist/esm/sd-pagination_5.entry.js +77 -33
  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 +1 -1
  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} +47 -47
  294. package/dist/esm/sd-switch.entry.js +2 -2
  295. package/dist/esm/sd-table.config-Bj-EEo7N.js +94 -0
  296. package/dist/esm/sd-table.entry.js +91 -16
  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 +37 -6
  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 +4 -5
  304. package/dist/esm/sd-toggle.entry.js +2 -2
  305. package/dist/esm/{system-BgFLSKqC.js → system-CZ4ltUOw.js} +8 -2
  306. package/dist/esm/{tooltipArrow-BHRQVawd.js → tooltipArrow-D8sr81Xw.js} +1 -1
  307. 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
  308. 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
  309. 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} +6 -6
  310. 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
  311. package/dist/types/components/{sd-select-v2/sd-select-v2.config.d.ts → sd-select/sd-select.config.d.ts} +12 -12
  312. package/dist/types/components/sd-select/sd-select.d.ts +56 -84
  313. package/dist/types/components/sd-table/constants.d.ts +4 -1
  314. package/dist/types/components/sd-table/sd-table.config.d.ts +64 -0
  315. package/dist/types/components/sd-table/sd-table.d.ts +8 -0
  316. package/dist/types/components/sd-table/sd-td/sd-td.d.ts +5 -2
  317. package/dist/types/components/sd-table/sd-thead/sd-thead.d.ts +5 -0
  318. package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +1 -0
  319. package/dist/types/components.d.ts +943 -2382
  320. package/dist/types/utils/testing/index.d.ts +2 -0
  321. package/dist/types/utils/testing/mocks.d.ts +4 -0
  322. package/hydrate/index.js +533 -2214
  323. package/hydrate/index.mjs +533 -2214
  324. package/package.json +1 -1
  325. package/dist/cjs/base-dropdown-event-BTPlZ1KF.js +0 -91
  326. package/dist/cjs/sd-progress.cjs.entry.js +0 -63
  327. package/dist/cjs/sd-select-dropdown_2.cjs.entry.js +0 -231
  328. package/dist/cjs/sd-select-group.cjs.entry.js +0 -332
  329. package/dist/cjs/sd-select-multiple-group.cjs.entry.js +0 -458
  330. package/dist/cjs/sd-select-multiple.cjs.entry.js +0 -191
  331. package/dist/cjs/sd-select-option-group.cjs.entry.js +0 -68
  332. package/dist/cjs/sd-select.cjs.entry.js +0 -181
  333. package/dist/cjs/select-keyboard-navigation-CErfIrGV.js +0 -27
  334. package/dist/cjs/table-test.cjs.entry.js +0 -96
  335. package/dist/collection/components/sd-progress/sd-progress.css +0 -63
  336. package/dist/collection/components/sd-progress/sd-progress.js +0 -186
  337. package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.css +0 -30
  338. package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js +0 -444
  339. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.css +0 -36
  340. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +0 -257
  341. package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.css +0 -23
  342. package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +0 -161
  343. package/dist/collection/components/sd-select-group/sd-select-group.css +0 -81
  344. package/dist/collection/components/sd-select-group/sd-select-group.js +0 -1061
  345. package/dist/collection/components/sd-select-multiple/sd-select-multiple.css +0 -54
  346. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +0 -770
  347. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +0 -79
  348. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +0 -1183
  349. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.css +0 -75
  350. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +0 -305
  351. package/dist/collection/components/sd-select-v2/sd-select-v2.css +0 -11
  352. package/dist/collection/components/sd-select-v2/sd-select-v2.js +0 -897
  353. package/dist/collection/components/table-test/table-test.css +0 -59
  354. package/dist/collection/components/table-test/table-test.js +0 -316
  355. package/dist/components/p-6AvsuYqF.js +0 -1
  356. package/dist/components/p-7DKZPPev.js +0 -1
  357. package/dist/components/p-9ZtJl4s6.js +0 -1
  358. package/dist/components/p-BRfPoWUn.js +0 -1
  359. package/dist/components/p-BZc6lwGD.js +0 -1
  360. package/dist/components/p-BgFLSKqC.js +0 -1
  361. package/dist/components/p-Btx5sC7s.js +0 -1
  362. package/dist/components/p-C-BOe23n.js +0 -1
  363. package/dist/components/p-CNAzAL53.js +0 -1
  364. package/dist/components/p-CqghR1aS.js +0 -1
  365. package/dist/components/p-Cy6HMEsK.js +0 -1
  366. package/dist/components/p-DAC3TaZV.js +0 -1
  367. package/dist/components/p-DBex-RJU.js +0 -1
  368. package/dist/components/p-DWMY9O2B.js +0 -1
  369. package/dist/components/p-DfOYYI9m.js +0 -1
  370. package/dist/components/p-eEC3ITv0.js +0 -1
  371. package/dist/components/p-nVHDJc9g.js +0 -1
  372. package/dist/components/p-rnbt1m4L.js +0 -1
  373. package/dist/components/sd-progress.d.ts +0 -11
  374. package/dist/components/sd-progress.js +0 -1
  375. package/dist/components/sd-select-dropdown.d.ts +0 -11
  376. package/dist/components/sd-select-dropdown.js +0 -1
  377. package/dist/components/sd-select-group.js +0 -1
  378. package/dist/components/sd-select-multiple-group.d.ts +0 -11
  379. package/dist/components/sd-select-multiple-group.js +0 -1
  380. package/dist/components/sd-select-multiple.js +0 -1
  381. package/dist/components/sd-select-option-group.d.ts +0 -11
  382. package/dist/components/sd-select-option-group.js +0 -1
  383. package/dist/components/sd-select-option.js +0 -1
  384. package/dist/components/sd-select-search-input.d.ts +0 -11
  385. package/dist/components/sd-select-search-input.js +0 -1
  386. package/dist/components/sd-select-v2-list-item-search.d.ts +0 -11
  387. package/dist/components/sd-select-v2-list-item-search.js +0 -1
  388. package/dist/components/sd-select-v2-list-item.d.ts +0 -11
  389. package/dist/components/sd-select-v2-list-item.js +0 -1
  390. package/dist/components/sd-select-v2-listbox.d.ts +0 -11
  391. package/dist/components/sd-select-v2-listbox.js +0 -1
  392. package/dist/components/sd-select-v2-trigger.d.ts +0 -11
  393. package/dist/components/sd-select-v2-trigger.js +0 -1
  394. package/dist/components/sd-select-v2.d.ts +0 -11
  395. package/dist/components/sd-select-v2.js +0 -1
  396. package/dist/components/table-test.d.ts +0 -11
  397. package/dist/components/table-test.js +0 -1
  398. package/dist/design-system/p-00612047.entry.js +0 -1
  399. package/dist/design-system/p-07adda3c.entry.js +0 -1
  400. package/dist/design-system/p-0e1b27cc.entry.js +0 -1
  401. package/dist/design-system/p-140b40ab.entry.js +0 -1
  402. package/dist/design-system/p-1573f415.entry.js +0 -1
  403. package/dist/design-system/p-1b9f6cef.entry.js +0 -1
  404. package/dist/design-system/p-1cc7d81f.entry.js +0 -1
  405. package/dist/design-system/p-1fa6c17f.entry.js +0 -1
  406. package/dist/design-system/p-2eb910ec.entry.js +0 -1
  407. package/dist/design-system/p-363c9451.entry.js +0 -1
  408. package/dist/design-system/p-4114eea3.entry.js +0 -1
  409. package/dist/design-system/p-5e300b77.entry.js +0 -1
  410. package/dist/design-system/p-711c59fc.entry.js +0 -1
  411. package/dist/design-system/p-850de8d4.entry.js +0 -1
  412. package/dist/design-system/p-8ff967f7.entry.js +0 -1
  413. package/dist/design-system/p-9fee77f0.entry.js +0 -1
  414. package/dist/design-system/p-BPGLtKk5.js +0 -1
  415. package/dist/design-system/p-BgFLSKqC.js +0 -1
  416. package/dist/design-system/p-Bp7ytJz5.js +0 -2
  417. package/dist/design-system/p-CRdYeSBK.js +0 -1
  418. package/dist/design-system/p-Cy6HMEsK.js +0 -1
  419. package/dist/design-system/p-c521e731.entry.js +0 -1
  420. package/dist/design-system/p-ce2210ad.entry.js +0 -1
  421. package/dist/design-system/p-d1846df9.entry.js +0 -1
  422. package/dist/design-system/p-d52f25c6.entry.js +0 -1
  423. package/dist/design-system/p-dbcbbf1e.entry.js +0 -1
  424. package/dist/esm/base-dropdown-event-CRdYeSBK.js +0 -89
  425. package/dist/esm/sd-progress.entry.js +0 -61
  426. package/dist/esm/sd-select-dropdown_2.entry.js +0 -228
  427. package/dist/esm/sd-select-group.entry.js +0 -330
  428. package/dist/esm/sd-select-multiple-group.entry.js +0 -456
  429. package/dist/esm/sd-select-multiple.entry.js +0 -189
  430. package/dist/esm/sd-select-option-group.entry.js +0 -66
  431. package/dist/esm/sd-select.entry.js +0 -179
  432. package/dist/esm/select-keyboard-navigation-Cy6HMEsK.js +0 -25
  433. package/dist/esm/table-test.entry.js +0 -94
  434. package/dist/types/components/sd-progress/sd-progress.d.ts +0 -15
  435. package/dist/types/components/sd-select/sd-select-dropdown/sd-select-dropdown.d.ts +0 -41
  436. package/dist/types/components/sd-select/sd-select-option/sd-select-option.d.ts +0 -23
  437. package/dist/types/components/sd-select/sd-select-search-input/sd-select-search-input.d.ts +0 -11
  438. package/dist/types/components/sd-select-group/sd-select-group.d.ts +0 -86
  439. package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts +0 -64
  440. package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +0 -110
  441. package/dist/types/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.d.ts +0 -29
  442. package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +0 -75
  443. package/dist/types/components/table-test/table-test.d.ts +0 -46
  444. /package/dist/collection/components/{sd-select-v2/sd-select-v2.config.js → sd-select/sd-select.config.js} +0 -0
  445. /package/dist/components/{p-DMbVR8K4.js → p-C2fDbE9d.js} +0 -0
  446. /package/dist/design-system/{p-DMbVR8K4.js → p-C2fDbE9d.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-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-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-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-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-hint:#555555;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-contents-gap:4px;--sd-datepicker-datepicker-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-hint-typography-font-weight:400;--sd-datepicker-datepicker-hint-typography-font-size:12px;--sd-datepicker-datepicker-hint-typography-line-height:20px;--sd-datepicker-datepicker-hint-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-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-toast-toast--info-bg:#E6F1FF;--sd-toast-toast--info-icon:#0075FF;--sd-toast-toast--info-text:#222222;--sd-toast-toast--info-text-link:#555555;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-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-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-footer-bg:#FFFFFF;--sd-popup-popup-footer-padding-x:20px;--sd-popup-popup-footer-padding-y:8px;--sd-popup-popup-footer-gap:16px;--sd-popup-popup-bg:#EEEEEE}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
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,
@@ -7280,18 +7173,24 @@ const color = {
7280
7173
  bg: {
7281
7174
  accent: {
7282
7175
  "default": "#0075FF"}},
7283
- content: {
7176
+ fg: {
7284
7177
  primary: "#222222",
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
  };
7292
7191
 
7293
7192
  const CIRCLE_PROGRESS_LABEL_COLOR = progressTokens.progress.color.label;
7294
- const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.content.tertiary;
7193
+ const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.fg.tertiary;
7295
7194
  // TODO: error/complete 색상 및 inverse 흰색은 토큰 반영 후 교체
7296
7195
  const CIRCLE_PROGRESS_COLOR_MAP = {
7297
7196
  primary: {
@@ -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 {
@@ -7562,7 +7461,8 @@ const datepicker = {
7562
7461
  fontWeight: "400",
7563
7462
  fontSize: "12",
7564
7463
  lineHeight: "20"},
7565
- radius: "4"},
7464
+ radius: "4"
7465
+ },
7566
7466
  md: {
7567
7467
  height: "36",
7568
7468
  paddingX: "16",
@@ -7573,7 +7473,8 @@ const datepicker = {
7573
7473
  fontSize: "14",
7574
7474
  lineHeight: "24"
7575
7475
  },
7576
- radius: "6"},
7476
+ radius: "6"
7477
+ },
7577
7478
  border: {
7578
7479
  "default": "#AAAAAA",
7579
7480
  focus: "#0075FF"},
@@ -7819,9 +7720,9 @@ class SdDatePicker {
7819
7720
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
7820
7721
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
7821
7722
  };
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 => {
7723
+ 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
7724
  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 })))));
7725
+ } }, 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
7726
  }
7826
7727
  static get watchers() { return {
7827
7728
  "isOpen": [{
@@ -8003,7 +7904,7 @@ class SdDatePickerCalendar {
8003
7904
  '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
8004
7905
  '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
8005
7906
  };
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 => {
7907
+ 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
7908
  const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
8008
7909
  const isToday = cell.inCurrentMonth && today === cell.date;
8009
7910
  const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -8074,10 +7975,10 @@ class SdDatePickerTrigger {
8074
7975
  ? DATEPICKER_COLORS.icon.disabled
8075
7976
  : DATEPICKER_COLORS.icon.default,
8076
7977
  };
8077
- return (hAsync("div", { key: '48f426459dfa50a5fab8e8e9c597b9a3c3f011c1', class: {
7978
+ return (hAsync("div", { key: 'f541c11d4e7385993628e10f0eeb7a339f80e1f6', class: {
8078
7979
  'sd-date-picker-trigger': true,
8079
7980
  '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)));
7981
+ }, 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
7982
  }
8082
7983
  static get style() { return sdDatePickerTriggerCss(); }
8083
7984
  static get cmpMeta() { return {
@@ -8497,7 +8398,7 @@ class SdDateRangePickerCalendar {
8497
8398
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
8498
8399
  '--range-divider': RANGE_LAYOUT.divider,
8499
8400
  };
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)))));
8401
+ 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
8402
  }
8502
8403
  static get watchers() { return {
8503
8404
  "value": [{
@@ -8625,9 +8526,9 @@ const PRESET_DIVIDER_COLORS = {
8625
8526
  danger: buttonTokens.button.danger.strong.dropdown.divider,
8626
8527
  danger_outline: PRESET_BORDER_COLORS.danger_outline,
8627
8528
  };
8628
- const MENU_ITEM_COLOR = systemTokens.color.content.secondary;
8529
+ const MENU_ITEM_COLOR = systemTokens.color.fg.secondary;
8629
8530
  const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
8630
- const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.content.inverse;
8531
+ const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.fg.inverse;
8631
8532
  const PRESET_MENU_ITEM_COLORS = {
8632
8533
  primary: MENU_ITEM_COLOR,
8633
8534
  secondary: MENU_ITEM_COLOR,
@@ -8852,7 +8753,7 @@ class SdDropdownButton extends BaseDropdownEvent {
8852
8753
  }
8853
8754
  render() {
8854
8755
  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: {
8756
+ 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
8757
  '--sd-dropdown-button-bg': config.color,
8857
8758
  '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
8858
8759
  '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -8862,10 +8763,10 @@ class SdDropdownButton extends BaseDropdownEvent {
8862
8763
  '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
8863
8764
  '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
8864
8765
  '--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: {
8766
+ } }, 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
8767
  'sd-dropdown-button__trigger-icon': true,
8867
8768
  '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)));
8769
+ }, "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
8770
  }
8870
8771
  static get watchers() { return {
8871
8772
  "isOpen": [{
@@ -8965,14 +8866,11 @@ const FIELD_LABEL_SIZE_MAP = {
8965
8866
  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
8867
 
8967
8868
  const FORM_PARENT_TAGS = [
8968
- 'sd-select',
8969
- 'sd-select-multiple',
8970
- 'sd-select-multiple-group',
8971
8869
  'sd-input',
8972
8870
  'sd-barcode-input',
8973
8871
  'sd-textarea',
8974
8872
  'sd-number-input',
8975
- 'sd-select-v2',
8873
+ 'sd-select',
8976
8874
  'sd-file-picker',
8977
8875
  'sd-date-picker',
8978
8876
  'sd-date-range-picker',
@@ -9136,20 +9034,20 @@ class SdField {
9136
9034
  : {}),
9137
9035
  }
9138
9036
  : {};
9139
- return (hAsync("div", { key: '218df97b257b97f4801a31a11d4cf2072f981f07', class: {
9037
+ return (hAsync("div", { key: 'f7cec98818159adf5fd398bd15547ed1ec555092', class: {
9140
9038
  'sd-field': true,
9141
9039
  'sd-field--has-label': !!this.label,
9142
9040
  'sd-field--has-addon': !!addon,
9143
9041
  [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
9042
+ }, 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
9043
  ? {
9146
9044
  width: typeof this.width === 'number' ? `${this.width}px` : this.width,
9147
9045
  flex: 'none',
9148
9046
  }
9149
- : {} }, hAsync("div", { key: '1f4176fb04ba648fc2971904daa88974a4526868', class: {
9047
+ : {} }, hAsync("div", { key: '0dbb6cbe768bac1c64d72d37d270805e16936e24', class: {
9150
9048
  'sd-field__control': true,
9151
9049
  '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))))));
9050
+ } }, 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
9051
  }
9154
9052
  renderLabel(label) {
9155
9053
  if (!label)
@@ -9295,7 +9193,7 @@ class SdFilePicker {
9295
9193
  if (this.fileInputRef) {
9296
9194
  this.fileInputRef.value = '';
9297
9195
  }
9298
- await this.formField?.sdReset();
9196
+ await this.formField?.sdResetValidation();
9299
9197
  }
9300
9198
  async sdResetValidate() {
9301
9199
  await this.formField?.sdResetValidation();
@@ -9628,7 +9526,7 @@ class SdFloatingPopover {
9628
9526
  }
9629
9527
  }
9630
9528
  render() {
9631
- return hAsync("slot", { key: '2ee14400df156cb766c0f88b77bc232263b3c7e2' });
9529
+ return hAsync("slot", { key: '2383aafb9b01881f06e4fc97c5903c19453b8b4c' });
9632
9530
  }
9633
9531
  static get style() { return sdFloatingPortalCss(); }
9634
9532
  static get cmpMeta() { return {
@@ -9901,7 +9799,7 @@ class SdGhostButton {
9901
9799
  ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
9902
9800
  : GHOST_BUTTON_CONTENT_COLORS[this.intent];
9903
9801
  const accessibleName = this.ariaLabel.trim() || undefined;
9904
- return (hAsync("button", { key: 'd7f6fcbed3526ffb8b90b205dbe2bbf55abf03a0', class: {
9802
+ return (hAsync("button", { key: '57793e0911fc49c62ab627bd7234caf9c0a04097', class: {
9905
9803
  'sd-ghost-button': true,
9906
9804
  'sd-ghost-button--disabled': this.disabled,
9907
9805
  }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -9910,7 +9808,7 @@ class SdGhostButton {
9910
9808
  '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
9911
9809
  '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
9912
9810
  '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
9913
- }, onClick: this.handleClick }, hAsync("sd-icon", { key: '9efc3a3fbf7878a9a50b2efbf054b335d9cddfe0', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9811
+ }, onClick: this.handleClick }, hAsync("sd-icon", { key: 'cf81a34495eacad4052ad7bbd5cba837b905610b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9914
9812
  }
9915
9813
  static get style() { return sdGhostButtonCss(); }
9916
9814
  static get cmpMeta() { return {
@@ -9992,7 +9890,7 @@ var guideTokens = {
9992
9890
  };
9993
9891
 
9994
9892
  const { button, contents} = guideTokens.guide;
9995
- const NOTION_ICON_COLOR = systemTokens.color.content.primary;
9893
+ const NOTION_ICON_COLOR = systemTokens.color.fg.primary;
9996
9894
  const GUIDE_CONFIG = {
9997
9895
  button: {
9998
9896
  height: `${button.height}px`,
@@ -10821,12 +10719,12 @@ class SdInput {
10821
10719
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
10822
10720
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
10823
10721
  };
10824
- 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 () => {
10722
+ 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 () => {
10825
10723
  if (this.disabled)
10826
10724
  return;
10827
10725
  this.internalValue = '';
10828
10726
  await this.formField?.sdValidate();
10829
- } })), 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: () => {
10727
+ } })), 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: () => {
10830
10728
  if (this.disabled)
10831
10729
  return;
10832
10730
  this.passwordVisible = !this.passwordVisible;
@@ -10895,7 +10793,7 @@ const LINEAR_PROGRESS_COLORS = {
10895
10793
  track: progressTokens.progress.color.track,
10896
10794
  label: progressTokens.progress.color.label,
10897
10795
  valueOnFill: progressTokens.progress.bar.text,
10898
- valueZero: systemTokens.color.content.tertiary,
10796
+ valueZero: systemTokens.color.fg.tertiary,
10899
10797
  };
10900
10798
  const LINEAR_PROGRESS_FILL_COLOR_MAP = {
10901
10799
  primary: progressTokens.progress.active.color,
@@ -10936,7 +10834,7 @@ class SdLinearProgress {
10936
10834
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
10937
10835
  };
10938
10836
  const valueText = `${Math.round(this.clampedValue)}%`;
10939
- 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)));
10837
+ 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)));
10940
10838
  }
10941
10839
  static get style() { return sdLinearProgressCss(); }
10942
10840
  static get cmpMeta() { return {
@@ -10970,10 +10868,10 @@ class SdLoadingContainer {
10970
10868
  this.visible = false;
10971
10869
  }
10972
10870
  render() {
10973
- return (hAsync("div", { key: '14ae9c222f613129ac2819ee46b7dd0a248b93da', class: {
10871
+ return (hAsync("div", { key: 'a83b33262d59ecba12b7db9ed6bfe9f1fea4a54a', class: {
10974
10872
  'sd-loading-container': true,
10975
10873
  'sd-loading-container--visible': this.visible,
10976
- }, "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)))));
10874
+ }, "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)))));
10977
10875
  }
10978
10876
  static get style() { return sdLoadingContainerCss(); }
10979
10877
  static get cmpMeta() { return {
@@ -11066,7 +10964,7 @@ class SdLoadingModal {
11066
10964
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
11067
10965
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
11068
10966
  };
11069
- 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 }))))));
10967
+ 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 }))))));
11070
10968
  }
11071
10969
  static get style() { return sdLoadingModalCss(); }
11072
10970
  static get cmpMeta() { return {
@@ -11859,12 +11757,12 @@ class SdNumberInput {
11859
11757
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
11860
11758
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
11861
11759
  };
11862
- 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()
11760
+ 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()
11863
11761
  ? NUMBER_INPUT_STEPPER.icon.disabled
11864
- : 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: {
11762
+ : 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: {
11865
11763
  textAlign: this.useButton ? 'center' : 'right',
11866
11764
  ...this.inputStyle,
11867
- } }), 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()
11765
+ } }), 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()
11868
11766
  ? NUMBER_INPUT_STEPPER.icon.disabled
11869
11767
  : NUMBER_INPUT_STEPPER.icon.default }))))));
11870
11768
  }
@@ -12071,13 +11969,13 @@ class SdPagination {
12071
11969
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
12072
11970
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
12073
11971
  };
12074
- return (hAsync("div", { key: '386fdd2d1c0b5a7284c299201f19fd3384670ab1', class: {
11972
+ return (hAsync("div", { key: 'e648886fbec4723b7be767d9e1bfc04004cca234', class: {
12075
11973
  'sd-pagination': true,
12076
11974
  'sd-pagination--simple': this.simple,
12077
- }, 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: {
11975
+ }, 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: {
12078
11976
  'sd-pagination__item': true,
12079
11977
  'sd-pagination__item--selected': this.currentPage === n,
12080
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '86389ea83d2965efdd938d2f9b2e2c3469f05fe8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
11978
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '1975d14028485438a728b23d717abfcde8722fcf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
12081
11979
  }
12082
11980
  static get style() { return sdPaginationCss(); }
12083
11981
  static get cmpMeta() { return {
@@ -12413,7 +12311,7 @@ class SdPortal {
12413
12311
  this.close.emit();
12414
12312
  }
12415
12313
  render() {
12416
- return hAsync("slot", { key: '6fa44238ddbc26c355ddde102d2639db7dd50b94' });
12314
+ return hAsync("slot", { key: '28858d6833d8ff7f86295f7e445d51ffc84db99a' });
12417
12315
  }
12418
12316
  static get watchers() { return {
12419
12317
  "open": [{
@@ -12437,79 +12335,6 @@ class SdPortal {
12437
12335
  }; }
12438
12336
  }
12439
12337
 
12440
- 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}`;
12441
-
12442
- class SdProgress {
12443
- constructor(hostRef) {
12444
- registerInstance(this, hostRef);
12445
- }
12446
- type = 'bar';
12447
- error = false;
12448
- percentage = 0;
12449
- size = 80;
12450
- strokeWidth = 12;
12451
- label;
12452
- statusColor = {
12453
- default: '#aaaaaa',
12454
- progress: '#0075ff',
12455
- complete: '#12B553',
12456
- error: '#FB4444',
12457
- };
12458
- get progressPercentage() {
12459
- if (this.error)
12460
- return 100;
12461
- return this.percentage;
12462
- }
12463
- get progressStatus() {
12464
- if (this.error)
12465
- return 'error';
12466
- switch (this.percentage) {
12467
- case 100:
12468
- return 'complete';
12469
- case 0:
12470
- return 'default';
12471
- default:
12472
- return 'progress';
12473
- }
12474
- }
12475
- get progressColor() {
12476
- return this.statusColor[this.progressStatus];
12477
- }
12478
- render() {
12479
- return (hAsync("div", { key: '34c1ecf23c120f53595529004ed3d6818896e816', style: {
12480
- '--progress-color': this.progressColor,
12481
- '--progress-percentage': `${this.progressPercentage}%`,
12482
- } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '29461b9428416262c10b1917eaee4e0091d290dc', class: "sd-progress__label" }, this.label)));
12483
- }
12484
- renderBarProgress() {
12485
- 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, "%")));
12486
- }
12487
- renderSpinnerProgress() {
12488
- const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
12489
- const circumference = 2 * Math.PI * radius; // 원의 둘레
12490
- const offset = circumference - (this.progressPercentage / 100) * circumference; // 진행률에 따른 offset
12491
- const progressBgSize = `${this.size}px`;
12492
- const progressSize = `${this.size / 2}px`;
12493
- 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, " %")));
12494
- }
12495
- static get style() { return sdProgressCss(); }
12496
- static get cmpMeta() { return {
12497
- "$flags$": 512,
12498
- "$tagName$": "sd-progress",
12499
- "$members$": {
12500
- "type": [1],
12501
- "error": [4],
12502
- "percentage": [2],
12503
- "size": [2],
12504
- "strokeWidth": [2, "stroke-width"],
12505
- "label": [1]
12506
- },
12507
- "$listeners$": undefined,
12508
- "$lazyBundleId$": "-",
12509
- "$attrsToReflect$": []
12510
- }; }
12511
- }
12512
-
12513
12338
  const radio = {
12514
12339
  size: "16",
12515
12340
  borderWidth: "1",
@@ -12900,1891 +12725,158 @@ class SdRadioGroup {
12900
12725
  }; }
12901
12726
  }
12902
12727
 
12903
- class SelectKeyboardNavigation {
12904
- isSearchable;
12905
- filteredOptions;
12906
- constructor(isSearchable, filteredOptions) {
12907
- this.isSearchable = isSearchable;
12908
- this.filteredOptions = filteredOptions;
12909
- }
12910
- getNavigationBounds() {
12911
- return {
12912
- minIndex: this.isSearchable ? -1 : 0,
12913
- maxIndex: this.filteredOptions.length - 1,
12914
- };
12915
- }
12916
- getNextIndex(currentIndex, direction) {
12917
- const { minIndex, maxIndex } = this.getNavigationBounds();
12918
- if (direction === 'ArrowUp') {
12919
- return currentIndex > minIndex ? currentIndex - 1 : maxIndex;
12920
- }
12921
- else {
12922
- return currentIndex < maxIndex ? currentIndex + 1 : minIndex;
12923
- }
12924
- }
12925
- }
12926
-
12927
- 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)}`;
12728
+ const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
12928
12729
 
12929
- /**
12930
- * @deprecated sd-select-v2를 사용하세요.
12931
- */
12932
- class SdSelect extends BaseDropdownEvent {
12730
+ class SdSelect {
12933
12731
  constructor(hostRef) {
12934
- super();
12935
12732
  registerInstance(this, hostRef);
12936
12733
  this.update = createEvent(this, "sdUpdate", 7);
12937
12734
  this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
12938
12735
  }
12736
+ static VIEWPORT_PADDING = 20;
12737
+ static PORTAL_OFFSET_Y = 4;
12738
+ static CLOSE_ANIMATION_DURATION = 150;
12939
12739
  get el() { return getElement(this); }
12940
- // props
12740
+ type = 'default';
12941
12741
  value = null;
12942
12742
  options = [];
12943
12743
  placeholder = '선택';
12944
- optionPlaceholder = '선택지가 없습니다.';
12945
- width = '200px';
12744
+ maxDropdownWidth = '640px';
12946
12745
  dropdownHeight = '260px';
12947
- autoFocus = false;
12948
12746
  disabled = false;
12949
- clearable = false;
12950
- searchable = false;
12951
- // props - label
12952
12747
  label = '';
12953
12748
  labelWidth = '';
12954
12749
  addonLabel = '';
12955
12750
  addonAlign = 'start';
12751
+ error = false;
12752
+ hint = '';
12753
+ errorMessage = '';
12754
+ rules = [];
12956
12755
  icon = undefined;
12957
12756
  labelTooltip = '';
12958
12757
  labelTooltipProps = null;
12959
- // props - form
12960
- rules = [];
12961
- error = false;
12962
- // props - custom slots
12963
- optionRenderer;
12964
- // states
12758
+ emitValue = false;
12759
+ width = '';
12760
+ useSearch = false;
12761
+ allSelectedLabel = '전체';
12762
+ useSelectAll = false;
12965
12763
  isOpen = false;
12966
- itemIndex = -1;
12967
- isScrolled = false;
12968
- // events
12764
+ isAnimatingOut = false;
12765
+ triggerWidth = '200px';
12766
+ resolvedDropdownHeight = '260px';
12767
+ resolvedMaxDropdownWidth = '640px';
12768
+ focused = false;
12769
+ hovered = false;
12969
12770
  update;
12970
12771
  dropDownShow;
12971
- selectRef;
12972
- triggerRef;
12973
- formField;
12974
- filteredOptions = [];
12975
- dropDownWidth = '200px';
12976
- name = nanoid$1();
12772
+ async sdFocus() {
12773
+ if (this.disabled)
12774
+ return;
12775
+ await this.triggerComponentRef?.sdFocus();
12776
+ }
12977
12777
  async sdOpen() {
12778
+ // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
12779
+ await new Promise(resolve => setTimeout(resolve, 0));
12780
+ if (this.disabled || this.isOpen)
12781
+ return;
12782
+ this.prepareDropdownGeometry();
12783
+ if (this.closeAnimationTimer)
12784
+ clearTimeout(this.closeAnimationTimer);
12785
+ this.isAnimatingOut = false;
12978
12786
  this.isOpen = true;
12979
12787
  }
12980
- async sdValidate() {
12981
- this.formField?.sdValidate();
12982
- }
12983
- async sdReset() {
12984
- this.formField?.sdReset();
12985
- }
12986
- async sdResetValidate() {
12987
- this.formField?.sdResetValidation();
12788
+ triggerRef;
12789
+ triggerComponentRef;
12790
+ closeAnimationTimer;
12791
+ name = nanoid$1();
12792
+ triggerHasFocus = false;
12793
+ watchIsOpen(newValue) {
12794
+ this.syncFocusedState(newValue);
12795
+ this.dropDownShow.emit({ isOpen: newValue });
12988
12796
  }
12989
- async sdFocus() {
12990
- this.formField?.sdFocus();
12797
+ get isMulti() {
12798
+ return this.type === 'multi' || this.type === 'multi_depth';
12991
12799
  }
12992
- async isOpenChanged() {
12993
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
12994
- this.onDropdownToggle(this.isOpen);
12995
- this.dropDownShow?.emit({ isOpen: this.isOpen });
12996
- if (this.isOpen === false) {
12997
- await this.formField?.sdValidate();
12800
+ get displayText() {
12801
+ if (this.isMulti) {
12802
+ if (!Array.isArray(this.value) || this.value.length === 0)
12803
+ return '';
12804
+ const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
12805
+ const selected = this.getSelectedOptions();
12806
+ const allSelected = nonDisabledLeaves.length > 0 &&
12807
+ nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
12808
+ if (allSelected)
12809
+ return this.allSelectedLabel ?? '전체';
12810
+ const flat = this.flattenOptions(this.options);
12811
+ return this.value
12812
+ .map(item => {
12813
+ if (item != null && typeof item === 'object') {
12814
+ const opt = item;
12815
+ return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
12816
+ }
12817
+ return flat.find(o => o.value === item)?.label ?? '';
12818
+ })
12819
+ .filter(Boolean)
12820
+ .join(', ');
12998
12821
  }
12999
- }
13000
- componentWillLoad() {
13001
- this.filteredOptions = this.options;
13002
- this.dropDownWidth = this.width;
13003
- this.initializeEvent();
13004
- }
13005
- componentDidLoad() {
13006
- if (this.autoFocus) {
13007
- this.selectRef?.focus();
12822
+ if (this.value == null)
12823
+ return '';
12824
+ if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
12825
+ return this.value.label ?? '';
13008
12826
  }
12827
+ const flat = this.flattenOptions(this.options);
12828
+ const found = flat.find(o => o.value === this.value);
12829
+ return found?.label ?? '';
13009
12830
  }
13010
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
13011
- componentDidRender() {
13012
- const trigger = this.triggerRef;
13013
- const rect = trigger?.getBoundingClientRect();
13014
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
12831
+ flattenOptions(options) {
12832
+ return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
13015
12833
  }
13016
- disconnectedCallback() {
13017
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
12834
+ getNonDisabledLeaves(options) {
12835
+ return options.flatMap(o => {
12836
+ if (o.disabled)
12837
+ return [];
12838
+ if (o.children)
12839
+ return this.getNonDisabledLeaves(o.children);
12840
+ return [o];
12841
+ });
13018
12842
  }
13019
- handleDocumentClick(event) {
13020
- if (!this.selectRef?.contains(event.target)) {
13021
- this.isOpen = false;
12843
+ getSelectedOptions() {
12844
+ const val = this.value;
12845
+ if (!val || !Array.isArray(val))
12846
+ return [];
12847
+ if (this.emitValue) {
12848
+ return val
12849
+ .map(v => this.findOriginalOption(v, this.options))
12850
+ .filter((o) => !!o);
13022
12851
  }
12852
+ return val;
13023
12853
  }
13024
- handleDocumentKeydown(keyboardEvent) {
13025
- keyboardEvent.stopPropagation();
13026
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13027
- if (!targetKey.includes(keyboardEvent.key))
13028
- return;
13029
- keyboardEvent.preventDefault();
13030
- switch (keyboardEvent.key) {
13031
- case 'ArrowDown':
13032
- case 'ArrowUp':
13033
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13034
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13035
- this.itemIndex = nextIndex;
13036
- break;
13037
- case 'Enter':
13038
- const selectedOption = this.filteredOptions[this.itemIndex];
13039
- if (selectedOption && !selectedOption.disabled) {
13040
- this.value = selectedOption.value;
13041
- this.isOpen = false;
13042
- }
13043
- break;
13044
- case 'Escape':
13045
- this.isOpen = false;
13046
- break;
13047
- }
12854
+ toMultiValue(options) {
12855
+ return this.emitValue ? options.map(o => o.value) : options;
13048
12856
  }
13049
- getSelectedOption() {
13050
- return this.options.find(option => option.value === this.value);
12857
+ parsePixelValue(value, fallback) {
12858
+ const parsed = Number.parseFloat(value);
12859
+ return Number.isFinite(parsed) ? parsed : fallback;
13051
12860
  }
13052
- closeDropdown() {
13053
- this.isOpen = false;
12861
+ updateDropdownViewportConstraints() {
12862
+ if (!this.triggerRef)
12863
+ return;
12864
+ const triggerRect = this.triggerRef.getBoundingClientRect();
12865
+ const viewportPadding = SdSelect.VIEWPORT_PADDING;
12866
+ const offsetY = SdSelect.PORTAL_OFFSET_Y;
12867
+ const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
12868
+ const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
12869
+ const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
12870
+ const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
12871
+ const availableHeight = Math.max(availableBelow, availableAbove);
12872
+ const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
12873
+ this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
12874
+ this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
13054
12875
  }
13055
- handleTriggerClick = (event) => {
13056
- event.stopPropagation();
13057
- if (!this.disabled) {
13058
- this.isOpen = !this.isOpen;
13059
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13060
- }
13061
- };
13062
- handleOptionClick = (detail) => {
13063
- const { option, event } = detail;
13064
- event.stopPropagation();
13065
- if (!option.disabled) {
13066
- this.value = option.value;
13067
- this.isOpen = false;
13068
- const selectedOption = this.getSelectedOption();
13069
- this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
13070
- }
13071
- };
13072
- render() {
13073
- 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: {
13074
- 'sd-select': true,
13075
- 'sd-select--disabled': this.disabled,
13076
- 'sd-select--error': !!this.error,
13077
- 'sd-select--label': !!this.label,
13078
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13079
- }
13080
- renderTrigger() {
13081
- const selectedOption = this.getSelectedOption();
13082
- 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) => {
13083
- event.stopPropagation();
13084
- this.value = null;
13085
- await this.formField?.sdValidate();
13086
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
13087
- }
13088
- renderDropdown() {
13089
- if (this.isOpen === false)
13090
- return null;
13091
- const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||
13092
- this.selectRef);
13093
- 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) })));
13094
- }
13095
- static get watchers() { return {
13096
- "isOpen": [{
13097
- "isOpenChanged": 0
13098
- }]
13099
- }; }
13100
- static get style() { return sdSelectCss(); }
13101
- static get cmpMeta() { return {
13102
- "$flags$": 512,
13103
- "$tagName$": "sd-select",
13104
- "$members$": {
13105
- "value": [1032],
13106
- "options": [1040],
13107
- "placeholder": [1],
13108
- "optionPlaceholder": [1, "option-placeholder"],
13109
- "width": [1],
13110
- "dropdownHeight": [1, "dropdown-height"],
13111
- "autoFocus": [4, "auto-focus"],
13112
- "disabled": [4],
13113
- "clearable": [4],
13114
- "searchable": [4],
13115
- "label": [1],
13116
- "labelWidth": [8, "label-width"],
13117
- "addonLabel": [1, "addon-label"],
13118
- "addonAlign": [1, "addon-align"],
13119
- "icon": [16],
13120
- "labelTooltip": [1, "label-tooltip"],
13121
- "labelTooltipProps": [16],
13122
- "rules": [16],
13123
- "error": [4],
13124
- "optionRenderer": [16],
13125
- "name": [1],
13126
- "isOpen": [32],
13127
- "itemIndex": [32],
13128
- "isScrolled": [32],
13129
- "sdOpen": [64],
13130
- "sdValidate": [64],
13131
- "sdReset": [64],
13132
- "sdResetValidate": [64],
13133
- "sdFocus": [64]
13134
- },
13135
- "$listeners$": undefined,
13136
- "$lazyBundleId$": "-",
13137
- "$attrsToReflect$": []
13138
- }; }
13139
- }
13140
-
13141
- 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}`;
13142
-
13143
- class SdSelectDropdown {
13144
- constructor(hostRef) {
13145
- registerInstance(this, hostRef);
13146
- this.optionClick = createEvent(this, "sdOptionClick", 7);
13147
- this.optionFiltered = createEvent(this, "sdOptionFiltered", 7);
13148
- this.scroll = createEvent(this, "sdScroll", 7);
13149
- }
13150
- itemIndex;
13151
- value = null;
13152
- options;
13153
- width;
13154
- dropdownHeight;
13155
- searchable;
13156
- optionPlaceholder;
13157
- useCheckbox = false;
13158
- useAll = false;
13159
- filteredOptions = [];
13160
- searchText = null;
13161
- isScrolled = false;
13162
- isDropdownReady = false;
13163
- optionClick;
13164
- optionFiltered;
13165
- scroll;
13166
- filteredOptionsChanged(newValue) {
13167
- this.optionFiltered.emit(newValue);
13168
- }
13169
- searchTextChanged() {
13170
- this.filterOptions();
13171
- }
13172
- async itemIndexChanged(newIndex, oldIndex) {
13173
- if (this.searchable) {
13174
- const searchInput = await this.getNativeInputElement();
13175
- if (this.itemIndex === -1) {
13176
- searchInput?.focus({ preventScroll: true });
13177
- return;
13178
- }
13179
- else if (searchInput?.matches(':focus')) {
13180
- searchInput?.blur();
13181
- }
13182
- }
13183
- const optionElements = this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];
13184
- const currentItem = optionElements?.[this.itemIndex];
13185
- if (!currentItem)
13186
- return;
13187
- this.optionRef = currentItem;
13188
- const isOptionDisabled = await this.optionRef.sdIsDisabled();
13189
- if (isOptionDisabled) {
13190
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
13191
- return;
13192
- }
13193
- this.scrollToOption(currentItem);
13194
- }
13195
- componentWillLoad() {
13196
- this.filteredOptions = this.options;
13197
- // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
13198
- requestAnimationFrame(() => {
13199
- requestAnimationFrame(async () => {
13200
- const selectedOptions = this.getSelectedOption();
13201
- // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
13202
- if (selectedOptions) {
13203
- const selectedIndex = Array.isArray(selectedOptions)
13204
- ? this.options.indexOf(selectedOptions[0])
13205
- : this.options.indexOf(selectedOptions);
13206
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option') || []);
13207
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
13208
- const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
13209
- // 선택된 옵션이 화면 가운데에 오도록 index 조정
13210
- const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
13211
- const currentItem = optionElements?.[targetIndex];
13212
- if (currentItem) {
13213
- this.scrollToOption(currentItem, 'instant');
13214
- }
13215
- }
13216
- this.isDropdownReady = true;
13217
- if (this.searchable) {
13218
- const searchInput = await this.getNativeInputElement();
13219
- if (searchInput) {
13220
- requestAnimationFrame(() => {
13221
- searchInput.focus({ preventScroll: true });
13222
- });
13223
- }
13224
- }
13225
- });
13226
- });
13227
- }
13228
- dropdownRef;
13229
- searchRef;
13230
- optionRef;
13231
- get dropdownSize() {
13232
- return {
13233
- '--select-dropdown-width': this.width || '200px',
13234
- '--select-dropdown-height': this.dropdownHeight || '260px',
13235
- };
13236
- }
13237
- filterOptions() {
13238
- if (!this.searchText || this.searchText.trim() === '') {
13239
- // 검색어가 없으면 전체 옵션 표시
13240
- this.filteredOptions = this.options;
13241
- }
13242
- else {
13243
- // 검색어가 있으면 필터링
13244
- this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
13245
- }
13246
- }
13247
- getSelectedOption() {
13248
- if (typeof this.value !== 'object') {
13249
- return this.options.find(option => option.value === this.value);
13250
- }
13251
- return this.options.filter(option => this.value?.includes(option));
13252
- }
13253
- isOptionSelected(value) {
13254
- if (Array.isArray(this.value)) {
13255
- return this.value.some(selected => selected.value === value);
13256
- }
13257
- return value === this.value;
13258
- }
13259
- async getNativeInputElement() {
13260
- if (this.searchRef) {
13261
- return this.searchRef.sdGetNativeElement();
13262
- }
13263
- return null;
13264
- }
13265
- scrollToOption(optionElement, scrollBehavior = 'smooth') {
13266
- if (!this.dropdownRef || !optionElement)
13267
- return;
13268
- const dropdown = this.dropdownRef;
13269
- const optionTop = optionElement.offsetTop;
13270
- const optionHeight = optionElement.offsetHeight;
13271
- const dropdownScrollTop = dropdown.scrollTop;
13272
- const dropdownHeight = dropdown.clientHeight;
13273
- const searchContainer = dropdown.querySelector('.sd-select-search-input');
13274
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
13275
- const visibleTop = dropdownScrollTop + searchOffset;
13276
- const visibleBottom = dropdownScrollTop + dropdownHeight;
13277
- if (optionTop < visibleTop) {
13278
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });
13279
- }
13280
- else if (optionTop + optionHeight > visibleBottom) {
13281
- dropdown.scrollTo({
13282
- top: optionTop + optionHeight - dropdownHeight + searchOffset,
13283
- behavior: scrollBehavior,
13284
- });
13285
- }
13286
- }
13287
- handleDropdownScroll = (event) => {
13288
- const target = event.target;
13289
- const scrollTop = target.scrollTop;
13290
- // 스크롤이 조금이라도 되면 그림자 표시
13291
- this.isScrolled = scrollTop > 0;
13292
- };
13293
- render() {
13294
- return (hAsync("div", { key: 'a831a99130074fa072534d76f4b0db7169d906e2', class: {
13295
- 'sd-select-dropdown': true,
13296
- 'sd-select-dropdown--ready': this.isDropdownReady,
13297
- }, 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)))));
13298
- }
13299
- static get watchers() { return {
13300
- "filteredOptions": [{
13301
- "filteredOptionsChanged": 0
13302
- }],
13303
- "searchText": [{
13304
- "searchTextChanged": 0
13305
- }],
13306
- "itemIndex": [{
13307
- "itemIndexChanged": 0
13308
- }]
13309
- }; }
13310
- static get style() { return sdSelectDropdownCss(); }
13311
- static get cmpMeta() { return {
13312
- "$flags$": 772,
13313
- "$tagName$": "sd-select-dropdown",
13314
- "$members$": {
13315
- "itemIndex": [1026, "item-index"],
13316
- "value": [8],
13317
- "options": [16],
13318
- "width": [1],
13319
- "dropdownHeight": [1, "dropdown-height"],
13320
- "searchable": [4],
13321
- "optionPlaceholder": [1, "option-placeholder"],
13322
- "useCheckbox": [4, "use-checkbox"],
13323
- "useAll": [4, "use-all"],
13324
- "filteredOptions": [32],
13325
- "searchText": [32],
13326
- "isScrolled": [32],
13327
- "isDropdownReady": [32]
13328
- },
13329
- "$listeners$": undefined,
13330
- "$lazyBundleId$": "-",
13331
- "$attrsToReflect$": []
13332
- }; }
13333
- }
13334
-
13335
- 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}`;
13336
-
13337
- /**
13338
- * @deprecated sd-select-v2 (name="default_depth")를 사용하세요.
13339
- */
13340
- class SdSelectGroup extends BaseDropdownEvent {
13341
- constructor(hostRef) {
13342
- super();
13343
- registerInstance(this, hostRef);
13344
- this.update = createEvent(this, "sdUpdate", 7);
13345
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13346
- }
13347
- get el() { return getElement(this); }
13348
- // props
13349
- value = null;
13350
- options = [];
13351
- placeholder = '선택';
13352
- optionPlaceholder = '선택지가 없습니다.';
13353
- width = '200px';
13354
- dropdownHeight = '260px';
13355
- autoFocus = false;
13356
- disabled = false;
13357
- clearable = false;
13358
- searchable = false;
13359
- // props - label
13360
- label = '';
13361
- labelWidth = '';
13362
- addonLabel = '';
13363
- addonAlign = 'start';
13364
- icon = undefined;
13365
- labelTooltip = '';
13366
- labelTooltipProps = null;
13367
- // props - form
13368
- rules = [];
13369
- error = false;
13370
- // props - custom styles
13371
- containerStyle = {};
13372
- triggerStyle = {};
13373
- dropdownStyle = {};
13374
- optionStyle = {};
13375
- labelStyle = {};
13376
- // props - custom slots
13377
- optionRenderer;
13378
- // states
13379
- filteredOptions = [];
13380
- isOpen = false;
13381
- searchText = null;
13382
- itemIndex = -1;
13383
- isScrolled = false;
13384
- isDropdownReady = false;
13385
- // events
13386
- update;
13387
- dropDownShow;
13388
- selectRef;
13389
- searchRef;
13390
- triggerRef;
13391
- optionRef;
13392
- dropdownRef;
13393
- formField;
13394
- dropDownWidth = '200px';
13395
- name = nanoid$1();
13396
- async sdOpen() {
13397
- await new Promise(resolve => setTimeout(resolve, 0));
13398
- this.isOpen = true;
13399
- }
13400
- async sdValidate() {
13401
- this.formField?.sdValidate();
13402
- }
13403
- async sdReset() {
13404
- this.formField?.sdReset();
13405
- }
13406
- async sdResetValidate() {
13407
- this.formField?.sdResetValidation();
13408
- }
13409
- async sdFocus() {
13410
- this.formField?.sdFocus();
13411
- }
13412
- optionsChanged() {
13413
- this.filteredOptions = this.options;
13414
- this.filterOptions();
13415
- }
13416
- searchTextChanged() {
13417
- this.filterOptions();
13418
- }
13419
- async itemIndexChanged(newIndex, oldIndex) {
13420
- if (this.searchable) {
13421
- const searchInput = await this.getNativeInputElement();
13422
- if (this.itemIndex === -1) {
13423
- searchInput?.focus({ preventScroll: true });
13424
- return;
13425
- }
13426
- else if (searchInput?.matches(':focus')) {
13427
- searchInput?.blur();
13428
- }
13429
- }
13430
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
13431
- const currentItem = optionElements?.[this.itemIndex];
13432
- if (!currentItem || !this.isOpen)
13433
- return;
13434
- this.optionRef = currentItem;
13435
- const isOptionDisabled = await this.optionRef.isDisabled();
13436
- if (isOptionDisabled) {
13437
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
13438
- return;
13439
- }
13440
- this.scrollToOption(currentItem);
13441
- }
13442
- async isOpenChanged() {
13443
- this.onDropdownToggle(this.isOpen);
13444
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13445
- this.isDropdownReady = false;
13446
- if (this.isOpen === false) {
13447
- await this.formField?.sdValidate();
13448
- return;
13449
- }
13450
- requestAnimationFrame(() => {
13451
- requestAnimationFrame(async () => {
13452
- const selectedOption = this.getSelectedOption();
13453
- if (selectedOption) {
13454
- const selectedIndex = this.filteredOptions.indexOf(selectedOption);
13455
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
13456
- const targetIndex = Math.min(selectedIndex + 4, optionElements.length - 1);
13457
- const currentItem = optionElements?.[targetIndex];
13458
- if (currentItem) {
13459
- this.scrollToOption(currentItem);
13460
- }
13461
- }
13462
- this.isDropdownReady = true;
13463
- if (this.searchable) {
13464
- const searchInput = await this.getNativeInputElement();
13465
- if (searchInput) {
13466
- requestAnimationFrame(() => {
13467
- searchInput.focus({ preventScroll: true });
13468
- });
13469
- }
13470
- }
13471
- });
13472
- });
13473
- }
13474
- componentWillLoad() {
13475
- this.filteredOptions = this.options;
13476
- this.dropDownWidth = this.width;
13477
- this.initializeEvent();
13478
- }
13479
- componentDidLoad() {
13480
- if (this.autoFocus) {
13481
- this.selectRef?.focus();
13482
- }
13483
- }
13484
- componentDidRender() {
13485
- const trigger = this.triggerRef;
13486
- const rect = trigger?.getBoundingClientRect();
13487
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
13488
- }
13489
- disconnectedCallback() {
13490
- this.cleanupEvent();
13491
- }
13492
- handleDocumentClick(event) {
13493
- if (!this.selectRef?.contains(event.target)) {
13494
- this.isOpen = false;
13495
- }
13496
- }
13497
- handleDocumentKeydown(keyboardEvent) {
13498
- keyboardEvent.stopPropagation();
13499
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13500
- if (!targetKey.includes(keyboardEvent.key))
13501
- return;
13502
- keyboardEvent.preventDefault();
13503
- switch (keyboardEvent.key) {
13504
- case 'ArrowDown':
13505
- case 'ArrowUp':
13506
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13507
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13508
- this.itemIndex = nextIndex;
13509
- break;
13510
- case 'Enter':
13511
- const selectedOption = this.filteredOptions[this.itemIndex];
13512
- if (selectedOption && !selectedOption.disabled && selectedOption.type === 'item') {
13513
- this.handleOptionSelection(selectedOption);
13514
- }
13515
- break;
13516
- case 'Escape':
13517
- this.isOpen = false;
13518
- break;
13519
- }
13520
- }
13521
- // event handlers
13522
- handleTriggerClick = (event) => {
13523
- event.stopPropagation();
13524
- if (!this.disabled) {
13525
- this.isOpen = !this.isOpen;
13526
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13527
- }
13528
- };
13529
- handleOptionClick = (detail) => {
13530
- const { option, event } = detail;
13531
- event.stopPropagation();
13532
- if (option.type === 'item') {
13533
- this.handleOptionSelection(option);
13534
- }
13535
- };
13536
- filterOptions() {
13537
- if (!this.searchText || this.searchText.trim() === '') {
13538
- this.filteredOptions = this.options;
13539
- return;
13540
- }
13541
- const searchTerm = this.searchText.toLowerCase();
13542
- const matchedOptions = new Set();
13543
- this.options.forEach(option => {
13544
- if (option.label.toLowerCase().includes(searchTerm)) {
13545
- matchedOptions.add(option);
13546
- this.addParentGroups(option, matchedOptions);
13547
- }
13548
- });
13549
- this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
13550
- }
13551
- addParentGroups(option, matchedSet) {
13552
- if (!option.parent)
13553
- return;
13554
- const parentOption = this.options.find(opt => opt.value === option.parent);
13555
- if (parentOption && !matchedSet.has(parentOption)) {
13556
- matchedSet.add(parentOption);
13557
- this.addParentGroups(parentOption, matchedSet);
13558
- }
13559
- }
13560
- getSelectedOption() {
13561
- return this.options.find(option => option.value === this.value);
13562
- }
13563
- handleDropdownScroll = (event) => {
13564
- const target = event.target;
13565
- this.isScrolled = target.scrollTop > 0;
13566
- };
13567
- async getNativeInputElement() {
13568
- if (this.searchRef) {
13569
- return this.searchRef.sdGetNativeElement();
13570
- }
13571
- return null;
13572
- }
13573
- handleOptionSelection = (option) => {
13574
- if (!option || option.disabled)
13575
- return;
13576
- this.value = option.value;
13577
- this.isOpen = false;
13578
- const selectedOption = this.getSelectedOption();
13579
- this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
13580
- };
13581
- closeDropdown() {
13582
- this.isOpen = false;
13583
- }
13584
- async scrollToOption(optionElement) {
13585
- if (!this.dropdownRef || !optionElement)
13586
- return;
13587
- requestAnimationFrame(() => {
13588
- const dropdown = this.dropdownRef;
13589
- const optionTop = optionElement.offsetTop;
13590
- const optionHeight = optionElement.offsetHeight;
13591
- const dropdownScrollTop = dropdown.scrollTop;
13592
- const dropdownHeight = dropdown.clientHeight;
13593
- const searchContainer = dropdown.querySelector('.sd-select-group__search-container');
13594
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
13595
- const visibleContentHeight = dropdownHeight - searchOffset;
13596
- const visibleTop = dropdownScrollTop + searchOffset;
13597
- const visibleBottom = dropdownScrollTop + dropdownHeight;
13598
- if (optionTop < visibleTop) {
13599
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
13600
- }
13601
- else if (optionTop + optionHeight > visibleBottom) {
13602
- dropdown.scrollTo({
13603
- top: optionTop + optionHeight - visibleContentHeight - searchOffset,
13604
- behavior: 'instant',
13605
- });
13606
- }
13607
- });
13608
- }
13609
- render() {
13610
- 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: {
13611
- 'sd-select-group': true,
13612
- 'sd-select-group--open': this.isOpen,
13613
- 'sd-select-group--disabled': this.disabled,
13614
- 'sd-select-group--label': !!this.label,
13615
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13616
- }
13617
- renderTrigger() {
13618
- const selectedOption = this.getSelectedOption();
13619
- 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) => {
13620
- event.stopPropagation();
13621
- this.value = null;
13622
- this.update?.emit({ value: null, option: null });
13623
- await this.formField?.sdValidate();
13624
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "grey_65", class: {
13625
- 'sd-select-group__arrow': true,
13626
- 'sd-select-group__arrow--open': this.isOpen,
13627
- } })));
13628
- }
13629
- renderDropdown() {
13630
- const style = {
13631
- '--select-width': this.dropDownWidth || '200px',
13632
- '--select-dropdown-height': this.dropdownHeight || '260px',
13633
- };
13634
- if (this.isOpen === false)
13635
- return null;
13636
- 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: {
13637
- 'sd-select-group__dropdown': true,
13638
- 'sd-select-group__dropdown--ready': this.isDropdownReady,
13639
- }, 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, }) => {
13640
- if (option.type !== 'item')
13641
- return;
13642
- this.handleOptionClick(detail);
13643
- }, useCheckbox: false, useIndicator: false })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
13644
- }
13645
- static get watchers() { return {
13646
- "options": [{
13647
- "optionsChanged": 0
13648
- }],
13649
- "searchText": [{
13650
- "searchTextChanged": 0
13651
- }],
13652
- "itemIndex": [{
13653
- "itemIndexChanged": 0
13654
- }],
13655
- "isOpen": [{
13656
- "isOpenChanged": 0
13657
- }]
13658
- }; }
13659
- static get style() { return sdSelectGroupCss(); }
13660
- static get cmpMeta() { return {
13661
- "$flags$": 772,
13662
- "$tagName$": "sd-select-group",
13663
- "$members$": {
13664
- "value": [1032],
13665
- "options": [1040],
13666
- "placeholder": [1],
13667
- "optionPlaceholder": [1, "option-placeholder"],
13668
- "width": [1],
13669
- "dropdownHeight": [1, "dropdown-height"],
13670
- "autoFocus": [4, "auto-focus"],
13671
- "disabled": [4],
13672
- "clearable": [4],
13673
- "searchable": [4],
13674
- "label": [1],
13675
- "labelWidth": [8, "label-width"],
13676
- "addonLabel": [1, "addon-label"],
13677
- "addonAlign": [1, "addon-align"],
13678
- "icon": [16],
13679
- "labelTooltip": [1, "label-tooltip"],
13680
- "labelTooltipProps": [16],
13681
- "rules": [16],
13682
- "error": [4],
13683
- "containerStyle": [16],
13684
- "triggerStyle": [16],
13685
- "dropdownStyle": [16],
13686
- "optionStyle": [16],
13687
- "labelStyle": [16],
13688
- "optionRenderer": [16],
13689
- "name": [1],
13690
- "filteredOptions": [32],
13691
- "isOpen": [32],
13692
- "searchText": [32],
13693
- "itemIndex": [32],
13694
- "isScrolled": [32],
13695
- "isDropdownReady": [32],
13696
- "sdOpen": [64],
13697
- "sdValidate": [64],
13698
- "sdReset": [64],
13699
- "sdResetValidate": [64],
13700
- "sdFocus": [64]
13701
- },
13702
- "$listeners$": undefined,
13703
- "$lazyBundleId$": "-",
13704
- "$attrsToReflect$": []
13705
- }; }
13706
- }
13707
-
13708
- 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)}`;
13709
-
13710
- /**
13711
- * @deprecated sd-select-v2 (name="multi")를 사용하세요.
13712
- */
13713
- class SdSelectMultiple extends BaseDropdownEvent {
13714
- constructor(hostRef) {
13715
- super();
13716
- registerInstance(this, hostRef);
13717
- this.update = createEvent(this, "sdUpdate", 7);
13718
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13719
- }
13720
- get el() { return getElement(this); }
13721
- // props
13722
- value = null;
13723
- options = [];
13724
- placeholder = '선택';
13725
- optionPlaceholder = '선택지가 없습니다.';
13726
- width = '200px';
13727
- dropdownHeight = '260px';
13728
- autoFocus = false;
13729
- disabled = false;
13730
- clearable = false;
13731
- searchable = false;
13732
- // props - select multiple specific
13733
- useAll = false;
13734
- useCheckbox = false;
13735
- // props - label
13736
- label = '';
13737
- labelWidth = '';
13738
- icon = undefined;
13739
- labelTooltip = '';
13740
- labelTooltipProps = null;
13741
- // props - form
13742
- rules = [];
13743
- error = false;
13744
- optionRenderer;
13745
- // states
13746
- isOpen = false;
13747
- itemIndex = -1;
13748
- isScrolled = false;
13749
- // events
13750
- update;
13751
- dropDownShow;
13752
- selectRef;
13753
- triggerRef;
13754
- formField;
13755
- filteredOptions = [];
13756
- dropDownWidth = '200px';
13757
- name = nanoid$1();
13758
- async sdOpen() {
13759
- this.isOpen = true;
13760
- }
13761
- async sdValidate() {
13762
- this.formField?.sdValidate();
13763
- }
13764
- async sdReset() {
13765
- this.formField?.sdReset();
13766
- }
13767
- async sdResetValidate() {
13768
- this.formField?.sdResetValidation();
13769
- }
13770
- async sdFocus() {
13771
- this.formField?.sdFocus();
13772
- }
13773
- async isOpenChanged() {
13774
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
13775
- this.onDropdownToggle(this.isOpen);
13776
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13777
- if (this.isOpen === false) {
13778
- await this.formField?.sdValidate();
13779
- }
13780
- }
13781
- componentWillLoad() {
13782
- this.filteredOptions = this.options;
13783
- this.dropDownWidth = this.width;
13784
- this.initializeEvent();
13785
- }
13786
- componentDidLoad() {
13787
- if (this.autoFocus) {
13788
- this.selectRef?.focus();
13789
- }
13790
- }
13791
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
13792
- componentDidRender() {
13793
- const trigger = this.triggerRef;
13794
- const rect = trigger?.getBoundingClientRect();
13795
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
13796
- }
13797
- disconnectedCallback() {
13798
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
13799
- }
13800
- handleDocumentClick(event) {
13801
- if (!this.selectRef?.contains(event.target)) {
13802
- this.isOpen = false;
13803
- }
13804
- }
13805
- handleDocumentKeydown(keyboardEvent) {
13806
- keyboardEvent.stopPropagation();
13807
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13808
- if (!targetKey.includes(keyboardEvent.key))
13809
- return;
13810
- keyboardEvent.preventDefault();
13811
- switch (keyboardEvent.key) {
13812
- case 'ArrowDown':
13813
- case 'ArrowUp':
13814
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13815
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13816
- this.itemIndex = nextIndex;
13817
- break;
13818
- case 'Enter':
13819
- const selectedOption = this.filteredOptions[this.itemIndex];
13820
- if (selectedOption && !selectedOption.disabled) {
13821
- this.handleOptionSelection(selectedOption);
13822
- }
13823
- break;
13824
- case 'Escape':
13825
- this.isOpen = false;
13826
- break;
13827
- }
13828
- }
13829
- handleOptionSelection = (option) => {
13830
- if (!option || option.disabled)
13831
- return;
13832
- const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
13833
- if (isAlreadySelected) {
13834
- // 이미 선택된 옵션인 경우, 선택 해제
13835
- this.value = this.value?.filter(opt => opt.value !== option.value) || null;
13836
- }
13837
- else {
13838
- // 새로운 옵션 선택
13839
- this.value = [...(this.value || []), option];
13840
- }
13841
- this.update?.emit(this.value);
13842
- };
13843
- getSelectedOption() {
13844
- return this.options.filter(option => this.value?.includes(option));
13845
- }
13846
- closeDropdown() {
13847
- this.isOpen = false;
13848
- }
13849
- handleTriggerClick = (event) => {
13850
- event.stopPropagation();
13851
- if (!this.disabled) {
13852
- this.isOpen = !this.isOpen;
13853
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13854
- }
13855
- };
13856
- handleOptionClick = (detail) => {
13857
- const { option, event } = detail;
13858
- event.stopPropagation();
13859
- this.handleOptionSelection(option);
13860
- };
13861
- render() {
13862
- 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: {
13863
- 'sd-select-multiple': true,
13864
- 'sd-select-multiple--open': this.isOpen,
13865
- 'sd-select-multiple--disabled': this.disabled,
13866
- 'sd-select-multiple--error': !!this.error,
13867
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13868
- }
13869
- renderTrigger() {
13870
- const selectedOption = this.getSelectedOption();
13871
- 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
13872
- ? this.placeholder
13873
- : 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) => {
13874
- event.stopPropagation();
13875
- this.value = null;
13876
- await this.formField?.sdValidate();
13877
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
13878
- }
13879
- renderDropdown() {
13880
- if (this.isOpen === false)
13881
- return null;
13882
- const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||
13883
- this.selectRef);
13884
- 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) })));
13885
- }
13886
- static get watchers() { return {
13887
- "isOpen": [{
13888
- "isOpenChanged": 0
13889
- }]
13890
- }; }
13891
- static get style() { return sdSelectMultipleCss(); }
13892
- static get cmpMeta() { return {
13893
- "$flags$": 512,
13894
- "$tagName$": "sd-select-multiple",
13895
- "$members$": {
13896
- "value": [1040],
13897
- "options": [1040],
13898
- "placeholder": [1],
13899
- "optionPlaceholder": [1, "option-placeholder"],
13900
- "width": [1],
13901
- "dropdownHeight": [1, "dropdown-height"],
13902
- "autoFocus": [4, "auto-focus"],
13903
- "disabled": [4],
13904
- "clearable": [4],
13905
- "searchable": [4],
13906
- "useAll": [4, "use-all"],
13907
- "useCheckbox": [4, "use-checkbox"],
13908
- "label": [1],
13909
- "labelWidth": [8, "label-width"],
13910
- "icon": [16],
13911
- "labelTooltip": [1, "label-tooltip"],
13912
- "labelTooltipProps": [16],
13913
- "rules": [16],
13914
- "error": [4],
13915
- "optionRenderer": [16],
13916
- "isOpen": [32],
13917
- "itemIndex": [32],
13918
- "isScrolled": [32],
13919
- "sdOpen": [64],
13920
- "sdValidate": [64],
13921
- "sdReset": [64],
13922
- "sdResetValidate": [64],
13923
- "sdFocus": [64]
13924
- },
13925
- "$listeners$": undefined,
13926
- "$lazyBundleId$": "-",
13927
- "$attrsToReflect$": []
13928
- }; }
13929
- }
13930
-
13931
- 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}`;
13932
-
13933
- /**
13934
- * @deprecated sd-select-v2 (name="multi_depth")를 사용하세요.
13935
- */
13936
- class SdSelectMultipleGroup extends BaseDropdownEvent {
13937
- constructor(hostRef) {
13938
- super();
13939
- registerInstance(this, hostRef);
13940
- this.update = createEvent(this, "sdUpdate", 7);
13941
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13942
- }
13943
- get el() { return getElement(this); }
13944
- // props
13945
- value = null;
13946
- options = [];
13947
- placeholder = '선택';
13948
- optionPlaceholder = '선택지가 없습니다.';
13949
- width = '200px';
13950
- dropdownHeight = '260px';
13951
- disabled = false;
13952
- clearable = false;
13953
- searchable = false;
13954
- useCheckbox = false;
13955
- useAll = false;
13956
- allCheckedLabel = '전체';
13957
- allCheckOptionLabel = '전체';
13958
- // props - label
13959
- label = '';
13960
- labelWidth = '';
13961
- icon = undefined;
13962
- labelTooltip = '';
13963
- labelTooltipProps = null;
13964
- // props - form
13965
- rules = [];
13966
- error = false;
13967
- // props - custom styles
13968
- containerStyle = {};
13969
- triggerStyle = {};
13970
- dropdownStyle = {};
13971
- optionStyle = {};
13972
- labelStyle = {};
13973
- // props - custom slots
13974
- optionRenderer;
13975
- // states
13976
- filteredOptions = [];
13977
- isOpen = false;
13978
- searchText = null;
13979
- itemIndex = -1;
13980
- isScrolled = false;
13981
- isDropdownReady = false;
13982
- // events
13983
- update;
13984
- dropDownShow;
13985
- selectRef;
13986
- searchRef;
13987
- triggerRef;
13988
- optionRef;
13989
- dropdownRef;
13990
- formField;
13991
- dropDownWidth = '200px';
13992
- name = nanoid$1();
13993
- async sdOpen() {
13994
- await new Promise(resolve => setTimeout(resolve, 0));
13995
- this.isOpen = true;
13996
- }
13997
- async sdValidate() {
13998
- this.formField?.sdValidate();
13999
- }
14000
- async sdReset() {
14001
- this.formField?.sdReset();
14002
- }
14003
- async sdResetValidate() {
14004
- this.formField?.sdResetValidation();
14005
- }
14006
- async sdFocus() {
14007
- this.formField?.sdFocus();
14008
- }
14009
- valueChanged() {
14010
- this.update?.emit(this.value);
14011
- }
14012
- optionsChanged() {
14013
- this.filteredOptions = this.options;
14014
- this.filterOptions();
14015
- }
14016
- searchTextChanged() {
14017
- this.filterOptions();
14018
- }
14019
- async itemIndexChanged(newIndex, oldIndex) {
14020
- if (this.searchable) {
14021
- const searchInput = await this.getNativeInputElement();
14022
- if (this.itemIndex === -1) {
14023
- searchInput?.focus({ preventScroll: true });
14024
- return;
14025
- }
14026
- else if (searchInput?.matches(':focus')) {
14027
- searchInput?.blur();
14028
- }
14029
- }
14030
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
14031
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
14032
- const actualIndex = this.useAll ? this.itemIndex + 1 : this.itemIndex;
14033
- const currentItem = optionElements?.[actualIndex];
14034
- if (!currentItem || !this.isOpen)
14035
- return;
14036
- this.optionRef = currentItem;
14037
- const isOptionDisabled = await this.optionRef.isDisabled();
14038
- if (isOptionDisabled) {
14039
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
14040
- return;
14041
- }
14042
- this.scrollToOption(currentItem);
14043
- }
14044
- async isOpenChanged() {
14045
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
14046
- this.onDropdownToggle(this.isOpen);
14047
- this.dropDownShow?.emit({ isOpen: this.isOpen });
14048
- this.isDropdownReady = false;
14049
- if (this.isOpen === false) {
14050
- await this.formField?.sdValidate();
14051
- return;
14052
- }
14053
- // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
14054
- requestAnimationFrame(() => {
14055
- requestAnimationFrame(async () => {
14056
- const selectedOptions = this.getSelectedOption();
14057
- // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
14058
- if (selectedOptions && selectedOptions.length > 0) {
14059
- const selectedIndex = this.options.indexOf(selectedOptions[0]);
14060
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
14061
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
14062
- const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
14063
- // 선택된 옵션이 화면 가운데에 오도록 index 조정
14064
- const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
14065
- const currentItem = optionElements?.[targetIndex];
14066
- if (currentItem) {
14067
- this.scrollToOption(currentItem);
14068
- }
14069
- }
14070
- this.isDropdownReady = true;
14071
- if (this.searchable) {
14072
- const searchInput = await this.getNativeInputElement();
14073
- if (searchInput) {
14074
- requestAnimationFrame(() => {
14075
- searchInput.focus({ preventScroll: true });
14076
- });
14077
- }
14078
- }
14079
- });
14080
- });
14081
- }
14082
- componentWillLoad() {
14083
- this.filteredOptions = this.options;
14084
- this.dropDownWidth = this.width;
14085
- this.initializeEvent();
14086
- }
14087
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
14088
- componentDidRender() {
14089
- const trigger = this.triggerRef;
14090
- const rect = trigger?.getBoundingClientRect();
14091
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
14092
- }
14093
- disconnectedCallback() {
14094
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
14095
- }
14096
- handleDocumentClick(event) {
14097
- if (!this.selectRef?.contains(event.target)) {
14098
- this.isOpen = false;
14099
- }
14100
- }
14101
- handleDocumentKeydown(keyboardEvent) {
14102
- keyboardEvent.stopPropagation();
14103
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
14104
- if (!targetKey.includes(keyboardEvent.key))
14105
- return;
14106
- keyboardEvent.preventDefault();
14107
- switch (keyboardEvent.key) {
14108
- case 'ArrowDown':
14109
- case 'ArrowUp':
14110
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
14111
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
14112
- this.itemIndex = nextIndex;
14113
- break;
14114
- case 'Enter':
14115
- const selectedOption = this.filteredOptions[this.itemIndex];
14116
- if (selectedOption && !selectedOption.disabled) {
14117
- this.handleOptionSelection(selectedOption);
14118
- }
14119
- break;
14120
- case 'Escape':
14121
- this.isOpen = false;
14122
- break;
14123
- }
14124
- }
14125
- // event handlers
14126
- handleTriggerClick = (event) => {
14127
- event.stopPropagation();
14128
- if (!this.disabled) {
14129
- this.isOpen = !this.isOpen;
14130
- this.dropDownShow?.emit({ isOpen: this.isOpen });
14131
- }
14132
- };
14133
- handleAllOptionClick = (detail) => {
14134
- if (detail.isSelected) {
14135
- // 이미 선택된 옵션인 경우, 선택 해제
14136
- const filterDisabledOptions = this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled);
14137
- this.value =
14138
- this.value?.filter(selected => !filterDisabledOptions.some(opt => opt.value === selected.value)) || this.value;
14139
- }
14140
- else {
14141
- // 새로운 옵션 선택
14142
- const valueSet = new Set([
14143
- ...(this.value || []),
14144
- ...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled),
14145
- ]);
14146
- this.value = Array.from(valueSet);
14147
- }
14148
- };
14149
- handleOptionClick = (detail) => {
14150
- const { option, event } = detail;
14151
- event.stopPropagation();
14152
- if (option.type === 'group')
14153
- this.handleGroupOptionClick(detail);
14154
- if (option.type === 'subgroup')
14155
- this.handleSubGroupOptionClick(detail);
14156
- if (option.type === 'item')
14157
- this.handleOptionSelection(option);
14158
- };
14159
- handleGroupOptionClick = (detail) => {
14160
- const { option, isSelected } = detail;
14161
- const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
14162
- childOptions.forEach(subgroup => {
14163
- this.handleSubGroupOptionClick({
14164
- option: subgroup,
14165
- isSelected: isSelected || isSelected === null,
14166
- });
14167
- });
14168
- };
14169
- handleSubGroupOptionClick = (detail) => {
14170
- const { option, isSelected } = detail;
14171
- const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
14172
- if (isSelected || isSelected === null) {
14173
- // 모든 자식 옵션이 선택된 경우, 모두 선택 해제
14174
- this.value =
14175
- this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||
14176
- null;
14177
- }
14178
- else {
14179
- // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택
14180
- const newSelections = childOptions.filter(child => !this.value?.some(selected => selected.value === child.value));
14181
- this.value = [...(this.value || []), ...newSelections];
14182
- }
14183
- };
14184
- filterOptions() {
14185
- if (!this.searchText || this.searchText.trim() === '') {
14186
- // 검색어가 없으면 전체 옵션 표시
14187
- this.filteredOptions = this.options;
14188
- return;
14189
- }
14190
- const searchTerm = this.searchText.toLowerCase();
14191
- const matchedOptions = new Set();
14192
- // 1. 직접 매칭되는 옵션들 찾기
14193
- this.options.forEach(option => {
14194
- if (option.label.toLowerCase().includes(searchTerm)) {
14195
- matchedOptions.add(option);
14196
- // 매칭된 옵션의 상위 그룹들도 포함
14197
- this.addParentGroups(option, matchedOptions);
14198
- }
14199
- });
14200
- // 2. Set을 배열로 변환하고 원본 순서 유지
14201
- this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
14202
- }
14203
- addParentGroups(option, matchedSet) {
14204
- if (!option.parent)
14205
- return;
14206
- const parentOption = this.options.find(opt => opt.value === option.parent);
14207
- if (parentOption && !matchedSet.has(parentOption)) {
14208
- matchedSet.add(parentOption);
14209
- // 재귀적으로 상위 그룹들도 추가
14210
- this.addParentGroups(parentOption, matchedSet);
14211
- }
14212
- }
14213
- getSelectedOption() {
14214
- return this.options.filter(option => this.value?.includes(option));
14215
- }
14216
- handleDropdownScroll = (event) => {
14217
- const target = event.target;
14218
- const scrollTop = target.scrollTop;
14219
- // 스크롤이 조금이라도 되면 그림자 표시
14220
- this.isScrolled = scrollTop > 0;
14221
- };
14222
- async getNativeInputElement() {
14223
- if (this.searchRef) {
14224
- return this.searchRef.sdGetNativeElement();
14225
- }
14226
- return null;
14227
- }
14228
- handleOptionSelection = (option) => {
14229
- if (!option || option.disabled)
14230
- return;
14231
- const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
14232
- if (isAlreadySelected) {
14233
- // 이미 선택된 옵션인 경우, 선택 해제
14234
- this.value = this.value?.filter(opt => opt.value !== option.value) || null;
14235
- }
14236
- else {
14237
- // 새로운 옵션 선택
14238
- this.value = [...(this.value || []), option];
14239
- }
14240
- };
14241
- getAllItemsUnderOption(parentOption, includeDisabled = false) {
14242
- const filterChildrenWithParent = (option) => option.parent === parentOption.value && (includeDisabled || !option.disabled);
14243
- if (parentOption.type === 'subgroup') {
14244
- return this.filteredOptions.filter(option => filterChildrenWithParent(option) && option.type === 'item');
14245
- }
14246
- const allItems = [];
14247
- const childOptions = this.filteredOptions.filter(filterChildrenWithParent);
14248
- const subgroupOptions = childOptions.filter(option => option.type === 'subgroup');
14249
- subgroupOptions.forEach(subgroup => {
14250
- const itemsUnderSubgroup = this.filteredOptions.filter(option => option.parent === subgroup.value &&
14251
- option.type === 'item' &&
14252
- (includeDisabled ? true : !option.disabled));
14253
- allItems.push(...itemsUnderSubgroup);
14254
- });
14255
- const directItems = childOptions.filter(option => option.type === 'item');
14256
- allItems.push(...directItems);
14257
- return allItems;
14258
- }
14259
- isAllChildrenSelected(groupOption) {
14260
- const allItems = this.getAllItemsUnderOption(groupOption);
14261
- if (allItems.length === 0)
14262
- return false;
14263
- const selectedItems = allItems.filter(item => this.value?.some(selected => selected.value === item.value));
14264
- if (selectedItems.length === allItems.length)
14265
- return true;
14266
- if (selectedItems.length > 0)
14267
- return null;
14268
- return false;
14269
- }
14270
- getChildrenOptions(parentOption) {
14271
- const allItems = this.getAllItemsUnderOption(parentOption, true);
14272
- const selectedCount = allItems.filter(item => this.value?.some(val => val.value === item.value)).length;
14273
- return {
14274
- selectedCount,
14275
- totalCount: allItems.length,
14276
- };
14277
- }
14278
- isAllOptionsSelected() {
14279
- if (!this.value || this.value.length === 0)
14280
- return false;
14281
- const selectableItems = this.options.filter(opt => opt.type === 'item' && !opt.disabled);
14282
- if (selectableItems.length === 0)
14283
- return false;
14284
- const selectedValues = new Set(this.value.map(v => v.value));
14285
- return selectableItems.every(option => selectedValues.has(option.value));
14286
- }
14287
- getTriggerLabel() {
14288
- const selectedOption = this.getSelectedOption();
14289
- if (!selectedOption)
14290
- return '선택';
14291
- if (selectedOption.length === 0)
14292
- return this.placeholder;
14293
- const isAllChecked = this.isAllOptionsSelected();
14294
- return isAllChecked
14295
- ? this.allCheckedLabel
14296
- : selectedOption.map(option => option.label).join(', ');
14297
- }
14298
- closeDropdown() {
14299
- this.isOpen = false;
14300
- }
14301
- async scrollToOption(optionElement) {
14302
- if (!this.dropdownRef || !optionElement)
14303
- return;
14304
- requestAnimationFrame(() => {
14305
- const dropdown = this.dropdownRef;
14306
- const optionTop = optionElement.offsetTop;
14307
- const optionHeight = optionElement.offsetHeight;
14308
- const dropdownScrollTop = dropdown.scrollTop;
14309
- const dropdownHeight = dropdown.clientHeight;
14310
- const searchContainer = dropdown.querySelector('.sd-select-multiple-group__search-container');
14311
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
14312
- const visibleContentHeight = dropdownHeight - searchOffset;
14313
- const visibleTop = dropdownScrollTop + searchOffset;
14314
- const visibleBottom = dropdownScrollTop + dropdownHeight;
14315
- if (optionTop < visibleTop) {
14316
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
14317
- }
14318
- else if (optionTop + optionHeight > visibleBottom) {
14319
- dropdown.scrollTo({
14320
- top: optionTop + optionHeight - visibleContentHeight - searchOffset,
14321
- behavior: 'instant',
14322
- });
14323
- }
14324
- });
14325
- }
14326
- render() {
14327
- 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: {
14328
- 'sd-select-multiple-group': true,
14329
- 'sd-select-multiple-group--open': this.isOpen,
14330
- 'sd-select-multiple-group--disabled': this.disabled,
14331
- 'sd-select-multiple-group--label': !!this.label,
14332
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
14333
- }
14334
- renderTrigger() {
14335
- const selectedOption = this.getSelectedOption();
14336
- 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) => {
14337
- event.stopPropagation();
14338
- this.value = null;
14339
- await this.formField?.sdValidate();
14340
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
14341
- 'sd-select-multiple-group__arrow': true,
14342
- 'sd-select-multiple-group__arrow--open': this.isOpen,
14343
- } })));
14344
- }
14345
- renderDropdown() {
14346
- const style = {
14347
- '--select-width': this.dropDownWidth || '200px',
14348
- '--select-dropdown-height': this.dropdownHeight || '260px',
14349
- };
14350
- if (this.isOpen === false)
14351
- return null;
14352
- 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: {
14353
- 'sd-select-multiple-group__dropdown': true,
14354
- 'sd-select-multiple-group__dropdown--ready': this.isDropdownReady,
14355
- }, 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'
14356
- ? this.value?.some(selected => selected.value === option.value)
14357
- : this.isAllChildrenSelected(option), isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
14358
- if (option.type !== 'item' && !this.useCheckbox) {
14359
- return;
14360
- }
14361
- this.handleOptionClick(detail);
14362
- }, 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)))))));
14363
- }
14364
- static get watchers() { return {
14365
- "value": [{
14366
- "valueChanged": 0
14367
- }],
14368
- "options": [{
14369
- "optionsChanged": 0
14370
- }],
14371
- "searchText": [{
14372
- "searchTextChanged": 0
14373
- }],
14374
- "itemIndex": [{
14375
- "itemIndexChanged": 0
14376
- }],
14377
- "isOpen": [{
14378
- "isOpenChanged": 0
14379
- }]
14380
- }; }
14381
- static get style() { return sdSelectMultipleGroupCss(); }
14382
- static get cmpMeta() { return {
14383
- "$flags$": 772,
14384
- "$tagName$": "sd-select-multiple-group",
14385
- "$members$": {
14386
- "value": [1040],
14387
- "options": [1040],
14388
- "placeholder": [1],
14389
- "optionPlaceholder": [1, "option-placeholder"],
14390
- "width": [1],
14391
- "dropdownHeight": [1, "dropdown-height"],
14392
- "disabled": [4],
14393
- "clearable": [4],
14394
- "searchable": [4],
14395
- "useCheckbox": [4, "use-checkbox"],
14396
- "useAll": [4, "use-all"],
14397
- "allCheckedLabel": [1, "all-checked-label"],
14398
- "allCheckOptionLabel": [1, "all-check-option-label"],
14399
- "label": [1],
14400
- "labelWidth": [8, "label-width"],
14401
- "icon": [16],
14402
- "labelTooltip": [1, "label-tooltip"],
14403
- "labelTooltipProps": [16],
14404
- "rules": [16],
14405
- "error": [4],
14406
- "containerStyle": [16],
14407
- "triggerStyle": [16],
14408
- "dropdownStyle": [16],
14409
- "optionStyle": [16],
14410
- "labelStyle": [16],
14411
- "optionRenderer": [16],
14412
- "filteredOptions": [32],
14413
- "isOpen": [32],
14414
- "searchText": [32],
14415
- "itemIndex": [32],
14416
- "isScrolled": [32],
14417
- "isDropdownReady": [32],
14418
- "sdOpen": [64],
14419
- "sdValidate": [64],
14420
- "sdReset": [64],
14421
- "sdResetValidate": [64],
14422
- "sdFocus": [64]
14423
- },
14424
- "$listeners$": undefined,
14425
- "$lazyBundleId$": "-",
14426
- "$attrsToReflect$": []
14427
- }; }
14428
- }
14429
-
14430
- 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}`;
14431
-
14432
- class SdSelectOption {
14433
- constructor(hostRef) {
14434
- registerInstance(this, hostRef);
14435
- this.optionClick = createEvent(this, "optionClick", 7);
14436
- }
14437
- get el() { return getElement(this); }
14438
- option;
14439
- index;
14440
- isSelected = false;
14441
- isFocused = false;
14442
- optionStyle;
14443
- disabled = false;
14444
- useCheckbox = false;
14445
- isHovered = false;
14446
- async sdIsDisabled() {
14447
- return !!this.option.disabled;
14448
- }
14449
- optionClick;
14450
- handleClick = (event) => {
14451
- event.stopPropagation();
14452
- if (!this.option.disabled && !this.disabled) {
14453
- this.optionClick.emit({
14454
- option: this.option,
14455
- index: this.index,
14456
- event,
14457
- });
14458
- }
14459
- };
14460
- render() {
14461
- return (hAsync("div", { key: '413176678e27ad80c3ba51f8e32681f017d210ac', class: {
14462
- 'sd-select__option': true,
14463
- 'sd-select__option--selected': this.isSelected,
14464
- 'sd-select__option--disabled': !!this.option.disabled,
14465
- 'sd-select__option--focused': this.isFocused,
14466
- 'sd-select__option--use-checkbox': this.useCheckbox,
14467
- }, 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,
14468
- // checkboxStyle={
14469
- // !this.isSelected
14470
- // ? { borderColor: '#888' }
14471
- // : this.isHovered
14472
- // ? { borderColor: 'white' }
14473
- // : { borderColor: '#0075ff' }
14474
- // }
14475
- onClick: e => {
14476
- e.preventDefault();
14477
- this.handleClick(e);
14478
- } }), hAsync("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label)));
14479
- }
14480
- static get style() { return sdSelectOptionCss(); }
14481
- static get cmpMeta() { return {
14482
- "$flags$": 512,
14483
- "$tagName$": "sd-select-option",
14484
- "$members$": {
14485
- "option": [16],
14486
- "index": [2],
14487
- "isSelected": [4, "is-selected"],
14488
- "isFocused": [4, "is-focused"],
14489
- "optionStyle": [16],
14490
- "disabled": [4],
14491
- "useCheckbox": [4, "use-checkbox"],
14492
- "isHovered": [32],
14493
- "sdIsDisabled": [64]
14494
- },
14495
- "$listeners$": undefined,
14496
- "$lazyBundleId$": "-",
14497
- "$attrsToReflect$": []
14498
- }; }
14499
- }
14500
-
14501
- 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}`;
14502
-
14503
- class SdSelectOptionGroup {
14504
- constructor(hostRef) {
14505
- registerInstance(this, hostRef);
14506
- this.optionClick = createEvent(this, "optionClick", 7);
14507
- }
14508
- get el() { return getElement(this); }
14509
- option;
14510
- index;
14511
- isSelected = false;
14512
- isFocused = false;
14513
- optionStyle;
14514
- disabled = false;
14515
- useCheckbox = false;
14516
- useIndicator = true;
14517
- countInfo = {
14518
- selectedCount: 0,
14519
- totalCount: 0,
14520
- };
14521
- isHovered = false;
14522
- async isDisabled() {
14523
- return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
14524
- }
14525
- optionClick;
14526
- handleClick = (option, isSelected, event) => {
14527
- event.stopPropagation();
14528
- if (option.type === 'group' || option.type === 'subgroup') {
14529
- this.optionClick.emit({
14530
- option: this.option,
14531
- isSelected,
14532
- index: this.index,
14533
- event,
14534
- });
14535
- return;
14536
- }
14537
- if (!this.option.disabled && !this.disabled) {
14538
- this.optionClick.emit({
14539
- option: this.option,
14540
- isSelected,
14541
- index: this.index,
14542
- event,
14543
- });
14544
- }
14545
- };
14546
- render() {
14547
- return (hAsync("div", { key: '647a7be115df96fe30d3b69d3b09ee45d229d86c', class: {
14548
- 'sd-select__option-group': true,
14549
- 'sd-select__option-group--selected': !!this.isSelected,
14550
- 'sd-select__option-group--disabled': !!this.option.disabled,
14551
- 'sd-select__option-group--focused': this.isFocused,
14552
- 'sd-select__option-group--use-checkbox': this.useCheckbox,
14553
- 'sd-select__option-group--group': this.option.type === 'group',
14554
- 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
14555
- 'sd-select__option-group--item': this.option.type === 'item',
14556
- }, 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 => {
14557
- e.preventDefault();
14558
- this.handleClick(this.option, this.isSelected, e);
14559
- } })), 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})`)))));
14560
- }
14561
- static get style() { return sdSelectOptionGroupCss(); }
14562
- static get cmpMeta() { return {
14563
- "$flags$": 512,
14564
- "$tagName$": "sd-select-option-group",
14565
- "$members$": {
14566
- "option": [16],
14567
- "index": [2],
14568
- "isSelected": [4, "is-selected"],
14569
- "isFocused": [4, "is-focused"],
14570
- "optionStyle": [16],
14571
- "disabled": [4],
14572
- "useCheckbox": [4, "use-checkbox"],
14573
- "useIndicator": [4, "use-indicator"],
14574
- "countInfo": [16],
14575
- "isHovered": [32],
14576
- "isDisabled": [64]
14577
- },
14578
- "$listeners$": undefined,
14579
- "$lazyBundleId$": "-",
14580
- "$attrsToReflect$": []
14581
- }; }
14582
- }
14583
-
14584
- 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)}`;
14585
-
14586
- class SdSelectSearchInput {
14587
- constructor(hostRef) {
14588
- registerInstance(this, hostRef);
14589
- this.searchInput = createEvent(this, "sdSearchInput", 7);
14590
- this.searchFocus = createEvent(this, "sdSearchFocus", 7);
14591
- }
14592
- isScrolled = false;
14593
- searchText = '';
14594
- searchInput;
14595
- searchFocus;
14596
- searchRef;
14597
- async sdGetNativeElement() {
14598
- if (this.searchRef) {
14599
- return this.searchRef.sdGetNativeElement();
14600
- }
14601
- return null;
14602
- }
14603
- async sdSearchInputFocus() {
14604
- const input = await this.sdGetNativeElement();
14605
- input?.focus({ preventScroll: true });
14606
- }
14607
- render() {
14608
- return (hAsync("div", { key: 'f056d50b2a0ca1e40efabaae5071d56259d2094b', class: {
14609
- 'sd-select-search-input': true,
14610
- 'sd-select-search-input--scrolled': !!this.isScrolled,
14611
- }, 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 => {
14612
- this.searchInput.emit(String(event?.detail));
14613
- }, onSdFocus: () => {
14614
- this.searchFocus.emit();
14615
- }, onKeyDown: event => {
14616
- if (event.code === 'Enter')
14617
- event.stopPropagation();
14618
- } }, hAsync("sd-icon", { key: 'd7e976a06b6a889a1be2b79252f1d57729953522', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
14619
- }
14620
- static get style() { return sdSelectSearchInputCss(); }
14621
- static get cmpMeta() { return {
14622
- "$flags$": 512,
14623
- "$tagName$": "sd-select-search-input",
14624
- "$members$": {
14625
- "isScrolled": [4, "is-scrolled"],
14626
- "searchText": [1, "search-text"],
14627
- "sdGetNativeElement": [64],
14628
- "sdSearchInputFocus": [64]
14629
- },
14630
- "$listeners$": undefined,
14631
- "$lazyBundleId$": "-",
14632
- "$attrsToReflect$": []
14633
- }; }
14634
- }
14635
-
14636
- 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%}`;
14637
-
14638
- class SdSelectV2 {
14639
- constructor(hostRef) {
14640
- registerInstance(this, hostRef);
14641
- this.update = createEvent(this, "sdUpdate", 7);
14642
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
14643
- }
14644
- static VIEWPORT_PADDING = 20;
14645
- static PORTAL_OFFSET_Y = 4;
14646
- static CLOSE_ANIMATION_DURATION = 150;
14647
- get el() { return getElement(this); }
14648
- type = 'default';
14649
- value = null;
14650
- options = [];
14651
- placeholder = '선택';
14652
- maxDropdownWidth = '640px';
14653
- dropdownHeight = '260px';
14654
- disabled = false;
14655
- label = '';
14656
- labelWidth = '';
14657
- addonLabel = '';
14658
- addonAlign = 'start';
14659
- error = false;
14660
- hint = '';
14661
- errorMessage = '';
14662
- rules = [];
14663
- icon = undefined;
14664
- labelTooltip = '';
14665
- labelTooltipProps = null;
14666
- emitValue = false;
14667
- width = '';
14668
- useSearch = false;
14669
- allSelectedLabel = '전체';
14670
- useSelectAll = false;
14671
- isOpen = false;
14672
- isAnimatingOut = false;
14673
- triggerWidth = '200px';
14674
- resolvedDropdownHeight = '260px';
14675
- resolvedMaxDropdownWidth = '640px';
14676
- focused = false;
14677
- hovered = false;
14678
- update;
14679
- dropDownShow;
14680
- async sdFocus() {
14681
- if (this.disabled)
14682
- return;
14683
- await this.triggerComponentRef?.sdFocus();
14684
- }
14685
- async sdOpen() {
14686
- // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
14687
- await new Promise(resolve => setTimeout(resolve, 0));
14688
- if (this.disabled || this.isOpen)
14689
- return;
14690
- this.prepareDropdownGeometry();
14691
- if (this.closeAnimationTimer)
14692
- clearTimeout(this.closeAnimationTimer);
14693
- this.isAnimatingOut = false;
14694
- this.isOpen = true;
14695
- }
14696
- triggerRef;
14697
- triggerComponentRef;
14698
- closeAnimationTimer;
14699
- name = nanoid$1();
14700
- triggerHasFocus = false;
14701
- watchIsOpen(newValue) {
14702
- this.syncFocusedState(newValue);
14703
- this.dropDownShow.emit({ isOpen: newValue });
14704
- }
14705
- get isMulti() {
14706
- return this.type === 'multi' || this.type === 'multi_depth';
14707
- }
14708
- get displayText() {
14709
- if (this.isMulti) {
14710
- if (!Array.isArray(this.value) || this.value.length === 0)
14711
- return '';
14712
- const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
14713
- const selected = this.getSelectedOptions();
14714
- const allSelected = nonDisabledLeaves.length > 0 &&
14715
- nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
14716
- if (allSelected)
14717
- return this.allSelectedLabel ?? '전체';
14718
- const flat = this.flattenOptions(this.options);
14719
- return this.value
14720
- .map(item => {
14721
- if (item != null && typeof item === 'object') {
14722
- const opt = item;
14723
- return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
14724
- }
14725
- return flat.find(o => o.value === item)?.label ?? '';
14726
- })
14727
- .filter(Boolean)
14728
- .join(', ');
14729
- }
14730
- if (this.value == null)
14731
- return '';
14732
- if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
14733
- return this.value.label ?? '';
14734
- }
14735
- const flat = this.flattenOptions(this.options);
14736
- const found = flat.find(o => o.value === this.value);
14737
- return found?.label ?? '';
14738
- }
14739
- flattenOptions(options) {
14740
- return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
14741
- }
14742
- getNonDisabledLeaves(options) {
14743
- return options.flatMap(o => {
14744
- if (o.disabled)
14745
- return [];
14746
- if (o.children)
14747
- return this.getNonDisabledLeaves(o.children);
14748
- return [o];
14749
- });
14750
- }
14751
- getSelectedOptions() {
14752
- const val = this.value;
14753
- if (!val || !Array.isArray(val))
14754
- return [];
14755
- if (this.emitValue) {
14756
- return val
14757
- .map(v => this.findOriginalOption(v, this.options))
14758
- .filter((o) => !!o);
14759
- }
14760
- return val;
14761
- }
14762
- toMultiValue(options) {
14763
- return this.emitValue ? options.map(o => o.value) : options;
14764
- }
14765
- parsePixelValue(value, fallback) {
14766
- const parsed = Number.parseFloat(value);
14767
- return Number.isFinite(parsed) ? parsed : fallback;
14768
- }
14769
- updateDropdownViewportConstraints() {
14770
- if (!this.triggerRef)
14771
- return;
14772
- const triggerRect = this.triggerRef.getBoundingClientRect();
14773
- const viewportPadding = SdSelectV2.VIEWPORT_PADDING;
14774
- const offsetY = SdSelectV2.PORTAL_OFFSET_Y;
14775
- const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
14776
- const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
14777
- const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
14778
- const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
14779
- const availableHeight = Math.max(availableBelow, availableAbove);
14780
- const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
14781
- this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
14782
- this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
14783
- }
14784
- handleViewportResize = () => {
14785
- if (!this.isOpen)
14786
- return;
14787
- this.updateDropdownViewportConstraints();
12876
+ handleViewportResize = () => {
12877
+ if (!this.isOpen)
12878
+ return;
12879
+ this.updateDropdownViewportConstraints();
14788
12880
  };
14789
12881
  findOriginalOption(value, options) {
14790
12882
  for (const opt of options) {
@@ -14807,7 +12899,7 @@ class SdSelectV2 {
14807
12899
  clearTimeout(this.closeAnimationTimer);
14808
12900
  this.closeAnimationTimer = setTimeout(() => {
14809
12901
  this.isAnimatingOut = false;
14810
- }, SdSelectV2.CLOSE_ANIMATION_DURATION);
12902
+ }, SdSelect.CLOSE_ANIMATION_DURATION);
14811
12903
  }
14812
12904
  prepareDropdownGeometry() {
14813
12905
  if (this.triggerRef) {
@@ -14889,30 +12981,30 @@ class SdSelectV2 {
14889
12981
  const portalProps = {
14890
12982
  open: this.isOpen,
14891
12983
  parentRef: this.triggerRef,
14892
- viewportPadding: SdSelectV2.VIEWPORT_PADDING,
12984
+ viewportPadding: SdSelect.VIEWPORT_PADDING,
14893
12985
  onSdClose: () => {
14894
12986
  this.closeDropdown();
14895
12987
  },
14896
12988
  };
14897
- return (hAsync("sd-field", { key: '62bb998e1d455a3792001da4849ba867c60cdd9f', 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: () => {
12989
+ 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: () => {
14898
12990
  this.hovered = true;
14899
12991
  }, onMouseLeave: () => {
14900
12992
  this.hovered = false;
14901
- } }, hAsync("div", { key: '42fa82a3c53804d9f90aadb0465d52fd9f4e446e', class: "sd-select-v2", ref: el => {
12993
+ } }, hAsync("div", { key: '8a0ae8a5e05459128409dbe21779f5e3d91b3a04', class: "sd-select", ref: el => {
14902
12994
  this.triggerRef = el;
14903
- } }, hAsync("sd-select-v2-trigger", { key: 'c97ae1e67019b099eee72f829d554b9e0350af30', ref: el => {
12995
+ } }, hAsync("sd-select-trigger", { key: '6b47231914655a8e197e3b38cd8e37c5214efc17', ref: el => {
14904
12996
  this.triggerComponentRef = el;
14905
- }, 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: '5018c8bf4c60a13541f0872149d12b92f164ca96', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'b7222f7649a8f096f085840a3dd97b7aa069152c', 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) })))));
12997
+ }, 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) })))));
14906
12998
  }
14907
12999
  static get watchers() { return {
14908
13000
  "isOpen": [{
14909
13001
  "watchIsOpen": 0
14910
13002
  }]
14911
13003
  }; }
14912
- static get style() { return sdSelectV2Css(); }
13004
+ static get style() { return sdSelectCss(); }
14913
13005
  static get cmpMeta() { return {
14914
13006
  "$flags$": 512,
14915
- "$tagName$": "sd-select-v2",
13007
+ "$tagName$": "sd-select",
14916
13008
  "$members$": {
14917
13009
  "type": [1],
14918
13010
  "value": [1032],
@@ -15118,9 +13210,9 @@ function filterTree(options, keyword) {
15118
13210
  }, []);
15119
13211
  }
15120
13212
 
15121
- 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}`;
13213
+ 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}`;
15122
13214
 
15123
- class SdSelectV2ListItem {
13215
+ class SdSelectListItem {
15124
13216
  constructor(hostRef) {
15125
13217
  registerInstance(this, hostRef);
15126
13218
  this.listItemClick = createEvent(this, "sdListItemClick", 7);
@@ -15190,22 +13282,22 @@ class SdSelectV2ListItem {
15190
13282
  if (isDepth1Group) {
15191
13283
  cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
15192
13284
  }
15193
- return (hAsync("div", { key: '62974a8d1442730ca752b3fc11f151c4a5be4ad1', class: {
15194
- 'sd-select-v2-list-item': true,
15195
- 'sd-select-v2-list-item--group': isGroup,
15196
- 'sd-select-v2-list-item--depth1-group': isDepth1Group,
15197
- 'sd-select-v2-list-item--depth2-group': isDepth2Group,
15198
- 'sd-select-v2-list-item--selected': this.isSelected === true,
15199
- 'sd-select-v2-list-item--indeterminate': this.isSelected === null,
15200
- 'sd-select-v2-list-item--focused': this.isFocused,
15201
- 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
15202
- 'sd-select-v2-list-item--disabled': !!this.option.disabled,
15203
- }, 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, ")"))));
15204
- }
15205
- static get style() { return sdSelectV2ListItemCss(); }
13285
+ return (hAsync("div", { key: 'c6f959e9290213c9003914dbdd696c3c339cce51', class: {
13286
+ 'sd-select-list-item': true,
13287
+ 'sd-select-list-item--group': isGroup,
13288
+ 'sd-select-list-item--depth1-group': isDepth1Group,
13289
+ 'sd-select-list-item--depth2-group': isDepth2Group,
13290
+ 'sd-select-list-item--selected': this.isSelected === true,
13291
+ 'sd-select-list-item--indeterminate': this.isSelected === null,
13292
+ 'sd-select-list-item--focused': this.isFocused,
13293
+ 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
13294
+ 'sd-select-list-item--disabled': !!this.option.disabled,
13295
+ }, 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, ")"))));
13296
+ }
13297
+ static get style() { return sdSelectListItemCss(); }
15206
13298
  static get cmpMeta() { return {
15207
13299
  "$flags$": 512,
15208
- "$tagName$": "sd-select-v2-list-item",
13300
+ "$tagName$": "sd-select-list-item",
15209
13301
  "$members$": {
15210
13302
  "option": [16],
15211
13303
  "depth": [2],
@@ -15220,9 +13312,9 @@ class SdSelectV2ListItem {
15220
13312
  }; }
15221
13313
  }
15222
13314
 
15223
- 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}`;
13315
+ 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}`;
15224
13316
 
15225
- class SdSelectV2ListItemSearch {
13317
+ class SdSelectListItemSearch {
15226
13318
  constructor(hostRef) {
15227
13319
  registerInstance(this, hostRef);
15228
13320
  this.searchFilter = createEvent(this, "sdSearchFilter", 7);
@@ -15268,20 +13360,20 @@ class SdSelectV2ListItemSearch {
15268
13360
  clearTimeout(this.debounceTimer);
15269
13361
  }
15270
13362
  render() {
15271
- return (hAsync("div", { key: '75c6b01fbe256bca732553a27711fa7197535688', class: {
15272
- 'sd-select-v2-list-item-search': true,
15273
- 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
15274
- } }, 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 => {
13363
+ return (hAsync("div", { key: '139aa74cb44baef15a5a75008dd291f11ad2965b', class: {
13364
+ 'sd-select-list-item-search': true,
13365
+ 'sd-select-list-item-search--scrolled': this.isScrolled,
13366
+ } }, 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 => {
15275
13367
  this.inputEl = el;
15276
- }, 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: {
15277
- 'sd-select-v2-list-item-search__clear': true,
15278
- 'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
15279
- }, 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" })))));
13368
+ }, 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: {
13369
+ 'sd-select-list-item-search__clear': true,
13370
+ 'sd-select-list-item-search__clear--hidden': !this.searchText,
13371
+ }, 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" })))));
15280
13372
  }
15281
- static get style() { return sdSelectV2ListItemSearchCss(); }
13373
+ static get style() { return sdSelectListItemSearchCss(); }
15282
13374
  static get cmpMeta() { return {
15283
13375
  "$flags$": 512,
15284
- "$tagName$": "sd-select-v2-list-item-search",
13376
+ "$tagName$": "sd-select-list-item-search",
15285
13377
  "$members$": {
15286
13378
  "isScrolled": [4, "is-scrolled"],
15287
13379
  "searchText": [32],
@@ -15293,9 +13385,9 @@ class SdSelectV2ListItemSearch {
15293
13385
  }; }
15294
13386
  }
15295
13387
 
15296
- 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}`;
13388
+ 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}`;
15297
13389
 
15298
- class SdSelectV2Listbox {
13390
+ class SdSelectListbox {
15299
13391
  constructor(hostRef) {
15300
13392
  registerInstance(this, hostRef);
15301
13393
  this.optionSelect = createEvent(this, "sdOptionSelect", 7);
@@ -15459,7 +13551,7 @@ class SdSelectV2Listbox {
15459
13551
  get navigableOptions() {
15460
13552
  const items = [];
15461
13553
  if (this.showSelectAll) {
15462
- items.push(SdSelectV2Listbox.SELECT_ALL_OPTION);
13554
+ items.push(SdSelectListbox.SELECT_ALL_OPTION);
15463
13555
  }
15464
13556
  const walk = (opts) => {
15465
13557
  for (const opt of opts) {
@@ -15475,14 +13567,14 @@ class SdSelectV2Listbox {
15475
13567
  return items;
15476
13568
  }
15477
13569
  isSelectAllOption(option) {
15478
- return this.showSelectAll && option.value === SdSelectV2Listbox.SELECT_ALL_OPTION.value;
13570
+ return this.showSelectAll && option.value === SdSelectListbox.SELECT_ALL_OPTION.value;
15479
13571
  }
15480
13572
  emitSelectAll() {
15481
13573
  if (!this.showSelectAll)
15482
13574
  return;
15483
13575
  const allLeaves = this.getAllNonDisabledLeaves();
15484
13576
  this.optionSelect.emit({
15485
- option: { ...SdSelectV2Listbox.SELECT_ALL_OPTION, children: allLeaves },
13577
+ option: { ...SdSelectListbox.SELECT_ALL_OPTION, children: allLeaves },
15486
13578
  leaves: allLeaves,
15487
13579
  });
15488
13580
  }
@@ -15589,7 +13681,7 @@ class SdSelectV2Listbox {
15589
13681
  */
15590
13682
  scrollFocusedIntoView() {
15591
13683
  const list = this.listEl;
15592
- const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
13684
+ const focusedEl = list?.querySelector('.sd-select-list-item--focused');
15593
13685
  if (!list || !focusedEl)
15594
13686
  return;
15595
13687
  const listRect = list.getBoundingClientRect();
@@ -15635,7 +13727,7 @@ class SdSelectV2Listbox {
15635
13727
  return options.map(option => {
15636
13728
  const isGroup = !!option.children;
15637
13729
  return [
15638
- 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) }),
13730
+ 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) }),
15639
13731
  isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
15640
13732
  ];
15641
13733
  });
@@ -15647,19 +13739,19 @@ class SdSelectV2Listbox {
15647
13739
  '--listbox-max-height': this.maxHeight,
15648
13740
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15649
13741
  };
15650
- return (hAsync("div", { key: '34efe12dfb3829dd7024eb473d0bb6460ad07e61', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: 'd59a97386213e93f905a817b7c3242d1fb5d5035', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '0feb6763afe5ac661de85df2c1a3683e56b17035', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
13742
+ 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 => {
15651
13743
  this.listEl = el;
15652
- } }, this.showSelectAll && (hAsync("sd-select-v2-list-item", { key: 'b4a765ddfadd39808baafd925d0cd2fcdab78800', option: SdSelectV2Listbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectV2Listbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectV2Listbox.SELECT_ALL_OPTION) })), 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) })))))));
13744
+ } }, 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) })))))));
15653
13745
  }
15654
13746
  static get watchers() { return {
15655
13747
  "searchKeyword": [{
15656
13748
  "resetFocusOnFilter": 0
15657
13749
  }]
15658
13750
  }; }
15659
- static get style() { return sdSelectV2ListboxCss(); }
13751
+ static get style() { return sdSelectListboxCss(); }
15660
13752
  static get cmpMeta() { return {
15661
13753
  "$flags$": 521,
15662
- "$tagName$": "sd-select-v2-listbox",
13754
+ "$tagName$": "sd-select-listbox",
15663
13755
  "$members$": {
15664
13756
  "type": [1],
15665
13757
  "options": [16],
@@ -15680,9 +13772,9 @@ class SdSelectV2Listbox {
15680
13772
  }; }
15681
13773
  }
15682
13774
 
15683
- 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)}`;
13775
+ 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)}`;
15684
13776
 
15685
- class SdSelectV2Trigger {
13777
+ class SdSelectTrigger {
15686
13778
  constructor(hostRef) {
15687
13779
  registerInstance(this, hostRef);
15688
13780
  this.triggerClick = createEvent(this, "sdTriggerClick", 7);
@@ -15730,21 +13822,21 @@ class SdSelectV2Trigger {
15730
13822
  ? SELECT_COLORS.icon.disabled
15731
13823
  : SELECT_COLORS.icon.default,
15732
13824
  };
15733
- return (hAsync("div", { key: 'ec8bf544b2878082a046fbe881afa2369709033f', ref: el => {
13825
+ return (hAsync("div", { key: 'dddccfd47738e104a9c715a0c93df1882d28d704', ref: el => {
15734
13826
  this.triggerEl = el;
15735
13827
  }, tabindex: this.disabled ? -1 : 0, class: {
15736
- 'sd-select-v2-trigger': true,
15737
- 'sd-select-v2-trigger--open': this.isOpen,
15738
- 'sd-select-v2-trigger--disabled': this.disabled,
15739
- }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '1a6a5cf66208aa5a996e788886ff593ec0830d51', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: 'bd905f9149f3842e5e169e1a6086b33164b0ab66', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: 'cc487e430f42fdd61540e265a9e5bb01e9045a58', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
15740
- 'sd-select-v2-trigger__icon': true,
15741
- 'sd-select-v2-trigger__icon--open': this.isOpen,
13828
+ 'sd-select-trigger': true,
13829
+ 'sd-select-trigger--open': this.isOpen,
13830
+ 'sd-select-trigger--disabled': this.disabled,
13831
+ }, 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: {
13832
+ 'sd-select-trigger__icon': true,
13833
+ 'sd-select-trigger__icon--open': this.isOpen,
15742
13834
  } }))));
15743
13835
  }
15744
- static get style() { return sdSelectV2TriggerCss(); }
13836
+ static get style() { return sdSelectTriggerCss(); }
15745
13837
  static get cmpMeta() { return {
15746
13838
  "$flags$": 512,
15747
- "$tagName$": "sd-select-v2-trigger",
13839
+ "$tagName$": "sd-select-trigger",
15748
13840
  "$members$": {
15749
13841
  "displayText": [1, "display-text"],
15750
13842
  "placeholder": [1],
@@ -15858,7 +13950,7 @@ class SdSwitch {
15858
13950
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
15859
13951
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
15860
13952
  };
15861
- return (hAsync("label", { key: '469c012285d3c8a33792a460e74d8566c384efe8', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '9678e3325339a47e3e2d81ce3cd752c86ed0f906', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '47348914869f5215957a652cfcf3a11807a0216f', class: "sd-switch__track" }, hAsync("div", { key: '0676260c42e6b79acec710f0f9ba72f01a3a7c18', class: "sd-switch__knob" })), this.label && hAsync("span", { key: 'b92597092795bff38d2acf0cff76f9c381435438', class: "sd-switch__label" }, this.label)));
13953
+ 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)));
15862
13954
  }
15863
13955
  static get style() { return sdSwitchCss(); }
15864
13956
  static get cmpMeta() { return {
@@ -15902,7 +13994,98 @@ function nanoid(size = 21) {
15902
13994
 
15903
13995
  const TABLE_ID_ATTR = 'table-id';
15904
13996
 
15905
- 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: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%)}`;
13997
+ const table = {
13998
+ header: {
13999
+ height: "36",
14000
+ paddingX: "16",
14001
+ gap: "4",
14002
+ bg: "#F5FAFF",
14003
+ typography: {
14004
+ 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",
14005
+ fontWeight: "500",
14006
+ fontSize: "12",
14007
+ lineHeight: "20",
14008
+ textDecoration: "none"
14009
+ },
14010
+ resizingBar: {
14011
+ color: "#CCCCCC",
14012
+ height: "16"
14013
+ }
14014
+ },
14015
+ body: {
14016
+ "default": {
14017
+ height: "44"},
14018
+ paddingX: "16",
14019
+ typography: {
14020
+ 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",
14021
+ fontWeight: "400",
14022
+ fontSize: "12",
14023
+ lineHeight: "20",
14024
+ textDecoration: "none"
14025
+ }
14026
+ },
14027
+ border: {
14028
+ "default": "#E1E1E1",
14029
+ width: {
14030
+ width: "1"
14031
+ }
14032
+ },
14033
+ radius: "8"};
14034
+ var tableTokens = {
14035
+ table: table
14036
+ };
14037
+
14038
+ // ── Header Tokens ──
14039
+ const TABLE_HEADER_LAYOUT = {
14040
+ height: tableTokens.table.header.height,
14041
+ paddingX: tableTokens.table.header.paddingX,
14042
+ gap: tableTokens.table.header.gap,
14043
+ };
14044
+ const TABLE_HEADER_TYPOGRAPHY = {
14045
+ fontFamily: tableTokens.table.header.typography.fontFamily,
14046
+ fontWeight: tableTokens.table.header.typography.fontWeight,
14047
+ fontSize: tableTokens.table.header.typography.fontSize,
14048
+ lineHeight: tableTokens.table.header.typography.lineHeight,
14049
+ textDecoration: tableTokens.table.header.typography.textDecoration,
14050
+ };
14051
+ const TABLE_HEADER_COLORS = {
14052
+ bg: tableTokens.table.header.bg,
14053
+ };
14054
+ const TABLE_HEADER_RESIZING_BAR = {
14055
+ color: tableTokens.table.header.resizingBar.color,
14056
+ height: tableTokens.table.header.resizingBar.height,
14057
+ };
14058
+ // ── Body Tokens ──
14059
+ const TABLE_BODY_LAYOUT = {
14060
+ default: {
14061
+ height: tableTokens.table.body.default.height},
14062
+ paddingX: tableTokens.table.body.paddingX};
14063
+ const TABLE_BODY_TYPOGRAPHY = {
14064
+ fontFamily: tableTokens.table.body.typography.fontFamily,
14065
+ fontWeight: tableTokens.table.body.typography.fontWeight,
14066
+ fontSize: tableTokens.table.body.typography.fontSize,
14067
+ lineHeight: tableTokens.table.body.typography.lineHeight,
14068
+ textDecoration: tableTokens.table.body.typography.textDecoration,
14069
+ };
14070
+ // ── Frame / Border Tokens ──
14071
+ const TABLE_BORDER = {
14072
+ color: tableTokens.table.border.default,
14073
+ width: tableTokens.table.border.width.width,
14074
+ };
14075
+ const TABLE_RADIUS = tableTokens.table.radius;
14076
+ // ── Header Icon Color Defaults ──
14077
+ const ICON_DEFAULT_COLOR = {
14078
+ pageEdit: systemTokens.color.darkblue.strong,
14079
+ arrowDown: systemTokens.color.darkblue.strong,
14080
+ arrowUp: systemTokens.color.darkblue.strong,
14081
+ updown: systemTokens.color.grey.strong,
14082
+ pageMove: systemTokens.color.darkblue.strong,
14083
+ star: systemTokens.color.blue.strong,
14084
+ };
14085
+ const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
14086
+ const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
14087
+
14088
+ 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%)}`;
15906
14089
 
15907
14090
  class SdTable {
15908
14091
  constructor(hostRef) {
@@ -15969,6 +14152,36 @@ class SdTable {
15969
14152
  onScroll;
15970
14153
  // 키: `${rowKey}::${field}` → { rowspan, colspan }
15971
14154
  spanRegistry = new Map();
14155
+ // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
14156
+ // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
14157
+ cellClassRegistry = new Map();
14158
+ // rowKey 문자열 → rows 배열에서의 visual index.
14159
+ // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
14160
+ // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
14161
+ rowIndexMap = new Map();
14162
+ rebuildRowIndexMap() {
14163
+ this.rowIndexMap.clear();
14164
+ if (!Array.isArray(this.rows))
14165
+ return;
14166
+ const field = this.rowKey;
14167
+ this.rows.forEach((r, i) => {
14168
+ const k = r?.[field];
14169
+ if (k == null)
14170
+ return;
14171
+ this.rowIndexMap.set(String(k), i);
14172
+ });
14173
+ }
14174
+ // rowKey의 시각적 행 인덱스를 돌려준다.
14175
+ // 1) rows 기반 맵에 있으면 그 값 (임의 문자열 rowKey 지원)
14176
+ // 2) 없으면 Number(rowKey) fallback (rows prop 없이 슬롯-온리 + 숫자 rowKey 사용 패턴)
14177
+ // 3) 둘 다 안 되면 null — rowspan 평가 스킵
14178
+ resolveRowIndex(rowKey) {
14179
+ const fromMap = this.rowIndexMap.get(rowKey);
14180
+ if (fromMap !== undefined)
14181
+ return fromMap;
14182
+ const n = Number(rowKey);
14183
+ return Number.isFinite(n) ? n : null;
14184
+ }
15972
14185
  toFiniteNumber(value, fallback) {
15973
14186
  const n = typeof value === 'number' ? value : Number(value);
15974
14187
  return Number.isFinite(n) ? n : fallback;
@@ -16015,10 +14228,14 @@ class SdTable {
16015
14228
  if (!Array.isArray(newRows))
16016
14229
  return;
16017
14230
  this.rowCount = newRows.length;
14231
+ this.rebuildRowIndexMap();
16018
14232
  if (this.useVirtualScroll)
16019
14233
  this.propagateVirtualUpdate(true);
16020
14234
  this.pushRowsToChildren(newRows);
16021
14235
  }
14236
+ handleRowKeyChange() {
14237
+ this.rebuildRowIndexMap();
14238
+ }
16022
14239
  handleTableIdChange() {
16023
14240
  this.syncTableIdAttribute();
16024
14241
  }
@@ -16059,6 +14276,7 @@ class SdTable {
16059
14276
  this.detectChildren();
16060
14277
  this.innerSelected = new Set(this.selected || []);
16061
14278
  this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
14279
+ this.rebuildRowIndexMap();
16062
14280
  if (this.pagination?.page) {
16063
14281
  this.currentPage = this.pagination.page;
16064
14282
  }
@@ -16084,6 +14302,9 @@ class SdTable {
16084
14302
  el.getSpanSync = this.getSpanSync.bind(this);
16085
14303
  el.isCoveredSync = this.isCoveredSync.bind(this);
16086
14304
  el.hasRowspanSync = this.hasRowspanSync.bind(this);
14305
+ el.registerCellClassSync = this.registerCellClassSync.bind(this);
14306
+ el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
14307
+ el.getCellClassSync = this.getCellClassSync.bind(this);
16087
14308
  if (Array.isArray(this.rows)) {
16088
14309
  this.rowCount = this.rows.length;
16089
14310
  this.pushRowsToChildren(this.rows);
@@ -16416,6 +14637,28 @@ class SdTable {
16416
14637
  getSpanSync(rowKey, field) {
16417
14638
  return this.spanRegistry.get(this.spanKey(rowKey, field));
16418
14639
  }
14640
+ // sd-td의 sdClass 등록. 빈/공백만 있는 값은 해제로 취급.
14641
+ // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
14642
+ // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
14643
+ registerCellClassSync(rowKey, field, cls) {
14644
+ if (rowKey == null || !field)
14645
+ return;
14646
+ const key = this.spanKey(rowKey, field);
14647
+ const safe = (cls ?? '').trim();
14648
+ if (!safe) {
14649
+ this.cellClassRegistry.delete(key);
14650
+ return;
14651
+ }
14652
+ this.cellClassRegistry.set(key, safe);
14653
+ }
14654
+ unregisterCellClassSync(rowKey, field) {
14655
+ if (rowKey == null || !field)
14656
+ return;
14657
+ this.cellClassRegistry.delete(this.spanKey(rowKey, field));
14658
+ }
14659
+ getCellClassSync(rowKey, field) {
14660
+ return this.cellClassRegistry.get(this.spanKey(rowKey, field));
14661
+ }
16419
14662
  // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
16420
14663
  // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
16421
14664
  hasRowspanSync() {
@@ -16441,9 +14684,11 @@ class SdTable {
16441
14684
  if (i + span.colspan > colIdx)
16442
14685
  return true;
16443
14686
  }
16444
- // 2. 위쪽 행 스캔 — 숫자 변환 가능한 rowKey만 rowspan 평가
16445
- const myRowIdx = Number(rowKey);
16446
- if (!Number.isFinite(myRowIdx))
14687
+ // 2. 위쪽 행 스캔 — rows 기반 visual index로 "내 위에 있느냐" 판정
14688
+ // rows prop이 있으면 rowIndexMap로 임의 문자열 rowKey 지원,
14689
+ // 없으면 Number(rowKey) fallback (resolveRowIndex가 처리)
14690
+ const myRowIdx = this.resolveRowIndex(rowKey);
14691
+ if (myRowIdx == null)
16447
14692
  return false;
16448
14693
  for (const [key, span] of this.spanRegistry) {
16449
14694
  if (span.rowspan <= 1)
@@ -16453,8 +14698,8 @@ class SdTable {
16453
14698
  continue;
16454
14699
  const otherRowKey = key.slice(0, sepIdx);
16455
14700
  const otherField = key.slice(sepIdx + 2);
16456
- const otherRowIdx = Number(otherRowKey);
16457
- if (!Number.isFinite(otherRowIdx))
14701
+ const otherRowIdx = this.resolveRowIndex(otherRowKey);
14702
+ if (otherRowIdx == null)
16458
14703
  continue;
16459
14704
  if (otherRowIdx >= myRowIdx)
16460
14705
  continue;
@@ -16523,12 +14768,10 @@ class SdTable {
16523
14768
  const allRows = this.rows ?? [];
16524
14769
  const pageInfo = this.getPaginationInfoSync();
16525
14770
  const startIdx = pageInfo?.startIndex ?? 0;
16526
- const displayed = pageInfo
16527
- ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex)
16528
- : allRows;
14771
+ const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
16529
14772
  return displayed.map((row, i) => {
16530
14773
  const absoluteIdx = startIdx + i;
16531
- return (hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row }));
14774
+ return hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
16532
14775
  });
16533
14776
  }
16534
14777
  get tableClasses() {
@@ -16550,24 +14793,34 @@ class SdTable {
16550
14793
  }
16551
14794
  render() {
16552
14795
  const resolvedTableId = this.getResolvedTableId();
16553
- return (hAsync(Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, hAsync("div", { key: 'f51d23212885ad8121b9a4e895fb854f1e142bc4', class: "sd-table__container", style: {
14796
+ const hostStyle = {
14797
+ '--table-radius': `${TABLE_RADIUS}px`,
14798
+ '--table-border-color': TABLE_BORDER.color,
14799
+ '--table-border-width': `${TABLE_BORDER.width}px`,
14800
+ '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
14801
+ '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
14802
+ '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
14803
+ '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
14804
+ '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
14805
+ };
14806
+ return (hAsync(Host, { key: 'c20a7cc6d5917c9d09c699f2c40ac2b6d07747e1', style: hostStyle }, hAsync("div", { key: '94f76e75da5c6ff9d0ef93b6c2aa3def4ec1766e', class: "sd-table__container", style: {
16554
14807
  '--table-width': this.width,
16555
14808
  '--table-height': this.height,
16556
14809
  '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
16557
- } }, hAsync("div", { key: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
14810
+ } }, hAsync("div", { key: '3b98c828c7dc42de3d4f9bb645279b20d9079ac4', class: {
16558
14811
  'sd-table__clip': true,
16559
14812
  'sd-table__clip--has-pagination': !!(this.pagination &&
16560
14813
  this.pagination.rowsPerPage > 0 &&
16561
14814
  this.rowCount > 0 &&
16562
14815
  !this.useVirtualScroll),
16563
- } }, hAsync("div", { key: 'c901eba67eae29515bf0b3edcc6632b2aacf0f80', class: {
14816
+ } }, hAsync("div", { key: 'b6d04ec953d7b75fb8ad8bc32e2662550d38c5c7', class: {
16564
14817
  'sd-table__wrapper': true,
16565
14818
  'sd-table__wrapper--loading': this.isLoading,
16566
14819
  'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
16567
- } }, this.isLoading && (hAsync("div", { key: '35a237d0203b2479dbdb77ac42c918a9375bdfd3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '21a29981c1cdbd679f46abd2e7de7794c9ebbca9', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '07ad28bc6e7556cfe229fc1e952410f388424a7f', class: "sd-table__no-data" }, hAsync("slot", { key: 'bf21e60f5b86614587b704bea2965b9467c7f467', name: "no-data" }, hAsync("span", { key: 'f3d012d12e9189545b0cef52250502d46cb9a764' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '655d3dc017c6445ec454faef0e5e9837b7ee0013', 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 &&
14820
+ } }, this.isLoading && (hAsync("div", { key: '3050275c7ecde0aeda3ec881257be4334ebd06fc', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '7a26c4365e4e28a5ebce1c35bb52a302440542f7', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '31442f92321eb4aaf5c36c5995a1c25d8069b6ea', class: "sd-table__no-data" }, hAsync("slot", { key: '42f3208fb1c86d118f50e8b1974bff3ede253032', name: "no-data" }, hAsync("span", { key: 'ce7368c64b3502eee2fae7a28e0508d4d1622c25' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '170203f34b4bb11fce0a064622265d093ccbab2a', 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 &&
16568
14821
  this.pagination.rowsPerPage > 0 &&
16569
14822
  this.rowCount > 0 &&
16570
- !this.useVirtualScroll && (hAsync("div", { key: '7ab0b30a0c0e0a197b0f79c6b07ef5614d5d2879', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '71d44bba5a82f4d8f7c067e525db15fe9a36c305', 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: 'a9ab33347db0714da188f658a2ca1902502db690', value: this.useInternalPagination
14823
+ !this.useVirtualScroll && (hAsync("div", { key: 'cfbd5ee8e706c9ef7a2b6a4be8901b7aae47249e', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '57dad16199d9145fcec0c5ed46beeeac1f08af02', 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: '1314e296ba913600436045b4af54eb0bc1d95d0d', value: this.useInternalPagination
16571
14824
  ? this.innerRowsPerPage
16572
14825
  : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
16573
14826
  if (!this.isRowsPerPageValue(e.detail))
@@ -16588,6 +14841,9 @@ class SdTable {
16588
14841
  "rows": [{
16589
14842
  "handleRowsChange": 0
16590
14843
  }],
14844
+ "rowKey": [{
14845
+ "handleRowKeyChange": 0
14846
+ }],
16591
14847
  "tableId": [{
16592
14848
  "handleTableIdChange": 0
16593
14849
  }],
@@ -16850,7 +15106,7 @@ class SdTabs {
16850
15106
  };
16851
15107
  }
16852
15108
  render() {
16853
- return (hAsync("div", { key: '3698b7b43e74ff053d61d5ce696b987373fd27d6', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
15109
+ return (hAsync("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16854
15110
  const badgeName = this.getBadgeName(tab);
16855
15111
  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() }))));
16856
15112
  })));
@@ -17046,7 +15302,7 @@ class SdTag {
17046
15302
  render() {
17047
15303
  const config = this.resolvedConfig;
17048
15304
  const iconNode = this.renderIcon(config.icon, config.iconSize);
17049
- return (hAsync("span", { key: 'def10730670f37a62fa76b507f7f15a1b1f956fc', class: "sd-tag", style: {
15305
+ return (hAsync("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
17050
15306
  '--sd-tag-background': config.background,
17051
15307
  '--sd-tag-content': config.content,
17052
15308
  '--sd-tag-height': config.height,
@@ -17056,7 +15312,7 @@ class SdTag {
17056
15312
  '--sd-tag-font-weight': config.fontWeight,
17057
15313
  '--sd-tag-line-height': config.lineHeight,
17058
15314
  '--sd-tag-radius': config.radius,
17059
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '32082536736e20074263632aa29f36bc7709db39', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
15315
+ }, "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));
17060
15316
  }
17061
15317
  static get style() { return sdTagCss(); }
17062
15318
  static get cmpMeta() { return {
@@ -17074,7 +15330,7 @@ class SdTag {
17074
15330
  }; }
17075
15331
  }
17076
15332
 
17077
- 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}`;
15333
+ const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
17078
15334
 
17079
15335
  class SdTbody {
17080
15336
  constructor(hostRef) {
@@ -17124,12 +15380,11 @@ class SdTbody {
17124
15380
  }
17125
15381
  }
17126
15382
  render() {
17127
- const hasRows = this.rows.length > 0;
17128
- return (hAsync(Host, { key: 'bc9fbd4f08f4d77da60b083dceef4e24e2fb5532', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '81ef875cbc39f988021a211ede716a98d3ea30cd', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
15383
+ return (hAsync(Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', class: { tbody: true } }, [
17129
15384
  this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
17130
- hAsync("slot", null),
15385
+ hAsync("slot", { key: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
17131
15386
  this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
17132
- ]) : (hAsync("tr", { class: "tbody__no-data-row" }, hAsync("td", { class: "tbody__no-data-cell", colSpan: 100 }, hAsync("slot", { name: "no-data" })))))));
15387
+ ])));
17133
15388
  }
17134
15389
  static get watchers() { return {
17135
15390
  "rows": [{
@@ -17164,20 +15419,30 @@ class SdTd {
17164
15419
  align;
17165
15420
  rowspan;
17166
15421
  colspan;
17167
- handleFieldChange() {
15422
+ // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
15423
+ // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
15424
+ // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
15425
+ sdClass;
15426
+ handleFieldChange(_newField, oldField) {
17168
15427
  this.syncSlotName();
17169
15428
  this.syncSpanRegistration();
15429
+ this.syncCellClassRegistration(oldField);
17170
15430
  }
17171
- handleRowKeyChange() {
15431
+ handleRowKeyChange(_newKey, oldKey) {
17172
15432
  this.syncSlotName();
17173
15433
  this.syncSpanRegistration();
15434
+ this.syncCellClassRegistration(undefined, oldKey);
17174
15435
  }
17175
15436
  handleSpanChange() {
17176
15437
  this.syncSpanRegistration();
17177
15438
  }
15439
+ handleSdClassChange() {
15440
+ this.syncCellClassRegistration();
15441
+ }
17178
15442
  componentWillLoad() {
17179
15443
  this.syncSlotName();
17180
15444
  this.syncSpanRegistration();
15445
+ this.syncCellClassRegistration();
17181
15446
  // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
17182
15447
  const parentTr = this.el.parentElement;
17183
15448
  if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
@@ -17185,17 +15450,20 @@ class SdTd {
17185
15450
  componentDidLoad() {
17186
15451
  this.syncSlotName();
17187
15452
  this.syncSpanRegistration();
15453
+ this.syncCellClassRegistration();
17188
15454
  }
17189
15455
  // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
17190
15456
  // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
17191
15457
  // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
17192
15458
  connectedCallback() {
17193
15459
  this.syncSpanRegistration();
15460
+ this.syncCellClassRegistration();
17194
15461
  }
17195
15462
  disconnectedCallback() {
17196
15463
  const table = this.findTable();
17197
- if (table?.unregisterSpanSync && this.field && this.rowKey != null) {
17198
- table.unregisterSpanSync(String(this.rowKey), this.field);
15464
+ if (table && this.field && this.rowKey != null) {
15465
+ table.unregisterSpanSync?.(String(this.rowKey), this.field);
15466
+ table.unregisterCellClassSync?.(String(this.rowKey), this.field);
17199
15467
  this.requestParentTrUpdate();
17200
15468
  }
17201
15469
  }
@@ -17220,6 +15488,21 @@ class SdTd {
17220
15488
  table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
17221
15489
  this.requestParentTrUpdate();
17222
15490
  }
15491
+ // field/rowKey가 바뀌면 이전 키에 등록된 클래스가 남으므로 먼저 해제하고 새 키로 등록한다.
15492
+ syncCellClassRegistration(prevField, prevRowKey) {
15493
+ const table = this.findTable();
15494
+ if (!table)
15495
+ return;
15496
+ const oldField = prevField ?? this.field;
15497
+ const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
15498
+ if (oldField && oldRowKey != null) {
15499
+ table.unregisterCellClassSync?.(oldRowKey, oldField);
15500
+ }
15501
+ if (!table.registerCellClassSync || !this.field || this.rowKey == null)
15502
+ return;
15503
+ table.registerCellClassSync(String(this.rowKey), this.field, this.sdClass);
15504
+ this.requestParentTrUpdate();
15505
+ }
17223
15506
  syncSlotName() {
17224
15507
  const table = this.el.closest('sd-table');
17225
15508
  const fromMethod = table?.getTableIdSync?.();
@@ -17232,7 +15515,7 @@ class SdTd {
17232
15515
  }
17233
15516
  }
17234
15517
  render() {
17235
- return (hAsync(Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
15518
+ return (hAsync(Host, { key: '84ce2fe2ea8ccb3eaf09e4d2559fc917bdb1077a', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '9b8164a2eac53b927bf59638cb53c35998a75cfe' })));
17236
15519
  }
17237
15520
  static get watchers() { return {
17238
15521
  "field": [{
@@ -17246,6 +15529,9 @@ class SdTd {
17246
15529
  }],
17247
15530
  "colspan": [{
17248
15531
  "handleSpanChange": 0
15532
+ }],
15533
+ "sdClass": [{
15534
+ "handleSdClassChange": 0
17249
15535
  }]
17250
15536
  }; }
17251
15537
  static get style() { return sdTdCss(); }
@@ -17257,7 +15543,8 @@ class SdTd {
17257
15543
  "rowKey": [1, "row-key"],
17258
15544
  "align": [1],
17259
15545
  "rowspan": [2],
17260
- "colspan": [2]
15546
+ "colspan": [2],
15547
+ "sdClass": [1, "sd-class"]
17261
15548
  },
17262
15549
  "$listeners$": undefined,
17263
15550
  "$lazyBundleId$": "-",
@@ -17336,16 +15623,16 @@ class SdTextLink {
17336
15623
  '--sd-text-link-text-decoration': typo.textDecoration,
17337
15624
  ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
17338
15625
  };
17339
- return (hAsync("span", { key: '77c1aa4a4a6297af9431947b7146db2ddfad52b5', class: {
15626
+ return (hAsync("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
17340
15627
  'sd-text-link': true,
17341
15628
  'sd-text-link--disabled': this.disabled,
17342
- }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '6f760b3c7e0adccd2aa08cb662cca90a3d3a227b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '3ff017970956d8e5cb72b4d6e26d33aaf0551e76', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: '8332cbe3b2283ce866044e55804e35338569a38f', class: "sd-text-link__arrow", style: {
15629
+ }, 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: {
17343
15630
  width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
17344
15631
  height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
17345
15632
  display: 'inline-flex',
17346
15633
  alignItems: 'center',
17347
15634
  justifyContent: 'center',
17348
- } }, hAsync("sd-icon", { key: '2fa166ef60f6d1ee933450146bc667ee89dad2ce', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
15635
+ } }, hAsync("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
17349
15636
  }
17350
15637
  static get style() { return sdTextLinkCss(); }
17351
15638
  static get cmpMeta() { return {
@@ -17492,7 +15779,7 @@ class SdTextarea {
17492
15779
  '--sd-system-size-field-sm-height': 'auto',
17493
15780
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
17494
15781
  };
17495
- return (hAsync("sd-field", { key: 'a77834af45e2ca7abaa019d18b6108a51f0cf4ae', 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: '2cbc8ef4febeab89eb336cb29d34abdbf9f2f080', class: "sd-textarea__content" }, hAsync("textarea", { key: '3b09e30b4e42affc7f03fb8a354387b57e5ee0fe', 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 }))));
15782
+ 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 }))));
17496
15783
  }
17497
15784
  static get watchers() { return {
17498
15785
  "value": [{
@@ -17546,11 +15833,12 @@ class SdTextarea {
17546
15833
  }; }
17547
15834
  }
17548
15835
 
17549
- 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}`;
15836
+ 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}`;
17550
15837
 
17551
15838
  class SdThead {
17552
15839
  constructor(hostRef) {
17553
15840
  registerInstance(this, hostRef);
15841
+ this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
17554
15842
  }
17555
15843
  get el() { return getElement(this); }
17556
15844
  columns;
@@ -17562,6 +15850,7 @@ class SdThead {
17562
15850
  scrolledRight;
17563
15851
  rows = [];
17564
15852
  columnWidths = [];
15853
+ sdColumnSort;
17565
15854
  tableId = '';
17566
15855
  _columns = [];
17567
15856
  _selectable = false;
@@ -17662,9 +15951,11 @@ class SdThead {
17662
15951
  this.tableEl.handleResize(index, event, reversed);
17663
15952
  }
17664
15953
  }
15954
+ handleColumnSort = (col) => {
15955
+ this.sdColumnSort.emit({ column: col });
15956
+ };
17665
15957
  handleSelectAll(checked) {
17666
- const currentState = this.getIsAllChecked();
17667
- const nextChecked = currentState === null ? false : !!checked;
15958
+ const nextChecked = !!checked;
17668
15959
  const safeRows = Array.isArray(this.rows) ? this.rows : [];
17669
15960
  if (this.tableEl?.toggleSelectAllSync) {
17670
15961
  this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
@@ -17684,27 +15975,42 @@ class SdThead {
17684
15975
  const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
17685
15976
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
17686
15977
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
17687
- return (hAsync(Host, { key: '5aa1e38311b542d1a0b05b55abc7ef41927508bd', slot: `${this.tableId}-head` }, hAsync("thead", { key: '6d17753988ecd02d900d8a3bd7f2115b534b68a7', class: {
15978
+ const headStyle = {
15979
+ '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
15980
+ '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
15981
+ '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
15982
+ '--table-header-bg': TABLE_HEADER_COLORS.bg,
15983
+ '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
15984
+ '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
15985
+ '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
15986
+ '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
15987
+ '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
15988
+ '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
15989
+ '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
15990
+ '--table-border-color': TABLE_BORDER.color,
15991
+ '--table-border-width': `${TABLE_BORDER.width}px`,
15992
+ };
15993
+ return (hAsync(Host, { key: 'c4468056cc20a78516e61bccaf4d11c098e83ec6', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'a9befd1728baf2104bfb9132557d5c5c0eb49748', class: {
17688
15994
  'thead': true,
17689
15995
  'thead--sticky': this._stickyHeader,
17690
- } }, hAsync("tr", { key: '9cc729603e126da2f9c8923fe29ece10c7750bb4', class: "tr" }, this._selectable && (hAsync("th", { key: '37b2bcfa77eaf4c44465684c49ae84d566acc18b', class: {
15996
+ } }, hAsync("tr", { key: 'da786d82d4896b6124becf42f634bcc5b0a6ffb7', class: "tr" }, this._selectable && (hAsync("th", { key: 'b257c5475b7e528fbfc52ea85031a4c49bed7b36', class: {
17691
15997
  'th': true,
17692
15998
  'th--selected': true,
17693
15999
  'sticky-left': true,
17694
16000
  'sticky-left-edge': stickyLeftCount === 0,
17695
16001
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
17696
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '4284894821640ee1bdbd12b1759efb01e6c06488', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
16002
+ }, 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: {
17697
16003
  'th': true,
17698
16004
  [`${col.thClass}`]: Boolean(col.thClass),
17699
16005
  'sticky-left': true,
17700
16006
  'sticky-left-edge': idx === stickyLeftCount - 1,
17701
16007
  'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
17702
- }, 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) => {
16008
+ }, 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) => {
17703
16009
  const actualColIdx = stickyLeftCount + relativeIdx;
17704
16010
  return (hAsync("th", { key: col.name, class: {
17705
16011
  th: true,
17706
16012
  [`${col.thClass}`]: Boolean(col.thClass),
17707
- }, 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) }))));
16013
+ }, 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) }))));
17708
16014
  }), stickyRightCols.map((col, relativeIdx) => {
17709
16015
  const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
17710
16016
  return (hAsync("th", { key: col.name, class: {
@@ -17713,7 +16019,7 @@ class SdThead {
17713
16019
  'sticky-right': true,
17714
16020
  'sticky-right-edge': relativeIdx === 0,
17715
16021
  'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
17716
- }, 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) }))));
16022
+ }, 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) }))));
17717
16023
  })))));
17718
16024
  }
17719
16025
  static get watchers() { return {
@@ -17774,8 +16080,7 @@ const toast = {
17774
16080
  accent: {
17775
16081
  bg: "#005CC9",
17776
16082
  content: "#FFFFFF"
17777
- }
17778
- };
16083
+ }};
17779
16084
  var toastTokens = {
17780
16085
  toast: toast
17781
16086
  };
@@ -17808,10 +16113,10 @@ class SdToast {
17808
16113
  render() {
17809
16114
  const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
17810
16115
  const iconSize = Number(TOAST_LAYOUT.iconSize);
17811
- return (hAsync("div", { key: '77954c9d285339cb48032eec5eca0dcbe308affc', style: {
16116
+ return (hAsync("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
17812
16117
  '--sd-toast-bg': typeConfig.bg,
17813
16118
  '--sd-toast-text': typeConfig.content,
17814
- } }, hAsync("div", { key: '73c792f19982140f91397a3ec7d6e22914ca316f', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'cc140bfd043b0d0cd6a7697053f736dac707f86b', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '85f38036cd39cb4d0f4a43ef0d307ef9faa03eb1', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '4d36e34a9ccac80fc2ed01f33b1e2aa80d70c78b', class: "sd-toast__content" }, hAsync("span", { key: '9105d37004bbde90e8a7118ca5a58a6e4d6953f5', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'fdaabae7d8efb6540ce770cc5783b286789cdb3c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: 'c5985e50041b8f3e8c77e142fd06afaf0537de47', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
16119
+ } }, 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() })))));
17815
16120
  }
17816
16121
  static get style() { return sdToastCss(); }
17817
16122
  static get cmpMeta() { return {
@@ -18063,7 +16368,7 @@ class SdToastContainer {
18063
16368
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
18064
16369
  const indexMap = new Map();
18065
16370
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
18066
- return (hAsync("div", { key: '5057793be2d6ce213edc84d58f7273248646dc19', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
16371
+ return (hAsync("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
18067
16372
  this.expanded = true;
18068
16373
  this.pauseTimers();
18069
16374
  }, onMouseLeave: () => {
@@ -18221,7 +16526,7 @@ class SdToggle {
18221
16526
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
18222
16527
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
18223
16528
  };
18224
- return (hAsync("label", { key: 'e9bb126d92605cdd3a88ff1840aa79a4b66c7cf8', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '41c18a29c10ae91b84ecd6d2619a40ab99f5d151', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
16529
+ 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 })));
18225
16530
  }
18226
16531
  static get style() { return sdToggleCss(); }
18227
16532
  static get cmpMeta() { return {
@@ -18348,14 +16653,14 @@ class SdTooltip {
18348
16653
  const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
18349
16654
  const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
18350
16655
  const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
18351
- return (hAsync(Fragment, { key: 'b5368ef5aced50890707aeb99c82de5784e7acf1' }, hAsync("div", { key: 'aeac6276d7e36e315093770d03671d83b339137a', 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: '7e24c9f16d326f787a7441753ae138e08ebe3f78', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '4681dfcb409ec7b072be6bf82bd42c5ebce29100', ref: el => (this.menuEl = el), class: {
16656
+ 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: {
18352
16657
  'sd-floating-menu': true,
18353
16658
  [`sd-floating-menu--${tooltipType}`]: true,
18354
16659
  [`sd-floating-menu--${placement}`]: true,
18355
16660
  }, style: {
18356
16661
  '--sd-floating-bg': typeConfig.bg,
18357
16662
  '--sd-floating-content': typeConfig.content,
18358
- }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'e74368ffeabb85d4d4257e4695b1979c8f63495d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'e4f5b3031eb0cabcadf9fd0f564f6adf4515c14f' })), hAsync("div", { key: '3399759f60874f2f8a5ebf3e2c618dab94289aec', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
16663
+ }, 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 }))))));
18359
16664
  }
18360
16665
  static get style() { return sdTooltipCss(); }
18361
16666
  static get cmpMeta() { return {
@@ -18382,7 +16687,7 @@ class SdTooltip {
18382
16687
  }; }
18383
16688
  }
18384
16689
 
18385
- 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: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}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}`;
16690
+ 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}`;
18386
16691
 
18387
16692
  class SdTr {
18388
16693
  constructor(hostRef) {
@@ -18524,6 +16829,12 @@ class SdTr {
18524
16829
  return false;
18525
16830
  return this.tableEl.isCoveredSync(this.rowKey, colIdx, this._columns);
18526
16831
  }
16832
+ getCellClassFor(col) {
16833
+ if (!this.tableEl?.getCellClassSync)
16834
+ return undefined;
16835
+ const fieldName = typeof col.field === 'string' ? col.field : col.name;
16836
+ return this.tableEl.getCellClassSync(this.rowKey, fieldName);
16837
+ }
18527
16838
  render() {
18528
16839
  const stickyLeftCount = this._stickyColumn.left || 0;
18529
16840
  const stickyRightCount = this._stickyColumn.right || 0;
@@ -18531,16 +16842,29 @@ class SdTr {
18531
16842
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
18532
16843
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
18533
16844
  const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
18534
- return (hAsync(Host, { key: 'e8d387043d3384daffb5d548176b469a91264225', style: { display: this.isVisible ? '' : 'none' } }, hAsync("tr", { key: '1d579819497a6186941b0c80c916a83c48dfcc0d', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { key: '1a8ab44a8c65926eb9a7bd9e9224d0eed55ecfb1', class: {
16845
+ const rowStyle = {
16846
+ display: this.isVisible ? '' : 'none',
16847
+ '--table-body-height': `${TABLE_BODY_LAYOUT.default.height}px`,
16848
+ '--table-body-padding-x': `${TABLE_BODY_LAYOUT.paddingX}px`,
16849
+ '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
16850
+ '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
16851
+ '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
16852
+ '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
16853
+ '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
16854
+ '--table-border-color': TABLE_BORDER.color,
16855
+ '--table-border-width': `${TABLE_BORDER.width}px`,
16856
+ };
16857
+ return (hAsync(Host, { key: '5ed784dad3eb187430efe30ed0bc0f153bf57f23', style: rowStyle }, hAsync("tr", { key: 'bcdc07139fce88788a598ced264f3aad503882fe', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { key: '0b2b516a0d2b57beb7bb37ea3ab2c34836cc772c', class: {
18535
16858
  'td': true,
18536
16859
  'td--selected': true,
18537
16860
  'sticky-left': true,
18538
16861
  'sticky-left-edge': stickyLeftCount === 0,
18539
16862
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
18540
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '72bdbadc76dcb0682eb4de496e9abda692a0ea7e', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
16863
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '3fb6dc05e2b0e75bd70ff5b9631330ce2348bd22', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
18541
16864
  if (this.isCovered(idx))
18542
16865
  return null;
18543
16866
  const span = this.getSpanFor(col);
16867
+ const sdCellClass = this.getCellClassFor(col);
18544
16868
  return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
18545
16869
  'td': true,
18546
16870
  [`td--${col.align || 'left'}`]: true,
@@ -18548,6 +16872,7 @@ class SdTr {
18548
16872
  'sticky-left-edge': idx === stickyLeftCount - 1,
18549
16873
  'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
18550
16874
  [`${col.tdClass}`]: Boolean(col.tdClass),
16875
+ [`${sdCellClass}`]: Boolean(sdCellClass),
18551
16876
  }, 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)))));
18552
16877
  }), middleCols.map((col, relativeIdx) => {
18553
16878
  const actualColIdx = stickyLeftCount + relativeIdx;
@@ -18555,10 +16880,12 @@ class SdTr {
18555
16880
  return null;
18556
16881
  const fieldName = typeof col.field === 'string' ? col.field : col.name;
18557
16882
  const span = this.getSpanFor(col);
16883
+ const sdCellClass = this.getCellClassFor(col);
18558
16884
  return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
18559
16885
  td: true,
18560
16886
  [`td--${col.align || 'left'}`]: true,
18561
16887
  [`${col.tdClass}`]: Boolean(col.tdClass),
16888
+ [`${sdCellClass}`]: Boolean(sdCellClass),
18562
16889
  }, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
18563
16890
  }), stickyRightCols.map((col, relativeIdx) => {
18564
16891
  const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
@@ -18566,6 +16893,7 @@ class SdTr {
18566
16893
  return null;
18567
16894
  const fieldName = typeof col.field === 'string' ? col.field : col.name;
18568
16895
  const span = this.getSpanFor(col);
16896
+ const sdCellClass = this.getCellClassFor(col);
18569
16897
  return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
18570
16898
  'td': true,
18571
16899
  [`td--${col.align || 'left'}`]: true,
@@ -18573,6 +16901,7 @@ class SdTr {
18573
16901
  'sticky-right-edge': relativeIdx === 0,
18574
16902
  'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
18575
16903
  [`${col.tdClass}`]: Boolean(col.tdClass),
16904
+ [`${sdCellClass}`]: Boolean(sdCellClass),
18576
16905
  }, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
18577
16906
  }))));
18578
16907
  }
@@ -18608,7 +16937,6 @@ class SdTr {
18608
16937
  }
18609
16938
 
18610
16939
  registerComponents([
18611
- DataTable,
18612
16940
  SdActionModal,
18613
16941
  SdBadge,
18614
16942
  SdBarcodeInput,
@@ -18643,23 +16971,14 @@ registerComponents([
18643
16971
  SdPagination,
18644
16972
  SdPopover,
18645
16973
  SdPortal,
18646
- SdProgress,
18647
16974
  SdRadio,
18648
16975
  SdRadioButton,
18649
16976
  SdRadioGroup,
18650
16977
  SdSelect,
18651
- SdSelectDropdown,
18652
- SdSelectGroup,
18653
- SdSelectMultiple,
18654
- SdSelectMultipleGroup,
18655
- SdSelectOption,
18656
- SdSelectOptionGroup,
18657
- SdSelectSearchInput,
18658
- SdSelectV2,
18659
- SdSelectV2ListItem,
18660
- SdSelectV2ListItemSearch,
18661
- SdSelectV2Listbox,
18662
- SdSelectV2Trigger,
16978
+ SdSelectListItem,
16979
+ SdSelectListItemSearch,
16980
+ SdSelectListbox,
16981
+ SdSelectTrigger,
18663
16982
  SdSwitch,
18664
16983
  SdTable,
18665
16984
  SdTabs,