@sellmate/design-system 1.0.76 → 1.0.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (430) hide show
  1. package/dist/cjs/design-system.cjs.js +2 -2
  2. package/dist/cjs/{index-Dptupbm0.js → index-CaGGRpd8.js} +1 -1
  3. package/dist/cjs/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 +3 -3
  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 +2 -2
  17. package/dist/cjs/sd-date-picker-trigger.cjs.entry.js +3 -3
  18. package/dist/cjs/sd-date-picker.cjs.entry.js +3 -3
  19. package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +2 -2
  20. package/dist/cjs/sd-date-range-picker.cjs.entry.js +1 -1
  21. package/dist/cjs/sd-dropdown-button.cjs.entry.js +94 -7
  22. package/dist/cjs/sd-file-picker.cjs.entry.js +2 -2
  23. package/dist/cjs/sd-form.cjs.entry.js +1 -1
  24. package/dist/cjs/sd-ghost-button.cjs.entry.js +3 -3
  25. package/dist/cjs/sd-guide.cjs.entry.js +2 -2
  26. package/dist/cjs/{sd-input_2.cjs.entry.js → sd-input.cjs.entry.js} +3 -43
  27. package/dist/cjs/sd-linear-progress.cjs.entry.js +3 -3
  28. package/dist/cjs/sd-loading-container.cjs.entry.js +3 -3
  29. package/dist/cjs/sd-modal-container.cjs.entry.js +1 -1
  30. package/dist/cjs/sd-number-input.cjs.entry.js +4 -4
  31. package/dist/cjs/sd-pagination_5.cjs.entry.js +65 -33
  32. package/dist/cjs/sd-popover.cjs.entry.js +2 -2
  33. package/dist/cjs/sd-portal.cjs.entry.js +2 -2
  34. package/dist/cjs/sd-radio-button.cjs.entry.js +1 -1
  35. package/dist/cjs/sd-radio-group.cjs.entry.js +1 -1
  36. package/dist/cjs/sd-radio.cjs.entry.js +1 -1
  37. package/dist/cjs/{sd-select-v2-list-item_4.cjs.entry.js → sd-select-list-item_4.cjs.entry.js} +50 -50
  38. package/dist/cjs/sd-switch.cjs.entry.js +2 -2
  39. package/dist/cjs/sd-table.cjs.entry.js +21 -11
  40. package/dist/cjs/sd-table.config-hnNodd18.js +105 -0
  41. package/dist/cjs/sd-tabs.cjs.entry.js +2 -2
  42. package/dist/cjs/sd-tag.cjs.entry.js +3 -3
  43. package/dist/cjs/sd-td.cjs.entry.js +2 -2
  44. package/dist/cjs/sd-text-link.cjs.entry.js +4 -4
  45. package/dist/cjs/sd-textarea.cjs.entry.js +2 -2
  46. package/dist/cjs/sd-toast-container.cjs.entry.js +2 -2
  47. package/dist/cjs/sd-toast.cjs.entry.js +3 -3
  48. package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
  49. package/dist/cjs/{system-BbCUNhDJ.js → system-DRemSdU1.js} +7 -1
  50. package/dist/cjs/{tooltipArrow-DuANjCfc.js → tooltipArrow-BEff0q3z.js} +1 -1
  51. package/dist/collection/collection-manifest.json +11 -21
  52. package/dist/collection/components/sd-action-modal/sd-action-modal.js +1 -1
  53. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  54. package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +1 -1
  55. package/dist/collection/components/sd-button-v2/sd-button-v2.js +2 -2
  56. package/dist/collection/components/sd-card/sd-card.js +1 -1
  57. package/dist/collection/components/sd-checkbox/sd-checkbox.js +6 -3
  58. package/dist/collection/components/sd-chip/sd-chip.js +1 -1
  59. package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
  60. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
  61. package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js +1 -1
  62. package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
  63. package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
  64. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
  65. package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js +3 -3
  66. package/dist/collection/components/sd-field/sd-field.js +5 -8
  67. package/dist/collection/components/sd-file-picker/sd-file-picker.js +1 -1
  68. package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
  69. package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +2 -2
  70. package/dist/collection/components/sd-input/sd-input.js +2 -2
  71. package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
  72. package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
  73. package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
  74. package/dist/collection/components/sd-number-input/sd-number-input.js +3 -3
  75. package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
  76. package/dist/collection/components/sd-portal/sd-portal.js +1 -1
  77. 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
  78. 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
  79. 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
  80. 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
  81. 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
  82. 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
  83. 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
  84. 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
  85. package/dist/collection/components/sd-select/sd-select.css +3 -47
  86. package/dist/collection/components/sd-select/sd-select.js +413 -294
  87. package/dist/collection/components/sd-switch/sd-switch.js +1 -1
  88. package/dist/collection/components/sd-table/sd-table.config.js +81 -0
  89. package/dist/collection/components/sd-table/sd-table.css +16 -8
  90. package/dist/collection/components/sd-table/sd-table.js +18 -9
  91. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.css +0 -8
  92. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +3 -4
  93. package/dist/collection/components/sd-table/sd-td/sd-td.js +1 -1
  94. package/dist/collection/components/sd-table/sd-thead/sd-thead.css +16 -12
  95. package/dist/collection/components/sd-table/sd-thead/sd-thead.js +52 -8
  96. package/dist/collection/components/sd-table/sd-tr/sd-tr.css +3 -3
  97. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +15 -2
  98. package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
  99. package/dist/collection/components/sd-tag/sd-tag.js +2 -2
  100. package/dist/collection/components/sd-text-link/sd-text-link.js +3 -3
  101. package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
  102. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  103. package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
  104. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  105. package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
  106. package/dist/collection/utils/testing/index.js +2 -0
  107. package/dist/collection/utils/testing/mocks.js +35 -0
  108. package/dist/components/index.js +1 -1
  109. package/dist/components/p-B6KZfiQ5.js +1 -0
  110. package/dist/components/{p-6PsyRF61.js → p-BEOrkEV1.js} +1 -1
  111. package/dist/components/p-BJJvCBQs.js +1 -0
  112. package/dist/components/p-BM_PRj8W.js +1 -0
  113. package/dist/components/p-BR_ZAr48.js +1 -0
  114. package/dist/components/{p-BBD_1E3n.js → p-BeNJfxnb.js} +1 -1
  115. package/dist/components/{p-BLwIhCdO.js → p-BfoLbEZx.js} +1 -1
  116. package/dist/components/p-Bm8Fue-a.js +1 -0
  117. package/dist/components/{p-DaAhgdib.js → p-BynnUMVZ.js} +1 -1
  118. package/dist/components/{p-D5HLYqT-.js → p-C52iEAqd.js} +1 -1
  119. package/dist/components/{p-BQvugXhH.js → p-C8Dy_x5h.js} +1 -1
  120. package/dist/components/{p-CgMyz4NQ.js → p-CJAQuJik.js} +1 -1
  121. package/dist/components/{p-iAWNMLXh.js → p-CJqZcEqD.js} +1 -1
  122. package/dist/components/{p-d4UB2UF7.js → p-CNm5Qbf-.js} +1 -1
  123. package/dist/components/{p-B3xZdEDI.js → p-CQy5JErK.js} +1 -1
  124. package/dist/components/{p-BgFLSKqC.js → p-CZxeqYuw.js} +1 -1
  125. package/dist/components/{p-CUg9NH6y.js → p-CkgQbCMR.js} +1 -1
  126. package/dist/components/p-CvnC61M9.js +1 -0
  127. package/dist/components/{p-6LtMeKKA.js → p-D1SJ2TMu.js} +1 -1
  128. package/dist/components/{p-BXdEjuI_.js → p-D2FOkhao.js} +1 -1
  129. package/dist/components/{p-C7h8lwnU.js → p-D66nhMt3.js} +1 -1
  130. package/dist/components/p-DDDZWrWj.js +1 -0
  131. package/dist/components/{p-Csfj4h1A.js → p-DK3vj3bG.js} +1 -1
  132. package/dist/components/{p-CZPR_5mk.js → p-DcuLMUdl.js} +1 -1
  133. package/dist/components/p-DxXwz3cY.js +1 -0
  134. package/dist/components/p-NlCzTjK4.js +1 -0
  135. package/dist/components/{p-BZm6KN1s.js → p-RpjjrX78.js} +1 -1
  136. package/dist/components/{p-BM0sVq5Z.js → p-ZH78tQXS.js} +1 -1
  137. package/dist/components/{p-DQfNwvwx.js → p-ZLsQA11g.js} +1 -1
  138. package/dist/components/{p-DdJyzIYe.js → p-eGToaKCt.js} +1 -1
  139. package/dist/components/p-hTUSl23P.js +1 -0
  140. package/dist/components/p-mqa9-iql.js +1 -0
  141. package/dist/components/sd-action-modal.js +1 -1
  142. package/dist/components/sd-badge.js +1 -1
  143. package/dist/components/sd-barcode-input.js +1 -1
  144. package/dist/components/sd-button-v2.js +1 -1
  145. package/dist/components/sd-button.js +1 -1
  146. package/dist/components/sd-calendar.js +1 -1
  147. package/dist/components/sd-card.js +1 -1
  148. package/dist/components/sd-checkbox.js +1 -1
  149. package/dist/components/sd-chip.js +1 -1
  150. package/dist/components/sd-circle-progress.js +1 -1
  151. package/dist/components/sd-confirm-modal.js +1 -1
  152. package/dist/components/sd-date-box.js +1 -1
  153. package/dist/components/sd-date-picker-calendar.js +1 -1
  154. package/dist/components/sd-date-picker-trigger.js +1 -1
  155. package/dist/components/sd-date-picker.js +1 -1
  156. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  157. package/dist/components/sd-date-range-picker.js +1 -1
  158. package/dist/components/sd-dropdown-button.js +1 -1
  159. package/dist/components/sd-field.js +1 -1
  160. package/dist/components/sd-file-picker.js +1 -1
  161. package/dist/components/sd-floating-portal.js +1 -1
  162. package/dist/components/sd-form.js +1 -1
  163. package/dist/components/sd-ghost-button.js +1 -1
  164. package/dist/components/sd-guide.js +1 -1
  165. package/dist/components/sd-icon.js +1 -1
  166. package/dist/components/sd-input.js +1 -1
  167. package/dist/components/sd-linear-progress.js +1 -1
  168. package/dist/components/sd-loading-container.js +1 -1
  169. package/dist/components/sd-loading-modal.js +1 -1
  170. package/dist/components/sd-modal-container.js +1 -1
  171. package/dist/components/sd-number-input.js +1 -1
  172. package/dist/components/sd-pagination.js +1 -1
  173. package/dist/components/sd-popover.js +1 -1
  174. package/dist/components/sd-portal.js +1 -1
  175. package/dist/components/sd-radio-button.js +1 -1
  176. package/dist/components/sd-radio-group.js +1 -1
  177. package/dist/components/sd-radio.js +1 -1
  178. package/dist/components/sd-select-list-item-search.d.ts +11 -0
  179. package/dist/components/sd-select-list-item-search.js +1 -0
  180. package/dist/components/{sd-select-multiple.d.ts → sd-select-list-item.d.ts} +4 -4
  181. package/dist/components/sd-select-list-item.js +1 -0
  182. package/dist/components/{sd-select-option.d.ts → sd-select-listbox.d.ts} +4 -4
  183. package/dist/components/sd-select-listbox.js +1 -0
  184. package/dist/components/{sd-select-group.d.ts → sd-select-trigger.d.ts} +4 -4
  185. package/dist/components/sd-select-trigger.js +1 -0
  186. package/dist/components/sd-select.js +1 -1
  187. package/dist/components/sd-switch.js +1 -1
  188. package/dist/components/sd-table.js +1 -1
  189. package/dist/components/sd-tabs.js +1 -1
  190. package/dist/components/sd-tag.js +1 -1
  191. package/dist/components/sd-tbody.js +1 -1
  192. package/dist/components/sd-td.js +1 -1
  193. package/dist/components/sd-text-link.js +1 -1
  194. package/dist/components/sd-textarea.js +1 -1
  195. package/dist/components/sd-thead.js +1 -1
  196. package/dist/components/sd-toast-container.js +1 -1
  197. package/dist/components/sd-toast.js +1 -1
  198. package/dist/components/sd-toggle.js +1 -1
  199. package/dist/components/sd-tooltip.js +1 -1
  200. package/dist/components/sd-tr.js +1 -1
  201. package/dist/design-system/design-system.css +1 -1
  202. package/dist/design-system/design-system.esm.js +1 -1
  203. package/dist/design-system/{p-dad07e1a.entry.js → p-120df622.entry.js} +1 -1
  204. package/dist/design-system/{p-6af9e663.entry.js → p-28b727df.entry.js} +1 -1
  205. package/dist/design-system/{p-9466cd93.entry.js → p-2cd2fb76.entry.js} +1 -1
  206. package/dist/design-system/p-3f9d60a0.entry.js +1 -0
  207. package/dist/design-system/p-400b3676.entry.js +1 -0
  208. package/dist/design-system/{p-2eb910ec.entry.js → p-41ea33fb.entry.js} +1 -1
  209. package/dist/design-system/{p-c7bcb232.entry.js → p-42906763.entry.js} +1 -1
  210. package/dist/design-system/{p-7fe3a466.entry.js → p-42a8f8a2.entry.js} +1 -1
  211. package/dist/design-system/{p-506f2b68.entry.js → p-43ffe7b0.entry.js} +1 -1
  212. package/dist/design-system/p-4ad9a5b8.entry.js +1 -0
  213. package/dist/design-system/{p-3a9559ee.entry.js → p-504033e8.entry.js} +1 -1
  214. package/dist/design-system/p-64d3c984.entry.js +1 -0
  215. package/dist/design-system/{p-ce3d0f9c.entry.js → p-67f88b1a.entry.js} +1 -1
  216. package/dist/design-system/{p-6a3f8588.entry.js → p-68d0fa15.entry.js} +1 -1
  217. package/dist/design-system/{p-363c9451.entry.js → p-6dc47f4c.entry.js} +1 -1
  218. package/dist/design-system/{p-d6896893.entry.js → p-6f9b0b32.entry.js} +1 -1
  219. package/dist/design-system/{p-3ca5c303.entry.js → p-704dc1f1.entry.js} +1 -1
  220. package/dist/design-system/{p-17cd3a33.entry.js → p-732ee178.entry.js} +1 -1
  221. package/dist/design-system/{p-531a6a82.entry.js → p-7d892b68.entry.js} +1 -1
  222. package/dist/design-system/{p-c9eb70f5.entry.js → p-809e616c.entry.js} +1 -1
  223. package/dist/design-system/p-80c51996.entry.js +1 -0
  224. package/dist/design-system/{p-b745cd95.entry.js → p-889971bc.entry.js} +1 -1
  225. package/dist/design-system/{p-b683f2fe.entry.js → p-8abc2413.entry.js} +1 -1
  226. package/dist/design-system/{p-bb492ba7.entry.js → p-970f9ea5.entry.js} +1 -1
  227. package/dist/design-system/p-BHmXH7dZ.js +2 -0
  228. package/dist/design-system/{p-BgFLSKqC.js → p-CZxeqYuw.js} +1 -1
  229. package/dist/design-system/p-DDDZWrWj.js +1 -0
  230. package/dist/design-system/p-DG7d45mX.js +1 -0
  231. package/dist/design-system/{p-280dc548.entry.js → p-a69d6a99.entry.js} +1 -1
  232. package/dist/design-system/{p-49f78122.entry.js → p-ab5a94c8.entry.js} +1 -1
  233. package/dist/design-system/{p-f4a00276.entry.js → p-ae626d30.entry.js} +1 -1
  234. package/dist/design-system/p-b9a870bf.entry.js +1 -0
  235. package/dist/design-system/{p-97ebf578.entry.js → p-bab814c5.entry.js} +1 -1
  236. package/dist/design-system/{p-eb29dc9f.entry.js → p-c21f30de.entry.js} +1 -1
  237. package/dist/design-system/p-c863a31d.entry.js +1 -0
  238. package/dist/design-system/{p-a8bde8d9.entry.js → p-cab35b9a.entry.js} +1 -1
  239. package/dist/design-system/p-cea424f6.entry.js +1 -0
  240. package/dist/design-system/{p-34f7345b.entry.js → p-d8bb2cb4.entry.js} +1 -1
  241. package/dist/design-system/p-dd63e10f.entry.js +1 -0
  242. package/dist/design-system/{p-55b65a41.entry.js → p-e04302a2.entry.js} +1 -1
  243. package/dist/design-system/{p-5f6379e9.entry.js → p-e84d1bac.entry.js} +1 -1
  244. package/dist/design-system/{p-11029f6e.entry.js → p-ebbffddb.entry.js} +1 -1
  245. package/dist/design-system/{p-68d0d67e.entry.js → p-ec02b3e8.entry.js} +1 -1
  246. package/dist/design-system/{p-8ff967f7.entry.js → p-ed1c4625.entry.js} +1 -1
  247. package/dist/design-system/{p-fdb52620.entry.js → p-f06038fd.entry.js} +1 -1
  248. package/dist/design-system/{p-2cd2f2dd.entry.js → p-f80d10ad.entry.js} +1 -1
  249. package/dist/design-system/p-fbb7e090.entry.js +1 -0
  250. package/dist/design-system/{p-a9fc2c21.entry.js → p-feb84f87.entry.js} +1 -1
  251. package/dist/esm/design-system.js +3 -3
  252. package/dist/esm/{index-Bp7ytJz5.js → index-BHmXH7dZ.js} +1 -1
  253. package/dist/esm/loader.js +3 -3
  254. package/dist/esm/sd-action-modal.entry.js +2 -2
  255. package/dist/esm/sd-badge.entry.js +2 -2
  256. package/dist/esm/sd-barcode-input.entry.js +2 -2
  257. package/dist/esm/sd-button-v2_2.entry.js +3 -3
  258. package/dist/esm/sd-button_4.entry.js +10 -13
  259. package/dist/esm/sd-calendar.entry.js +1 -1
  260. package/dist/esm/sd-card.entry.js +2 -2
  261. package/dist/esm/sd-checkbox.entry.js +7 -4
  262. package/dist/esm/sd-chip.entry.js +2 -2
  263. package/dist/esm/sd-circle-progress.entry.js +3 -3
  264. package/dist/esm/sd-confirm-modal_2.entry.js +4 -4
  265. package/dist/esm/sd-date-box.entry.js +1 -1
  266. package/dist/esm/sd-date-picker-calendar.entry.js +2 -2
  267. package/dist/esm/sd-date-picker-trigger.entry.js +3 -3
  268. package/dist/esm/sd-date-picker.entry.js +3 -3
  269. package/dist/esm/sd-date-range-picker-calendar.entry.js +2 -2
  270. package/dist/esm/sd-date-range-picker.entry.js +1 -1
  271. package/dist/esm/sd-dropdown-button.entry.js +93 -6
  272. package/dist/esm/sd-file-picker.entry.js +2 -2
  273. package/dist/esm/sd-form.entry.js +1 -1
  274. package/dist/esm/sd-ghost-button.entry.js +3 -3
  275. package/dist/esm/sd-guide.entry.js +2 -2
  276. package/dist/esm/{sd-input_2.entry.js → sd-input.entry.js} +4 -43
  277. package/dist/esm/sd-linear-progress.entry.js +3 -3
  278. package/dist/esm/sd-loading-container.entry.js +3 -3
  279. package/dist/esm/sd-modal-container.entry.js +1 -1
  280. package/dist/esm/sd-number-input.entry.js +4 -4
  281. package/dist/esm/sd-pagination_5.entry.js +65 -33
  282. package/dist/esm/sd-popover.entry.js +2 -2
  283. package/dist/esm/sd-portal.entry.js +2 -2
  284. package/dist/esm/sd-radio-button.entry.js +1 -1
  285. package/dist/esm/sd-radio-group.entry.js +1 -1
  286. package/dist/esm/sd-radio.entry.js +1 -1
  287. package/dist/esm/{sd-select-v2-list-item_4.entry.js → sd-select-list-item_4.entry.js} +47 -47
  288. package/dist/esm/sd-switch.entry.js +2 -2
  289. package/dist/esm/sd-table.config-DKkzCQwJ.js +94 -0
  290. package/dist/esm/sd-table.entry.js +21 -11
  291. package/dist/esm/sd-tabs.entry.js +2 -2
  292. package/dist/esm/sd-tag.entry.js +3 -3
  293. package/dist/esm/sd-td.entry.js +2 -2
  294. package/dist/esm/sd-text-link.entry.js +4 -4
  295. package/dist/esm/sd-textarea.entry.js +2 -2
  296. package/dist/esm/sd-toast-container.entry.js +2 -2
  297. package/dist/esm/sd-toast.entry.js +3 -3
  298. package/dist/esm/sd-toggle.entry.js +2 -2
  299. package/dist/esm/{system-BgFLSKqC.js → system-CZxeqYuw.js} +7 -1
  300. package/dist/esm/{tooltipArrow-BHRQVawd.js → tooltipArrow-DZ-N5HBq.js} +1 -1
  301. 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
  302. 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
  303. 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
  304. 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
  305. package/dist/types/components/{sd-select-v2/sd-select-v2.config.d.ts → sd-select/sd-select.config.d.ts} +12 -12
  306. package/dist/types/components/sd-select/sd-select.d.ts +56 -84
  307. package/dist/types/components/sd-table/constants.d.ts +4 -1
  308. package/dist/types/components/sd-table/sd-table.config.d.ts +64 -0
  309. package/dist/types/components/sd-table/sd-thead/sd-thead.d.ts +5 -0
  310. package/dist/types/components.d.ts +944 -2386
  311. package/dist/types/utils/testing/index.d.ts +2 -0
  312. package/dist/types/utils/testing/mocks.d.ts +4 -0
  313. package/hydrate/index.js +417 -2208
  314. package/hydrate/index.mjs +417 -2208
  315. package/package.json +1 -1
  316. package/dist/cjs/base-dropdown-event-BTPlZ1KF.js +0 -91
  317. package/dist/cjs/sd-progress.cjs.entry.js +0 -63
  318. package/dist/cjs/sd-select-dropdown_2.cjs.entry.js +0 -231
  319. package/dist/cjs/sd-select-group.cjs.entry.js +0 -332
  320. package/dist/cjs/sd-select-multiple-group.cjs.entry.js +0 -458
  321. package/dist/cjs/sd-select-multiple.cjs.entry.js +0 -191
  322. package/dist/cjs/sd-select-option-group.cjs.entry.js +0 -68
  323. package/dist/cjs/sd-select.cjs.entry.js +0 -181
  324. package/dist/cjs/select-keyboard-navigation-CErfIrGV.js +0 -27
  325. package/dist/cjs/table-test.cjs.entry.js +0 -96
  326. package/dist/collection/components/sd-progress/sd-progress.css +0 -63
  327. package/dist/collection/components/sd-progress/sd-progress.js +0 -186
  328. package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.css +0 -30
  329. package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js +0 -444
  330. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.css +0 -36
  331. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +0 -257
  332. package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.css +0 -23
  333. package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +0 -161
  334. package/dist/collection/components/sd-select-group/sd-select-group.css +0 -81
  335. package/dist/collection/components/sd-select-group/sd-select-group.js +0 -1061
  336. package/dist/collection/components/sd-select-multiple/sd-select-multiple.css +0 -54
  337. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +0 -770
  338. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +0 -79
  339. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +0 -1183
  340. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.css +0 -75
  341. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +0 -305
  342. package/dist/collection/components/sd-select-v2/sd-select-v2.css +0 -11
  343. package/dist/collection/components/sd-select-v2/sd-select-v2.js +0 -897
  344. package/dist/collection/components/table-test/table-test.css +0 -59
  345. package/dist/collection/components/table-test/table-test.js +0 -316
  346. package/dist/components/p-6AvsuYqF.js +0 -1
  347. package/dist/components/p-7DKZPPev.js +0 -1
  348. package/dist/components/p-9ZtJl4s6.js +0 -1
  349. package/dist/components/p-BRfPoWUn.js +0 -1
  350. package/dist/components/p-BZc6lwGD.js +0 -1
  351. package/dist/components/p-Btx5sC7s.js +0 -1
  352. package/dist/components/p-C-BOe23n.js +0 -1
  353. package/dist/components/p-CNAzAL53.js +0 -1
  354. package/dist/components/p-CqghR1aS.js +0 -1
  355. package/dist/components/p-Cy6HMEsK.js +0 -1
  356. package/dist/components/p-DAC3TaZV.js +0 -1
  357. package/dist/components/p-DBex-RJU.js +0 -1
  358. package/dist/components/p-DWMY9O2B.js +0 -1
  359. package/dist/components/p-DfOYYI9m.js +0 -1
  360. package/dist/components/p-eEC3ITv0.js +0 -1
  361. package/dist/components/p-nVHDJc9g.js +0 -1
  362. package/dist/components/p-rnbt1m4L.js +0 -1
  363. package/dist/components/sd-progress.d.ts +0 -11
  364. package/dist/components/sd-progress.js +0 -1
  365. package/dist/components/sd-select-dropdown.d.ts +0 -11
  366. package/dist/components/sd-select-dropdown.js +0 -1
  367. package/dist/components/sd-select-group.js +0 -1
  368. package/dist/components/sd-select-multiple-group.d.ts +0 -11
  369. package/dist/components/sd-select-multiple-group.js +0 -1
  370. package/dist/components/sd-select-multiple.js +0 -1
  371. package/dist/components/sd-select-option-group.d.ts +0 -11
  372. package/dist/components/sd-select-option-group.js +0 -1
  373. package/dist/components/sd-select-option.js +0 -1
  374. package/dist/components/sd-select-search-input.d.ts +0 -11
  375. package/dist/components/sd-select-search-input.js +0 -1
  376. package/dist/components/sd-select-v2-list-item-search.d.ts +0 -11
  377. package/dist/components/sd-select-v2-list-item-search.js +0 -1
  378. package/dist/components/sd-select-v2-list-item.d.ts +0 -11
  379. package/dist/components/sd-select-v2-list-item.js +0 -1
  380. package/dist/components/sd-select-v2-listbox.d.ts +0 -11
  381. package/dist/components/sd-select-v2-listbox.js +0 -1
  382. package/dist/components/sd-select-v2-trigger.d.ts +0 -11
  383. package/dist/components/sd-select-v2-trigger.js +0 -1
  384. package/dist/components/sd-select-v2.d.ts +0 -11
  385. package/dist/components/sd-select-v2.js +0 -1
  386. package/dist/components/table-test.d.ts +0 -11
  387. package/dist/components/table-test.js +0 -1
  388. package/dist/design-system/p-00612047.entry.js +0 -1
  389. package/dist/design-system/p-07adda3c.entry.js +0 -1
  390. package/dist/design-system/p-0e1b27cc.entry.js +0 -1
  391. package/dist/design-system/p-140b40ab.entry.js +0 -1
  392. package/dist/design-system/p-1573f415.entry.js +0 -1
  393. package/dist/design-system/p-1b9f6cef.entry.js +0 -1
  394. package/dist/design-system/p-1cc7d81f.entry.js +0 -1
  395. package/dist/design-system/p-1fa6c17f.entry.js +0 -1
  396. package/dist/design-system/p-4114eea3.entry.js +0 -1
  397. package/dist/design-system/p-5e300b77.entry.js +0 -1
  398. package/dist/design-system/p-711c59fc.entry.js +0 -1
  399. package/dist/design-system/p-850de8d4.entry.js +0 -1
  400. package/dist/design-system/p-9fee77f0.entry.js +0 -1
  401. package/dist/design-system/p-BPGLtKk5.js +0 -1
  402. package/dist/design-system/p-Bp7ytJz5.js +0 -2
  403. package/dist/design-system/p-CRdYeSBK.js +0 -1
  404. package/dist/design-system/p-Cy6HMEsK.js +0 -1
  405. package/dist/design-system/p-c521e731.entry.js +0 -1
  406. package/dist/design-system/p-ce2210ad.entry.js +0 -1
  407. package/dist/design-system/p-d1846df9.entry.js +0 -1
  408. package/dist/design-system/p-d52f25c6.entry.js +0 -1
  409. package/dist/design-system/p-dbcbbf1e.entry.js +0 -1
  410. package/dist/esm/base-dropdown-event-CRdYeSBK.js +0 -89
  411. package/dist/esm/sd-progress.entry.js +0 -61
  412. package/dist/esm/sd-select-dropdown_2.entry.js +0 -228
  413. package/dist/esm/sd-select-group.entry.js +0 -330
  414. package/dist/esm/sd-select-multiple-group.entry.js +0 -456
  415. package/dist/esm/sd-select-multiple.entry.js +0 -189
  416. package/dist/esm/sd-select-option-group.entry.js +0 -66
  417. package/dist/esm/sd-select.entry.js +0 -179
  418. package/dist/esm/select-keyboard-navigation-Cy6HMEsK.js +0 -25
  419. package/dist/esm/table-test.entry.js +0 -94
  420. package/dist/types/components/sd-progress/sd-progress.d.ts +0 -15
  421. package/dist/types/components/sd-select/sd-select-dropdown/sd-select-dropdown.d.ts +0 -41
  422. package/dist/types/components/sd-select/sd-select-option/sd-select-option.d.ts +0 -23
  423. package/dist/types/components/sd-select/sd-select-search-input/sd-select-search-input.d.ts +0 -11
  424. package/dist/types/components/sd-select-group/sd-select-group.d.ts +0 -86
  425. package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts +0 -64
  426. package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +0 -110
  427. package/dist/types/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.d.ts +0 -29
  428. package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +0 -75
  429. package/dist/types/components/table-test/table-test.d.ts +0 -46
  430. /package/dist/collection/components/{sd-select-v2/sd-select-v2.config.js → sd-select/sd-select.config.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-disabled:#E1E1E1;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-content-primary:#222222;--sd-system-color-content-secondary:#555555;--sd-system-color-content-tertiary:#888888;--sd-system-color-content-quaternary:#AAAAAA;--sd-system-color-content-brand:#005CC9;--sd-system-color-content-subtle:#066D9B;--sd-system-color-content-accent:#0075FF;--sd-system-color-content-danger-default:#E30000;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-warning:#FF6B00;--sd-system-color-content-inverse:#FFFFFF;--sd-system-color-text-disabled:#888888;--sd-system-color-link-accent:#006AC1;--sd-system-color-icon-brand:#025497;--sd-system-color-icon-accent:#0075FF;--sd-system-color-icon-danger:#E30000;--sd-system-color-icon-warning:#FF6B00;--sd-system-color-icon-success:#00973C;--sd-system-color-icon-inverse:#FFFFFF;--sd-system-color-icon-disabled:#BBBBBB;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-border-disabled:#CCCCCC;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-icon-default:#888888;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-strong-dropdown-divider:#006AC1;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-subtle-dropdown-divider:#5CB0F3;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-content:#222222;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-strong-dropdown-divider:#FF7C7C;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-gap:4px;--sd-text-link-text-link-size-icon:16px;--sd-text-link-text-link-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-default-font-size:12px;--sd-text-link-text-link-typography-default-font-weight:500;--sd-text-link-text-link-typography-default-text-decoration:none;--sd-text-link-text-link-typography-default-line-height:20px;--sd-text-link-text-link-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-underline-font-size:12px;--sd-text-link-text-link-typography-underline-font-weight:500;--sd-text-link-text-link-typography-underline-text-decoration:underline;--sd-text-link-text-link-typography-underline-line-height:22px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-bg:#FFFFFF;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:12px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:20px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-font-weight:400;--sd-checkbox-checkbox-typography-font-size:12px;--sd-checkbox-checkbox-typography-line-height:20px;--sd-checkbox-checkbox-typography-text-decoration:none;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-font-weight:400;--sd-radio-radio-typography-font-size:12px;--sd-radio-radio-typography-line-height:20px;--sd-radio-radio-typography-text-decoration:none;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-height:28px;--sd-select-select-radius:4px;--sd-select-select-border-width:1px;--sd-select-select-padding-x:12px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-gap:8px;--sd-select-select-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-typography-font-weight:400;--sd-select-select-typography-font-size:12px;--sd-select-select-typography-line-height:20px;--sd-select-select-typography-text-decoration:none;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-select-select-size-icon:16px;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-text-hint:#555555;--sd-textinput-textinput-text-error-message:#E30000;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-hint-typography-font-weight:400;--sd-textinput-textinput-hint-typography-font-size:12px;--sd-textinput-textinput-hint-typography-line-height:20px;--sd-textinput-textinput-hint-typography-text-decoration:none;--sd-textinput-textinput-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-error-message-typography-font-weight:400;--sd-textinput-textinput-error-message-typography-font-size:12px;--sd-textinput-textinput-error-message-typography-line-height:20px;--sd-textinput-textinput-error-message-typography-text-decoration:none;--sd-textinput-textinput-contents-gap:4px;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-contents-gap:4px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-hint-color:#555555;--sd-number-input-number-input-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-hint-typography-font-weight:400;--sd-number-input-number-input-hint-typography-font-size:12px;--sd-number-input-number-input-hint-typography-line-height:20px;--sd-number-input-number-input-hint-typography-text-decoration:none;--sd-number-input-number-input-error-message-color:#E30000;--sd-number-input-number-input-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-error-message-typography-font-weight:400;--sd-number-input-number-input-error-message-typography-font-size:12px;--sd-number-input-number-input-error-message-typography-line-height:20px;--sd-number-input-number-input-error-message-typography-text-decoration:none;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-filepicker-filepicker-height:28px;--sd-filepicker-filepicker-padding-x:12px;--sd-filepicker-filepicker-gap:8px;--sd-filepicker-filepicker-radius:4px;--sd-filepicker-filepicker-border-width:1px;--sd-filepicker-filepicker-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-typography-font-weight:400;--sd-filepicker-filepicker-typography-font-size:12px;--sd-filepicker-filepicker-typography-line-height:20px;--sd-filepicker-filepicker-typography-text-decoration:none;--sd-filepicker-filepicker-size-icon:16px;--sd-filepicker-filepicker-contents-gap:4px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-sm-date-gap:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-md-date-gap:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-hint:#555555;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-contents-gap:4px;--sd-datepicker-datepicker-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-hint-typography-font-weight:400;--sd-datepicker-datepicker-hint-typography-font-size:12px;--sd-datepicker-datepicker-hint-typography-line-height:20px;--sd-datepicker-datepicker-hint-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-content-default:#888888;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#555555;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-gap:12px;--sd-popover-popover-body-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-bg:#07284A;--sd-popover-popover-title-color:#FFFFFF;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-description-color:#FFFFFF;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-color:#D8D8D8;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:700;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap:24px;--sd-tab-tab-sub-content-gap:4px;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-dense-padding-y:6px;--sd-table-table-body-padding-x:16px;--sd-table-table-body-frame-padding:8px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-default:#E1E1E1;--sd-table-table-border-width-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding:8px;--sd-table-table-key-vlaue-height:44px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
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,
@@ -7283,7 +7176,13 @@ const color = {
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
  };
@@ -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 {
@@ -7817,9 +7716,9 @@ class SdDatePicker {
7817
7716
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
7818
7717
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
7819
7718
  };
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 => {
7719
+ 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
7720
  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 })))));
