@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.js CHANGED
@@ -136,7 +136,7 @@ var node_crypto = require('node:crypto');
136
136
  const NAMESPACE = 'design-system';
137
137
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
138
138
 
139
- const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:12px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:20px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:12px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:22px;--sd-system-typography-control-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-font-size:16px;--sd-system-typography-control-md-font-weight:500;--sd-system-typography-control-md-text-decoration:none;--sd-system-typography-control-md-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-default-font-weight:400;--sd-system-typography-navigation-default-font-size:12px;--sd-system-typography-navigation-default-line-height:20px;--sd-system-typography-navigation-default-text-decoration:none;--sd-system-typography-navigation-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-bold-font-weight:700;--sd-system-typography-navigation-bold-font-size:12px;--sd-system-typography-navigation-bold-line-height:20px;--sd-system-typography-navigation-bold-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-stack-gap-relaxed:8px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-disabled:#E1E1E1;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-content-primary:#222222;--sd-system-color-content-secondary:#555555;--sd-system-color-content-tertiary:#888888;--sd-system-color-content-quaternary:#AAAAAA;--sd-system-color-content-brand:#005CC9;--sd-system-color-content-subtle:#066D9B;--sd-system-color-content-accent:#0075FF;--sd-system-color-content-danger-default:#E30000;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-warning:#FF6B00;--sd-system-color-content-inverse:#FFFFFF;--sd-system-color-text-disabled:#888888;--sd-system-color-link-accent:#006AC1;--sd-system-color-icon-brand:#025497;--sd-system-color-icon-accent:#0075FF;--sd-system-color-icon-danger:#E30000;--sd-system-color-icon-warning:#FF6B00;--sd-system-color-icon-success:#00973C;--sd-system-color-icon-inverse:#FFFFFF;--sd-system-color-icon-disabled:#BBBBBB;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-border-disabled:#CCCCCC;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-icon-default:#888888;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-strong-dropdown-divider:#006AC1;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-subtle-dropdown-divider:#5CB0F3;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-content:#222222;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-strong-dropdown-divider:#FF7C7C;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-gap:4px;--sd-text-link-text-link-size-icon:16px;--sd-text-link-text-link-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-default-font-size:12px;--sd-text-link-text-link-typography-default-font-weight:500;--sd-text-link-text-link-typography-default-text-decoration:none;--sd-text-link-text-link-typography-default-line-height:20px;--sd-text-link-text-link-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-underline-font-size:12px;--sd-text-link-text-link-typography-underline-font-weight:500;--sd-text-link-text-link-typography-underline-text-decoration:underline;--sd-text-link-text-link-typography-underline-line-height:22px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-bg:#FFFFFF;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:12px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:20px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-font-weight:400;--sd-checkbox-checkbox-typography-font-size:12px;--sd-checkbox-checkbox-typography-line-height:20px;--sd-checkbox-checkbox-typography-text-decoration:none;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-font-weight:400;--sd-radio-radio-typography-font-size:12px;--sd-radio-radio-typography-line-height:20px;--sd-radio-radio-typography-text-decoration:none;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-height:28px;--sd-select-select-radius:4px;--sd-select-select-border-width:1px;--sd-select-select-padding-x:12px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-gap:8px;--sd-select-select-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-typography-font-weight:400;--sd-select-select-typography-font-size:12px;--sd-select-select-typography-line-height:20px;--sd-select-select-typography-text-decoration:none;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-select-select-size-icon:16px;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-text-hint:#555555;--sd-textinput-textinput-text-error-message:#E30000;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-hint-typography-font-weight:400;--sd-textinput-textinput-hint-typography-font-size:12px;--sd-textinput-textinput-hint-typography-line-height:20px;--sd-textinput-textinput-hint-typography-text-decoration:none;--sd-textinput-textinput-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-error-message-typography-font-weight:400;--sd-textinput-textinput-error-message-typography-font-size:12px;--sd-textinput-textinput-error-message-typography-line-height:20px;--sd-textinput-textinput-error-message-typography-text-decoration:none;--sd-textinput-textinput-contents-gap:4px;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-contents-gap:4px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-hint-color:#555555;--sd-number-input-number-input-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-hint-typography-font-weight:400;--sd-number-input-number-input-hint-typography-font-size:12px;--sd-number-input-number-input-hint-typography-line-height:20px;--sd-number-input-number-input-hint-typography-text-decoration:none;--sd-number-input-number-input-error-message-color:#E30000;--sd-number-input-number-input-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-error-message-typography-font-weight:400;--sd-number-input-number-input-error-message-typography-font-size:12px;--sd-number-input-number-input-error-message-typography-line-height:20px;--sd-number-input-number-input-error-message-typography-text-decoration:none;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-filepicker-filepicker-height:28px;--sd-filepicker-filepicker-padding-x:12px;--sd-filepicker-filepicker-gap:8px;--sd-filepicker-filepicker-radius:4px;--sd-filepicker-filepicker-border-width:1px;--sd-filepicker-filepicker-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-typography-font-weight:400;--sd-filepicker-filepicker-typography-font-size:12px;--sd-filepicker-filepicker-typography-line-height:20px;--sd-filepicker-filepicker-typography-text-decoration:none;--sd-filepicker-filepicker-size-icon:16px;--sd-filepicker-filepicker-contents-gap:4px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-sm-date-gap:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-md-date-gap:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-hint:#555555;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-contents-gap:4px;--sd-datepicker-datepicker-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-hint-typography-font-weight:400;--sd-datepicker-datepicker-hint-typography-font-size:12px;--sd-datepicker-datepicker-hint-typography-line-height:20px;--sd-datepicker-datepicker-hint-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-content-default:#888888;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#555555;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-gap:12px;--sd-popover-popover-body-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-bg:#07284A;--sd-popover-popover-title-color:#FFFFFF;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-description-color:#FFFFFF;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-color:#D8D8D8;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:700;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap:24px;--sd-tab-tab-sub-content-gap:4px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
139
+ const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:12px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:20px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:12px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:22px;--sd-system-typography-control-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-font-size:16px;--sd-system-typography-control-md-font-weight:500;--sd-system-typography-control-md-text-decoration:none;--sd-system-typography-control-md-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-default-font-weight:400;--sd-system-typography-navigation-default-font-size:12px;--sd-system-typography-navigation-default-line-height:20px;--sd-system-typography-navigation-default-text-decoration:none;--sd-system-typography-navigation-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-bold-font-weight:700;--sd-system-typography-navigation-bold-font-size:12px;--sd-system-typography-navigation-bold-line-height:20px;--sd-system-typography-navigation-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-stack-gap-relaxed:8px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-disabled:#E1E1E1;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-content-primary:#222222;--sd-system-color-content-secondary:#555555;--sd-system-color-content-tertiary:#888888;--sd-system-color-content-quaternary:#AAAAAA;--sd-system-color-content-brand:#005CC9;--sd-system-color-content-subtle:#066D9B;--sd-system-color-content-accent:#0075FF;--sd-system-color-content-danger-default:#E30000;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-danger-light:#FB4444;--sd-system-color-content-warning:#FF6B00;--sd-system-color-content-inverse:#FFFFFF;--sd-system-color-text-disabled:#888888;--sd-system-color-link-accent:#006AC1;--sd-system-color-icon-brand:#025497;--sd-system-color-icon-accent:#0075FF;--sd-system-color-icon-danger:#E30000;--sd-system-color-icon-warning:#FF6B00;--sd-system-color-icon-success:#00973C;--sd-system-color-icon-inverse:#FFFFFF;--sd-system-color-icon-disabled:#BBBBBB;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-border-disabled:#CCCCCC;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-icon-default:#888888;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-strong-dropdown-divider:#006AC1;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-subtle-dropdown-divider:#5CB0F3;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-content:#222222;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-strong-dropdown-divider:#FF7C7C;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-gap:4px;--sd-text-link-text-link-size-icon:16px;--sd-text-link-text-link-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-default-font-size:12px;--sd-text-link-text-link-typography-default-font-weight:500;--sd-text-link-text-link-typography-default-text-decoration:none;--sd-text-link-text-link-typography-default-line-height:20px;--sd-text-link-text-link-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-typography-underline-font-size:12px;--sd-text-link-text-link-typography-underline-font-weight:500;--sd-text-link-text-link-typography-underline-text-decoration:underline;--sd-text-link-text-link-typography-underline-line-height:22px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-bg:#FFFFFF;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:12px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:20px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-font-weight:400;--sd-checkbox-checkbox-typography-font-size:12px;--sd-checkbox-checkbox-typography-line-height:20px;--sd-checkbox-checkbox-typography-text-decoration:none;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-font-weight:400;--sd-radio-radio-typography-font-size:12px;--sd-radio-radio-typography-line-height:20px;--sd-radio-radio-typography-text-decoration:none;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-height:28px;--sd-select-select-radius:4px;--sd-select-select-border-width:1px;--sd-select-select-padding-x:12px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-gap:8px;--sd-select-select-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-typography-font-weight:400;--sd-select-select-typography-font-size:12px;--sd-select-select-typography-line-height:20px;--sd-select-select-typography-text-decoration:none;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-select-select-size-icon:16px;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-text-hint:#555555;--sd-textinput-textinput-text-error-message:#E30000;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-hint-typography-font-weight:400;--sd-textinput-textinput-hint-typography-font-size:12px;--sd-textinput-textinput-hint-typography-line-height:20px;--sd-textinput-textinput-hint-typography-text-decoration:none;--sd-textinput-textinput-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-error-message-typography-font-weight:400;--sd-textinput-textinput-error-message-typography-font-size:12px;--sd-textinput-textinput-error-message-typography-line-height:20px;--sd-textinput-textinput-error-message-typography-text-decoration:none;--sd-textinput-textinput-contents-gap:4px;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-contents-gap:4px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-hint-color:#555555;--sd-number-input-number-input-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-hint-typography-font-weight:400;--sd-number-input-number-input-hint-typography-font-size:12px;--sd-number-input-number-input-hint-typography-line-height:20px;--sd-number-input-number-input-hint-typography-text-decoration:none;--sd-number-input-number-input-error-message-color:#E30000;--sd-number-input-number-input-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-error-message-typography-font-weight:400;--sd-number-input-number-input-error-message-typography-font-size:12px;--sd-number-input-number-input-error-message-typography-line-height:20px;--sd-number-input-number-input-error-message-typography-text-decoration:none;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-filepicker-filepicker-height:28px;--sd-filepicker-filepicker-padding-x:12px;--sd-filepicker-filepicker-gap:8px;--sd-filepicker-filepicker-radius:4px;--sd-filepicker-filepicker-border-width:1px;--sd-filepicker-filepicker-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-typography-font-weight:400;--sd-filepicker-filepicker-typography-font-size:12px;--sd-filepicker-filepicker-typography-line-height:20px;--sd-filepicker-filepicker-typography-text-decoration:none;--sd-filepicker-filepicker-size-icon:16px;--sd-filepicker-filepicker-contents-gap:4px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-sm-date-gap:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-md-date-gap:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-hint:#555555;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-contents-gap:4px;--sd-datepicker-datepicker-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-hint-typography-font-weight:400;--sd-datepicker-datepicker-hint-typography-font-size:12px;--sd-datepicker-datepicker-hint-typography-line-height:20px;--sd-datepicker-datepicker-hint-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-content-default:#888888;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#555555;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-gap:12px;--sd-popover-popover-body-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-bg:#07284A;--sd-popover-popover-title-color:#FFFFFF;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-description-color:#FFFFFF;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-color:#D8D8D8;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:700;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap:24px;--sd-tab-tab-sub-content-gap:4px;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-dense-padding-y:6px;--sd-table-table-body-padding-x:16px;--sd-table-table-body-frame-padding:8px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-default:#E1E1E1;--sd-table-table-border-width-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding:8px;--sd-table-table-key-vlaue-height:44px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
140
140
 
