@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.mjs CHANGED
@@ -134,7 +134,7 @@ var node_crypto = require('node:crypto');
134
134
  const NAMESPACE = 'design-system';
135
135
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
136
136
 
137
- const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:12px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:20px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:12px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:22px;--sd-system-typography-control-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-font-size:16px;--sd-system-typography-control-md-font-weight:500;--sd-system-typography-control-md-text-decoration:none;--sd-system-typography-control-md-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-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}";
137
+ const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:12px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:20px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:12px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:22px;--sd-system-typography-control-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-font-size:16px;--sd-system-typography-control-md-font-weight:500;--sd-system-typography-control-md-text-decoration:none;--sd-system-typography-control-md-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-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}";
138
138
 
139
139
  /*
140
140
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5207,116 +5207,6 @@ var setScopedSSR = (opts) => {
5207
5207
  var needsScopedSSR = () => scopedSSR;
5208
5208
  var scopedSSR = false;
5209
5209
 
5210
- 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}`;
5211
-
5212
- class DataTable {
5213
- constructor(hostRef) {
5214
- registerInstance(this, hostRef);
5215
- this.tableReady = createEvent(this, "tableReady", 7);
5216
- }
5217
- get el() { return getElement(this); }
5218
- /** Column definitions array */
5219
- columns = [];
5220
- /** Row data array */
5221
- rows = [];
5222
- /** Show cell borders */
5223
- bordered = true;
5224
- /** Alternate row colors */
5225
- striped = false;
5226
- cellRenderers = new Map();
5227
- headerRenderers = new Map();
5228
- tableReady;
5229
- dataChanged() {
5230
- this.tableReady.emit();
5231
- }
5232
- componentDidLoad() {
5233
- this.tableReady.emit();
5234
- }
5235
- async setCellRenderer(field, renderer) {
5236
- this.cellRenderers = new Map(this.cellRenderers).set(field, renderer);
5237
- }
5238
- async setHeaderRenderer(field, renderer) {
5239
- this.headerRenderers = new Map(this.headerRenderers).set(field, renderer);
5240
- }
5241
- async removeCellRenderer(field) {
5242
- const newMap = new Map(this.cellRenderers);
5243
- newMap.delete(field);
5244
- this.cellRenderers = newMap;
5245
- }
5246
- async clearAllRenderers() {
5247
- this.cellRenderers = new Map();
5248
- this.headerRenderers = new Map();
5249
- }
5250
- renderCellContent(column, row, rowIndex) {
5251
- const value = row[column.field];
5252
- const renderer = this.cellRenderers.get(column.field);
5253
- if (renderer) {
5254
- const html = renderer({ field: column.field, value, row, rowIndex });
5255
- return hAsync("span", { class: "cell-content", innerHTML: html });
5256
- }
5257
- const template = this.el.querySelector(`[slot="cell-${column.field}"]`);
5258
- if (template) {
5259
- const html = this.processTemplate(template.innerHTML, { value, row, rowIndex });
5260
- return hAsync("span", { class: "cell-content", innerHTML: html });
5261
- }
5262
- return hAsync("span", { class: "cell-content" }, value);
5263
- }
5264
- renderHeaderContent(column) {
5265
- const renderer = this.headerRenderers.get(column.field);
5266
- if (renderer) {
5267
- const html = renderer({ field: column.field, column });
5268
- return hAsync("span", { innerHTML: html });
5269
- }
5270
- const template = this.el.querySelector(`[slot="header-${column.field}"]`);
5271
- if (template) {
5272
- return hAsync("span", { innerHTML: template.innerHTML });
5273
- }
5274
- return column.header || column.field;
5275
- }
5276
- processTemplate(html, data) {
5277
- return html
5278
- .replace(/\{\{value\}\}/g, this.escapeHtml(String(data.value ?? '')))
5279
- .replace(/\{\{rowIndex\}\}/g, String(data.rowIndex))
5280
- .replace(/\{\{row\.(\w+)\}\}/g, (_, prop) => this.escapeHtml(String(data.row[prop] ?? '')));
5281
- }
5282
- escapeHtml(str) {
5283
- const el = document.createElement('div');
5284
- el.textContent = str;
5285
- return el.innerHTML;
5286
- }
5287
- render() {
5288
- 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' }))));
5289
- }
5290
- static get watchers() { return {
5291
- "columns": [{
5292
- "dataChanged": 0
5293
- }],
5294
- "rows": [{
5295
- "dataChanged": 0
5296
- }]
5297
- }; }
5298
- static get style() { return tableTestCss(); }
5299
- static get cmpMeta() { return {
5300
- "$flags$": 777,
5301
- "$tagName$": "table-test",
5302
- "$members$": {
5303
- "columns": [16],
5304
- "rows": [16],
5305
- "bordered": [4],
5306
- "striped": [4],
5307
- "cellRenderers": [32],
5308
- "headerRenderers": [32],
5309
- "setCellRenderer": [64],
5310
- "setHeaderRenderer": [64],
5311
- "removeCellRenderer": [64],
5312
- "clearAllRenderers": [64]
5313
- },
5314
- "$listeners$": undefined,
5315
- "$lazyBundleId$": "-",
5316
- "$attrsToReflect$": []
5317
- }; }
5318
- }
5319
-
5320
5210
  const modal$1 = {
5321
5211
  radius: "8",
5322
5212
  confirm: {
@@ -5446,7 +5336,7 @@ class SdActionModal {
5446
5336
  if (this.height != null && this.height !== '') {
5447
5337
  sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
5448
5338
  }
5449
- 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() })))));
5339
+ 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() })))));
5450
5340
  }
5451
5341
  static get style() { return sdActionModalCss(); }
5452
5342
  static get cmpMeta() { return {
@@ -5499,7 +5389,7 @@ class SdBadge {
5499
5389
  label = '';
5500
5390
  render() {
5501
5391
  const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
5502
- 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)));
5392
+ 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)));
5503
5393
  }
5504
5394
  static get style() { return sdBadgeCss(); }