7721
+ } }, 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
7722
  }
7824
7723
  static get watchers() { return {
7825
7724
  "isOpen": [{
@@ -8001,7 +7900,7 @@ class SdDatePickerCalendar {
8001
7900
  '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
8002
7901
  '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
8003
7902
  };
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 => {
7903
+ 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
7904
  const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
8006
7905
  const isToday = cell.inCurrentMonth && today === cell.date;
8007
7906
  const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -8072,10 +7971,10 @@ class SdDatePickerTrigger {
8072
7971
  ? DATEPICKER_COLORS.icon.disabled
8073
7972
  : DATEPICKER_COLORS.icon.default,
8074
7973
  };
8075
- return (hAsync("div", { key: '48f426459dfa50a5fab8e8e9c597b9a3c3f011c1', class: {
7974
+ return (hAsync("div", { key: 'f541c11d4e7385993628e10f0eeb7a339f80e1f6', class: {
8076
7975
  'sd-date-picker-trigger': true,
8077
7976
  '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)));
7977
+ }, 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
7978
  }
8080
7979
  static get style() { return sdDatePickerTriggerCss(); }
8081
7980
  static get cmpMeta() { return {
@@ -8495,7 +8394,7 @@ class SdDateRangePickerCalendar {
8495
8394
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
8496
8395
  '--range-divider': RANGE_LAYOUT.divider,
8497
8396
  };
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)))));
8397
+ 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
8398
  }
8500
8399
  static get watchers() { return {
8501
8400
  "value": [{
@@ -8850,7 +8749,7 @@ class SdDropdownButton extends BaseDropdownEvent {
8850
8749
  }
8851
8750
  render() {
8852
8751
  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: {
8752
+ 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
8753
  '--sd-dropdown-button-bg': config.color,
8855
8754
  '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
8856
8755
  '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -8860,10 +8759,10 @@ class SdDropdownButton extends BaseDropdownEvent {
8860
8759
  '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
8861
8760
  '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
8862
8761
  '--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: {
8762
+ } }, 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
8763
  'sd-dropdown-button__trigger-icon': true,
8865
8764
  '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)));
8765
+ }, "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
8766
  }
8868
8767
  static get watchers() { return {
8869
8768
  "isOpen": [{
@@ -8963,14 +8862,11 @@ const FIELD_LABEL_SIZE_MAP = {
8963
8862
  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
8863
 
8965
8864
  const FORM_PARENT_TAGS = [
8966
- 'sd-select',
8967
- 'sd-select-multiple',
8968
- 'sd-select-multiple-group',
8969
8865
  'sd-input',
8970
8866
  'sd-barcode-input',
8971
8867
  'sd-textarea',
8972
8868
  'sd-number-input',
8973
- 'sd-select-v2',
8869
+ 'sd-select',
8974
8870
  'sd-file-picker',
8975
8871
  'sd-date-picker',
8976
8872
  'sd-date-range-picker',
@@ -9134,20 +9030,20 @@ class SdField {
9134
9030
  : {}),
9135
9031
  }
9136
9032
  : {};
9137
- return (hAsync("div", { key: '218df97b257b97f4801a31a11d4cf2072f981f07', class: {
9033
+ return (hAsync("div", { key: 'f7cec98818159adf5fd398bd15547ed1ec555092', class: {
9138
9034
  'sd-field': true,
9139
9035
  'sd-field--has-label': !!this.label,
9140
9036
  'sd-field--has-addon': !!addon,
9141
9037
  [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
9038
+ }, 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
9039
  ? {
9144
9040
  width: typeof this.width === 'number' ? `${this.width}px` : this.width,
9145
9041
  flex: 'none',
9146
9042
  }
9147
- : {} }, hAsync("div", { key: '1f4176fb04ba648fc2971904daa88974a4526868', class: {
9043
+ : {} }, hAsync("div", { key: '0dbb6cbe768bac1c64d72d37d270805e16936e24', class: {
9148
9044
  'sd-field__control': true,
9149
9045
  '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))))));
9046
+ } }, 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
9047
  }
9152
9048
  renderLabel(label) {
9153
9049
  if (!label)
@@ -9293,7 +9189,7 @@ class SdFilePicker {
9293
9189
  if (this.fileInputRef) {
9294
9190
  this.fileInputRef.value = '';
9295
9191
  }
9296
- await this.formField?.sdReset();
9192
+ await this.formField?.sdResetValidation();
9297
9193
  }
9298
9194
  async sdResetValidate() {
9299
9195
  await this.formField?.sdResetValidation();
@@ -9626,7 +9522,7 @@ class SdFloatingPopover {
9626
9522
  }
9627
9523
  }
9628
9524
  render() {
9629
- return hAsync("slot", { key: '2ee14400df156cb766c0f88b77bc232263b3c7e2' });
9525
+ return hAsync("slot", { key: '2383aafb9b01881f06e4fc97c5903c19453b8b4c' });
9630
9526
  }
9631
9527
  static get style() { return sdFloatingPortalCss(); }
9632
9528
  static get cmpMeta() { return {
@@ -9899,7 +9795,7 @@ class SdGhostButton {
9899
9795
  ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
9900
9796
  : GHOST_BUTTON_CONTENT_COLORS[this.intent];
9901
9797
  const accessibleName = this.ariaLabel.trim() || undefined;
9902
- return (hAsync("button", { key: 'd7f6fcbed3526ffb8b90b205dbe2bbf55abf03a0', class: {
9798
+ return (hAsync("button", { key: '57793e0911fc49c62ab627bd7234caf9c0a04097', class: {
9903
9799
  'sd-ghost-button': true,
9904
9800
  'sd-ghost-button--disabled': this.disabled,
9905
9801
  }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -9908,7 +9804,7 @@ class SdGhostButton {
9908
9804
  '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
9909
9805
  '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
9910
9806
  '--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 })));
9807
+ }, onClick: this.handleClick }, hAsync("sd-icon", { key: 'cf81a34495eacad4052ad7bbd5cba837b905610b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9912
9808
  }
9913
9809
  static get style() { return sdGhostButtonCss(); }
9914
9810
  static get cmpMeta() { return {
@@ -10819,12 +10715,12 @@ class SdInput {
10819
10715
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
10820
10716
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
10821
10717
  };
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 () => {
10718
+ 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
10719
  if (this.disabled)
10824
10720
  return;
10825
10721
  this.internalValue = '';
10826
10722
  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: () => {
10723
+ } })), 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
10724
  if (this.disabled)
10829
10725
  return;
10830
10726
  this.passwordVisible = !this.passwordVisible;
@@ -10934,7 +10830,7 @@ class SdLinearProgress {
10934
10830
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
10935
10831
  };
10936
10832
  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)));
10833
+ 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
10834
  }
10939
10835
  static get style() { return sdLinearProgressCss(); }
10940
10836
  static get cmpMeta() { return {
@@ -10968,10 +10864,10 @@ class SdLoadingContainer {
10968
10864
  this.visible = false;
10969
10865
  }
10970
10866
  render() {
10971
- return (hAsync("div", { key: '14ae9c222f613129ac2819ee46b7dd0a248b93da', class: {
10867
+ return (hAsync("div", { key: 'a83b33262d59ecba12b7db9ed6bfe9f1fea4a54a', class: {
10972
10868
  'sd-loading-container': true,
10973
10869
  '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)))));
10870
+ }, "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
10871
  }
10976
10872
  static get style() { return sdLoadingContainerCss(); }
10977
10873
  static get cmpMeta() { return {
@@ -11064,7 +10960,7 @@ class SdLoadingModal {
11064
10960
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
11065
10961
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
11066
10962
  };
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 }))))));
10963
+ 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
10964
  }
11069
10965
  static get style() { return sdLoadingModalCss(); }
11070
10966
  static get cmpMeta() { return {
@@ -11857,12 +11753,12 @@ class SdNumberInput {
11857
11753
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
11858
11754
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
11859
11755
  };
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()
11756
+ 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
11757
  ? 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: {
11758
+ : 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
11759
  textAlign: this.useButton ? 'center' : 'right',
11864
11760
  ...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()
11761
+ } }), 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
11762
  ? NUMBER_INPUT_STEPPER.icon.disabled
11867
11763
  : NUMBER_INPUT_STEPPER.icon.default }))))));
11868
11764
  }
@@ -12069,13 +11965,13 @@ class SdPagination {
12069
11965
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
12070
11966
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
12071
11967
  };
12072
- return (hAsync("div", { key: '386fdd2d1c0b5a7284c299201f19fd3384670ab1', class: {
11968
+ return (hAsync("div", { key: 'e648886fbec4723b7be767d9e1bfc04004cca234', class: {
12073
11969
  'sd-pagination': true,
12074
11970
  '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: {
11971
+ }, 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
11972
  'sd-pagination__item': true,
12077
11973
  '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())));
11974
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '1975d14028485438a728b23d717abfcde8722fcf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
12079
11975
  }
12080
11976
  static get style() { return sdPaginationCss(); }
12081
11977
  static get cmpMeta() { return {
@@ -12411,7 +12307,7 @@ class SdPortal {
12411
12307
  this.close.emit();
12412
12308
  }
12413
12309
  render() {
12414
- return hAsync("slot", { key: '6fa44238ddbc26c355ddde102d2639db7dd50b94' });
12310
+ return hAsync("slot", { key: '28858d6833d8ff7f86295f7e445d51ffc84db99a' });
12415
12311
  }
12416
12312
  static get watchers() { return {
12417
12313
  "open": [{
@@ -12435,79 +12331,6 @@ class SdPortal {
12435
12331
  }; }
12436
12332
  }
12437
12333
 
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
12334
  const radio = {
12512
12335
  size: "16",
12513
12336
  borderWidth: "1",
@@ -12898,1914 +12721,181 @@ class SdRadioGroup {
12898
12721
  }; }
12899
12722
  }
12900
12723
 
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)}`;
12724
+ const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
12926
12725
 
12927
- /**
12928
- * @deprecated sd-select-v2를 사용하세요.
12929
- */
12930
- class SdSelect extends BaseDropdownEvent {
12726
+ class SdSelect {
12931
12727
  constructor(hostRef) {
12932
- super();
12933
12728
  registerInstance(this, hostRef);
12934
12729
  this.update = createEvent(this, "sdUpdate", 7);
12935
12730
  this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
12936
12731
  }
12732
+ static VIEWPORT_PADDING = 20;
12733
+ static PORTAL_OFFSET_Y = 4;
12734
+ static CLOSE_ANIMATION_DURATION = 150;
12937
12735
  get el() { return getElement(this); }
12938
- // props
12736
+ type = 'default';
12939
12737
  value = null;
12940
12738
  options = [];
12941
12739
  placeholder = '선택';
12942
- optionPlaceholder = '선택지가 없습니다.';
12943
- width = '200px';
12740
+ maxDropdownWidth = '640px';
12944
12741
  dropdownHeight = '260px';
12945
- autoFocus = false;
12946
12742
  disabled = false;
12947
- clearable = false;
12948
- searchable = false;
12949
- // props - label
12950
12743
  label = '';
12951
12744
  labelWidth = '';
12952
12745
  addonLabel = '';
12953
12746
  addonAlign = 'start';
12747
+ error = false;
12748
+ hint = '';
12749
+ errorMessage = '';
12750
+ rules = [];
12954
12751
  icon = undefined;
12955
12752
  labelTooltip = '';
12956
12753
  labelTooltipProps = null;
12957
- // props - form
12958
- rules = [];
12959
- error = false;
12960
- // props - custom slots
12961
- optionRenderer;
12962
- // states
12754
+ emitValue = false;
12755
+ width = '';
12756
+ useSearch = false;
12757
+ allSelectedLabel = '전체';
12758
+ useSelectAll = false;
12963
12759
  isOpen = false;
12964
- itemIndex = -1;
12965
- isScrolled = false;
12966
- // events
12760
+ isAnimatingOut = false;
12761
+ triggerWidth = '200px';
12762
+ resolvedDropdownHeight = '260px';
12763
+ resolvedMaxDropdownWidth = '640px';
12764
+ focused = false;
12765
+ hovered = false;
12967
12766
  update;
12968
12767
  dropDownShow;
12969
- selectRef;
12970
- triggerRef;
12971
- formField;
12972
- filteredOptions = [];
12973
- dropDownWidth = '200px';
12974
- name = nanoid$1();
12768
+ async sdFocus() {
12769
+ if (this.disabled)
12770
+ return;
12771
+ await this.triggerComponentRef?.sdFocus();
12772
+ }
12975
12773
  async sdOpen() {
12774
+ // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
12775
+ await new Promise(resolve => setTimeout(resolve, 0));
12776
+ if (this.disabled || this.isOpen)
12777
+ return;
12778
+ this.prepareDropdownGeometry();
12779
+ if (this.closeAnimationTimer)
12780
+ clearTimeout(this.closeAnimationTimer);
12781
+ this.isAnimatingOut = false;
12976
12782
  this.isOpen = true;
12977
12783
  }
12978
- async sdValidate() {
12979
- this.formField?.sdValidate();
12980
- }
12981
- async sdReset() {
12982
- this.formField?.sdReset();
12983
- }
12984
- async sdResetValidate() {
12985
- this.formField?.sdResetValidation();
12784
+ triggerRef;
12785
+ triggerComponentRef;
12786
+ closeAnimationTimer;
12787
+ name = nanoid$1();
12788
+ triggerHasFocus = false;
12789
+ watchIsOpen(newValue) {
12790
+ this.syncFocusedState(newValue);
12791
+ this.dropDownShow.emit({ isOpen: newValue });
12986
12792
  }
12987
- async sdFocus() {
12988
- this.formField?.sdFocus();
12793
+ get isMulti() {
12794
+ return this.type === 'multi' || this.type === 'multi_depth';
12989
12795
  }
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();
12796
+ get displayText() {
12797
+ if (this.isMulti) {
12798
+ if (!Array.isArray(this.value) || this.value.length === 0)
12799
+ return '';
12800
+ const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
12801
+ const selected = this.getSelectedOptions();
12802
+ const allSelected = nonDisabledLeaves.length > 0 &&
12803
+ nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
12804
+ if (allSelected)
12805
+ return this.allSelectedLabel ?? '전체';
12806
+ const flat = this.flattenOptions(this.options);
12807
+ return this.value
12808
+ .map(item => {
12809
+ if (item != null && typeof item === 'object') {
12810
+ const opt = item;
12811
+ return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
12812
+ }
12813
+ return flat.find(o => o.value === item)?.label ?? '';
12814
+ })
12815
+ .filter(Boolean)
12816
+ .join(', ');
12817
+ }
12818
+ if (this.value == null)
12819
+ return '';
12820
+ if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
12821
+ return this.value.label ?? '';
12996
12822
  }
12823
+ const flat = this.flattenOptions(this.options);
12824
+ const found = flat.find(o => o.value === this.value);
12825
+ return found?.label ?? '';
12997
12826
  }
12998
- componentWillLoad() {
12999
- this.filteredOptions = this.options;
13000
- this.dropDownWidth = this.width;
13001
- this.initializeEvent();
12827
+ flattenOptions(options) {
12828
+ return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
13002
12829
  }
13003
- componentDidLoad() {
13004
- if (this.autoFocus) {
13005
- this.selectRef?.focus();
12830
+ getNonDisabledLeaves(options) {
12831
+ return options.flatMap(o => {
12832
+ if (o.disabled)
12833
+ return [];
12834
+ if (o.children)
12835
+ return this.getNonDisabledLeaves(o.children);
12836
+ return [o];
12837
+ });
12838
+ }
12839
+ getSelectedOptions() {
12840
+ const val = this.value;
12841
+ if (!val || !Array.isArray(val))
12842
+ return [];
12843
+ if (this.emitValue) {
12844
+ return val
12845
+ .map(v => this.findOriginalOption(v, this.options))
12846
+ .filter((o) => !!o);
13006
12847
  }
12848
+ return val;
13007
12849
  }
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;
12850
+ toMultiValue(options) {
12851
+ return this.emitValue ? options.map(o => o.value) : options;
13013
12852
  }
13014
- disconnectedCallback() {
13015
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
12853
+ parsePixelValue(value, fallback) {
12854
+ const parsed = Number.parseFloat(value);
12855
+ return Number.isFinite(parsed) ? parsed : fallback;
13016
12856
  }
13017
- handleDocumentClick(event) {
13018
- if (!this.selectRef?.contains(event.target)) {
13019
- this.isOpen = false;
13020
- }
12857
+ updateDropdownViewportConstraints() {
12858
+ if (!this.triggerRef)
12859
+ return;
12860
+ const triggerRect = this.triggerRef.getBoundingClientRect();
12861
+ const viewportPadding = SdSelect.VIEWPORT_PADDING;
12862
+ const offsetY = SdSelect.PORTAL_OFFSET_Y;
12863
+ const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
12864
+ const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
12865
+ const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
12866
+ const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
12867
+ const availableHeight = Math.max(availableBelow, availableAbove);
12868
+ const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
12869
+ this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
12870
+ this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
13021
12871
  }
13022
- handleDocumentKeydown(keyboardEvent) {
13023
- keyboardEvent.stopPropagation();
13024
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13025
- if (!targetKey.includes(keyboardEvent.key))
12872
+ handleViewportResize = () => {
12873
+ if (!this.isOpen)
13026
12874
  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;
12875
+ this.updateDropdownViewportConstraints();
12876
+ };
12877
+ findOriginalOption(value, options) {
12878
+ for (const opt of options) {
12879
+ if (opt.value === value)
12880
+ return opt;
12881
+ if (opt.children) {
12882
+ const found = this.findOriginalOption(value, opt.children);
12883
+ if (found)
12884
+ return found;
12885
+ }
13045
12886
  }
13046
- }
13047
- getSelectedOption() {
13048
- return this.options.find(option => option.value === this.value);
12887
+ return undefined;
13049
12888
  }
13050
12889
  closeDropdown() {
13051
- this.isOpen = false;
13052
- }
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();
14786
- };
14787
- findOriginalOption(value, options) {
14788
- for (const opt of options) {
14789
- if (opt.value === value)
14790
- return opt;
14791
- if (opt.children) {
14792
- const found = this.findOriginalOption(value, opt.children);
14793
- if (found)
14794
- return found;
14795
- }
14796
- }
14797
- return undefined;
14798
- }
14799
- closeDropdown() {
14800
- if (!this.isOpen)
14801
- return;
12890
+ if (!this.isOpen)
12891
+ return;
14802
12892
  this.isOpen = false;
14803
12893
  this.isAnimatingOut = true;
14804
12894
  if (this.closeAnimationTimer)
14805
12895
  clearTimeout(this.closeAnimationTimer);
14806
12896
  this.closeAnimationTimer = setTimeout(() => {
14807
12897
  this.isAnimatingOut = false;
14808
- }, SdSelectV2.CLOSE_ANIMATION_DURATION);
12898
+ }, SdSelect.CLOSE_ANIMATION_DURATION);
14809
12899
  }
14810
12900
  prepareDropdownGeometry() {
14811
12901
  if (this.triggerRef) {
@@ -14887,30 +12977,30 @@ class SdSelectV2 {
14887
12977
  const portalProps = {
14888
12978
  open: this.isOpen,
14889
12979
  parentRef: this.triggerRef,
14890
- viewportPadding: SdSelectV2.VIEWPORT_PADDING,
12980
+ viewportPadding: SdSelect.VIEWPORT_PADDING,
14891
12981
  onSdClose: () => {
14892
12982
  this.closeDropdown();
14893
12983
  },
14894
12984
  };
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: () => {
12985
+ 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
12986
  this.hovered = true;
14897
12987
  }, onMouseLeave: () => {
14898
12988
  this.hovered = false;
14899
- } }, hAsync("div", { key: '42fa82a3c53804d9f90aadb0465d52fd9f4e446e', class: "sd-select-v2", ref: el => {
12989
+ } }, hAsync("div", { key: '8a0ae8a5e05459128409dbe21779f5e3d91b3a04', class: "sd-select", ref: el => {
14900
12990
  this.triggerRef = el;
14901
- } }, hAsync("sd-select-v2-trigger", { key: 'c97ae1e67019b099eee72f829d554b9e0350af30', ref: el => {
12991
+ } }, hAsync("sd-select-trigger", { key: '6b47231914655a8e197e3b38cd8e37c5214efc17', ref: el => {
14902
12992
  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) })))));
12993
+ }, 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
12994
  }
14905
12995
  static get watchers() { return {
14906
12996
  "isOpen": [{
14907
12997
  "watchIsOpen": 0
14908
12998
  }]
14909
12999
  }; }
14910
- static get style() { return sdSelectV2Css(); }
13000
+ static get style() { return sdSelectCss(); }
14911
13001
  static get cmpMeta() { return {
14912
13002
  "$flags$": 512,
14913
- "$tagName$": "sd-select-v2",
13003
+ "$tagName$": "sd-select",
14914
13004
  "$members$": {
14915
13005
  "type": [1],
14916
13006
  "value": [1032],
@@ -15116,9 +13206,9 @@ function filterTree(options, keyword) {
15116
13206
  }, []);
15117
13207
  }
15118
13208
 
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}`;
13209
+ 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
13210
 
15121
- class SdSelectV2ListItem {
13211
+ class SdSelectListItem {
15122
13212
  constructor(hostRef) {
15123
13213
  registerInstance(this, hostRef);
15124
13214
  this.listItemClick = createEvent(this, "sdListItemClick", 7);
@@ -15188,22 +13278,22 @@ class SdSelectV2ListItem {
15188
13278
  if (isDepth1Group) {
15189
13279
  cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
15190
13280
  }
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(); }
13281
+ return (hAsync("div", { key: 'c6f959e9290213c9003914dbdd696c3c339cce51', class: {
13282
+ 'sd-select-list-item': true,
13283
+ 'sd-select-list-item--group': isGroup,
13284
+ 'sd-select-list-item--depth1-group': isDepth1Group,
13285
+ 'sd-select-list-item--depth2-group': isDepth2Group,
13286
+ 'sd-select-list-item--selected': this.isSelected === true,
13287
+ 'sd-select-list-item--indeterminate': this.isSelected === null,
13288
+ 'sd-select-list-item--focused': this.isFocused,
13289
+ 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
13290
+ 'sd-select-list-item--disabled': !!this.option.disabled,
13291
+ }, 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, ")"))));
13292
+ }
13293
+ static get style() { return sdSelectListItemCss(); }
15204
13294
  static get cmpMeta() { return {
15205
13295
  "$flags$": 512,
15206
- "$tagName$": "sd-select-v2-list-item",
13296
+ "$tagName$": "sd-select-list-item",
15207
13297
  "$members$": {
15208
13298
  "option": [16],
15209
13299
  "depth": [2],
@@ -15218,9 +13308,9 @@ class SdSelectV2ListItem {
15218
13308
  }; }
15219
13309
  }
15220
13310
 
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}`;
13311
+ 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
13312
 
15223
- class SdSelectV2ListItemSearch {
13313
+ class SdSelectListItemSearch {
15224
13314
  constructor(hostRef) {
15225
13315
  registerInstance(this, hostRef);
15226
13316
  this.searchFilter = createEvent(this, "sdSearchFilter", 7);
@@ -15266,20 +13356,20 @@ class SdSelectV2ListItemSearch {
15266
13356
  clearTimeout(this.debounceTimer);
15267
13357
  }
15268
13358
  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 => {
13359
+ return (hAsync("div", { key: '139aa74cb44baef15a5a75008dd291f11ad2965b', class: {
13360
+ 'sd-select-list-item-search': true,
13361
+ 'sd-select-list-item-search--scrolled': this.isScrolled,
13362
+ } }, 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
13363
  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" })))));
13364
+ }, 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: {
13365
+ 'sd-select-list-item-search__clear': true,
13366
+ 'sd-select-list-item-search__clear--hidden': !this.searchText,
13367
+ }, 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
13368
  }
15279
- static get style() { return sdSelectV2ListItemSearchCss(); }
13369
+ static get style() { return sdSelectListItemSearchCss(); }
15280
13370
  static get cmpMeta() { return {
15281
13371
  "$flags$": 512,
15282
- "$tagName$": "sd-select-v2-list-item-search",
13372
+ "$tagName$": "sd-select-list-item-search",
15283
13373
  "$members$": {
15284
13374
  "isScrolled": [4, "is-scrolled"],
15285
13375
  "searchText": [32],
@@ -15291,9 +13381,9 @@ class SdSelectV2ListItemSearch {
15291
13381
  }; }
15292
13382
  }
15293
13383
 
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}`;
13384
+ 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
13385
 
15296
- class SdSelectV2Listbox {
13386
+ class SdSelectListbox {
15297
13387
  constructor(hostRef) {
15298
13388
  registerInstance(this, hostRef);
15299
13389
  this.optionSelect = createEvent(this, "sdOptionSelect", 7);
@@ -15457,7 +13547,7 @@ class SdSelectV2Listbox {
15457
13547
  get navigableOptions() {
15458
13548
  const items = [];
15459
13549
  if (this.showSelectAll) {
15460
- items.push(SdSelectV2Listbox.SELECT_ALL_OPTION);
13550
+ items.push(SdSelectListbox.SELECT_ALL_OPTION);
15461
13551
  }
15462
13552
  const walk = (opts) => {
15463
13553
  for (const opt of opts) {
@@ -15473,14 +13563,14 @@ class SdSelectV2Listbox {
15473
13563
  return items;
15474
13564
  }
15475
13565
  isSelectAllOption(option) {
15476
- return this.showSelectAll && option.value === SdSelectV2Listbox.SELECT_ALL_OPTION.value;
13566
+ return this.showSelectAll && option.value === SdSelectListbox.SELECT_ALL_OPTION.value;
15477
13567
  }
15478
13568
  emitSelectAll() {
15479
13569
  if (!this.showSelectAll)
15480
13570
  return;
15481
13571
  const allLeaves = this.getAllNonDisabledLeaves();
15482
13572
  this.optionSelect.emit({
15483
- option: { ...SdSelectV2Listbox.SELECT_ALL_OPTION, children: allLeaves },
13573
+ option: { ...SdSelectListbox.SELECT_ALL_OPTION, children: allLeaves },
15484
13574
  leaves: allLeaves,
15485
13575
  });
15486
13576
  }
@@ -15587,7 +13677,7 @@ class SdSelectV2Listbox {
15587
13677
  */
15588
13678
  scrollFocusedIntoView() {
15589
13679
  const list = this.listEl;
15590
- const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
13680
+ const focusedEl = list?.querySelector('.sd-select-list-item--focused');
15591
13681
  if (!list || !focusedEl)
15592
13682
  return;
15593
13683
  const listRect = list.getBoundingClientRect();
@@ -15633,7 +13723,7 @@ class SdSelectV2Listbox {
15633
13723
  return options.map(option => {
15634
13724
  const isGroup = !!option.children;
15635
13725
  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) }),
13726
+ 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
13727
  isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
15638
13728
  ];
15639
13729
  });
@@ -15645,19 +13735,19 @@ class SdSelectV2Listbox {
15645
13735
  '--listbox-max-height': this.maxHeight,
15646
13736
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15647
13737
  };
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 => {
13738
+ 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
13739
  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) })))))));
13740
+ } }, 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
13741
  }
15652
13742
  static get watchers() { return {
15653
13743
  "searchKeyword": [{
15654
13744
  "resetFocusOnFilter": 0
15655
13745
  }]
15656
13746
  }; }
15657
- static get style() { return sdSelectV2ListboxCss(); }
13747
+ static get style() { return sdSelectListboxCss(); }
15658
13748
  static get cmpMeta() { return {
15659
13749
  "$flags$": 521,
15660
- "$tagName$": "sd-select-v2-listbox",
13750
+ "$tagName$": "sd-select-listbox",
15661
13751
  "$members$": {
15662
13752
  "type": [1],
15663
13753
  "options": [16],
@@ -15678,9 +13768,9 @@ class SdSelectV2Listbox {
15678
13768
  }; }
15679
13769
  }
15680
13770
 
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)}`;
13771
+ 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
13772
 
15683
- class SdSelectV2Trigger {
13773
+ class SdSelectTrigger {
15684
13774
  constructor(hostRef) {
15685
13775
  registerInstance(this, hostRef);
15686
13776
  this.triggerClick = createEvent(this, "sdTriggerClick", 7);
@@ -15728,21 +13818,21 @@ class SdSelectV2Trigger {
15728
13818
  ? SELECT_COLORS.icon.disabled
15729
13819
  : SELECT_COLORS.icon.default,
15730
13820
  };
15731
- return (hAsync("div", { key: 'ec8bf544b2878082a046fbe881afa2369709033f', ref: el => {
13821
+ return (hAsync("div", { key: 'dddccfd47738e104a9c715a0c93df1882d28d704', ref: el => {
15732
13822
  this.triggerEl = el;
15733
13823
  }, 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,
13824
+ 'sd-select-trigger': true,
13825
+ 'sd-select-trigger--open': this.isOpen,
13826
+ 'sd-select-trigger--disabled': this.disabled,
13827
+ }, 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: {
13828
+ 'sd-select-trigger__icon': true,
13829
+ 'sd-select-trigger__icon--open': this.isOpen,
15740
13830
  } }))));
15741
13831
  }
15742
- static get style() { return sdSelectV2TriggerCss(); }
13832
+ static get style() { return sdSelectTriggerCss(); }
15743
13833
  static get cmpMeta() { return {
15744
13834
  "$flags$": 512,
15745
- "$tagName$": "sd-select-v2-trigger",
13835
+ "$tagName$": "sd-select-trigger",
15746
13836
  "$members$": {
15747
13837
  "displayText": [1, "display-text"],
15748
13838
  "placeholder": [1],
@@ -15856,7 +13946,7 @@ class SdSwitch {
15856
13946
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
15857
13947
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
15858
13948
  };
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)));
13949
+ 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
13950
  }
15861
13951
  static get style() { return sdSwitchCss(); }
15862
13952
  static get cmpMeta() { return {
@@ -15900,7 +13990,98 @@ function nanoid(size = 21) {
15900
13990
 
15901
13991
  const TABLE_ID_ATTR = 'table-id';
15902
13992
 
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%)}`;
13993
+ const table = {
13994
+ header: {
13995
+ height: "36",
13996
+ paddingX: "16",
13997
+ gap: "4",
13998
+ bg: "#F5FAFF",
13999
+ typography: {
14000
+ 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",
14001
+ fontWeight: "500",
14002
+ fontSize: "12",
14003
+ lineHeight: "20",
14004
+ textDecoration: "none"
14005
+ },
14006
+ resizingBar: {
14007
+ color: "#CCCCCC",
14008
+ height: "16"
14009
+ }
14010
+ },
14011
+ body: {
14012
+ "default": {
14013
+ height: "44"},
14014
+ paddingX: "16",
14015
+ typography: {
14016
+ 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",
14017
+ fontWeight: "400",
14018
+ fontSize: "12",
14019
+ lineHeight: "20",
14020
+ textDecoration: "none"
14021
+ }
14022
+ },
14023
+ border: {
14024
+ "default": "#E1E1E1",
14025
+ width: {
14026
+ width: "1"
14027
+ }
14028
+ },
14029
+ radius: "8"};
14030
+ var tableTokens = {
14031
+ table: table
14032
+ };
14033
+
14034
+ // ── Header Tokens ──
14035
+ const TABLE_HEADER_LAYOUT = {
14036
+ height: tableTokens.table.header.height,
14037
+ paddingX: tableTokens.table.header.paddingX,
14038
+ gap: tableTokens.table.header.gap,
14039
+ };
14040
+ const TABLE_HEADER_TYPOGRAPHY = {
14041
+ fontFamily: tableTokens.table.header.typography.fontFamily,
14042
+ fontWeight: tableTokens.table.header.typography.fontWeight,
14043
+ fontSize: tableTokens.table.header.typography.fontSize,
14044
+ lineHeight: tableTokens.table.header.typography.lineHeight,
14045
+ textDecoration: tableTokens.table.header.typography.textDecoration,
14046
+ };
14047
+ const TABLE_HEADER_COLORS = {
14048
+ bg: tableTokens.table.header.bg,
14049
+ };
14050
+ const TABLE_HEADER_RESIZING_BAR = {
14051
+ color: tableTokens.table.header.resizingBar.color,
14052
+ height: tableTokens.table.header.resizingBar.height,
14053
+ };
14054
+ // ── Body Tokens ──
14055
+ const TABLE_BODY_LAYOUT = {
14056
+ default: {
14057
+ height: tableTokens.table.body.default.height},
14058
+ paddingX: tableTokens.table.body.paddingX};
14059
+ const TABLE_BODY_TYPOGRAPHY = {
14060
+ fontFamily: tableTokens.table.body.typography.fontFamily,
14061
+ fontWeight: tableTokens.table.body.typography.fontWeight,
14062
+ fontSize: tableTokens.table.body.typography.fontSize,
14063
+ lineHeight: tableTokens.table.body.typography.lineHeight,
14064
+ textDecoration: tableTokens.table.body.typography.textDecoration,
14065
+ };
14066
+ // ── Frame / Border Tokens ──
14067
+ const TABLE_BORDER = {
14068
+ color: tableTokens.table.border.default,
14069
+ width: tableTokens.table.border.width.width,
14070
+ };
14071
+ const TABLE_RADIUS = tableTokens.table.radius;
14072
+ // ── Header Icon Color Defaults ──
14073
+ const ICON_DEFAULT_COLOR = {
14074
+ pageEdit: systemTokens.color.darkblue.strong,
14075
+ arrowDown: systemTokens.color.darkblue.strong,
14076
+ arrowUp: systemTokens.color.darkblue.strong,
14077
+ updown: systemTokens.color.grey.strong,
14078
+ pageMove: systemTokens.color.darkblue.strong,
14079
+ star: systemTokens.color.blue.strong,
14080
+ };
14081
+ const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
14082
+ const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
14083
+
14084
+ 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
14085
 
15905
14086
  class SdTable {
15906
14087
  constructor(hostRef) {
@@ -16521,12 +14702,10 @@ class SdTable {
16521
14702
  const allRows = this.rows ?? [];
16522
14703
  const pageInfo = this.getPaginationInfoSync();
16523
14704
  const startIdx = pageInfo?.startIndex ?? 0;
16524
- const displayed = pageInfo
16525
- ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex)
16526
- : allRows;
14705
+ const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
16527
14706
  return displayed.map((row, i) => {
16528
14707
  const absoluteIdx = startIdx + i;
16529
- return (hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row }));
14708
+ return hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
16530
14709
  });
16531
14710
  }
16532
14711
  get tableClasses() {
@@ -16548,24 +14727,34 @@ class SdTable {
16548
14727
  }
16549
14728
  render() {
16550
14729
  const resolvedTableId = this.getResolvedTableId();
16551
- return (hAsync(Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, hAsync("div", { key: 'f51d23212885ad8121b9a4e895fb854f1e142bc4', class: "sd-table__container", style: {
14730
+ const hostStyle = {
14731
+ '--table-radius': `${TABLE_RADIUS}px`,
14732
+ '--table-border-color': TABLE_BORDER.color,
14733
+ '--table-border-width': `${TABLE_BORDER.width}px`,
14734
+ '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
14735
+ '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
14736
+ '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
14737
+ '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
14738
+ '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
14739
+ };
14740
+ return (hAsync(Host, { key: '1a80b7c3589a8a2eefaabf24ed895c927543aac4', style: hostStyle }, hAsync("div", { key: 'd97aa6c04948153671e26066b6df02e206fc35e6', class: "sd-table__container", style: {
16552
14741
  '--table-width': this.width,
16553
14742
  '--table-height': this.height,
16554
14743
  '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
16555
- } }, hAsync("div", { key: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
14744
+ } }, hAsync("div", { key: '0e13dbbe062953c93a0acaaf5c00ca40a5b7e245', class: {
16556
14745
  'sd-table__clip': true,
16557
14746
  'sd-table__clip--has-pagination': !!(this.pagination &&
16558
14747
  this.pagination.rowsPerPage > 0 &&
16559
14748
  this.rowCount > 0 &&
16560
14749
  !this.useVirtualScroll),
16561
- } }, hAsync("div", { key: 'c901eba67eae29515bf0b3edcc6632b2aacf0f80', class: {
14750
+ } }, hAsync("div", { key: 'c800ecac543d1540d9b6c9faf06753c9dc10aaf3', class: {
16562
14751
  'sd-table__wrapper': true,
16563
14752
  'sd-table__wrapper--loading': this.isLoading,
16564
14753
  '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 &&
14754
+ } }, this.isLoading && (hAsync("div", { key: '656bc53538c8513e014f31f1e976fd66ce79c7aa', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '74078add6860fc95e238d89335d57e205e751cd6', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '18a33a7247bde3d08472f8082325c76217734e5d', class: "sd-table__no-data" }, hAsync("slot", { key: '966cb066f721695013a3e5a1a64543544b09fa77', name: "no-data" }, hAsync("span", { key: 'd335a9b1b2e847b267cefb9d12f7265c5f67f394' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '8fd0a2428bfd4dd6a574bbb02139088c31408866', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
16566
14755
  this.pagination.rowsPerPage > 0 &&
16567
14756
  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
14757
+ !this.useVirtualScroll && (hAsync("div", { key: '6f483b1a23456bbe42ff769a50c9de5638e7754f', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '841c545c23de8b4bba4cce3c9f6608d16f7b4e54', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'a67e17bf3067953169ffa119ee41b1d7f46c2058', value: this.useInternalPagination
16569
14758
  ? this.innerRowsPerPage
16570
14759
  : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
16571
14760
  if (!this.isRowsPerPageValue(e.detail))
@@ -16848,7 +15037,7 @@ class SdTabs {
16848
15037
  };
16849
15038
  }
16850
15039
  render() {
16851
- return (hAsync("div", { key: '3698b7b43e74ff053d61d5ce696b987373fd27d6', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
15040
+ return (hAsync("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16852
15041
  const badgeName = this.getBadgeName(tab);
16853
15042
  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
15043
  })));
@@ -17044,7 +15233,7 @@ class SdTag {
17044
15233
  render() {
17045
15234
  const config = this.resolvedConfig;
17046
15235
  const iconNode = this.renderIcon(config.icon, config.iconSize);
17047
- return (hAsync("span", { key: 'def10730670f37a62fa76b507f7f15a1b1f956fc', class: "sd-tag", style: {
15236
+ return (hAsync("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
17048
15237
  '--sd-tag-background': config.background,
17049
15238
  '--sd-tag-content': config.content,
17050
15239
  '--sd-tag-height': config.height,
@@ -17054,7 +15243,7 @@ class SdTag {
17054
15243
  '--sd-tag-font-weight': config.fontWeight,
17055
15244
  '--sd-tag-line-height': config.lineHeight,
17056
15245
  '--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));
15246
+ }, "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
15247
  }
17059
15248
  static get style() { return sdTagCss(); }
17060
15249
  static get cmpMeta() { return {
@@ -17072,7 +15261,7 @@ class SdTag {
17072
15261
  }; }
17073
15262
  }
17074
15263
 
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}`;
15264
+ const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
17076
15265
 
17077
15266
  class SdTbody {
17078
15267
  constructor(hostRef) {
@@ -17122,12 +15311,11 @@ class SdTbody {
17122
15311
  }
17123
15312
  }
17124
15313
  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 ? ([
15314
+ return (hAsync(Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', class: { tbody: true } }, [
17127
15315
  this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
17128
- hAsync("slot", null),
15316
+ hAsync("slot", { key: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
17129
15317
  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" })))))));
15318
+ ])));
17131
15319
  }
17132
15320
  static get watchers() { return {
17133
15321
  "rows": [{
@@ -17230,7 +15418,7 @@ class SdTd {
17230
15418
  }
17231
15419
  }
17232
15420
  render() {
17233
- return (hAsync(Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
15421
+ return (hAsync(Host, { key: '1702396f538453cf26beb81b63926ea73b7baa89', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'bd04afefd83178f48eb93b4e7d189386a817ff72' })));
17234
15422
  }
17235
15423
  static get watchers() { return {
17236
15424
  "field": [{
@@ -17334,16 +15522,16 @@ class SdTextLink {
17334
15522
  '--sd-text-link-text-decoration': typo.textDecoration,
17335
15523
  ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
17336
15524
  };
17337
- return (hAsync("span", { key: '77c1aa4a4a6297af9431947b7146db2ddfad52b5', class: {
15525
+ return (hAsync("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
17338
15526
  'sd-text-link': true,
17339
15527
  '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: {
15528
+ }, 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
15529
  width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
17342
15530
  height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
17343
15531
  display: 'inline-flex',
17344
15532
  alignItems: 'center',
17345
15533
  justifyContent: 'center',
17346
- } }, hAsync("sd-icon", { key: '2fa166ef60f6d1ee933450146bc667ee89dad2ce', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
15534
+ } }, hAsync("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
17347
15535
  }
17348
15536
  static get style() { return sdTextLinkCss(); }
17349
15537
  static get cmpMeta() { return {
@@ -17490,7 +15678,7 @@ class SdTextarea {
17490
15678
  '--sd-system-size-field-sm-height': 'auto',
17491
15679
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
17492
15680
  };
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 }))));
15681
+ 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
15682
  }
17495
15683
  static get watchers() { return {
17496
15684
  "value": [{
@@ -17544,11 +15732,12 @@ class SdTextarea {
17544
15732
  }; }
17545
15733
  }
17546
15734
 
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}`;
15735
+ 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
15736
 
17549
15737
  class SdThead {
17550
15738
  constructor(hostRef) {
17551
15739
  registerInstance(this, hostRef);
15740
+ this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
17552
15741
  }
17553
15742
  get el() { return getElement(this); }
17554
15743
  columns;
@@ -17560,6 +15749,7 @@ class SdThead {
17560
15749
  scrolledRight;
17561
15750
  rows = [];
17562
15751
  columnWidths = [];
15752
+ sdColumnSort;
17563
15753
  tableId = '';
17564
15754
  _columns = [];
17565
15755
  _selectable = false;
@@ -17660,9 +15850,11 @@ class SdThead {
17660
15850
  this.tableEl.handleResize(index, event, reversed);
17661
15851
  }
17662
15852
  }
15853
+ handleColumnSort = (col) => {
15854
+ this.sdColumnSort.emit({ column: col });
15855
+ };
17663
15856
  handleSelectAll(checked) {
17664
- const currentState = this.getIsAllChecked();
17665
- const nextChecked = currentState === null ? false : !!checked;
15857
+ const nextChecked = !!checked;
17666
15858
  const safeRows = Array.isArray(this.rows) ? this.rows : [];
17667
15859
  if (this.tableEl?.toggleSelectAllSync) {
17668
15860
  this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
@@ -17682,27 +15874,42 @@ class SdThead {
17682
15874
  const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
17683
15875
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
17684
15876
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
17685
- return (hAsync(Host, { key: '5aa1e38311b542d1a0b05b55abc7ef41927508bd', slot: `${this.tableId}-head` }, hAsync("thead", { key: '6d17753988ecd02d900d8a3bd7f2115b534b68a7', class: {
15877
+ const headStyle = {
15878
+ '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
15879
+ '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
15880
+ '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
15881
+ '--table-header-bg': TABLE_HEADER_COLORS.bg,
15882
+ '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
15883
+ '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
15884
+ '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
15885
+ '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
15886
+ '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
15887
+ '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
15888
+ '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
15889
+ '--table-border-color': TABLE_BORDER.color,
15890
+ '--table-border-width': `${TABLE_BORDER.width}px`,
15891
+ };
15892
+ return (hAsync(Host, { key: 'c4468056cc20a78516e61bccaf4d11c098e83ec6', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'a9befd1728baf2104bfb9132557d5c5c0eb49748', class: {
17686
15893
  'thead': true,
17687
15894
  'thead--sticky': this._stickyHeader,
17688
- } }, hAsync("tr", { key: '9cc729603e126da2f9c8923fe29ece10c7750bb4', class: "tr" }, this._selectable && (hAsync("th", { key: '37b2bcfa77eaf4c44465684c49ae84d566acc18b', class: {
15895
+ } }, hAsync("tr", { key: 'da786d82d4896b6124becf42f634bcc5b0a6ffb7', class: "tr" }, this._selectable && (hAsync("th", { key: 'b257c5475b7e528fbfc52ea85031a4c49bed7b36', class: {
17689
15896
  'th': true,
17690
15897
  'th--selected': true,
17691
15898
  'sticky-left': true,
17692
15899
  'sticky-left-edge': stickyLeftCount === 0,
17693
15900
  '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: {
15901
+ }, 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
15902
  'th': true,
17696
15903
  [`${col.thClass}`]: Boolean(col.thClass),
17697
15904
  'sticky-left': true,
17698
15905
  'sticky-left-edge': idx === stickyLeftCount - 1,
17699
15906
  '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) => {
15907
+ }, 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
15908
  const actualColIdx = stickyLeftCount + relativeIdx;
17702
15909
  return (hAsync("th", { key: col.name, class: {
17703
15910
  th: true,
17704
15911
  [`${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) }))));
15912
+ }, 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
15913
  }), stickyRightCols.map((col, relativeIdx) => {
17707
15914
  const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
17708
15915
  return (hAsync("th", { key: col.name, class: {
@@ -17711,7 +15918,7 @@ class SdThead {
17711
15918
  'sticky-right': true,
17712
15919
  'sticky-right-edge': relativeIdx === 0,
17713
15920
  '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) }))));
15921
+ }, 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
15922
  })))));
17716
15923
  }
17717
15924
  static get watchers() { return {
@@ -17806,10 +16013,10 @@ class SdToast {
17806
16013
  render() {
17807
16014
  const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
17808
16015
  const iconSize = Number(TOAST_LAYOUT.iconSize);
17809
- return (hAsync("div", { key: '77954c9d285339cb48032eec5eca0dcbe308affc', style: {
16016
+ return (hAsync("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
17810
16017
  '--sd-toast-bg': typeConfig.bg,
17811
16018
  '--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() })))));
16019
+ } }, 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
16020
  }
17814
16021
  static get style() { return sdToastCss(); }
17815
16022
  static get cmpMeta() { return {
@@ -18061,7 +16268,7 @@ class SdToastContainer {
18061
16268
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
18062
16269
  const indexMap = new Map();
18063
16270
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
18064
- return (hAsync("div", { key: '5057793be2d6ce213edc84d58f7273248646dc19', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
16271
+ return (hAsync("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
18065
16272
  this.expanded = true;
18066
16273
  this.pauseTimers();
18067
16274
  }, onMouseLeave: () => {
@@ -18219,7 +16426,7 @@ class SdToggle {
18219
16426
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
18220
16427
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
18221
16428
  };
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 })));
16429
+ 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
16430
  }
18224
16431
  static get style() { return sdToggleCss(); }
18225
16432
  static get cmpMeta() { return {
@@ -18346,14 +16553,14 @@ class SdTooltip {
18346
16553
  const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
18347
16554
  const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
18348
16555
  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: {
16556
+ 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
16557
  'sd-floating-menu': true,
18351
16558
  [`sd-floating-menu--${tooltipType}`]: true,
18352
16559
  [`sd-floating-menu--${placement}`]: true,
18353
16560
  }, style: {
18354
16561
  '--sd-floating-bg': typeConfig.bg,
18355
16562
  '--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 }))))));
16563
+ }, 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
16564
  }
18358
16565
  static get style() { return sdTooltipCss(); }
18359
16566
  static get cmpMeta() { return {
@@ -18380,7 +16587,7 @@ class SdTooltip {
18380
16587
  }; }
18381
16588
  }
18382
16589
 
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}`;
16590
+ 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
16591
 
18385
16592
  class SdTr {
18386
16593
  constructor(hostRef) {
@@ -18529,13 +16736,25 @@ class SdTr {
18529
16736
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
18530
16737
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
18531
16738
  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: {
16739
+ const rowStyle = {
16740
+ display: this.isVisible ? '' : 'none',
16741
+ '--table-body-height': `${TABLE_BODY_LAYOUT.default.height}px`,
16742
+ '--table-body-padding-x': `${TABLE_BODY_LAYOUT.paddingX}px`,
16743
+ '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
16744
+ '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
16745
+ '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
16746
+ '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
16747
+ '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
16748
+ '--table-border-color': TABLE_BORDER.color,
16749
+ '--table-border-width': `${TABLE_BORDER.width}px`,
16750
+ };
16751
+ return (hAsync(Host, { key: '33228ee9f020f915e77f9827e9360087fc2cd565', style: rowStyle }, hAsync("tr", { key: '2f308a547ad19584e509543027cf60ff8faec2f8', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { key: '94f50aa6fd31a63d8d99e8c6f25faf8ba6f68ddf', class: {
18533
16752
  'td': true,
18534
16753
  'td--selected': true,
18535
16754
  'sticky-left': true,
18536
16755
  'sticky-left-edge': stickyLeftCount === 0,
18537
16756
  '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) => {
16757
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: 'e8808068b601529c95b8055c16e7af8a746bdccc', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
18539
16758
  if (this.isCovered(idx))
18540
16759
  return null;
18541
16760
  const span = this.getSpanFor(col);
@@ -18606,7 +16825,6 @@ class SdTr {
18606
16825
  }
18607
16826
 
18608
16827
  registerComponents([
18609
- DataTable,
18610
16828
  SdActionModal,
18611
16829
  SdBadge,
18612
16830
  SdBarcodeInput,
@@ -18641,23 +16859,14 @@ registerComponents([
18641
16859
  SdPagination,
18642
16860
  SdPopover,
18643
16861
  SdPortal,
18644
- SdProgress,
18645
16862
  SdRadio,
18646
16863
  SdRadioButton,
18647
16864
  SdRadioGroup,
18648
16865
  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,
16866
+ SdSelectListItem,
16867
+ SdSelectListItemSearch,
16868
+ SdSelectListbox,
16869
+ SdSelectTrigger,
18661
16870
  SdSwitch,
18662
16871
  SdTable,
18663
16872
  SdTabs,