141
141
  /*
142
142
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5209,116 +5209,6 @@ var setScopedSSR = (opts) => {
5209
5209
  var needsScopedSSR = () => scopedSSR;
5210
5210
  var scopedSSR = false;
5211
5211
 
5212
- const tableTestCss = () => `:host{display:block}.table-wrapper{width:100%;overflow-x:auto}.templates-slot{display:none}.data-table{width:100%;border-collapse:collapse;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;font-size:14px}.data-table th,.data-table td{padding:12px 16px;text-align:left;vertical-align:middle}.data-table th{font-weight:600;background-color:#f8f9fa;color:#333}.data-table.bordered th,.data-table.bordered td{border:1px solid #dee2e6}.data-table.striped tbody tr:nth-child(odd){background-color:#f8f9fa}.data-table tbody tr:hover{background-color:#e9ecef}.data-table .cell-flex{display:flex;align-items:center;gap:8px}.data-table .cell-image{width:24px;height:16px;object-fit:cover;border-radius:2px}`;
5213
-
5214
- class DataTable {
5215
- constructor(hostRef) {
5216
- registerInstance(this, hostRef);
5217
- this.tableReady = createEvent(this, "tableReady", 7);
5218
- }
5219
- get el() { return getElement(this); }
5220
- /** Column definitions array */
5221
- columns = [];
5222
- /** Row data array */
5223
- rows = [];
5224
- /** Show cell borders */
5225
- bordered = true;
5226
- /** Alternate row colors */
5227
- striped = false;
5228
- cellRenderers = new Map();
5229
- headerRenderers = new Map();
5230
- tableReady;
5231
- dataChanged() {
5232
- this.tableReady.emit();
5233
- }
5234
- componentDidLoad() {
5235
- this.tableReady.emit();
5236
- }
5237
- async setCellRenderer(field, renderer) {
5238
- this.cellRenderers = new Map(this.cellRenderers).set(field, renderer);
5239
- }
5240
- async setHeaderRenderer(field, renderer) {
5241
- this.headerRenderers = new Map(this.headerRenderers).set(field, renderer);
5242
- }
5243
- async removeCellRenderer(field) {
5244
- const newMap = new Map(this.cellRenderers);
5245
- newMap.delete(field);
5246
- this.cellRenderers = newMap;
5247
- }
5248
- async clearAllRenderers() {
5249
- this.cellRenderers = new Map();
5250
- this.headerRenderers = new Map();
5251
- }
5252
- renderCellContent(column, row, rowIndex) {
5253
- const value = row[column.field];
5254
- const renderer = this.cellRenderers.get(column.field);
5255
- if (renderer) {
5256
- const html = renderer({ field: column.field, value, row, rowIndex });
5257
- return hAsync("span", { class: "cell-content", innerHTML: html });
5258
- }
5259
- const template = this.el.querySelector(`[slot="cell-${column.field}"]`);
5260
- if (template) {
5261
- const html = this.processTemplate(template.innerHTML, { value, row, rowIndex });
5262
- return hAsync("span", { class: "cell-content", innerHTML: html });
5263
- }
5264
- return hAsync("span", { class: "cell-content" }, value);
5265
- }
5266
- renderHeaderContent(column) {
5267
- const renderer = this.headerRenderers.get(column.field);
5268
- if (renderer) {
5269
- const html = renderer({ field: column.field, column });
5270
- return hAsync("span", { innerHTML: html });
5271
- }
5272
- const template = this.el.querySelector(`[slot="header-${column.field}"]`);
5273
- if (template) {
5274
- return hAsync("span", { innerHTML: template.innerHTML });
5275
- }
5276
- return column.header || column.field;
5277
- }
5278
- processTemplate(html, data) {
5279
- return html
5280
- .replace(/\{\{value\}\}/g, this.escapeHtml(String(data.value ?? '')))
5281
- .replace(/\{\{rowIndex\}\}/g, String(data.rowIndex))
5282
- .replace(/\{\{row\.(\w+)\}\}/g, (_, prop) => this.escapeHtml(String(data.row[prop] ?? '')));
5283
- }
5284
- escapeHtml(str) {
5285
- const el = document.createElement('div');
5286
- el.textContent = str;
5287
- return el.innerHTML;
5288
- }
5289
- render() {
5290
- return (hAsync("div", { key: 'a34267f6b11cdd0dff53bfa3da62b7a47934c73b', class: "table-wrapper" }, hAsync("table", { key: 'b23ac2cd9a785d8fc89c09a04a6aa29a63e6d2b4', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, hAsync("thead", { key: 'e08ff945e40f3ec6db10285840d4185d110a1dc0' }, hAsync("tr", { key: 'ffe2e7253865f5a650611e2859f979d0204fca2a' }, this.columns.map(column => (hAsync("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), hAsync("tbody", { key: '2d47105abba4eecad71b549282650b7f2b056b4c' }, this.rows.map((row, rowIndex) => (hAsync("tr", { key: rowIndex }, this.columns.map(column => (hAsync("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), hAsync("div", { key: '99fe2715e69abf50f69a844e76a3ad422f5b870b', class: "templates-slot", hidden: true }, hAsync("slot", { key: '8c56201e8edb251c5f7494e00acdc5e5fbb67d00' }))));
5291
- }
5292
- static get watchers() { return {
5293
- "columns": [{
5294
- "dataChanged": 0
5295
- }],
5296
- "rows": [{
5297
- "dataChanged": 0
5298
- }]
5299
- }; }
5300
- static get style() { return tableTestCss(); }
5301
- static get cmpMeta() { return {
5302
- "$flags$": 777,
5303
- "$tagName$": "table-test",
5304
- "$members$": {
5305
- "columns": [16],
5306
- "rows": [16],
5307
- "bordered": [4],
5308
- "striped": [4],
5309
- "cellRenderers": [32],
5310
- "headerRenderers": [32],
5311
- "setCellRenderer": [64],
5312
- "setHeaderRenderer": [64],
5313
- "removeCellRenderer": [64],
5314
- "clearAllRenderers": [64]
5315
- },
5316
- "$listeners$": undefined,
5317
- "$lazyBundleId$": "-",
5318
- "$attrsToReflect$": []
5319
- }; }
5320
- }
5321
-
5322
5212
  const modal$1 = {
5323
5213
  radius: "8",
5324
5214
  confirm: {
@@ -5448,7 +5338,7 @@ class SdActionModal {
5448
5338
  if (this.height != null && this.height !== '') {
5449
5339
  sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
5450
5340
  }
5451
- return (hAsync("div", { key: 'c8fdd9cdb0ce6850b900744f087ace5739b13e1f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: 'a8ba3d0c496f7fbf0291818c5136e466dfbe3cab', class: "sd-action-modal__header" }, hAsync("h2", { key: 'df021377c4368ecf2316a019dbf3126923912ea2', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: '19f226d875e53f12192975165f6c0686120692c1', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '859a677df07d6d869fbebcadfa59aab54da08cab', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '3fab2e805587a3bfe450696a568c67ff08a7920a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '94911045fe85bd87a9c2ba84ae2e8ff57b1f91ad', class: "sd-action-modal__body" }, hAsync("slot", { key: '12430e8a43dbe76fde667b2ac5b79fa5fae89248', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: 'd90243f5ce989e19e8f1f2b0d4dbab426908d706', class: "sd-action-modal__footer" }, hAsync("div", { key: '512b80f97adbe1ba36805418476ff2e611855338', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '9ee6b21a2e004074f1e468893ae5831eb440501b', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: '48bd4e35cc5ae630989d057f41df028824e9da78', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
5341
+ return (hAsync("div", { key: '8aa9962dd66af45cbb9f7a16e087b8e5553692b5', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: 'fe47461827e9ded9a055134869744b9ae57be7bd', class: "sd-action-modal__header" }, hAsync("h2", { key: '911619c8669b1ea109bdc35aa8c6850eade4c49e', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'af2959f85fbedaa0f2f04d3c0bfb110338ab7c30', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '21801f18cce8eb0fec750ed4dbbe7eb78b6bba89', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '6b3cbb9f3bc8566bde5a3245384bab03b71ba41f', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '0fb3e066792e018282644123978bb395a56cdf66', class: "sd-action-modal__body" }, hAsync("slot", { key: 'ba8436ff647e422602b92ba982145e4db9366b1e', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '72a21271d7f9301d3bb4e6beb8f66b33b85554e2', class: "sd-action-modal__footer" }, hAsync("div", { key: 'b53076fddc6a11bd64ff27bdf63577cc6f22c4bf', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: 'bdea9bd98cd8e5a3f0fec66c7d1424b86c7995d5', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: 'c2a222662a5f06dfc18928059e68837ddb0b5e95', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
5452
5342
  }
5453
5343
  static get style() { return sdActionModalCss(); }
5454
5344
  static get cmpMeta() { return {
@@ -5501,7 +5391,7 @@ class SdBadge {
5501
5391
  label = '';
5502
5392
  render() {
5503
5393
  const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
5504
- return (hAsync("div", { key: '6050de370a7c9cbad2c4eb2d9e19180d54bcf64f', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '34c8fdf04e61f9fb16b651764e4cb13b2c6ec0c5', class: "sd-badge__dot" }), hAsync("div", { key: '03ceee1c7d54589dfa61aef8e80be5799a816a66', class: "sd-badge__label" }, this.label)));
5394
+ return (hAsync("div", { key: '3737fa6c3023e7adaaf3ae4086efe6d9acadcb67', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'f13d60974520124abeb4fcd49fed638002674267', class: "sd-badge__dot" }), hAsync("div", { key: '29c528444f3e4e4b41315586f7d31e2e828400df', class: "sd-badge__label" }, this.label)));
5505
5395
  }
5506
5396
  static get style() { return sdBadgeCss(); }
5507
5397
  static get cmpMeta() { return {
@@ -5711,7 +5601,7 @@ class SdBarcodeInput {
5711
5601
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
5712
5602
  '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
5713
5603
  };
5714
- return (hAsync("sd-field", { key: 'c537aef39f971023f90d7d0d7ad6cb6819b06b48', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '2ca7874dd2d9965f3246746a6f0311ce6cc6fe8e', class: "sd-barcode-input__content" }, hAsync("slot", { key: 'dfed2f18620c5ee6902e1f2083b2e046190ad852', name: "prefix" }), hAsync("input", { key: '80dbd54234b7a1b0db8ae8b3165653f63e8c9039', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'd0b0c22126506e16b23ce9cce1a280366d7d4f4c', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '41ae6b492877ca5c3aa1083372878c9c41f694e3', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5604
+ return (hAsync("sd-field", { key: '359bac03c40af3bfc067957220124c00d0f542a1', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '0512c6c4ba9f778c65d6aaf9fd441e66d3e09cf7', class: "sd-barcode-input__content" }, hAsync("slot", { key: '47f7ff7b11b0f10a6f6efce02473c63a02ab9129', name: "prefix" }), hAsync("input", { key: '3f9150a1f188339a9d119475070eb53bca76b61a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'e193c4921de2cd71962841745e163620b3eac436', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '4ca22273d2ef5c79d439c9469bf8dbef5439e685', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5715
5605
  if (this.disabled)
5716
5606
  return;
5717
5607
  this.internalValue = '';
@@ -6438,13 +6328,13 @@ class SdButtonV2 {
6438
6328
  const hasLabel = Boolean(this.label);
6439
6329
  const iconOnly = !this.label && Boolean(this.icon) !== Boolean(this.rightIcon);
6440
6330
  const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
6441
- return (hAsync("button", { key: '19a9be4f92af097e104f64e890203aab3f897c61', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
6331
+ return (hAsync("button", { key: 'e3e2074fbe2b48117d5834efac7ff3036757aab3', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
6442
6332
  '--sd-button-v2-bg': config.color,
6443
6333
  '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
6444
6334
  '--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
6445
6335
  '--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
6446
6336
  '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
6447
- }, onClick: this.handleClick }, hAsync("span", { key: '813e88dce8e00e983caa70da63fe7766ee115b68', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: '31b6980a27ddbeff51b1f28e13b197164ab3175f', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && hAsync("span", { key: '85737212b55b6d48c9c17312f0ae7a419298da4c', class: "sd-button-v2__label" }, this.label), this.rightIcon && (hAsync("sd-icon", { key: 'ef8b914dec71d6857c26a26be74e63d9440a46de', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
6337
+ }, onClick: this.handleClick }, hAsync("span", { key: '90ea3bf42c9e16c836c6fdfdf26a74c8a848c31b', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: 'b9f4a1c42ae866aac1f65f4bbedb282ae0c10c72', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && hAsync("span", { key: '5e5dfbabdbec86c2da625c6a70fcda10303d0e50', class: "sd-button-v2__label" }, this.label), this.rightIcon && (hAsync("sd-icon", { key: 'f1c3a74b6d7e83fa755c97f83c6d97dea8411537', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
6448
6338
  }
6449
6339
  static get style() { return sdButtonV2Css(); }
6450
6340
  static get cmpMeta() { return {
@@ -6682,7 +6572,7 @@ class SdCard {
6682
6572
  bordered = false;
6683
6573
  sdClass = '';
6684
6574
  render() {
6685
- return (hAsync(Fragment, { key: '299b67c4e5a95d03c67bfe7a7cc13cfda642e494' }, hAsync("div", { key: '44630cec810c1ee0cc6526764adbae866f3d68f0', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'bbcb7e2332b1772cff4fd3b132e6378f6fbc0832' }))));
6575
+ return (hAsync(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, hAsync("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
6686
6576
  }
6687
6577
  static get style() { return sdCardCss(); }
6688
6578
  static get cmpMeta() { return {
@@ -6856,6 +6746,9 @@ class SdCheckbox {
6856
6746
  valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
6857
6747
  newValue = Array.from(valueSet);
6858
6748
  }
6749
+ else if (this.value === null) {
6750
+ newValue = false;
6751
+ }
6859
6752
  else {
6860
6753
  newValue = !this.isChecked;
6861
6754
  }
@@ -6883,13 +6776,13 @@ class SdCheckbox {
6883
6776
  '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
6884
6777
  '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
6885
6778
  };
6886
- return (hAsync("label", { key: '1a1c4dac0a2ce24ae51ce0baba74a7add387aa2f', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '4a45bc9bbaaf6ddaebf3445045ab7b1f789f81d5', type: "checkbox", ref: el => {
6779
+ return (hAsync("label", { key: '0e4a142753f8ceda6356c184f1f227e9f11b8a43', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '53f7bac2fbc2c197ddcc2bb3cd0779598155af4c', type: "checkbox", ref: el => {
6887
6780
  this.inputEl = el;
6888
- }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '7d8ae7276470bf4543cdee1a0b25793f07d23c66', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
6781
+ }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '0725d9e2ed16bec52b6340c9633ffed021558560', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
6889
6782
  ? CHECKBOX_COLORS.checked.iconDisabled
6890
6783
  : this.inverse
6891
6784
  ? CHECKBOX_COLORS.checked.iconInverse
6892
- : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: 'd791d977073b0916917c7ce770cf73c1ff81f3bd', class: "sd-checkbox__label" }, this.label)));
6785
+ : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: 'dcb8b972e88aa06d0a338ce8d2e2b86a0fbd8f3f', class: "sd-checkbox__label" }, this.label)));
6893
6786
  }
6894
6787
  static get watchers() { return {
6895
6788
  "value": [{
@@ -7203,7 +7096,7 @@ class SdChip {
7203
7096
  '--sd-chip-font-weight': typography.fontWeight,
7204
7097
  '--sd-chip-line-height': typography.lineHeight,
7205
7098
  };
7206
- return (hAsync("span", { key: '7d84dd478510c7e144fd049028f2f0a70a909016', class: {
7099
+ return (hAsync("span", { key: 'a821268b6bc2d04bd311b238009b750424e04e72', class: {
7207
7100
  'sd-chip': true,
7208
7101
  [`sd-chip--${state}`]: true,
7209
7102
  'sd-chip--disabled': this.disabled,
@@ -7285,7 +7178,13 @@ const color = {
7285
7178
  secondary: "#555555",
7286
7179
  tertiary: "#888888",
7287
7180
  inverse: "#FFFFFF"
7288
- }};
7181
+ },
7182
+ blue: {
7183
+ strong: "#0075FF"},
7184
+ darkblue: {
7185
+ strong: "#006AC1"},
7186
+ grey: {
7187
+ strong: "#737373"}};
7289
7188
  var systemTokens = {
7290
7189
  color: color
7291
7190
  };
@@ -7348,7 +7247,7 @@ class SdCircleProgress {
7348
7247
  }
7349
7248
  const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
7350
7249
  const showPercent = !this.indeterminate;
7351
- return (hAsync(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, hAsync("svg", { key: '34117c89eb180370a215807e614ad08f4f72b517', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '5ae0a53ce10bd5a8b2f316ebd00d3ee28c4336d6', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', class: "sd-circle-progress__label" }, this.label)));
7250
+ return (hAsync(Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, hAsync("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
7352
7251
  }
7353
7252
  static get style() { return sdCircleProgressCss(); }
7354
7253
  static get cmpMeta() { return {
@@ -7459,9 +7358,9 @@ class SdConfirmModal {
7459
7358
  render() {
7460
7359
  const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
7461
7360
  const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
7462
- return (hAsync("div", { key: 'e4fa59bb7bfb335bc16f4e13e49a10c517e2520c', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'ada7366093d2453dc354b534433647a07cecd632', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: 'a3578b9366349289866e312929f53cefe3b9fcd7', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'c1880435ede221bfbfad4df31b222c486471d364', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: '1f1edc065f2985c3ad9d3dd72db74a285474bc7a', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'a198f9d6d64f19919c11bb101a192e04043c7e6f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: '30b62d85ce7fe447643fbe19379cc39ccc44b9d0', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
7361
+ return (hAsync("div", { key: '4ef44b1b2a86914eae3fc59e3c383b12646d1d0c', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'aa62624aaf76a23eb4f1d30b846e6054f3cf001c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: 'd1329b8e71d455357790a4aa5f73547142830532', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '2c5e0f902327c5eb663e6ccc5057e22e2be11c03', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: '1917ef85f9f06de3dd321d664d4022dd4a1524ff', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'afa7e6671f4849b7a90317664d07d3c04178c554', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: 'd4c06bfdd2222212b1cf8e3ec86ccaca4c394394', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
7463
7362
  this.customContentRef = el;
7464
- } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '4d45291fafdd6dc5d70e69969cad5d3d7ea19bcc', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: 'f7ff30646b1bb772d8f41044fab5642408df25d5', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: '1750bfe43e9d00ff8a46777000c4ed8728502bb5', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button-v2", { key: 'ca0f57d4bdfe8f3a337de8dbe05b98e49e3f5a18', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
7363
+ } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '8af201f6b6b08991ba31db2f2e59ee44a7b10d50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '733f478a57a68bd9d4cc6563558bc0fafbfa5b9a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: 'a7be74a833fbd012d14e79b570a4d97e3a495a52', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button-v2", { key: 'e09be98a918aafd291a7b12c221b70e72ba14ab9', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
7465
7364
  }
7466
7365
  static get style() { return sdConfirmModalCss(); }
7467
7366
  static get cmpMeta() { return {
@@ -7819,9 +7718,9 @@ class SdDatePicker {
7819
7718
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
7820
7719
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
7821
7720
  };
7822
- return (hAsync("sd-field", { key: '97dcd4d3065ba7c0fa587b3d533dcda82b87c188', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '9c0a6874eb6fbf3e8a928048f189d3b139e385df', class: "sd-date-picker", ref: el => {
7721
+ return (hAsync("sd-field", { key: 'd55b2123cc862d5f12fdd429b02b622946b58cc4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '79e47e4e02e8b30dc2651a9c4aab3950a8662f52', class: "sd-date-picker", ref: el => {
7823
7722
  this.triggerRef = el;
7824
- } }, hAsync("sd-date-picker-trigger", { key: 'e54065e86cb36c8abed1041a2d13edcbba861d8f', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '96c2aa277f54315ac2f6e29b861ebb94b3cc4f75', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: 'ea2513fb3d150a53895b6f657a7a6acc5541045f', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7723
+ } }, hAsync("sd-date-picker-trigger", { key: '7b09873b1e58aed36d4fb0dadb02d21ea6c2b309', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'fd60a9df30dfc459798a8e537acdf16ed9f94844', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: '0478f726cb51fe533b829f3eb0ce46d2fbf0ba94', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7825
7724
  }
7826
7725
  static get watchers() { return {
7827
7726
  "isOpen": [{
@@ -8003,7 +7902,7 @@ class SdDatePickerCalendar {
8003
7902
  '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
8004
7903
  '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
8005
7904
  };
8006
- return (hAsync("div", { key: 'ac86be94b03ba15d7dfd885f96fb29a988468e30', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '64a116ef69725d8f51eed4b54ed0f73e1dc23f9d', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: 'f0372d3d91dc9d1917ada3677baa4841074d6e22', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '133611ecd17975064fce932a6cc6c23478d93c3a', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '4445d069e21ac31b46c62ee8d7c213b72c7f787c', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '407f906335b31b5c70018f53a21d0e7d0cbc39ee', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: 'ddf5d7348d5833988b5a12ece9209624842e40ee', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '19a362b93db20bfaf63b6f8552a60d9baf3d7c24', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '9618b3ebfadf65a7d8abfa8a7360b8fcccbf68b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '2b989a40ad784a08f42a6571817431c028720564', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '60ab56cdfbd93e2cd0fa4453d44e540393ac5296', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: '337ad71a09089b1771e734aa591b243abe226d92', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), hAsync("div", { key: 'baf0ad26ee64044f0af3b8126efaafe94feba8a4', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
7905
+ return (hAsync("div", { key: 'baeaf5925dd87084b4f22445cc2fa6fe879d8faf', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '784e0bb6698dc097d8fa9b136ec8bc1d82cfe798', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: 'e42d77c2a1c5d7c23e058b111ed87d3d27c9b465', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: 'fd5573590ca5c7aaf5b07a594d65f4f168d526d7', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: 'd8d2f3fcb2dca348c99f5a461260278ddf1ab16b', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: 'f134fdd299bcead5d9ce594355f1c58be057fbbe', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '14ab983354ded802bb715516872b0148acc3cd66', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: 'f8b0754ff487c944cf95fcb2fd05c2ca596b3107', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '47d95d368b04f1ff81c416d93ba3bb9a5481f3cb', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'baf40a29a0aacd3c868c0ca63035c09080f412af', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '4b8f189022d7c61072f07b23c5576410183bc801', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'c6b4251396b957905e0462a62ca5b8475c375dd6', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), hAsync("div", { key: '76a1fe94ca8943f8cf0e7be30b8a9838a9cd22ef', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
8007
7906
  const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
8008
7907
  const isToday = cell.inCurrentMonth && today === cell.date;
8009
7908
  const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -8074,10 +7973,10 @@ class SdDatePickerTrigger {
8074
7973
  ? DATEPICKER_COLORS.icon.disabled
8075
7974
  : DATEPICKER_COLORS.icon.default,
8076
7975
  };
8077
- return (hAsync("div", { key: '48f426459dfa50a5fab8e8e9c597b9a3c3f011c1', class: {
7976
+ return (hAsync("div", { key: 'f541c11d4e7385993628e10f0eeb7a339f80e1f6', class: {
8078
7977
  'sd-date-picker-trigger': true,
8079
7978
  'sd-date-picker-trigger--disabled': this.disabled,
8080
- }, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: 'd5309ad89fe5232fea4a086784cfd28f920450c0', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '6885fdfce1384cc43cded08a40889edb15ba1108', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
7979
+ }, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: '19c51b2ae2dc354010f6727048fd7a64c17ed36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '73a6dd7cd398202edabecd348a4856315e077088', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
8081
7980
  }
8082
7981
  static get style() { return sdDatePickerTriggerCss(); }
8083
7982
  static get cmpMeta() { return {
@@ -8497,7 +8396,7 @@ class SdDateRangePickerCalendar {
8497
8396
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
8498
8397
  '--range-divider': RANGE_LAYOUT.divider,
8499
8398
  };
8500
- return (hAsync(Fragment, { key: 'b420e317ccefa8b143d781d916c0a60c8be15d2f' }, hAsync("div", { key: 'ec537bf3ed58f6b18e80f885d78d8e5dcca7ecfe', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '70afdc7311c5707c6d639034fa14c6f5ca2aa3d2', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'a400c8d9d3a0b1a4e13e7d4de004da550e91916f', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
8399
+ return (hAsync(Fragment, { key: 'acc32d9c349c4cee32bb923ce66d17122527b524' }, hAsync("div", { key: 'bd579429ae609c3ff21a542bf69c1dc9a907846a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '8a46d922fcaa09bd7f778d00e77324d1710b92c7', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '8234838995f1e5d945f85169e702cb0b32018f36', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
8501
8400
  }
8502
8401
  static get watchers() { return {
8503
8402
  "value": [{
@@ -8852,7 +8751,7 @@ class SdDropdownButton extends BaseDropdownEvent {
8852
8751
  }
8853
8752
  render() {
8854
8753
  const { config, preset } = this.resolvedConfig;
8855
- return (hAsync("div", { key: '3a9e74c689c0345c89dbaeba5814164b72fe7108', class: "sd-dropdown-button" }, hAsync("button", { key: '1633f3a0348082ec2433a6a1e7c41a64a797a725', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
8754
+ return (hAsync("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, hAsync("button", { key: '4bd3e86eec90698188a834eb35ff922dee7d1855', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
8856
8755
  '--sd-dropdown-button-bg': config.color,
8857
8756
  '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
8858
8757
  '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -8862,10 +8761,10 @@ class SdDropdownButton extends BaseDropdownEvent {
8862
8761
  '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
8863
8762
  '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
8864
8763
  '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
8865
- } }, hAsync("span", { key: '7378e3aa3c4cf2991f3a92511f10ca1834af9563', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: 'd5b59ccaad1985e3a50bb9a53b0a156a1e2e28a9', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'a24ed74d95ac1866abf9f3ed7a1c4b7bfe2c56c8', class: {
8764
+ } }, hAsync("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
8866
8765
  'sd-dropdown-button__trigger-icon': true,
8867
8766
  'sd-dropdown-button__trigger-icon--open': this.isOpen,
8868
- }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '7cb8cf5665f3ee2e252f4c0471daee31f4af0c7b', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
8767
+ }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
8869
8768
  }
8870
8769
  static get watchers() { return {
8871
8770
  "isOpen": [{
@@ -8965,14 +8864,11 @@ const FIELD_LABEL_SIZE_MAP = {
8965
8864
  const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
8966
8865
 
8967
8866
  const FORM_PARENT_TAGS = [
8968
- 'sd-select',
8969
- 'sd-select-multiple',
8970
- 'sd-select-multiple-group',
8971
8867
  'sd-input',
8972
8868
  'sd-barcode-input',
8973
8869
  'sd-textarea',
8974
8870
  'sd-number-input',
8975
- 'sd-select-v2',
8871
+ 'sd-select',
8976
8872
  'sd-file-picker',
8977
8873
  'sd-date-picker',
8978
8874
  'sd-date-range-picker',
@@ -9136,20 +9032,20 @@ class SdField {
9136
9032
  : {}),
9137
9033
  }
9138
9034
  : {};
9139
- return (hAsync("div", { key: '218df97b257b97f4801a31a11d4cf2072f981f07', class: {
9035
+ return (hAsync("div", { key: 'f7cec98818159adf5fd398bd15547ed1ec555092', class: {
9140
9036
  'sd-field': true,
9141
9037
  'sd-field--has-label': !!this.label,
9142
9038
  'sd-field--has-addon': !!addon,
9143
9039
  [this.fieldStatus]: !!this.fieldStatus,
9144
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '66fb430b166850197649a46cd07068782636e932', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'f9dafcf19258a3253de84d35a7fd368d87232f95', class: "sd-field__main", style: this.width
9040
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '2d6ffefc9211137dc215686874060b1d5067031d', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '2163413b937af3c1874f41bc2581a0304b7d069a', class: "sd-field__main", style: this.width
9145
9041
  ? {
9146
9042
  width: typeof this.width === 'number' ? `${this.width}px` : this.width,
9147
9043
  flex: 'none',
9148
9044
  }
9149
- : {} }, hAsync("div", { key: '1f4176fb04ba648fc2971904daa88974a4526868', class: {
9045
+ : {} }, hAsync("div", { key: '0dbb6cbe768bac1c64d72d37d270805e16936e24', class: {
9150
9046
  'sd-field__control': true,
9151
9047
  'sd-field__control--has-addon': !!addon,
9152
- } }, addon && hAsync("div", { key: 'fd90999129ed8ab6b9870d73083048de8e8987f6', class: "sd-field__addon" }, addon), hAsync("slot", { key: '9dbf3d99538016095c436619f9ad20f64fa20834' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
9048
+ } }, addon && hAsync("div", { key: '8b4bfbf6ad67084a0bc9c3ff6789936ad895e3c5', class: "sd-field__addon" }, addon), hAsync("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
9153
9049
  }
9154
9050
  renderLabel(label) {
9155
9051
  if (!label)
@@ -9295,7 +9191,7 @@ class SdFilePicker {
9295
9191
  if (this.fileInputRef) {
9296
9192
  this.fileInputRef.value = '';
9297
9193
  }
9298
- await this.formField?.sdReset();
9194
+ await this.formField?.sdResetValidation();
9299
9195
  }
9300
9196
  async sdResetValidate() {
9301
9197
  await this.formField?.sdResetValidation();
@@ -9628,7 +9524,7 @@ class SdFloatingPopover {
9628
9524
  }
9629
9525
  }
9630
9526
  render() {
9631
- return hAsync("slot", { key: '2ee14400df156cb766c0f88b77bc232263b3c7e2' });
9527
+ return hAsync("slot", { key: '2383aafb9b01881f06e4fc97c5903c19453b8b4c' });
9632
9528
  }
9633
9529
  static get style() { return sdFloatingPortalCss(); }
9634
9530
  static get cmpMeta() { return {
@@ -9901,7 +9797,7 @@ class SdGhostButton {
9901
9797
  ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
9902
9798
  : GHOST_BUTTON_CONTENT_COLORS[this.intent];
9903
9799
  const accessibleName = this.ariaLabel.trim() || undefined;
9904
- return (hAsync("button", { key: 'd7f6fcbed3526ffb8b90b205dbe2bbf55abf03a0', class: {
9800
+ return (hAsync("button", { key: '57793e0911fc49c62ab627bd7234caf9c0a04097', class: {
9905
9801
  'sd-ghost-button': true,
9906
9802
  'sd-ghost-button--disabled': this.disabled,
9907
9803
  }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -9910,7 +9806,7 @@ class SdGhostButton {
9910
9806
  '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
9911
9807
  '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
9912
9808
  '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
9913
- }, onClick: this.handleClick }, hAsync("sd-icon", { key: '9efc3a3fbf7878a9a50b2efbf054b335d9cddfe0', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9809
+ }, onClick: this.handleClick }, hAsync("sd-icon", { key: 'cf81a34495eacad4052ad7bbd5cba837b905610b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
9914
9810
  }
9915
9811
  static get style() { return sdGhostButtonCss(); }
9916
9812
  static get cmpMeta() { return {
@@ -10821,12 +10717,12 @@ class SdInput {
10821
10717
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
10822
10718
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
10823
10719
  };
10824
- return (hAsync("sd-field", { key: 'ff73dfa4d23c7bf1a29f853d50e0d31bddb094ea', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '0a986cccfbd55984a51676cbf5393634819e766d', class: "sd-input__content" }, hAsync("slot", { key: '068bfd70601f3b191a51bb45ac02679acf99a069', name: "prefix" }), hAsync("input", { key: '54dbd7b7e4bffcfa25b9d68800fb334c0dfa0da0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'c0e03839176c6612eb8b0532bce3341de3db90c3', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '0019f58900c721c52216f7686b8b198f855c76ec', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10720
+ return (hAsync("sd-field", { key: 'ff139feaafdaa57e012dc559ab1a0db26dfd97b0', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '188f24de316b14315fa0bdf312c58140e757cfa3', class: "sd-input__content" }, hAsync("slot", { key: '35d2213601e3c3508b7392096719d7841aebc6bb', name: "prefix" }), hAsync("input", { key: '0148de670febb2bc02a95a3c6c4c1a6cee523626', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '4a8bd55a4cfd25f482b1fcabb84f8ffffbbc8072', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '5c11a19971dceba378a4ea77f3f40d7b3d928214', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10825
10721
  if (this.disabled)
10826
10722
  return;
10827
10723
  this.internalValue = '';
10828
10724
  await this.formField?.sdValidate();
10829
- } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '63dbd526a1a9e67bd41483211bf9a005dc0dc93f', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
10725
+ } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '92cb57b65e70a499c48e73f028e30715f1b1356c', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
10830
10726
  if (this.disabled)
10831
10727
  return;
10832
10728
  this.passwordVisible = !this.passwordVisible;
@@ -10936,7 +10832,7 @@ class SdLinearProgress {
10936
10832
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
10937
10833
  };
10938
10834
  const valueText = `${Math.round(this.clampedValue)}%`;
10939
- return (hAsync(Host, { key: '7a639f88907718e71692f08beaa4ff32a913990c', style: hostStyle }, hAsync("div", { key: '0e9dc34a18d5497c67ce890e9976d98ff46a7cae', class: 'sd-linear-progress__track' }, hAsync("div", { key: 'b06985fa70196b47046907bbf72f73518e731614', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'b7ca66daa73439d52243f21991131dd40704c018', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: 'c2a8886d6e8402c29607287ae3a1c489138b38ce', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '36024d7cfbe5c932821744fa30f6366bf7a75302', class: 'sd-linear-progress__label' }, this.label)));
10835
+ return (hAsync(Host, { key: 'c7f2324ff98e1ec6e0d1d6c7a3328dd383a1abab', style: hostStyle }, hAsync("div", { key: 'cff100404519c4114c0dd1240715beafb91acf1f', class: 'sd-linear-progress__track' }, hAsync("div", { key: '1c7fdff123778a40cd0c3f3310141ac369205352', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'ae0b515a9bb9d5561d603fa8e88c144603af8af5', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '5d7cdf9daccd9729729bec7bc65456b5727d4738', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'd131eeb581e33f40878b47541f662aca269a6759', class: 'sd-linear-progress__label' }, this.label)));
10940
10836
  }
10941
10837
  static get style() { return sdLinearProgressCss(); }
10942
10838
  static get cmpMeta() { return {
@@ -10970,10 +10866,10 @@ class SdLoadingContainer {
10970
10866
  this.visible = false;
10971
10867
  }
10972
10868
  render() {
10973
- return (hAsync("div", { key: '14ae9c222f613129ac2819ee46b7dd0a248b93da', class: {
10869
+ return (hAsync("div", { key: 'a83b33262d59ecba12b7db9ed6bfe9f1fea4a54a', class: {
10974
10870
  'sd-loading-container': true,
10975
10871
  'sd-loading-container--visible': this.visible,
10976
- }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: 'a84dca0f4d3582c041ee97965db92a1fff778bd4', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '9793e443e8371a30572ca9b185e0bcfb09d2d1e1', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '1ea2e88043ece1b7c6ff9fe210d7d765d738bbfa', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '20e8a1cd1205186ec419b164b9e4873eb37045ea', class: "sd-loading-container__message" }, this.message)))));
10872
+ }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '64631929afd47606df0d397747495d2a11d62932', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '4a304e0fb66f720b57da1e4de03fa9aa5468d5d4', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '3981cb8e994384279a812864037a8e9cec34cc35', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '8adec0ef2424fa3ea30a58b27efa6344ada94070', class: "sd-loading-container__message" }, this.message)))));
10977
10873
  }
10978
10874
  static get style() { return sdLoadingContainerCss(); }
10979
10875
  static get cmpMeta() { return {
@@ -11066,7 +10962,7 @@ class SdLoadingModal {
11066
10962
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
11067
10963
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
11068
10964
  };
11069
- return (hAsync(Host, { key: '3113deea33ae8f08ac631e53744c94dfc0ffe829', style: hostStyle }, hAsync("div", { key: 'd6afa60fe2cf83bd1afd707e8aa218d2c66d761b', class: "sd-loading-modal" }, hAsync("div", { key: 'be70c3adcbea4fca528f459ad7fbc33e82649073', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '9aa73a423423e093606e58796490be123e5fa52a', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '59fd5cf61b53f1362974a7b92ad6e6319f141def', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '9bfe53124cd1f8a3008d8a2ccc6ea9d8af5d62c2', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
10965
+ return (hAsync(Host, { key: '4245588093d82ec791b4ba7260eb3a1314c0e7a8', style: hostStyle }, hAsync("div", { key: '4ad4c57bf68a5e33b453ed5ebb19f590f2ff8a9d', class: "sd-loading-modal" }, hAsync("div", { key: 'bd45817bad45b9cffc9917d5f6570cb7409e8703', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '16a09029e732058a4cdf0330e4afaf7322a88f76', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: 'cdf9a51d233efcc86fa2405960f2ed304a07127b', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '36cd4b36d92fb725eb35a9d6bee7fd0c8fcf3395', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
11070
10966
  }
11071
10967
  static get style() { return sdLoadingModalCss(); }
11072
10968
  static get cmpMeta() { return {
@@ -11859,12 +11755,12 @@ class SdNumberInput {
11859
11755
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
11860
11756
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
11861
11757
  };
11862
- return (hAsync("sd-field", { key: 'a62a0abbef4e817173d3e627d61c36523c2db81a', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'd395366da25ef5ab333e4b314093a89e41519786', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'eb97c4c29165e6237064bbce54ea2031c756fe12', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '7cd260e4356d320825a75350982174446b40e15c', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11758
+ return (hAsync("sd-field", { key: '7f4012ec048ab69f3c6b241c7fc103fd798572ca', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '975c0800b1fd6e4ab3502fc966db8917fe60bb3e', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'f2a630109b883740362dd2946ceeeaa93bbfeb36', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'dcd539c5035b1363edacadf7ed9c1096ef24714a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11863
11759
  ? NUMBER_INPUT_STEPPER.icon.disabled
11864
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: 'a25c707b127f63239dbb92be5e9d569e1be58005', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '0dc0864a4434122a717041028c732aa5d370f65c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
11760
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '5acf113c5e60dd5f77fb1206a60d4b5ce14e2b7f', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '5dd0f9ba9643fce07de811b2a93c8763a3d84b2c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
11865
11761
  textAlign: this.useButton ? 'center' : 'right',
11866
11762
  ...this.inputStyle,
11867
- } }), this.inputSuffix && (hAsync("span", { key: 'd31337cdacceb84ee6347a2c38210ad491667d2c', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '217fcbc2b75e76adb0ed969a719e632b5eb74b27', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '48ff6d0417aadcd975a6863a0003e63ca525cdfd', name: "add", size: iconSize, color: this.isIncrementDisabled()
11763
+ } }), this.inputSuffix && (hAsync("span", { key: 'aa7e4dbb29d7e8de4e94f0411f2f4b622411a60a', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '40deeadfcfe87cb61f09ee2959b6afb5757ff56b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b8ffcbbf663bacb7249e696d3eabf8b9ac832ddc', name: "add", size: iconSize, color: this.isIncrementDisabled()
11868
11764
  ? NUMBER_INPUT_STEPPER.icon.disabled
11869
11765
  : NUMBER_INPUT_STEPPER.icon.default }))))));
11870
11766
  }
@@ -12071,13 +11967,13 @@ class SdPagination {
12071
11967
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
12072
11968
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
12073
11969
  };
12074
- return (hAsync("div", { key: '386fdd2d1c0b5a7284c299201f19fd3384670ab1', class: {
11970
+ return (hAsync("div", { key: 'e648886fbec4723b7be767d9e1bfc04004cca234', class: {
12075
11971
  'sd-pagination': true,
12076
11972
  'sd-pagination--simple': this.simple,
12077
- }, style: cssVars }, hAsync("div", { key: 'cd73997ae59f87b70c31e88fd5b4246bd6044bd0', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
11973
+ }, style: cssVars }, hAsync("div", { key: '43ff8b8f6682c4d2b70c5085a6d3199de1d01596', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
12078
11974
  'sd-pagination__item': true,
12079
11975
  'sd-pagination__item--selected': this.currentPage === n,
12080
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '86389ea83d2965efdd938d2f9b2e2c3469f05fe8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
11976
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '1975d14028485438a728b23d717abfcde8722fcf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
12081
11977
  }
12082
11978
  static get style() { return sdPaginationCss(); }
12083
11979
  static get cmpMeta() { return {
@@ -12413,7 +12309,7 @@ class SdPortal {
12413
12309
  this.close.emit();
12414
12310
  }
12415
12311
  render() {
12416
- return hAsync("slot", { key: '6fa44238ddbc26c355ddde102d2639db7dd50b94' });
12312
+ return hAsync("slot", { key: '28858d6833d8ff7f86295f7e445d51ffc84db99a' });
12417
12313
  }
12418
12314
  static get watchers() { return {
12419
12315
  "open": [{
@@ -12437,79 +12333,6 @@ class SdPortal {
12437
12333
  }; }
12438
12334
  }
12439
12335
 
12440
- const sdProgressCss = () => `sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:100%;height:20px;overflow:hidden;border-radius:4px;background-color:#EEEEEE;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075FF);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#EEEEEE;font-size:12px;font-weight:700;line-height:20px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075FF);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075FF);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075FF)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}`;
12441
-
12442
- class SdProgress {
12443
- constructor(hostRef) {
12444
- registerInstance(this, hostRef);
12445
- }
12446
- type = 'bar';
12447
- error = false;
12448
- percentage = 0;
12449
- size = 80;
12450
- strokeWidth = 12;
12451
- label;
12452
- statusColor = {
12453
- default: '#aaaaaa',
12454
- progress: '#0075ff',
12455
- complete: '#12B553',
12456
- error: '#FB4444',
12457
- };
12458
- get progressPercentage() {
12459
- if (this.error)
12460
- return 100;
12461
- return this.percentage;
12462
- }
12463
- get progressStatus() {
12464
- if (this.error)
12465
- return 'error';
12466
- switch (this.percentage) {
12467
- case 100:
12468
- return 'complete';
12469
- case 0:
12470
- return 'default';
12471
- default:
12472
- return 'progress';
12473
- }
12474
- }
12475
- get progressColor() {
12476
- return this.statusColor[this.progressStatus];
12477
- }
12478
- render() {
12479
- return (hAsync("div", { key: '34c1ecf23c120f53595529004ed3d6818896e816', style: {
12480
- '--progress-color': this.progressColor,
12481
- '--progress-percentage': `${this.progressPercentage}%`,
12482
- } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '29461b9428416262c10b1917eaee4e0091d290dc', class: "sd-progress__label" }, this.label)));
12483
- }
12484
- renderBarProgress() {
12485
- return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
12486
- }
12487
- renderSpinnerProgress() {
12488
- const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
12489
- const circumference = 2 * Math.PI * radius; // 원의 둘레
12490
- const offset = circumference - (this.progressPercentage / 100) * circumference; // 진행률에 따른 offset
12491
- const progressBgSize = `${this.size}px`;
12492
- const progressSize = `${this.size / 2}px`;
12493
- return (hAsync("div", { class: `sd-progress__spinner sd-progress__spinner--${this.progressStatus}` }, hAsync("svg", { width: progressBgSize, height: progressBgSize }, hAsync("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), hAsync("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.progressColor, "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), hAsync("strong", { class: "sd-progress__spinner__label" }, this.progressPercentage, " %")));
12494
- }
12495
- static get style() { return sdProgressCss(); }
12496
- static get cmpMeta() { return {
12497
- "$flags$": 512,
12498
- "$tagName$": "sd-progress",
12499
- "$members$": {
12500
- "type": [1],
12501
- "error": [4],
12502
- "percentage": [2],
12503
- "size": [2],
12504
- "strokeWidth": [2, "stroke-width"],
12505
- "label": [1]
12506
- },
12507
- "$listeners$": undefined,
12508
- "$lazyBundleId$": "-",
12509
- "$attrsToReflect$": []
12510
- }; }
12511
- }
12512
-
12513
12336
  const radio = {
12514
12337
  size: "16",
12515
12338
  borderWidth: "1",
@@ -12900,1914 +12723,181 @@ class SdRadioGroup {
12900
12723
  }; }
12901
12724
  }
12902
12725
 
12903
- class SelectKeyboardNavigation {
12904
- isSearchable;
12905
- filteredOptions;
12906
- constructor(isSearchable, filteredOptions) {
12907
- this.isSearchable = isSearchable;
12908
- this.filteredOptions = filteredOptions;
12909
- }
12910
- getNavigationBounds() {
12911
- return {
12912
- minIndex: this.isSearchable ? -1 : 0,
12913
- maxIndex: this.filteredOptions.length - 1,
12914
- };
12915
- }
12916
- getNextIndex(currentIndex, direction) {
12917
- const { minIndex, maxIndex } = this.getNavigationBounds();
12918
- if (direction === 'ArrowUp') {
12919
- return currentIndex > minIndex ? currentIndex - 1 : maxIndex;
12920
- }
12921
- else {
12922
- return currentIndex < maxIndex ? currentIndex + 1 : minIndex;
12923
- }
12924
- }
12925
- }
12926
-
12927
- const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select .sd-select .sd-select__trigger{cursor:not-allowed}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
12726
+ const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
12928
12727
 
12929
- /**
12930
- * @deprecated sd-select-v2를 사용하세요.
12931
- */
12932
- class SdSelect extends BaseDropdownEvent {
12728
+ class SdSelect {
12933
12729
  constructor(hostRef) {
12934
- super();
12935
12730
  registerInstance(this, hostRef);
12936
12731
  this.update = createEvent(this, "sdUpdate", 7);
12937
12732
  this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
12938
12733
  }
12734
+ static VIEWPORT_PADDING = 20;
12735
+ static PORTAL_OFFSET_Y = 4;
12736
+ static CLOSE_ANIMATION_DURATION = 150;
12939
12737
  get el() { return getElement(this); }
12940
- // props
12738
+ type = 'default';
12941
12739
  value = null;
12942
12740
  options = [];
12943
12741
  placeholder = '선택';
12944
- optionPlaceholder = '선택지가 없습니다.';
12945
- width = '200px';
12742
+ maxDropdownWidth = '640px';
12946
12743
  dropdownHeight = '260px';
12947
- autoFocus = false;
12948
12744
  disabled = false;
12949
- clearable = false;
12950
- searchable = false;
12951
- // props - label
12952
12745
  label = '';
12953
12746
  labelWidth = '';
12954
12747
  addonLabel = '';
12955
12748
  addonAlign = 'start';
12749
+ error = false;
12750
+ hint = '';
12751
+ errorMessage = '';
12752
+ rules = [];
12956
12753
  icon = undefined;
12957
12754
  labelTooltip = '';
12958
12755
  labelTooltipProps = null;
12959
- // props - form
12960
- rules = [];
12961
- error = false;
12962
- // props - custom slots
12963
- optionRenderer;
12964
- // states
12756
+ emitValue = false;
12757
+ width = '';
12758
+ useSearch = false;
12759
+ allSelectedLabel = '전체';
12760
+ useSelectAll = false;
12965
12761
  isOpen = false;
12966
- itemIndex = -1;
12967
- isScrolled = false;
12968
- // events
12762
+ isAnimatingOut = false;
12763
+ triggerWidth = '200px';
12764
+ resolvedDropdownHeight = '260px';
12765
+ resolvedMaxDropdownWidth = '640px';
12766
+ focused = false;
12767
+ hovered = false;
12969
12768
  update;
12970
12769
  dropDownShow;
12971
- selectRef;
12972
- triggerRef;
12973
- formField;
12974
- filteredOptions = [];
12975
- dropDownWidth = '200px';
12976
- name = nanoid$1();
12770
+ async sdFocus() {
12771
+ if (this.disabled)
12772
+ return;
12773
+ await this.triggerComponentRef?.sdFocus();
12774
+ }
12977
12775
  async sdOpen() {
12776
+ // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
12777
+ await new Promise(resolve => setTimeout(resolve, 0));
12778
+ if (this.disabled || this.isOpen)
12779
+ return;
12780
+ this.prepareDropdownGeometry();
12781
+ if (this.closeAnimationTimer)
12782
+ clearTimeout(this.closeAnimationTimer);
12783
+ this.isAnimatingOut = false;
12978
12784
  this.isOpen = true;
12979
12785
  }
12980
- async sdValidate() {
12981
- this.formField?.sdValidate();
12982
- }
12983
- async sdReset() {
12984
- this.formField?.sdReset();
12985
- }
12986
- async sdResetValidate() {
12987
- this.formField?.sdResetValidation();
12786
+ triggerRef;
12787
+ triggerComponentRef;
12788
+ closeAnimationTimer;
12789
+ name = nanoid$1();
12790
+ triggerHasFocus = false;
12791
+ watchIsOpen(newValue) {
12792
+ this.syncFocusedState(newValue);
12793
+ this.dropDownShow.emit({ isOpen: newValue });
12988
12794
  }
12989
- async sdFocus() {
12990
- this.formField?.sdFocus();
12795
+ get isMulti() {
12796
+ return this.type === 'multi' || this.type === 'multi_depth';
12991
12797
  }
12992
- async isOpenChanged() {
12993
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
12994
- this.onDropdownToggle(this.isOpen);
12995
- this.dropDownShow?.emit({ isOpen: this.isOpen });
12996
- if (this.isOpen === false) {
12997
- await this.formField?.sdValidate();
12798
+ get displayText() {
12799
+ if (this.isMulti) {
12800
+ if (!Array.isArray(this.value) || this.value.length === 0)
12801
+ return '';
12802
+ const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
12803
+ const selected = this.getSelectedOptions();
12804
+ const allSelected = nonDisabledLeaves.length > 0 &&
12805
+ nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
12806
+ if (allSelected)
12807
+ return this.allSelectedLabel ?? '전체';
12808
+ const flat = this.flattenOptions(this.options);
12809
+ return this.value
12810
+ .map(item => {
12811
+ if (item != null && typeof item === 'object') {
12812
+ const opt = item;
12813
+ return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
12814
+ }
12815
+ return flat.find(o => o.value === item)?.label ?? '';
12816
+ })
12817
+ .filter(Boolean)
12818
+ .join(', ');
12819
+ }
12820
+ if (this.value == null)
12821
+ return '';
12822
+ if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
12823
+ return this.value.label ?? '';
12998
12824
  }
12825
+ const flat = this.flattenOptions(this.options);
12826
+ const found = flat.find(o => o.value === this.value);
12827
+ return found?.label ?? '';
12999
12828
  }
13000
- componentWillLoad() {
13001
- this.filteredOptions = this.options;
13002
- this.dropDownWidth = this.width;
13003
- this.initializeEvent();
12829
+ flattenOptions(options) {
12830
+ return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
13004
12831
  }
13005
- componentDidLoad() {
13006
- if (this.autoFocus) {
13007
- this.selectRef?.focus();
12832
+ getNonDisabledLeaves(options) {
12833
+ return options.flatMap(o => {
12834
+ if (o.disabled)
12835
+ return [];
12836
+ if (o.children)
12837
+ return this.getNonDisabledLeaves(o.children);
12838
+ return [o];
12839
+ });
12840
+ }
12841
+ getSelectedOptions() {
12842
+ const val = this.value;
12843
+ if (!val || !Array.isArray(val))
12844
+ return [];
12845
+ if (this.emitValue) {
12846
+ return val
12847
+ .map(v => this.findOriginalOption(v, this.options))
12848
+ .filter((o) => !!o);
13008
12849
  }
12850
+ return val;
13009
12851
  }
13010
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
13011
- componentDidRender() {
13012
- const trigger = this.triggerRef;
13013
- const rect = trigger?.getBoundingClientRect();
13014
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
12852
+ toMultiValue(options) {
12853
+ return this.emitValue ? options.map(o => o.value) : options;
13015
12854
  }
13016
- disconnectedCallback() {
13017
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
12855
+ parsePixelValue(value, fallback) {
12856
+ const parsed = Number.parseFloat(value);
12857
+ return Number.isFinite(parsed) ? parsed : fallback;
13018
12858
  }
13019
- handleDocumentClick(event) {
13020
- if (!this.selectRef?.contains(event.target)) {
13021
- this.isOpen = false;
13022
- }
12859
+ updateDropdownViewportConstraints() {
12860
+ if (!this.triggerRef)
12861
+ return;
12862
+ const triggerRect = this.triggerRef.getBoundingClientRect();
12863
+ const viewportPadding = SdSelect.VIEWPORT_PADDING;
12864
+ const offsetY = SdSelect.PORTAL_OFFSET_Y;
12865
+ const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
12866
+ const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
12867
+ const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
12868
+ const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
12869
+ const availableHeight = Math.max(availableBelow, availableAbove);
12870
+ const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
12871
+ this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
12872
+ this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
13023
12873
  }
13024
- handleDocumentKeydown(keyboardEvent) {
13025
- keyboardEvent.stopPropagation();
13026
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13027
- if (!targetKey.includes(keyboardEvent.key))
12874
+ handleViewportResize = () => {
12875
+ if (!this.isOpen)
13028
12876
  return;
13029
- keyboardEvent.preventDefault();
13030
- switch (keyboardEvent.key) {
13031
- case 'ArrowDown':
13032
- case 'ArrowUp':
13033
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13034
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13035
- this.itemIndex = nextIndex;
13036
- break;
13037
- case 'Enter':
13038
- const selectedOption = this.filteredOptions[this.itemIndex];
13039
- if (selectedOption && !selectedOption.disabled) {
13040
- this.value = selectedOption.value;
13041
- this.isOpen = false;
13042
- }
13043
- break;
13044
- case 'Escape':
13045
- this.isOpen = false;
13046
- break;
12877
+ this.updateDropdownViewportConstraints();
12878
+ };
12879
+ findOriginalOption(value, options) {
12880
+ for (const opt of options) {
12881
+ if (opt.value === value)
12882
+ return opt;
12883
+ if (opt.children) {
12884
+ const found = this.findOriginalOption(value, opt.children);
12885
+ if (found)
12886
+ return found;
12887
+ }
13047
12888
  }
13048
- }
13049
- getSelectedOption() {
13050
- return this.options.find(option => option.value === this.value);
12889
+ return undefined;
13051
12890
  }
13052
12891
  closeDropdown() {
13053
- this.isOpen = false;
13054
- }
13055
- handleTriggerClick = (event) => {
13056
- event.stopPropagation();
13057
- if (!this.disabled) {
13058
- this.isOpen = !this.isOpen;
13059
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13060
- }
13061
- };
13062
- handleOptionClick = (detail) => {
13063
- const { option, event } = detail;
13064
- event.stopPropagation();
13065
- if (!option.disabled) {
13066
- this.value = option.value;
13067
- this.isOpen = false;
13068
- const selectedOption = this.getSelectedOption();
13069
- this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
13070
- }
13071
- };
13072
- render() {
13073
- return (hAsync("sd-field", { key: '28b4667a386236c2486af08f636ede3dc6c41f91', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'ccee78ca4a773c521634e4054ce3b3d8e9713362', class: {
13074
- 'sd-select': true,
13075
- 'sd-select--disabled': this.disabled,
13076
- 'sd-select--error': !!this.error,
13077
- 'sd-select--label': !!this.label,
13078
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13079
- }
13080
- renderTrigger() {
13081
- const selectedOption = this.getSelectedOption();
13082
- return (hAsync("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, hAsync("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (hAsync("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: async (event) => {
13083
- event.stopPropagation();
13084
- this.value = null;
13085
- await this.formField?.sdValidate();
13086
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
13087
- }
13088
- renderDropdown() {
13089
- if (this.isOpen === false)
13090
- return null;
13091
- const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||
13092
- this.selectRef);
13093
- return (hAsync("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, hAsync("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
13094
- }
13095
- static get watchers() { return {
13096
- "isOpen": [{
13097
- "isOpenChanged": 0
13098
- }]
13099
- }; }
13100
- static get style() { return sdSelectCss(); }
13101
- static get cmpMeta() { return {
13102
- "$flags$": 512,
13103
- "$tagName$": "sd-select",
13104
- "$members$": {
13105
- "value": [1032],
13106
- "options": [1040],
13107
- "placeholder": [1],
13108
- "optionPlaceholder": [1, "option-placeholder"],
13109
- "width": [1],
13110
- "dropdownHeight": [1, "dropdown-height"],
13111
- "autoFocus": [4, "auto-focus"],
13112
- "disabled": [4],
13113
- "clearable": [4],
13114
- "searchable": [4],
13115
- "label": [1],
13116
- "labelWidth": [8, "label-width"],
13117
- "addonLabel": [1, "addon-label"],
13118
- "addonAlign": [1, "addon-align"],
13119
- "icon": [16],
13120
- "labelTooltip": [1, "label-tooltip"],
13121
- "labelTooltipProps": [16],
13122
- "rules": [16],
13123
- "error": [4],
13124
- "optionRenderer": [16],
13125
- "name": [1],
13126
- "isOpen": [32],
13127
- "itemIndex": [32],
13128
- "isScrolled": [32],
13129
- "sdOpen": [64],
13130
- "sdValidate": [64],
13131
- "sdReset": [64],
13132
- "sdResetValidate": [64],
13133
- "sdFocus": [64]
13134
- },
13135
- "$listeners$": undefined,
13136
- "$lazyBundleId$": "-",
13137
- "$attrsToReflect$": []
13138
- }; }
13139
- }
13140
-
13141
- const sdSelectDropdownCss = () => `.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{overflow:auto;min-width:fit-content;width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
13142
-
13143
- class SdSelectDropdown {
13144
- constructor(hostRef) {
13145
- registerInstance(this, hostRef);
13146
- this.optionClick = createEvent(this, "sdOptionClick", 7);
13147
- this.optionFiltered = createEvent(this, "sdOptionFiltered", 7);
13148
- this.scroll = createEvent(this, "sdScroll", 7);
13149
- }
13150
- itemIndex;
13151
- value = null;
13152
- options;
13153
- width;
13154
- dropdownHeight;
13155
- searchable;
13156
- optionPlaceholder;
13157
- useCheckbox = false;
13158
- useAll = false;
13159
- filteredOptions = [];
13160
- searchText = null;
13161
- isScrolled = false;
13162
- isDropdownReady = false;
13163
- optionClick;
13164
- optionFiltered;
13165
- scroll;
13166
- filteredOptionsChanged(newValue) {
13167
- this.optionFiltered.emit(newValue);
13168
- }
13169
- searchTextChanged() {
13170
- this.filterOptions();
13171
- }
13172
- async itemIndexChanged(newIndex, oldIndex) {
13173
- if (this.searchable) {
13174
- const searchInput = await this.getNativeInputElement();
13175
- if (this.itemIndex === -1) {
13176
- searchInput?.focus({ preventScroll: true });
13177
- return;
13178
- }
13179
- else if (searchInput?.matches(':focus')) {
13180
- searchInput?.blur();
13181
- }
13182
- }
13183
- const optionElements = this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];
13184
- const currentItem = optionElements?.[this.itemIndex];
13185
- if (!currentItem)
13186
- return;
13187
- this.optionRef = currentItem;
13188
- const isOptionDisabled = await this.optionRef.sdIsDisabled();
13189
- if (isOptionDisabled) {
13190
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
13191
- return;
13192
- }
13193
- this.scrollToOption(currentItem);
13194
- }
13195
- componentWillLoad() {
13196
- this.filteredOptions = this.options;
13197
- // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
13198
- requestAnimationFrame(() => {
13199
- requestAnimationFrame(async () => {
13200
- const selectedOptions = this.getSelectedOption();
13201
- // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
13202
- if (selectedOptions) {
13203
- const selectedIndex = Array.isArray(selectedOptions)
13204
- ? this.options.indexOf(selectedOptions[0])
13205
- : this.options.indexOf(selectedOptions);
13206
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option') || []);
13207
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
13208
- const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
13209
- // 선택된 옵션이 화면 가운데에 오도록 index 조정
13210
- const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
13211
- const currentItem = optionElements?.[targetIndex];
13212
- if (currentItem) {
13213
- this.scrollToOption(currentItem, 'instant');
13214
- }
13215
- }
13216
- this.isDropdownReady = true;
13217
- if (this.searchable) {
13218
- const searchInput = await this.getNativeInputElement();
13219
- if (searchInput) {
13220
- requestAnimationFrame(() => {
13221
- searchInput.focus({ preventScroll: true });
13222
- });
13223
- }
13224
- }
13225
- });
13226
- });
13227
- }
13228
- dropdownRef;
13229
- searchRef;
13230
- optionRef;
13231
- get dropdownSize() {
13232
- return {
13233
- '--select-dropdown-width': this.width || '200px',
13234
- '--select-dropdown-height': this.dropdownHeight || '260px',
13235
- };
13236
- }
13237
- filterOptions() {
13238
- if (!this.searchText || this.searchText.trim() === '') {
13239
- // 검색어가 없으면 전체 옵션 표시
13240
- this.filteredOptions = this.options;
13241
- }
13242
- else {
13243
- // 검색어가 있으면 필터링
13244
- this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
13245
- }
13246
- }
13247
- getSelectedOption() {
13248
- if (typeof this.value !== 'object') {
13249
- return this.options.find(option => option.value === this.value);
13250
- }
13251
- return this.options.filter(option => this.value?.includes(option));
13252
- }
13253
- isOptionSelected(value) {
13254
- if (Array.isArray(this.value)) {
13255
- return this.value.some(selected => selected.value === value);
13256
- }
13257
- return value === this.value;
13258
- }
13259
- async getNativeInputElement() {
13260
- if (this.searchRef) {
13261
- return this.searchRef.sdGetNativeElement();
13262
- }
13263
- return null;
13264
- }
13265
- scrollToOption(optionElement, scrollBehavior = 'smooth') {
13266
- if (!this.dropdownRef || !optionElement)
13267
- return;
13268
- const dropdown = this.dropdownRef;
13269
- const optionTop = optionElement.offsetTop;
13270
- const optionHeight = optionElement.offsetHeight;
13271
- const dropdownScrollTop = dropdown.scrollTop;
13272
- const dropdownHeight = dropdown.clientHeight;
13273
- const searchContainer = dropdown.querySelector('.sd-select-search-input');
13274
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
13275
- const visibleTop = dropdownScrollTop + searchOffset;
13276
- const visibleBottom = dropdownScrollTop + dropdownHeight;
13277
- if (optionTop < visibleTop) {
13278
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });
13279
- }
13280
- else if (optionTop + optionHeight > visibleBottom) {
13281
- dropdown.scrollTo({
13282
- top: optionTop + optionHeight - dropdownHeight + searchOffset,
13283
- behavior: scrollBehavior,
13284
- });
13285
- }
13286
- }
13287
- handleDropdownScroll = (event) => {
13288
- const target = event.target;
13289
- const scrollTop = target.scrollTop;
13290
- // 스크롤이 조금이라도 되면 그림자 표시
13291
- this.isScrolled = scrollTop > 0;
13292
- };
13293
- render() {
13294
- return (hAsync("div", { key: 'a831a99130074fa072534d76f4b0db7169d906e2', class: {
13295
- 'sd-select-dropdown': true,
13296
- 'sd-select-dropdown--ready': this.isDropdownReady,
13297
- }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: 'f09a5575454c30387aeac9996d15625d7581a367', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
13298
- }
13299
- static get watchers() { return {
13300
- "filteredOptions": [{
13301
- "filteredOptionsChanged": 0
13302
- }],
13303
- "searchText": [{
13304
- "searchTextChanged": 0
13305
- }],
13306
- "itemIndex": [{
13307
- "itemIndexChanged": 0
13308
- }]
13309
- }; }
13310
- static get style() { return sdSelectDropdownCss(); }
13311
- static get cmpMeta() { return {
13312
- "$flags$": 772,
13313
- "$tagName$": "sd-select-dropdown",
13314
- "$members$": {
13315
- "itemIndex": [1026, "item-index"],
13316
- "value": [8],
13317
- "options": [16],
13318
- "width": [1],
13319
- "dropdownHeight": [1, "dropdown-height"],
13320
- "searchable": [4],
13321
- "optionPlaceholder": [1, "option-placeholder"],
13322
- "useCheckbox": [4, "use-checkbox"],
13323
- "useAll": [4, "use-all"],
13324
- "filteredOptions": [32],
13325
- "searchText": [32],
13326
- "isScrolled": [32],
13327
- "isDropdownReady": [32]
13328
- },
13329
- "$listeners$": undefined,
13330
- "$lazyBundleId$": "-",
13331
- "$attrsToReflect$": []
13332
- }; }
13333
- }
13334
-
13335
- const sdSelectGroupCss = () => `.sd-select-group__dropdown .sd-select-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-group:focus,sd-select-group:focus-visible,sd-select-group:focus-within{outline:none !important}sd-select-group .sd-select-group{width:100%}sd-select-group .sd-select-group .sd-select-group__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select-group .sd-select-group .sd-select-group__trigger{cursor:not-allowed}sd-select-group .sd-select-group .sd-select-group__trigger .sd-select-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-group .sd-select-group .sd-select-group__trigger .sd-select-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-group .sd-select-group .sd-select-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-group .sd-select-group .sd-select-group__arrow--open{transform:rotate(180deg)}.sd-select-group__dropdown{overflow:auto;width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-group__dropdown--ready{opacity:1}`;
13336
-
13337
- /**
13338
- * @deprecated sd-select-v2 (name="default_depth")를 사용하세요.
13339
- */
13340
- class SdSelectGroup extends BaseDropdownEvent {
13341
- constructor(hostRef) {
13342
- super();
13343
- registerInstance(this, hostRef);
13344
- this.update = createEvent(this, "sdUpdate", 7);
13345
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13346
- }
13347
- get el() { return getElement(this); }
13348
- // props
13349
- value = null;
13350
- options = [];
13351
- placeholder = '선택';
13352
- optionPlaceholder = '선택지가 없습니다.';
13353
- width = '200px';
13354
- dropdownHeight = '260px';
13355
- autoFocus = false;
13356
- disabled = false;
13357
- clearable = false;
13358
- searchable = false;
13359
- // props - label
13360
- label = '';
13361
- labelWidth = '';
13362
- addonLabel = '';
13363
- addonAlign = 'start';
13364
- icon = undefined;
13365
- labelTooltip = '';
13366
- labelTooltipProps = null;
13367
- // props - form
13368
- rules = [];
13369
- error = false;
13370
- // props - custom styles
13371
- containerStyle = {};
13372
- triggerStyle = {};
13373
- dropdownStyle = {};
13374
- optionStyle = {};
13375
- labelStyle = {};
13376
- // props - custom slots
13377
- optionRenderer;
13378
- // states
13379
- filteredOptions = [];
13380
- isOpen = false;
13381
- searchText = null;
13382
- itemIndex = -1;
13383
- isScrolled = false;
13384
- isDropdownReady = false;
13385
- // events
13386
- update;
13387
- dropDownShow;
13388
- selectRef;
13389
- searchRef;
13390
- triggerRef;
13391
- optionRef;
13392
- dropdownRef;
13393
- formField;
13394
- dropDownWidth = '200px';
13395
- name = nanoid$1();
13396
- async sdOpen() {
13397
- await new Promise(resolve => setTimeout(resolve, 0));
13398
- this.isOpen = true;
13399
- }
13400
- async sdValidate() {
13401
- this.formField?.sdValidate();
13402
- }
13403
- async sdReset() {
13404
- this.formField?.sdReset();
13405
- }
13406
- async sdResetValidate() {
13407
- this.formField?.sdResetValidation();
13408
- }
13409
- async sdFocus() {
13410
- this.formField?.sdFocus();
13411
- }
13412
- optionsChanged() {
13413
- this.filteredOptions = this.options;
13414
- this.filterOptions();
13415
- }
13416
- searchTextChanged() {
13417
- this.filterOptions();
13418
- }
13419
- async itemIndexChanged(newIndex, oldIndex) {
13420
- if (this.searchable) {
13421
- const searchInput = await this.getNativeInputElement();
13422
- if (this.itemIndex === -1) {
13423
- searchInput?.focus({ preventScroll: true });
13424
- return;
13425
- }
13426
- else if (searchInput?.matches(':focus')) {
13427
- searchInput?.blur();
13428
- }
13429
- }
13430
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
13431
- const currentItem = optionElements?.[this.itemIndex];
13432
- if (!currentItem || !this.isOpen)
13433
- return;
13434
- this.optionRef = currentItem;
13435
- const isOptionDisabled = await this.optionRef.isDisabled();
13436
- if (isOptionDisabled) {
13437
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
13438
- return;
13439
- }
13440
- this.scrollToOption(currentItem);
13441
- }
13442
- async isOpenChanged() {
13443
- this.onDropdownToggle(this.isOpen);
13444
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13445
- this.isDropdownReady = false;
13446
- if (this.isOpen === false) {
13447
- await this.formField?.sdValidate();
13448
- return;
13449
- }
13450
- requestAnimationFrame(() => {
13451
- requestAnimationFrame(async () => {
13452
- const selectedOption = this.getSelectedOption();
13453
- if (selectedOption) {
13454
- const selectedIndex = this.filteredOptions.indexOf(selectedOption);
13455
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
13456
- const targetIndex = Math.min(selectedIndex + 4, optionElements.length - 1);
13457
- const currentItem = optionElements?.[targetIndex];
13458
- if (currentItem) {
13459
- this.scrollToOption(currentItem);
13460
- }
13461
- }
13462
- this.isDropdownReady = true;
13463
- if (this.searchable) {
13464
- const searchInput = await this.getNativeInputElement();
13465
- if (searchInput) {
13466
- requestAnimationFrame(() => {
13467
- searchInput.focus({ preventScroll: true });
13468
- });
13469
- }
13470
- }
13471
- });
13472
- });
13473
- }
13474
- componentWillLoad() {
13475
- this.filteredOptions = this.options;
13476
- this.dropDownWidth = this.width;
13477
- this.initializeEvent();
13478
- }
13479
- componentDidLoad() {
13480
- if (this.autoFocus) {
13481
- this.selectRef?.focus();
13482
- }
13483
- }
13484
- componentDidRender() {
13485
- const trigger = this.triggerRef;
13486
- const rect = trigger?.getBoundingClientRect();
13487
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
13488
- }
13489
- disconnectedCallback() {
13490
- this.cleanupEvent();
13491
- }
13492
- handleDocumentClick(event) {
13493
- if (!this.selectRef?.contains(event.target)) {
13494
- this.isOpen = false;
13495
- }
13496
- }
13497
- handleDocumentKeydown(keyboardEvent) {
13498
- keyboardEvent.stopPropagation();
13499
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13500
- if (!targetKey.includes(keyboardEvent.key))
13501
- return;
13502
- keyboardEvent.preventDefault();
13503
- switch (keyboardEvent.key) {
13504
- case 'ArrowDown':
13505
- case 'ArrowUp':
13506
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13507
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13508
- this.itemIndex = nextIndex;
13509
- break;
13510
- case 'Enter':
13511
- const selectedOption = this.filteredOptions[this.itemIndex];
13512
- if (selectedOption && !selectedOption.disabled && selectedOption.type === 'item') {
13513
- this.handleOptionSelection(selectedOption);
13514
- }
13515
- break;
13516
- case 'Escape':
13517
- this.isOpen = false;
13518
- break;
13519
- }
13520
- }
13521
- // event handlers
13522
- handleTriggerClick = (event) => {
13523
- event.stopPropagation();
13524
- if (!this.disabled) {
13525
- this.isOpen = !this.isOpen;
13526
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13527
- }
13528
- };
13529
- handleOptionClick = (detail) => {
13530
- const { option, event } = detail;
13531
- event.stopPropagation();
13532
- if (option.type === 'item') {
13533
- this.handleOptionSelection(option);
13534
- }
13535
- };
13536
- filterOptions() {
13537
- if (!this.searchText || this.searchText.trim() === '') {
13538
- this.filteredOptions = this.options;
13539
- return;
13540
- }
13541
- const searchTerm = this.searchText.toLowerCase();
13542
- const matchedOptions = new Set();
13543
- this.options.forEach(option => {
13544
- if (option.label.toLowerCase().includes(searchTerm)) {
13545
- matchedOptions.add(option);
13546
- this.addParentGroups(option, matchedOptions);
13547
- }
13548
- });
13549
- this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
13550
- }
13551
- addParentGroups(option, matchedSet) {
13552
- if (!option.parent)
13553
- return;
13554
- const parentOption = this.options.find(opt => opt.value === option.parent);
13555
- if (parentOption && !matchedSet.has(parentOption)) {
13556
- matchedSet.add(parentOption);
13557
- this.addParentGroups(parentOption, matchedSet);
13558
- }
13559
- }
13560
- getSelectedOption() {
13561
- return this.options.find(option => option.value === this.value);
13562
- }
13563
- handleDropdownScroll = (event) => {
13564
- const target = event.target;
13565
- this.isScrolled = target.scrollTop > 0;
13566
- };
13567
- async getNativeInputElement() {
13568
- if (this.searchRef) {
13569
- return this.searchRef.sdGetNativeElement();
13570
- }
13571
- return null;
13572
- }
13573
- handleOptionSelection = (option) => {
13574
- if (!option || option.disabled)
13575
- return;
13576
- this.value = option.value;
13577
- this.isOpen = false;
13578
- const selectedOption = this.getSelectedOption();
13579
- this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
13580
- };
13581
- closeDropdown() {
13582
- this.isOpen = false;
13583
- }
13584
- async scrollToOption(optionElement) {
13585
- if (!this.dropdownRef || !optionElement)
13586
- return;
13587
- requestAnimationFrame(() => {
13588
- const dropdown = this.dropdownRef;
13589
- const optionTop = optionElement.offsetTop;
13590
- const optionHeight = optionElement.offsetHeight;
13591
- const dropdownScrollTop = dropdown.scrollTop;
13592
- const dropdownHeight = dropdown.clientHeight;
13593
- const searchContainer = dropdown.querySelector('.sd-select-group__search-container');
13594
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
13595
- const visibleContentHeight = dropdownHeight - searchOffset;
13596
- const visibleTop = dropdownScrollTop + searchOffset;
13597
- const visibleBottom = dropdownScrollTop + dropdownHeight;
13598
- if (optionTop < visibleTop) {
13599
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
13600
- }
13601
- else if (optionTop + optionHeight > visibleBottom) {
13602
- dropdown.scrollTo({
13603
- top: optionTop + optionHeight - visibleContentHeight - searchOffset,
13604
- behavior: 'instant',
13605
- });
13606
- }
13607
- });
13608
- }
13609
- render() {
13610
- return (hAsync("sd-field", { key: 'aa5470eaba6489d6eb380996eeb0c0c985e20fbf', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '90d4cc0bde3240be6a8406c9ea6c82c2fdad3482', class: {
13611
- 'sd-select-group': true,
13612
- 'sd-select-group--open': this.isOpen,
13613
- 'sd-select-group--disabled': this.disabled,
13614
- 'sd-select-group--label': !!this.label,
13615
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13616
- }
13617
- renderTrigger() {
13618
- const selectedOption = this.getSelectedOption();
13619
- return (hAsync("div", { class: "sd-select-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle, ref: el => (this.triggerRef = el) }, hAsync("span", { class: "sd-select-group__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "grey_65", class: "sd-select-group__clear", onClick: async (event) => {
13620
- event.stopPropagation();
13621
- this.value = null;
13622
- this.update?.emit({ value: null, option: null });
13623
- await this.formField?.sdValidate();
13624
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "grey_65", class: {
13625
- 'sd-select-group__arrow': true,
13626
- 'sd-select-group__arrow--open': this.isOpen,
13627
- } })));
13628
- }
13629
- renderDropdown() {
13630
- const style = {
13631
- '--select-width': this.dropDownWidth || '200px',
13632
- '--select-dropdown-height': this.dropdownHeight || '260px',
13633
- };
13634
- if (this.isOpen === false)
13635
- return null;
13636
- return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { style: { width: '0', height: '0', overflow: 'visible' } }, hAsync("div", { class: {
13637
- 'sd-select-group__dropdown': true,
13638
- 'sd-select-group__dropdown--ready': this.isDropdownReady,
13639
- }, style: { ...style, ...this.dropdownStyle }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (hAsync(Fragment, null, this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item' ? option.value === this.value : false, isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
13640
- if (option.type !== 'item')
13641
- return;
13642
- this.handleOptionClick(detail);
13643
- }, useCheckbox: false, useIndicator: false })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
13644
- }
13645
- static get watchers() { return {
13646
- "options": [{
13647
- "optionsChanged": 0
13648
- }],
13649
- "searchText": [{
13650
- "searchTextChanged": 0
13651
- }],
13652
- "itemIndex": [{
13653
- "itemIndexChanged": 0
13654
- }],
13655
- "isOpen": [{
13656
- "isOpenChanged": 0
13657
- }]
13658
- }; }
13659
- static get style() { return sdSelectGroupCss(); }
13660
- static get cmpMeta() { return {
13661
- "$flags$": 772,
13662
- "$tagName$": "sd-select-group",
13663
- "$members$": {
13664
- "value": [1032],
13665
- "options": [1040],
13666
- "placeholder": [1],
13667
- "optionPlaceholder": [1, "option-placeholder"],
13668
- "width": [1],
13669
- "dropdownHeight": [1, "dropdown-height"],
13670
- "autoFocus": [4, "auto-focus"],
13671
- "disabled": [4],
13672
- "clearable": [4],
13673
- "searchable": [4],
13674
- "label": [1],
13675
- "labelWidth": [8, "label-width"],
13676
- "addonLabel": [1, "addon-label"],
13677
- "addonAlign": [1, "addon-align"],
13678
- "icon": [16],
13679
- "labelTooltip": [1, "label-tooltip"],
13680
- "labelTooltipProps": [16],
13681
- "rules": [16],
13682
- "error": [4],
13683
- "containerStyle": [16],
13684
- "triggerStyle": [16],
13685
- "dropdownStyle": [16],
13686
- "optionStyle": [16],
13687
- "labelStyle": [16],
13688
- "optionRenderer": [16],
13689
- "name": [1],
13690
- "filteredOptions": [32],
13691
- "isOpen": [32],
13692
- "searchText": [32],
13693
- "itemIndex": [32],
13694
- "isScrolled": [32],
13695
- "isDropdownReady": [32],
13696
- "sdOpen": [64],
13697
- "sdValidate": [64],
13698
- "sdReset": [64],
13699
- "sdResetValidate": [64],
13700
- "sdFocus": [64]
13701
- },
13702
- "$listeners$": undefined,
13703
- "$lazyBundleId$": "-",
13704
- "$attrsToReflect$": []
13705
- }; }
13706
- }
13707
-
13708
- const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{cursor:not-allowed}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
13709
-
13710
- /**
13711
- * @deprecated sd-select-v2 (name="multi")를 사용하세요.
13712
- */
13713
- class SdSelectMultiple extends BaseDropdownEvent {
13714
- constructor(hostRef) {
13715
- super();
13716
- registerInstance(this, hostRef);
13717
- this.update = createEvent(this, "sdUpdate", 7);
13718
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13719
- }
13720
- get el() { return getElement(this); }
13721
- // props
13722
- value = null;
13723
- options = [];
13724
- placeholder = '선택';
13725
- optionPlaceholder = '선택지가 없습니다.';
13726
- width = '200px';
13727
- dropdownHeight = '260px';
13728
- autoFocus = false;
13729
- disabled = false;
13730
- clearable = false;
13731
- searchable = false;
13732
- // props - select multiple specific
13733
- useAll = false;
13734
- useCheckbox = false;
13735
- // props - label
13736
- label = '';
13737
- labelWidth = '';
13738
- icon = undefined;
13739
- labelTooltip = '';
13740
- labelTooltipProps = null;
13741
- // props - form
13742
- rules = [];
13743
- error = false;
13744
- optionRenderer;
13745
- // states
13746
- isOpen = false;
13747
- itemIndex = -1;
13748
- isScrolled = false;
13749
- // events
13750
- update;
13751
- dropDownShow;
13752
- selectRef;
13753
- triggerRef;
13754
- formField;
13755
- filteredOptions = [];
13756
- dropDownWidth = '200px';
13757
- name = nanoid$1();
13758
- async sdOpen() {
13759
- this.isOpen = true;
13760
- }
13761
- async sdValidate() {
13762
- this.formField?.sdValidate();
13763
- }
13764
- async sdReset() {
13765
- this.formField?.sdReset();
13766
- }
13767
- async sdResetValidate() {
13768
- this.formField?.sdResetValidation();
13769
- }
13770
- async sdFocus() {
13771
- this.formField?.sdFocus();
13772
- }
13773
- async isOpenChanged() {
13774
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
13775
- this.onDropdownToggle(this.isOpen);
13776
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13777
- if (this.isOpen === false) {
13778
- await this.formField?.sdValidate();
13779
- }
13780
- }
13781
- componentWillLoad() {
13782
- this.filteredOptions = this.options;
13783
- this.dropDownWidth = this.width;
13784
- this.initializeEvent();
13785
- }
13786
- componentDidLoad() {
13787
- if (this.autoFocus) {
13788
- this.selectRef?.focus();
13789
- }
13790
- }
13791
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
13792
- componentDidRender() {
13793
- const trigger = this.triggerRef;
13794
- const rect = trigger?.getBoundingClientRect();
13795
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
13796
- }
13797
- disconnectedCallback() {
13798
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
13799
- }
13800
- handleDocumentClick(event) {
13801
- if (!this.selectRef?.contains(event.target)) {
13802
- this.isOpen = false;
13803
- }
13804
- }
13805
- handleDocumentKeydown(keyboardEvent) {
13806
- keyboardEvent.stopPropagation();
13807
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
13808
- if (!targetKey.includes(keyboardEvent.key))
13809
- return;
13810
- keyboardEvent.preventDefault();
13811
- switch (keyboardEvent.key) {
13812
- case 'ArrowDown':
13813
- case 'ArrowUp':
13814
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
13815
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
13816
- this.itemIndex = nextIndex;
13817
- break;
13818
- case 'Enter':
13819
- const selectedOption = this.filteredOptions[this.itemIndex];
13820
- if (selectedOption && !selectedOption.disabled) {
13821
- this.handleOptionSelection(selectedOption);
13822
- }
13823
- break;
13824
- case 'Escape':
13825
- this.isOpen = false;
13826
- break;
13827
- }
13828
- }
13829
- handleOptionSelection = (option) => {
13830
- if (!option || option.disabled)
13831
- return;
13832
- const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
13833
- if (isAlreadySelected) {
13834
- // 이미 선택된 옵션인 경우, 선택 해제
13835
- this.value = this.value?.filter(opt => opt.value !== option.value) || null;
13836
- }
13837
- else {
13838
- // 새로운 옵션 선택
13839
- this.value = [...(this.value || []), option];
13840
- }
13841
- this.update?.emit(this.value);
13842
- };
13843
- getSelectedOption() {
13844
- return this.options.filter(option => this.value?.includes(option));
13845
- }
13846
- closeDropdown() {
13847
- this.isOpen = false;
13848
- }
13849
- handleTriggerClick = (event) => {
13850
- event.stopPropagation();
13851
- if (!this.disabled) {
13852
- this.isOpen = !this.isOpen;
13853
- this.dropDownShow?.emit({ isOpen: this.isOpen });
13854
- }
13855
- };
13856
- handleOptionClick = (detail) => {
13857
- const { option, event } = detail;
13858
- event.stopPropagation();
13859
- this.handleOptionSelection(option);
13860
- };
13861
- render() {
13862
- return (hAsync("sd-field", { key: '6fc9d0059e91044ef8e40881276bbef857ef1225', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'b2591c655dc27b1db16e8f40c0a33997acbee35b', class: {
13863
- 'sd-select-multiple': true,
13864
- 'sd-select-multiple--open': this.isOpen,
13865
- 'sd-select-multiple--disabled': this.disabled,
13866
- 'sd-select-multiple--error': !!this.error,
13867
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
13868
- }
13869
- renderTrigger() {
13870
- const selectedOption = this.getSelectedOption();
13871
- return (hAsync("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, hAsync("span", { class: "sd-select-multiple__value" }, !selectedOption || selectedOption.length === 0
13872
- ? this.placeholder
13873
- : selectedOption.map(option => option.label).join(', ')), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: async (event) => {
13874
- event.stopPropagation();
13875
- this.value = null;
13876
- await this.formField?.sdValidate();
13877
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
13878
- }
13879
- renderDropdown() {
13880
- if (this.isOpen === false)
13881
- return null;
13882
- const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||
13883
- this.selectRef);
13884
- return (hAsync("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, hAsync("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, useCheckbox: this.useCheckbox, useAll: this.useAll, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
13885
- }
13886
- static get watchers() { return {
13887
- "isOpen": [{
13888
- "isOpenChanged": 0
13889
- }]
13890
- }; }
13891
- static get style() { return sdSelectMultipleCss(); }
13892
- static get cmpMeta() { return {
13893
- "$flags$": 512,
13894
- "$tagName$": "sd-select-multiple",
13895
- "$members$": {
13896
- "value": [1040],
13897
- "options": [1040],
13898
- "placeholder": [1],
13899
- "optionPlaceholder": [1, "option-placeholder"],
13900
- "width": [1],
13901
- "dropdownHeight": [1, "dropdown-height"],
13902
- "autoFocus": [4, "auto-focus"],
13903
- "disabled": [4],
13904
- "clearable": [4],
13905
- "searchable": [4],
13906
- "useAll": [4, "use-all"],
13907
- "useCheckbox": [4, "use-checkbox"],
13908
- "label": [1],
13909
- "labelWidth": [8, "label-width"],
13910
- "icon": [16],
13911
- "labelTooltip": [1, "label-tooltip"],
13912
- "labelTooltipProps": [16],
13913
- "rules": [16],
13914
- "error": [4],
13915
- "optionRenderer": [16],
13916
- "isOpen": [32],
13917
- "itemIndex": [32],
13918
- "isScrolled": [32],
13919
- "sdOpen": [64],
13920
- "sdValidate": [64],
13921
- "sdReset": [64],
13922
- "sdResetValidate": [64],
13923
- "sdFocus": [64]
13924
- },
13925
- "$listeners$": undefined,
13926
- "$lazyBundleId$": "-",
13927
- "$attrsToReflect$": []
13928
- }; }
13929
- }
13930
-
13931
- const sdSelectMultipleGroupCss = () => `.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-multiple-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple-group:focus,sd-select-multiple-group:focus-visible,sd-select-multiple-group:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group{width:100%}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger{cursor:not-allowed}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{overflow:auto;width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-multiple-group__dropdown--ready{opacity:1}`;
13932
-
13933
- /**
13934
- * @deprecated sd-select-v2 (name="multi_depth")를 사용하세요.
13935
- */
13936
- class SdSelectMultipleGroup extends BaseDropdownEvent {
13937
- constructor(hostRef) {
13938
- super();
13939
- registerInstance(this, hostRef);
13940
- this.update = createEvent(this, "sdUpdate", 7);
13941
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
13942
- }
13943
- get el() { return getElement(this); }
13944
- // props
13945
- value = null;
13946
- options = [];
13947
- placeholder = '선택';
13948
- optionPlaceholder = '선택지가 없습니다.';
13949
- width = '200px';
13950
- dropdownHeight = '260px';
13951
- disabled = false;
13952
- clearable = false;
13953
- searchable = false;
13954
- useCheckbox = false;
13955
- useAll = false;
13956
- allCheckedLabel = '전체';
13957
- allCheckOptionLabel = '전체';
13958
- // props - label
13959
- label = '';
13960
- labelWidth = '';
13961
- icon = undefined;
13962
- labelTooltip = '';
13963
- labelTooltipProps = null;
13964
- // props - form
13965
- rules = [];
13966
- error = false;
13967
- // props - custom styles
13968
- containerStyle = {};
13969
- triggerStyle = {};
13970
- dropdownStyle = {};
13971
- optionStyle = {};
13972
- labelStyle = {};
13973
- // props - custom slots
13974
- optionRenderer;
13975
- // states
13976
- filteredOptions = [];
13977
- isOpen = false;
13978
- searchText = null;
13979
- itemIndex = -1;
13980
- isScrolled = false;
13981
- isDropdownReady = false;
13982
- // events
13983
- update;
13984
- dropDownShow;
13985
- selectRef;
13986
- searchRef;
13987
- triggerRef;
13988
- optionRef;
13989
- dropdownRef;
13990
- formField;
13991
- dropDownWidth = '200px';
13992
- name = nanoid$1();
13993
- async sdOpen() {
13994
- await new Promise(resolve => setTimeout(resolve, 0));
13995
- this.isOpen = true;
13996
- }
13997
- async sdValidate() {
13998
- this.formField?.sdValidate();
13999
- }
14000
- async sdReset() {
14001
- this.formField?.sdReset();
14002
- }
14003
- async sdResetValidate() {
14004
- this.formField?.sdResetValidation();
14005
- }
14006
- async sdFocus() {
14007
- this.formField?.sdFocus();
14008
- }
14009
- valueChanged() {
14010
- this.update?.emit(this.value);
14011
- }
14012
- optionsChanged() {
14013
- this.filteredOptions = this.options;
14014
- this.filterOptions();
14015
- }
14016
- searchTextChanged() {
14017
- this.filterOptions();
14018
- }
14019
- async itemIndexChanged(newIndex, oldIndex) {
14020
- if (this.searchable) {
14021
- const searchInput = await this.getNativeInputElement();
14022
- if (this.itemIndex === -1) {
14023
- searchInput?.focus({ preventScroll: true });
14024
- return;
14025
- }
14026
- else if (searchInput?.matches(':focus')) {
14027
- searchInput?.blur();
14028
- }
14029
- }
14030
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
14031
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
14032
- const actualIndex = this.useAll ? this.itemIndex + 1 : this.itemIndex;
14033
- const currentItem = optionElements?.[actualIndex];
14034
- if (!currentItem || !this.isOpen)
14035
- return;
14036
- this.optionRef = currentItem;
14037
- const isOptionDisabled = await this.optionRef.isDisabled();
14038
- if (isOptionDisabled) {
14039
- newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
14040
- return;
14041
- }
14042
- this.scrollToOption(currentItem);
14043
- }
14044
- async isOpenChanged() {
14045
- // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
14046
- this.onDropdownToggle(this.isOpen);
14047
- this.dropDownShow?.emit({ isOpen: this.isOpen });
14048
- this.isDropdownReady = false;
14049
- if (this.isOpen === false) {
14050
- await this.formField?.sdValidate();
14051
- return;
14052
- }
14053
- // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
14054
- requestAnimationFrame(() => {
14055
- requestAnimationFrame(async () => {
14056
- const selectedOptions = this.getSelectedOption();
14057
- // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
14058
- if (selectedOptions && selectedOptions.length > 0) {
14059
- const selectedIndex = this.options.indexOf(selectedOptions[0]);
14060
- const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
14061
- // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
14062
- const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
14063
- // 선택된 옵션이 화면 가운데에 오도록 index 조정
14064
- const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
14065
- const currentItem = optionElements?.[targetIndex];
14066
- if (currentItem) {
14067
- this.scrollToOption(currentItem);
14068
- }
14069
- }
14070
- this.isDropdownReady = true;
14071
- if (this.searchable) {
14072
- const searchInput = await this.getNativeInputElement();
14073
- if (searchInput) {
14074
- requestAnimationFrame(() => {
14075
- searchInput.focus({ preventScroll: true });
14076
- });
14077
- }
14078
- }
14079
- });
14080
- });
14081
- }
14082
- componentWillLoad() {
14083
- this.filteredOptions = this.options;
14084
- this.dropDownWidth = this.width;
14085
- this.initializeEvent();
14086
- }
14087
- // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
14088
- componentDidRender() {
14089
- const trigger = this.triggerRef;
14090
- const rect = trigger?.getBoundingClientRect();
14091
- this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
14092
- }
14093
- disconnectedCallback() {
14094
- this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
14095
- }
14096
- handleDocumentClick(event) {
14097
- if (!this.selectRef?.contains(event.target)) {
14098
- this.isOpen = false;
14099
- }
14100
- }
14101
- handleDocumentKeydown(keyboardEvent) {
14102
- keyboardEvent.stopPropagation();
14103
- const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
14104
- if (!targetKey.includes(keyboardEvent.key))
14105
- return;
14106
- keyboardEvent.preventDefault();
14107
- switch (keyboardEvent.key) {
14108
- case 'ArrowDown':
14109
- case 'ArrowUp':
14110
- const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
14111
- const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
14112
- this.itemIndex = nextIndex;
14113
- break;
14114
- case 'Enter':
14115
- const selectedOption = this.filteredOptions[this.itemIndex];
14116
- if (selectedOption && !selectedOption.disabled) {
14117
- this.handleOptionSelection(selectedOption);
14118
- }
14119
- break;
14120
- case 'Escape':
14121
- this.isOpen = false;
14122
- break;
14123
- }
14124
- }
14125
- // event handlers
14126
- handleTriggerClick = (event) => {
14127
- event.stopPropagation();
14128
- if (!this.disabled) {
14129
- this.isOpen = !this.isOpen;
14130
- this.dropDownShow?.emit({ isOpen: this.isOpen });
14131
- }
14132
- };
14133
- handleAllOptionClick = (detail) => {
14134
- if (detail.isSelected) {
14135
- // 이미 선택된 옵션인 경우, 선택 해제
14136
- const filterDisabledOptions = this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled);
14137
- this.value =
14138
- this.value?.filter(selected => !filterDisabledOptions.some(opt => opt.value === selected.value)) || this.value;
14139
- }
14140
- else {
14141
- // 새로운 옵션 선택
14142
- const valueSet = new Set([
14143
- ...(this.value || []),
14144
- ...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled),
14145
- ]);
14146
- this.value = Array.from(valueSet);
14147
- }
14148
- };
14149
- handleOptionClick = (detail) => {
14150
- const { option, event } = detail;
14151
- event.stopPropagation();
14152
- if (option.type === 'group')
14153
- this.handleGroupOptionClick(detail);
14154
- if (option.type === 'subgroup')
14155
- this.handleSubGroupOptionClick(detail);
14156
- if (option.type === 'item')
14157
- this.handleOptionSelection(option);
14158
- };
14159
- handleGroupOptionClick = (detail) => {
14160
- const { option, isSelected } = detail;
14161
- const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
14162
- childOptions.forEach(subgroup => {
14163
- this.handleSubGroupOptionClick({
14164
- option: subgroup,
14165
- isSelected: isSelected || isSelected === null,
14166
- });
14167
- });
14168
- };
14169
- handleSubGroupOptionClick = (detail) => {
14170
- const { option, isSelected } = detail;
14171
- const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
14172
- if (isSelected || isSelected === null) {
14173
- // 모든 자식 옵션이 선택된 경우, 모두 선택 해제
14174
- this.value =
14175
- this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||
14176
- null;
14177
- }
14178
- else {
14179
- // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택
14180
- const newSelections = childOptions.filter(child => !this.value?.some(selected => selected.value === child.value));
14181
- this.value = [...(this.value || []), ...newSelections];
14182
- }
14183
- };
14184
- filterOptions() {
14185
- if (!this.searchText || this.searchText.trim() === '') {
14186
- // 검색어가 없으면 전체 옵션 표시
14187
- this.filteredOptions = this.options;
14188
- return;
14189
- }
14190
- const searchTerm = this.searchText.toLowerCase();
14191
- const matchedOptions = new Set();
14192
- // 1. 직접 매칭되는 옵션들 찾기
14193
- this.options.forEach(option => {
14194
- if (option.label.toLowerCase().includes(searchTerm)) {
14195
- matchedOptions.add(option);
14196
- // 매칭된 옵션의 상위 그룹들도 포함
14197
- this.addParentGroups(option, matchedOptions);
14198
- }
14199
- });
14200
- // 2. Set을 배열로 변환하고 원본 순서 유지
14201
- this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
14202
- }
14203
- addParentGroups(option, matchedSet) {
14204
- if (!option.parent)
14205
- return;
14206
- const parentOption = this.options.find(opt => opt.value === option.parent);
14207
- if (parentOption && !matchedSet.has(parentOption)) {
14208
- matchedSet.add(parentOption);
14209
- // 재귀적으로 상위 그룹들도 추가
14210
- this.addParentGroups(parentOption, matchedSet);
14211
- }
14212
- }
14213
- getSelectedOption() {
14214
- return this.options.filter(option => this.value?.includes(option));
14215
- }
14216
- handleDropdownScroll = (event) => {
14217
- const target = event.target;
14218
- const scrollTop = target.scrollTop;
14219
- // 스크롤이 조금이라도 되면 그림자 표시
14220
- this.isScrolled = scrollTop > 0;
14221
- };
14222
- async getNativeInputElement() {
14223
- if (this.searchRef) {
14224
- return this.searchRef.sdGetNativeElement();
14225
- }
14226
- return null;
14227
- }
14228
- handleOptionSelection = (option) => {
14229
- if (!option || option.disabled)
14230
- return;
14231
- const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
14232
- if (isAlreadySelected) {
14233
- // 이미 선택된 옵션인 경우, 선택 해제
14234
- this.value = this.value?.filter(opt => opt.value !== option.value) || null;
14235
- }
14236
- else {
14237
- // 새로운 옵션 선택
14238
- this.value = [...(this.value || []), option];
14239
- }
14240
- };
14241
- getAllItemsUnderOption(parentOption, includeDisabled = false) {
14242
- const filterChildrenWithParent = (option) => option.parent === parentOption.value && (includeDisabled || !option.disabled);
14243
- if (parentOption.type === 'subgroup') {
14244
- return this.filteredOptions.filter(option => filterChildrenWithParent(option) && option.type === 'item');
14245
- }
14246
- const allItems = [];
14247
- const childOptions = this.filteredOptions.filter(filterChildrenWithParent);
14248
- const subgroupOptions = childOptions.filter(option => option.type === 'subgroup');
14249
- subgroupOptions.forEach(subgroup => {
14250
- const itemsUnderSubgroup = this.filteredOptions.filter(option => option.parent === subgroup.value &&
14251
- option.type === 'item' &&
14252
- (includeDisabled ? true : !option.disabled));
14253
- allItems.push(...itemsUnderSubgroup);
14254
- });
14255
- const directItems = childOptions.filter(option => option.type === 'item');
14256
- allItems.push(...directItems);
14257
- return allItems;
14258
- }
14259
- isAllChildrenSelected(groupOption) {
14260
- const allItems = this.getAllItemsUnderOption(groupOption);
14261
- if (allItems.length === 0)
14262
- return false;
14263
- const selectedItems = allItems.filter(item => this.value?.some(selected => selected.value === item.value));
14264
- if (selectedItems.length === allItems.length)
14265
- return true;
14266
- if (selectedItems.length > 0)
14267
- return null;
14268
- return false;
14269
- }
14270
- getChildrenOptions(parentOption) {
14271
- const allItems = this.getAllItemsUnderOption(parentOption, true);
14272
- const selectedCount = allItems.filter(item => this.value?.some(val => val.value === item.value)).length;
14273
- return {
14274
- selectedCount,
14275
- totalCount: allItems.length,
14276
- };
14277
- }
14278
- isAllOptionsSelected() {
14279
- if (!this.value || this.value.length === 0)
14280
- return false;
14281
- const selectableItems = this.options.filter(opt => opt.type === 'item' && !opt.disabled);
14282
- if (selectableItems.length === 0)
14283
- return false;
14284
- const selectedValues = new Set(this.value.map(v => v.value));
14285
- return selectableItems.every(option => selectedValues.has(option.value));
14286
- }
14287
- getTriggerLabel() {
14288
- const selectedOption = this.getSelectedOption();
14289
- if (!selectedOption)
14290
- return '선택';
14291
- if (selectedOption.length === 0)
14292
- return this.placeholder;
14293
- const isAllChecked = this.isAllOptionsSelected();
14294
- return isAllChecked
14295
- ? this.allCheckedLabel
14296
- : selectedOption.map(option => option.label).join(', ');
14297
- }
14298
- closeDropdown() {
14299
- this.isOpen = false;
14300
- }
14301
- async scrollToOption(optionElement) {
14302
- if (!this.dropdownRef || !optionElement)
14303
- return;
14304
- requestAnimationFrame(() => {
14305
- const dropdown = this.dropdownRef;
14306
- const optionTop = optionElement.offsetTop;
14307
- const optionHeight = optionElement.offsetHeight;
14308
- const dropdownScrollTop = dropdown.scrollTop;
14309
- const dropdownHeight = dropdown.clientHeight;
14310
- const searchContainer = dropdown.querySelector('.sd-select-multiple-group__search-container');
14311
- const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
14312
- const visibleContentHeight = dropdownHeight - searchOffset;
14313
- const visibleTop = dropdownScrollTop + searchOffset;
14314
- const visibleBottom = dropdownScrollTop + dropdownHeight;
14315
- if (optionTop < visibleTop) {
14316
- dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
14317
- }
14318
- else if (optionTop + optionHeight > visibleBottom) {
14319
- dropdown.scrollTo({
14320
- top: optionTop + optionHeight - visibleContentHeight - searchOffset,
14321
- behavior: 'instant',
14322
- });
14323
- }
14324
- });
14325
- }
14326
- render() {
14327
- return (hAsync("sd-field", { key: '4140b6529565f97fa65d81ae1462108476d52bcc', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '2dab2697f3e375d214b66464b0f57aa32e77757b', class: {
14328
- 'sd-select-multiple-group': true,
14329
- 'sd-select-multiple-group--open': this.isOpen,
14330
- 'sd-select-multiple-group--disabled': this.disabled,
14331
- 'sd-select-multiple-group--label': !!this.label,
14332
- }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
14333
- }
14334
- renderTrigger() {
14335
- const selectedOption = this.getSelectedOption();
14336
- return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: async (event) => {
14337
- event.stopPropagation();
14338
- this.value = null;
14339
- await this.formField?.sdValidate();
14340
- } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
14341
- 'sd-select-multiple-group__arrow': true,
14342
- 'sd-select-multiple-group__arrow--open': this.isOpen,
14343
- } })));
14344
- }
14345
- renderDropdown() {
14346
- const style = {
14347
- '--select-width': this.dropDownWidth || '200px',
14348
- '--select-dropdown-height': this.dropdownHeight || '260px',
14349
- };
14350
- if (this.isOpen === false)
14351
- return null;
14352
- return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { style: { width: '0', height: '0', overflow: 'visible' } }, hAsync("div", { class: {
14353
- 'sd-select-multiple-group__dropdown': true,
14354
- 'sd-select-multiple-group__dropdown--ready': this.isDropdownReady,
14355
- }, style: { ...style, ...this.dropdownStyle }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (hAsync(Fragment, null, this.useAll && (hAsync("sd-select-option-group", { option: { label: this.allCheckOptionLabel, value: '', type: 'all' }, index: 0, isSelected: this.isAllOptionsSelected(), isFocused: this.itemIndex === 0, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleAllOptionClick(detail), useCheckbox: this.useCheckbox, useIndicator: false })), this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item'
14356
- ? this.value?.some(selected => selected.value === option.value)
14357
- : this.isAllChildrenSelected(option), isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
14358
- if (option.type !== 'item' && !this.useCheckbox) {
14359
- return;
14360
- }
14361
- this.handleOptionClick(detail);
14362
- }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
14363
- }
14364
- static get watchers() { return {
14365
- "value": [{
14366
- "valueChanged": 0
14367
- }],
14368
- "options": [{
14369
- "optionsChanged": 0
14370
- }],
14371
- "searchText": [{
14372
- "searchTextChanged": 0
14373
- }],
14374
- "itemIndex": [{
14375
- "itemIndexChanged": 0
14376
- }],
14377
- "isOpen": [{
14378
- "isOpenChanged": 0
14379
- }]
14380
- }; }
14381
- static get style() { return sdSelectMultipleGroupCss(); }
14382
- static get cmpMeta() { return {
14383
- "$flags$": 772,
14384
- "$tagName$": "sd-select-multiple-group",
14385
- "$members$": {
14386
- "value": [1040],
14387
- "options": [1040],
14388
- "placeholder": [1],
14389
- "optionPlaceholder": [1, "option-placeholder"],
14390
- "width": [1],
14391
- "dropdownHeight": [1, "dropdown-height"],
14392
- "disabled": [4],
14393
- "clearable": [4],
14394
- "searchable": [4],
14395
- "useCheckbox": [4, "use-checkbox"],
14396
- "useAll": [4, "use-all"],
14397
- "allCheckedLabel": [1, "all-checked-label"],
14398
- "allCheckOptionLabel": [1, "all-check-option-label"],
14399
- "label": [1],
14400
- "labelWidth": [8, "label-width"],
14401
- "icon": [16],
14402
- "labelTooltip": [1, "label-tooltip"],
14403
- "labelTooltipProps": [16],
14404
- "rules": [16],
14405
- "error": [4],
14406
- "containerStyle": [16],
14407
- "triggerStyle": [16],
14408
- "dropdownStyle": [16],
14409
- "optionStyle": [16],
14410
- "labelStyle": [16],
14411
- "optionRenderer": [16],
14412
- "filteredOptions": [32],
14413
- "isOpen": [32],
14414
- "searchText": [32],
14415
- "itemIndex": [32],
14416
- "isScrolled": [32],
14417
- "isDropdownReady": [32],
14418
- "sdOpen": [64],
14419
- "sdValidate": [64],
14420
- "sdReset": [64],
14421
- "sdResetValidate": [64],
14422
- "sdFocus": [64]
14423
- },
14424
- "$listeners$": undefined,
14425
- "$lazyBundleId$": "-",
14426
- "$attrsToReflect$": []
14427
- }; }
14428
- }
14429
-
14430
- const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-content;line-height:0}sd-select-option .sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option .sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option .sd-select__option--focused{background-color:#E6F1FF}sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075FF;font-weight:700}sd-select-option .sd-select__option--disabled{color:#AAAAAA;cursor:not-allowed}sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075FF;color:white}`;
14431
-
14432
- class SdSelectOption {
14433
- constructor(hostRef) {
14434
- registerInstance(this, hostRef);
14435
- this.optionClick = createEvent(this, "optionClick", 7);
14436
- }
14437
- get el() { return getElement(this); }
14438
- option;
14439
- index;
14440
- isSelected = false;
14441
- isFocused = false;
14442
- optionStyle;
14443
- disabled = false;
14444
- useCheckbox = false;
14445
- isHovered = false;
14446
- async sdIsDisabled() {
14447
- return !!this.option.disabled;
14448
- }
14449
- optionClick;
14450
- handleClick = (event) => {
14451
- event.stopPropagation();
14452
- if (!this.option.disabled && !this.disabled) {
14453
- this.optionClick.emit({
14454
- option: this.option,
14455
- index: this.index,
14456
- event,
14457
- });
14458
- }
14459
- };
14460
- render() {
14461
- return (hAsync("div", { key: '413176678e27ad80c3ba51f8e32681f017d210ac', class: {
14462
- 'sd-select__option': true,
14463
- 'sd-select__option--selected': this.isSelected,
14464
- 'sd-select__option--disabled': !!this.option.disabled,
14465
- 'sd-select__option--focused': this.isFocused,
14466
- 'sd-select__option--use-checkbox': this.useCheckbox,
14467
- }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: this.handleClick }, this.useCheckbox ? (hAsync("div", { class: "sd-select__option__checkbox-wrapper" }, hAsync("sd-checkbox", { value: this.isSelected, disabled: this.option.disabled,
14468
- // checkboxStyle={
14469
- // !this.isSelected
14470
- // ? { borderColor: '#888' }
14471
- // : this.isHovered
14472
- // ? { borderColor: 'white' }
14473
- // : { borderColor: '#0075ff' }
14474
- // }
14475
- onClick: e => {
14476
- e.preventDefault();
14477
- this.handleClick(e);
14478
- } }), hAsync("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label)));
14479
- }
14480
- static get style() { return sdSelectOptionCss(); }
14481
- static get cmpMeta() { return {
14482
- "$flags$": 512,
14483
- "$tagName$": "sd-select-option",
14484
- "$members$": {
14485
- "option": [16],
14486
- "index": [2],
14487
- "isSelected": [4, "is-selected"],
14488
- "isFocused": [4, "is-focused"],
14489
- "optionStyle": [16],
14490
- "disabled": [4],
14491
- "useCheckbox": [4, "use-checkbox"],
14492
- "isHovered": [32],
14493
- "sdIsDisabled": [64]
14494
- },
14495
- "$listeners$": undefined,
14496
- "$lazyBundleId$": "-",
14497
- "$attrsToReflect$": []
14498
- }; }
14499
- }
14500
-
14501
- const sdSelectOptionGroupCss = () => `sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#F5FAFF !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#F9F9F9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#E6F1FF}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075FF;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#AAAAAA;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075FF;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}`;
14502
-
14503
- class SdSelectOptionGroup {
14504
- constructor(hostRef) {
14505
- registerInstance(this, hostRef);
14506
- this.optionClick = createEvent(this, "optionClick", 7);
14507
- }
14508
- get el() { return getElement(this); }
14509
- option;
14510
- index;
14511
- isSelected = false;
14512
- isFocused = false;
14513
- optionStyle;
14514
- disabled = false;
14515
- useCheckbox = false;
14516
- useIndicator = true;
14517
- countInfo = {
14518
- selectedCount: 0,
14519
- totalCount: 0,
14520
- };
14521
- isHovered = false;
14522
- async isDisabled() {
14523
- return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
14524
- }
14525
- optionClick;
14526
- handleClick = (option, isSelected, event) => {
14527
- event.stopPropagation();
14528
- if (option.type === 'group' || option.type === 'subgroup') {
14529
- this.optionClick.emit({
14530
- option: this.option,
14531
- isSelected,
14532
- index: this.index,
14533
- event,
14534
- });
14535
- return;
14536
- }
14537
- if (!this.option.disabled && !this.disabled) {
14538
- this.optionClick.emit({
14539
- option: this.option,
14540
- isSelected,
14541
- index: this.index,
14542
- event,
14543
- });
14544
- }
14545
- };
14546
- render() {
14547
- return (hAsync("div", { key: '647a7be115df96fe30d3b69d3b09ee45d229d86c', class: {
14548
- 'sd-select__option-group': true,
14549
- 'sd-select__option-group--selected': !!this.isSelected,
14550
- 'sd-select__option-group--disabled': !!this.option.disabled,
14551
- 'sd-select__option-group--focused': this.isFocused,
14552
- 'sd-select__option-group--use-checkbox': this.useCheckbox,
14553
- 'sd-select__option-group--group': this.option.type === 'group',
14554
- 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
14555
- 'sd-select__option-group--item': this.option.type === 'item',
14556
- }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'b1b1697c34e57667203992f8e4e6e9438f204dea', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'b67bec9cfd93739348f7d6c3e93945c28171e752', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
14557
- e.preventDefault();
14558
- this.handleClick(this.option, this.isSelected, e);
14559
- } })), hAsync("span", { key: 'a65090e487a45acec39155aa6df00a1500249e20', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '5024421742568127097655bcb39af70b61cc3403', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
14560
- }
14561
- static get style() { return sdSelectOptionGroupCss(); }
14562
- static get cmpMeta() { return {
14563
- "$flags$": 512,
14564
- "$tagName$": "sd-select-option-group",
14565
- "$members$": {
14566
- "option": [16],
14567
- "index": [2],
14568
- "isSelected": [4, "is-selected"],
14569
- "isFocused": [4, "is-focused"],
14570
- "optionStyle": [16],
14571
- "disabled": [4],
14572
- "useCheckbox": [4, "use-checkbox"],
14573
- "useIndicator": [4, "use-indicator"],
14574
- "countInfo": [16],
14575
- "isHovered": [32],
14576
- "isDisabled": [64]
14577
- },
14578
- "$listeners$": undefined,
14579
- "$lazyBundleId$": "-",
14580
- "$attrsToReflect$": []
14581
- }; }
14582
- }
14583
-
14584
- const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
14585
-
14586
- class SdSelectSearchInput {
14587
- constructor(hostRef) {
14588
- registerInstance(this, hostRef);
14589
- this.searchInput = createEvent(this, "sdSearchInput", 7);
14590
- this.searchFocus = createEvent(this, "sdSearchFocus", 7);
14591
- }
14592
- isScrolled = false;
14593
- searchText = '';
14594
- searchInput;
14595
- searchFocus;
14596
- searchRef;
14597
- async sdGetNativeElement() {
14598
- if (this.searchRef) {
14599
- return this.searchRef.sdGetNativeElement();
14600
- }
14601
- return null;
14602
- }
14603
- async sdSearchInputFocus() {
14604
- const input = await this.sdGetNativeElement();
14605
- input?.focus({ preventScroll: true });
14606
- }
14607
- render() {
14608
- return (hAsync("div", { key: 'f056d50b2a0ca1e40efabaae5071d56259d2094b', class: {
14609
- 'sd-select-search-input': true,
14610
- 'sd-select-search-input--scrolled': !!this.isScrolled,
14611
- }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '14a59374d1c7d661247ea506b4f5670893f16294', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
14612
- this.searchInput.emit(String(event?.detail));
14613
- }, onSdFocus: () => {
14614
- this.searchFocus.emit();
14615
- }, onKeyDown: event => {
14616
- if (event.code === 'Enter')
14617
- event.stopPropagation();
14618
- } }, hAsync("sd-icon", { key: 'd7e976a06b6a889a1be2b79252f1d57729953522', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
14619
- }
14620
- static get style() { return sdSelectSearchInputCss(); }
14621
- static get cmpMeta() { return {
14622
- "$flags$": 512,
14623
- "$tagName$": "sd-select-search-input",
14624
- "$members$": {
14625
- "isScrolled": [4, "is-scrolled"],
14626
- "searchText": [1, "search-text"],
14627
- "sdGetNativeElement": [64],
14628
- "sdSearchInputFocus": [64]
14629
- },
14630
- "$listeners$": undefined,
14631
- "$lazyBundleId$": "-",
14632
- "$attrsToReflect$": []
14633
- }; }
14634
- }
14635
-
14636
- const sdSelectV2Css = () => `sd-select-v2{display:inline-flex}sd-select-v2 sd-portal{display:none}sd-select-v2 .sd-select-v2{position:relative;width:100%;height:100%}`;
14637
-
14638
- class SdSelectV2 {
14639
- constructor(hostRef) {
14640
- registerInstance(this, hostRef);
14641
- this.update = createEvent(this, "sdUpdate", 7);
14642
- this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
14643
- }
14644
- static VIEWPORT_PADDING = 20;
14645
- static PORTAL_OFFSET_Y = 4;
14646
- static CLOSE_ANIMATION_DURATION = 150;
14647
- get el() { return getElement(this); }
14648
- type = 'default';
14649
- value = null;
14650
- options = [];
14651
- placeholder = '선택';
14652
- maxDropdownWidth = '640px';
14653
- dropdownHeight = '260px';
14654
- disabled = false;
14655
- label = '';
14656
- labelWidth = '';
14657
- addonLabel = '';
14658
- addonAlign = 'start';
14659
- error = false;
14660
- hint = '';
14661
- errorMessage = '';
14662
- rules = [];
14663
- icon = undefined;
14664
- labelTooltip = '';
14665
- labelTooltipProps = null;
14666
- emitValue = false;
14667
- width = '';
14668
- useSearch = false;
14669
- allSelectedLabel = '전체';
14670
- useSelectAll = false;
14671
- isOpen = false;
14672
- isAnimatingOut = false;
14673
- triggerWidth = '200px';
14674
- resolvedDropdownHeight = '260px';
14675
- resolvedMaxDropdownWidth = '640px';
14676
- focused = false;
14677
- hovered = false;
14678
- update;
14679
- dropDownShow;
14680
- async sdFocus() {
14681
- if (this.disabled)
14682
- return;
14683
- await this.triggerComponentRef?.sdFocus();
14684
- }
14685
- async sdOpen() {
14686
- // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
14687
- await new Promise(resolve => setTimeout(resolve, 0));
14688
- if (this.disabled || this.isOpen)
14689
- return;
14690
- this.prepareDropdownGeometry();
14691
- if (this.closeAnimationTimer)
14692
- clearTimeout(this.closeAnimationTimer);
14693
- this.isAnimatingOut = false;
14694
- this.isOpen = true;
14695
- }
14696
- triggerRef;
14697
- triggerComponentRef;
14698
- closeAnimationTimer;
14699
- name = nanoid$1();
14700
- triggerHasFocus = false;
14701
- watchIsOpen(newValue) {
14702
- this.syncFocusedState(newValue);
14703
- this.dropDownShow.emit({ isOpen: newValue });
14704
- }
14705
- get isMulti() {
14706
- return this.type === 'multi' || this.type === 'multi_depth';
14707
- }
14708
- get displayText() {
14709
- if (this.isMulti) {
14710
- if (!Array.isArray(this.value) || this.value.length === 0)
14711
- return '';
14712
- const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
14713
- const selected = this.getSelectedOptions();
14714
- const allSelected = nonDisabledLeaves.length > 0 &&
14715
- nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
14716
- if (allSelected)
14717
- return this.allSelectedLabel ?? '전체';
14718
- const flat = this.flattenOptions(this.options);
14719
- return this.value
14720
- .map(item => {
14721
- if (item != null && typeof item === 'object') {
14722
- const opt = item;
14723
- return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
14724
- }
14725
- return flat.find(o => o.value === item)?.label ?? '';
14726
- })
14727
- .filter(Boolean)
14728
- .join(', ');
14729
- }
14730
- if (this.value == null)
14731
- return '';
14732
- if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
14733
- return this.value.label ?? '';
14734
- }
14735
- const flat = this.flattenOptions(this.options);
14736
- const found = flat.find(o => o.value === this.value);
14737
- return found?.label ?? '';
14738
- }
14739
- flattenOptions(options) {
14740
- return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
14741
- }
14742
- getNonDisabledLeaves(options) {
14743
- return options.flatMap(o => {
14744
- if (o.disabled)
14745
- return [];
14746
- if (o.children)
14747
- return this.getNonDisabledLeaves(o.children);
14748
- return [o];
14749
- });
14750
- }
14751
- getSelectedOptions() {
14752
- const val = this.value;
14753
- if (!val || !Array.isArray(val))
14754
- return [];
14755
- if (this.emitValue) {
14756
- return val
14757
- .map(v => this.findOriginalOption(v, this.options))
14758
- .filter((o) => !!o);
14759
- }
14760
- return val;
14761
- }
14762
- toMultiValue(options) {
14763
- return this.emitValue ? options.map(o => o.value) : options;
14764
- }
14765
- parsePixelValue(value, fallback) {
14766
- const parsed = Number.parseFloat(value);
14767
- return Number.isFinite(parsed) ? parsed : fallback;
14768
- }
14769
- updateDropdownViewportConstraints() {
14770
- if (!this.triggerRef)
14771
- return;
14772
- const triggerRect = this.triggerRef.getBoundingClientRect();
14773
- const viewportPadding = SdSelectV2.VIEWPORT_PADDING;
14774
- const offsetY = SdSelectV2.PORTAL_OFFSET_Y;
14775
- const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
14776
- const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
14777
- const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
14778
- const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
14779
- const availableHeight = Math.max(availableBelow, availableAbove);
14780
- const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
14781
- this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
14782
- this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
14783
- }
14784
- handleViewportResize = () => {
14785
- if (!this.isOpen)
14786
- return;
14787
- this.updateDropdownViewportConstraints();
14788
- };
14789
- findOriginalOption(value, options) {
14790
- for (const opt of options) {
14791
- if (opt.value === value)
14792
- return opt;
14793
- if (opt.children) {
14794
- const found = this.findOriginalOption(value, opt.children);
14795
- if (found)
14796
- return found;
14797
- }
14798
- }
14799
- return undefined;
14800
- }
14801
- closeDropdown() {
14802
- if (!this.isOpen)
14803
- return;
12892
+ if (!this.isOpen)
12893
+ return;
14804
12894
  this.isOpen = false;
14805
12895
  this.isAnimatingOut = true;
14806
12896
  if (this.closeAnimationTimer)
14807
12897
  clearTimeout(this.closeAnimationTimer);
14808
12898
  this.closeAnimationTimer = setTimeout(() => {
14809
12899
  this.isAnimatingOut = false;
14810
- }, SdSelectV2.CLOSE_ANIMATION_DURATION);
12900
+ }, SdSelect.CLOSE_ANIMATION_DURATION);
14811
12901
  }
14812
12902
  prepareDropdownGeometry() {
14813
12903
  if (this.triggerRef) {
@@ -14889,30 +12979,30 @@ class SdSelectV2 {
14889
12979
  const portalProps = {
14890
12980
  open: this.isOpen,
14891
12981
  parentRef: this.triggerRef,
14892
- viewportPadding: SdSelectV2.VIEWPORT_PADDING,
12982
+ viewportPadding: SdSelect.VIEWPORT_PADDING,
14893
12983
  onSdClose: () => {
14894
12984
  this.closeDropdown();
14895
12985
  },
14896
12986
  };
14897
- return (hAsync("sd-field", { key: '62bb998e1d455a3792001da4849ba867c60cdd9f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
12987
+ return (hAsync("sd-field", { key: '76625e332090d20e2f66159bba5ee1b9a11320a6', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
14898
12988
  this.hovered = true;
14899
12989
  }, onMouseLeave: () => {
14900
12990
  this.hovered = false;
14901
- } }, hAsync("div", { key: '42fa82a3c53804d9f90aadb0465d52fd9f4e446e', class: "sd-select-v2", ref: el => {
12991
+ } }, hAsync("div", { key: '8a0ae8a5e05459128409dbe21779f5e3d91b3a04', class: "sd-select", ref: el => {
14902
12992
  this.triggerRef = el;
14903
- } }, hAsync("sd-select-v2-trigger", { key: 'c97ae1e67019b099eee72f829d554b9e0350af30', ref: el => {
12993
+ } }, hAsync("sd-select-trigger", { key: '6b47231914655a8e197e3b38cd8e37c5214efc17', ref: el => {
14904
12994
  this.triggerComponentRef = el;
14905
- }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '5018c8bf4c60a13541f0872149d12b92f164ca96', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'b7222f7649a8f096f085840a3dd97b7aa069152c', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
12995
+ }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'eaed402d276cc94a1324ede9cbf09bc436f8a1db', ...portalProps }, hAsync("sd-select-listbox", { key: 'a96f75e06d974c8fd88ac72f083fe4b0ef424a0b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
14906
12996
  }
14907
12997
  static get watchers() { return {
14908
12998
  "isOpen": [{
14909
12999
  "watchIsOpen": 0
14910
13000
  }]
14911
13001
  }; }
14912
- static get style() { return sdSelectV2Css(); }
13002
+ static get style() { return sdSelectCss(); }
14913
13003
  static get cmpMeta() { return {
14914
13004
  "$flags$": 512,
14915
- "$tagName$": "sd-select-v2",
13005
+ "$tagName$": "sd-select",
14916
13006
  "$members$": {
14917
13007
  "type": [1],
14918
13008
  "value": [1032],
@@ -15118,9 +13208,9 @@ function filterTree(options, keyword) {
15118
13208
  }, []);
15119
13209
  }
15120
13210
 
15121
- const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count{color:#ffffff}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}`;
13211
+ const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
15122
13212
 
15123
- class SdSelectV2ListItem {
13213
+ class SdSelectListItem {
15124
13214
  constructor(hostRef) {
15125
13215
  registerInstance(this, hostRef);
15126
13216
  this.listItemClick = createEvent(this, "sdListItemClick", 7);
@@ -15190,22 +13280,22 @@ class SdSelectV2ListItem {
15190
13280
  if (isDepth1Group) {
15191
13281
  cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
15192
13282
  }
15193
- return (hAsync("div", { key: '62974a8d1442730ca752b3fc11f151c4a5be4ad1', class: {
15194
- 'sd-select-v2-list-item': true,
15195
- 'sd-select-v2-list-item--group': isGroup,
15196
- 'sd-select-v2-list-item--depth1-group': isDepth1Group,
15197
- 'sd-select-v2-list-item--depth2-group': isDepth2Group,
15198
- 'sd-select-v2-list-item--selected': this.isSelected === true,
15199
- 'sd-select-v2-list-item--indeterminate': this.isSelected === null,
15200
- 'sd-select-v2-list-item--focused': this.isFocused,
15201
- 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
15202
- 'sd-select-v2-list-item--disabled': !!this.option.disabled,
15203
- }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'cf29df3617e45f3b9415b8da1beed7ba5918b8cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '478e566c74c0078ef72b90d836f67156e905bbac', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '0cde990cb1fff4898581c8c7d321c8669dfac226', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15204
- }
15205
- static get style() { return sdSelectV2ListItemCss(); }
13283
+ return (hAsync("div", { key: 'c6f959e9290213c9003914dbdd696c3c339cce51', class: {
13284
+ 'sd-select-list-item': true,
13285
+ 'sd-select-list-item--group': isGroup,
13286
+ 'sd-select-list-item--depth1-group': isDepth1Group,
13287
+ 'sd-select-list-item--depth2-group': isDepth2Group,
13288
+ 'sd-select-list-item--selected': this.isSelected === true,
13289
+ 'sd-select-list-item--indeterminate': this.isSelected === null,
13290
+ 'sd-select-list-item--focused': this.isFocused,
13291
+ 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
13292
+ 'sd-select-list-item--disabled': !!this.option.disabled,
13293
+ }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'a884bd82722cd45efc19abd2139d08596f7eda86', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '9aacbeca13e591406454ef7e1c7be40a56a2926b', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '76be4eda3799cfa329016c2ea636feaf624e5025', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
13294
+ }
13295
+ static get style() { return sdSelectListItemCss(); }
15206
13296
  static get cmpMeta() { return {
15207
13297
  "$flags$": 512,
15208
- "$tagName$": "sd-select-v2-list-item",
13298
+ "$tagName$": "sd-select-list-item",
15209
13299
  "$members$": {
15210
13300
  "option": [16],
15211
13301
  "depth": [2],
@@ -15220,9 +13310,9 @@ class SdSelectV2ListItem {
15220
13310
  }; }
15221
13311
  }
15222
13312
 
15223
- const sdSelectV2ListItemSearchCss = () => `sd-select-v2-list-item-search{display:block}sd-select-v2-list-item-search .sd-select-v2-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #CCCCCC;border-radius:4px;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner:focus-within{border-color:#0075FF}sd-select-v2-list-item-search .sd-select-v2-list-item-search__icon{flex-shrink:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input::placeholder{color:#AAAAAA}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear:hover{background:#F0F0F0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
13313
+ const sdSelectListItemSearchCss = () => `sd-select-list-item-search{display:block}sd-select-list-item-search .sd-select-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-list-item-search .sd-select-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-list-item-search .sd-select-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #CCCCCC;border-radius:4px;background:white}sd-select-list-item-search .sd-select-list-item-search__inner:focus-within{border-color:#0075FF}sd-select-list-item-search .sd-select-list-item-search__icon{flex-shrink:0}sd-select-list-item-search .sd-select-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-list-item-search .sd-select-list-item-search__input::placeholder{color:#AAAAAA}sd-select-list-item-search .sd-select-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-list-item-search .sd-select-list-item-search__clear:hover{background:#F0F0F0}sd-select-list-item-search .sd-select-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
15224
13314
 
15225
- class SdSelectV2ListItemSearch {
13315
+ class SdSelectListItemSearch {
15226
13316
  constructor(hostRef) {
15227
13317
  registerInstance(this, hostRef);
15228
13318
  this.searchFilter = createEvent(this, "sdSearchFilter", 7);
@@ -15268,20 +13358,20 @@ class SdSelectV2ListItemSearch {
15268
13358
  clearTimeout(this.debounceTimer);
15269
13359
  }
15270
13360
  render() {
15271
- return (hAsync("div", { key: '75c6b01fbe256bca732553a27711fa7197535688', class: {
15272
- 'sd-select-v2-list-item-search': true,
15273
- 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
15274
- } }, hAsync("div", { key: 'b66cd053b89942f3de55feecdd0eee79b863eb0d', class: "sd-select-v2-list-item-search__inner" }, hAsync("sd-icon", { key: 'bed6f00452187d1087b6bb4653c04e8babeaa277', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), hAsync("input", { key: '4c29192547fcf9ec2563b7d843b8e77a3eb900b1', ref: el => {
13361
+ return (hAsync("div", { key: '139aa74cb44baef15a5a75008dd291f11ad2965b', class: {
13362
+ 'sd-select-list-item-search': true,
13363
+ 'sd-select-list-item-search--scrolled': this.isScrolled,
13364
+ } }, hAsync("div", { key: '2df6559c3a0e769e50e72ef06828adcf595fc433', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '20dfe4a309c7879bcdd1e5890f183a9e1eb98fae', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '825724eedf71693ce39a21f413c5a4eb6f1495e3', ref: el => {
15275
13365
  this.inputEl = el;
15276
- }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '55f94ce6eb29cec10897259b894c3460d766268e', type: "button", class: {
15277
- 'sd-select-v2-list-item-search__clear': true,
15278
- 'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
15279
- }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: 'a7332ec5ecebf522797bb6db1fdc385c0dfa1abe', name: "close", size: 12, color: "#888888" })))));
13366
+ }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '20fb0c745d423b008f482a2e33e7e711ea40b5df', type: "button", class: {
13367
+ 'sd-select-list-item-search__clear': true,
13368
+ 'sd-select-list-item-search__clear--hidden': !this.searchText,
13369
+ }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: 'ce6e4f9b5281ebb767d6542a223e425660ec01c9', name: "close", size: 12, color: "#888888" })))));
15280
13370
  }
15281
- static get style() { return sdSelectV2ListItemSearchCss(); }
13371
+ static get style() { return sdSelectListItemSearchCss(); }
15282
13372
  static get cmpMeta() { return {
15283
13373
  "$flags$": 512,
15284
- "$tagName$": "sd-select-v2-list-item-search",
13374
+ "$tagName$": "sd-select-list-item-search",
15285
13375
  "$members$": {
15286
13376
  "isScrolled": [4, "is-scrolled"],
15287
13377
  "searchText": [32],
@@ -15293,9 +13383,9 @@ class SdSelectV2ListItemSearch {
15293
13383
  }; }
15294
13384
  }
15295
13385
 
15296
- const sdSelectV2ListboxCss = () => `:host{display:block}:host .sd-select-v2-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
13386
+ const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
15297
13387
 
15298
- class SdSelectV2Listbox {
13388
+ class SdSelectListbox {
15299
13389
  constructor(hostRef) {
15300
13390
  registerInstance(this, hostRef);
15301
13391
  this.optionSelect = createEvent(this, "sdOptionSelect", 7);
@@ -15459,7 +13549,7 @@ class SdSelectV2Listbox {
15459
13549
  get navigableOptions() {
15460
13550
  const items = [];
15461
13551
  if (this.showSelectAll) {
15462
- items.push(SdSelectV2Listbox.SELECT_ALL_OPTION);
13552
+ items.push(SdSelectListbox.SELECT_ALL_OPTION);
15463
13553
  }
15464
13554
  const walk = (opts) => {
15465
13555
  for (const opt of opts) {
@@ -15475,14 +13565,14 @@ class SdSelectV2Listbox {
15475
13565
  return items;
15476
13566
  }
15477
13567
  isSelectAllOption(option) {
15478
- return this.showSelectAll && option.value === SdSelectV2Listbox.SELECT_ALL_OPTION.value;
13568
+ return this.showSelectAll && option.value === SdSelectListbox.SELECT_ALL_OPTION.value;
15479
13569
  }
15480
13570
  emitSelectAll() {
15481
13571
  if (!this.showSelectAll)
15482
13572
  return;
15483
13573
  const allLeaves = this.getAllNonDisabledLeaves();
15484
13574
  this.optionSelect.emit({
15485
- option: { ...SdSelectV2Listbox.SELECT_ALL_OPTION, children: allLeaves },
13575
+ option: { ...SdSelectListbox.SELECT_ALL_OPTION, children: allLeaves },
15486
13576
  leaves: allLeaves,
15487
13577
  });
15488
13578
  }
@@ -15589,7 +13679,7 @@ class SdSelectV2Listbox {
15589
13679
  */
15590
13680
  scrollFocusedIntoView() {
15591
13681
  const list = this.listEl;
15592
- const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
13682
+ const focusedEl = list?.querySelector('.sd-select-list-item--focused');
15593
13683
  if (!list || !focusedEl)
15594
13684
  return;
15595
13685
  const listRect = list.getBoundingClientRect();
@@ -15635,7 +13725,7 @@ class SdSelectV2Listbox {
15635
13725
  return options.map(option => {
15636
13726
  const isGroup = !!option.children;
15637
13727
  return [
15638
- hAsync("sd-select-v2-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
13728
+ hAsync("sd-select-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
15639
13729
  isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
15640
13730
  ];
15641
13731
  });
@@ -15647,19 +13737,19 @@ class SdSelectV2Listbox {
15647
13737
  '--listbox-max-height': this.maxHeight,
15648
13738
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15649
13739
  };
15650
- return (hAsync("div", { key: '34efe12dfb3829dd7024eb473d0bb6460ad07e61', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: 'd59a97386213e93f905a817b7c3242d1fb5d5035', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '0feb6763afe5ac661de85df2c1a3683e56b17035', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
13740
+ return (hAsync("div", { key: 'c1582b1bc6058b78a8581511854f0878e7f39a94', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '4fd2099bf8069f258596479123053a34a41c528d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'ff8643a308b07dbaebf627c7082a37efa6b72a10', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
15651
13741
  this.listEl = el;
15652
- } }, this.showSelectAll && (hAsync("sd-select-v2-list-item", { key: 'b4a765ddfadd39808baafd925d0cd2fcdab78800', option: SdSelectV2Listbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectV2Listbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectV2Listbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
13742
+ } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '30f0cfbc24304af8c704db33d0e51236971226ee', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
15653
13743
  }
15654
13744
  static get watchers() { return {
15655
13745
  "searchKeyword": [{
15656
13746
  "resetFocusOnFilter": 0
15657
13747
  }]
15658
13748
  }; }
15659
- static get style() { return sdSelectV2ListboxCss(); }
13749
+ static get style() { return sdSelectListboxCss(); }
15660
13750
  static get cmpMeta() { return {
15661
13751
  "$flags$": 521,
15662
- "$tagName$": "sd-select-v2-listbox",
13752
+ "$tagName$": "sd-select-listbox",
15663
13753
  "$members$": {
15664
13754
  "type": [1],
15665
13755
  "options": [16],
@@ -15680,9 +13770,9 @@ class SdSelectV2Listbox {
15680
13770
  }; }
15681
13771
  }
15682
13772
 
15683
- const sdSelectV2TriggerCss = () => `sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}`;
13773
+ const sdSelectTriggerCss = () => `sd-select-trigger{display:block;width:100%;height:100%}sd-select-trigger .sd-select-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-trigger .sd-select-trigger--disabled{cursor:not-allowed}sd-select-trigger .sd-select-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-trigger .sd-select-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-trigger .sd-select-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-trigger .sd-select-trigger__icon--open{transform:rotate(180deg)}`;
15684
13774
 
15685
- class SdSelectV2Trigger {
13775
+ class SdSelectTrigger {
15686
13776
  constructor(hostRef) {
15687
13777
  registerInstance(this, hostRef);
15688
13778
  this.triggerClick = createEvent(this, "sdTriggerClick", 7);
@@ -15730,21 +13820,21 @@ class SdSelectV2Trigger {
15730
13820
  ? SELECT_COLORS.icon.disabled
15731
13821
  : SELECT_COLORS.icon.default,
15732
13822
  };
15733
- return (hAsync("div", { key: 'ec8bf544b2878082a046fbe881afa2369709033f', ref: el => {
13823
+ return (hAsync("div", { key: 'dddccfd47738e104a9c715a0c93df1882d28d704', ref: el => {
15734
13824
  this.triggerEl = el;
15735
13825
  }, tabindex: this.disabled ? -1 : 0, class: {
15736
- 'sd-select-v2-trigger': true,
15737
- 'sd-select-v2-trigger--open': this.isOpen,
15738
- 'sd-select-v2-trigger--disabled': this.disabled,
15739
- }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '1a6a5cf66208aa5a996e788886ff593ec0830d51', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: 'bd905f9149f3842e5e169e1a6086b33164b0ab66', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: 'cc487e430f42fdd61540e265a9e5bb01e9045a58', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
15740
- 'sd-select-v2-trigger__icon': true,
15741
- 'sd-select-v2-trigger__icon--open': this.isOpen,
13826
+ 'sd-select-trigger': true,
13827
+ 'sd-select-trigger--open': this.isOpen,
13828
+ 'sd-select-trigger--disabled': this.disabled,
13829
+ }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '9f8572c4ec3fa02c9f94bb94a8a10358c4d6b3ae', class: "sd-select-trigger__content" }, hAsync("span", { key: 'a4b5b27fc3a84adbd2e24981742ca45402993afb', class: "sd-select-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: '97bbcda656bae2248ca83fb2bd56373b2dd8dd41', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
13830
+ 'sd-select-trigger__icon': true,
13831
+ 'sd-select-trigger__icon--open': this.isOpen,
15742
13832
  } }))));
15743
13833
  }
15744
- static get style() { return sdSelectV2TriggerCss(); }
13834
+ static get style() { return sdSelectTriggerCss(); }
15745
13835
  static get cmpMeta() { return {
15746
13836
  "$flags$": 512,
15747
- "$tagName$": "sd-select-v2-trigger",
13837
+ "$tagName$": "sd-select-trigger",
15748
13838
  "$members$": {
15749
13839
  "displayText": [1, "display-text"],
15750
13840
  "placeholder": [1],
@@ -15858,7 +13948,7 @@ class SdSwitch {
15858
13948
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
15859
13949
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
15860
13950
  };
15861
- return (hAsync("label", { key: '469c012285d3c8a33792a460e74d8566c384efe8', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '9678e3325339a47e3e2d81ce3cd752c86ed0f906', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '47348914869f5215957a652cfcf3a11807a0216f', class: "sd-switch__track" }, hAsync("div", { key: '0676260c42e6b79acec710f0f9ba72f01a3a7c18', class: "sd-switch__knob" })), this.label && hAsync("span", { key: 'b92597092795bff38d2acf0cff76f9c381435438', class: "sd-switch__label" }, this.label)));
13951
+ return (hAsync("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, hAsync("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
15862
13952
  }
15863
13953
  static get style() { return sdSwitchCss(); }
15864
13954
  static get cmpMeta() { return {
@@ -15902,7 +13992,98 @@ function nanoid(size = 21) {
15902
13992
 
15903
13993
  const TABLE_ID_ATTR = 'table-id';
15904
13994
 
15905
- const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__clip{width:100%;min-width:0;height:var(--table-container-height, 400px);border:1px solid #E1E1E1;border-radius:8px;overflow:hidden}.sd-table__clip--has-pagination{border-radius:8px 8px 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-size:12px;overflow:auto;background:#FFFFFF}.sd-table__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #E1E1E1;border-top:none;border-radius:0 0 8px 8px}.sd-table__pagination sd-select-v2{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
13995
+ const table = {
13996
+ header: {
13997
+ height: "36",
13998
+ paddingX: "16",
13999
+ gap: "4",
14000
+ bg: "#F5FAFF",
14001
+ typography: {
14002
+ fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
14003
+ fontWeight: "500",
14004
+ fontSize: "12",
14005
+ lineHeight: "20",
14006
+ textDecoration: "none"
14007
+ },
14008
+ resizingBar: {
14009
+ color: "#CCCCCC",
14010
+ height: "16"
14011
+ }
14012
+ },
14013
+ body: {
14014
+ "default": {
14015
+ height: "44"},
14016
+ paddingX: "16",
14017
+ typography: {
14018
+ fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
14019
+ fontWeight: "400",
14020
+ fontSize: "12",
14021
+ lineHeight: "20",
14022
+ textDecoration: "none"
14023
+ }
14024
+ },
14025
+ border: {
14026
+ "default": "#E1E1E1",
14027
+ width: {
14028
+ width: "1"
14029
+ }
14030
+ },
14031
+ radius: "8"};
14032
+ var tableTokens = {
14033
+ table: table
14034
+ };
14035
+
14036
+ // ── Header Tokens ──
14037
+ const TABLE_HEADER_LAYOUT = {
14038
+ height: tableTokens.table.header.height,
14039
+ paddingX: tableTokens.table.header.paddingX,
14040
+ gap: tableTokens.table.header.gap,
14041
+ };
14042
+ const TABLE_HEADER_TYPOGRAPHY = {
14043
+ fontFamily: tableTokens.table.header.typography.fontFamily,
14044
+ fontWeight: tableTokens.table.header.typography.fontWeight,
14045
+ fontSize: tableTokens.table.header.typography.fontSize,
14046
+ lineHeight: tableTokens.table.header.typography.lineHeight,
14047
+ textDecoration: tableTokens.table.header.typography.textDecoration,
14048
+ };
14049
+ const TABLE_HEADER_COLORS = {
14050
+ bg: tableTokens.table.header.bg,
14051
+ };
14052
+ const TABLE_HEADER_RESIZING_BAR = {
14053
+ color: tableTokens.table.header.resizingBar.color,
14054
+ height: tableTokens.table.header.resizingBar.height,
14055
+ };
14056
+ // ── Body Tokens ──
14057
+ const TABLE_BODY_LAYOUT = {
14058
+ default: {
14059
+ height: tableTokens.table.body.default.height},
14060
+ paddingX: tableTokens.table.body.paddingX};
14061
+ const TABLE_BODY_TYPOGRAPHY = {
14062
+ fontFamily: tableTokens.table.body.typography.fontFamily,
14063
+ fontWeight: tableTokens.table.body.typography.fontWeight,
14064
+ fontSize: tableTokens.table.body.typography.fontSize,
14065
+ lineHeight: tableTokens.table.body.typography.lineHeight,
14066
+ textDecoration: tableTokens.table.body.typography.textDecoration,
14067
+ };
14068
+ // ── Frame / Border Tokens ──
14069
+ const TABLE_BORDER = {
14070
+ color: tableTokens.table.border.default,
14071
+ width: tableTokens.table.border.width.width,
14072
+ };
14073
+ const TABLE_RADIUS = tableTokens.table.radius;
14074
+ // ── Header Icon Color Defaults ──
14075
+ const ICON_DEFAULT_COLOR = {
14076
+ pageEdit: systemTokens.color.darkblue.strong,
14077
+ arrowDown: systemTokens.color.darkblue.strong,
14078
+ arrowUp: systemTokens.color.darkblue.strong,
14079
+ updown: systemTokens.color.grey.strong,
14080
+ pageMove: systemTokens.color.darkblue.strong,
14081
+ star: systemTokens.color.blue.strong,
14082
+ };
14083
+ const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
14084
+ const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
14085
+
14086
+ const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__clip{width:100%;min-width:0;height:var(--table-container-height, 400px);border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__clip--has-pagination{border-radius:var(--table-radius, 8px) var(--table-radius, 8px) 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data ::slotted(*),.sd-table__no-data span{pointer-events:auto}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-top:none;border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
15906
14087
 
15907
14088
  class SdTable {
15908
14089
  constructor(hostRef) {
@@ -16523,12 +14704,10 @@ class SdTable {
16523
14704
  const allRows = this.rows ?? [];
16524
14705
  const pageInfo = this.getPaginationInfoSync();
16525
14706
  const startIdx = pageInfo?.startIndex ?? 0;
16526
- const displayed = pageInfo
16527
- ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex)
16528
- : allRows;
14707
+ const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
16529
14708
  return displayed.map((row, i) => {
16530
14709
  const absoluteIdx = startIdx + i;
16531
- return (hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row }));
14710
+ return hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
16532
14711
  });
16533
14712
  }
16534
14713
  get tableClasses() {
@@ -16550,24 +14729,34 @@ class SdTable {
16550
14729
  }
16551
14730
  render() {
16552
14731
  const resolvedTableId = this.getResolvedTableId();
16553
- return (hAsync(Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, hAsync("div", { key: 'f51d23212885ad8121b9a4e895fb854f1e142bc4', class: "sd-table__container", style: {
14732
+ const hostStyle = {
14733
+ '--table-radius': `${TABLE_RADIUS}px`,
14734
+ '--table-border-color': TABLE_BORDER.color,
14735
+ '--table-border-width': `${TABLE_BORDER.width}px`,
14736
+ '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
14737
+ '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
14738
+ '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
14739
+ '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
14740
+ '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
14741
+ };
14742
+ return (hAsync(Host, { key: '1a80b7c3589a8a2eefaabf24ed895c927543aac4', style: hostStyle }, hAsync("div", { key: 'd97aa6c04948153671e26066b6df02e206fc35e6', class: "sd-table__container", style: {
16554
14743
  '--table-width': this.width,
16555
14744
  '--table-height': this.height,
16556
14745
  '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
16557
- } }, hAsync("div", { key: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
14746
+ } }, hAsync("div", { key: '0e13dbbe062953c93a0acaaf5c00ca40a5b7e245', class: {
16558
14747
  'sd-table__clip': true,
16559
14748
  'sd-table__clip--has-pagination': !!(this.pagination &&
16560
14749
  this.pagination.rowsPerPage > 0 &&
16561
14750
  this.rowCount > 0 &&
16562
14751
  !this.useVirtualScroll),
16563
- } }, hAsync("div", { key: 'c901eba67eae29515bf0b3edcc6632b2aacf0f80', class: {
14752
+ } }, hAsync("div", { key: 'c800ecac543d1540d9b6c9faf06753c9dc10aaf3', class: {
16564
14753
  'sd-table__wrapper': true,
16565
14754
  'sd-table__wrapper--loading': this.isLoading,
16566
14755
  'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
16567
- } }, this.isLoading && (hAsync("div", { key: '35a237d0203b2479dbdb77ac42c918a9375bdfd3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '21a29981c1cdbd679f46abd2e7de7794c9ebbca9', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '07ad28bc6e7556cfe229fc1e952410f388424a7f', class: "sd-table__no-data" }, hAsync("slot", { key: 'bf21e60f5b86614587b704bea2965b9467c7f467', name: "no-data" }, hAsync("span", { key: 'f3d012d12e9189545b0cef52250502d46cb9a764' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '655d3dc017c6445ec454faef0e5e9837b7ee0013', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
14756
+ } }, this.isLoading && (hAsync("div", { key: '656bc53538c8513e014f31f1e976fd66ce79c7aa', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '74078add6860fc95e238d89335d57e205e751cd6', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '18a33a7247bde3d08472f8082325c76217734e5d', class: "sd-table__no-data" }, hAsync("slot", { key: '966cb066f721695013a3e5a1a64543544b09fa77', name: "no-data" }, hAsync("span", { key: 'd335a9b1b2e847b267cefb9d12f7265c5f67f394' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '8fd0a2428bfd4dd6a574bbb02139088c31408866', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
16568
14757
  this.pagination.rowsPerPage > 0 &&
16569
14758
  this.rowCount > 0 &&
16570
- !this.useVirtualScroll && (hAsync("div", { key: '7ab0b30a0c0e0a197b0f79c6b07ef5614d5d2879', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '71d44bba5a82f4d8f7c067e525db15fe9a36c305', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select-v2", { key: 'a9ab33347db0714da188f658a2ca1902502db690', value: this.useInternalPagination
14759
+ !this.useVirtualScroll && (hAsync("div", { key: '6f483b1a23456bbe42ff769a50c9de5638e7754f', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '841c545c23de8b4bba4cce3c9f6608d16f7b4e54', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'a67e17bf3067953169ffa119ee41b1d7f46c2058', value: this.useInternalPagination
16571
14760
  ? this.innerRowsPerPage
16572
14761
  : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
16573
14762
  if (!this.isRowsPerPageValue(e.detail))
@@ -16850,7 +15039,7 @@ class SdTabs {
16850
15039
  };
16851
15040
  }
16852
15041
  render() {
16853
- return (hAsync("div", { key: '3698b7b43e74ff053d61d5ce696b987373fd27d6', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
15042
+ return (hAsync("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16854
15043
  const badgeName = this.getBadgeName(tab);
16855
15044
  return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (hAsync("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
16856
15045
  })));
@@ -17046,7 +15235,7 @@ class SdTag {
17046
15235
  render() {
17047
15236
  const config = this.resolvedConfig;
17048
15237
  const iconNode = this.renderIcon(config.icon, config.iconSize);
17049
- return (hAsync("span", { key: 'def10730670f37a62fa76b507f7f15a1b1f956fc', class: "sd-tag", style: {
15238
+ return (hAsync("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
17050
15239
  '--sd-tag-background': config.background,
17051
15240
  '--sd-tag-content': config.content,
17052
15241
  '--sd-tag-height': config.height,
@@ -17056,7 +15245,7 @@ class SdTag {
17056
15245
  '--sd-tag-font-weight': config.fontWeight,
17057
15246
  '--sd-tag-line-height': config.lineHeight,
17058
15247
  '--sd-tag-radius': config.radius,
17059
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '32082536736e20074263632aa29f36bc7709db39', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
15248
+ }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '8da56711cb12127f96195404799581480280507f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
17060
15249
  }
17061
15250
  static get style() { return sdTagCss(); }
17062
15251
  static get cmpMeta() { return {
@@ -17074,7 +15263,7 @@ class SdTag {
17074
15263
  }; }
17075
15264
  }
17076
15265
 
17077
- const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}.tbody--empty .tbody__no-data-row{display:table-row}.tbody--empty .tbody__no-data-cell{display:table-cell;padding:0;border-bottom:none}`;
15266
+ const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
17078
15267
 
17079
15268
  class SdTbody {
17080
15269
  constructor(hostRef) {
@@ -17124,12 +15313,11 @@ class SdTbody {
17124
15313
  }
17125
15314
  }
17126
15315
  render() {
17127
- const hasRows = this.rows.length > 0;
17128
- return (hAsync(Host, { key: 'bc9fbd4f08f4d77da60b083dceef4e24e2fb5532', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '81ef875cbc39f988021a211ede716a98d3ea30cd', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
15316
+ return (hAsync(Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', class: { tbody: true } }, [
17129
15317
  this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
17130
- hAsync("slot", null),
15318
+ hAsync("slot", { key: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
17131
15319
  this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
17132
- ]) : (hAsync("tr", { class: "tbody__no-data-row" }, hAsync("td", { class: "tbody__no-data-cell", colSpan: 100 }, hAsync("slot", { name: "no-data" })))))));
15320
+ ])));
17133
15321
  }
17134
15322
  static get watchers() { return {
17135
15323
  "rows": [{
@@ -17232,7 +15420,7 @@ class SdTd {
17232
15420
  }
17233
15421
  }
17234
15422
  render() {
17235
- return (hAsync(Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
15423
+ return (hAsync(Host, { key: '1702396f538453cf26beb81b63926ea73b7baa89', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'bd04afefd83178f48eb93b4e7d189386a817ff72' })));
17236
15424
  }
17237
15425
  static get watchers() { return {
17238
15426
  "field": [{
@@ -17336,16 +15524,16 @@ class SdTextLink {
17336
15524
  '--sd-text-link-text-decoration': typo.textDecoration,
17337
15525
  ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
17338
15526
  };
17339
- return (hAsync("span", { key: '77c1aa4a4a6297af9431947b7146db2ddfad52b5', class: {
15527
+ return (hAsync("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
17340
15528
  'sd-text-link': true,
17341
15529
  'sd-text-link--disabled': this.disabled,
17342
- }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '6f760b3c7e0adccd2aa08cb662cca90a3d3a227b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '3ff017970956d8e5cb72b4d6e26d33aaf0551e76', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: '8332cbe3b2283ce866044e55804e35338569a38f', class: "sd-text-link__arrow", style: {
15530
+ }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '9d63aea3c45c4962e5766e7059a166a85e7a357f', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: 'dc73d60dd1e593c597a6b5dd977db380c21ff680', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: '2b25dfb6ae2f857b674341427f93ee34e4691893', class: "sd-text-link__arrow", style: {
17343
15531
  width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
17344
15532
  height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
17345
15533
  display: 'inline-flex',
17346
15534
  alignItems: 'center',
17347
15535
  justifyContent: 'center',
17348
- } }, hAsync("sd-icon", { key: '2fa166ef60f6d1ee933450146bc667ee89dad2ce', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
15536
+ } }, hAsync("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
17349
15537
  }
17350
15538
  static get style() { return sdTextLinkCss(); }
17351
15539
  static get cmpMeta() { return {
@@ -17492,7 +15680,7 @@ class SdTextarea {
17492
15680
  '--sd-system-size-field-sm-height': 'auto',
17493
15681
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
17494
15682
  };
17495
- return (hAsync("sd-field", { key: 'a77834af45e2ca7abaa019d18b6108a51f0cf4ae', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '2cbc8ef4febeab89eb336cb29d34abdbf9f2f080', class: "sd-textarea__content" }, hAsync("textarea", { key: '3b09e30b4e42affc7f03fb8a354387b57e5ee0fe', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
15683
+ return (hAsync("sd-field", { key: 'ca7dc6c13d22ba43cd99ee1e976599d7efb1eceb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'a36ffabff714596bf780f2a63ccfde3e02eadda7', class: "sd-textarea__content" }, hAsync("textarea", { key: 'b7f8a55b7ee4dfc394c380a97e21c6cc34d12b9b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
17496
15684
  }
17497
15685
  static get watchers() { return {
17498
15686
  "value": [{
@@ -17546,11 +15734,12 @@ class SdTextarea {
17546
15734
  }; }
17547
15735
  }
17548
15736
 
17549
- const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:36px}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:#F5FAFF;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #E1E1E1;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:#F5FAFF;z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:#F5FAFF;z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC}.th__resizer--left{right:auto;left:0}`;
15737
+ const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
17550
15738
 
17551
15739
  class SdThead {
17552
15740
  constructor(hostRef) {
17553
15741
  registerInstance(this, hostRef);
15742
+ this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
17554
15743
  }
17555
15744
  get el() { return getElement(this); }
17556
15745
  columns;
@@ -17562,6 +15751,7 @@ class SdThead {
17562
15751
  scrolledRight;
17563
15752
  rows = [];
17564
15753
  columnWidths = [];
15754
+ sdColumnSort;
17565
15755
  tableId = '';
17566
15756
  _columns = [];
17567
15757
  _selectable = false;
@@ -17662,9 +15852,11 @@ class SdThead {
17662
15852
  this.tableEl.handleResize(index, event, reversed);
17663
15853
  }
17664
15854
  }
15855
+ handleColumnSort = (col) => {
15856
+ this.sdColumnSort.emit({ column: col });
15857
+ };
17665
15858
  handleSelectAll(checked) {
17666
- const currentState = this.getIsAllChecked();
17667
- const nextChecked = currentState === null ? false : !!checked;
15859
+ const nextChecked = !!checked;
17668
15860
  const safeRows = Array.isArray(this.rows) ? this.rows : [];
17669
15861
  if (this.tableEl?.toggleSelectAllSync) {
17670
15862
  this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
@@ -17684,27 +15876,42 @@ class SdThead {
17684
15876
  const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
17685
15877
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
17686
15878
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
17687
- return (hAsync(Host, { key: '5aa1e38311b542d1a0b05b55abc7ef41927508bd', slot: `${this.tableId}-head` }, hAsync("thead", { key: '6d17753988ecd02d900d8a3bd7f2115b534b68a7', class: {
15879
+ const headStyle = {
15880
+ '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
15881
+ '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
15882
+ '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
15883
+ '--table-header-bg': TABLE_HEADER_COLORS.bg,
15884
+ '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
15885
+ '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
15886
+ '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
15887
+ '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
15888
+ '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
15889
+ '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
15890
+ '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
15891
+ '--table-border-color': TABLE_BORDER.color,
15892
+ '--table-border-width': `${TABLE_BORDER.width}px`,
15893
+ };
15894
+ return (hAsync(Host, { key: 'c4468056cc20a78516e61bccaf4d11c098e83ec6', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'a9befd1728baf2104bfb9132557d5c5c0eb49748', class: {
17688
15895
  'thead': true,
17689
15896
  'thead--sticky': this._stickyHeader,
17690
- } }, hAsync("tr", { key: '9cc729603e126da2f9c8923fe29ece10c7750bb4', class: "tr" }, this._selectable && (hAsync("th", { key: '37b2bcfa77eaf4c44465684c49ae84d566acc18b', class: {
15897
+ } }, hAsync("tr", { key: 'da786d82d4896b6124becf42f634bcc5b0a6ffb7', class: "tr" }, this._selectable && (hAsync("th", { key: 'b257c5475b7e528fbfc52ea85031a4c49bed7b36', class: {
17691
15898
  'th': true,
17692
15899
  'th--selected': true,
17693
15900
  'sticky-left': true,
17694
15901
  'sticky-left-edge': stickyLeftCount === 0,
17695
15902
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
17696
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '4284894821640ee1bdbd12b1759efb01e6c06488', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
15903
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '6624026c1811c809eeb5131518ddb8c11f66b541', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
17697
15904
  'th': true,
17698
15905
  [`${col.thClass}`]: Boolean(col.thClass),
17699
15906
  'sticky-left': true,
17700
15907
  'sticky-left-edge': idx === stickyLeftCount - 1,
17701
15908
  'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
17702
- }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && (hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
15909
+ }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && (hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
17703
15910
  const actualColIdx = stickyLeftCount + relativeIdx;
17704
15911
  return (hAsync("th", { key: col.name, class: {
17705
15912
  th: true,
17706
15913
  [`${col.thClass}`]: Boolean(col.thClass),
17707
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && (hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
15914
+ }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && (hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
17708
15915
  }), stickyRightCols.map((col, relativeIdx) => {
17709
15916
  const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
17710
15917
  return (hAsync("th", { key: col.name, class: {
@@ -17713,7 +15920,7 @@ class SdThead {
17713
15920
  'sticky-right': true,
17714
15921
  'sticky-right-edge': relativeIdx === 0,
17715
15922
  'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
17716
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && (hAsync("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
15923
+ }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this._resizable && (hAsync("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
17717
15924
  })))));
17718
15925
  }
17719
15926
  static get watchers() { return {
@@ -17808,10 +16015,10 @@ class SdToast {
17808
16015
  render() {
17809
16016
  const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
17810
16017
  const iconSize = Number(TOAST_LAYOUT.iconSize);
17811
- return (hAsync("div", { key: '77954c9d285339cb48032eec5eca0dcbe308affc', style: {
16018
+ return (hAsync("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
17812
16019
  '--sd-toast-bg': typeConfig.bg,
17813
16020
  '--sd-toast-text': typeConfig.content,
17814
- } }, hAsync("div", { key: '73c792f19982140f91397a3ec7d6e22914ca316f', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'cc140bfd043b0d0cd6a7697053f736dac707f86b', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '85f38036cd39cb4d0f4a43ef0d307ef9faa03eb1', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '4d36e34a9ccac80fc2ed01f33b1e2aa80d70c78b', class: "sd-toast__content" }, hAsync("span", { key: '9105d37004bbde90e8a7118ca5a58a6e4d6953f5', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'fdaabae7d8efb6540ce770cc5783b286789cdb3c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: 'c5985e50041b8f3e8c77e142fd06afaf0537de47', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
16021
+ } }, hAsync("div", { key: '68362fac26744fc7e805a18c589f4aff5845edc1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '8ec7941b469b6d0242ab68b7928a9dbf6e75bb5f', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'c057a100de91cecc3435bfa6a95c928727eb1836', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '21e84dd6cdf7efa52611da532a0983268c7c2cb2', class: "sd-toast__content" }, hAsync("span", { key: '99c370fe3d4a54103fbccef395afadf2923f3613', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '3ce7109c2d1f5cd03f4fcc6bb01ede14c6400734', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: '2cf982fd1fe538533ceff61bbdecdacd2d69e51c', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
17815
16022
  }
17816
16023
  static get style() { return sdToastCss(); }
17817
16024
  static get cmpMeta() { return {
@@ -18063,7 +16270,7 @@ class SdToastContainer {
18063
16270
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
18064
16271
  const indexMap = new Map();
18065
16272
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
18066
- return (hAsync("div", { key: '5057793be2d6ce213edc84d58f7273248646dc19', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
16273
+ return (hAsync("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
18067
16274
  this.expanded = true;
18068
16275
  this.pauseTimers();
18069
16276
  }, onMouseLeave: () => {
@@ -18221,7 +16428,7 @@ class SdToggle {
18221
16428
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
18222
16429
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
18223
16430
  };
18224
- return (hAsync("label", { key: 'e9bb126d92605cdd3a88ff1840aa79a4b66c7cf8', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '41c18a29c10ae91b84ecd6d2619a40ab99f5d151', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
16431
+ return (hAsync("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
18225
16432
  }
18226
16433
  static get style() { return sdToggleCss(); }
18227
16434
  static get cmpMeta() { return {
@@ -18348,14 +16555,14 @@ class SdTooltip {
18348
16555
  const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
18349
16556
  const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
18350
16557
  const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
18351
- return (hAsync(Fragment, { key: 'b5368ef5aced50890707aeb99c82de5784e7acf1' }, hAsync("div", { key: 'aeac6276d7e36e315093770d03671d83b339137a', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '7e24c9f16d326f787a7441753ae138e08ebe3f78', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '4681dfcb409ec7b072be6bf82bd42c5ebce29100', ref: el => (this.menuEl = el), class: {
16558
+ return (hAsync(Fragment, { key: '9e14a4013ea6d04a37529cf7afdb10fe4b3d98eb' }, hAsync("div", { key: 'd98396d4440a795e59b0d2fede7381f8e0da7280', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '59d42ad7aafd94fbe89fc5af3bddf5a305e13a4c', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '88a927d2c3461c7c68865262e8565d0d1385e9af', ref: el => (this.menuEl = el), class: {
18352
16559
  'sd-floating-menu': true,
18353
16560
  [`sd-floating-menu--${tooltipType}`]: true,
18354
16561
  [`sd-floating-menu--${placement}`]: true,
18355
16562
  }, style: {
18356
16563
  '--sd-floating-bg': typeConfig.bg,
18357
16564
  '--sd-floating-content': typeConfig.content,
18358
- }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'e74368ffeabb85d4d4257e4695b1979c8f63495d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'e4f5b3031eb0cabcadf9fd0f564f6adf4515c14f' })), hAsync("div", { key: '3399759f60874f2f8a5ebf3e2c618dab94289aec', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
16565
+ }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'eb2bcb4e6faa2066e309b662f372fbf8bef42a3e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'f13005f88ef3194d43de72a87ee78f2c0858682e' })), hAsync("div", { key: '726aff3af3603593d0b994ee17ba88cec071868a', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
18359
16566
  }
18360
16567
  static get style() { return sdTooltipCss(); }
18361
16568
  static get cmpMeta() { return {
@@ -18382,7 +16589,7 @@ class SdTooltip {
18382
16589
  }; }
18383
16590
  }
18384
16591
 
18385
- const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:44px;padding:0 16px;border-bottom:1px solid #E1E1E1;background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}`;
16592
+ const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:var(--table-body-height, 44px);padding:0 var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}`;
18386
16593
 
18387
16594
  class SdTr {
18388
16595
  constructor(hostRef) {
@@ -18531,13 +16738,25 @@ class SdTr {
18531
16738
  const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
18532
16739
  const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
18533
16740
  const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
18534
- return (hAsync(Host, { key: 'e8d387043d3384daffb5d548176b469a91264225', style: { display: this.isVisible ? '' : 'none' } }, hAsync("tr", { key: '1d579819497a6186941b0c80c916a83c48dfcc0d', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { key: '1a8ab44a8c65926eb9a7bd9e9224d0eed55ecfb1', class: {
16741
+ const rowStyle = {
16742
+ display: this.isVisible ? '' : 'none',
16743
+ '--table-body-height': `${TABLE_BODY_LAYOUT.default.height}px`,
16744
+ '--table-body-padding-x': `${TABLE_BODY_LAYOUT.paddingX}px`,
16745
+ '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
16746
+ '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
16747
+ '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
16748
+ '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
16749
+ '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
16750
+ '--table-border-color': TABLE_BORDER.color,
16751
+ '--table-border-width': `${TABLE_BORDER.width}px`,
16752
+ };
16753
+ return (hAsync(Host, { key: '33228ee9f020f915e77f9827e9360087fc2cd565', style: rowStyle }, hAsync("tr", { key: '2f308a547ad19584e509543027cf60ff8faec2f8', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { key: '94f50aa6fd31a63d8d99e8c6f25faf8ba6f68ddf', class: {
18535
16754
  'td': true,
18536
16755
  'td--selected': true,
18537
16756
  'sticky-left': true,
18538
16757
  'sticky-left-edge': stickyLeftCount === 0,
18539
16758
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
18540
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '72bdbadc76dcb0682eb4de496e9abda692a0ea7e', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
16759
+ }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: 'e8808068b601529c95b8055c16e7af8a746bdccc', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
18541
16760
  if (this.isCovered(idx))
18542
16761
  return null;
18543
16762
  const span = this.getSpanFor(col);
@@ -18608,7 +16827,6 @@ class SdTr {
18608
16827
  }
18609
16828
 
18610
16829
  registerComponents([
18611
- DataTable,
18612
16830
  SdActionModal,
18613
16831
  SdBadge,
18614
16832
  SdBarcodeInput,
@@ -18643,23 +16861,14 @@ registerComponents([
18643
16861
  SdPagination,
18644
16862
  SdPopover,
18645
16863
  SdPortal,
18646
- SdProgress,
18647
16864
  SdRadio,
18648
16865
  SdRadioButton,
18649
16866
  SdRadioGroup,
18650
16867
  SdSelect,
18651
- SdSelectDropdown,
18652
- SdSelectGroup,
18653
- SdSelectMultiple,
18654
- SdSelectMultipleGroup,
18655
- SdSelectOption,
18656
- SdSelectOptionGroup,
18657
- SdSelectSearchInput,
18658
- SdSelectV2,
18659
- SdSelectV2ListItem,
18660
- SdSelectV2ListItemSearch,
18661
- SdSelectV2Listbox,
18662
- SdSelectV2Trigger,
16868
+ SdSelectListItem,
16869
+ SdSelectListItemSearch,
16870
+ SdSelectListbox,
16871
+ SdSelectTrigger,
18663
16872
  SdSwitch,
18664
16873
  SdTable,
18665
16874
  SdTabs,