5505
5395
  static get cmpMeta() { return {
@@ -5709,7 +5599,7 @@ class SdBarcodeInput {
5709
5599
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
5710
5600
  '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
5711
5601
  };
5712
- 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 () => {
5602
+ 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 () => {
5713
5603
  if (this.disabled)
5714
5604
  return;
5715
5605
  this.internalValue = '';
@@ -6436,13 +6326,13 @@ class SdButtonV2 {
6436
6326
  const hasLabel = Boolean(this.label);
6437
6327
  const iconOnly = !this.label && Boolean(this.icon) !== Boolean(this.rightIcon);
6438
6328
  const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
6439
- return (hAsync("button", { key: '19a9be4f92af097e104f64e890203aab3f897c61', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
6329
+ return (hAsync("button", { key: 'e3e2074fbe2b48117d5834efac7ff3036757aab3', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
6440
6330
  '--sd-button-v2-bg': config.color,
6441
6331
  '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
6442
6332
  '--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
6443
6333
  '--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
6444
6334
  '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
6445
- }, 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)" })))));
6335
+ }, 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)" })))));
6446
6336
  }
6447
6337
  static get style() { return sdButtonV2Css(); }
6448
6338
  static get cmpMeta() { return {
@@ -6680,7 +6570,7 @@ class SdCard {
6680
6570
  bordered = false;
6681
6571
  sdClass = '';
6682
6572
  render() {
6683
- return (hAsync(Fragment, { key: '299b67c4e5a95d03c67bfe7a7cc13cfda642e494' }, hAsync("div", { key: '44630cec810c1ee0cc6526764adbae866f3d68f0', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'bbcb7e2332b1772cff4fd3b132e6378f6fbc0832' }))));
6573
+ return (hAsync(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, hAsync("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
6684
6574
  }
6685
6575
  static get style() { return sdCardCss(); }
6686
6576
  static get cmpMeta() { return {
@@ -6854,6 +6744,9 @@ class SdCheckbox {
6854
6744
  valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
6855
6745
  newValue = Array.from(valueSet);
6856
6746
  }
6747
+ else if (this.value === null) {
6748
+ newValue = false;
6749
+ }
6857
6750
  else {
6858
6751
  newValue = !this.isChecked;
6859
6752
  }
@@ -6881,13 +6774,13 @@ class SdCheckbox {
6881
6774
  '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
6882
6775
  '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
6883
6776
  };
6884
- return (hAsync("label", { key: '1a1c4dac0a2ce24ae51ce0baba74a7add387aa2f', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '4a45bc9bbaaf6ddaebf3445045ab7b1f789f81d5', type: "checkbox", ref: el => {
6777
+ return (hAsync("label", { key: '0e4a142753f8ceda6356c184f1f227e9f11b8a43', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '53f7bac2fbc2c197ddcc2bb3cd0779598155af4c', type: "checkbox", ref: el => {
6885
6778
  this.inputEl = el;
6886
- }, 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
6779
+ }, 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
6887
6780
  ? CHECKBOX_COLORS.checked.iconDisabled
6888
6781
  : this.inverse
6889
6782
  ? CHECKBOX_COLORS.checked.iconInverse
6890
- : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: 'd791d977073b0916917c7ce770cf73c1ff81f3bd', class: "sd-checkbox__label" }, this.label)));
6783
+ : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: 'dcb8b972e88aa06d0a338ce8d2e2b86a0fbd8f3f', class: "sd-checkbox__label" }, this.label)));
6891
6784
  }
6892
6785
  static get watchers() { return {
6893
6786
  "value": [{
@@ -7201,7 +7094,7 @@ class SdChip {
7201
7094
  '--sd-chip-font-weight': typography.fontWeight,
7202
7095
  '--sd-chip-line-height': typography.lineHeight,
7203
7096
  };
7204
- return (hAsync("span", { key: '7d84dd478510c7e144fd049028f2f0a70a909016', class: {
7097
+ return (hAsync("span", { key: 'a821268b6bc2d04bd311b238009b750424e04e72', class: {
7205
7098
  'sd-chip': true,
7206
7099
  [`sd-chip--${state}`]: true,
7207
7100
  'sd-chip--disabled': this.disabled,
@@ -7278,18 +7171,24 @@ const color = {
7278
7171
  bg: {
7279
7172
  accent: {
7280
7173
  "default": "#0075FF"}},
7281
- content: {
7174
+ fg: {
7282
7175
  primary: "#222222",
7283
7176
  secondary: "#555555",
7284
7177
  tertiary: "#888888",
7285
7178
  inverse: "#FFFFFF"
7286
- }};
7179
+ },
7180
+ blue: {
7181
+ strong: "#0075FF"},
7182
+ darkblue: {
7183
+ strong: "#006AC1"},
7184
+ grey: {
7185
+ strong: "#737373"}};
7287
7186
  var systemTokens = {
7288
7187
  color: color
7289
7188
  };
7290
7189
 
7291
7190
  const CIRCLE_PROGRESS_LABEL_COLOR = progressTokens.progress.color.label;
7292
- const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.content.tertiary;
7191
+ const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.fg.tertiary;
7293
7192
  // TODO: error/complete 색상 및 inverse 흰색은 토큰 반영 후 교체
7294
7193
  const CIRCLE_PROGRESS_COLOR_MAP = {
7295
7194
  primary: {
@@ -7346,7 +7245,7 @@ class SdCircleProgress {
7346
7245
  }
7347
7246
  const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
7348
7247
  const showPercent = !this.indeterminate;
7349
- 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)));
7248
+ 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)));
7350
7249
  }
7351
7250
  static get style() { return sdCircleProgressCss(); }
7352
7251
  static get cmpMeta() { return {
@@ -7457,9 +7356,9 @@ class SdConfirmModal {
7457
7356
  render() {
7458
7357
  const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
7459
7358
  const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
7460
- 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 => {
7359
+ 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 => {
7461
7360
  this.customContentRef = el;
7462
- } })) : (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() }))));
7361
+ } })) : (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() }))));
7463
7362
  }
7464
7363
  static get style() { return sdConfirmModalCss(); }
7465
7364
  static get cmpMeta() { return {
@@ -7560,7 +7459,8 @@ const datepicker = {
7560
7459
  fontWeight: "400",
7561
7460
  fontSize: "12",
7562
7461
  lineHeight: "20"},
7563
- radius: "4"},
7462
+ radius: "4"
7463
+ },
7564
7464
  md: {
7565
7465
  height: "36",
7566
7466
  paddingX: "16",
@@ -7571,7 +7471,8 @@ const datepicker = {
7571
7471
  fontSize: "14",
7572
7472
  lineHeight: "24"
7573
7473
  },
7574
- radius: "6"},
7474
+ radius: "6"
7475
+ },
7575
7476
  border: {
7576
7477
  "default": "#AAAAAA",
7577
7478
  focus: "#0075FF"},
@@ -7817,9 +7718,9 @@ class SdDatePicker {
7817
7718
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
7818
7719
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
7819
7720
  };
7820
- return (hAsync("sd-field", { key: '97dcd4d3065ba7c0fa587b3d533dcda82b87c188', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '9c0a6874eb6fbf3e8a928048f189d3b139e385df', class: "sd-date-picker", ref: el => {
7721
+ return (hAsync("sd-field", { key: 'd55b2123cc862d5f12fdd429b02b622946b58cc4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '79e47e4e02e8b30dc2651a9c4aab3950a8662f52', class: "sd-date-picker", ref: el => {
7821
7722
  this.triggerRef = el;
7822
- } }, hAsync("sd-date-picker-trigger", { key: 'e54065e86cb36c8abed1041a2d13edcbba861d8f', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '96c2aa277f54315ac2f6e29b861ebb94b3cc4f75', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: 'ea2513fb3d150a53895b6f657a7a6acc5541045f', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7723
+ } }, hAsync("sd-date-picker-trigger", { key: '7b09873b1e58aed36d4fb0dadb02d21ea6c2b309', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'fd60a9df30dfc459798a8e537acdf16ed9f94844', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: '0478f726cb51fe533b829f3eb0ce46d2fbf0ba94', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7823
7724
  }
7824
7725
  static get watchers() { return {
7825
7726
  "isOpen": [{
@@ -8001,7 +7902,7 @@ class SdDatePickerCalendar {
8001
7902
  '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
8002
7903
  '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
8003
7904
  };
8004
- return (hAsync("div", { key: 'ac86be94b03ba15d7dfd885f96fb29a988468e30', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '64a116ef69725d8f51eed4b54ed0f73e1dc23f9d', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: 'f0372d3d91dc9d1917ada3677baa4841074d6e22', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '133611ecd17975064fce932a6cc6c23478d93c3a', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '4445d069e21ac31b46c62ee8d7c213b72c7f787c', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '407f906335b31b5c70018f53a21d0e7d0cbc39ee', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: 'ddf5d7348d5833988b5a12ece9209624842e40ee', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '19a362b93db20bfaf63b6f8552a60d9baf3d7c24', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '9618b3ebfadf65a7d8abfa8a7360b8fcccbf68b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '2b989a40ad784a08f42a6571817431c028720564', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '60ab56cdfbd93e2cd0fa4453d44e540393ac5296', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: '337ad71a09089b1771e734aa591b243abe226d92', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), hAsync("div", { key: 'baf0ad26ee64044f0af3b8126efaafe94feba8a4', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
7905
+ return (hAsync("div", { key: 'baeaf5925dd87084b4f22445cc2fa6fe879d8faf', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '784e0bb6698dc097d8fa9b136ec8bc1d82cfe798', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: 'e42d77c2a1c5d7c23e058b111ed87d3d27c9b465', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: 'fd5573590ca5c7aaf5b07a594d65f4f168d526d7', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: 'd8d2f3fcb2dca348c99f5a461260278ddf1ab16b', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: 'f134fdd299bcead5d9ce594355f1c58be057fbbe', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '14ab983354ded802bb715516872b0148acc3cd66', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: 'f8b0754ff487c944cf95fcb2fd05c2ca596b3107', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '47d95d368b04f1ff81c416d93ba3bb9a5481f3cb', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'baf40a29a0aacd3c868c0ca63035c09080f412af', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '4b8f189022d7c61072f07b23c5576410183bc801', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'c6b4251396b957905e0462a62ca5b8475c375dd6', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), hAsync("div", { key: '76a1fe94ca8943f8cf0e7be30b8a9838a9cd22ef', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
8005
7906
  const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
8006
7907
  const isToday = cell.inCurrentMonth && today === cell.date;
8007
7908
  const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -8072,10 +7973,10 @@ class SdDatePickerTrigger {
8072
7973
  ? DATEPICKER_COLORS.icon.disabled
8073
7974
  : DATEPICKER_COLORS.icon.default,
8074
7975
  };
8075
- return (hAsync("div", { key: '48f426459dfa50a5fab8e8e9c597b9a3c3f011c1', class: {
7976
+ return (hAsync("div", { key: 'f541c11d4e7385993628e10f0eeb7a339f80e1f6', class: {
8076
7977
  'sd-date-picker-trigger': true,
8077
7978
  'sd-date-picker-trigger--disabled': this.disabled,
8078
- }, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: 'd5309ad89fe5232fea4a086784cfd28f920450c0', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '6885fdfce1384cc43cded08a40889edb15ba1108', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
7979
+ }, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: '19c51b2ae2dc354010f6727048fd7a64c17ed36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '73a6dd7cd398202edabecd348a4856315e077088', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
8079
7980
  }
8080
7981
  static get style() { return sdDatePickerTriggerCss(); }
8081
7982
  static get cmpMeta() { return {
@@ -8495,7 +8396,7 @@ class SdDateRangePickerCalendar {
8495
8396
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
8496
8397
  '--range-divider': RANGE_LAYOUT.divider,
8497
8398
  };
8498
- return (hAsync(Fragment, { key: 'b420e317ccefa8b143d781d916c0a60c8be15d2f' }, hAsync("div", { key: 'ec537bf3ed58f6b18e80f885d78d8e5dcca7ecfe', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '70afdc7311c5707c6d639034fa14c6f5ca2aa3d2', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'a400c8d9d3a0b1a4e13e7d4de004da550e91916f', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
8399
+ return (hAsync(Fragment, { key: 'acc32d9c349c4cee32bb923ce66d17122527b524' }, hAsync("div", { key: 'bd579429ae609c3ff21a542bf69c1dc9a907846a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '8a46d922fcaa09bd7f778d00e77324d1710b92c7', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '8234838995f1e5d945f85169e702cb0b32018f36', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
8499
8400
  }
8500
8401
  static get watchers() { return {
8501
8402
  "value": [{
@@ -8623,9 +8524,9 @@ const PRESET_DIVIDER_COLORS = {
8623
8524
  danger: buttonTokens.button.danger.strong.dropdown.divider,
8624
8525
  danger_outline: PRESET_BORDER_COLORS.danger_outline,
8625
8526
  };
8626
- const MENU_ITEM_COLOR = systemTokens.color.content.secondary;
8527
+ const MENU_ITEM_COLOR = systemTokens.color.fg.secondary;
8627
8528
  const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
8628
- const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.content.inverse;
8529
+ const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.fg.inverse;
8629
8530
  const PRESET_MENU_ITEM_COLORS = {
8630
8531
  primary: MENU_ITEM_COLOR,
8631
8532
  secondary: MENU_ITEM_COLOR,
@@ -8850,7 +8751,7 @@ class SdDropdownButton extends BaseDropdownEvent {
8850
8751
  }
8851
8752
  render() {
8852
8753
  const { config, preset } = this.resolvedConfig;
8853
- return (hAsync("div", { key: '3a9e74c689c0345c89dbaeba5814164b72fe7108', class: "sd-dropdown-button" }, hAsync("button", { key: '1633f3a0348082ec2433a6a1e7c41a64a797a725', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
8754
+ return (hAsync("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, hAsync("button", { key: '4bd3e86eec90698188a834eb35ff922dee7d1855', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
8854
8755
  '--sd-dropdown-button-bg': config.color,
8855
8756
  '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
8856
8757
  '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -8860,10 +8761,10 @@ class SdDropdownButton extends BaseDropdownEvent {
8860
8761
  '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
8861
8762
  '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
8862
8763
  '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
8863
- } }, hAsync("span", { key: '7378e3aa3c4cf2991f3a92511f10ca1834af9563', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: 'd5b59ccaad1985e3a50bb9a53b0a156a1e2e28a9', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'a24ed74d95ac1866abf9f3ed7a1c4b7bfe2c56c8', class: {
8764
+ } }, hAsync("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
8864
8765
  'sd-dropdown-button__trigger-icon': true,
8865
8766
  'sd-dropdown-button__trigger-icon--open': this.isOpen,
8866
- }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '7cb8cf5665f3ee2e252f4c0471daee31f4af0c7b', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
8767
+ }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
8867
8768
  }
8868
8769
  static get watchers() { return {
8869
8770
  "isOpen": [{
@@ -8963,14 +8864,11 @@ const FIELD_LABEL_SIZE_MAP = {
8963
8864
  const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
8964
8865
 
8965
8866
  const FORM_PARENT_TAGS = [
8966
- 'sd-select',
8967
- 'sd-select-multiple',
8968
- 'sd-select-multiple-group',
8969
8867
  'sd-input',
8970
8868
  'sd-barcode-input',
8971
8869
  'sd-textarea',
8972
8870
  'sd-number-input',
8973
- 'sd-select-v2',
8871
+ 'sd-select',
8974
8872
  'sd-file-picker',
8975
8873
  'sd-date-picker',
8976
8874
  'sd-date-range-picker',
@@ -9134,20 +9032,20 @@ class SdField {
9134
9032
  : {}),
9135
9033
  }
9136
9034
  : {};
9137
- return (hAsync("div", { key: '218df97b257b97f4801a31a11d4cf2072f981f07', class: {
9035
+ return (hAsync("div", { key: 'f7cec98818159adf5fd398bd15547ed1ec555092', class: {
9138
9036
  'sd-field': true,
9139
9037
  'sd-field--has-label': !!this.label,
9140
9038
  'sd-field--has-addon': !!addon,
9141
9039
  [this.fieldStatus]: !!this.fieldStatus,
9142
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '66fb430b166850197649a46cd07068782636e932', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'f9dafcf19258a3253de84d35a7fd368d87232f95', class: "sd-field__main", style: this.width
9040
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '2d6ffefc9211137dc215686874060b1d5067031d', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '2163413b937af3c1874f41bc2581a0304b7d069a', class: "sd-field__main", style: this.width
9143
9041
  ? {
9144
9042
  width: typeof this.width === 'number' ? `${this.width}px` : this.width,
9145
9043
  flex: 'none',
9146
9044
  }
9147
- : {} }, hAsync("div", { key: '1f4176fb04ba648fc2971904daa88974a4526868', class: {
9045
+ : {} }, hAsync("div", { key: '0dbb6cbe768bac1c64d72d37d270805e16936e24', class: {
9148
9046
  'sd-field__control': true,
9149
9047
  'sd-field__control--has-addon': !!addon,
9150
- } }, addon && hAsync("div", { key: 'fd90999129ed8ab6b9870d73083048de8e8987f6', class: "sd-field__addon" }, addon), hAsync("slot", { key: '9dbf3d99538016095c436619f9ad20f64fa20834' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
9048
+ } }, addon && hAsync("div", { key: '8b4bfbf6ad67084a0bc9c3ff6789936ad895e3c5', class: "sd-field__addon" }, addon), hAsync("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
9151
9049
  }
9152
9050
  renderLabel(label) {
9153
9051
  if (!label)
@@ -9293,7 +9191,7 @@ class SdFilePicker {
9293
9191
  if (this.fileInputRef) {
9294
9192
  this.fileInputRef.value = '';
9295
9193
  }
9296
- await this.formField?.sdReset();
9194
+ await this.formField?.sdResetValidation();
9297
9195
  }
9298
9196
  async sdResetValidate() {
9299
9197
  await this.formField?.sdResetValidation();
@@ -9626,7 +9524,7 @@ class SdFloatingPopover {
9626
9524
  }
9627
9525
  }
9628
9526
  render() {
9629
- return hAsync("slot", { key: '2ee14400df156cb766c0f88b77bc232263b3c7e2' });
9527
+ return hAsync("slot", { key: '2383aafb9b01881f06e4fc97c5903c19453b8b4c' });
9630
9528
  }
9631
9529
  static get style() { return sdFloatingPortalCss(); }
9632
9530
  static get cmpMeta() { return {
@@ -9899,7 +9797,7 @@ class SdGhostButton {
9899
9797
  ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
9900
9798
  : GHOST_BUTTON_CONTENT_COLORS[this.intent];
9901
9799
  const accessibleName = this.ariaLabel.trim() || undefined;
9902
- return (hAsync("button", { key: 'd7f6fcbed3526ffb8b90b205dbe2bbf55abf03a0', class: {
9800
+ return (hAsync("button", { key: '57793e0911fc49c62ab627bd7234caf9c0a04097', class: {
9903
9801
  'sd-ghost-button': true,
9904
9802
  'sd-ghost-button--disabled': this.disabled,
9905
9803
  }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -9908,7 +9806,7 @@ class SdGhostButton {
9908
9806
  '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
9909
9807
  '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
9910
9808
  '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
9911
- }, onClick: this.handleClick }, hAsync("sd-icon", { key: '9efc3a3fbf7878a9a50b2efbf054b335d9cddfe0', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9809
+ }, onClick: this.handleClick }, hAsync("sd-icon", { key: 'cf81a34495eacad4052ad7bbd5cba837b905610b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9912
9810
  }
9913
9811
  static get style() { return sdGhostButtonCss(); }
9914
9812
  static get cmpMeta() { return {
@@ -9990,7 +9888,7 @@ var guideTokens = {
9990
9888
  };
9991
9889
 
9992
9890
  const { button, contents} = guideTokens.guide;
9993
- const NOTION_ICON_COLOR = systemTokens.color.content.primary;
9891
+ const NOTION_ICON_COLOR = systemTokens.color.fg.primary;
9994
9892
  const GUIDE_CONFIG = {
9995
9893
  button: {
9996
9894
  height: `${button.height}px`,
@@ -10819,12 +10717,12 @@ class SdInput {
10819
10717
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
10820
10718
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
10821
10719
  };
10822
- return (hAsync("sd-field", { key: 'ff73dfa4d23c7bf1a29f853d50e0d31bddb094ea', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '0a986cccfbd55984a51676cbf5393634819e766d', class: "sd-input__content" }, hAsync("slot", { key: '068bfd70601f3b191a51bb45ac02679acf99a069', name: "prefix" }), hAsync("input", { key: '54dbd7b7e4bffcfa25b9d68800fb334c0dfa0da0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'c0e03839176c6612eb8b0532bce3341de3db90c3', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '0019f58900c721c52216f7686b8b198f855c76ec', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10720
+ return (hAsync("sd-field", { key: 'ff139feaafdaa57e012dc559ab1a0db26dfd97b0', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '188f24de316b14315fa0bdf312c58140e757cfa3', class: "sd-input__content" }, hAsync("slot", { key: '35d2213601e3c3508b7392096719d7841aebc6bb', name: "prefix" }), hAsync("input", { key: '0148de670febb2bc02a95a3c6c4c1a6cee523626', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '4a8bd55a4cfd25f482b1fcabb84f8ffffbbc8072', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '5c11a19971dceba378a4ea77f3f40d7b3d928214', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10823
10721
  if (this.disabled)
10824
10722
  return;
10825
10723
  this.internalValue = '';
10826
10724
  await this.formField?.sdValidate();
10827
- } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '63dbd526a1a9e67bd41483211bf9a005dc0dc93f', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
10725
+ } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '92cb57b65e70a499c48e73f028e30715f1b1356c', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
10828
10726
  if (this.disabled)
10829
10727
  return;
10830
10728
  this.passwordVisible = !this.passwordVisible;
@@ -10893,7 +10791,7 @@ const LINEAR_PROGRESS_COLORS = {
10893
10791
  track: progressTokens.progress.color.track,
10894
10792
  label: progressTokens.progress.color.label,
10895
10793
  valueOnFill: progressTokens.progress.bar.text,
10896
- valueZero: systemTokens.color.content.tertiary,
10794
+ valueZero: systemTokens.color.fg.tertiary,
10897
10795
  };
10898
10796
  const LINEAR_PROGRESS_FILL_COLOR_MAP = {
10899
10797
  primary: progressTokens.progress.active.color,
@@ -10934,7 +10832,7 @@ class SdLinearProgress {
10934
10832
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
10935
10833
  };
10936
10834
  const valueText = `${Math.round(this.clampedValue)}%`;
10937
- return (hAsync(Host, { key: '7a639f88907718e71692f08beaa4ff32a913990c', style: hostStyle }, hAsync("div", { key: '0e9dc34a18d5497c67ce890e9976d98ff46a7cae', class: 'sd-linear-progress__track' }, hAsync("div", { key: 'b06985fa70196b47046907bbf72f73518e731614', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'b7ca66daa73439d52243f21991131dd40704c018', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: 'c2a8886d6e8402c29607287ae3a1c489138b38ce', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '36024d7cfbe5c932821744fa30f6366bf7a75302', class: 'sd-linear-progress__label' }, this.label)));
10835
+ return (hAsync(Host, { key: 'c7f2324ff98e1ec6e0d1d6c7a3328dd383a1abab', style: hostStyle }, hAsync("div", { key: 'cff100404519c4114c0dd1240715beafb91acf1f', class: 'sd-linear-progress__track' }, hAsync("div", { key: '1c7fdff123778a40cd0c3f3310141ac369205352', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'ae0b515a9bb9d5561d603fa8e88c144603af8af5', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '5d7cdf9daccd9729729bec7bc65456b5727d4738', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'd131eeb581e33f40878b47541f662aca269a6759', class: 'sd-linear-progress__label' }, this.label)));
10938
10836
  }
10939
10837
  static get style() { return sdLinearProgressCss(); }
10940
10838
  static get cmpMeta() { return {
@@ -10968,10 +10866,10 @@ class SdLoadingContainer {
10968
10866
  this.visible = false;
10969
10867
  }
10970
10868
  render() {
10971
- return (hAsync("div", { key: '14ae9c222f613129ac2819ee46b7dd0a248b93da', class: {
10869
+ return (hAsync("div", { key: 'a83b33262d59ecba12b7db9ed6bfe9f1fea4a54a', class: {
10972
10870
  'sd-loading-container': true,
10973
10871
  'sd-loading-container--visible': this.visible,
10974
- }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: 'a84dca0f4d3582c041ee97965db92a1fff778bd4', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '9793e443e8371a30572ca9b185e0bcfb09d2d1e1', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '1ea2e88043ece1b7c6ff9fe210d7d765d738bbfa', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '20e8a1cd1205186ec419b164b9e4873eb37045ea', class: "sd-loading-container__message" }, this.message)))));
10872
+ }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '64631929afd47606df0d397747495d2a11d62932', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '4a304e0fb66f720b57da1e4de03fa9aa5468d5d4', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '3981cb8e994384279a812864037a8e9cec34cc35', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '8adec0ef2424fa3ea30a58b27efa6344ada94070', class: "sd-loading-container__message" }, this.message)))));
10975
10873
  }
10976
10874
  static get style() { return sdLoadingContainerCss(); }
10977
10875
  static get cmpMeta() { return {
@@ -11064,7 +10962,7 @@ class SdLoadingModal {
11064
10962
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
11065
10963
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
11066
10964
  };
11067
- return (hAsync(Host, { key: '3113deea33ae8f08ac631e53744c94dfc0ffe829', style: hostStyle }, hAsync("div", { key: 'd6afa60fe2cf83bd1afd707e8aa218d2c66d761b', class: "sd-loading-modal" }, hAsync("div", { key: 'be70c3adcbea4fca528f459ad7fbc33e82649073', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '9aa73a423423e093606e58796490be123e5fa52a', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '59fd5cf61b53f1362974a7b92ad6e6319f141def', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '9bfe53124cd1f8a3008d8a2ccc6ea9d8af5d62c2', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
10965
+ return (hAsync(Host, { key: '4245588093d82ec791b4ba7260eb3a1314c0e7a8', style: hostStyle }, hAsync("div", { key: '4ad4c57bf68a5e33b453ed5ebb19f590f2ff8a9d', class: "sd-loading-modal" }, hAsync("div", { key: 'bd45817bad45b9cffc9917d5f6570cb7409e8703', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '16a09029e732058a4cdf0330e4afaf7322a88f76', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: 'cdf9a51d233efcc86fa2405960f2ed304a07127b', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '36cd4b36d92fb725eb35a9d6bee7fd0c8fcf3395', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
11068
10966
  }
11069
10967
  static get style() { return sdLoadingModalCss(); }
11070
10968
  static get cmpMeta() { return {
@@ -11857,12 +11755,12 @@ class SdNumberInput {
11857
11755
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
11858
11756
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
11859
11757
  };
11860
- return (hAsync("sd-field", { key: 'a62a0abbef4e817173d3e627d61c36523c2db81a', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'd395366da25ef5ab333e4b314093a89e41519786', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'eb97c4c29165e6237064bbce54ea2031c756fe12', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '7cd260e4356d320825a75350982174446b40e15c', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11758
+ return (hAsync("sd-field", { key: '7f4012ec048ab69f3c6b241c7fc103fd798572ca', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '975c0800b1fd6e4ab3502fc966db8917fe60bb3e', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'f2a630109b883740362dd2946ceeeaa93bbfeb36', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'dcd539c5035b1363edacadf7ed9c1096ef24714a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11861
11759
  ? NUMBER_INPUT_STEPPER.icon.disabled
11862
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: 'a25c707b127f63239dbb92be5e9d569e1be58005', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '0dc0864a4434122a717041028c732aa5d370f65c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
11760
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '5acf113c5e60dd5f77fb1206a60d4b5ce14e2b7f', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '5dd0f9ba9643fce07de811b2a93c8763a3d84b2c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
11863
11761
  textAlign: this.useButton ? 'center' : 'right',
11864
11762
  ...this.inputStyle,
11865
- } }), this.inputSuffix && (hAsync("span", { key: 'd31337cdacceb84ee6347a2c38210ad491667d2c', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '217fcbc2b75e76adb0ed969a719e632b5eb74b27', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '48ff6d0417aadcd975a6863a0003e63ca525cdfd', name: "add", size: iconSize, color: this.isIncrementDisabled()
11763
+ } }), this.inputSuffix && (hAsync("span", { key: 'aa7e4dbb29d7e8de4e94f0411f2f4b622411a60a', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '40deeadfcfe87cb61f09ee2959b6afb5757ff56b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b8ffcbbf663bacb7249e696d3eabf8b9ac832ddc', name: "add", size: iconSize, color: this.isIncrementDisabled()
11866
11764
  ? NUMBER_INPUT_STEPPER.icon.disabled
11867
11765
  : NUMBER_INPUT_STEPPER.icon.default }))))));
11868
11766
  }
@@ -12069,13 +11967,13 @@ class SdPagination {
12069
11967
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
12070
11968
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
12071
11969
  };
12072
- return (hAsync("div", { key: '386fdd2d1c0b5a7284c299201f19fd3384670ab1', class: {
11970
+ return (hAsync("div", { key: 'e648886fbec4723b7be767d9e1bfc04004cca234', class: {
12073
11971
  'sd-pagination': true,
12074
11972
  'sd-pagination--simple': this.simple,
12075
- }, style: cssVars }, hAsync("div", { key: 'cd73997ae59f87b70c31e88fd5b4246bd6044bd0', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
11973
+ }, style: cssVars }, hAsync("div", { key: '43ff8b8f6682c4d2b70c5085a6d3199de1d01596', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
12076
11974
  'sd-pagination__item': true,
12077
11975
  'sd-pagination__item--selected': this.currentPage === n,
12078
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '86389ea83d2965efdd938d2f9b2e2c3469f05fe8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
11976
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '1975d14028485438a728b23d717abfcde8722fcf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
12079
11977
  }
12080
11978
  static get style() { return sdPaginationCss(); }
12081
11979
  static get cmpMeta() { return {
@@ -12411,7 +12309,7 @@ class SdPortal {
12411
12309
  this.close.emit();
12412
12310
  }
12413
12311
  render() {
12414
- return hAsync("slot", { key: '6fa44238ddbc26c355ddde102d2639db7dd50b94' });
12312
+ return hAsync("slot", { key: '28858d6833d8ff7f86295f7e445d51ffc84db99a' });
12415
12313
  }
12416
12314
  static get watchers() { return {
12417
12315
  "open": [{
@@ -12435,79 +12333,6 @@ class SdPortal {
12435
12333
  }; }
12436
12334
  }
12437
12335
 
12438
- 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}`;
12439
-
12440
- class SdProgress {
12441
- constructor(hostRef) {
12442
- registerInstance(this, hostRef);
12443
- }
12444
- type = 'bar';
12445
- error = false;
12446
- percentage = 0;
12447
- size = 80;
12448
- strokeWidth = 12;
12449
- label;
12450
- statusColor = {
12451
- default: '#aaaaaa',
12452
- progress: '#0075ff',
12453
- complete: '#12B553',
12454
- error: '#FB4444',
12455
- };
12456
- get progressPercentage() {
12457
- if (this.error)
12458
- return 100;
12459
- return this.percentage;
12460
- }
12461
- get progressStatus() {
12462
- if (this.error)
12463
- return 'error';
12464
- switch (this.percentage) {
12465
- case 100:
12466
- return 'complete';
12467
- case 0:
12468
- return 'default';
12469
- default:
12470
- return 'progress';
12471
- }
12472
- }
12473
- get progressColor() {
12474
- return this.statusColor[this.progressStatus];
12475
- }
12476
- render() {
12477
- return (hAsync("div", { key: '34c1ecf23c120f53595529004ed3d6818896e816', style: {
12478
- '--progress-color': this.progressColor,
12479
- '--progress-percentage': `${this.progressPercentage}%`,
12480
- } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '29461b9428416262c10b1917eaee4e0091d290dc', class: "sd-progress__label" }, this.label)));
12481
- }
12482
- renderBarProgress() {
12483
- 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, "%")));
12484
- }
12485
- renderSpinnerProgress() {
12486
- const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
12487
- const circumference = 2 * Math.PI * radius; // 원의 둘레
12488
- const offset = circumference - (this.progressPercentage / 100) * circumference; // 진행률에 따른 offset
12489
- const progressBgSize = `${this.size}px`;
12490
- const progressSize = `${this.size / 2}px`;
12491
- 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, " %")));
12492
- }
12493
- static get style() { return sdProgressCss(); }
12494
- static get cmpMeta() { return {
12495
- "$flags$": 512,
12496
- "$tagName$": "sd-progress",
12497
- "$members$": {
12498
- "type": [1],
12499
- "error": [4],
12500
- "percentage": [2],
12501
- "size": [2],
12502
- "strokeWidth": [2, "stroke-width"],
12503
- "label": [1]
12504
- },
12505
- "$listeners$": undefined,
12506
- "$lazyBundleId$": "-",
12507
- "$attrsToReflect$": []
12508
- }; }
12509
- }
12510
-
12511
12336
  const radio = {
12512
12337
  size: "16",
12513
12338
  borderWidth: "1",
@@ -12898,1891 +12723,158 @@ class SdRadioGroup {
12898
12723
  }; }
12899
12724
  }
12900
12725
 
12901
- class SelectKeyboardNavigation {
12902
- isSearchable;
12903
- filteredOptions;
12904
- constructor(isSearchable, filteredOptions) {
12905
- this.isSearchable = isSearchable;
12906
- this.filteredOptions = filteredOptions;
12907
- }
12908
- getNavigationBounds() {
12909
- return {
12910
- minIndex: this.isSearchable ? -1 : 0,
12911
- maxIndex: this.filteredOptions.length - 1,
12912
- };
12913
- }
12914
- getNextIndex(currentIndex, direction) {
12915
- const { minIndex, maxIndex } = this.getNavigationBounds();
12916
- if (direction === 'ArrowUp') {
12917
- return currentIndex > minIndex ? currentIndex - 1 : maxIndex;
12918
- }
12919
- else {
12920
- return currentIndex < maxIndex ? currentIndex + 1 : minIndex;
12921
- }
12922
- }
12923
- }
12924
-
12925
- const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select .sd-select .sd-select__trigger{cursor:not-allowed}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
12726
+ const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
12926
12727
 
12927
- /**
12928
- * @deprecated sd-select-v2를 사용하세요.
12929
- */
12930
- class SdSelect extends BaseDropdownEvent {
12728
+ class SdSelect {
12931
12729
  constructor(hostRef) {
12932
- super();
12933
12730
  registerInstance(this, hostRef);
12934
12731
  this.update = createEvent(this, "sdUpdate", 7);
12935
12732
  this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
12936
12733
  }
12734
+ static VIEWPORT_PADDING = 20;
12735
+ static PORTAL_OFFSET_Y = 4;
12736
+ static CLOSE_ANIMATION_DURATION = 150;
12937
12737
  get el() { return getElement(this); }
12938
- // props
12738
+ type = 'default';
12939
12739
  value = null;
12940
12740
  options = [];
12941
12741
  placeholder = '선택';
12942
- optionPlaceholder = '선택지가 없습니다.';
12943
- width = '200px';
12742
+ maxDropdownWidth = '640px';
12944
12743
  dropdownHeight = '260px';
12945
- autoFocus = false;
12946
12744
  disabled = false;
12947
- clearable = false;
12948
- searchable = false;
12949
- // props - label
12950
12745
  label = '';
12951
12746
  labelWidth = '';
12952
12747
  addonLabel = '';
12953
12748
  addonAlign = 'start';
12749
+ error = false;
12750
+ hint = '';
12751
+ errorMessage = '';
12752
+ rules = [];
12954
12753
  icon = undefined;
12955
12754
  labelTooltip = '';
12956
12755
  labelTooltipProps = null;
12957
- // props - form
12958
- rules = [];
12959
- error = false;
12960
- // props - custom slots
12961
- optionRenderer;
12962
- // states
12756
+ emitValue = false;
12757
+ width = '';
12758
+ useSearch = false;
12759
+ allSelectedLabel = '전체';
12760
+ useSelectAll = false;
12963
12761
  isOpen = false;
12964
- itemIndex = -1;
12965
- isScrolled = false;
12966
- // events
12762
+ isAnimatingOut = false;
12763
+ triggerWidth = '200px';
12764
+ resolvedDropdownHeight = '260px';
12765
+ resolvedMaxDropdownWidth = '640px';
12766
+ focused = false;
12767
+ hovered = false;
12967
12768
  update;
12968
12769
  dropDownShow;
12969
- selectRef;
12970
- triggerRef;
12971
- formField;
12972
- filteredOptions = [];
12973
- dropDownWidth = '200px';
12974
- name = nanoid$1();
12770
+ async sdFocus() {
12771
+ if (this.disabled)
12772
+ return;
12773
+ await this.triggerComponentRef?.sdFocus();
12774
+ }
12975
12775
  async sdOpen() {
12776
+ // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
12777
+ await new Promise(resolve => setTimeout(resolve, 0));
12778
+ if (this.disabled || this.isOpen)
12779
+ return;
12780
+ this.prepareDropdownGeometry();
12781
+ if (this.closeAnimationTimer)
12782
+ clearTimeout(this.closeAnimationTimer);
12783
+ this.isAnimatingOut = false;
12976
12784
  this.isOpen = true;
12977
12785
  }
12978
- async sdValidate() {
12979
- this.formField?.sdValidate();
12980
- }
12981
- async sdReset() {
12982
- this.formField?.sdReset();
12983
- }
12984
- async sdResetValidate() {
12985
- this.formField?.sdResetValidation();
12786
+ triggerRef;
12787
+ triggerComponentRef;
12788
+ closeAnimationTimer;
12789
+ name = nanoid$1();
12790
+ triggerHasFocus = false;
12791
+ watchIsOpen(newValue) {
12792
+ this.syncFocusedState(newValue);
12793
+ this.dropDownShow.emit({ isOpen: newValue });
12986
12794
  }
12987
- async sdFocus() {
12988
- this.formField?.sdFocus();
12795
+ get isMulti() {
12796
+ return this.type === 'multi' || this.type === 'multi_depth';
12989
12797
  }
12990
- async isOpenChanged() {
12991
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
12992
- this.onDropdownToggle(this.isOpen);
12993
- this.dropDownShow?.emit({ isOpen: this.isOpen });
12994
- if (this.isOpen === false) {
12995
- await this.formField?.sdValidate();
12798
+ get displayText() {
12799
+ if (this.isMulti) {
12800
+ if (!Array.isArray(this.value) || this.value.length === 0)
12801
+ return '';
12802
+ const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
12803
+ const selected = this.getSelectedOptions();
12804
+ const allSelected = nonDisabledLeaves.length > 0 &&
12805
+ nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
12806
+ if (allSelected)
12807
+ return this.allSelectedLabel ?? '전체';
12808
+ const flat = this.flattenOptions(this.options);
12809
+ return this.value
12810
+ .map(item => {
12811
+ if (item != null && typeof item === 'object') {
12812
+ const opt = item;
12813
+ return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
12814
+ }
12815
+ return flat.find(o => o.value === item)?.label ?? '';
12816
+ })
12817
+ .filter(Boolean)
12818
+ .join(', ');
12996
12819
  }
12997
- }
12998
- componentWillLoad() {
12999
- this.filteredOptions = this.options;
13000
- this.dropDownWidth = this.width;
13001
- this.initializeEvent();
13002
- }
13003
- componentDidLoad() {
13004
- if (this.autoFocus) {
13005
- this.selectRef?.focus();
12820
+ if (this.value == null)
12821
+ return '';
12822
+ if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
12823
+ return this.value.label ?? '';
13006
12824
  }
12825
+ const flat = this.flattenOptions(this.options);
12826
+ const found = flat.find(o => o.value === this.value);
12827
+ return found?.label ?? '';
13007
12828
  }
13008
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
13009
- componentDidRender() {
13010
- const trigger = this.triggerRef;
13011
- const rect = trigger?.getBoundingClientRect();
13012
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
12829
+ flattenOptions(options) {
12830
+ return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
13013
12831
  }
13014
- disconnectedCallback() {
13015
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
12832
+ getNonDisabledLeaves(options) {
12833
+ return options.flatMap(o => {
12834
+ if (o.disabled)
12835
+ return [];
12836
+ if (o.children)
12837
+ return this.getNonDisabledLeaves(o.children);
12838
+ return [o];
12839
+ });
13016
12840
  }
13017
- handleDocumentClick(event) {
13018
- if (!this.selectRef?.contains(event.target)) {
13019
- this.isOpen = false;
12841
+ getSelectedOptions() {
12842
+ const val = this.value;
12843
+ if (!val || !Array.isArray(val))
12844
+ return [];
12845
+ if (this.emitValue) {
12846
+ return val
12847
+ .map(v => this.findOriginalOption(v, this.options))
12848
+ .filter((o) => !!o);
13020
12849
  }
12850
+ return val;
13021
12851
  }
13022
- handleDocumentKeydown(keyboardEvent) {
13023
- keyboardEvent.stopPropagation();
13024
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13025
- if (!targetKey.includes(keyboardEvent.key))
13026
- return;
13027
- keyboardEvent.preventDefault();
13028
- switch (keyboardEvent.key) {
13029
- case 'ArrowDown':
13030
- case 'ArrowUp':
13031
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13032
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13033
- this.itemIndex = nextIndex;
13034
- break;
13035
- case 'Enter':
13036
- const selectedOption = this.filteredOptions[this.itemIndex];
13037
- if (selectedOption && !selectedOption.disabled) {
13038
- this.value = selectedOption.value;
13039
- this.isOpen = false;
13040
- }
13041
- break;
13042
- case 'Escape':
13043
- this.isOpen = false;
13044
- break;
13045
- }
12852
+ toMultiValue(options) {
12853
+ return this.emitValue ? options.map(o => o.value) : options;
13046
12854
  }
13047
- getSelectedOption() {
13048
- return this.options.find(option => option.value === this.value);
12855
+ parsePixelValue(value, fallback) {
12856
+ const parsed = Number.parseFloat(value);
12857
+ return Number.isFinite(parsed) ? parsed : fallback;
13049
12858
  }
13050
- closeDropdown() {
13051
- this.isOpen = false;
12859
+ updateDropdownViewportConstraints() {
12860
+ if (!this.triggerRef)
12861
+ return;
12862
+ const triggerRect = this.triggerRef.getBoundingClientRect();
12863
+ const viewportPadding = SdSelect.VIEWPORT_PADDING;
12864
+ const offsetY = SdSelect.PORTAL_OFFSET_Y;
12865
+ const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
12866
+ const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
12867
+ const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
12868
+ const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
12869
+ const availableHeight = Math.max(availableBelow, availableAbove);
12870
+ const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
12871
+ this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
12872
+ this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
13052
12873
  }
13053
- handleTriggerClick = (event) => {
13054
- event.stopPropagation();
13055
- if (!this.disabled) {
13056
- this.isOpen = !this.isOpen;
13057
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13058
- }
13059
- };
13060
- handleOptionClick = (detail) => {
13061
- const { option, event } = detail;
13062
- event.stopPropagation();
13063
- if (!option.disabled) {
13064
- this.value = option.value;
13065
- this.isOpen = false;
13066
- const selectedOption = this.getSelectedOption();
13067
- this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
13068
- }
13069
- };
13070
- render() {
13071
- 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: {
13072
- 'sd-select': true,
13073
- 'sd-select--disabled': this.disabled,
13074
- 'sd-select--error': !!this.error,
13075
- 'sd-select--label': !!this.label,
13076
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13077
- }
13078
- renderTrigger() {
13079
- const selectedOption = this.getSelectedOption();
13080
- 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) => {
13081
- event.stopPropagation();
13082
- this.value = null;
13083
- await this.formField?.sdValidate();
13084
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
13085
- }
13086
- renderDropdown() {
13087
- if (this.isOpen === false)
13088
- return null;
13089
- const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||
13090
- this.selectRef);
13091
- 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) })));
13092
- }
13093
- static get watchers() { return {
13094
- "isOpen": [{
13095
- "isOpenChanged": 0
13096
- }]
13097
- }; }
13098
- static get style() { return sdSelectCss(); }
13099
- static get cmpMeta() { return {
13100
- "$flags$": 512,
13101
- "$tagName$": "sd-select",
13102
- "$members$": {
13103
- "value": [1032],
13104
- "options": [1040],
13105
- "placeholder": [1],
13106
- "optionPlaceholder": [1, "option-placeholder"],
13107
- "width": [1],
13108
- "dropdownHeight": [1, "dropdown-height"],
13109
- "autoFocus": [4, "auto-focus"],
13110
- "disabled": [4],
13111
- "clearable": [4],
13112
- "searchable": [4],
13113
- "label": [1],
13114
- "labelWidth": [8, "label-width"],
13115
- "addonLabel": [1, "addon-label"],
13116
- "addonAlign": [1, "addon-align"],
13117
- "icon": [16],
13118
- "labelTooltip": [1, "label-tooltip"],
13119
- "labelTooltipProps": [16],
13120
- "rules": [16],
13121
- "error": [4],
13122
- "optionRenderer": [16],
13123
- "name": [1],
13124
- "isOpen": [32],
13125
- "itemIndex": [32],
13126
- "isScrolled": [32],
13127
- "sdOpen": [64],
13128
- "sdValidate": [64],
13129
- "sdReset": [64],
13130
- "sdResetValidate": [64],
13131
- "sdFocus": [64]
13132
- },
13133
- "$listeners$": undefined,
13134
- "$lazyBundleId$": "-",
13135
- "$attrsToReflect$": []
13136
- }; }
13137
- }
13138
-
13139
- 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}`;
13140
-
13141
- class SdSelectDropdown {
13142
- constructor(hostRef) {
13143
- registerInstance(this, hostRef);
13144
- this.optionClick = createEvent(this, "sdOptionClick", 7);
13145
- this.optionFiltered = createEvent(this, "sdOptionFiltered", 7);
13146
- this.scroll = createEvent(this, "sdScroll", 7);
13147
- }
13148
- itemIndex;
13149
- value = null;
13150
- options;
13151
- width;
13152
- dropdownHeight;
13153
- searchable;
13154
- optionPlaceholder;
13155
- useCheckbox = false;
13156
- useAll = false;
13157
- filteredOptions = [];
13158
- searchText = null;
13159
- isScrolled = false;
13160
- isDropdownReady = false;
13161
- optionClick;
13162
- optionFiltered;
13163
- scroll;
13164
- filteredOptionsChanged(newValue) {
13165
- this.optionFiltered.emit(newValue);
13166
- }
13167
- searchTextChanged() {
13168
- this.filterOptions();
13169
- }
13170
- async itemIndexChanged(newIndex, oldIndex) {
13171
- if (this.searchable) {
13172
- const searchInput = await this.getNativeInputElement();
13173
- if (this.itemIndex === -1) {
13174
- searchInput?.focus({ preventScroll: true });
13175
- return;
13176
- }
13177
- else if (searchInput?.matches(':focus')) {
13178
- searchInput?.blur();
13179
- }
13180
- }
13181
- const optionElements = this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];
13182
- const currentItem = optionElements?.[this.itemIndex];
13183
- if (!currentItem)
13184
- return;
13185
- this.optionRef = currentItem;
13186
- const isOptionDisabled = await this.optionRef.sdIsDisabled();
13187
- if (isOptionDisabled) {
13188
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
13189
- return;
13190
- }
13191
- this.scrollToOption(currentItem);
13192
- }
13193
- componentWillLoad() {
13194
- this.filteredOptions = this.options;
13195
- // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
13196
- requestAnimationFrame(() => {
13197
- requestAnimationFrame(async () => {
13198
- const selectedOptions = this.getSelectedOption();
13199
- // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
13200
- if (selectedOptions) {
13201
- const selectedIndex = Array.isArray(selectedOptions)
13202
- ? this.options.indexOf(selectedOptions[0])
13203
- : this.options.indexOf(selectedOptions);
13204
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option') || []);
13205
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
13206
- const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
13207
- // 선택된 옵션이 화면 가운데에 오도록 index 조정
13208
- const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
13209
- const currentItem = optionElements?.[targetIndex];
13210
- if (currentItem) {
13211
- this.scrollToOption(currentItem, 'instant');
13212
- }
13213
- }
13214
- this.isDropdownReady = true;
13215
- if (this.searchable) {
13216
- const searchInput = await this.getNativeInputElement();
13217
- if (searchInput) {
13218
- requestAnimationFrame(() => {
13219
- searchInput.focus({ preventScroll: true });
13220
- });
13221
- }
13222
- }
13223
- });
13224
- });
13225
- }
13226
- dropdownRef;
13227
- searchRef;
13228
- optionRef;
13229
- get dropdownSize() {
13230
- return {
13231
- '--select-dropdown-width': this.width || '200px',
13232
- '--select-dropdown-height': this.dropdownHeight || '260px',
13233
- };
13234
- }
13235
- filterOptions() {
13236
- if (!this.searchText || this.searchText.trim() === '') {
13237
- // 검색어가 없으면 전체 옵션 표시
13238
- this.filteredOptions = this.options;
13239
- }
13240
- else {
13241
- // 검색어가 있으면 필터링
13242
- this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
13243
- }
13244
- }
13245
- getSelectedOption() {
13246
- if (typeof this.value !== 'object') {
13247
- return this.options.find(option => option.value === this.value);
13248
- }
13249
- return this.options.filter(option => this.value?.includes(option));
13250
- }
13251
- isOptionSelected(value) {
13252
- if (Array.isArray(this.value)) {
13253
- return this.value.some(selected => selected.value === value);
13254
- }
13255
- return value === this.value;
13256
- }
13257
- async getNativeInputElement() {
13258
- if (this.searchRef) {
13259
- return this.searchRef.sdGetNativeElement();
13260
- }
13261
- return null;
13262
- }
13263
- scrollToOption(optionElement, scrollBehavior = 'smooth') {
13264
- if (!this.dropdownRef || !optionElement)
13265
- return;
13266
- const dropdown = this.dropdownRef;
13267
- const optionTop = optionElement.offsetTop;
13268
- const optionHeight = optionElement.offsetHeight;
13269
- const dropdownScrollTop = dropdown.scrollTop;
13270
- const dropdownHeight = dropdown.clientHeight;
13271
- const searchContainer = dropdown.querySelector('.sd-select-search-input');
13272
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
13273
- const visibleTop = dropdownScrollTop + searchOffset;
13274
- const visibleBottom = dropdownScrollTop + dropdownHeight;
13275
- if (optionTop < visibleTop) {
13276
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });
13277
- }
13278
- else if (optionTop + optionHeight > visibleBottom) {
13279
- dropdown.scrollTo({
13280
- top: optionTop + optionHeight - dropdownHeight + searchOffset,
13281
- behavior: scrollBehavior,
13282
- });
13283
- }
13284
- }
13285
- handleDropdownScroll = (event) => {
13286
- const target = event.target;
13287
- const scrollTop = target.scrollTop;
13288
- // 스크롤이 조금이라도 되면 그림자 표시
13289
- this.isScrolled = scrollTop > 0;
13290
- };
13291
- render() {
13292
- return (hAsync("div", { key: 'a831a99130074fa072534d76f4b0db7169d906e2', class: {
13293
- 'sd-select-dropdown': true,
13294
- 'sd-select-dropdown--ready': this.isDropdownReady,
13295
- }, 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)))));
13296
- }
13297
- static get watchers() { return {
13298
- "filteredOptions": [{
13299
- "filteredOptionsChanged": 0
13300
- }],
13301
- "searchText": [{
13302
- "searchTextChanged": 0
13303
- }],
13304
- "itemIndex": [{
13305
- "itemIndexChanged": 0
13306
- }]
13307
- }; }
13308
- static get style() { return sdSelectDropdownCss(); }
13309
- static get cmpMeta() { return {
13310
- "$flags$": 772,
13311
- "$tagName$": "sd-select-dropdown",
13312
- "$members$": {
13313
- "itemIndex": [1026, "item-index"],
13314
- "value": [8],
13315
- "options": [16],
13316
- "width": [1],
13317
- "dropdownHeight": [1, "dropdown-height"],
13318
- "searchable": [4],
13319
- "optionPlaceholder": [1, "option-placeholder"],
13320
- "useCheckbox": [4, "use-checkbox"],
13321
- "useAll": [4, "use-all"],
13322
- "filteredOptions": [32],
13323
- "searchText": [32],
13324
- "isScrolled": [32],
13325
- "isDropdownReady": [32]
13326
- },
13327
- "$listeners$": undefined,
13328
- "$lazyBundleId$": "-",
13329
- "$attrsToReflect$": []
13330
- }; }
13331
- }
13332
-
13333
- 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}`;
13334
-
13335
- /**
13336
- * @deprecated sd-select-v2 (name="default_depth")를 사용하세요.
13337
- */
13338
- class SdSelectGroup extends BaseDropdownEvent {
13339
- constructor(hostRef) {
13340
- super();
13341
- registerInstance(this, hostRef);
13342
- this.update = createEvent(this, "sdUpdate", 7);
13343
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13344
- }
13345
- get el() { return getElement(this); }
13346
- // props
13347
- value = null;
13348
- options = [];
13349
- placeholder = '선택';
13350
- optionPlaceholder = '선택지가 없습니다.';
13351
- width = '200px';
13352
- dropdownHeight = '260px';
13353
- autoFocus = false;
13354
- disabled = false;
13355
- clearable = false;
13356
- searchable = false;
13357
- // props - label
13358
- label = '';
13359
- labelWidth = '';
13360
- addonLabel = '';
13361
- addonAlign = 'start';
13362
- icon = undefined;
13363
- labelTooltip = '';
13364
- labelTooltipProps = null;
13365
- // props - form
13366
- rules = [];
13367
- error = false;
13368
- // props - custom styles
13369
- containerStyle = {};
13370
- triggerStyle = {};
13371
- dropdownStyle = {};
13372
- optionStyle = {};
13373
- labelStyle = {};
13374
- // props - custom slots
13375
- optionRenderer;
13376
- // states
13377
- filteredOptions = [];
13378
- isOpen = false;
13379
- searchText = null;
13380
- itemIndex = -1;
13381
- isScrolled = false;
13382
- isDropdownReady = false;
13383
- // events
13384
- update;
13385
- dropDownShow;
13386
- selectRef;
13387
- searchRef;
13388
- triggerRef;
13389
- optionRef;
13390
- dropdownRef;
13391
- formField;
13392
- dropDownWidth = '200px';
13393
- name = nanoid$1();
13394
- async sdOpen() {
13395
- await new Promise(resolve => setTimeout(resolve, 0));
13396
- this.isOpen = true;
13397
- }
13398
- async sdValidate() {
13399
- this.formField?.sdValidate();
13400
- }
13401
- async sdReset() {
13402
- this.formField?.sdReset();
13403
- }
13404
- async sdResetValidate() {
13405
- this.formField?.sdResetValidation();
13406
- }
13407
- async sdFocus() {
13408
- this.formField?.sdFocus();
13409
- }
13410
- optionsChanged() {
13411
- this.filteredOptions = this.options;
13412
- this.filterOptions();
13413
- }
13414
- searchTextChanged() {
13415
- this.filterOptions();
13416
- }
13417
- async itemIndexChanged(newIndex, oldIndex) {
13418
- if (this.searchable) {
13419
- const searchInput = await this.getNativeInputElement();
13420
- if (this.itemIndex === -1) {
13421
- searchInput?.focus({ preventScroll: true });
13422
- return;
13423
- }
13424
- else if (searchInput?.matches(':focus')) {
13425
- searchInput?.blur();
13426
- }
13427
- }
13428
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
13429
- const currentItem = optionElements?.[this.itemIndex];
13430
- if (!currentItem || !this.isOpen)
13431
- return;
13432
- this.optionRef = currentItem;
13433
- const isOptionDisabled = await this.optionRef.isDisabled();
13434
- if (isOptionDisabled) {
13435
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
13436
- return;
13437
- }
13438
- this.scrollToOption(currentItem);
13439
- }
13440
- async isOpenChanged() {
13441
- this.onDropdownToggle(this.isOpen);
13442
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13443
- this.isDropdownReady = false;
13444
- if (this.isOpen === false) {
13445
- await this.formField?.sdValidate();
13446
- return;
13447
- }
13448
- requestAnimationFrame(() => {
13449
- requestAnimationFrame(async () => {
13450
- const selectedOption = this.getSelectedOption();
13451
- if (selectedOption) {
13452
- const selectedIndex = this.filteredOptions.indexOf(selectedOption);
13453
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
13454
- const targetIndex = Math.min(selectedIndex + 4, optionElements.length - 1);
13455
- const currentItem = optionElements?.[targetIndex];
13456
- if (currentItem) {
13457
- this.scrollToOption(currentItem);
13458
- }
13459
- }
13460
- this.isDropdownReady = true;
13461
- if (this.searchable) {
13462
- const searchInput = await this.getNativeInputElement();
13463
- if (searchInput) {
13464
- requestAnimationFrame(() => {
13465
- searchInput.focus({ preventScroll: true });
13466
- });
13467
- }
13468
- }
13469
- });
13470
- });
13471
- }
13472
- componentWillLoad() {
13473
- this.filteredOptions = this.options;
13474
- this.dropDownWidth = this.width;
13475
- this.initializeEvent();
13476
- }
13477
- componentDidLoad() {
13478
- if (this.autoFocus) {
13479
- this.selectRef?.focus();
13480
- }
13481
- }
13482
- componentDidRender() {
13483
- const trigger = this.triggerRef;
13484
- const rect = trigger?.getBoundingClientRect();
13485
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
13486
- }
13487
- disconnectedCallback() {
13488
- this.cleanupEvent();
13489
- }
13490
- handleDocumentClick(event) {
13491
- if (!this.selectRef?.contains(event.target)) {
13492
- this.isOpen = false;
13493
- }
13494
- }
13495
- handleDocumentKeydown(keyboardEvent) {
13496
- keyboardEvent.stopPropagation();
13497
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13498
- if (!targetKey.includes(keyboardEvent.key))
13499
- return;
13500
- keyboardEvent.preventDefault();
13501
- switch (keyboardEvent.key) {
13502
- case 'ArrowDown':
13503
- case 'ArrowUp':
13504
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13505
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13506
- this.itemIndex = nextIndex;
13507
- break;
13508
- case 'Enter':
13509
- const selectedOption = this.filteredOptions[this.itemIndex];
13510
- if (selectedOption && !selectedOption.disabled && selectedOption.type === 'item') {
13511
- this.handleOptionSelection(selectedOption);
13512
- }
13513
- break;
13514
- case 'Escape':
13515
- this.isOpen = false;
13516
- break;
13517
- }
13518
- }
13519
- // event handlers
13520
- handleTriggerClick = (event) => {
13521
- event.stopPropagation();
13522
- if (!this.disabled) {
13523
- this.isOpen = !this.isOpen;
13524
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13525
- }
13526
- };
13527
- handleOptionClick = (detail) => {
13528
- const { option, event } = detail;
13529
- event.stopPropagation();
13530
- if (option.type === 'item') {
13531
- this.handleOptionSelection(option);
13532
- }
13533
- };
13534
- filterOptions() {
13535
- if (!this.searchText || this.searchText.trim() === '') {
13536
- this.filteredOptions = this.options;
13537
- return;
13538
- }
13539
- const searchTerm = this.searchText.toLowerCase();
13540
- const matchedOptions = new Set();
13541
- this.options.forEach(option => {
13542
- if (option.label.toLowerCase().includes(searchTerm)) {
13543
- matchedOptions.add(option);
13544
- this.addParentGroups(option, matchedOptions);
13545
- }
13546
- });
13547
- this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
13548
- }
13549
- addParentGroups(option, matchedSet) {
13550
- if (!option.parent)
13551
- return;
13552
- const parentOption = this.options.find(opt => opt.value === option.parent);
13553
- if (parentOption && !matchedSet.has(parentOption)) {
13554
- matchedSet.add(parentOption);
13555
- this.addParentGroups(parentOption, matchedSet);
13556
- }
13557
- }
13558
- getSelectedOption() {
13559
- return this.options.find(option => option.value === this.value);
13560
- }
13561
- handleDropdownScroll = (event) => {
13562
- const target = event.target;
13563
- this.isScrolled = target.scrollTop > 0;
13564
- };
13565
- async getNativeInputElement() {
13566
- if (this.searchRef) {
13567
- return this.searchRef.sdGetNativeElement();
13568
- }
13569
- return null;
13570
- }
13571
- handleOptionSelection = (option) => {
13572
- if (!option || option.disabled)
13573
- return;
13574
- this.value = option.value;
13575
- this.isOpen = false;
13576
- const selectedOption = this.getSelectedOption();
13577
- this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
13578
- };
13579
- closeDropdown() {
13580
- this.isOpen = false;
13581
- }
13582
- async scrollToOption(optionElement) {
13583
- if (!this.dropdownRef || !optionElement)
13584
- return;
13585
- requestAnimationFrame(() => {
13586
- const dropdown = this.dropdownRef;
13587
- const optionTop = optionElement.offsetTop;
13588
- const optionHeight = optionElement.offsetHeight;
13589
- const dropdownScrollTop = dropdown.scrollTop;
13590
- const dropdownHeight = dropdown.clientHeight;
13591
- const searchContainer = dropdown.querySelector('.sd-select-group__search-container');
13592
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
13593
- const visibleContentHeight = dropdownHeight - searchOffset;
13594
- const visibleTop = dropdownScrollTop + searchOffset;
13595
- const visibleBottom = dropdownScrollTop + dropdownHeight;
13596
- if (optionTop < visibleTop) {
13597
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
13598
- }
13599
- else if (optionTop + optionHeight > visibleBottom) {
13600
- dropdown.scrollTo({
13601
- top: optionTop + optionHeight - visibleContentHeight - searchOffset,
13602
- behavior: 'instant',
13603
- });
13604
- }
13605
- });
13606
- }
13607
- render() {
13608
- 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: {
13609
- 'sd-select-group': true,
13610
- 'sd-select-group--open': this.isOpen,
13611
- 'sd-select-group--disabled': this.disabled,
13612
- 'sd-select-group--label': !!this.label,
13613
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13614
- }
13615
- renderTrigger() {
13616
- const selectedOption = this.getSelectedOption();
13617
- 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) => {
13618
- event.stopPropagation();
13619
- this.value = null;
13620
- this.update?.emit({ value: null, option: null });
13621
- await this.formField?.sdValidate();
13622
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "grey_65", class: {
13623
- 'sd-select-group__arrow': true,
13624
- 'sd-select-group__arrow--open': this.isOpen,
13625
- } })));
13626
- }
13627
- renderDropdown() {
13628
- const style = {
13629
- '--select-width': this.dropDownWidth || '200px',
13630
- '--select-dropdown-height': this.dropdownHeight || '260px',
13631
- };
13632
- if (this.isOpen === false)
13633
- return null;
13634
- 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: {
13635
- 'sd-select-group__dropdown': true,
13636
- 'sd-select-group__dropdown--ready': this.isDropdownReady,
13637
- }, 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, }) => {
13638
- if (option.type !== 'item')
13639
- return;
13640
- this.handleOptionClick(detail);
13641
- }, useCheckbox: false, useIndicator: false })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
13642
- }
13643
- static get watchers() { return {
13644
- "options": [{
13645
- "optionsChanged": 0
13646
- }],
13647
- "searchText": [{
13648
- "searchTextChanged": 0
13649
- }],
13650
- "itemIndex": [{
13651
- "itemIndexChanged": 0
13652
- }],
13653
- "isOpen": [{
13654
- "isOpenChanged": 0
13655
- }]
13656
- }; }
13657
- static get style() { return sdSelectGroupCss(); }
13658
- static get cmpMeta() { return {
13659
- "$flags$": 772,
13660
- "$tagName$": "sd-select-group",
13661
- "$members$": {
13662
- "value": [1032],
13663
- "options": [1040],
13664
- "placeholder": [1],
13665
- "optionPlaceholder": [1, "option-placeholder"],
13666
- "width": [1],
13667
- "dropdownHeight": [1, "dropdown-height"],
13668
- "autoFocus": [4, "auto-focus"],
13669
- "disabled": [4],
13670
- "clearable": [4],
13671
- "searchable": [4],
13672
- "label": [1],
13673
- "labelWidth": [8, "label-width"],
13674
- "addonLabel": [1, "addon-label"],
13675
- "addonAlign": [1, "addon-align"],
13676
- "icon": [16],
13677
- "labelTooltip": [1, "label-tooltip"],
13678
- "labelTooltipProps": [16],
13679
- "rules": [16],
13680
- "error": [4],
13681
- "containerStyle": [16],
13682
- "triggerStyle": [16],
13683
- "dropdownStyle": [16],
13684
- "optionStyle": [16],
13685
- "labelStyle": [16],
13686
- "optionRenderer": [16],
13687
- "name": [1],
13688
- "filteredOptions": [32],
13689
- "isOpen": [32],
13690
- "searchText": [32],
13691
- "itemIndex": [32],
13692
- "isScrolled": [32],
13693
- "isDropdownReady": [32],
13694
- "sdOpen": [64],
13695
- "sdValidate": [64],
13696
- "sdReset": [64],
13697
- "sdResetValidate": [64],
13698
- "sdFocus": [64]
13699
- },
13700
- "$listeners$": undefined,
13701
- "$lazyBundleId$": "-",
13702
- "$attrsToReflect$": []
13703
- }; }
13704
- }
13705
-
13706
- 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)}`;
13707
-
13708
- /**
13709
- * @deprecated sd-select-v2 (name="multi")를 사용하세요.
13710
- */
13711
- class SdSelectMultiple extends BaseDropdownEvent {
13712
- constructor(hostRef) {
13713
- super();
13714
- registerInstance(this, hostRef);
13715
- this.update = createEvent(this, "sdUpdate", 7);
13716
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13717
- }
13718
- get el() { return getElement(this); }
13719
- // props
13720
- value = null;
13721
- options = [];
13722
- placeholder = '선택';
13723
- optionPlaceholder = '선택지가 없습니다.';
13724
- width = '200px';
13725
- dropdownHeight = '260px';
13726
- autoFocus = false;
13727
- disabled = false;
13728
- clearable = false;
13729
- searchable = false;
13730
- // props - select multiple specific
13731
- useAll = false;
13732
- useCheckbox = false;
13733
- // props - label
13734
- label = '';
13735
- labelWidth = '';
13736
- icon = undefined;
13737
- labelTooltip = '';
13738
- labelTooltipProps = null;
13739
- // props - form
13740
- rules = [];
13741
- error = false;
13742
- optionRenderer;
13743
- // states
13744
- isOpen = false;
13745
- itemIndex = -1;
13746
- isScrolled = false;
13747
- // events
13748
- update;
13749
- dropDownShow;
13750
- selectRef;
13751
- triggerRef;
13752
- formField;
13753
- filteredOptions = [];
13754
- dropDownWidth = '200px';
13755
- name = nanoid$1();
13756
- async sdOpen() {
13757
- this.isOpen = true;
13758
- }
13759
- async sdValidate() {
13760
- this.formField?.sdValidate();
13761
- }
13762
- async sdReset() {
13763
- this.formField?.sdReset();
13764
- }
13765
- async sdResetValidate() {
13766
- this.formField?.sdResetValidation();
13767
- }
13768
- async sdFocus() {
13769
- this.formField?.sdFocus();
13770
- }
13771
- async isOpenChanged() {
13772
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
13773
- this.onDropdownToggle(this.isOpen);
13774
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13775
- if (this.isOpen === false) {
13776
- await this.formField?.sdValidate();
13777
- }
13778
- }
13779
- componentWillLoad() {
13780
- this.filteredOptions = this.options;
13781
- this.dropDownWidth = this.width;
13782
- this.initializeEvent();
13783
- }
13784
- componentDidLoad() {
13785
- if (this.autoFocus) {
13786
- this.selectRef?.focus();
13787
- }
13788
- }
13789
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
13790
- componentDidRender() {
13791
- const trigger = this.triggerRef;
13792
- const rect = trigger?.getBoundingClientRect();
13793
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
13794
- }
13795
- disconnectedCallback() {
13796
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
13797
- }
13798
- handleDocumentClick(event) {
13799
- if (!this.selectRef?.contains(event.target)) {
13800
- this.isOpen = false;
13801
- }
13802
- }
13803
- handleDocumentKeydown(keyboardEvent) {
13804
- keyboardEvent.stopPropagation();
13805
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13806
- if (!targetKey.includes(keyboardEvent.key))
13807
- return;
13808
- keyboardEvent.preventDefault();
13809
- switch (keyboardEvent.key) {
13810
- case 'ArrowDown':
13811
- case 'ArrowUp':
13812
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13813
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13814
- this.itemIndex = nextIndex;
13815
- break;
13816
- case 'Enter':
13817
- const selectedOption = this.filteredOptions[this.itemIndex];
13818
- if (selectedOption && !selectedOption.disabled) {
13819
- this.handleOptionSelection(selectedOption);
13820
- }
13821
- break;
13822
- case 'Escape':
13823
- this.isOpen = false;
13824
- break;
13825
- }
13826
- }
13827
- handleOptionSelection = (option) => {
13828
- if (!option || option.disabled)
13829
- return;
13830
- const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
13831
- if (isAlreadySelected) {
13832
- // 이미 선택된 옵션인 경우, 선택 해제
13833
- this.value = this.value?.filter(opt => opt.value !== option.value) || null;
13834
- }
13835
- else {
13836
- // 새로운 옵션 선택
13837
- this.value = [...(this.value || []), option];
13838
- }
13839
- this.update?.emit(this.value);
13840
- };
13841
- getSelectedOption() {
13842
- return this.options.filter(option => this.value?.includes(option));
13843
- }
13844
- closeDropdown() {
13845
- this.isOpen = false;
13846
- }
13847
- handleTriggerClick = (event) => {
13848
- event.stopPropagation();
13849
- if (!this.disabled) {
13850
- this.isOpen = !this.isOpen;
13851
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13852
- }
13853
- };
13854
- handleOptionClick = (detail) => {
13855
- const { option, event } = detail;
13856
- event.stopPropagation();
13857
- this.handleOptionSelection(option);
13858
- };
13859
- render() {
13860
- 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: {
13861
- 'sd-select-multiple': true,
13862
- 'sd-select-multiple--open': this.isOpen,
13863
- 'sd-select-multiple--disabled': this.disabled,
13864
- 'sd-select-multiple--error': !!this.error,
13865
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13866
- }
13867
- renderTrigger() {
13868
- const selectedOption = this.getSelectedOption();
13869
- 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
13870
- ? this.placeholder
13871
- : 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) => {
13872
- event.stopPropagation();
13873
- this.value = null;
13874
- await this.formField?.sdValidate();
13875
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
13876
- }
13877
- renderDropdown() {
13878
- if (this.isOpen === false)
13879
- return null;
13880
- const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||
13881
- this.selectRef);
13882
- 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) })));
13883
- }
13884
- static get watchers() { return {
13885
- "isOpen": [{
13886
- "isOpenChanged": 0
13887
- }]
13888
- }; }
13889
- static get style() { return sdSelectMultipleCss(); }
13890
- static get cmpMeta() { return {
13891
- "$flags$": 512,
13892
- "$tagName$": "sd-select-multiple",
13893
- "$members$": {
13894
- "value": [1040],
13895
- "options": [1040],
13896
- "placeholder": [1],
13897
- "optionPlaceholder": [1, "option-placeholder"],
13898
- "width": [1],
13899
- "dropdownHeight": [1, "dropdown-height"],
13900
- "autoFocus": [4, "auto-focus"],
13901
- "disabled": [4],
13902
- "clearable": [4],
13903
- "searchable": [4],
13904
- "useAll": [4, "use-all"],
13905
- "useCheckbox": [4, "use-checkbox"],
13906
- "label": [1],
13907
- "labelWidth": [8, "label-width"],
13908
- "icon": [16],
13909
- "labelTooltip": [1, "label-tooltip"],
13910
- "labelTooltipProps": [16],
13911
- "rules": [16],
13912
- "error": [4],
13913
- "optionRenderer": [16],
13914
- "isOpen": [32],
13915
- "itemIndex": [32],
13916
- "isScrolled": [32],
13917
- "sdOpen": [64],
13918
- "sdValidate": [64],
13919
- "sdReset": [64],
13920
- "sdResetValidate": [64],
13921
- "sdFocus": [64]
13922
- },
13923
- "$listeners$": undefined,
13924
- "$lazyBundleId$": "-",
13925
- "$attrsToReflect$": []
13926
- }; }
13927
- }
13928
-
13929
- 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}`;
13930
-
13931
- /**
13932
- * @deprecated sd-select-v2 (name="multi_depth")를 사용하세요.
13933
- */
13934
- class SdSelectMultipleGroup extends BaseDropdownEvent {
13935
- constructor(hostRef) {
13936
- super();
13937
- registerInstance(this, hostRef);
13938
- this.update = createEvent(this, "sdUpdate", 7);
13939
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13940
- }
13941
- get el() { return getElement(this); }
13942
- // props
13943
- value = null;
13944
- options = [];
13945
- placeholder = '선택';
13946
- optionPlaceholder = '선택지가 없습니다.';
13947
- width = '200px';
13948
- dropdownHeight = '260px';
13949
- disabled = false;
13950
- clearable = false;
13951
- searchable = false;
13952
- useCheckbox = false;
13953
- useAll = false;
13954
- allCheckedLabel = '전체';
13955
- allCheckOptionLabel = '전체';
13956
- // props - label
13957
- label = '';
13958
- labelWidth = '';
13959
- icon = undefined;
13960
- labelTooltip = '';
13961
- labelTooltipProps = null;
13962
- // props - form
13963
- rules = [];
13964
- error = false;
13965
- // props - custom styles
13966
- containerStyle = {};
13967
- triggerStyle = {};
13968
- dropdownStyle = {};
13969
- optionStyle = {};
13970
- labelStyle = {};
13971
- // props - custom slots
13972
- optionRenderer;
13973
- // states
13974
- filteredOptions = [];
13975
- isOpen = false;
13976
- searchText = null;
13977
- itemIndex = -1;
13978
- isScrolled = false;
13979
- isDropdownReady = false;
13980
- // events
13981
- update;
13982
- dropDownShow;
13983
- selectRef;
13984
- searchRef;
13985
- triggerRef;
13986
- optionRef;
13987
- dropdownRef;
13988
- formField;
13989
- dropDownWidth = '200px';
13990
- name = nanoid$1();
13991
- async sdOpen() {
13992
- await new Promise(resolve => setTimeout(resolve, 0));
13993
- this.isOpen = true;
13994
- }
13995
- async sdValidate() {
13996
- this.formField?.sdValidate();
13997
- }
13998
- async sdReset() {
13999
- this.formField?.sdReset();
14000
- }
14001
- async sdResetValidate() {
14002
- this.formField?.sdResetValidation();
14003
- }
14004
- async sdFocus() {
14005
- this.formField?.sdFocus();
14006
- }
14007
- valueChanged() {
14008
- this.update?.emit(this.value);
14009
- }
14010
- optionsChanged() {
14011
- this.filteredOptions = this.options;
14012
- this.filterOptions();
14013
- }
14014
- searchTextChanged() {
14015
- this.filterOptions();
14016
- }
14017
- async itemIndexChanged(newIndex, oldIndex) {
14018
- if (this.searchable) {
14019
- const searchInput = await this.getNativeInputElement();
14020
- if (this.itemIndex === -1) {
14021
- searchInput?.focus({ preventScroll: true });
14022
- return;
14023
- }
14024
- else if (searchInput?.matches(':focus')) {
14025
- searchInput?.blur();
14026
- }
14027
- }
14028
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
14029
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
14030
- const actualIndex = this.useAll ? this.itemIndex + 1 : this.itemIndex;
14031
- const currentItem = optionElements?.[actualIndex];
14032
- if (!currentItem || !this.isOpen)
14033
- return;
14034
- this.optionRef = currentItem;
14035
- const isOptionDisabled = await this.optionRef.isDisabled();
14036
- if (isOptionDisabled) {
14037
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
14038
- return;
14039
- }
14040
- this.scrollToOption(currentItem);
14041
- }
14042
- async isOpenChanged() {
14043
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
14044
- this.onDropdownToggle(this.isOpen);
14045
- this.dropDownShow?.emit({ isOpen: this.isOpen });
14046
- this.isDropdownReady = false;
14047
- if (this.isOpen === false) {
14048
- await this.formField?.sdValidate();
14049
- return;
14050
- }
14051
- // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
14052
- requestAnimationFrame(() => {
14053
- requestAnimationFrame(async () => {
14054
- const selectedOptions = this.getSelectedOption();
14055
- // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
14056
- if (selectedOptions && selectedOptions.length > 0) {
14057
- const selectedIndex = this.options.indexOf(selectedOptions[0]);
14058
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
14059
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
14060
- const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
14061
- // 선택된 옵션이 화면 가운데에 오도록 index 조정
14062
- const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
14063
- const currentItem = optionElements?.[targetIndex];
14064
- if (currentItem) {
14065
- this.scrollToOption(currentItem);
14066
- }
14067
- }
14068
- this.isDropdownReady = true;
14069
- if (this.searchable) {
14070
- const searchInput = await this.getNativeInputElement();
14071
- if (searchInput) {
14072
- requestAnimationFrame(() => {
14073
- searchInput.focus({ preventScroll: true });
14074
- });
14075
- }
14076
- }
14077
- });
14078
- });
14079
- }
14080
- componentWillLoad() {
14081
- this.filteredOptions = this.options;
14082
- this.dropDownWidth = this.width;
14083
- this.initializeEvent();
14084
- }
14085
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
14086
- componentDidRender() {
14087
- const trigger = this.triggerRef;
14088
- const rect = trigger?.getBoundingClientRect();
14089
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
14090
- }
14091
- disconnectedCallback() {
14092
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
14093
- }
14094
- handleDocumentClick(event) {
14095
- if (!this.selectRef?.contains(event.target)) {
14096
- this.isOpen = false;
14097
- }
14098
- }
14099
- handleDocumentKeydown(keyboardEvent) {
14100
- keyboardEvent.stopPropagation();
14101
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
14102
- if (!targetKey.includes(keyboardEvent.key))
14103
- return;
14104
- keyboardEvent.preventDefault();
14105
- switch (keyboardEvent.key) {
14106
- case 'ArrowDown':
14107
- case 'ArrowUp':
14108
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
14109
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
14110
- this.itemIndex = nextIndex;
14111
- break;
14112
- case 'Enter':
14113
- const selectedOption = this.filteredOptions[this.itemIndex];
14114
- if (selectedOption && !selectedOption.disabled) {
14115
- this.handleOptionSelection(selectedOption);
14116
- }
14117
- break;
14118
- case 'Escape':
14119
- this.isOpen = false;
14120
- break;
14121
- }
14122
- }
14123
- // event handlers
14124
- handleTriggerClick = (event) => {
14125
- event.stopPropagation();
14126
- if (!this.disabled) {
14127
- this.isOpen = !this.isOpen;
14128
- this.dropDownShow?.emit({ isOpen: this.isOpen });
14129
- }
14130
- };
14131
- handleAllOptionClick = (detail) => {
14132
- if (detail.isSelected) {
14133
- // 이미 선택된 옵션인 경우, 선택 해제
14134
- const filterDisabledOptions = this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled);
14135
- this.value =
14136
- this.value?.filter(selected => !filterDisabledOptions.some(opt => opt.value === selected.value)) || this.value;
14137
- }
14138
- else {
14139
- // 새로운 옵션 선택
14140
- const valueSet = new Set([
14141
- ...(this.value || []),
14142
- ...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled),
14143
- ]);
14144
- this.value = Array.from(valueSet);
14145
- }
14146
- };
14147
- handleOptionClick = (detail) => {
14148
- const { option, event } = detail;
14149
- event.stopPropagation();
14150
- if (option.type === 'group')
14151
- this.handleGroupOptionClick(detail);
14152
- if (option.type === 'subgroup')
14153
- this.handleSubGroupOptionClick(detail);
14154
- if (option.type === 'item')
14155
- this.handleOptionSelection(option);
14156
- };
14157
- handleGroupOptionClick = (detail) => {
14158
- const { option, isSelected } = detail;
14159
- const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
14160
- childOptions.forEach(subgroup => {
14161
- this.handleSubGroupOptionClick({
14162
- option: subgroup,
14163
- isSelected: isSelected || isSelected === null,
14164
- });
14165
- });
14166
- };
14167
- handleSubGroupOptionClick = (detail) => {
14168
- const { option, isSelected } = detail;
14169
- const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
14170
- if (isSelected || isSelected === null) {
14171
- // 모든 자식 옵션이 선택된 경우, 모두 선택 해제
14172
- this.value =
14173
- this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||
14174
- null;
14175
- }
14176
- else {
14177
- // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택
14178
- const newSelections = childOptions.filter(child => !this.value?.some(selected => selected.value === child.value));
14179
- this.value = [...(this.value || []), ...newSelections];
14180
- }
14181
- };
14182
- filterOptions() {
14183
- if (!this.searchText || this.searchText.trim() === '') {
14184
- // 검색어가 없으면 전체 옵션 표시
14185
- this.filteredOptions = this.options;
14186
- return;
14187
- }
14188
- const searchTerm = this.searchText.toLowerCase();
14189
- const matchedOptions = new Set();
14190
- // 1. 직접 매칭되는 옵션들 찾기
14191
- this.options.forEach(option => {
14192
- if (option.label.toLowerCase().includes(searchTerm)) {
14193
- matchedOptions.add(option);
14194
- // 매칭된 옵션의 상위 그룹들도 포함
14195
- this.addParentGroups(option, matchedOptions);
14196
- }
14197
- });
14198
- // 2. Set을 배열로 변환하고 원본 순서 유지
14199
- this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
14200
- }
14201
- addParentGroups(option, matchedSet) {
14202
- if (!option.parent)
14203
- return;
14204
- const parentOption = this.options.find(opt => opt.value === option.parent);
14205
- if (parentOption && !matchedSet.has(parentOption)) {
14206
- matchedSet.add(parentOption);
14207
- // 재귀적으로 상위 그룹들도 추가
14208
- this.addParentGroups(parentOption, matchedSet);
14209
- }
14210
- }
14211
- getSelectedOption() {
14212
- return this.options.filter(option => this.value?.includes(option));
14213
- }
14214
- handleDropdownScroll = (event) => {
14215
- const target = event.target;
14216
- const scrollTop = target.scrollTop;
14217
- // 스크롤이 조금이라도 되면 그림자 표시
14218
- this.isScrolled = scrollTop > 0;
14219
- };
14220
- async getNativeInputElement() {
14221
- if (this.searchRef) {
14222
- return this.searchRef.sdGetNativeElement();
14223
- }
14224
- return null;
14225
- }
14226
- handleOptionSelection = (option) => {
14227
- if (!option || option.disabled)
14228
- return;
14229
- const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
14230
- if (isAlreadySelected) {
14231
- // 이미 선택된 옵션인 경우, 선택 해제
14232
- this.value = this.value?.filter(opt => opt.value !== option.value) || null;
14233
- }
14234
- else {
14235
- // 새로운 옵션 선택
14236
- this.value = [...(this.value || []), option];
14237
- }
14238
- };
14239
- getAllItemsUnderOption(parentOption, includeDisabled = false) {
14240
- const filterChildrenWithParent = (option) => option.parent === parentOption.value && (includeDisabled || !option.disabled);
14241
- if (parentOption.type === 'subgroup') {
14242
- return this.filteredOptions.filter(option => filterChildrenWithParent(option) && option.type === 'item');
14243
- }
14244
- const allItems = [];
14245
- const childOptions = this.filteredOptions.filter(filterChildrenWithParent);
14246
- const subgroupOptions = childOptions.filter(option => option.type === 'subgroup');
14247
- subgroupOptions.forEach(subgroup => {
14248
- const itemsUnderSubgroup = this.filteredOptions.filter(option => option.parent === subgroup.value &&
14249
- option.type === 'item' &&
14250
- (includeDisabled ? true : !option.disabled));
14251
- allItems.push(...itemsUnderSubgroup);
14252
- });
14253
- const directItems = childOptions.filter(option => option.type === 'item');
14254
- allItems.push(...directItems);
14255
- return allItems;
14256
- }
14257
- isAllChildrenSelected(groupOption) {
14258
- const allItems = this.getAllItemsUnderOption(groupOption);
14259
- if (allItems.length === 0)
14260
- return false;
14261
- const selectedItems = allItems.filter(item => this.value?.some(selected => selected.value === item.value));
14262
- if (selectedItems.length === allItems.length)
14263
- return true;
14264
- if (selectedItems.length > 0)
14265
- return null;
14266
- return false;
14267
- }
14268
- getChildrenOptions(parentOption) {
14269
- const allItems = this.getAllItemsUnderOption(parentOption, true);
14270
- const selectedCount = allItems.filter(item => this.value?.some(val => val.value === item.value)).length;
14271
- return {
14272
- selectedCount,
14273
- totalCount: allItems.length,
14274
- };
14275
- }
14276
- isAllOptionsSelected() {
14277
- if (!this.value || this.value.length === 0)
14278
- return false;
14279
- const selectableItems = this.options.filter(opt => opt.type === 'item' && !opt.disabled);
14280
- if (selectableItems.length === 0)
14281
- return false;
14282
- const selectedValues = new Set(this.value.map(v => v.value));
14283
- return selectableItems.every(option => selectedValues.has(option.value));
14284
- }
14285
- getTriggerLabel() {
14286
- const selectedOption = this.getSelectedOption();
14287
- if (!selectedOption)
14288
- return '선택';
14289
- if (selectedOption.length === 0)
14290
- return this.placeholder;
14291
- const isAllChecked = this.isAllOptionsSelected();
14292
- return isAllChecked
14293
- ? this.allCheckedLabel
14294
- : selectedOption.map(option => option.label).join(', ');
14295
- }
14296
- closeDropdown() {
14297
- this.isOpen = false;
14298
- }
14299
- async scrollToOption(optionElement) {
14300
- if (!this.dropdownRef || !optionElement)
14301
- return;
14302
- requestAnimationFrame(() => {
14303
- const dropdown = this.dropdownRef;
14304
- const optionTop = optionElement.offsetTop;
14305
- const optionHeight = optionElement.offsetHeight;
14306
- const dropdownScrollTop = dropdown.scrollTop;
14307
- const dropdownHeight = dropdown.clientHeight;
14308
- const searchContainer = dropdown.querySelector('.sd-select-multiple-group__search-container');
14309
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
14310
- const visibleContentHeight = dropdownHeight - searchOffset;
14311
- const visibleTop = dropdownScrollTop + searchOffset;
14312
- const visibleBottom = dropdownScrollTop + dropdownHeight;
14313
- if (optionTop < visibleTop) {
14314
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
14315
- }
14316
- else if (optionTop + optionHeight > visibleBottom) {
14317
- dropdown.scrollTo({
14318
- top: optionTop + optionHeight - visibleContentHeight - searchOffset,
14319
- behavior: 'instant',
14320
- });
14321
- }
14322
- });
14323
- }
14324
- render() {
14325
- 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: {
14326
- 'sd-select-multiple-group': true,
14327
- 'sd-select-multiple-group--open': this.isOpen,
14328
- 'sd-select-multiple-group--disabled': this.disabled,
14329
- 'sd-select-multiple-group--label': !!this.label,
14330
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
14331
- }
14332
- renderTrigger() {
14333
- const selectedOption = this.getSelectedOption();
14334
- 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) => {
14335
- event.stopPropagation();
14336
- this.value = null;
14337
- await this.formField?.sdValidate();
14338
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
14339
- 'sd-select-multiple-group__arrow': true,
14340
- 'sd-select-multiple-group__arrow--open': this.isOpen,
14341
- } })));
14342
- }
14343
- renderDropdown() {
14344
- const style = {
14345
- '--select-width': this.dropDownWidth || '200px',
14346
- '--select-dropdown-height': this.dropdownHeight || '260px',
14347
- };
14348
- if (this.isOpen === false)
14349
- return null;
14350
- 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: {
14351
- 'sd-select-multiple-group__dropdown': true,
14352
- 'sd-select-multiple-group__dropdown--ready': this.isDropdownReady,
14353
- }, 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'
14354
- ? this.value?.some(selected => selected.value === option.value)
14355
- : this.isAllChildrenSelected(option), isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
14356
- if (option.type !== 'item' && !this.useCheckbox) {
14357
- return;
14358
- }
14359
- this.handleOptionClick(detail);
14360
- }, 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)))))));
14361
- }
14362
- static get watchers() { return {
14363
- "value": [{
14364
- "valueChanged": 0
14365
- }],
14366
- "options": [{
14367
- "optionsChanged": 0
14368
- }],
14369
- "searchText": [{
14370
- "searchTextChanged": 0
14371
- }],
14372
- "itemIndex": [{
14373
- "itemIndexChanged": 0
14374
- }],
14375
- "isOpen": [{
14376
- "isOpenChanged": 0
14377
- }]
14378
- }; }
14379
- static get style() { return sdSelectMultipleGroupCss(); }
14380
- static get cmpMeta() { return {
14381
- "$flags$": 772,
14382
- "$tagName$": "sd-select-multiple-group",
14383
- "$members$": {
14384
- "value": [1040],
14385
- "options": [1040],
14386
- "placeholder": [1],
14387
- "optionPlaceholder": [1, "option-placeholder"],
14388
- "width": [1],
14389
- "dropdownHeight": [1, "dropdown-height"],
14390
- "disabled": [4],
14391
- "clearable": [4],
14392
- "searchable": [4],
14393
- "useCheckbox": [4, "use-checkbox"],
14394
- "useAll": [4, "use-all"],
14395
- "allCheckedLabel": [1, "all-checked-label"],
14396
- "allCheckOptionLabel": [1, "all-check-option-label"],
14397
- "label": [1],
14398
- "labelWidth": [8, "label-width"],
14399
- "icon": [16],
14400
- "labelTooltip": [1, "label-tooltip"],
14401
- "labelTooltipProps": [16],
14402
- "rules": [16],
14403
- "error": [4],
14404
- "containerStyle": [16],
14405
- "triggerStyle": [16],
14406
- "dropdownStyle": [16],
14407
- "optionStyle": [16],
14408
- "labelStyle": [16],
14409
- "optionRenderer": [16],
14410
- "filteredOptions": [32],
14411
- "isOpen": [32],
14412
- "searchText": [32],
14413
- "itemIndex": [32],
14414
- "isScrolled": [32],
14415
- "isDropdownReady": [32],
14416
- "sdOpen": [64],
14417
- "sdValidate": [64],
14418
- "sdReset": [64],
14419
- "sdResetValidate": [64],
14420
- "sdFocus": [64]
14421
- },
14422
- "$listeners$": undefined,
14423
- "$lazyBundleId$": "-",
14424
- "$attrsToReflect$": []
14425
- }; }
14426
- }
14427
-
14428
- 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}`;
14429
-
14430
- class SdSelectOption {
14431
- constructor(hostRef) {
14432
- registerInstance(this, hostRef);
14433
- this.optionClick = createEvent(this, "optionClick", 7);
14434
- }
14435
- get el() { return getElement(this); }
14436
- option;
14437
- index;
14438
- isSelected = false;
14439
- isFocused = false;
14440
- optionStyle;
14441
- disabled = false;
14442
- useCheckbox = false;
14443
- isHovered = false;
14444
- async sdIsDisabled() {
14445
- return !!this.option.disabled;
14446
- }
14447
- optionClick;
14448
- handleClick = (event) => {
14449
- event.stopPropagation();
14450
- if (!this.option.disabled && !this.disabled) {
14451
- this.optionClick.emit({
14452
- option: this.option,
14453
- index: this.index,
14454
- event,
14455
- });
14456
- }
14457
- };
14458
- render() {
14459
- return (hAsync("div", { key: '413176678e27ad80c3ba51f8e32681f017d210ac', class: {
14460
- 'sd-select__option': true,
14461
- 'sd-select__option--selected': this.isSelected,
14462
- 'sd-select__option--disabled': !!this.option.disabled,
14463
- 'sd-select__option--focused': this.isFocused,
14464
- 'sd-select__option--use-checkbox': this.useCheckbox,
14465
- }, 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,
14466
- // checkboxStyle={
14467
- // !this.isSelected
14468
- // ? { borderColor: '#888' }
14469
- // : this.isHovered
14470
- // ? { borderColor: 'white' }
14471
- // : { borderColor: '#0075ff' }
14472
- // }
14473
- onClick: e => {
14474
- e.preventDefault();
14475
- this.handleClick(e);
14476
- } }), hAsync("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label)));
14477
- }
14478
- static get style() { return sdSelectOptionCss(); }
14479
- static get cmpMeta() { return {
14480
- "$flags$": 512,
14481
- "$tagName$": "sd-select-option",
14482
- "$members$": {
14483
- "option": [16],
14484
- "index": [2],
14485
- "isSelected": [4, "is-selected"],
14486
- "isFocused": [4, "is-focused"],
14487
- "optionStyle": [16],
14488
- "disabled": [4],
14489
- "useCheckbox": [4, "use-checkbox"],
14490
- "isHovered": [32],
14491
- "sdIsDisabled": [64]
14492
- },
14493
- "$listeners$": undefined,
14494
- "$lazyBundleId$": "-",
14495
- "$attrsToReflect$": []
14496
- }; }
14497
- }
14498
-
14499
- 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}`;
14500
-
14501
- class SdSelectOptionGroup {
14502
- constructor(hostRef) {
14503
- registerInstance(this, hostRef);
14504
- this.optionClick = createEvent(this, "optionClick", 7);
14505
- }
14506
- get el() { return getElement(this); }
14507
- option;
14508
- index;
14509
- isSelected = false;
14510
- isFocused = false;
14511
- optionStyle;
14512
- disabled = false;
14513
- useCheckbox = false;
14514
- useIndicator = true;
14515
- countInfo = {
14516
- selectedCount: 0,
14517
- totalCount: 0,
14518
- };
14519
- isHovered = false;
14520
- async isDisabled() {
14521
- return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
14522
- }
14523
- optionClick;
14524
- handleClick = (option, isSelected, event) => {
14525
- event.stopPropagation();
14526
- if (option.type === 'group' || option.type === 'subgroup') {
14527
- this.optionClick.emit({
14528
- option: this.option,
14529
- isSelected,
14530
- index: this.index,
14531
- event,
14532
- });
14533
- return;
14534
- }
14535
- if (!this.option.disabled && !this.disabled) {
14536
- this.optionClick.emit({
14537
- option: this.option,
14538
- isSelected,
14539
- index: this.index,
14540
- event,
14541
- });
14542
- }
14543
- };
14544
- render() {
14545
- return (hAsync("div", { key: '647a7be115df96fe30d3b69d3b09ee45d229d86c', class: {
14546
- 'sd-select__option-group': true,
14547
- 'sd-select__option-group--selected': !!this.isSelected,
14548
- 'sd-select__option-group--disabled': !!this.option.disabled,
14549
- 'sd-select__option-group--focused': this.isFocused,
14550
- 'sd-select__option-group--use-checkbox': this.useCheckbox,
14551
- 'sd-select__option-group--group': this.option.type === 'group',
14552
- 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
14553
- 'sd-select__option-group--item': this.option.type === 'item',
14554
- }, 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 => {
14555
- e.preventDefault();
14556
- this.handleClick(this.option, this.isSelected, e);
14557
- } })), 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})`)))));
14558
- }
14559
- static get style() { return sdSelectOptionGroupCss(); }
14560
- static get cmpMeta() { return {
14561
- "$flags$": 512,
14562
- "$tagName$": "sd-select-option-group",
14563
- "$members$": {
14564
- "option": [16],
14565
- "index": [2],
14566
- "isSelected": [4, "is-selected"],
14567
- "isFocused": [4, "is-focused"],
14568
- "optionStyle": [16],
14569
- "disabled": [4],
14570
- "useCheckbox": [4, "use-checkbox"],
14571
- "useIndicator": [4, "use-indicator"],
14572
- "countInfo": [16],
14573
- "isHovered": [32],
14574
- "isDisabled": [64]
14575
- },
14576
- "$listeners$": undefined,
14577
- "$lazyBundleId$": "-",
14578
- "$attrsToReflect$": []
14579
- }; }
14580
- }
14581
-
14582
- 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)}`;
14583
-
14584
- class SdSelectSearchInput {
14585
- constructor(hostRef) {
14586
- registerInstance(this, hostRef);
14587
- this.searchInput = createEvent(this, "sdSearchInput", 7);
14588
- this.searchFocus = createEvent(this, "sdSearchFocus", 7);
14589
- }
14590
- isScrolled = false;
14591
- searchText = '';
14592
- searchInput;
14593
- searchFocus;
14594
- searchRef;
14595
- async sdGetNativeElement() {
14596
- if (this.searchRef) {
14597
- return this.searchRef.sdGetNativeElement();
14598
- }
14599
- return null;
14600
- }
14601
- async sdSearchInputFocus() {
14602
- const input = await this.sdGetNativeElement();
14603
- input?.focus({ preventScroll: true });
14604
- }
14605
- render() {
14606
- return (hAsync("div", { key: 'f056d50b2a0ca1e40efabaae5071d56259d2094b', class: {
14607
- 'sd-select-search-input': true,
14608
- 'sd-select-search-input--scrolled': !!this.isScrolled,
14609
- }, 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 => {
14610
- this.searchInput.emit(String(event?.detail));
14611
- }, onSdFocus: () => {
14612
- this.searchFocus.emit();
14613
- }, onKeyDown: event => {
14614
- if (event.code === 'Enter')
14615
- event.stopPropagation();
14616
- } }, hAsync("sd-icon", { key: 'd7e976a06b6a889a1be2b79252f1d57729953522', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
14617
- }
14618
- static get style() { return sdSelectSearchInputCss(); }
14619
- static get cmpMeta() { return {
14620
- "$flags$": 512,
14621
- "$tagName$": "sd-select-search-input",
14622
- "$members$": {
14623
- "isScrolled": [4, "is-scrolled"],
14624
- "searchText": [1, "search-text"],
14625
- "sdGetNativeElement": [64],
14626
- "sdSearchInputFocus": [64]
14627
- },
14628
- "$listeners$": undefined,
14629
- "$lazyBundleId$": "-",
14630
- "$attrsToReflect$": []
14631
- }; }
14632
- }
14633
-
14634
- 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%}`;
14635
-
14636
- class SdSelectV2 {
14637
- constructor(hostRef) {
14638
- registerInstance(this, hostRef);
14639
- this.update = createEvent(this, "sdUpdate", 7);
14640
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
14641
- }
14642
- static VIEWPORT_PADDING = 20;
14643
- static PORTAL_OFFSET_Y = 4;
14644
- static CLOSE_ANIMATION_DURATION = 150;
14645
- get el() { return getElement(this); }
14646
- type = 'default';
14647
- value = null;
14648
- options = [];
14649
- placeholder = '선택';
14650
- maxDropdownWidth = '640px';
14651
- dropdownHeight = '260px';
14652
- disabled = false;
14653
- label = '';
14654
- labelWidth = '';
14655
- addonLabel = '';
14656
- addonAlign = 'start';
14657
- error = false;
14658
- hint = '';
14659
- errorMessage = '';
14660
- rules = [];
14661
- icon = undefined;
14662
- labelTooltip = '';
14663
- labelTooltipProps = null;
14664
- emitValue = false;
14665
- width = '';
14666
- useSearch = false;
14667
- allSelectedLabel = '전체';
14668
- useSelectAll = false;
14669
- isOpen = false;
14670
- isAnimatingOut = false;
14671
- triggerWidth = '200px';
14672
- resolvedDropdownHeight = '260px';
14673
- resolvedMaxDropdownWidth = '640px';
14674
- focused = false;
14675
- hovered = false;
14676
- update;
14677
- dropDownShow;
14678
- async sdFocus() {
14679
- if (this.disabled)
14680
- return;
14681
- await this.triggerComponentRef?.sdFocus();
14682
- }
14683
- async sdOpen() {
14684
- // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
14685
- await new Promise(resolve => setTimeout(resolve, 0));
14686
- if (this.disabled || this.isOpen)
14687
- return;
14688
- this.prepareDropdownGeometry();
14689
- if (this.closeAnimationTimer)
14690
- clearTimeout(this.closeAnimationTimer);
14691
- this.isAnimatingOut = false;
14692
- this.isOpen = true;
14693
- }
14694
- triggerRef;
14695
- triggerComponentRef;
14696
- closeAnimationTimer;
14697
- name = nanoid$1();
14698
- triggerHasFocus = false;
14699
- watchIsOpen(newValue) {
14700
- this.syncFocusedState(newValue);
14701
- this.dropDownShow.emit({ isOpen: newValue });
14702
- }
14703
- get isMulti() {
14704
- return this.type === 'multi' || this.type === 'multi_depth';
14705
- }
14706
- get displayText() {
14707
- if (this.isMulti) {
14708
- if (!Array.isArray(this.value) || this.value.length === 0)
14709
- return '';
14710
- const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
14711
- const selected = this.getSelectedOptions();
14712
- const allSelected = nonDisabledLeaves.length > 0 &&
14713
- nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
14714
- if (allSelected)
14715
- return this.allSelectedLabel ?? '전체';
14716
- const flat = this.flattenOptions(this.options);
14717
- return this.value
14718
- .map(item => {
14719
- if (item != null && typeof item === 'object') {
14720
- const opt = item;
14721
- return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
14722
- }
14723
- return flat.find(o => o.value === item)?.label ?? '';
14724
- })
14725
- .filter(Boolean)
14726
- .join(', ');
14727
- }
14728
- if (this.value == null)
14729
- return '';
14730
- if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
14731
- return this.value.label ?? '';
14732
- }
14733
- const flat = this.flattenOptions(this.options);
14734
- const found = flat.find(o => o.value === this.value);
14735
- return found?.label ?? '';
14736
- }
14737
- flattenOptions(options) {
14738
- return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
14739
- }
14740
- getNonDisabledLeaves(options) {
14741
- return options.flatMap(o => {
14742
- if (o.disabled)
14743
- return [];
14744
- if (o.children)
14745
- return this.getNonDisabledLeaves(o.children);
14746
- return [o];
14747
- });
14748
- }
14749
- getSelectedOptions() {
14750
- const val = this.value;
14751
- if (!val || !Array.isArray(val))
14752
- return [];
14753
- if (this.emitValue) {
14754
- return val
14755
- .map(v => this.findOriginalOption(v, this.options))
14756
- .filter((o) => !!o);
14757
- }
14758
- return val;
14759
- }
14760
- toMultiValue(options) {
14761
- return this.emitValue ? options.map(o => o.value) : options;
14762
- }
14763
- parsePixelValue(value, fallback) {
14764
- const parsed = Number.parseFloat(value);
14765
- return Number.isFinite(parsed) ? parsed : fallback;
14766
- }
14767
- updateDropdownViewportConstraints() {
14768
- if (!this.triggerRef)
14769
- return;
14770
- const triggerRect = this.triggerRef.getBoundingClientRect();
14771
- const viewportPadding = SdSelectV2.VIEWPORT_PADDING;
14772
- const offsetY = SdSelectV2.PORTAL_OFFSET_Y;
14773
- const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
14774
- const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
14775
- const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
14776
- const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
14777
- const availableHeight = Math.max(availableBelow, availableAbove);
14778
- const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
14779
- this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
14780
- this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
14781
- }
14782
- handleViewportResize = () => {
14783
- if (!this.isOpen)
14784
- return;
14785
- this.updateDropdownViewportConstraints();
12874
+ handleViewportResize = () => {
12875
+ if (!this.isOpen)
12876
+ return;
12877
+ this.updateDropdownViewportConstraints();
14786
12878
  };
14787
12879
  findOriginalOption(value, options) {
14788
12880
  for (const opt of options) {
@@ -14805,7 +12897,7 @@ class SdSelectV2 {
14805
12897
  clearTimeout(this.closeAnimationTimer);
14806
12898
  this.closeAnimationTimer = setTimeout(() => {
14807
12899
  this.isAnimatingOut = false;
14808
- }, SdSelectV2.CLOSE_ANIMATION_DURATION);
12900
+ }, SdSelect.CLOSE_ANIMATION_DURATION);
14809
12901
  }
14810
12902
  prepareDropdownGeometry() {
14811
12903
  if (this.triggerRef) {
@@ -14887,30 +12979,30 @@ class SdSelectV2 {
14887
12979
  const portalProps = {
14888
12980
  open: this.isOpen,
14889
12981
  parentRef: this.triggerRef,
14890
- viewportPadding: SdSelectV2.VIEWPORT_PADDING,
12982
+ viewportPadding: SdSelect.VIEWPORT_PADDING,
14891
12983
  onSdClose: () => {
14892
12984
  this.closeDropdown();
14893
12985
  },
14894
12986
  };
14895
- 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: () => {
12987
+ return (hAsync("sd-field", { key: '76625e332090d20e2f66159bba5ee1b9a11320a6', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
14896
12988
  this.hovered = true;
14897
12989
  }, onMouseLeave: () => {
14898
12990
  this.hovered = false;
14899
- } }, hAsync("div", { key: '42fa82a3c53804d9f90aadb0465d52fd9f4e446e', class: "sd-select-v2", ref: el => {
12991
+ } }, hAsync("div", { key: '8a0ae8a5e05459128409dbe21779f5e3d91b3a04', class: "sd-select", ref: el => {
14900
12992
  this.triggerRef = el;
14901
- } }, hAsync("sd-select-v2-trigger", { key: 'c97ae1e67019b099eee72f829d554b9e0350af30', ref: el => {
12993
+ } }, hAsync("sd-select-trigger", { key: '6b47231914655a8e197e3b38cd8e37c5214efc17', ref: el => {
14902
12994
  this.triggerComponentRef = el;
14903
- }, 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) })))));
12995
+ }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'eaed402d276cc94a1324ede9cbf09bc436f8a1db', ...portalProps }, hAsync("sd-select-listbox", { key: 'a96f75e06d974c8fd88ac72f083fe4b0ef424a0b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
14904
12996
  }
14905
12997
  static get watchers() { return {
14906
12998
  "isOpen": [{
14907
12999
  "watchIsOpen": 0
14908
13000
  }]
14909
13001
  }; }
14910
- static get style() { return sdSelectV2Css(); }
13002
+ static get style() { return sdSelectCss(); }
14911
13003
  static get cmpMeta() { return {
14912
13004
  "$flags$": 512,
14913
- "$tagName$": "sd-select-v2",
13005
+ "$tagName$": "sd-select",
14914
13006
  "$members$": {
14915
13007
  "type": [1],
14916
13008
  "value": [1032],
@@ -15116,9 +13208,9 @@ function filterTree(options, keyword) {
15116
13208
  }, []);
15117
13209
  }
15118
13210
 
15119
- const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count{color:#ffffff}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}`;
13211
+ const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
15120
13212
 
15121
- class SdSelectV2ListItem {
13213
+ class SdSelectListItem {
15122
13214
  constructor(hostRef) {
15123
13215
  registerInstance(this, hostRef);
15124
13216
  this.listItemClick = createEvent(this, "sdListItemClick", 7);
@@ -15188,22 +13280,22 @@ class SdSelectV2ListItem {
15188
13280
  if (isDepth1Group) {
15189
13281
  cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
15190
13282
  }
15191
- return (hAsync("div", { key: '62974a8d1442730ca752b3fc11f151c4a5be4ad1', class: {
15192
- 'sd-select-v2-list-item': true,
15193
- 'sd-select-v2-list-item--group': isGroup,
15194
- 'sd-select-v2-list-item--depth1-group': isDepth1Group,
15195
- 'sd-select-v2-list-item--depth2-group': isDepth2Group,
15196
- 'sd-select-v2-list-item--selected': this.isSelected === true,
15197
- 'sd-select-v2-list-item--indeterminate': this.isSelected === null,
15198
- 'sd-select-v2-list-item--focused': this.isFocused,
15199
- 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
15200
- 'sd-select-v2-list-item--disabled': !!this.option.disabled,
15201
- }, 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, ")"))));
15202
- }
15203
- static get style() { return sdSelectV2ListItemCss(); }
13283
+ return (hAsync("div", { key: 'c6f959e9290213c9003914dbdd696c3c339cce51', class: {
13284
+ 'sd-select-list-item': true,
13285
+ 'sd-select-list-item--group': isGroup,
13286
+ 'sd-select-list-item--depth1-group': isDepth1Group,
13287
+ 'sd-select-list-item--depth2-group': isDepth2Group,
13288
+ 'sd-select-list-item--selected': this.isSelected === true,
13289
+ 'sd-select-list-item--indeterminate': this.isSelected === null,
13290
+ 'sd-select-list-item--focused': this.isFocused,
13291
+ 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
13292
+ 'sd-select-list-item--disabled': !!this.option.disabled,
13293
+ }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'a884bd82722cd45efc19abd2139d08596f7eda86', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '9aacbeca13e591406454ef7e1c7be40a56a2926b', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '76be4eda3799cfa329016c2ea636feaf624e5025', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
13294
+ }
13295
+ static get style() { return sdSelectListItemCss(); }
15204
13296
  static get cmpMeta() { return {
15205
13297
  "$flags$": 512,
15206
- "$tagName$": "sd-select-v2-list-item",
13298
+ "$tagName$": "sd-select-list-item",
15207
13299
  "$members$": {
15208
13300
  "option": [16],
15209
13301
  "depth": [2],
@@ -15218,9 +13310,9 @@ class SdSelectV2ListItem {
15218
13310
  }; }
15219
13311
  }
15220
13312
 
15221
- const sdSelectV2ListItemSearchCss = () => `sd-select-v2-list-item-search{display:block}sd-select-v2-list-item-search .sd-select-v2-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #CCCCCC;border-radius:4px;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner:focus-within{border-color:#0075FF}sd-select-v2-list-item-search .sd-select-v2-list-item-search__icon{flex-shrink:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input::placeholder{color:#AAAAAA}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear:hover{background:#F0F0F0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
13313
+ const sdSelectListItemSearchCss = () => `sd-select-list-item-search{display:block}sd-select-list-item-search .sd-select-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-list-item-search .sd-select-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-list-item-search .sd-select-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #CCCCCC;border-radius:4px;background:white}sd-select-list-item-search .sd-select-list-item-search__inner:focus-within{border-color:#0075FF}sd-select-list-item-search .sd-select-list-item-search__icon{flex-shrink:0}sd-select-list-item-search .sd-select-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-list-item-search .sd-select-list-item-search__input::placeholder{color:#AAAAAA}sd-select-list-item-search .sd-select-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-list-item-search .sd-select-list-item-search__clear:hover{background:#F0F0F0}sd-select-list-item-search .sd-select-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
15222
13314
 
15223
- class SdSelectV2ListItemSearch {
13315
+ class SdSelectListItemSearch {
15224
13316
  constructor(hostRef) {
15225
13317
  registerInstance(this, hostRef);
15226
13318
  this.searchFilter = createEvent(this, "sdSearchFilter", 7);
@@ -15266,20 +13358,20 @@ class SdSelectV2ListItemSearch {
15266
13358
  clearTimeout(this.debounceTimer);
15267
13359
  }
15268
13360
  render() {
15269
- return (hAsync("div", { key: '75c6b01fbe256bca732553a27711fa7197535688', class: {
15270
- 'sd-select-v2-list-item-search': true,
15271
- 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
15272
- } }, hAsync("div", { key: 'b66cd053b89942f3de55feecdd0eee79b863eb0d', class: "sd-select-v2-list-item-search__inner" }, hAsync("sd-icon", { key: 'bed6f00452187d1087b6bb4653c04e8babeaa277', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), hAsync("input", { key: '4c29192547fcf9ec2563b7d843b8e77a3eb900b1', ref: el => {
13361
+ return (hAsync("div", { key: '139aa74cb44baef15a5a75008dd291f11ad2965b', class: {
13362
+ 'sd-select-list-item-search': true,
13363
+ 'sd-select-list-item-search--scrolled': this.isScrolled,
13364
+ } }, hAsync("div", { key: '2df6559c3a0e769e50e72ef06828adcf595fc433', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '20dfe4a309c7879bcdd1e5890f183a9e1eb98fae', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '825724eedf71693ce39a21f413c5a4eb6f1495e3', ref: el => {
15273
13365
  this.inputEl = el;
15274
- }, 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: {
15275
- 'sd-select-v2-list-item-search__clear': true,
15276
- 'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
15277
- }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: 'a7332ec5ecebf522797bb6db1fdc385c0dfa1abe', name: "close", size: 12, color: "#888888" })))));
13366
+ }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '20fb0c745d423b008f482a2e33e7e711ea40b5df', type: "button", class: {
13367
+ 'sd-select-list-item-search__clear': true,
13368
+ 'sd-select-list-item-search__clear--hidden': !this.searchText,
13369
+ }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: 'ce6e4f9b5281ebb767d6542a223e425660ec01c9', name: "close", size: 12, color: "#888888" })))));
15278
13370
  }
15279
- static get style() { return sdSelectV2ListItemSearchCss(); }
13371
+ static get style() { return sdSelectListItemSearchCss(); }
15280
13372
  static get cmpMeta() { return {
15281
13373
  "$flags$": 512,
15282
- "$tagName$": "sd-select-v2-list-item-search",
13374
+ "$tagName$": "sd-select-list-item-search",
15283
13375
  "$members$": {
15284
13376
  "isScrolled": [4, "is-scrolled"],
15285
13377
  "searchText": [32],
@@ -15291,9 +13383,9 @@ class SdSelectV2ListItemSearch {
15291
13383
  }; }
15292
13384
  }
15293
13385
 
15294
- const sdSelectV2ListboxCss = () => `:host{display:block}:host .sd-select-v2-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
13386
+ const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
15295
13387
 
15296
- class SdSelectV2Listbox {
13388
+ class SdSelectListbox {
15297
13389
  constructor(hostRef) {
15298
13390
  registerInstance(this, hostRef);
15299
13391
  this.optionSelect = createEvent(this, "sdOptionSelect", 7);
@@ -15457,7 +13549,7 @@ class SdSelectV2Listbox {
15457
13549
  get navigableOptions() {
15458
13550
  const items = [];
15459
13551
  if (this.showSelectAll) {
15460
- items.push(SdSelectV2Listbox.SELECT_ALL_OPTION);
13552
+ items.push(SdSelectListbox.SELECT_ALL_OPTION);
15461
13553
  }
15462
13554
  const walk = (opts) => {
15463
13555
  for (const opt of opts) {
@@ -15473,14 +13565,14 @@ class SdSelectV2Listbox {
15473
13565
  return items;
15474
13566
  }
15475
13567
  isSelectAllOption(option) {
15476
- return this.showSelectAll && option.value === SdSelectV2Listbox.SELECT_ALL_OPTION.value;
13568
+ return this.showSelectAll && option.value === SdSelectListbox.SELECT_ALL_OPTION.value;
15477
13569
  }
15478
13570
  emitSelectAll() {
15479
13571
  if (!this.showSelectAll)
15480
13572
  return;
15481
13573
  const allLeaves = this.getAllNonDisabledLeaves();
15482
13574
  this.optionSelect.emit({
15483
- option: { ...SdSelectV2Listbox.SELECT_ALL_OPTION, children: allLeaves },
13575
+ option: { ...SdSelectListbox.SELECT_ALL_OPTION, children: allLeaves },
15484
13576
  leaves: allLeaves,
15485
13577
  });
15486
13578
  }
@@ -15587,7 +13679,7 @@ class SdSelectV2Listbox {
15587
13679
  */
15588
13680
  scrollFocusedIntoView() {
15589
13681
  const list = this.listEl;
15590
- const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
13682
+ const focusedEl = list?.querySelector('.sd-select-list-item--focused');
15591
13683
  if (!list || !focusedEl)
15592
13684
  return;
15593
13685
  const listRect = list.getBoundingClientRect();
@@ -15633,7 +13725,7 @@ class SdSelectV2Listbox {
15633
13725
  return options.map(option => {
15634
13726
  const isGroup = !!option.children;
15635
13727
  return [
15636
- hAsync("sd-select-v2-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
13728
+ hAsync("sd-select-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
15637
13729
  isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
15638
13730
  ];
15639
13731
  });
@@ -15645,19 +13737,19 @@ class SdSelectV2Listbox {
15645
13737
  '--listbox-max-height': this.maxHeight,
15646
13738
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15647
13739
  };
15648
- 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 => {
13740
+ return (hAsync("div", { key: 'c1582b1bc6058b78a8581511854f0878e7f39a94', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '4fd2099bf8069f258596479123053a34a41c528d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'ff8643a308b07dbaebf627c7082a37efa6b72a10', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
15649
13741
  this.listEl = el;
15650
- } }, 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) })))))));
13742
+ } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '30f0cfbc24304af8c704db33d0e51236971226ee', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
15651
13743
  }
15652
13744
  static get watchers() { return {
15653
13745
  "searchKeyword": [{
15654
13746
  "resetFocusOnFilter": 0
15655
13747
  }]
15656
13748
  }; }
15657
- static get style() { return sdSelectV2ListboxCss(); }
13749
+ static get style() { return sdSelectListboxCss(); }
15658
13750
  static get cmpMeta() { return {
15659
13751
  "$flags$": 521,
15660
- "$tagName$": "sd-select-v2-listbox",
13752
+ "$tagName$": "sd-select-listbox",
15661
13753
  "$members$": {
15662
13754
  "type": [1],
15663
13755
  "options": [16],
@@ -15678,9 +13770,9 @@ class SdSelectV2Listbox {
15678
13770
  }; }
15679
13771
  }
15680
13772
 
15681
- const sdSelectV2TriggerCss = () => `sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}`;
13773
+ const sdSelectTriggerCss = () => `sd-select-trigger{display:block;width:100%;height:100%}sd-select-trigger .sd-select-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-trigger .sd-select-trigger--disabled{cursor:not-allowed}sd-select-trigger .sd-select-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-trigger .sd-select-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-trigger .sd-select-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-trigger .sd-select-trigger__icon--open{transform:rotate(180deg)}`;
15682
13774
 
15683
- class SdSelectV2Trigger {
13775
+ class SdSelectTrigger {
15684
13776
  constructor(hostRef) {
15685
13777
  registerInstance(this, hostRef);
15686
13778
  this.triggerClick = createEvent(this, "sdTriggerClick", 7);
@@ -15728,21 +13820,21 @@ class SdSelectV2Trigger {
15728
13820
  ? SELECT_COLORS.icon.disabled
15729
13821
  : SELECT_COLORS.icon.default,
15730
13822
  };
15731
- return (hAsync("div", { key: 'ec8bf544b2878082a046fbe881afa2369709033f', ref: el => {
13823
+ return (hAsync("div", { key: 'dddccfd47738e104a9c715a0c93df1882d28d704', ref: el => {
15732
13824
  this.triggerEl = el;
15733
13825
  }, tabindex: this.disabled ? -1 : 0, class: {
15734
- 'sd-select-v2-trigger': true,
15735
- 'sd-select-v2-trigger--open': this.isOpen,
15736
- 'sd-select-v2-trigger--disabled': this.disabled,
15737
- }, 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: {
15738
- 'sd-select-v2-trigger__icon': true,
15739
- 'sd-select-v2-trigger__icon--open': this.isOpen,
13826
+ 'sd-select-trigger': true,
13827
+ 'sd-select-trigger--open': this.isOpen,
13828
+ 'sd-select-trigger--disabled': this.disabled,
13829
+ }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '9f8572c4ec3fa02c9f94bb94a8a10358c4d6b3ae', class: "sd-select-trigger__content" }, hAsync("span", { key: 'a4b5b27fc3a84adbd2e24981742ca45402993afb', class: "sd-select-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: '97bbcda656bae2248ca83fb2bd56373b2dd8dd41', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
13830
+ 'sd-select-trigger__icon': true,
13831
+ 'sd-select-trigger__icon--open': this.isOpen,
15740
13832
  } }))));
15741
13833
  }
15742
- static get style() { return sdSelectV2TriggerCss(); }
13834
+ static get style() { return sdSelectTriggerCss(); }
15743
13835
  static get cmpMeta() { return {
15744
13836
  "$flags$": 512,
15745
- "$tagName$": "sd-select-v2-trigger",
13837
+ "$tagName$": "sd-select-trigger",
15746
13838
  "$members$": {
15747
13839
  "displayText": [1, "display-text"],
15748
13840
  "placeholder": [1],
@@ -15856,7 +13948,7 @@ class SdSwitch {
15856
13948
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
15857
13949
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
15858
13950
  };
15859
- 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)));
13951
+ return (hAsync("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, hAsync("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
15860
13952
  }
15861
13953
  static get style() { return sdSwitchCss(); }
15862
13954
  static get cmpMeta() { return {
@@ -15900,7 +13992,98 @@ function nanoid(size = 21) {
15900
13992
 
15901
13993
  const TABLE_ID_ATTR = 'table-id';
15902
13994
 
15903
- 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%)}`;
13995
+ const table = {
13996
+ header: {
13997
+ height: "36",
13998
+ paddingX: "16",
13999
+ gap: "4",
14000
+ bg: "#F5FAFF",
14001
+ typography: {
14002
+ fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
14003
+ fontWeight: "500",
14004
+ fontSize: "12",
14005
+ lineHeight: "20",
14006
+ textDecoration: "none"
14007
+ },
14008
+ resizingBar: {
14009
+ color: "#CCCCCC",
14010
+ height: "16"
14011
+ }
14012
+ },
14013
+ body: {
14014
+ "default": {
14015
+ height: "44"},
14016
+ paddingX: "16",
14017
+ typography: {
14018
+ fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
14019
+ fontWeight: "400",
14020
+ fontSize: "12",
14021
+ lineHeight: "20",
14022
+ textDecoration: "none"
14023
+ }
14024
+ },
14025
+ border: {
14026
+ "default": "#E1E1E1",
14027
+ width: {
14028
+ width: "1"
14029
+ }
14030
+ },
14031
+ radius: "8"};
14032
+ var tableTokens = {
14033
+ table: table
14034
+ };
14035
+
14036
+ // ── Header Tokens ──
14037
+ const TABLE_HEADER_LAYOUT = {
14038
+ height: tableTokens.table.header.height,
14039
+ paddingX: tableTokens.table.header.paddingX,
14040
+ gap: tableTokens.table.header.gap,
14041
+ };
14042
+ const TABLE_HEADER_TYPOGRAPHY = {
14043
+ fontFamily: tableTokens.table.header.typography.fontFamily,
14044
+ fontWeight: tableTokens.table.header.typography.fontWeight,
14045
+ fontSize: tableTokens.table.header.typography.fontSize,
14046
+ lineHeight: tableTokens.table.header.typography.lineHeight,
14047
+ textDecoration: tableTokens.table.header.typography.textDecoration,
14048
+ };
14049
+ const TABLE_HEADER_COLORS = {
14050
+ bg: tableTokens.table.header.bg,
14051
+ };
14052
+ const TABLE_HEADER_RESIZING_BAR = {
14053
+ color: tableTokens.table.header.resizingBar.color,
14054
+ height: tableTokens.table.header.resizingBar.height,
14055
+ };
14056
+ // ── Body Tokens ──
14057
+ const TABLE_BODY_LAYOUT = {
14058
+ default: {
14059
+ height: tableTokens.table.body.default.height},
14060
+ paddingX: tableTokens.table.body.paddingX};
14061
+ const TABLE_BODY_TYPOGRAPHY = {
14062
+ fontFamily: tableTokens.table.body.typography.fontFamily,
14063
+ fontWeight: tableTokens.table.body.typography.fontWeight,
14064
+ fontSize: tableTokens.table.body.typography.fontSize,
14065
+ lineHeight: tableTokens.table.body.typography.lineHeight,
14066
+ textDecoration: tableTokens.table.body.typography.textDecoration,
14067
+ };
14068
+ // ── Frame / Border Tokens ──
14069
+ const TABLE_BORDER = {
14070
+ color: tableTokens.table.border.default,
14071
+ width: tableTokens.table.border.width.width,
14072
+ };
14073
+ const TABLE_RADIUS = tableTokens.table.radius;
14074
+ // ── Header Icon Color Defaults ──
14075
+ const ICON_DEFAULT_COLOR = {
14076
+ pageEdit: systemTokens.color.darkblue.strong,
14077
+ arrowDown: systemTokens.color.darkblue.strong,
14078
+ arrowUp: systemTokens.color.darkblue.strong,
14079
+ updown: systemTokens.color.grey.strong,
14080
+ pageMove: systemTokens.color.darkblue.strong,
14081
+ star: systemTokens.color.blue.strong,
14082
+ };
14083
+ const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
14084
+ const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
14085
+
14086
+ const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__clip{width:100%;min-width:0;height:var(--table-container-height, 400px);border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__clip--has-pagination{border-radius:var(--table-radius, 8px) var(--table-radius, 8px) 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data ::slotted(*),.sd-table__no-data span{pointer-events:auto}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-top:none;border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
15904
14087
 
15905
14088
  class SdTable {
15906
14089
  constructor(hostRef) {
@@ -15967,6 +14150,36 @@ class SdTable {
15967
14150
  onScroll;
15968
14151
  // 키: `${rowKey}::${field}` → { rowspan, colspan }
15969
14152
  spanRegistry = new Map();
14153
+ // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
14154
+ // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
14155
+ cellClassRegistry = new Map();
14156
+ // rowKey 문자열 → rows 배열에서의 visual index.
14157
+ // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
14158
+ // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
14159
+ rowIndexMap = new Map();
14160
+ rebuildRowIndexMap() {
14161
+ this.rowIndexMap.clear();
14162
+ if (!Array.isArray(this.rows))
14163
+ return;
14164
+ const field = this.rowKey;
14165
+ this.rows.forEach((r, i) => {
14166
+ const k = r?.[field];
14167
+ if (k == null)
14168
+ return;
14169
+ this.rowIndexMap.set(String(k), i);
14170
+ });
14171
+ }
14172
+ // rowKey의 시각적 행 인덱스를 돌려준다.
14173
+ // 1) rows 기반 맵에 있으면 그 값 (임의 문자열 rowKey 지원)
14174
+ // 2) 없으면 Number(rowKey) fallback (rows prop 없이 슬롯-온리 + 숫자 rowKey 사용 패턴)
14175
+ // 3) 둘 다 안 되면 null — rowspan 평가 스킵
14176
+ resolveRowIndex(rowKey) {
14177
+ const fromMap = this.rowIndexMap.get(rowKey);
14178
+ if (fromMap !== undefined)
14179
+ return fromMap;
14180
+ const n = Number(rowKey);
14181
+ return Number.isFinite(n) ? n : null;
14182
+ }
15970
14183
  toFiniteNumber(value, fallback) {
15971
14184
  const n = typeof value === 'number' ? value : Number(value);
15972
14185
  return Number.isFinite(n) ? n : fallback;
@@ -16013,10 +14226,14 @@ class SdTable {
16013
14226
  if (!Array.isArray(newRows))
16014
14227
  return;
16015
14228
  this.rowCount = newRows.length;
14229
+ this.rebuildRowIndexMap();
16016
14230
  if (this.useVirtualScroll)
16017
14231
  this.propagateVirtualUpdate(true);
16018
14232
  this.pushRowsToChildren(newRows);
16019
14233
  }
14234
+ handleRowKeyChange() {
14235
+ this.rebuildRowIndexMap();
14236
+ }
16020
14237
  handleTableIdChange() {
16021
14238
  this.syncTableIdAttribute();
16022
14239
  }
@@ -16057,6 +14274,7 @@ class SdTable {
16057
14274
  this.detectChildren();
16058
14275
  this.innerSelected = new Set(this.selected || []);
16059
14276
  this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
14277
+ this.rebuildRowIndexMap();
16060
14278
  if (this.pagination?.page) {
16061
14279
  this.currentPage = this.pagination.page;
16062
14280
  }
@@ -16082,6 +14300,9 @@ class SdTable {
16082
14300
  el.getSpanSync = this.getSpanSync.bind(this);
16083
14301
  el.isCoveredSync = this.isCoveredSync.bind(this);
16084
14302
  el.hasRowspanSync = this.hasRowspanSync.bind(this);
14303
+ el.registerCellClassSync = this.registerCellClassSync.bind(this);
14304
+ el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
14305
+ el.getCellClassSync = this.getCellClassSync.bind(this);
16085
14306
  if (Array.isArray(this.rows)) {
16086
14307
  this.rowCount = this.rows.length;
16087
14308
  this.pushRowsToChildren(this.rows);
@@ -16414,6 +14635,28 @@ class SdTable {
16414
14635
  getSpanSync(rowKey, field) {
16415
14636
  return this.spanRegistry.get(this.spanKey(rowKey, field));
16416
14637
  }
14638
+ // sd-td의 sdClass 등록. 빈/공백만 있는 값은 해제로 취급.
14639
+ // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
14640
+ // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
14641
+ registerCellClassSync(rowKey, field, cls) {
14642
+ if (rowKey == null || !field)
14643
+ return;
14644
+ const key = this.spanKey(rowKey, field);
14645
+ const safe = (cls ?? '').trim();
14646
+ if (!safe) {
14647
+ this.cellClassRegistry.delete(key);
14648
+ return;
14649
+ }
14650
+ this.cellClassRegistry.set(key, safe);
14651
+ }
14652
+ unregisterCellClassSync(rowKey, field) {
14653
+ if (rowKey == null || !field)
14654
+ return;
14655
+ this.cellClassRegistry.delete(this.spanKey(rowKey, field));
14656
+ }
14657
+ getCellClassSync(rowKey, field) {
14658
+ return this.cellClassRegistry.get(this.spanKey(rowKey, field));
14659
+ }
16417
14660
  // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
16418
14661
  // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
16419
14662
  hasRowspanSync() {
@@ -16439,9 +14682,11 @@ class SdTable {
16439
14682
  if (i + span.colspan > colIdx)
16440
14683
  return true;
16441
14684
  }
16442
- // 2. 위쪽 행 스캔 — 숫자 변환 가능한 rowKey만 rowspan 평가
16443
- const myRowIdx = Number(rowKey);
16444
- if (!Number.isFinite(myRowIdx))
14685
+ // 2. 위쪽 행 스캔 — rows 기반 visual index로 "내 위에 있느냐" 판정
14686
+ // rows prop이 있으면 rowIndexMap로 임의 문자열 rowKey 지원,
14687
+ // 없으면 Number(rowKey) fallback (resolveRowIndex가 처리)
14688
+ const myRowIdx = this.resolveRowIndex(rowKey);
14689
+ if (myRowIdx == null)
16445
14690
  return false;
16446
14691
  for (const [key, span] of this.spanRegistry) {
16447
14692
  if (span.rowspan <= 1)
@@ -16451,8 +14696,8 @@ class SdTable {
16451
14696
  continue;
16452
14697
  const otherRowKey = key.slice(0, sepIdx);
16453
14698
  const otherField = key.slice(sepIdx + 2);
16454
- const otherRowIdx = Number(otherRowKey);
16455
- if (!Number.isFinite(otherRowIdx))
14699
+ const otherRowIdx = this.resolveRowIndex(otherRowKey);
14700
+ if (otherRowIdx == null)
16456
14701
  continue;
16457
14702
  if (otherRowIdx >= myRowIdx)
16458
14703
  continue;
@@ -16521,12 +14766,10 @@ class SdTable {
16521
14766
  const allRows = this.rows ?? [];
16522
14767
  const pageInfo = this.getPaginationInfoSync();
16523
14768
  const startIdx = pageInfo?.startIndex ?? 0;
16524
- const displayed = pageInfo
16525
- ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex)
16526
- : allRows;
14769
+ const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
16527
14770
  return displayed.map((row, i) => {
16528
14771
  const absoluteIdx = startIdx + i;
16529
- return (hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row }));
14772
+ return hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
16530
14773
  });
16531
14774
  }
16532
14775
  get tableClasses() {
@@ -16548,24 +14791,34 @@ class SdTable {
16548
14791
  }
16549
14792
  render() {
16550
14793
  const resolvedTableId = this.getResolvedTableId();
16551
- return (hAsync(Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, hAsync("div", { key: 'f51d23212885ad8121b9a4e895fb854f1e142bc4', class: "sd-table__container", style: {
14794
+ const hostStyle = {
14795
+ '--table-radius': `${TABLE_RADIUS}px`,
14796
+ '--table-border-color': TABLE_BORDER.color,
14797
+ '--table-border-width': `${TABLE_BORDER.width}px`,
14798
+ '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
14799
+ '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
14800
+ '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
14801
+ '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
14802
+ '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
14803
+ };
14804
+ return (hAsync(Host, { key: 'c20a7cc6d5917c9d09c699f2c40ac2b6d07747e1', style: hostStyle }, hAsync("div", { key: '94f76e75da5c6ff9d0ef93b6c2aa3def4ec1766e', class: "sd-table__container", style: {
16552
14805
  '--table-width': this.width,
16553
14806
  '--table-height': this.height,
16554
14807
  '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
16555
- } }, hAsync("div", { key: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
14808
+ } }, hAsync("div", { key: '3b98c828c7dc42de3d4f9bb645279b20d9079ac4', class: {
16556
14809
  'sd-table__clip': true,
16557
14810
  'sd-table__clip--has-pagination': !!(this.pagination &&
16558
14811
  this.pagination.rowsPerPage > 0 &&
16559
14812
  this.rowCount > 0 &&
16560
14813
  !this.useVirtualScroll),
16561
- } }, hAsync("div", { key: 'c901eba67eae29515bf0b3edcc6632b2aacf0f80', class: {
14814
+ } }, hAsync("div", { key: 'b6d04ec953d7b75fb8ad8bc32e2662550d38c5c7', class: {
16562
14815
  'sd-table__wrapper': true,
16563
14816
  'sd-table__wrapper--loading': this.isLoading,
16564
14817
  'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
16565
- } }, 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 &&
14818
+ } }, 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 &&
16566
14819
  this.pagination.rowsPerPage > 0 &&
16567
14820
  this.rowCount > 0 &&
16568
- !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
14821
+ !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
16569
14822
  ? this.innerRowsPerPage
16570
14823
  : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
16571
14824
  if (!this.isRowsPerPageValue(e.detail))
@@ -16586,6 +14839,9 @@ class SdTable {
16586
14839
  "rows": [{
16587
14840
  "handleRowsChange": 0
16588
14841
  }],
14842
+ "rowKey": [{
14843
+ "handleRowKeyChange": 0
14844
+ }],
16589
14845
  "tableId": [{
16590
14846
  "handleTableIdChange": 0
16591
14847
  }],
@@ -16848,7 +15104,7 @@ class SdTabs {
16848
15104
  };
16849
15105
  }
16850
15106
  render() {
16851
- return (hAsync("div", { key: '3698b7b43e74ff053d61d5ce696b987373fd27d6', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
15107
+ return (hAsync("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16852
15108
  const badgeName = this.getBadgeName(tab);
16853
15109
  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() }))));
16854
15110
  })));
@@ -17044,7 +15300,7 @@ class SdTag {
17044
15300
  render() {
17045
15301
  const config = this.resolvedConfig;
17046
15302
  const iconNode = this.renderIcon(config.icon, config.iconSize);
17047
- return (hAsync("span", { key: 'def10730670f37a62fa76b507f7f15a1b1f956fc', class: "sd-tag", style: {
15303
+ return (hAsync("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
17048
15304
  '--sd-tag-background': config.background,
17049
15305
  '--sd-tag-content': config.content,
17050
15306
  '--sd-tag-height': config.height,
@@ -17054,7 +15310,7 @@ class SdTag {
17054
15310
  '--sd-tag-font-weight': config.fontWeight,
17055
15311
  '--sd-tag-line-height': config.lineHeight,
17056
15312
  '--sd-tag-radius': config.radius,
17057
- }, "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));
15313
+ }, "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));
17058
15314
  }
17059
15315
  static get style() { return sdTagCss(); }
17060
15316
  static get cmpMeta() { return {
@@ -17072,7 +15328,7 @@ class SdTag {
17072
15328
  }; }
17073
15329
  }
17074
15330
 
17075
- 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}`;
15331
+ const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
17076
15332
 
17077
15333
  class SdTbody {
17078
15334
  constructor(hostRef) {
@@ -17122,12 +15378,11 @@ class SdTbody {
17122
15378
  }
17123
15379
  }
17124
15380
  render() {
17125
- const hasRows = this.rows.length > 0;
17126
- return (hAsync(Host, { key: 'bc9fbd4f08f4d77da60b083dceef4e24e2fb5532', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '81ef875cbc39f988021a211ede716a98d3ea30cd', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
15381
+ return (hAsync(Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', class: { tbody: true } }, [
17127
15382
  this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
17128
- hAsync("slot", null),
15383
+ hAsync("slot", { key: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
17129
15384
  this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
17130
- ]) : (hAsync("tr", { class: "tbody__no-data-row" }, hAsync("td", { class: "tbody__no-data-cell", colSpan: 100 }, hAsync("slot", { name: "no-data" })))))));
15385
+ ])));
17131
15386
  }
17132
15387
  static get watchers() { return {
17133
15388
  "rows": [{
@@ -17162,20 +15417,30 @@ class SdTd {
17162
15417
  align;
17163
15418
  rowspan;
17164
15419
  colspan;
17165
- handleFieldChange() {
15420
+ // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
15421
+ // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
15422
+ // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
15423
+ sdClass;
15424
+ handleFieldChange(_newField, oldField) {
17166
15425
  this.syncSlotName();
17167
15426
  this.syncSpanRegistration();
15427
+ this.syncCellClassRegistration(oldField);
17168
15428
  }
17169
- handleRowKeyChange() {
15429
+ handleRowKeyChange(_newKey, oldKey) {
17170
15430
  this.syncSlotName();
17171
15431
  this.syncSpanRegistration();
15432
+ this.syncCellClassRegistration(undefined, oldKey);
17172
15433
  }
17173
15434
  handleSpanChange() {
17174
15435
  this.syncSpanRegistration();
17175
15436
  }
15437
+ handleSdClassChange() {
15438
+ this.syncCellClassRegistration();
15439
+ }
17176
15440
  componentWillLoad() {
17177
15441
  this.syncSlotName();
17178
15442
  this.syncSpanRegistration();
15443
+ this.syncCellClassRegistration();
17179
15444
  // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
17180
15445
  const parentTr = this.el.parentElement;
17181
15446
  if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
@@ -17183,17 +15448,20 @@ class SdTd {
17183
15448
  componentDidLoad() {
17184
15449
  this.syncSlotName();
17185
15450
  this.syncSpanRegistration();
15451
+ this.syncCellClassRegistration();
17186
15452
  }
17187
15453
  // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
17188
15454
  // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
17189
15455
  // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
17190
15456
  connectedCallback() {
17191
15457
  this.syncSpanRegistration();
15458
+ this.syncCellClassRegistration();
17192
15459
  }
17193
15460
  disconnectedCallback() {
17194
15461
  const table = this.findTable();
17195
- if (table?.unregisterSpanSync && this.field && this.rowKey != null) {
17196
- table.unregisterSpanSync(String(this.rowKey), this.field);
15462
+ if (table && this.field && this.rowKey != null) {
15463
+ table.unregisterSpanSync?.(String(this.rowKey), this.field);
15464
+ table.unregisterCellClassSync?.(String(this.rowKey), this.field);
17197
15465
  this.requestParentTrUpdate();
17198
15466
  }
17199
15467
  }
@@ -17218,6 +15486,21 @@ class SdTd {
17218
15486
  table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
17219
15487
  this.requestParentTrUpdate();
17220
15488
  }
15489
+ // field/rowKey가 바뀌면 이전 키에 등록된 클래스가 남으므로 먼저 해제하고 새 키로 등록한다.
15490
+ syncCellClassRegistration(prevField, prevRowKey) {
15491
+ const table = this.findTable();
15492
+ if (!table)
15493
+ return;
15494
+ const oldField = prevField ?? this.field;
15495
+ const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
15496
+ if (oldField && oldRowKey != null) {
15497
+ table.unregisterCellClassSync?.(oldRowKey, oldField);
15498
+ }
15499
+ if (!table.registerCellClassSync || !this.field || this.rowKey == null)
15500
+ return;
15501
+ table.registerCellClassSync(String(this.rowKey), this.field, this.sdClass);
15502
+ this.requestParentTrUpdate();
15503
+ }
17221
15504
  syncSlotName() {
17222
15505
  const table = this.el.closest('sd-table');
17223
15506
  const fromMethod = table?.getTableIdSync?.();
@@ -17230,7 +15513,7 @@ class SdTd {
17230
15513
  }
17231
15514
  }
17232
15515
  render() {
17233
- return (hAsync(Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
15516
+ return (hAsync(Host, { key: '84ce2fe2ea8ccb3eaf09e4d2559fc917bdb1077a', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '9b8164a2eac53b927bf59638cb53c35998a75cfe' })));
17234
15517
  }
17235
15518
  static get watchers() { return {
17236
15519
  "field": [{
@@ -17244,6 +15527,9 @@ class SdTd {
17244
15527
  }],
17245
15528
  "colspan": [{
17246
15529
  "handleSpanChange": 0
15530
+ }],
15531
+ "sdClass": [{
15532
+ "handleSdClassChange": 0
17247
15533
  }]
17248
15534
  }; }
17249
15535
  static get style() { return sdTdCss(); }
@@ -17255,7 +15541,8 @@ class SdTd {
17255
15541
  "rowKey": [1, "row-key"],
17256
15542
  "align": [1],
17257
15543
  "rowspan": [2],
17258
- "colspan": [2]
15544
+ "colspan": [2],
15545
+ "sdClass": [1, "sd-class"]
17259
15546
  },
17260
15547
  "$listeners$": undefined,
17261
15548
  "$lazyBundleId$": "-",
@@ -17334,16 +15621,16 @@ class SdTextLink {
17334
15621
  '--sd-text-link-text-decoration': typo.textDecoration,
17335
15622
  ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
17336
15623
  };
17337
- return (hAsync("span", { key: '77c1aa4a4a6297af9431947b7146db2ddfad52b5', class: {
15624
+ return (hAsync("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
17338
15625
  'sd-text-link': true,
17339
15626
  'sd-text-link--disabled': this.disabled,
17340
- }, 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: {
15627
+ }, 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: {
17341
15628
  width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
17342
15629
  height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
17343
15630
  display: 'inline-flex',
17344
15631
  alignItems: 'center',
17345
15632
  justifyContent: 'center',
17346
- } }, hAsync("sd-icon", { key: '2fa166ef60f6d1ee933450146bc667ee89dad2ce', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
15633
+ } }, hAsync("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
17347
15634
  }
17348
15635
  static get style() { return sdTextLinkCss(); }
17349
15636
  static get cmpMeta() { return {
@@ -17490,7 +15777,7 @@ class SdTextarea {
17490
15777
  '--sd-system-size-field-sm-height': 'auto',
17491
15778
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
17492
15779
  };
17493
- 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 }))));
15780
+ 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 }))));
17494
15781
  }
17495
15782
  static get watchers() { return {
17496
15783
  "value": [{
@@ -17544,11 +15831,12 @@ class SdTextarea {
17544
15831
  }; }
17545
15832
  }
17546
15833
 
17547
- 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}`;
15834
+ 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}`;
17548
15835
 
17549
15836
  class SdThead {
17550
15837
  constructor(hostRef) {
17551
15838
  registerInstance(this, hostRef);
15839
+ this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
17552
15840
  }
17553
15841
  get el() { return getElement(this); }
17554
15842
  columns;
@@ -17560,6 +15848,7 @@ class SdThead {
17560
15848
  scrolledRight;
17561
15849
  rows = [];
17562
15850
  columnWidths = [];
15851
+ sdColumnSort;
17563
15852
  tableId = '';
17564
15853
  _columns = [];
17565
15854
  _selectable = false;
@@ -17660,9 +15949,11 @@ class SdThead {
17660
15949
  this.tableEl.handleResize(index, event, reversed);
17661
15950
  }
17662
15951
  }
15952
+ handleColumnSort = (col) => {
15953
+ this.sdColumnSort.emit({ column: col });
15954
+ };
17663
15955
  handleSelectAll(checked) {
17664
- const currentState = this.getIsAllChecked();
17665
- const nextChecked = currentState === null ? false : !!checked;
15956
+ const nextChecked = !!checked;
17666
15957
  const safeRows = Array.isArray(this.rows) ? this.rows : [];
17667
15958
  if (this.tableEl?.toggleSelectAllSync) {
17668
15959
  this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
@@ -17682,27 +15973,42 @@ class SdThead {
17682
15973
  const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
17683
15974
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
17684
15975
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
17685
- return (hAsync(Host, { key: '5aa1e38311b542d1a0b05b55abc7ef41927508bd', slot: `${this.tableId}-head` }, hAsync("thead", { key: '6d17753988ecd02d900d8a3bd7f2115b534b68a7', class: {
15976
+ const headStyle = {
15977
+ '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
15978
+ '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
15979
+ '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
15980
+ '--table-header-bg': TABLE_HEADER_COLORS.bg,
15981
+ '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
15982
+ '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
15983
+ '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
15984
+ '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
15985
+ '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
15986
+ '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
15987
+ '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
15988
+ '--table-border-color': TABLE_BORDER.color,
15989
+ '--table-border-width': `${TABLE_BORDER.width}px`,
15990
+ };
15991
+ return (hAsync(Host, { key: 'c4468056cc20a78516e61bccaf4d11c098e83ec6', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'a9befd1728baf2104bfb9132557d5c5c0eb49748', class: {
17686
15992
  'thead': true,
17687
15993
  'thead--sticky': this._stickyHeader,
17688
- } }, hAsync("tr", { key: '9cc729603e126da2f9c8923fe29ece10c7750bb4', class: "tr" }, this._selectable && (hAsync("th", { key: '37b2bcfa77eaf4c44465684c49ae84d566acc18b', class: {
15994
+ } }, hAsync("tr", { key: 'da786d82d4896b6124becf42f634bcc5b0a6ffb7', class: "tr" }, this._selectable && (hAsync("th", { key: 'b257c5475b7e528fbfc52ea85031a4c49bed7b36', class: {
17689
15995
  'th': true,
17690
15996
  'th--selected': true,
17691
15997
  'sticky-left': true,
17692
15998
  'sticky-left-edge': stickyLeftCount === 0,
17693
15999
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
17694
- }, 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: {
16000
+ }, 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: {
17695
16001
  'th': true,
17696
16002
  [`${col.thClass}`]: Boolean(col.thClass),
17697
16003
  'sticky-left': true,
17698
16004
  'sticky-left-edge': idx === stickyLeftCount - 1,
17699
16005
  'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
17700
- }, 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) => {
16006
+ }, 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) => {
17701
16007
  const actualColIdx = stickyLeftCount + relativeIdx;
17702
16008
  return (hAsync("th", { key: col.name, class: {
17703
16009
  th: true,
17704
16010
  [`${col.thClass}`]: Boolean(col.thClass),
17705
- }, 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) }))));
16011
+ }, 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) }))));
17706
16012
  }), stickyRightCols.map((col, relativeIdx) => {
17707
16013
  const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
17708
16014
  return (hAsync("th", { key: col.name, class: {
@@ -17711,7 +16017,7 @@ class SdThead {
17711
16017
  'sticky-right': true,
17712
16018
  'sticky-right-edge': relativeIdx === 0,
17713
16019
  'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
17714
- }, 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) }))));
16020
+ }, 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) }))));
17715
16021
  })))));
17716
16022
  }
17717
16023
  static get watchers() { return {
@@ -17772,8 +16078,7 @@ const toast = {
17772
16078
  accent: {
17773
16079
  bg: "#005CC9",
17774
16080
  content: "#FFFFFF"
17775
- }
17776
- };
16081
+ }};
17777
16082
  var toastTokens = {
17778
16083
  toast: toast
17779
16084
  };
@@ -17806,10 +16111,10 @@ class SdToast {
17806
16111
  render() {
17807
16112
  const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
17808
16113
  const iconSize = Number(TOAST_LAYOUT.iconSize);
17809
- return (hAsync("div", { key: '77954c9d285339cb48032eec5eca0dcbe308affc', style: {
16114
+ return (hAsync("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
17810
16115
  '--sd-toast-bg': typeConfig.bg,
17811
16116
  '--sd-toast-text': typeConfig.content,
17812
- } }, 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() })))));
16117
+ } }, 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() })))));
17813
16118
  }
17814
16119
  static get style() { return sdToastCss(); }
17815
16120
  static get cmpMeta() { return {
@@ -18061,7 +16366,7 @@ class SdToastContainer {
18061
16366
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
18062
16367
  const indexMap = new Map();
18063
16368
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
18064
- return (hAsync("div", { key: '5057793be2d6ce213edc84d58f7273248646dc19', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
16369
+ return (hAsync("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
18065
16370
  this.expanded = true;
18066
16371
  this.pauseTimers();
18067
16372
  }, onMouseLeave: () => {
@@ -18219,7 +16524,7 @@ class SdToggle {
18219
16524
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
18220
16525
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
18221
16526
  };
18222
- 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 })));
16527
+ 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 })));
18223
16528
  }
18224
16529
  static get style() { return sdToggleCss(); }
18225
16530
  static get cmpMeta() { return {
@@ -18346,14 +16651,14 @@ class SdTooltip {
18346
16651
  const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
18347
16652
  const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
18348
16653
  const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
18349
- 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: {
16654
+ 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: {
18350
16655
  'sd-floating-menu': true,
18351
16656
  [`sd-floating-menu--${tooltipType}`]: true,
18352
16657
  [`sd-floating-menu--${placement}`]: true,
18353
16658
  }, style: {
18354
16659
  '--sd-floating-bg': typeConfig.bg,
18355
16660
  '--sd-floating-content': typeConfig.content,
18356
- }, 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 }))))));
16661
+ }, 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 }))))));
18357
16662
  }
18358
16663
  static get style() { return sdTooltipCss(); }
18359
16664
  static get cmpMeta() { return {
@@ -18380,7 +16685,7 @@ class SdTooltip {
18380
16685
  }; }
18381
16686
  }
18382
16687
 
18383
- 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}`;
16688
+ 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}`;
18384
16689
 
18385
16690
  class SdTr {
18386
16691
  constructor(hostRef) {
@@ -18522,6 +16827,12 @@ class SdTr {
18522
16827
  return false;
18523
16828
  return this.tableEl.isCoveredSync(this.rowKey, colIdx, this._columns);
18524
16829
  }
16830
+ getCellClassFor(col) {
16831
+ if (!this.tableEl?.getCellClassSync)
16832
+ return undefined;
16833
+ const fieldName = typeof col.field === 'string' ? col.field : col.name;
16834
+ return this.tableEl.getCellClassSync(this.rowKey, fieldName);
16835
+ }
18525
16836
  render() {
18526
16837
  const stickyLeftCount = this._stickyColumn.left || 0;
18527
16838
  const stickyRightCount = this._stickyColumn.right || 0;
@@ -18529,16 +16840,29 @@ class SdTr {
18529
16840
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
18530
16841
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
18531
16842
  const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
18532
- 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: {
16843
+ const rowStyle = {
16844
+ display: this.isVisible ? '' : 'none',
16845
+ '--table-body-height': `${TABLE_BODY_LAYOUT.default.height}px`,
16846
+ '--table-body-padding-x': `${TABLE_BODY_LAYOUT.paddingX}px`,
16847
+ '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
16848
+ '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
16849
+ '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
16850
+ '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
16851
+ '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
16852
+ '--table-border-color': TABLE_BORDER.color,
16853
+ '--table-border-width': `${TABLE_BORDER.width}px`,
16854
+ };
16855
+ 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: {
18533
16856
  'td': true,
18534
16857
  'td--selected': true,
18535
16858
  'sticky-left': true,
18536
16859
  'sticky-left-edge': stickyLeftCount === 0,
18537
16860
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
18538
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '72bdbadc76dcb0682eb4de496e9abda692a0ea7e', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
16861
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '3fb6dc05e2b0e75bd70ff5b9631330ce2348bd22', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
18539
16862
  if (this.isCovered(idx))
18540
16863
  return null;
18541
16864
  const span = this.getSpanFor(col);
16865
+ const sdCellClass = this.getCellClassFor(col);
18542
16866
  return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
18543
16867
  'td': true,
18544
16868
  [`td--${col.align || 'left'}`]: true,
@@ -18546,6 +16870,7 @@ class SdTr {
18546
16870
  'sticky-left-edge': idx === stickyLeftCount - 1,
18547
16871
  'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
18548
16872
  [`${col.tdClass}`]: Boolean(col.tdClass),
16873
+ [`${sdCellClass}`]: Boolean(sdCellClass),
18549
16874
  }, 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)))));
18550
16875
  }), middleCols.map((col, relativeIdx) => {
18551
16876
  const actualColIdx = stickyLeftCount + relativeIdx;
@@ -18553,10 +16878,12 @@ class SdTr {
18553
16878
  return null;
18554
16879
  const fieldName = typeof col.field === 'string' ? col.field : col.name;
18555
16880
  const span = this.getSpanFor(col);
16881
+ const sdCellClass = this.getCellClassFor(col);
18556
16882
  return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
18557
16883
  td: true,
18558
16884
  [`td--${col.align || 'left'}`]: true,
18559
16885
  [`${col.tdClass}`]: Boolean(col.tdClass),
16886
+ [`${sdCellClass}`]: Boolean(sdCellClass),
18560
16887
  }, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
18561
16888
  }), stickyRightCols.map((col, relativeIdx) => {
18562
16889
  const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
@@ -18564,6 +16891,7 @@ class SdTr {
18564
16891
  return null;
18565
16892
  const fieldName = typeof col.field === 'string' ? col.field : col.name;
18566
16893
  const span = this.getSpanFor(col);
16894
+ const sdCellClass = this.getCellClassFor(col);
18567
16895
  return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
18568
16896
  'td': true,
18569
16897
  [`td--${col.align || 'left'}`]: true,
@@ -18571,6 +16899,7 @@ class SdTr {
18571
16899
  'sticky-right-edge': relativeIdx === 0,
18572
16900
  'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
18573
16901
  [`${col.tdClass}`]: Boolean(col.tdClass),
16902
+ [`${sdCellClass}`]: Boolean(sdCellClass),
18574
16903
  }, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
18575
16904
  }))));
18576
16905
  }
@@ -18606,7 +16935,6 @@ class SdTr {
18606
16935
  }
18607
16936
 
18608
16937
  registerComponents([
18609
- DataTable,
18610
16938
  SdActionModal,
18611
16939
  SdBadge,
18612
16940
  SdBarcodeInput,
@@ -18641,23 +16969,14 @@ registerComponents([
18641
16969
  SdPagination,
18642
16970
  SdPopover,
18643
16971
  SdPortal,
18644
- SdProgress,
18645
16972
  SdRadio,
18646
16973
  SdRadioButton,
18647
16974
  SdRadioGroup,
18648
16975
  SdSelect,
18649
- SdSelectDropdown,
18650
- SdSelectGroup,
18651
- SdSelectMultiple,
18652
- SdSelectMultipleGroup,
18653
- SdSelectOption,
18654
- SdSelectOptionGroup,
18655
- SdSelectSearchInput,
18656
- SdSelectV2,
18657
- SdSelectV2ListItem,
18658
- SdSelectV2ListItemSearch,
18659
- SdSelectV2Listbox,
18660
- SdSelectV2Trigger,
16976
+ SdSelectListItem,
16977
+ SdSelectListItemSearch,
16978
+ SdSelectListbox,
16979
+ SdSelectTrigger,
18661
16980
  SdSwitch,
18662
16981
  SdTable,
18663
16982
  SdTabs,