@sellmate/design-system 1.0.67 → 1.0.68
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.
- package/dist/cjs/{component.textinput-C4SsDjA1.js → component.textinput-BpXDeZPD.js} +3 -2
- package/dist/cjs/design-system.cjs.js +2 -2
- package/dist/cjs/{index-BpT5VmKY.js → index-B2QvhbC3.js} +1 -1
- package/dist/cjs/index.cjs.js +36 -41
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/modal-stack-DucFLON7.js +112 -0
- package/dist/cjs/sd-action-modal.cjs.entry.js +2 -2
- package/dist/cjs/sd-badge.cjs.entry.js +2 -2
- package/dist/cjs/sd-barcode-input.cjs.entry.js +3 -3
- package/dist/cjs/sd-button-v2_2.cjs.entry.js +3 -3
- package/dist/cjs/sd-button_4.cjs.entry.js +22 -17
- package/dist/cjs/sd-calendar.cjs.entry.js +1 -1
- package/dist/cjs/sd-card.cjs.entry.js +2 -2
- package/dist/cjs/sd-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/sd-chip.cjs.entry.js +312 -0
- package/dist/cjs/sd-circle-progress.cjs.entry.js +2 -2
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +4 -4
- package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-picker-calendar.cjs.entry.js +2 -2
- package/dist/cjs/sd-date-picker-trigger.cjs.entry.js +3 -3
- package/dist/cjs/sd-date-picker.cjs.entry.js +3 -3
- package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +2 -2
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +1 -1
- package/dist/cjs/sd-dropdown-button.cjs.entry.js +8 -19
- package/dist/cjs/sd-file-picker.cjs.entry.js +3 -3
- package/dist/cjs/sd-form.cjs.entry.js +1 -1
- package/dist/cjs/sd-ghost-button.cjs.entry.js +6 -6
- package/dist/cjs/sd-guide.cjs.entry.js +167 -34
- package/dist/cjs/sd-input_2.cjs.entry.js +7 -7
- package/dist/cjs/sd-loading-container.cjs.entry.js +4 -4
- package/dist/cjs/sd-modal-container.cjs.entry.js +126 -155
- package/dist/cjs/sd-number-input.cjs.entry.js +4 -4
- package/dist/cjs/sd-pagination_2.cjs.entry.js +116 -42
- package/dist/cjs/sd-popover.cjs.entry.js +4 -4
- package/dist/cjs/sd-portal.cjs.entry.js +4 -4
- package/dist/cjs/sd-progress.cjs.entry.js +3 -3
- package/dist/cjs/sd-radio-button.cjs.entry.js +2 -2
- package/dist/cjs/sd-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/sd-radio.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-dropdown_2.cjs.entry.js +4 -4
- package/dist/cjs/sd-select-group.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-multiple-group.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-option-group.cjs.entry.js +4 -4
- package/dist/cjs/sd-select-v2-list-item_4.cjs.entry.js +12 -16
- package/dist/cjs/sd-select.cjs.entry.js +2 -2
- package/dist/cjs/sd-switch.cjs.entry.js +2 -2
- package/dist/cjs/sd-table.cjs.entry.js +6 -6
- package/dist/cjs/sd-tabs.cjs.entry.js +2 -2
- package/dist/cjs/sd-tag.cjs.entry.js +3 -3
- package/dist/cjs/sd-tbody.cjs.entry.js +2 -2
- package/dist/cjs/sd-td.cjs.entry.js +2 -2
- package/dist/cjs/sd-text-link.cjs.entry.js +4 -4
- package/dist/cjs/sd-textarea.cjs.entry.js +3 -3
- package/dist/cjs/sd-thead.cjs.entry.js +4 -4
- package/dist/cjs/sd-toast-container.cjs.entry.js +3 -3
- package/dist/cjs/sd-toast.cjs.entry.js +3 -3
- package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
- package/dist/cjs/sd-tr.cjs.entry.js +3 -3
- package/dist/cjs/system-C89o3A9Z.js +16 -0
- package/dist/cjs/table-test.cjs.entry.js +2 -2
- package/dist/cjs/{tooltipArrow-C9i0ZsG_.js → tooltipArrow-Xkv-p1bY.js} +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/sd-action-modal/sd-action-modal.js +1 -1
- package/dist/collection/components/sd-badge/sd-badge.js +1 -1
- package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +1 -1
- package/dist/collection/components/sd-button-v2/sd-button-v2.js +2 -2
- package/dist/collection/components/sd-card/sd-card.js +1 -1
- package/dist/collection/components/sd-chip/sd-chip.config.js +37 -0
- package/dist/collection/components/sd-chip/sd-chip.css +56 -0
- package/dist/collection/components/sd-chip/sd-chip.js +544 -0
- package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
- package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
- package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js +1 -1
- package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
- package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js +3 -3
- package/dist/collection/components/sd-field/sd-field.js +4 -4
- package/dist/collection/components/sd-file-picker/sd-file-picker.css +1 -1
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +1 -1
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +12 -8
- package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +5 -5
- package/dist/collection/components/sd-guide/sd-guide.config.js +48 -0
- package/dist/collection/components/sd-guide/sd-guide.css +58 -29
- package/dist/collection/components/sd-guide/sd-guide.js +69 -40
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-loading-container/sd-loading-container.config.js +1 -1
- package/dist/collection/components/sd-loading-container/sd-loading-container.css +1 -1
- package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
- package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
- package/dist/collection/components/sd-modal-container/sd-modal-container.css +11 -10
- package/dist/collection/components/sd-modal-container/sd-modal-container.js +150 -164
- package/dist/collection/components/sd-number-input/sd-number-input.js +3 -3
- package/dist/collection/components/sd-pagination/sd-pagination.config.js +25 -0
- package/dist/collection/components/sd-pagination/sd-pagination.css +69 -53
- package/dist/collection/components/sd-pagination/sd-pagination.js +53 -37
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-portal/sd-portal.js +4 -4
- package/dist/collection/components/sd-progress/sd-progress.js +2 -2
- package/dist/collection/components/sd-radio/sd-radio.js +1 -1
- package/dist/collection/components/sd-radio-button/sd-radio-button.js +1 -1
- package/dist/collection/components/sd-radio-group/sd-radio-group.js +1 -1
- package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js +2 -2
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
- package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +3 -3
- package/dist/collection/components/sd-select/sd-select.js +1 -1
- package/dist/collection/components/sd-select-group/sd-select-group.js +1 -1
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +1 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +1 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
- package/dist/collection/components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js +2 -2
- package/dist/collection/components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js +4 -4
- package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.css +5 -5
- package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js +2 -2
- package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js +2 -2
- package/dist/collection/components/sd-select-v2/sd-select-v2.config.js +0 -1
- package/dist/collection/components/sd-select-v2/sd-select-v2.js +3 -3
- package/dist/collection/components/sd-switch/sd-switch.js +1 -1
- package/dist/collection/components/sd-table/sd-table.js +5 -5
- package/dist/collection/components/sd-table/sd-table.stories.helpers.js +146 -0
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +1 -1
- package/dist/collection/components/sd-table/sd-td/sd-td.js +1 -1
- package/dist/collection/components/sd-table/sd-thead/sd-thead.js +3 -3
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js +2 -2
- package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
- package/dist/collection/components/sd-tag/sd-tag.js +2 -2
- package/dist/collection/components/sd-text-link/sd-text-link.js +3 -3
- package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
- package/dist/collection/components/sd-toast/sd-toast.js +2 -2
- package/dist/collection/components/sd-toast-container/sd-toast-container.config.js +1 -1
- package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
- package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
- package/dist/collection/components/table-test/table-test.js +1 -1
- package/dist/collection/utils/modal-stack.js +109 -0
- package/dist/collection/utils/modal.js +17 -23
- package/dist/components/index.js +1 -1
- package/dist/components/{p-DHh_uT9m.js → p-B1j9ZWLJ.js} +1 -1
- package/dist/components/{p-DPJPXCqf.js → p-BBluw-CU.js} +1 -1
- package/dist/components/{p-D74FHxKd.js → p-BFd54Imz.js} +1 -1
- package/dist/components/{p-IbLrnrk8.js → p-BPXQ6DXz.js} +1 -1
- package/dist/components/p-BaHpEtbz.js +1 -0
- package/dist/components/{p-DZJZLfsh.js → p-BlqLear7.js} +1 -1
- package/dist/components/{p-CJwbBrt5.js → p-ByhWX2NK.js} +1 -1
- package/dist/components/{p-ByYIyCZY.js → p-BylHC3lv.js} +1 -1
- package/dist/components/p-C-txBx-h.js +1 -0
- package/dist/components/p-C0VkfKIA.js +1 -0
- package/dist/components/p-C4uWhzoG.js +1 -0
- package/dist/components/{p-Ds4UCVE1.js → p-CEeNVTzW.js} +1 -1
- package/dist/components/{p-DDOw5GBw.js → p-CLZ8NObl.js} +1 -1
- package/dist/components/{p-tZWFjQm2.js → p-COM91Bya.js} +1 -1
- package/dist/components/{p-BH4I7hqf.js → p-CS62OEXf.js} +1 -1
- package/dist/components/{p-iWu6aGXE.js → p-CX0V7awA.js} +1 -1
- package/dist/components/{p-DlsWuYWL.js → p-Cb1M05mf.js} +1 -1
- package/dist/{design-system/p-CRTx3YEe.js → components/p-Cj4NAUzE.js} +1 -1
- package/dist/components/{p-1iOCtFn5.js → p-CsPyZohK.js} +1 -1
- package/dist/components/{p-DhkPKN1J.js → p-CsVPC3FD.js} +1 -1
- package/dist/components/{p-tvysh3yO.js → p-Csfk-CtX.js} +1 -1
- package/dist/components/{p-DqYRbHxW.js → p-CtrDZYN5.js} +1 -1
- package/dist/components/p-D21iKAp7.js +1 -0
- package/dist/components/{p-cNJ6VOYI.js → p-D6C4-apu.js} +1 -1
- package/dist/components/{p-V6yl4lMM.js → p-DGPGMB_Z.js} +1 -1
- package/dist/components/{p-CymMpTU-.js → p-DIro-Wat.js} +1 -1
- package/dist/components/{p-BstWg2vS.js → p-DPCj-bFr.js} +1 -1
- package/dist/components/{p-DLeCo2gh.js → p-DQLyH3dr.js} +1 -1
- package/dist/components/p-DRVnqiWc.js +1 -0
- package/dist/components/{p-C02KLCcO.js → p-DWW5xr6r.js} +1 -1
- package/dist/components/p-D_lyw4rN.js +1 -0
- package/dist/components/{p-DL69hClF.js → p-Diis5oCN.js} +1 -1
- package/dist/components/{p-BRRvU4ZQ.js → p-DlkxQ9Jn.js} +1 -1
- package/dist/components/{p-CkMs7IA8.js → p-N_EbEY8s.js} +1 -1
- package/dist/components/{p-hN9rpxkR.js → p-T5BGXHZg.js} +1 -1
- package/dist/components/{p-BF4hokOY.js → p-YgnF5oje.js} +1 -1
- package/dist/components/{p-CX2EDIQM.js → p-z9MoRjYX.js} +1 -1
- package/dist/components/sd-action-modal.js +1 -1
- package/dist/components/sd-badge.js +1 -1
- package/dist/components/sd-barcode-input.js +1 -1
- package/dist/components/sd-button-v2.js +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-calendar.js +1 -1
- package/dist/components/sd-card.js +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-chip.d.ts +11 -0
- package/dist/components/sd-chip.js +1 -0
- package/dist/components/sd-circle-progress.js +1 -1
- package/dist/components/sd-confirm-modal.js +1 -1
- package/dist/components/sd-date-box.js +1 -1
- package/dist/components/sd-date-picker-calendar.js +1 -1
- package/dist/components/sd-date-picker-trigger.js +1 -1
- package/dist/components/sd-date-picker.js +1 -1
- package/dist/components/sd-date-range-picker-calendar.js +1 -1
- package/dist/components/sd-date-range-picker.js +1 -1
- package/dist/components/sd-dropdown-button.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-floating-portal.js +1 -1
- package/dist/components/sd-form.js +1 -1
- package/dist/components/sd-ghost-button.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-loading-container.js +1 -1
- package/dist/components/sd-loading-modal.js +1 -1
- package/dist/components/sd-modal-container.js +1 -1
- package/dist/components/sd-number-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-progress.js +1 -1
- package/dist/components/sd-radio-button.js +1 -1
- package/dist/components/sd-radio-group.js +1 -1
- package/dist/components/sd-radio.js +1 -1
- package/dist/components/sd-select-dropdown.js +1 -1
- package/dist/components/sd-select-group.js +1 -1
- package/dist/components/sd-select-multiple-group.js +1 -1
- package/dist/components/sd-select-multiple.js +1 -1
- package/dist/components/sd-select-option-group.js +1 -1
- package/dist/components/sd-select-option.js +1 -1
- package/dist/components/sd-select-search-input.js +1 -1
- package/dist/components/sd-select-v2-list-item-search.js +1 -1
- package/dist/components/sd-select-v2-list-item.js +1 -1
- package/dist/components/sd-select-v2-listbox.js +1 -1
- package/dist/components/sd-select-v2-trigger.js +1 -1
- package/dist/components/sd-select-v2.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-switch.js +1 -1
- package/dist/components/sd-table.js +1 -1
- package/dist/components/sd-tabs.js +1 -1
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-tbody.js +1 -1
- package/dist/components/sd-td.js +1 -1
- package/dist/components/sd-text-link.js +1 -1
- package/dist/components/sd-textarea.js +1 -1
- package/dist/components/sd-thead.js +1 -1
- package/dist/components/sd-toast-container.js +1 -1
- package/dist/components/sd-toast.js +1 -1
- package/dist/components/sd-toggle.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/components/sd-tr.js +1 -1
- package/dist/components/table-test.js +1 -1
- package/dist/design-system/design-system.css +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/index.esm.js +1 -1
- package/dist/design-system/{p-c44ba991.entry.js → p-002e10ac.entry.js} +1 -1
- package/dist/design-system/p-01ac7743.entry.js +1 -0
- package/dist/design-system/{p-244d2d6e.entry.js → p-07736d67.entry.js} +1 -1
- package/dist/design-system/p-0929f910.entry.js +1 -0
- package/dist/design-system/{p-b2b5b2d3.entry.js → p-0b216b11.entry.js} +1 -1
- package/dist/design-system/{p-5b2486c9.entry.js → p-0bffdbf4.entry.js} +1 -1
- package/dist/design-system/{p-e1c17466.entry.js → p-0c98676e.entry.js} +1 -1
- package/dist/design-system/{p-5224553e.entry.js → p-0d485537.entry.js} +1 -1
- package/dist/design-system/{p-7fe09661.entry.js → p-16eae7ae.entry.js} +1 -1
- package/dist/design-system/{p-aebf903f.entry.js → p-1a455448.entry.js} +1 -1
- package/dist/design-system/{p-10763304.entry.js → p-1b8e63a6.entry.js} +1 -1
- package/dist/design-system/{p-525aefd5.entry.js → p-23c31074.entry.js} +1 -1
- package/dist/design-system/{p-7cf63a80.entry.js → p-23ff6bee.entry.js} +1 -1
- package/dist/design-system/{p-87a23bd0.entry.js → p-2a4b6bc7.entry.js} +1 -1
- package/dist/design-system/{p-298d9b57.entry.js → p-2a663b3b.entry.js} +1 -1
- package/dist/design-system/{p-fa1072f7.entry.js → p-308c2a72.entry.js} +1 -1
- package/dist/design-system/{p-e9d36c02.entry.js → p-33713805.entry.js} +1 -1
- package/dist/design-system/p-35b29182.entry.js +1 -0
- package/dist/design-system/{p-9e0b944f.entry.js → p-449e58ee.entry.js} +1 -1
- package/dist/design-system/{p-73383b2f.entry.js → p-48f1f9ff.entry.js} +1 -1
- package/dist/design-system/{p-504fdb4e.entry.js → p-4d434794.entry.js} +1 -1
- package/dist/design-system/p-4de3b6b1.entry.js +1 -0
- package/dist/design-system/p-4f9f25a1.entry.js +1 -0
- package/dist/design-system/{p-40371bf6.entry.js → p-59aa62ff.entry.js} +1 -1
- package/dist/design-system/{p-7b433296.entry.js → p-5a0b0a1b.entry.js} +1 -1
- package/dist/design-system/p-60ece09d.entry.js +1 -0
- package/dist/design-system/{p-10ed0768.entry.js → p-641c2f3d.entry.js} +1 -1
- package/dist/design-system/{p-2841d5e1.entry.js → p-64a56a4e.entry.js} +1 -1
- package/dist/design-system/{p-dff0060e.entry.js → p-6b2f6efb.entry.js} +1 -1
- package/dist/design-system/{p-e1202ad3.entry.js → p-6b478f5c.entry.js} +1 -1
- package/dist/design-system/{p-6eb3462d.entry.js → p-6ca6dfaf.entry.js} +1 -1
- package/dist/design-system/{p-337267a7.entry.js → p-6ef2d08f.entry.js} +1 -1
- package/dist/design-system/{p-51fcc29f.entry.js → p-703eee55.entry.js} +1 -1
- package/dist/design-system/p-75c5e31b.entry.js +1 -0
- package/dist/design-system/{p-768efd5a.entry.js → p-7dd8beba.entry.js} +1 -1
- package/dist/design-system/{p-348eff76.entry.js → p-7ef0c428.entry.js} +1 -1
- package/dist/design-system/{p-d263d476.entry.js → p-8281dc36.entry.js} +1 -1
- package/dist/design-system/p-87222184.entry.js +1 -0
- package/dist/design-system/p-8cd1b533.entry.js +1 -0
- package/dist/design-system/{p-f9559741.entry.js → p-92a52f89.entry.js} +1 -1
- package/dist/design-system/{p-19257b97.entry.js → p-95d96917.entry.js} +1 -1
- package/dist/design-system/{p-fb7e8c54.entry.js → p-9ecde011.entry.js} +1 -1
- package/dist/design-system/{p-b4e56b67.entry.js → p-9f0fe1f6.entry.js} +1 -1
- package/dist/design-system/p-BGyJgVXm.js +2 -0
- package/dist/design-system/{p-CJwbBrt5.js → p-ByhWX2NK.js} +1 -1
- package/dist/design-system/p-C-txBx-h.js +1 -0
- package/dist/design-system/p-C4tHYnB4.js +1 -0
- package/dist/design-system/p-DRVnqiWc.js +1 -0
- package/dist/design-system/{p-513d85e1.entry.js → p-ade9319d.entry.js} +1 -1
- package/dist/design-system/{p-671a9ca8.entry.js → p-aeadfb9c.entry.js} +1 -1
- package/dist/design-system/{p-b56ae914.entry.js → p-ca6b4d4a.entry.js} +1 -1
- package/dist/design-system/{p-b6e7b8c8.entry.js → p-cdedac3c.entry.js} +1 -1
- package/dist/design-system/{p-5982bcd0.entry.js → p-d43772c0.entry.js} +1 -1
- package/dist/design-system/{p-c6d2f909.entry.js → p-dfa716e0.entry.js} +1 -1
- package/dist/design-system/{p-a66529a5.entry.js → p-e1288299.entry.js} +1 -1
- package/dist/design-system/{p-2edd355b.entry.js → p-e1b307ee.entry.js} +1 -1
- package/dist/design-system/p-e3a1e677.entry.js +1 -0
- package/dist/design-system/p-ebc72b3f.entry.js +1 -0
- package/dist/design-system/{p-e385cbf4.entry.js → p-fa888a37.entry.js} +1 -1
- package/dist/esm/{component.textinput-CJwbBrt5.js → component.textinput-ByhWX2NK.js} +3 -2
- package/dist/esm/design-system.js +3 -3
- package/dist/esm/{index-Dcpqhs6V.js → index-BGyJgVXm.js} +1 -1
- package/dist/esm/index.js +36 -41
- package/dist/esm/loader.js +3 -3
- package/dist/esm/modal-stack-DRVnqiWc.js +105 -0
- package/dist/esm/sd-action-modal.entry.js +2 -2
- package/dist/esm/sd-badge.entry.js +2 -2
- package/dist/esm/sd-barcode-input.entry.js +3 -3
- package/dist/esm/sd-button-v2_2.entry.js +3 -3
- package/dist/esm/sd-button_4.entry.js +22 -17
- package/dist/esm/sd-calendar.entry.js +1 -1
- package/dist/esm/sd-card.entry.js +2 -2
- package/dist/esm/sd-checkbox.entry.js +1 -1
- package/dist/esm/sd-chip.entry.js +310 -0
- package/dist/esm/sd-circle-progress.entry.js +2 -2
- package/dist/esm/sd-confirm-modal_2.entry.js +4 -4
- package/dist/esm/sd-date-box.entry.js +1 -1
- package/dist/esm/sd-date-picker-calendar.entry.js +2 -2
- package/dist/esm/sd-date-picker-trigger.entry.js +3 -3
- package/dist/esm/sd-date-picker.entry.js +3 -3
- package/dist/esm/sd-date-range-picker-calendar.entry.js +2 -2
- package/dist/esm/sd-date-range-picker.entry.js +1 -1
- package/dist/esm/sd-dropdown-button.entry.js +5 -16
- package/dist/esm/sd-file-picker.entry.js +3 -3
- package/dist/esm/sd-form.entry.js +1 -1
- package/dist/esm/sd-ghost-button.entry.js +6 -6
- package/dist/esm/sd-guide.entry.js +167 -34
- package/dist/esm/sd-input_2.entry.js +7 -7
- package/dist/esm/sd-loading-container.entry.js +4 -4
- package/dist/esm/sd-modal-container.entry.js +126 -155
- package/dist/esm/sd-number-input.entry.js +4 -4
- package/dist/esm/sd-pagination_2.entry.js +116 -42
- package/dist/esm/sd-popover.entry.js +4 -4
- package/dist/esm/sd-portal.entry.js +4 -4
- package/dist/esm/sd-progress.entry.js +3 -3
- package/dist/esm/sd-radio-button.entry.js +2 -2
- package/dist/esm/sd-radio-group.entry.js +2 -2
- package/dist/esm/sd-radio.entry.js +2 -2
- package/dist/esm/sd-select-dropdown_2.entry.js +4 -4
- package/dist/esm/sd-select-group.entry.js +2 -2
- package/dist/esm/sd-select-multiple-group.entry.js +2 -2
- package/dist/esm/sd-select-multiple.entry.js +2 -2
- package/dist/esm/sd-select-option-group.entry.js +4 -4
- package/dist/esm/sd-select-v2-list-item_4.entry.js +12 -16
- package/dist/esm/sd-select.entry.js +2 -2
- package/dist/esm/sd-switch.entry.js +2 -2
- package/dist/esm/sd-table.entry.js +6 -6
- package/dist/esm/sd-tabs.entry.js +2 -2
- package/dist/esm/sd-tag.entry.js +3 -3
- package/dist/esm/sd-tbody.entry.js +2 -2
- package/dist/esm/sd-td.entry.js +2 -2
- package/dist/esm/sd-text-link.entry.js +4 -4
- package/dist/esm/sd-textarea.entry.js +3 -3
- package/dist/esm/sd-thead.entry.js +4 -4
- package/dist/esm/sd-toast-container.entry.js +3 -3
- package/dist/esm/sd-toast.entry.js +3 -3
- package/dist/esm/sd-toggle.entry.js +2 -2
- package/dist/esm/sd-tr.entry.js +3 -3
- package/dist/esm/system-C-txBx-h.js +14 -0
- package/dist/esm/table-test.entry.js +2 -2
- package/dist/esm/{tooltipArrow-fP-ISMAm.js → tooltipArrow-BAjP9_Hx.js} +1 -1
- package/dist/types/components/sd-chip/sd-chip.config.d.ts +36 -0
- package/dist/types/components/sd-chip/sd-chip.d.ts +47 -0
- package/dist/types/components/sd-guide/sd-guide.config.d.ts +44 -0
- package/dist/types/components/sd-guide/sd-guide.d.ts +3 -4
- package/dist/types/components/sd-loading-container/sd-loading-container.config.d.ts +1 -1
- package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +12 -16
- package/dist/types/components/sd-pagination/sd-pagination.config.d.ts +23 -0
- package/dist/types/components/sd-pagination/sd-pagination.d.ts +3 -3
- package/dist/types/components/sd-select-v2/sd-select-v2.config.d.ts +0 -1
- package/dist/types/components/sd-table/sd-table.stories.helpers.d.ts +29 -0
- package/dist/types/components/sd-toast-container/sd-toast-container.config.d.ts +1 -1
- package/dist/types/components.d.ts +125 -16
- package/dist/types/utils/modal-stack.d.ts +17 -0
- package/hydrate/index.js +963 -354
- package/hydrate/index.mjs +963 -354
- package/package.json +1 -1
- package/dist/components/p-B_7ozne7.js +0 -1
- package/dist/components/p-BsPBl6g5.js +0 -1
- package/dist/components/p-BuSniZ67.js +0 -1
- package/dist/components/p-CCHce_Dt.js +0 -1
- package/dist/components/p-DNVUhw5A.js +0 -1
- package/dist/components/p-UR2Cf2Sm.js +0 -1
- package/dist/design-system/p-1645da95.entry.js +0 -1
- package/dist/design-system/p-3b8595de.entry.js +0 -1
- package/dist/design-system/p-3bbf23b4.entry.js +0 -1
- package/dist/design-system/p-4c55ba79.entry.js +0 -1
- package/dist/design-system/p-6e9d6063.entry.js +0 -1
- package/dist/design-system/p-87b2c270.entry.js +0 -1
- package/dist/design-system/p-9925857c.entry.js +0 -1
- package/dist/design-system/p-9cb3be8c.entry.js +0 -1
- package/dist/design-system/p-Dcpqhs6V.js +0 -2
- package/dist/design-system/p-e232fb11.entry.js +0 -1
- package/dist/design-system/p-e474fa8c.entry.js +0 -1
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-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, 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-font-size:12px;--sd-system-typography-control-xs-font-weight:500;--sd-system-typography-control-xs-text-decoration:none;--sd-system-typography-control-xs-line-height:20px;--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-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-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-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-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-border-width-control-default:1px;--sd-system-border-width-field-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:#D9EAFF;--sd-system-color-bg-accent-light-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-disabled:#E1E1E1;--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-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-padding-bottom:4px;--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:16px;--sd-field-field-label-md-typography-line-height:26px;--sd-field-field-label-md-typography-text-decoration:none;--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:16px;--sd-textinput-textinput-md-typography-line-height:26px;--sd-textinput-textinput-md-typography-text-decoration:none;--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:16px;--sd-number-input-number-input-md-typography-line-height:26px;--sd-number-input-number-input-md-typography-text-decoration:none;--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:16px;--sd-datepicker-datepicker-md-typography-line-height:26px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--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-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-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-active:#00973C;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-paddng-x:24px;--sd-guide-guide-contents-paddng-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}.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-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-control-xs-regular-font-size:12px;--sd-system-typography-control-xs-regular-font-weight:400;--sd-system-typography-control-xs-regular-text-decoration:none;--sd-system-typography-control-xs-regular-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-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-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-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-border-width-control-default:1px;--sd-system-border-width-field-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:#D9EAFF;--sd-system-color-bg-accent-light-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:16px;--sd-number-input-number-input-md-typography-line-height:26px;--sd-number-input-number-input-md-typography-text-decoration:none;--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:16px;--sd-datepicker-datepicker-md-typography-line-height:26px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--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-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}.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
|
|
@@ -5287,7 +5287,7 @@ class DataTable {
|
|
|
5287
5287
|
return el.innerHTML;
|
|
5288
5288
|
}
|
|
5289
5289
|
render() {
|
|
5290
|
-
return (hAsync("div", { key: '
|
|
5290
|
+
return (hAsync("div", { key: 'eb6246d49bb46a1c2b2b9d93cff90e7c0d6788b4', class: "table-wrapper" }, hAsync("table", { key: '584d752e51f252f2dd7a29868ae4300b55c47065', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, hAsync("thead", { key: 'fd35de9ad1cb79cf77ab9f7a806d2d7258d8b11b' }, hAsync("tr", { key: '39a42d9fc76571aa5ef6073ec554471d5fd1b4c1' }, this.columns.map(column => (hAsync("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), hAsync("tbody", { key: '5c3a2b5853f619666b20145e0f7a221c75969071' }, 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: 'bbbd15c2d1b517774340dbcdfb59338f260df21b', class: "templates-slot", hidden: true }, hAsync("slot", { key: '28733f09dd4a90976d9bb60102039981c736cf87' }))));
|
|
5291
5291
|
}
|
|
5292
5292
|
static get watchers() { return {
|
|
5293
5293
|
"columns": [{
|
|
@@ -5448,7 +5448,7 @@ class SdActionModal {
|
|
|
5448
5448
|
if (this.height != null && this.height !== '') {
|
|
5449
5449
|
sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
|
5450
5450
|
}
|
|
5451
|
-
return (hAsync("div", { key: '
|
|
5451
|
+
return (hAsync("div", { key: '85e107137d01ef0a8fd8a839d7223c5163cb1a30', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '00d31be3a53866ecb5b72e76550c9501cdf6a106', class: "sd-action-modal__header" }, hAsync("h2", { key: '4e4d000f6261ee2147a3d943d5aedc41afe1b30c', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'f6df02450472e1969f5a96822058d2384af78a8a', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: 'ffb45a725e9e3c8ee56534ba3286897eaf33b844', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '26f68005c1b1ae18991a4da802cbfbd027af8536', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'ebc57d5a90530acf465fef3866d63d95e8bf8311', class: "sd-action-modal__body" }, hAsync("slot", { key: 'a55744951a9812373adabbb7d3db8c06b25f5c72', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '1aef0ac810ba08682c9b8cea47a48e4679a17ee0', class: "sd-action-modal__footer" }, hAsync("div", { key: 'eeeec98e930aa71fcfdd28a1d76a842083c6a185', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '7015d9593c5567824f40ab4c60ca2be8ac5f5989', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: 'c35ea44b195fd7725cb914cf3f04db9389abdfe3', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
|
|
5452
5452
|
}
|
|
5453
5453
|
static get style() { return sdActionModalCss(); }
|
|
5454
5454
|
static get cmpMeta() { return {
|
|
@@ -5501,7 +5501,7 @@ class SdBadge {
|
|
|
5501
5501
|
label = '';
|
|
5502
5502
|
render() {
|
|
5503
5503
|
const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
|
|
5504
|
-
return (hAsync("div", { key: '
|
|
5504
|
+
return (hAsync("div", { key: 'a4b84e172a57763fbef2feedaf52c1e8c219250d', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '723edda0c397241af91ccfc62d14cbfc131456cf', class: "sd-badge__dot" }), hAsync("div", { key: '80415403bea863a62ad5d8139cfcf8951bedee49', class: "sd-badge__label" }, this.label)));
|
|
5505
5505
|
}
|
|
5506
5506
|
static get style() { return sdBadgeCss(); }
|
|
5507
5507
|
static get cmpMeta() { return {
|
|
@@ -5548,8 +5548,9 @@ const textinput = {
|
|
|
5548
5548
|
radius: "6",
|
|
5549
5549
|
typography: {
|
|
5550
5550
|
fontWeight: "400",
|
|
5551
|
-
fontSize: "
|
|
5552
|
-
lineHeight: "
|
|
5551
|
+
fontSize: "14",
|
|
5552
|
+
lineHeight: "24"
|
|
5553
|
+
}
|
|
5553
5554
|
},
|
|
5554
5555
|
border: {
|
|
5555
5556
|
"default": "#AAAAAA"},
|
|
@@ -5709,7 +5710,7 @@ class SdBarcodeInput {
|
|
|
5709
5710
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
5710
5711
|
'--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
|
|
5711
5712
|
};
|
|
5712
|
-
return (hAsync("sd-field", { key: '
|
|
5713
|
+
return (hAsync("sd-field", { key: '11079233784a85ec20bae4653155a9820d878681', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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: '592fcb675607d57d7372abac967eb1c1a1e27212', class: "sd-barcode-input__content" }, hAsync("slot", { key: 'a035ed3825360f81e669c3ef9099a479bbb69fd0', name: "prefix" }), hAsync("input", { key: '7ffffa2b085050d05d1439cac1c90901144da410', 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: 'cc9a0e5b0b367c5c443bfe132408d834d74c16b3', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: 'a5a06ef58a7f38ffbafb56038ff8321e66184da5', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
|
|
5713
5714
|
if (this.disabled)
|
|
5714
5715
|
return;
|
|
5715
5716
|
this.internalValue = '';
|
|
@@ -5765,7 +5766,7 @@ class SdBarcodeInput {
|
|
|
5765
5766
|
}; }
|
|
5766
5767
|
}
|
|
5767
5768
|
|
|
5768
|
-
const button = {
|
|
5769
|
+
const button$1 = {
|
|
5769
5770
|
xs: {
|
|
5770
5771
|
icon: "12"
|
|
5771
5772
|
},
|
|
@@ -5849,7 +5850,7 @@ const button = {
|
|
|
5849
5850
|
}
|
|
5850
5851
|
};
|
|
5851
5852
|
var buttonTokens = {
|
|
5852
|
-
button: button
|
|
5853
|
+
button: button$1
|
|
5853
5854
|
};
|
|
5854
5855
|
|
|
5855
5856
|
const primary = "#051D36";
|
|
@@ -6434,13 +6435,13 @@ class SdButtonV2 {
|
|
|
6434
6435
|
const hasLabel = Boolean(this.label);
|
|
6435
6436
|
const iconOnly = !this.label && (Boolean(this.icon) !== Boolean(this.rightIcon));
|
|
6436
6437
|
const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
|
|
6437
|
-
return (hAsync("button", { key: '
|
|
6438
|
+
return (hAsync("button", { key: '61dde2ec51ac5099909d38a7420568bfd4fcde0b', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
6438
6439
|
'--sd-button-v2-bg': config.color,
|
|
6439
6440
|
'--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
|
|
6440
6441
|
'--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
|
|
6441
6442
|
'--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
|
|
6442
6443
|
'--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
|
|
6443
|
-
}, onClick: this.handleClick }, hAsync("span", { key: '
|
|
6444
|
+
}, onClick: this.handleClick }, hAsync("span", { key: 'dc433a47ace0d074503a2c0e5c47c4c8bfa6cb8c', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: '95e941490d78f1950f9f7759112fb714f191a504', 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: 'c13f3fb5bec105d7737ef1f9db7dcd4ca93ce5be', class: "sd-button-v2__label" }, this.label), this.rightIcon && (hAsync("sd-icon", { key: 'fb20dde72eaab014ae0e658477db228c23eddea3', 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)" })))));
|
|
6444
6445
|
}
|
|
6445
6446
|
static get style() { return sdButtonV2Css(); }
|
|
6446
6447
|
static get cmpMeta() { return {
|
|
@@ -6678,7 +6679,7 @@ class SdCard {
|
|
|
6678
6679
|
bordered = false;
|
|
6679
6680
|
sdClass = '';
|
|
6680
6681
|
render() {
|
|
6681
|
-
return (hAsync(Fragment, { key: '
|
|
6682
|
+
return (hAsync(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, hAsync("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
|
|
6682
6683
|
}
|
|
6683
6684
|
static get style() { return sdCardCss(); }
|
|
6684
6685
|
static get cmpMeta() { return {
|
|
@@ -6910,6 +6911,336 @@ class SdCheckbox {
|
|
|
6910
6911
|
}; }
|
|
6911
6912
|
}
|
|
6912
6913
|
|
|
6914
|
+
const chip = {
|
|
6915
|
+
height: "24",
|
|
6916
|
+
paddingX: "8",
|
|
6917
|
+
gap: "4",
|
|
6918
|
+
radius: "9999",
|
|
6919
|
+
typography: {
|
|
6920
|
+
"default": {
|
|
6921
|
+
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",
|
|
6922
|
+
fontSize: "12",
|
|
6923
|
+
fontWeight: "500",
|
|
6924
|
+
lineHeight: "20"
|
|
6925
|
+
},
|
|
6926
|
+
focus: {
|
|
6927
|
+
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",
|
|
6928
|
+
fontSize: "12",
|
|
6929
|
+
fontWeight: "400",
|
|
6930
|
+
lineHeight: "20"
|
|
6931
|
+
}
|
|
6932
|
+
},
|
|
6933
|
+
bg: {
|
|
6934
|
+
"default": "#F6F6F6",
|
|
6935
|
+
error: "#FCEFEF",
|
|
6936
|
+
focus: "#FFFFFF"
|
|
6937
|
+
},
|
|
6938
|
+
content: {
|
|
6939
|
+
"default": "#888888",
|
|
6940
|
+
error: "#E30000",
|
|
6941
|
+
focus: "#555555"
|
|
6942
|
+
},
|
|
6943
|
+
border: {
|
|
6944
|
+
focus: "#E1E1E1",
|
|
6945
|
+
width: "1"
|
|
6946
|
+
}
|
|
6947
|
+
};
|
|
6948
|
+
var chipTokens = {
|
|
6949
|
+
chip: chip
|
|
6950
|
+
};
|
|
6951
|
+
|
|
6952
|
+
const CHIP_LAYOUT = {
|
|
6953
|
+
height: `${chipTokens.chip.height}px`,
|
|
6954
|
+
paddingX: `${chipTokens.chip.paddingX}px`,
|
|
6955
|
+
gap: `${chipTokens.chip.gap}px`,
|
|
6956
|
+
radius: `${chipTokens.chip.radius}px`,
|
|
6957
|
+
borderWidth: `${chipTokens.chip.border.width}px`,
|
|
6958
|
+
};
|
|
6959
|
+
const CHIP_COLORS = {
|
|
6960
|
+
bg: {
|
|
6961
|
+
default: chipTokens.chip.bg.default,
|
|
6962
|
+
error: chipTokens.chip.bg.error,
|
|
6963
|
+
focus: chipTokens.chip.bg.focus,
|
|
6964
|
+
},
|
|
6965
|
+
content: {
|
|
6966
|
+
default: chipTokens.chip.content.default,
|
|
6967
|
+
error: chipTokens.chip.content.error,
|
|
6968
|
+
focus: chipTokens.chip.content.focus,
|
|
6969
|
+
},
|
|
6970
|
+
border: {
|
|
6971
|
+
focus: chipTokens.chip.border.focus,
|
|
6972
|
+
},
|
|
6973
|
+
};
|
|
6974
|
+
const CHIP_TYPOGRAPHY = {
|
|
6975
|
+
default: {
|
|
6976
|
+
fontFamily: chipTokens.chip.typography.default.fontFamily,
|
|
6977
|
+
fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
|
|
6978
|
+
fontWeight: chipTokens.chip.typography.default.fontWeight,
|
|
6979
|
+
lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
|
|
6980
|
+
},
|
|
6981
|
+
focus: {
|
|
6982
|
+
fontFamily: chipTokens.chip.typography.focus.fontFamily,
|
|
6983
|
+
fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
|
|
6984
|
+
fontWeight: chipTokens.chip.typography.focus.fontWeight,
|
|
6985
|
+
lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
|
|
6986
|
+
},
|
|
6987
|
+
};
|
|
6988
|
+
|
|
6989
|
+
const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}`;
|
|
6990
|
+
|
|
6991
|
+
class SdChip {
|
|
6992
|
+
constructor(hostRef) {
|
|
6993
|
+
registerInstance(this, hostRef);
|
|
6994
|
+
this.update = createEvent(this, "sdUpdate", 7);
|
|
6995
|
+
this.remove = createEvent(this, "sdRemove", 7);
|
|
6996
|
+
this.focus = createEvent(this, "sdFocus", 7);
|
|
6997
|
+
this.blur = createEvent(this, "sdBlur", 7);
|
|
6998
|
+
}
|
|
6999
|
+
get el() { return getElement(this); }
|
|
7000
|
+
name = '';
|
|
7001
|
+
value = '';
|
|
7002
|
+
error = false;
|
|
7003
|
+
disabled = false;
|
|
7004
|
+
placeholder = '';
|
|
7005
|
+
rules = [];
|
|
7006
|
+
internalValue = '';
|
|
7007
|
+
isEditing = false;
|
|
7008
|
+
update;
|
|
7009
|
+
remove;
|
|
7010
|
+
focus;
|
|
7011
|
+
blur;
|
|
7012
|
+
inputEl;
|
|
7013
|
+
draftValue = '';
|
|
7014
|
+
shouldInitInput = false;
|
|
7015
|
+
valueChanged(newValue) {
|
|
7016
|
+
const nextValue = newValue ?? '';
|
|
7017
|
+
const wasEditing = this.isEditing;
|
|
7018
|
+
this.internalValue = nextValue;
|
|
7019
|
+
this.draftValue = nextValue;
|
|
7020
|
+
if (wasEditing) {
|
|
7021
|
+
this.isEditing = false;
|
|
7022
|
+
this.shouldInitInput = false;
|
|
7023
|
+
this.inputEl?.blur();
|
|
7024
|
+
this.blur.emit();
|
|
7025
|
+
}
|
|
7026
|
+
}
|
|
7027
|
+
componentWillLoad() {
|
|
7028
|
+
this.internalValue = this.value ?? '';
|
|
7029
|
+
}
|
|
7030
|
+
componentDidLoad() {
|
|
7031
|
+
this.registerToForm();
|
|
7032
|
+
}
|
|
7033
|
+
disconnectedCallback() {
|
|
7034
|
+
this.unregisterFromForm();
|
|
7035
|
+
}
|
|
7036
|
+
async sdValidate() {
|
|
7037
|
+
if (!this.rules || this.rules.length === 0) {
|
|
7038
|
+
this.error = false;
|
|
7039
|
+
return true;
|
|
7040
|
+
}
|
|
7041
|
+
for (const rule of this.rules) {
|
|
7042
|
+
const result = rule(this.internalValue ?? '');
|
|
7043
|
+
if (result !== true) {
|
|
7044
|
+
this.error = true;
|
|
7045
|
+
return false;
|
|
7046
|
+
}
|
|
7047
|
+
}
|
|
7048
|
+
this.error = false;
|
|
7049
|
+
return true;
|
|
7050
|
+
}
|
|
7051
|
+
async sdReset() {
|
|
7052
|
+
this.internalValue = '';
|
|
7053
|
+
this.value = '';
|
|
7054
|
+
this.error = false;
|
|
7055
|
+
this.draftValue = '';
|
|
7056
|
+
this.isEditing = false;
|
|
7057
|
+
this.shouldInitInput = false;
|
|
7058
|
+
}
|
|
7059
|
+
async sdResetValidate() {
|
|
7060
|
+
this.error = false;
|
|
7061
|
+
}
|
|
7062
|
+
async sdResetValidation() {
|
|
7063
|
+
this.error = false;
|
|
7064
|
+
}
|
|
7065
|
+
async sdFocus() {
|
|
7066
|
+
if (this.disabled)
|
|
7067
|
+
return;
|
|
7068
|
+
this.enterEditMode();
|
|
7069
|
+
}
|
|
7070
|
+
async sdGetNativeElement() {
|
|
7071
|
+
return this.inputEl ?? null;
|
|
7072
|
+
}
|
|
7073
|
+
enterEditMode = () => {
|
|
7074
|
+
if (this.disabled || this.isEditing)
|
|
7075
|
+
return;
|
|
7076
|
+
this.draftValue = this.internalValue;
|
|
7077
|
+
this.shouldInitInput = true;
|
|
7078
|
+
this.isEditing = true;
|
|
7079
|
+
this.focus.emit();
|
|
7080
|
+
};
|
|
7081
|
+
commitEdit = async () => {
|
|
7082
|
+
if (!this.isEditing)
|
|
7083
|
+
return;
|
|
7084
|
+
const next = (this.inputEl?.textContent ?? this.draftValue).trim();
|
|
7085
|
+
const changed = next !== this.draftValue;
|
|
7086
|
+
this.internalValue = next;
|
|
7087
|
+
this.isEditing = false;
|
|
7088
|
+
this.shouldInitInput = false;
|
|
7089
|
+
this.value = next;
|
|
7090
|
+
if (changed) {
|
|
7091
|
+
this.update.emit(next);
|
|
7092
|
+
}
|
|
7093
|
+
await this.sdValidate();
|
|
7094
|
+
this.blur.emit();
|
|
7095
|
+
};
|
|
7096
|
+
cancelEdit = () => {
|
|
7097
|
+
if (!this.isEditing)
|
|
7098
|
+
return;
|
|
7099
|
+
this.internalValue = this.draftValue;
|
|
7100
|
+
this.isEditing = false;
|
|
7101
|
+
this.shouldInitInput = false;
|
|
7102
|
+
this.blur.emit();
|
|
7103
|
+
};
|
|
7104
|
+
handleChipClick = () => {
|
|
7105
|
+
if (this.disabled || this.isEditing)
|
|
7106
|
+
return;
|
|
7107
|
+
this.enterEditMode();
|
|
7108
|
+
};
|
|
7109
|
+
handleChipKeyDown = (event) => {
|
|
7110
|
+
if (this.disabled || this.isEditing)
|
|
7111
|
+
return;
|
|
7112
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
7113
|
+
event.preventDefault();
|
|
7114
|
+
this.enterEditMode();
|
|
7115
|
+
}
|
|
7116
|
+
};
|
|
7117
|
+
handleInputChange = (event) => {
|
|
7118
|
+
const target = event.target;
|
|
7119
|
+
this.internalValue = target.textContent ?? '';
|
|
7120
|
+
};
|
|
7121
|
+
handleInputKeyDown = (event) => {
|
|
7122
|
+
if (event.key === 'Enter') {
|
|
7123
|
+
event.preventDefault();
|
|
7124
|
+
this.commitEdit();
|
|
7125
|
+
}
|
|
7126
|
+
else if (event.key === 'Escape') {
|
|
7127
|
+
event.preventDefault();
|
|
7128
|
+
this.cancelEdit();
|
|
7129
|
+
}
|
|
7130
|
+
};
|
|
7131
|
+
handleInputBlur = () => {
|
|
7132
|
+
this.commitEdit();
|
|
7133
|
+
};
|
|
7134
|
+
handlePaste = (event) => {
|
|
7135
|
+
event.preventDefault();
|
|
7136
|
+
const text = event.clipboardData?.getData('text/plain') ?? '';
|
|
7137
|
+
document.execCommand('insertText', false, text);
|
|
7138
|
+
};
|
|
7139
|
+
handleRemoveClick = (event) => {
|
|
7140
|
+
event.stopPropagation();
|
|
7141
|
+
if (this.disabled)
|
|
7142
|
+
return;
|
|
7143
|
+
this.remove.emit();
|
|
7144
|
+
};
|
|
7145
|
+
syncInputValue(value) {
|
|
7146
|
+
if (!this.inputEl)
|
|
7147
|
+
return;
|
|
7148
|
+
this.inputEl.textContent = value;
|
|
7149
|
+
const range = document.createRange();
|
|
7150
|
+
range.selectNodeContents(this.inputEl);
|
|
7151
|
+
range.collapse(false);
|
|
7152
|
+
const selection = window.getSelection();
|
|
7153
|
+
selection?.removeAllRanges();
|
|
7154
|
+
selection?.addRange(range);
|
|
7155
|
+
}
|
|
7156
|
+
registerToForm() {
|
|
7157
|
+
const formEl = this.el.closest('sd-form');
|
|
7158
|
+
if (!formEl || typeof formEl.componentOnReady !== 'function')
|
|
7159
|
+
return;
|
|
7160
|
+
formEl.componentOnReady().then(form => {
|
|
7161
|
+
form.sdRegisterField(this);
|
|
7162
|
+
});
|
|
7163
|
+
}
|
|
7164
|
+
unregisterFromForm() {
|
|
7165
|
+
if (!this.name)
|
|
7166
|
+
return;
|
|
7167
|
+
const formEl = this.el.closest('sd-form');
|
|
7168
|
+
formEl?.componentOnReady().then(form => {
|
|
7169
|
+
form.sdUnregisterField(this.name);
|
|
7170
|
+
});
|
|
7171
|
+
}
|
|
7172
|
+
componentDidUpdate() {
|
|
7173
|
+
if (this.isEditing && this.inputEl && this.shouldInitInput) {
|
|
7174
|
+
this.inputEl.focus();
|
|
7175
|
+
this.syncInputValue(this.internalValue);
|
|
7176
|
+
this.shouldInitInput = false;
|
|
7177
|
+
}
|
|
7178
|
+
}
|
|
7179
|
+
resolveState() {
|
|
7180
|
+
if (this.isEditing)
|
|
7181
|
+
return 'focus';
|
|
7182
|
+
if (this.error)
|
|
7183
|
+
return 'error';
|
|
7184
|
+
return 'default';
|
|
7185
|
+
}
|
|
7186
|
+
render() {
|
|
7187
|
+
const state = this.resolveState();
|
|
7188
|
+
const typography = state === 'focus' ? CHIP_TYPOGRAPHY.focus : CHIP_TYPOGRAPHY.default;
|
|
7189
|
+
const cssVars = {
|
|
7190
|
+
'--sd-chip-height': CHIP_LAYOUT.height,
|
|
7191
|
+
'--sd-chip-padding-x': CHIP_LAYOUT.paddingX,
|
|
7192
|
+
'--sd-chip-gap': CHIP_LAYOUT.gap,
|
|
7193
|
+
'--sd-chip-radius': CHIP_LAYOUT.radius,
|
|
7194
|
+
'--sd-chip-border-width': CHIP_LAYOUT.borderWidth,
|
|
7195
|
+
'--sd-chip-bg': CHIP_COLORS.bg[state],
|
|
7196
|
+
'--sd-chip-content': CHIP_COLORS.content[state],
|
|
7197
|
+
'--sd-chip-border-color': state === 'focus' ? CHIP_COLORS.border.focus : 'transparent',
|
|
7198
|
+
'--sd-chip-font-family': typography.fontFamily,
|
|
7199
|
+
'--sd-chip-font-size': typography.fontSize,
|
|
7200
|
+
'--sd-chip-font-weight': typography.fontWeight,
|
|
7201
|
+
'--sd-chip-line-height': typography.lineHeight,
|
|
7202
|
+
};
|
|
7203
|
+
return (hAsync("span", { key: 'ec814d57fb4032de1370e56d61cd51b6e831312a', class: {
|
|
7204
|
+
'sd-chip': true,
|
|
7205
|
+
[`sd-chip--${state}`]: true,
|
|
7206
|
+
'sd-chip--disabled': this.disabled,
|
|
7207
|
+
'sd-chip--editable': !this.disabled,
|
|
7208
|
+
}, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (hAsync("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
|
|
7209
|
+
hAsync("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
|
|
7210
|
+
!this.disabled && (hAsync("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
|
|
7211
|
+
])));
|
|
7212
|
+
}
|
|
7213
|
+
static get watchers() { return {
|
|
7214
|
+
"value": [{
|
|
7215
|
+
"valueChanged": 0
|
|
7216
|
+
}]
|
|
7217
|
+
}; }
|
|
7218
|
+
static get style() { return sdChipCss(); }
|
|
7219
|
+
static get cmpMeta() { return {
|
|
7220
|
+
"$flags$": 512,
|
|
7221
|
+
"$tagName$": "sd-chip",
|
|
7222
|
+
"$members$": {
|
|
7223
|
+
"name": [1],
|
|
7224
|
+
"value": [1025],
|
|
7225
|
+
"error": [1028],
|
|
7226
|
+
"disabled": [4],
|
|
7227
|
+
"placeholder": [1],
|
|
7228
|
+
"rules": [16],
|
|
7229
|
+
"internalValue": [32],
|
|
7230
|
+
"isEditing": [32],
|
|
7231
|
+
"sdValidate": [64],
|
|
7232
|
+
"sdReset": [64],
|
|
7233
|
+
"sdResetValidate": [64],
|
|
7234
|
+
"sdResetValidation": [64],
|
|
7235
|
+
"sdFocus": [64],
|
|
7236
|
+
"sdGetNativeElement": [64]
|
|
7237
|
+
},
|
|
7238
|
+
"$listeners$": undefined,
|
|
7239
|
+
"$lazyBundleId$": "-",
|
|
7240
|
+
"$attrsToReflect$": []
|
|
7241
|
+
}; }
|
|
7242
|
+
}
|
|
7243
|
+
|
|
6913
7244
|
const spinner = {
|
|
6914
7245
|
color: {
|
|
6915
7246
|
track: "#EEEEEE",
|
|
@@ -6971,7 +7302,7 @@ class SdCircleProgress {
|
|
|
6971
7302
|
arcStyle.strokeDashoffset = '0';
|
|
6972
7303
|
}
|
|
6973
7304
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
6974
|
-
return (hAsync(Host, { key: '
|
|
7305
|
+
return (hAsync(Host, { key: '50b598305810f4f91c5afb7ede87c60178e4e6df', style: hostStyle }, hAsync("svg", { key: '7edcf8a57bf5589910d08a47b64179222ce9c03b', 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: '43810b096bdd644e4b09bfd770de6b0194afe3c8', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '701cfdd0eadabea530d3a9deada993a568f3fb19', 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 }))));
|
|
6975
7306
|
}
|
|
6976
7307
|
static get style() { return sdCircleProgressCss(); }
|
|
6977
7308
|
static get cmpMeta() { return {
|
|
@@ -7081,9 +7412,9 @@ class SdConfirmModal {
|
|
|
7081
7412
|
render() {
|
|
7082
7413
|
const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
|
|
7083
7414
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
|
|
7084
|
-
return (hAsync("div", { key: '
|
|
7415
|
+
return (hAsync("div", { key: '0ec5edeaef4920bb9193c225e5b39465e138eb25', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '78db09f415f399302048280a2d3eb6eb737c1d47', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '30921f2c1fc59b7baa608c5b270f45cced3b4a69', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'fdb1fa855a980ccad41101de0b1b0fc87a8a503b', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: 'e3539c1d7e82c957ba65e3d63e18e74108ed4ccc', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '010bb3a2918672714a664cc9afa561d82ea2af30', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: '6501c456b1cac2fc14e62e8094c5996472eb10cc', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
|
|
7085
7416
|
this.customContentRef = el;
|
|
7086
|
-
} })) : (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: '
|
|
7417
|
+
} })) : (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: 'fb38b92bc7ee05ede36eab14d65062a0b6289762', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '7834c5baf84a1537e511f77f1d2bb2c018b2e5df', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: 'ca7a8fa074bde0339052adbacb52a60459e3da23', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button-v2", { key: '5e3238161e753a8ea2a0266d099ff03a89b63871', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
|
|
7087
7418
|
}
|
|
7088
7419
|
static get style() { return sdConfirmModalCss(); }
|
|
7089
7420
|
static get cmpMeta() { return {
|
|
@@ -7440,9 +7771,9 @@ class SdDatePicker {
|
|
|
7440
7771
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
7441
7772
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
7442
7773
|
};
|
|
7443
|
-
return (hAsync("sd-field", { key: '
|
|
7774
|
+
return (hAsync("sd-field", { key: '1a84754cdc67bd6603e1fb48479f9d3ac6424d6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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: 'e4d8e05b04ac7bd4f2f96809b33d67125fe7c6d8', class: "sd-date-picker", ref: el => {
|
|
7444
7775
|
this.triggerRef = el;
|
|
7445
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
7776
|
+
} }, hAsync("sd-date-picker-trigger", { key: '244924af2c3ea207b2a90c5aef5064755da3ae52', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'f3d882d3450f629b6ed501b984d89ffd9633531f', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: 'a0f47851a27dd777f77da40f3258638a0fbc37a5', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
7446
7777
|
}
|
|
7447
7778
|
static get watchers() { return {
|
|
7448
7779
|
"isOpen": [{
|
|
@@ -7623,7 +7954,7 @@ class SdDatePickerCalendar {
|
|
|
7623
7954
|
'--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
|
|
7624
7955
|
'--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
|
|
7625
7956
|
};
|
|
7626
|
-
return (hAsync("div", { key: '
|
|
7957
|
+
return (hAsync("div", { key: 'd23c08b38605dad1e5b3266a7e1ad72e0aeb7eb9', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '1c25bd19272e1e7f4e81601a0ffa13d7b882e4e4', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: 'aed9a7ff3282d363c61b49dde6b6e9d6131a456c', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '68ae361b1cc4bfd9351b093aee6d4193f2ac5549', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: 'e17d9a962faf96e8b70b0890e59e4c2e5ca515b0', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: 'ab65ce4f9f64fcc9f4084c073a0a0625ceeb9f2d', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: 'a01cb1691e9f112efdd6fd632c7594aa082d7f9f', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '577085a6007e5e2c6b291bbe0a27c0ff4ec4ca78', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: 'c6b51b60d1bcc06e537800c10946ac49639fcb2c', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '836008030a0d66533ffba9392fee0234a9b0b425', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: 'a602cb65934157c171201f01699aacf1eeee8a57', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: '0c1a368d4e878b2942f2b37ddff47ac13262c580', 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: '31cfa57cd8890a7cd70209c771598d6350009cc6', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
|
|
7627
7958
|
const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
|
|
7628
7959
|
const isToday = cell.inCurrentMonth && today === cell.date;
|
|
7629
7960
|
const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
|
|
@@ -7694,10 +8025,10 @@ class SdDatePickerTrigger {
|
|
|
7694
8025
|
? DATEPICKER_COLORS.icon.disabled
|
|
7695
8026
|
: DATEPICKER_COLORS.icon.default,
|
|
7696
8027
|
};
|
|
7697
|
-
return (hAsync("div", { key: '
|
|
8028
|
+
return (hAsync("div", { key: 'ebe886b3df3b50c53d31081f6ad7e251721b5cb1', class: {
|
|
7698
8029
|
'sd-date-picker-trigger': true,
|
|
7699
8030
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
7700
|
-
}, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: '
|
|
8031
|
+
}, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: '563d3bb0221d5ba17788e1fa1e970fd2d702a4fd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '3bfc4c6671e70571a4b71a62cf0fd78f0297027f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
|
|
7701
8032
|
}
|
|
7702
8033
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
7703
8034
|
static get cmpMeta() { return {
|
|
@@ -8116,7 +8447,7 @@ class SdDateRangePickerCalendar {
|
|
|
8116
8447
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
8117
8448
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
8118
8449
|
};
|
|
8119
|
-
return (hAsync(Fragment, { key: '
|
|
8450
|
+
return (hAsync(Fragment, { key: '595c17bc338f96117d87c5ac3c2b26895b9e5283' }, hAsync("div", { key: '39ce76545cc612422ab5024a2838fbc9faabb9a8', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '21764e31a3fbcfa8de22d1f243f5739fc02c38fd', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '402ea75f3bf8b58d30c34238285eef7099118e28', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
8120
8451
|
}
|
|
8121
8452
|
static get watchers() { return {
|
|
8122
8453
|
"value": [{
|
|
@@ -8236,6 +8567,7 @@ const color = {
|
|
|
8236
8567
|
accent: {
|
|
8237
8568
|
"default": "#0075FF"}},
|
|
8238
8569
|
content: {
|
|
8570
|
+
primary: "#222222",
|
|
8239
8571
|
secondary: "#555555",
|
|
8240
8572
|
inverse: "#FFFFFF"
|
|
8241
8573
|
}};
|
|
@@ -8483,7 +8815,7 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
8483
8815
|
}
|
|
8484
8816
|
render() {
|
|
8485
8817
|
const { config, preset } = this.resolvedConfig;
|
|
8486
|
-
return (hAsync("div", { key: '
|
|
8818
|
+
return (hAsync("div", { key: '5493b94262ecdd20a5fbb7ad2993dd473b1ae9e3', class: "sd-dropdown-button" }, hAsync("button", { key: 'a64187dec0d84dce3532f8b3d7112ed6d6ae8e0d', 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: {
|
|
8487
8819
|
'--sd-dropdown-button-bg': config.color,
|
|
8488
8820
|
'--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
|
|
8489
8821
|
'--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
|
|
@@ -8493,10 +8825,10 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
8493
8825
|
'--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
|
|
8494
8826
|
'--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
|
|
8495
8827
|
'--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
|
|
8496
|
-
} }, hAsync("span", { key: '
|
|
8828
|
+
} }, hAsync("span", { key: '71ed27650dcb1beb1cfa4864a6449ab190f04829', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '6c34575c0587fb288165cf0e15db52ed6b3f50db', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: '0544b9d36657a80b5f51b9c1849d55ab7a7dbdc2', class: {
|
|
8497
8829
|
'sd-dropdown-button__trigger-icon': true,
|
|
8498
8830
|
'sd-dropdown-button__trigger-icon--open': this.isOpen,
|
|
8499
|
-
}, "aria-hidden": "true" }, hAsync("sd-icon", { key: '
|
|
8831
|
+
}, "aria-hidden": "true" }, hAsync("sd-icon", { key: 'cd73a4dffbe1fc31c76fea221cd080b455bb3131', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
|
|
8500
8832
|
}
|
|
8501
8833
|
static get watchers() { return {
|
|
8502
8834
|
"isOpen": [{
|
|
@@ -8542,8 +8874,9 @@ const field = {
|
|
|
8542
8874
|
icon: "16",
|
|
8543
8875
|
typography: {
|
|
8544
8876
|
fontWeight: "700",
|
|
8545
|
-
fontSize: "
|
|
8546
|
-
lineHeight: "
|
|
8877
|
+
fontSize: "14",
|
|
8878
|
+
lineHeight: "24"
|
|
8879
|
+
}
|
|
8547
8880
|
}
|
|
8548
8881
|
},
|
|
8549
8882
|
addonLabel: {
|
|
@@ -8754,20 +9087,20 @@ class SdField {
|
|
|
8754
9087
|
'--sd-field-addon-border-width': `${addonTokens.border.width}px`,
|
|
8755
9088
|
}
|
|
8756
9089
|
: {};
|
|
8757
|
-
return (hAsync("div", { key: '
|
|
9090
|
+
return (hAsync("div", { key: 'af5531a8bad5b8685f56748ce55044927f061903', class: {
|
|
8758
9091
|
'sd-field': true,
|
|
8759
9092
|
'sd-field--has-label': !!this.label,
|
|
8760
9093
|
'sd-field--has-addon': !!addon,
|
|
8761
9094
|
[this.fieldStatus]: !!this.fieldStatus,
|
|
8762
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '
|
|
9095
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '82f2472c0ccc778a982bbf6164edfdc1629a9eb1', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '42dd86d80718b245402b42376d28810745cf2154', class: "sd-field__main", style: this.width
|
|
8763
9096
|
? {
|
|
8764
9097
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
8765
9098
|
flex: 'none',
|
|
8766
9099
|
}
|
|
8767
|
-
: {} }, hAsync("div", { key: '
|
|
9100
|
+
: {} }, hAsync("div", { key: '0c80a69019f7b14c5f19eeb21f751c885df4c82b', class: {
|
|
8768
9101
|
'sd-field__control': true,
|
|
8769
9102
|
'sd-field__control--has-addon': !!addon,
|
|
8770
|
-
} }, addon && hAsync("div", { key: '
|
|
9103
|
+
} }, addon && hAsync("div", { key: 'c3b9fac0b4586ba5697af8a7cfe7a6aec01b0e52', class: "sd-field__addon" }, addon), hAsync("slot", { key: 'f7e087e3b3927708fd28919dba9e6edf4e1d317b' })), 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))))));
|
|
8771
9104
|
}
|
|
8772
9105
|
renderLabel(label) {
|
|
8773
9106
|
if (!label)
|
|
@@ -8851,7 +9184,7 @@ const FILE_PICKER_COLORS = {
|
|
|
8851
9184
|
},
|
|
8852
9185
|
};
|
|
8853
9186
|
|
|
8854
|
-
const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:
|
|
9187
|
+
const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
|
|
8855
9188
|
|
|
8856
9189
|
class SdFilePicker {
|
|
8857
9190
|
constructor(hostRef) {
|
|
@@ -9028,7 +9361,7 @@ class SdFilePicker {
|
|
|
9028
9361
|
'sd-file-picker__text': true,
|
|
9029
9362
|
'sd-file-picker__text--placeholder': !hasFiles,
|
|
9030
9363
|
'sd-file-picker__text--active': hasFiles,
|
|
9031
|
-
} }, displayText), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { class: "sd-file-picker__tooltip" }, displayText))));
|
|
9364
|
+
} }, displayText), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { class: "sd-file-picker__tooltip" }, displayText))));
|
|
9032
9365
|
if (this.inline) {
|
|
9033
9366
|
return (hAsync("div", { class: {
|
|
9034
9367
|
'sd-file-picker--inline': true,
|
|
@@ -9094,7 +9427,7 @@ class SdFloatingPopover {
|
|
|
9094
9427
|
to = 'body';
|
|
9095
9428
|
parentRef = null;
|
|
9096
9429
|
offset = [0, 0];
|
|
9097
|
-
zIndex =
|
|
9430
|
+
zIndex = 998;
|
|
9098
9431
|
placement = 'bottom';
|
|
9099
9432
|
open = false;
|
|
9100
9433
|
close;
|
|
@@ -9152,7 +9485,7 @@ class SdFloatingPopover {
|
|
|
9152
9485
|
this.wrapper = document.createElement('div');
|
|
9153
9486
|
Object.assign(this.wrapper.style, {
|
|
9154
9487
|
position: 'absolute',
|
|
9155
|
-
zIndex: (this.zIndex ??
|
|
9488
|
+
zIndex: (this.zIndex ?? 998).toString(),
|
|
9156
9489
|
transition: 'opacity 0.4s',
|
|
9157
9490
|
top: '-9999px',
|
|
9158
9491
|
left: '-9999px',
|
|
@@ -9182,18 +9515,22 @@ class SdFloatingPopover {
|
|
|
9182
9515
|
switch (this.placement) {
|
|
9183
9516
|
case 'top':
|
|
9184
9517
|
top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
|
|
9185
|
-
left =
|
|
9518
|
+
left =
|
|
9519
|
+
rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
|
|
9186
9520
|
break;
|
|
9187
9521
|
case 'bottom':
|
|
9188
9522
|
top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
|
|
9189
|
-
left =
|
|
9523
|
+
left =
|
|
9524
|
+
rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
|
|
9190
9525
|
break;
|
|
9191
9526
|
case 'left':
|
|
9192
|
-
top =
|
|
9527
|
+
top =
|
|
9528
|
+
rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
|
|
9193
9529
|
left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
|
|
9194
9530
|
break;
|
|
9195
9531
|
case 'right':
|
|
9196
|
-
top =
|
|
9532
|
+
top =
|
|
9533
|
+
rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
|
|
9197
9534
|
left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
|
|
9198
9535
|
break;
|
|
9199
9536
|
}
|
|
@@ -9234,7 +9571,7 @@ class SdFloatingPopover {
|
|
|
9234
9571
|
this.close.emit();
|
|
9235
9572
|
}
|
|
9236
9573
|
render() {
|
|
9237
|
-
return hAsync("slot", { key: '
|
|
9574
|
+
return hAsync("slot", { key: 'f463fadca5060ebc995d8115575404611b94fb11' });
|
|
9238
9575
|
}
|
|
9239
9576
|
static get style() { return sdFloatingPortalCss(); }
|
|
9240
9577
|
static get cmpMeta() { return {
|
|
@@ -9488,19 +9825,19 @@ class SdGhostButton {
|
|
|
9488
9825
|
render() {
|
|
9489
9826
|
const sizeConfig = GHOST_BUTTON_SIZES[this.size];
|
|
9490
9827
|
const contentColor = this.disabled
|
|
9491
|
-
? GHOST_BUTTON_DISABLED_COLORS[this.intent]
|
|
9492
|
-
: GHOST_BUTTON_CONTENT_COLORS[this.intent];
|
|
9828
|
+
? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
|
|
9829
|
+
: GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
|
|
9493
9830
|
const accessibleName = this.ariaLabel.trim() || undefined;
|
|
9494
|
-
return (hAsync("button", { key: '
|
|
9831
|
+
return (hAsync("button", { key: '690151271d15b4a3e07b47021f368647cc9daf62', class: {
|
|
9495
9832
|
'sd-ghost-button': true,
|
|
9496
9833
|
'sd-ghost-button--disabled': this.disabled,
|
|
9497
9834
|
}, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
9498
9835
|
'--sd-ghost-button-size': `${sizeConfig.size}px`,
|
|
9499
9836
|
'--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
|
|
9500
|
-
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
|
|
9837
|
+
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
|
|
9501
9838
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
9502
9839
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
9503
|
-
}, onClick: this.handleClick }, hAsync("sd-icon", { key: '
|
|
9840
|
+
}, onClick: this.handleClick }, hAsync("sd-icon", { key: '9769fff9f694e7d1fa2cba94fa8e80498d0afe2e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
9504
9841
|
}
|
|
9505
9842
|
static get style() { return sdGhostButtonCss(); }
|
|
9506
9843
|
static get cmpMeta() { return {
|
|
@@ -9519,62 +9856,194 @@ class SdGhostButton {
|
|
|
9519
9856
|
}; }
|
|
9520
9857
|
}
|
|
9521
9858
|
|
|
9522
|
-
const
|
|
9859
|
+
const guide = {
|
|
9860
|
+
button: {
|
|
9861
|
+
height: "28",
|
|
9862
|
+
paddingX: "12",
|
|
9863
|
+
radius: "9999",
|
|
9864
|
+
gap: "6",
|
|
9865
|
+
typography: {
|
|
9866
|
+
fontSize: "12",
|
|
9867
|
+
fontWeight: "500",
|
|
9868
|
+
lineHeight: "20"
|
|
9869
|
+
},
|
|
9870
|
+
icon: {
|
|
9871
|
+
size: "16",
|
|
9872
|
+
"default": "#00973C",
|
|
9873
|
+
active: "#FFFFFF"
|
|
9874
|
+
},
|
|
9875
|
+
border: {
|
|
9876
|
+
width: "1",
|
|
9877
|
+
"default": "#E1E1E1"
|
|
9878
|
+
},
|
|
9879
|
+
bg: {
|
|
9880
|
+
"default": "#FFFFFF",
|
|
9881
|
+
tip: "#00973C",
|
|
9882
|
+
notion: "#1F8AE1"
|
|
9883
|
+
},
|
|
9884
|
+
text: {
|
|
9885
|
+
"default": "#222222",
|
|
9886
|
+
active: "#FFFFFF"
|
|
9887
|
+
}
|
|
9888
|
+
},
|
|
9889
|
+
contents: {
|
|
9890
|
+
paddingX: "24",
|
|
9891
|
+
paddingY: "20",
|
|
9892
|
+
gap: "12",
|
|
9893
|
+
title: {
|
|
9894
|
+
gap: "8"
|
|
9895
|
+
},
|
|
9896
|
+
row: {
|
|
9897
|
+
gap: "8"
|
|
9898
|
+
},
|
|
9899
|
+
body: {
|
|
9900
|
+
gap: "2"
|
|
9901
|
+
},
|
|
9902
|
+
typography: {
|
|
9903
|
+
title: {
|
|
9904
|
+
fontWeight: "700",
|
|
9905
|
+
fontSize: "16",
|
|
9906
|
+
lineHeight: "26"
|
|
9907
|
+
},
|
|
9908
|
+
body: {
|
|
9909
|
+
fontWeight: "400",
|
|
9910
|
+
fontSize: "12",
|
|
9911
|
+
lineHeight: "20"},
|
|
9912
|
+
color: "#222222"
|
|
9913
|
+
},
|
|
9914
|
+
icon: "#00973C",
|
|
9915
|
+
radius: "8"}
|
|
9916
|
+
};
|
|
9917
|
+
var guideTokens = {
|
|
9918
|
+
guide: guide
|
|
9919
|
+
};
|
|
9920
|
+
|
|
9921
|
+
const { button, contents} = guideTokens.guide;
|
|
9922
|
+
const NOTION_ICON_COLOR = systemTokens.color.content.primary;
|
|
9923
|
+
const GUIDE_CONFIG = {
|
|
9924
|
+
button: {
|
|
9925
|
+
height: `${button.height}px`,
|
|
9926
|
+
paddingX: `${button.paddingX}px`,
|
|
9927
|
+
radius: `${button.radius}px`,
|
|
9928
|
+
gap: `${button.gap}px`,
|
|
9929
|
+
fontSize: `${button.typography.fontSize}px`,
|
|
9930
|
+
fontWeight: button.typography.fontWeight,
|
|
9931
|
+
lineHeight: `${button.typography.lineHeight}px`,
|
|
9932
|
+
iconSize: Number(button.icon.size),
|
|
9933
|
+
iconColorDefault: button.icon.default,
|
|
9934
|
+
iconColorActive: button.icon.active,
|
|
9935
|
+
iconColorNotion: NOTION_ICON_COLOR,
|
|
9936
|
+
borderWidth: `${button.border.width}px`,
|
|
9937
|
+
borderColor: button.border.default,
|
|
9938
|
+
bgDefault: button.bg.default,
|
|
9939
|
+
bgTip: button.bg.tip,
|
|
9940
|
+
bgNotion: button.bg.notion,
|
|
9941
|
+
textDefault: button.text.default,
|
|
9942
|
+
textActive: button.text.active,
|
|
9943
|
+
},
|
|
9944
|
+
contents: {
|
|
9945
|
+
paddingX: `${contents.paddingX}px`,
|
|
9946
|
+
paddingY: `${contents.paddingY}px`,
|
|
9947
|
+
gap: `${contents.gap}px`,
|
|
9948
|
+
rowGap: `${contents.row.gap}px`,
|
|
9949
|
+
bodyGap: `${contents.body.gap}px`,
|
|
9950
|
+
titleGap: `${contents.title.gap}px`,
|
|
9951
|
+
radius: `${contents.radius}px`,
|
|
9952
|
+
iconColor: contents.icon,
|
|
9953
|
+
iconColorNotion: NOTION_ICON_COLOR,
|
|
9954
|
+
titleFontSize: `${contents.typography.title.fontSize}px`,
|
|
9955
|
+
titleFontWeight: contents.typography.title.fontWeight,
|
|
9956
|
+
titleLineHeight: `${contents.typography.title.lineHeight}px`,
|
|
9957
|
+
bodyFontSize: `${contents.typography.body.fontSize}px`,
|
|
9958
|
+
bodyFontWeight: contents.typography.body.fontWeight,
|
|
9959
|
+
bodyLineHeight: `${contents.typography.body.lineHeight}px`,
|
|
9960
|
+
textColor: contents.typography.color,
|
|
9961
|
+
},
|
|
9962
|
+
};
|
|
9963
|
+
|
|
9964
|
+
const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-button-radius-sm, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);background:var(--sd-button-button-bg-disabled, #E1E1E1);color:var(--sd-button-button-text-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide .sd-guide__button .sd-button{min-height:var(--sd-guide-button-height);padding:0 var(--sd-guide-button-padding-x);border-radius:var(--sd-guide-button-radius);border:var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);background:var(--sd-guide-button-bg-default);color:var(--sd-guide-button-text-default) !important;transition:none;display:flex;align-items:center;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content{color:var(--sd-guide-button-text-default) !important;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label{margin-left:0;color:var(--sd-guide-button-text-default) !important;font-size:var(--sd-guide-button-font-size);font-weight:var(--sd-guide-button-font-weight);line-height:var(--sd-guide-button-line-height)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-tip);border-color:var(--sd-guide-button-bg-tip)}.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-notion);border-color:var(--sd-guide-button-bg-notion)}.sd-guide__popup{position:relative;padding:var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);border-radius:var(--sd-guide-contents-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:var(--sd-guide-contents-title-gap);margin-bottom:var(--sd-guide-contents-gap)}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;margin-bottom:0;font-size:var(--sd-guide-contents-title-font-size);font-weight:var(--sd-guide-contents-title-font-weight);line-height:var(--sd-guide-contents-title-line-height);color:var(--sd-guide-contents-text-color)}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height)}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height);margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-1:not(:first-child){margin-top:var(--sd-guide-contents-row-gap)}.sd-guide__popup__list__item--depth-2{margin-top:var(--sd-guide-contents-body-gap)}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
|
|
9523
9965
|
|
|
9524
|
-
const
|
|
9525
|
-
|
|
9526
|
-
pdf: 'PDF Guide',
|
|
9527
|
-
youtube: 'Video Guide',
|
|
9966
|
+
const DEFAULT_LABEL_BY_TYPE = {
|
|
9967
|
+
tip: '활용 TIP',
|
|
9528
9968
|
notion: '사용법 안내',
|
|
9529
|
-
event: 'Event Button',
|
|
9530
9969
|
};
|
|
9531
|
-
const
|
|
9532
|
-
|
|
9533
|
-
|
|
9534
|
-
size: 20,
|
|
9535
|
-
color: 'green_75',
|
|
9536
|
-
},
|
|
9537
|
-
pdf: { name: 'pdf', size: 20, color: 'red_75' },
|
|
9538
|
-
youtube: { name: 'youtube', size: 20, color: 'red_75' },
|
|
9539
|
-
notion: { name: 'notion', size: 16, color: 'black' },
|
|
9540
|
-
event: { name: 'event', size: 16, color: 'brilliantblue_70' },
|
|
9970
|
+
const ICON_BY_TYPE = {
|
|
9971
|
+
tip: 'helpOutline',
|
|
9972
|
+
notion: 'notion',
|
|
9541
9973
|
};
|
|
9542
9974
|
class SdGuide {
|
|
9543
9975
|
constructor(hostRef) {
|
|
9544
9976
|
registerInstance(this, hostRef);
|
|
9545
9977
|
}
|
|
9546
9978
|
get el() { return getElement(this); }
|
|
9547
|
-
type = '
|
|
9979
|
+
type = 'tip';
|
|
9548
9980
|
label = '';
|
|
9549
9981
|
message = '';
|
|
9550
|
-
|
|
9982
|
+
url = '';
|
|
9551
9983
|
popupTitle = '';
|
|
9552
9984
|
popupWidth;
|
|
9553
9985
|
popupShow = false;
|
|
9554
9986
|
guideRef;
|
|
9555
9987
|
handleClickGuide = () => {
|
|
9556
|
-
if (this.type === '
|
|
9557
|
-
this.
|
|
9988
|
+
if (this.type === 'notion') {
|
|
9989
|
+
if (this.url) {
|
|
9990
|
+
window.open(this.url, '_blank', 'noopener,noreferrer');
|
|
9991
|
+
}
|
|
9558
9992
|
return;
|
|
9559
9993
|
}
|
|
9560
|
-
|
|
9561
|
-
window.open(this.guideUrl, '_blank');
|
|
9562
|
-
}
|
|
9994
|
+
this.popupShow = !this.popupShow;
|
|
9563
9995
|
};
|
|
9564
|
-
get guideClass() {
|
|
9565
|
-
const classes = ['sd-guide', `sd-guide--${this.type}`];
|
|
9566
|
-
if (this.popupShow)
|
|
9567
|
-
classes.push('sd-guide--active');
|
|
9568
|
-
return classes.join(' ');
|
|
9569
|
-
}
|
|
9570
9996
|
closeDropdown = () => {
|
|
9571
9997
|
this.popupShow = false;
|
|
9572
9998
|
};
|
|
9999
|
+
get guideStyle() {
|
|
10000
|
+
const { button, contents } = GUIDE_CONFIG;
|
|
10001
|
+
return {
|
|
10002
|
+
'--sd-guide-button-height': button.height,
|
|
10003
|
+
'--sd-guide-button-padding-x': button.paddingX,
|
|
10004
|
+
'--sd-guide-button-radius': button.radius,
|
|
10005
|
+
'--sd-guide-button-gap': button.gap,
|
|
10006
|
+
'--sd-guide-button-font-size': button.fontSize,
|
|
10007
|
+
'--sd-guide-button-font-weight': button.fontWeight,
|
|
10008
|
+
'--sd-guide-button-line-height': button.lineHeight,
|
|
10009
|
+
'--sd-guide-button-border-width': button.borderWidth,
|
|
10010
|
+
'--sd-guide-button-border-color': button.borderColor,
|
|
10011
|
+
'--sd-guide-button-bg-default': button.bgDefault,
|
|
10012
|
+
'--sd-guide-button-bg-tip': button.bgTip,
|
|
10013
|
+
'--sd-guide-button-bg-notion': button.bgNotion,
|
|
10014
|
+
'--sd-guide-button-text-default': button.textDefault,
|
|
10015
|
+
'--sd-guide-button-text-active': button.textActive,
|
|
10016
|
+
'--sd-guide-contents-padding-x': contents.paddingX,
|
|
10017
|
+
'--sd-guide-contents-padding-y': contents.paddingY,
|
|
10018
|
+
'--sd-guide-contents-gap': contents.gap,
|
|
10019
|
+
'--sd-guide-contents-row-gap': contents.rowGap,
|
|
10020
|
+
'--sd-guide-contents-body-gap': contents.bodyGap,
|
|
10021
|
+
'--sd-guide-contents-title-gap': contents.titleGap,
|
|
10022
|
+
'--sd-guide-contents-radius': contents.radius,
|
|
10023
|
+
'--sd-guide-contents-title-font-size': contents.titleFontSize,
|
|
10024
|
+
'--sd-guide-contents-title-font-weight': contents.titleFontWeight,
|
|
10025
|
+
'--sd-guide-contents-title-line-height': contents.titleLineHeight,
|
|
10026
|
+
'--sd-guide-contents-body-font-size': contents.bodyFontSize,
|
|
10027
|
+
'--sd-guide-contents-body-font-weight': contents.bodyFontWeight,
|
|
10028
|
+
'--sd-guide-contents-body-line-height': contents.bodyLineHeight,
|
|
10029
|
+
'--sd-guide-contents-text-color': contents.textColor,
|
|
10030
|
+
};
|
|
10031
|
+
}
|
|
9573
10032
|
render() {
|
|
9574
|
-
const {
|
|
9575
|
-
|
|
9576
|
-
|
|
9577
|
-
|
|
10033
|
+
const { button, contents } = GUIDE_CONFIG;
|
|
10034
|
+
const isActive = this.popupShow;
|
|
10035
|
+
const isNotion = (this.type ?? 'tip') === 'notion';
|
|
10036
|
+
const defaultLabel = DEFAULT_LABEL_BY_TYPE[this.type ?? 'tip'];
|
|
10037
|
+
const iconName = ICON_BY_TYPE[this.type ?? 'tip'];
|
|
10038
|
+
const buttonIconDefault = isNotion ? button.iconColorNotion : button.iconColorDefault;
|
|
10039
|
+
const popupIconColor = isNotion ? contents.iconColorNotion : contents.iconColor;
|
|
10040
|
+
const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
|
|
10041
|
+
if (isActive)
|
|
10042
|
+
buttonClasses.push('sd-guide__button--active');
|
|
10043
|
+
return (hAsync("div", { key: '4b9aa8bafd13828a4ec29d726f7276fab3042f2d', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: 'e3a17c594d111e95d0cb42dd8315174ccf4dd908', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), variant: isActive ? 'primary' : 'outline', label: this.label || defaultLabel, size: "sm", icon: iconName, iconColor: isActive ? button.iconColorActive : buttonIconDefault, iconSize: button.iconSize, noHover: isActive, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'b57b09779ec23220eb466f710d55e678c913fe24', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'e62ca3a49a4976861a3e485166c8376a71286aba', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '837625b5ab61bd9383cf5329bea66ceb97ef3bac', class: "sd-guide__popup", style: {
|
|
10044
|
+
...this.guideStyle,
|
|
10045
|
+
width: this.popupWidth ? this.popupWidth + 'px' : '426px',
|
|
10046
|
+
} }, hAsync("sd-ghost-button", { key: '0e3057af64b47e20234269c0e2bf07664b8b3b13', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: '544e3508d232229b4d1edd82fdefa58457cc595a', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '234fb04df972a50fa8deb1cacc6e34fab678d27b', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: '454d5ee4cdfc2a343d64e79dc642a2aee07ed448', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '875d5f5587808e5189e77ca02e55e8d7be1125da', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
|
|
9578
10047
|
}
|
|
9579
10048
|
// 현재 2depth까지만 스타일 적용
|
|
9580
10049
|
renderListItem(message, depth = 0) {
|
|
@@ -9596,17 +10065,17 @@ class SdGuide {
|
|
|
9596
10065
|
"$flags$": 512,
|
|
9597
10066
|
"$tagName$": "sd-guide",
|
|
9598
10067
|
"$members$": {
|
|
9599
|
-
"type": [
|
|
9600
|
-
"label": [
|
|
10068
|
+
"type": [513],
|
|
10069
|
+
"label": [513],
|
|
9601
10070
|
"message": [1],
|
|
9602
|
-
"
|
|
10071
|
+
"url": [1],
|
|
9603
10072
|
"popupTitle": [1, "popup-title"],
|
|
9604
10073
|
"popupWidth": [2, "popup-width"],
|
|
9605
10074
|
"popupShow": [32]
|
|
9606
10075
|
},
|
|
9607
10076
|
"$listeners$": undefined,
|
|
9608
10077
|
"$lazyBundleId$": "-",
|
|
9609
|
-
"$attrsToReflect$": []
|
|
10078
|
+
"$attrsToReflect$": [["type", "type"], ["label", "label"]]
|
|
9610
10079
|
}; }
|
|
9611
10080
|
}
|
|
9612
10081
|
|
|
@@ -10278,12 +10747,12 @@ class SdInput {
|
|
|
10278
10747
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
10279
10748
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
10280
10749
|
};
|
|
10281
|
-
return (hAsync("sd-field", { key: '
|
|
10750
|
+
return (hAsync("sd-field", { key: 'ed32da716dabccac9c67061086a3eb821f49afd5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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: 'c8297e261baee31b8508e0912004edd7fe85f115', class: "sd-input__content" }, hAsync("slot", { key: '615b28bb1f239a1ead1cad888edde9b59358837b', name: "prefix" }), hAsync("input", { key: 'd1231386b264dbb8b38bf920c48c59474417a492', 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: '97f7c084a17674d52c43255b334ddeb61cf743ad', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: 'f35a0872ac6f44e41716b0bf9f93f7a000445bf6', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
10282
10751
|
if (this.disabled)
|
|
10283
10752
|
return;
|
|
10284
10753
|
this.internalValue = '';
|
|
10285
10754
|
await this.formField?.sdValidate();
|
|
10286
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
10755
|
+
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '0fdf74595057997c7d2f5f0f3ba6b75c340c2965', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
|
|
10287
10756
|
if (this.disabled)
|
|
10288
10757
|
return;
|
|
10289
10758
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -10346,7 +10815,7 @@ class SdInput {
|
|
|
10346
10815
|
}; }
|
|
10347
10816
|
}
|
|
10348
10817
|
|
|
10349
|
-
const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index,
|
|
10818
|
+
const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
|
|
10350
10819
|
|
|
10351
10820
|
class SdLoadingContainer {
|
|
10352
10821
|
constructor(hostRef) {
|
|
@@ -10362,10 +10831,10 @@ class SdLoadingContainer {
|
|
|
10362
10831
|
this.visible = false;
|
|
10363
10832
|
}
|
|
10364
10833
|
render() {
|
|
10365
|
-
return (hAsync("div", { key: '
|
|
10834
|
+
return (hAsync("div", { key: '8236579ed01f703fb105576c2fd575b157b3aa76', class: {
|
|
10366
10835
|
'sd-loading-container': true,
|
|
10367
10836
|
'sd-loading-container--visible': this.visible,
|
|
10368
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
10837
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '176473a839add91a86d207544e9cc5862b13d04f', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '2776ed326caa6870a79b94079ff6e778ee560b02', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '6977bfd46e06e9c13492a15b5081c98446770de5', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '7cea458c498a4682b1d4d5f07e059ed8e4905df0', class: "sd-loading-container__message" }, this.message)))));
|
|
10369
10838
|
}
|
|
10370
10839
|
static get style() { return sdLoadingContainerCss(); }
|
|
10371
10840
|
static get cmpMeta() { return {
|
|
@@ -10458,7 +10927,7 @@ class SdLoadingModal {
|
|
|
10458
10927
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
10459
10928
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
10460
10929
|
};
|
|
10461
|
-
return (hAsync(Host, { key: '
|
|
10930
|
+
return (hAsync(Host, { key: '8ecd5db2ffde201dd0c7d3c58b1da6b85b5a4116', style: hostStyle }, hAsync("div", { key: '61f79b16b22d5ab4bb4dca03f88568174cfcfb1f', class: "sd-loading-modal" }, hAsync("div", { key: 'bc373cfebab5949bee9c024bd86ca92d8294ff7b', 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("p", { key: 'e9015b9c9813b1968c8ca7991d654761eb3ee9b3', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (hAsync("div", { key: '4ed941961611fe9533bd2b989c9b68ef6c7ca741', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '13f4c5ef5ad5285d846716e5dd72d9f2565c08f9', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
|
|
10462
10931
|
}
|
|
10463
10932
|
static get style() { return sdLoadingModalCss(); }
|
|
10464
10933
|
static get cmpMeta() { return {
|
|
@@ -10478,7 +10947,105 @@ class SdLoadingModal {
|
|
|
10478
10947
|
}; }
|
|
10479
10948
|
}
|
|
10480
10949
|
|
|
10481
|
-
const
|
|
10950
|
+
const DEFAULT_BASE_Z_INDEX = 997;
|
|
10951
|
+
let baseZIndex = DEFAULT_BASE_Z_INDEX;
|
|
10952
|
+
let entries = [];
|
|
10953
|
+
let bodyScrollLocked = false;
|
|
10954
|
+
let previousBodyOverflow = null;
|
|
10955
|
+
let isKeydownAttached = false;
|
|
10956
|
+
function isBrowserEnvironment() {
|
|
10957
|
+
return typeof window !== 'undefined' && typeof document !== 'undefined';
|
|
10958
|
+
}
|
|
10959
|
+
function getTopInteractiveEntry() {
|
|
10960
|
+
return [...entries].reverse().find(entry => entry.interactive);
|
|
10961
|
+
}
|
|
10962
|
+
function syncBodyScrollLock() {
|
|
10963
|
+
if (!isBrowserEnvironment())
|
|
10964
|
+
return;
|
|
10965
|
+
const shouldLock = entries.length > 0;
|
|
10966
|
+
if (shouldLock === bodyScrollLocked)
|
|
10967
|
+
return;
|
|
10968
|
+
if (shouldLock) {
|
|
10969
|
+
previousBodyOverflow = document.body.style.overflow || '';
|
|
10970
|
+
document.body.style.overflow = 'hidden';
|
|
10971
|
+
}
|
|
10972
|
+
else {
|
|
10973
|
+
document.body.style.overflow = previousBodyOverflow ?? '';
|
|
10974
|
+
previousBodyOverflow = null;
|
|
10975
|
+
}
|
|
10976
|
+
bodyScrollLocked = shouldLock;
|
|
10977
|
+
}
|
|
10978
|
+
function updateEntryZIndices() {
|
|
10979
|
+
entries.forEach(entry => {
|
|
10980
|
+
entry.setZIndex(baseZIndex);
|
|
10981
|
+
});
|
|
10982
|
+
}
|
|
10983
|
+
function detachKeydownListener() {
|
|
10984
|
+
if (!isBrowserEnvironment() || !isKeydownAttached)
|
|
10985
|
+
return;
|
|
10986
|
+
window.removeEventListener('keydown', handleWindowKeydown);
|
|
10987
|
+
isKeydownAttached = false;
|
|
10988
|
+
}
|
|
10989
|
+
function attachKeydownListener() {
|
|
10990
|
+
if (!isBrowserEnvironment() || isKeydownAttached)
|
|
10991
|
+
return;
|
|
10992
|
+
window.addEventListener('keydown', handleWindowKeydown);
|
|
10993
|
+
isKeydownAttached = true;
|
|
10994
|
+
}
|
|
10995
|
+
function syncGlobalState() {
|
|
10996
|
+
updateEntryZIndices();
|
|
10997
|
+
syncBodyScrollLock();
|
|
10998
|
+
if (entries.length > 0)
|
|
10999
|
+
attachKeydownListener();
|
|
11000
|
+
else
|
|
11001
|
+
detachKeydownListener();
|
|
11002
|
+
}
|
|
11003
|
+
function handleWindowKeydown(e) {
|
|
11004
|
+
if (e.key !== 'Escape')
|
|
11005
|
+
return;
|
|
11006
|
+
const topEntry = getTopInteractiveEntry();
|
|
11007
|
+
if (!topEntry)
|
|
11008
|
+
return;
|
|
11009
|
+
if (topEntry.persistent) {
|
|
11010
|
+
topEntry.shake();
|
|
11011
|
+
return;
|
|
11012
|
+
}
|
|
11013
|
+
topEntry.requestClose('close');
|
|
11014
|
+
}
|
|
11015
|
+
function registerModal(entry) {
|
|
11016
|
+
entries = [
|
|
11017
|
+
...entries.filter(item => item.id !== entry.id),
|
|
11018
|
+
{
|
|
11019
|
+
...entry,
|
|
11020
|
+
interactive: true,
|
|
11021
|
+
},
|
|
11022
|
+
];
|
|
11023
|
+
syncGlobalState();
|
|
11024
|
+
}
|
|
11025
|
+
function unregisterModal(id) {
|
|
11026
|
+
entries = entries.filter(entry => entry.id !== id);
|
|
11027
|
+
syncGlobalState();
|
|
11028
|
+
}
|
|
11029
|
+
function setModalInteractive(id, interactive) {
|
|
11030
|
+
entries = entries.map(entry => (entry.id === id ? { ...entry, interactive } : entry));
|
|
11031
|
+
syncGlobalState();
|
|
11032
|
+
}
|
|
11033
|
+
function isTopInteractiveModal(id) {
|
|
11034
|
+
return getTopInteractiveEntry()?.id === id;
|
|
11035
|
+
}
|
|
11036
|
+
function requestCloseForModal(id) {
|
|
11037
|
+
const topEntry = getTopInteractiveEntry();
|
|
11038
|
+
if (!topEntry || topEntry.id !== id)
|
|
11039
|
+
return false;
|
|
11040
|
+
if (topEntry.persistent) {
|
|
11041
|
+
topEntry.shake();
|
|
11042
|
+
return true;
|
|
11043
|
+
}
|
|
11044
|
+
topEntry.requestClose('close');
|
|
11045
|
+
return true;
|
|
11046
|
+
}
|
|
11047
|
+
|
|
11048
|
+
const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
|
|
10482
11049
|
|
|
10483
11050
|
let modalIdCounter = 0;
|
|
10484
11051
|
const ANIMATION_DURATION = 350;
|
|
@@ -10487,31 +11054,21 @@ class SdModalContainer {
|
|
|
10487
11054
|
registerInstance(this, hostRef);
|
|
10488
11055
|
}
|
|
10489
11056
|
get el() { return getElement(this); }
|
|
10490
|
-
|
|
11057
|
+
autoRemove = false;
|
|
11058
|
+
entry;
|
|
10491
11059
|
isVisible = false;
|
|
10492
|
-
|
|
10493
|
-
|
|
10494
|
-
containerDismissTimerId;
|
|
10495
|
-
previousBodyOverflow = null;
|
|
10496
|
-
bodyScrollLocked = false;
|
|
10497
|
-
handleKeydown(e) {
|
|
10498
|
-
if (e.key === 'Escape') {
|
|
10499
|
-
const top = this.getTopEntry();
|
|
10500
|
-
if (!top)
|
|
10501
|
-
return;
|
|
10502
|
-
if (top.persistent) {
|
|
10503
|
-
this.shakeModal(top.modalEl);
|
|
10504
|
-
return;
|
|
10505
|
-
}
|
|
10506
|
-
this.dispatchClose(top.modalEl);
|
|
10507
|
-
}
|
|
10508
|
-
}
|
|
11060
|
+
backdropVisible = false;
|
|
11061
|
+
layerRef;
|
|
10509
11062
|
async open(options, modalRef) {
|
|
10510
11063
|
const id = `modal-${++modalIdCounter}`;
|
|
10511
11064
|
const modalEl = this.createConfirmModal(id, options);
|
|
10512
11065
|
this.attachModalEventListeners(id, modalEl);
|
|
10513
|
-
this.
|
|
11066
|
+
this.mountEntry({
|
|
11067
|
+
id,
|
|
11068
|
+
modalEl,
|
|
11069
|
+
modalRef,
|
|
10514
11070
|
persistent: !!options.persistent,
|
|
11071
|
+
closing: false,
|
|
10515
11072
|
});
|
|
10516
11073
|
return id;
|
|
10517
11074
|
}
|
|
@@ -10519,8 +11076,12 @@ class SdModalContainer {
|
|
|
10519
11076
|
const id = `modal-${++modalIdCounter}`;
|
|
10520
11077
|
const modalEl = this.createLoadingModal(id, options);
|
|
10521
11078
|
this.attachLoadingModalEventListeners(id, modalEl);
|
|
10522
|
-
this.
|
|
11079
|
+
this.mountEntry({
|
|
11080
|
+
id,
|
|
11081
|
+
modalEl,
|
|
11082
|
+
modalRef,
|
|
10523
11083
|
persistent: !!options.persistent,
|
|
11084
|
+
closing: false,
|
|
10524
11085
|
});
|
|
10525
11086
|
return id;
|
|
10526
11087
|
}
|
|
@@ -10529,70 +11090,118 @@ class SdModalContainer {
|
|
|
10529
11090
|
element.setAttribute('data-modal-id', id);
|
|
10530
11091
|
element.classList.add('sd-modal-container__modal');
|
|
10531
11092
|
this.attachModalEventListeners(id, element);
|
|
10532
|
-
this.
|
|
11093
|
+
this.mountEntry({
|
|
11094
|
+
id,
|
|
11095
|
+
modalEl: element,
|
|
11096
|
+
modalRef,
|
|
10533
11097
|
persistent: !!options.persistent,
|
|
11098
|
+
closing: false,
|
|
10534
11099
|
});
|
|
10535
11100
|
return id;
|
|
10536
11101
|
}
|
|
10537
|
-
|
|
10538
|
-
|
|
10539
|
-
|
|
10540
|
-
|
|
10541
|
-
|
|
10542
|
-
|
|
10543
|
-
|
|
10544
|
-
|
|
10545
|
-
|
|
10546
|
-
|
|
10547
|
-
|
|
10548
|
-
|
|
10549
|
-
|
|
10550
|
-
}
|
|
10551
|
-
registerEntry(id, modalEl, modalRef, meta) {
|
|
10552
|
-
if (this.containerDismissTimerId) {
|
|
10553
|
-
clearTimeout(this.containerDismissTimerId);
|
|
10554
|
-
this.containerDismissTimerId = undefined;
|
|
10555
|
-
}
|
|
10556
|
-
this.entries = [
|
|
10557
|
-
...(this.entries ?? []),
|
|
10558
|
-
{
|
|
10559
|
-
id,
|
|
10560
|
-
modalEl,
|
|
10561
|
-
modalRef,
|
|
10562
|
-
persistent: meta.persistent,
|
|
10563
|
-
closing: false,
|
|
10564
|
-
},
|
|
10565
|
-
];
|
|
10566
|
-
this.isVisible = true;
|
|
10567
|
-
this.setBodyScrollLock(true);
|
|
10568
|
-
requestAnimationFrame(() => {
|
|
10569
|
-
if (!this.contentRef)
|
|
10570
|
-
return;
|
|
10571
|
-
this.contentRef.appendChild(modalEl);
|
|
10572
|
-
this.waitForModalReady(modalEl).then(() => {
|
|
10573
|
-
requestAnimationFrame(() => {
|
|
10574
|
-
const currentEntry = (this.entries ?? []).find(item => item.id === id);
|
|
10575
|
-
if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
|
|
10576
|
-
return;
|
|
10577
|
-
this.isBackdropVisible = true;
|
|
10578
|
-
modalEl.classList.add('sd-modal-container__modal--visible');
|
|
10579
|
-
});
|
|
11102
|
+
componentDidRender() {
|
|
11103
|
+
if (!this.entry || this.entry.closing || !this.layerRef)
|
|
11104
|
+
return;
|
|
11105
|
+
if (this.entry.modalEl.isConnected)
|
|
11106
|
+
return;
|
|
11107
|
+
const { id, modalEl } = this.entry;
|
|
11108
|
+
this.layerRef.appendChild(modalEl);
|
|
11109
|
+
this.waitForModalReady(modalEl).then(() => {
|
|
11110
|
+
requestAnimationFrame(() => {
|
|
11111
|
+
if (!this.entry || this.entry.id !== id || this.entry.closing || !modalEl.isConnected)
|
|
11112
|
+
return;
|
|
11113
|
+
this.backdropVisible = true;
|
|
11114
|
+
modalEl.classList.add('sd-modal-container__modal--visible');
|
|
10580
11115
|
});
|
|
10581
11116
|
});
|
|
10582
11117
|
}
|
|
11118
|
+
disconnectedCallback() {
|
|
11119
|
+
if (this.entry?.dismissTimerId)
|
|
11120
|
+
clearTimeout(this.entry.dismissTimerId);
|
|
11121
|
+
if (this.entry)
|
|
11122
|
+
unregisterModal(this.entry.id);
|
|
11123
|
+
}
|
|
10583
11124
|
async dismissById(id, reason) {
|
|
10584
|
-
this.
|
|
11125
|
+
if (this.entry?.id !== id)
|
|
11126
|
+
return;
|
|
11127
|
+
this.requestDismiss(reason);
|
|
10585
11128
|
}
|
|
10586
11129
|
async update(id, props) {
|
|
10587
|
-
|
|
10588
|
-
if (!entry || entry.closing)
|
|
11130
|
+
if (!this.entry || this.entry.id !== id || this.entry.closing)
|
|
10589
11131
|
return;
|
|
10590
|
-
const tag = entry.modalEl.tagName.toLowerCase();
|
|
11132
|
+
const tag = this.entry.modalEl.tagName.toLowerCase();
|
|
10591
11133
|
if (tag === 'sd-loading-modal') {
|
|
10592
|
-
this.applyLoadingProps(entry.modalEl, props);
|
|
11134
|
+
this.applyLoadingProps(this.entry.modalEl, props);
|
|
11135
|
+
return;
|
|
10593
11136
|
}
|
|
10594
|
-
|
|
10595
|
-
|
|
11137
|
+
this.applyProps(this.entry.modalEl, props);
|
|
11138
|
+
}
|
|
11139
|
+
mountEntry(entry) {
|
|
11140
|
+
if (this.entry) {
|
|
11141
|
+
throw new Error('[sd-modal-container] This instance already manages an active modal.');
|
|
11142
|
+
}
|
|
11143
|
+
this.entry = entry;
|
|
11144
|
+
this.backdropVisible = false;
|
|
11145
|
+
this.isVisible = true;
|
|
11146
|
+
registerModal({
|
|
11147
|
+
id: entry.id,
|
|
11148
|
+
persistent: entry.persistent,
|
|
11149
|
+
requestClose: () => this.dispatchClose(),
|
|
11150
|
+
shake: () => this.shakeModal(entry.modalEl),
|
|
11151
|
+
setZIndex: zIndex => {
|
|
11152
|
+
this.el.style.setProperty('--sd-modal-container-z-index', String(zIndex));
|
|
11153
|
+
},
|
|
11154
|
+
});
|
|
11155
|
+
}
|
|
11156
|
+
attachModalEventListeners(_id, modalEl) {
|
|
11157
|
+
modalEl.addEventListener('sdOk', () => this.requestDismiss('confirm'));
|
|
11158
|
+
modalEl.addEventListener('sdCancel', () => this.requestDismiss('cancel'));
|
|
11159
|
+
modalEl.addEventListener('sdClose', () => this.requestDismiss('close'));
|
|
11160
|
+
}
|
|
11161
|
+
attachLoadingModalEventListeners(_id, modalEl) {
|
|
11162
|
+
modalEl.addEventListener('sdClick', () => {
|
|
11163
|
+
this.entry?.modalRef._triggerClick?.();
|
|
11164
|
+
});
|
|
11165
|
+
}
|
|
11166
|
+
dispatchClose() {
|
|
11167
|
+
this.entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
|
|
11168
|
+
}
|
|
11169
|
+
requestDismiss(reason) {
|
|
11170
|
+
const currentEntry = this.entry;
|
|
11171
|
+
if (!currentEntry || currentEntry.closing)
|
|
11172
|
+
return;
|
|
11173
|
+
currentEntry.modalEl.classList.remove('sd-modal-container__modal--visible');
|
|
11174
|
+
const dismissTimerId = setTimeout(() => {
|
|
11175
|
+
this.finalizeDismiss(currentEntry.id);
|
|
11176
|
+
}, ANIMATION_DURATION);
|
|
11177
|
+
setModalInteractive(currentEntry.id, false);
|
|
11178
|
+
this.entry = {
|
|
11179
|
+
...currentEntry,
|
|
11180
|
+
closing: true,
|
|
11181
|
+
dismissTimerId,
|
|
11182
|
+
};
|
|
11183
|
+
this.backdropVisible = false;
|
|
11184
|
+
if (reason === 'confirm')
|
|
11185
|
+
currentEntry.modalRef._triggerOk();
|
|
11186
|
+
else if (reason === 'cancel')
|
|
11187
|
+
currentEntry.modalRef._triggerCancel();
|
|
11188
|
+
else if (reason === 'close')
|
|
11189
|
+
currentEntry.modalRef._triggerClose();
|
|
11190
|
+
}
|
|
11191
|
+
finalizeDismiss(id) {
|
|
11192
|
+
const currentEntry = this.entry;
|
|
11193
|
+
if (!currentEntry || currentEntry.id !== id)
|
|
11194
|
+
return;
|
|
11195
|
+
if (currentEntry.dismissTimerId)
|
|
11196
|
+
clearTimeout(currentEntry.dismissTimerId);
|
|
11197
|
+
currentEntry.modalEl.remove();
|
|
11198
|
+
unregisterModal(id);
|
|
11199
|
+
currentEntry.modalRef._triggerDismissed();
|
|
11200
|
+
this.entry = undefined;
|
|
11201
|
+
this.backdropVisible = false;
|
|
11202
|
+
this.isVisible = false;
|
|
11203
|
+
if (this.autoRemove) {
|
|
11204
|
+
this.el.remove();
|
|
10596
11205
|
}
|
|
10597
11206
|
}
|
|
10598
11207
|
createConfirmModal(id, options) {
|
|
@@ -10615,12 +11224,10 @@ class SdModalContainer {
|
|
|
10615
11224
|
if (this.hasOwnProp(options, 'message'))
|
|
10616
11225
|
this.setAttr(el, 'message', options.message);
|
|
10617
11226
|
if (this.hasOwnProp(options, 'useButton')) {
|
|
10618
|
-
if (options.useButton)
|
|
11227
|
+
if (options.useButton)
|
|
10619
11228
|
el.setAttribute('use-button', '');
|
|
10620
|
-
|
|
10621
|
-
else {
|
|
11229
|
+
else
|
|
10622
11230
|
el.removeAttribute('use-button');
|
|
10623
|
-
}
|
|
10624
11231
|
}
|
|
10625
11232
|
if (this.hasOwnProp(options, 'buttonLabel')) {
|
|
10626
11233
|
this.setAttr(el, 'button-label', options.buttonLabel);
|
|
@@ -10662,14 +11269,9 @@ class SdModalContainer {
|
|
|
10662
11269
|
el.tagContents = options.tagContents;
|
|
10663
11270
|
}
|
|
10664
11271
|
handleBackdropClick = () => {
|
|
10665
|
-
|
|
10666
|
-
if (!top)
|
|
11272
|
+
if (!this.entry || !isTopInteractiveModal(this.entry.id))
|
|
10667
11273
|
return;
|
|
10668
|
-
|
|
10669
|
-
this.shakeModal(top.modalEl);
|
|
10670
|
-
return;
|
|
10671
|
-
}
|
|
10672
|
-
this.dispatchClose(top.modalEl);
|
|
11274
|
+
requestCloseForModal(this.entry.id);
|
|
10673
11275
|
};
|
|
10674
11276
|
shakeModal(modalEl) {
|
|
10675
11277
|
const cls = 'sd-modal-container__modal--shake';
|
|
@@ -10679,73 +11281,6 @@ class SdModalContainer {
|
|
|
10679
11281
|
modalEl.classList.add(cls);
|
|
10680
11282
|
});
|
|
10681
11283
|
}
|
|
10682
|
-
disconnectedCallback() {
|
|
10683
|
-
(this.entries ?? []).forEach(entry => {
|
|
10684
|
-
if (entry.dismissTimerId)
|
|
10685
|
-
clearTimeout(entry.dismissTimerId);
|
|
10686
|
-
});
|
|
10687
|
-
if (this.containerDismissTimerId)
|
|
10688
|
-
clearTimeout(this.containerDismissTimerId);
|
|
10689
|
-
this.setBodyScrollLock(false);
|
|
10690
|
-
}
|
|
10691
|
-
setBodyScrollLock(lock) {
|
|
10692
|
-
if (typeof document === 'undefined')
|
|
10693
|
-
return;
|
|
10694
|
-
if (lock === this.bodyScrollLocked)
|
|
10695
|
-
return;
|
|
10696
|
-
if (lock) {
|
|
10697
|
-
this.previousBodyOverflow = document.body.style.overflow || '';
|
|
10698
|
-
document.body.style.overflow = 'hidden';
|
|
10699
|
-
}
|
|
10700
|
-
else {
|
|
10701
|
-
document.body.style.overflow = this.previousBodyOverflow ?? '';
|
|
10702
|
-
this.previousBodyOverflow = null;
|
|
10703
|
-
}
|
|
10704
|
-
this.bodyScrollLocked = lock;
|
|
10705
|
-
}
|
|
10706
|
-
getTopEntry() {
|
|
10707
|
-
return [...(this.entries ?? [])].reverse().find(entry => !entry.closing);
|
|
10708
|
-
}
|
|
10709
|
-
requestDismiss(id, reason) {
|
|
10710
|
-
const entry = (this.entries ?? []).find(item => item.id === id);
|
|
10711
|
-
if (!entry || entry.closing)
|
|
10712
|
-
return;
|
|
10713
|
-
entry.modalEl.classList.remove('sd-modal-container__modal--visible');
|
|
10714
|
-
const remainingActive = (this.entries ?? []).filter(item => item.id !== id && !item.closing);
|
|
10715
|
-
if (remainingActive.length === 0) {
|
|
10716
|
-
this.isBackdropVisible = false;
|
|
10717
|
-
}
|
|
10718
|
-
const dismissTimerId = setTimeout(() => {
|
|
10719
|
-
this.finalizeDismiss(id);
|
|
10720
|
-
}, ANIMATION_DURATION);
|
|
10721
|
-
this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
|
|
10722
|
-
if (reason === 'confirm')
|
|
10723
|
-
entry.modalRef._triggerOk();
|
|
10724
|
-
else if (reason === 'cancel')
|
|
10725
|
-
entry.modalRef._triggerCancel();
|
|
10726
|
-
else if (reason === 'close')
|
|
10727
|
-
entry.modalRef._triggerClose();
|
|
10728
|
-
}
|
|
10729
|
-
finalizeDismiss(id) {
|
|
10730
|
-
const entry = (this.entries ?? []).find(item => item.id === id);
|
|
10731
|
-
if (!entry)
|
|
10732
|
-
return;
|
|
10733
|
-
if (entry.dismissTimerId)
|
|
10734
|
-
clearTimeout(entry.dismissTimerId);
|
|
10735
|
-
entry.modalEl.remove();
|
|
10736
|
-
const nextEntries = (this.entries ?? []).filter(item => item.id !== id);
|
|
10737
|
-
this.entries = nextEntries;
|
|
10738
|
-
if (nextEntries.length === 0) {
|
|
10739
|
-
this.setBodyScrollLock(false);
|
|
10740
|
-
this.containerDismissTimerId = setTimeout(() => {
|
|
10741
|
-
if ((this.entries ?? []).length === 0) {
|
|
10742
|
-
this.isVisible = false;
|
|
10743
|
-
}
|
|
10744
|
-
this.containerDismissTimerId = undefined;
|
|
10745
|
-
}, ANIMATION_DURATION);
|
|
10746
|
-
}
|
|
10747
|
-
entry.modalRef._triggerDismissed();
|
|
10748
|
-
}
|
|
10749
11284
|
waitForModalReady(modalEl) {
|
|
10750
11285
|
const componentOnReady = modalEl.componentOnReady;
|
|
10751
11286
|
if (typeof componentOnReady === 'function') {
|
|
@@ -10766,28 +11301,31 @@ class SdModalContainer {
|
|
|
10766
11301
|
el.setAttribute(name, value);
|
|
10767
11302
|
}
|
|
10768
11303
|
render() {
|
|
10769
|
-
if (!this.isVisible)
|
|
11304
|
+
if (!this.isVisible || !this.entry)
|
|
10770
11305
|
return null;
|
|
10771
|
-
return (hAsync("div", { class: "sd-modal-container" }, hAsync("div", { class: {
|
|
11306
|
+
return (hAsync("div", { class: "sd-modal-container" }, hAsync("div", { class: "sd-modal-container__layer", "data-modal-id": this.entry.id, ref: el => {
|
|
11307
|
+
this.layerRef = el;
|
|
11308
|
+
} }, hAsync("div", { class: {
|
|
10772
11309
|
'sd-modal-container__backdrop': true,
|
|
10773
|
-
'sd-modal-container__backdrop--visible': this.
|
|
10774
|
-
}, onClick: this.handleBackdropClick })
|
|
11310
|
+
'sd-modal-container__backdrop--visible': this.backdropVisible,
|
|
11311
|
+
}, onClick: this.handleBackdropClick }))));
|
|
10775
11312
|
}
|
|
10776
11313
|
static get style() { return sdModalContainerCss(); }
|
|
10777
11314
|
static get cmpMeta() { return {
|
|
10778
11315
|
"$flags$": 512,
|
|
10779
11316
|
"$tagName$": "sd-modal-container",
|
|
10780
11317
|
"$members$": {
|
|
10781
|
-
"
|
|
11318
|
+
"autoRemove": [4, "auto-remove"],
|
|
11319
|
+
"entry": [32],
|
|
10782
11320
|
"isVisible": [32],
|
|
10783
|
-
"
|
|
11321
|
+
"backdropVisible": [32],
|
|
10784
11322
|
"open": [64],
|
|
10785
11323
|
"openLoading": [64],
|
|
10786
11324
|
"createCustom": [64],
|
|
10787
11325
|
"dismissById": [64],
|
|
10788
11326
|
"update": [64]
|
|
10789
11327
|
},
|
|
10790
|
-
"$listeners$":
|
|
11328
|
+
"$listeners$": undefined,
|
|
10791
11329
|
"$lazyBundleId$": "-",
|
|
10792
11330
|
"$attrsToReflect$": []
|
|
10793
11331
|
}; }
|
|
@@ -11174,12 +11712,12 @@ class SdNumberInput {
|
|
|
11174
11712
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
11175
11713
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
11176
11714
|
};
|
|
11177
|
-
return (hAsync("sd-field", { key: '
|
|
11715
|
+
return (hAsync("sd-field", { key: 'edb2eaf473ba53fa340e39a350624e0a9e8b566e', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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: '408b984ca5c7f3edaf0afe4c56fab2901824b2de', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'da29f621914cbb7cac4c83f55056f52ef918f7c7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'a60c99bd949c2791608d269bc478b490dd4335e0', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
11178
11716
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11179
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '
|
|
11717
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '3eae6cb2d277f3f830f7cb122b72cdcdedf57e10', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '19e42ab159a9df7721ca6ea5505d3a0aca2517c4', 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: {
|
|
11180
11718
|
textAlign: this.useButton ? 'center' : 'right',
|
|
11181
11719
|
...this.inputStyle,
|
|
11182
|
-
} }), this.inputSuffix && (hAsync("span", { key: '
|
|
11720
|
+
} }), this.inputSuffix && (hAsync("span", { key: '5f9dc1e294a081cede120d9466d70910a9b1d6bb', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '50d96dd2556071480b17210b8db307ab4082c92b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '1821a77886ac9dc169c8e2697282e813a334df35', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
11183
11721
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11184
11722
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
11185
11723
|
}
|
|
@@ -11236,16 +11774,75 @@ class SdNumberInput {
|
|
|
11236
11774
|
}; }
|
|
11237
11775
|
}
|
|
11238
11776
|
|
|
11239
|
-
const
|
|
11777
|
+
const pagination = {
|
|
11778
|
+
height: "24",
|
|
11779
|
+
paddingX: "6",
|
|
11780
|
+
radius: "6",
|
|
11781
|
+
gap: "12",
|
|
11782
|
+
move: {
|
|
11783
|
+
gap: "4"
|
|
11784
|
+
},
|
|
11785
|
+
icon: "12",
|
|
11786
|
+
typography: {
|
|
11787
|
+
"default": {
|
|
11788
|
+
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",
|
|
11789
|
+
fontSize: "12",
|
|
11790
|
+
fontWeight: "500",
|
|
11791
|
+
lineHeight: "20"},
|
|
11792
|
+
selected: {
|
|
11793
|
+
fontWeight: "700"}
|
|
11794
|
+
},
|
|
11795
|
+
item: {
|
|
11796
|
+
bg: {
|
|
11797
|
+
hover: "#EEEEEE",
|
|
11798
|
+
selected: "#E6F1FF"
|
|
11799
|
+
},
|
|
11800
|
+
content: {
|
|
11801
|
+
"default": "#555555",
|
|
11802
|
+
hover: "#004290",
|
|
11803
|
+
selected: "#004290"
|
|
11804
|
+
}
|
|
11805
|
+
}
|
|
11806
|
+
};
|
|
11807
|
+
var paginationTokens = {
|
|
11808
|
+
pagination: pagination
|
|
11809
|
+
};
|
|
11810
|
+
|
|
11811
|
+
const PAGINATION_LAYOUT = {
|
|
11812
|
+
height: `${paginationTokens.pagination.height}px`,
|
|
11813
|
+
paddingX: `${paginationTokens.pagination.paddingX}px`,
|
|
11814
|
+
radius: `${paginationTokens.pagination.radius}px`,
|
|
11815
|
+
gap: `${paginationTokens.pagination.gap}px`,
|
|
11816
|
+
moveGap: `${paginationTokens.pagination.move.gap}px`,
|
|
11817
|
+
iconSize: Number(paginationTokens.pagination.icon),
|
|
11818
|
+
};
|
|
11819
|
+
const PAGINATION_TYPOGRAPHY = {
|
|
11820
|
+
fontFamily: paginationTokens.pagination.typography.default.fontFamily,
|
|
11821
|
+
fontSize: `${paginationTokens.pagination.typography.default.fontSize}px`,
|
|
11822
|
+
lineHeight: `${paginationTokens.pagination.typography.default.lineHeight}px`,
|
|
11823
|
+
fontWeightDefault: paginationTokens.pagination.typography.default.fontWeight,
|
|
11824
|
+
fontWeightSelected: paginationTokens.pagination.typography.selected.fontWeight,
|
|
11825
|
+
};
|
|
11826
|
+
const PAGINATION_COLORS = {
|
|
11827
|
+
contentDefault: paginationTokens.pagination.item.content.default,
|
|
11828
|
+
contentHover: paginationTokens.pagination.item.content.hover,
|
|
11829
|
+
contentSelected: paginationTokens.pagination.item.content.selected,
|
|
11830
|
+
bgHover: paginationTokens.pagination.item.bg.hover,
|
|
11831
|
+
bgSelected: paginationTokens.pagination.item.bg.selected,
|
|
11832
|
+
// TODO: 토큰 반영 후 교체 — nav 화살표 색상은 현재 토큰에 없음
|
|
11833
|
+
iconDefault: '#888888',
|
|
11834
|
+
};
|
|
11240
11835
|
|
|
11836
|
+
const sdPaginationCss = () => `sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected);cursor:default}.sd-pagination__item--selected:hover{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected)}.sd-pagination__info{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height)}.sd-pagination__current{color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}`;
|
|
11837
|
+
|
|
11838
|
+
const PER_PAGE = 10;
|
|
11241
11839
|
const BUTTON_WIDTH = {
|
|
11242
|
-
1:
|
|
11243
|
-
2:
|
|
11244
|
-
3:
|
|
11245
|
-
4:
|
|
11246
|
-
5:
|
|
11840
|
+
1: 24,
|
|
11841
|
+
2: 34,
|
|
11842
|
+
3: 40,
|
|
11843
|
+
4: 48,
|
|
11844
|
+
5: 56,
|
|
11247
11845
|
};
|
|
11248
|
-
const PER_PAGE = 10;
|
|
11249
11846
|
class SdPagination {
|
|
11250
11847
|
constructor(hostRef) {
|
|
11251
11848
|
registerInstance(this, hostRef);
|
|
@@ -11255,13 +11852,6 @@ class SdPagination {
|
|
|
11255
11852
|
lastPage = 1;
|
|
11256
11853
|
simple = false;
|
|
11257
11854
|
pageChange;
|
|
11258
|
-
get paginationClasses() {
|
|
11259
|
-
const classes = ['sd-pagination'];
|
|
11260
|
-
if (this.simple) {
|
|
11261
|
-
classes.push('sd-pagination--simple');
|
|
11262
|
-
}
|
|
11263
|
-
return classes.join(' ');
|
|
11264
|
-
}
|
|
11265
11855
|
get pageNumbers() {
|
|
11266
11856
|
const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
11267
11857
|
const end = Math.min(start + PER_PAGE - 1, this.lastPage);
|
|
@@ -11272,51 +11862,73 @@ class SdPagination {
|
|
|
11272
11862
|
const maxPageLength = lastPageNum.toString().length;
|
|
11273
11863
|
return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
|
|
11274
11864
|
}
|
|
11275
|
-
|
|
11865
|
+
get isFirstGroup() {
|
|
11866
|
+
return this.currentPage <= PER_PAGE;
|
|
11867
|
+
}
|
|
11868
|
+
get isLastGroup() {
|
|
11869
|
+
const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
11870
|
+
return startPageGroup + PER_PAGE - 1 >= this.lastPage;
|
|
11871
|
+
}
|
|
11872
|
+
handlePageChange = (page) => {
|
|
11276
11873
|
if (page < 1 || page > this.lastPage)
|
|
11277
11874
|
return;
|
|
11278
11875
|
this.currentPage = page;
|
|
11279
11876
|
this.pageChange.emit(page);
|
|
11280
|
-
}
|
|
11281
|
-
handleGroupChange(direction) {
|
|
11877
|
+
};
|
|
11878
|
+
handleGroupChange = (direction) => {
|
|
11282
11879
|
const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
|
|
11283
11880
|
const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
|
|
11284
11881
|
this.handlePageChange(newPage);
|
|
11285
|
-
}
|
|
11286
|
-
|
|
11287
|
-
return
|
|
11288
|
-
}
|
|
11289
|
-
get isLastGroup() {
|
|
11290
|
-
const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
11291
|
-
return startPageGroup + PER_PAGE - 1 >= this.lastPage;
|
|
11882
|
+
};
|
|
11883
|
+
renderNavButton(iconName, ariaLabel, onClick) {
|
|
11884
|
+
return (hAsync("button", { type: "button", class: "sd-pagination__nav", "aria-label": ariaLabel, onClick: onClick }, hAsync("sd-icon", { name: iconName, size: PAGINATION_LAYOUT.iconSize, color: PAGINATION_COLORS.iconDefault })));
|
|
11292
11885
|
}
|
|
11293
11886
|
renderPrevButtons() {
|
|
11294
11887
|
if (this.simple) {
|
|
11295
11888
|
if (this.currentPage <= 1)
|
|
11296
11889
|
return null;
|
|
11297
|
-
return (hAsync(Fragment, null,
|
|
11298
|
-
}
|
|
11299
|
-
if (!this.isFirstGroup) {
|
|
11300
|
-
return (hAsync(Fragment, null, hAsync("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, hAsync("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), hAsync("button", { "aria-label": "Go to previous page group", onClick: () => this.handleGroupChange('backward') }, hAsync("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
|
|
11890
|
+
return (hAsync(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page', () => this.handlePageChange(this.currentPage - 1))));
|
|
11301
11891
|
}
|
|
11892
|
+
if (this.isFirstGroup)
|
|
11893
|
+
return null;
|
|
11894
|
+
return (hAsync(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page group', () => this.handleGroupChange('backward'))));
|
|
11302
11895
|
}
|
|
11303
11896
|
renderNextButtons() {
|
|
11304
11897
|
if (this.simple) {
|
|
11305
11898
|
if (this.currentPage >= this.lastPage)
|
|
11306
11899
|
return null;
|
|
11307
|
-
return (hAsync(Fragment, null,
|
|
11308
|
-
}
|
|
11309
|
-
if (!this.isLastGroup) {
|
|
11310
|
-
return (hAsync(Fragment, null, hAsync("button", { "aria-label": "Go to next page group", onClick: () => this.handleGroupChange('forward') }, hAsync("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), hAsync("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, hAsync("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
|
|
11900
|
+
return (hAsync(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page', () => this.handlePageChange(this.currentPage + 1)), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
|
|
11311
11901
|
}
|
|
11902
|
+
if (this.isLastGroup)
|
|
11903
|
+
return null;
|
|
11904
|
+
return (hAsync(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page group', () => this.handleGroupChange('forward')), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
|
|
11312
11905
|
}
|
|
11313
11906
|
render() {
|
|
11314
|
-
|
|
11315
|
-
|
|
11316
|
-
|
|
11317
|
-
|
|
11318
|
-
|
|
11319
|
-
|
|
11907
|
+
const cssVars = {
|
|
11908
|
+
'--sd-pagination-height': PAGINATION_LAYOUT.height,
|
|
11909
|
+
'--sd-pagination-padding-x': PAGINATION_LAYOUT.paddingX,
|
|
11910
|
+
'--sd-pagination-radius': PAGINATION_LAYOUT.radius,
|
|
11911
|
+
'--sd-pagination-gap': PAGINATION_LAYOUT.gap,
|
|
11912
|
+
'--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
|
|
11913
|
+
'--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
|
|
11914
|
+
'--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
|
|
11915
|
+
'--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
|
|
11916
|
+
'--sd-pagination-font-weight-default': PAGINATION_TYPOGRAPHY.fontWeightDefault,
|
|
11917
|
+
'--sd-pagination-font-weight-selected': PAGINATION_TYPOGRAPHY.fontWeightSelected,
|
|
11918
|
+
'--sd-pagination-content': PAGINATION_COLORS.contentDefault,
|
|
11919
|
+
'--sd-pagination-content-hover': PAGINATION_COLORS.contentHover,
|
|
11920
|
+
'--sd-pagination-content-selected': PAGINATION_COLORS.contentSelected,
|
|
11921
|
+
'--sd-pagination-bg-hover': PAGINATION_COLORS.bgHover,
|
|
11922
|
+
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
11923
|
+
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
11924
|
+
};
|
|
11925
|
+
return (hAsync("div", { key: '1f6d3909c5c7f17701c405f058bf999020d9424e', class: {
|
|
11926
|
+
'sd-pagination': true,
|
|
11927
|
+
'sd-pagination--simple': this.simple,
|
|
11928
|
+
}, style: cssVars }, hAsync("div", { key: '9faaf4f1033e406ecaad7ed593a1610bb7002631', 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: {
|
|
11929
|
+
'sd-pagination__item': true,
|
|
11930
|
+
'sd-pagination__item--selected': this.currentPage === n,
|
|
11931
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'c8d21679938032bee223f6dfefff3a87dc5badec', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
11320
11932
|
}
|
|
11321
11933
|
static get style() { return sdPaginationCss(); }
|
|
11322
11934
|
static get cmpMeta() { return {
|
|
@@ -11388,14 +12000,14 @@ class SdPopover {
|
|
|
11388
12000
|
this.showPopover = false;
|
|
11389
12001
|
};
|
|
11390
12002
|
render() {
|
|
11391
|
-
return (hAsync(Fragment, { key: '
|
|
12003
|
+
return (hAsync(Fragment, { key: '32e3a11baabd4f4fc8c570311b99b2113e4ce3b0' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-floating-portal", { key: '8139e72f293319e4d5ed3fe67d4f47a03743b437', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, hAsync("div", { key: 'fdb76f4a9a54be08fdf0d352ff389453840c4789', class: {
|
|
11392
12004
|
'sd-floating-menu': true,
|
|
11393
12005
|
'sd-floating-menu--popover': true,
|
|
11394
12006
|
[`sd-floating-menu--${this.placement}`]: true,
|
|
11395
12007
|
[this.menuClass]: !!this.menuClass,
|
|
11396
12008
|
}, style: {
|
|
11397
12009
|
'--sd-floating-bg': popoverTokens.popover.bg,
|
|
11398
|
-
} }, hAsync("i", { key: '
|
|
12010
|
+
} }, hAsync("i", { key: '94cb19bdf7182cd311800ac4d3fdf49c61db75fb', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '67394b2b751c485fc7198a10d54df2659c6f222b' })), hAsync("div", { key: '1d6e143a931c24f28ef68afbfe7b84e73d3288db', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '33d47a87e6cab23131f360f7ea07809cec942ec0', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '28006b8958d1921eefa42c6282b8e735ae3e9367', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '574604775790aa49591848eb5f86ca0c6735558f', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("sd-ghost-button", { key: '027260d65fc575f480ce23e081b8b80ac8a1daea', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
|
|
11399
12011
|
}
|
|
11400
12012
|
static get watchers() { return {
|
|
11401
12013
|
"show": [{
|
|
@@ -11440,7 +12052,7 @@ class SdPortal {
|
|
|
11440
12052
|
parentRef = null;
|
|
11441
12053
|
offset = [0, 4];
|
|
11442
12054
|
viewportPadding = 0;
|
|
11443
|
-
zIndex =
|
|
12055
|
+
zIndex = 998;
|
|
11444
12056
|
open = false;
|
|
11445
12057
|
close;
|
|
11446
12058
|
container;
|
|
@@ -11486,7 +12098,7 @@ class SdPortal {
|
|
|
11486
12098
|
position: 'absolute',
|
|
11487
12099
|
top: '0',
|
|
11488
12100
|
left: '0',
|
|
11489
|
-
zIndex: (this.zIndex ??
|
|
12101
|
+
zIndex: (this.zIndex ?? 998).toString(),
|
|
11490
12102
|
opacity: '0',
|
|
11491
12103
|
transition: 'opacity 0.15s ease-out',
|
|
11492
12104
|
boxSizing: 'border-box',
|
|
@@ -11655,7 +12267,7 @@ class SdPortal {
|
|
|
11655
12267
|
this.close.emit();
|
|
11656
12268
|
}
|
|
11657
12269
|
render() {
|
|
11658
|
-
return hAsync("slot", { key: '
|
|
12270
|
+
return hAsync("slot", { key: '394cce939280a171c13e875eaead3fbdd0163d5b' });
|
|
11659
12271
|
}
|
|
11660
12272
|
static get watchers() { return {
|
|
11661
12273
|
"open": [{
|
|
@@ -11718,10 +12330,10 @@ class SdProgress {
|
|
|
11718
12330
|
return this.statusColor[this.progressStatus];
|
|
11719
12331
|
}
|
|
11720
12332
|
render() {
|
|
11721
|
-
return (hAsync("div", { key: '
|
|
12333
|
+
return (hAsync("div", { key: 'b1c93dc549893b5a3ccef1ab9cea54ca8c9d8d44', style: {
|
|
11722
12334
|
'--progress-color': this.progressColor,
|
|
11723
12335
|
'--progress-percentage': `${this.progressPercentage}%`,
|
|
11724
|
-
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '
|
|
12336
|
+
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '843cb8d0994831da375d26f0421d98dddb068128', class: "sd-progress__label" }, this.label)));
|
|
11725
12337
|
}
|
|
11726
12338
|
renderBarProgress() {
|
|
11727
12339
|
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, "%")));
|
|
@@ -11868,7 +12480,7 @@ class SdRadio {
|
|
|
11868
12480
|
'--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
|
|
11869
12481
|
'--sd-radio-label-color': RADIO_COLORS.label,
|
|
11870
12482
|
};
|
|
11871
|
-
return (hAsync("label", { key: '
|
|
12483
|
+
return (hAsync("label", { key: '2b7819249e5070a22b626530011db4a8e56194f1', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: '233699a7c3bc13708d43ca3719f61edf53836c83', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), hAsync("span", { key: 'eb665c5f8c6202b66b65b6b120f144970fba0a38', class: "sd-radio__circle" }), this.label && hAsync("span", { key: '3d0db13e083bacb4cb7ace9129fcfcd61f18dfc7', class: "sd-radio__label" }, this.label)));
|
|
11872
12484
|
}
|
|
11873
12485
|
static get watchers() { return {
|
|
11874
12486
|
"value": [{
|
|
@@ -12059,7 +12671,7 @@ class SdRadioButton {
|
|
|
12059
12671
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
12060
12672
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
12061
12673
|
};
|
|
12062
|
-
return (hAsync("div", { key: '
|
|
12674
|
+
return (hAsync("div", { key: 'f4ac83797b2661b0c2a612674911cbb0e41350a6', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
12063
12675
|
const isSelected = this.isOptionSelected(option);
|
|
12064
12676
|
const isDisabled = this.isOptionDisabled(option);
|
|
12065
12677
|
return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button__label" }, option.label)));
|
|
@@ -12111,7 +12723,7 @@ class SdRadioGroup {
|
|
|
12111
12723
|
return classes.join(' ');
|
|
12112
12724
|
}
|
|
12113
12725
|
render() {
|
|
12114
|
-
return (hAsync("div", { key: '
|
|
12726
|
+
return (hAsync("div", { key: '8b01aca15ce9452921f37ba648d2d47728b84f41', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
|
|
12115
12727
|
return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
|
|
12116
12728
|
})));
|
|
12117
12729
|
}
|
|
@@ -12306,7 +12918,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
12306
12918
|
}
|
|
12307
12919
|
};
|
|
12308
12920
|
render() {
|
|
12309
|
-
return (hAsync("sd-field", { key: '
|
|
12921
|
+
return (hAsync("sd-field", { key: '106b7af5473549884afba275dfa86f6b354e9983', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'a200ea9e7409ed3f63e6ffa967c3171712598521', class: {
|
|
12310
12922
|
'sd-select': true,
|
|
12311
12923
|
'sd-select--disabled': this.disabled,
|
|
12312
12924
|
'sd-select--error': !!this.error,
|
|
@@ -12525,10 +13137,10 @@ class SdSelectDropdown {
|
|
|
12525
13137
|
this.isScrolled = scrollTop > 0;
|
|
12526
13138
|
};
|
|
12527
13139
|
render() {
|
|
12528
|
-
return (hAsync("div", { key: '
|
|
13140
|
+
return (hAsync("div", { key: '4d593edbf6e4480e171963aad54ceb2f489f189b', class: {
|
|
12529
13141
|
'sd-select-dropdown': true,
|
|
12530
13142
|
'sd-select-dropdown--ready': this.isDropdownReady,
|
|
12531
|
-
}, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '
|
|
13143
|
+
}, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: 'ecea9b4ba816c6b0dcc8303f957f4b297251f65c', 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)))));
|
|
12532
13144
|
}
|
|
12533
13145
|
static get watchers() { return {
|
|
12534
13146
|
"filteredOptions": [{
|
|
@@ -12840,7 +13452,7 @@ class SdSelectGroup extends BaseDropdownEvent {
|
|
|
12840
13452
|
});
|
|
12841
13453
|
}
|
|
12842
13454
|
render() {
|
|
12843
|
-
return (hAsync("sd-field", { key: '
|
|
13455
|
+
return (hAsync("sd-field", { key: 'c3d2a4365ba2594d3e0dca138ff63a335171125c', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'b527250fecc69b8f5d4c88aa3f6090c2b291efc9', class: {
|
|
12844
13456
|
'sd-select-group': true,
|
|
12845
13457
|
'sd-select-group--open': this.isOpen,
|
|
12846
13458
|
'sd-select-group--disabled': this.disabled,
|
|
@@ -13090,7 +13702,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
|
|
|
13090
13702
|
this.handleOptionSelection(option);
|
|
13091
13703
|
};
|
|
13092
13704
|
render() {
|
|
13093
|
-
return (hAsync("sd-field", { key: '
|
|
13705
|
+
return (hAsync("sd-field", { key: '92f9f1efeb25431700b376300ba8f21120456a68', 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: '48adb7f279b77d1637e6a1790d1448d7d7306a7a', class: {
|
|
13094
13706
|
'sd-select-multiple': true,
|
|
13095
13707
|
'sd-select-multiple--open': this.isOpen,
|
|
13096
13708
|
'sd-select-multiple--disabled': this.disabled,
|
|
@@ -13555,7 +14167,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
|
|
|
13555
14167
|
});
|
|
13556
14168
|
}
|
|
13557
14169
|
render() {
|
|
13558
|
-
return (hAsync("sd-field", { key: '
|
|
14170
|
+
return (hAsync("sd-field", { key: '8e0cfc89b55809d3c5b556fc5c59077c2c952ad5', 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: '852a713b4c38c4845c407cb04801d9b0c33f0515', class: {
|
|
13559
14171
|
'sd-select-multiple-group': true,
|
|
13560
14172
|
'sd-select-multiple-group--open': this.isOpen,
|
|
13561
14173
|
'sd-select-multiple-group--disabled': this.disabled,
|
|
@@ -13689,7 +14301,7 @@ class SdSelectOption {
|
|
|
13689
14301
|
}
|
|
13690
14302
|
};
|
|
13691
14303
|
render() {
|
|
13692
|
-
return (hAsync("div", { key: '
|
|
14304
|
+
return (hAsync("div", { key: '02e314232067bfb8f9bd882c01ae1462fa492cbf', class: {
|
|
13693
14305
|
'sd-select__option': true,
|
|
13694
14306
|
'sd-select__option--selected': this.isSelected,
|
|
13695
14307
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -13775,7 +14387,7 @@ class SdSelectOptionGroup {
|
|
|
13775
14387
|
}
|
|
13776
14388
|
};
|
|
13777
14389
|
render() {
|
|
13778
|
-
return (hAsync("div", { key: '
|
|
14390
|
+
return (hAsync("div", { key: '748c32883a0262612daf9bafc0617563c77254f8', class: {
|
|
13779
14391
|
'sd-select__option-group': true,
|
|
13780
14392
|
'sd-select__option-group--selected': !!this.isSelected,
|
|
13781
14393
|
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
@@ -13784,10 +14396,10 @@ class SdSelectOptionGroup {
|
|
|
13784
14396
|
'sd-select__option-group--group': this.option.type === 'group',
|
|
13785
14397
|
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
13786
14398
|
'sd-select__option-group--item': this.option.type === 'item',
|
|
13787
|
-
}, 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: '
|
|
14399
|
+
}, 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: '5a8f15864a69887a7d2e2ec5b18b96b1f7bde809', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '202f92f4aac644802a58354d08b29451c9af863f', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
|
|
13788
14400
|
e.preventDefault();
|
|
13789
14401
|
this.handleClick(this.option, this.isSelected, e);
|
|
13790
|
-
} })), hAsync("span", { key: '
|
|
14402
|
+
} })), hAsync("span", { key: 'f9dc667e7d251a5efcf7391ec4f533a5e21276c9', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '2cd863d5bbdb1a9b5312c6eb7aa3be08a2093460', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
|
|
13791
14403
|
}
|
|
13792
14404
|
static get style() { return sdSelectOptionGroupCss(); }
|
|
13793
14405
|
static get cmpMeta() { return {
|
|
@@ -13836,17 +14448,17 @@ class SdSelectSearchInput {
|
|
|
13836
14448
|
input?.focus({ preventScroll: true });
|
|
13837
14449
|
}
|
|
13838
14450
|
render() {
|
|
13839
|
-
return (hAsync("div", { key: '
|
|
14451
|
+
return (hAsync("div", { key: '2629fd8c13f67bc89c3b66f5f8aa14f2fb2e5fcd', class: {
|
|
13840
14452
|
'sd-select-search-input': true,
|
|
13841
14453
|
'sd-select-search-input--scrolled': !!this.isScrolled,
|
|
13842
|
-
}, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '
|
|
14454
|
+
}, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: 'f49cccdb49d0b2b861b0836dd654b7ab353b48ce', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
|
|
13843
14455
|
this.searchInput.emit(String(event?.detail));
|
|
13844
14456
|
}, onSdFocus: () => {
|
|
13845
14457
|
this.searchFocus.emit();
|
|
13846
14458
|
}, onKeyDown: event => {
|
|
13847
14459
|
if (event.code === 'Enter')
|
|
13848
14460
|
event.stopPropagation();
|
|
13849
|
-
} }, hAsync("sd-icon", { key: '
|
|
14461
|
+
} }, hAsync("sd-icon", { key: '773f5638821c73c20435f747c3dea5b6684b89eb', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
|
|
13850
14462
|
}
|
|
13851
14463
|
static get style() { return sdSelectSearchInputCss(); }
|
|
13852
14464
|
static get cmpMeta() { return {
|
|
@@ -14078,13 +14690,13 @@ class SdSelectV2 {
|
|
|
14078
14690
|
this.closeDropdown();
|
|
14079
14691
|
},
|
|
14080
14692
|
};
|
|
14081
|
-
return (hAsync("sd-field", { key: '
|
|
14693
|
+
return (hAsync("sd-field", { key: 'ffca1287cefaeedf867a6b86a752942a1c8d1703', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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: () => {
|
|
14082
14694
|
this.hovered = true;
|
|
14083
14695
|
}, onMouseLeave: () => {
|
|
14084
14696
|
this.hovered = false;
|
|
14085
|
-
} }, hAsync("div", { key: '
|
|
14697
|
+
} }, hAsync("div", { key: 'f53f38543b165040eb48236e2a25e43b78444350', class: "sd-select-v2", ref: el => {
|
|
14086
14698
|
this.triggerRef = el;
|
|
14087
|
-
} }, hAsync("sd-select-v2-trigger", { key: '
|
|
14699
|
+
} }, hAsync("sd-select-v2-trigger", { key: 'afd60ef0b492d9179318a5187565b45a58ef1ed5', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'e482c1fffc24e893fe1c04f136a116bac6c1b2e9', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'c864fdef604eee7cea7c946de970e78b59e8b0da', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
14088
14700
|
}
|
|
14089
14701
|
static get watchers() { return {
|
|
14090
14702
|
"isOpen": [{
|
|
@@ -14192,9 +14804,7 @@ var listItemTokens = {
|
|
|
14192
14804
|
};
|
|
14193
14805
|
|
|
14194
14806
|
const listBox = {
|
|
14195
|
-
radius: "4"
|
|
14196
|
-
paddingBottom: "4"
|
|
14197
|
-
};
|
|
14807
|
+
radius: "4"};
|
|
14198
14808
|
var listBoxTokens = {
|
|
14199
14809
|
listBox: listBox
|
|
14200
14810
|
};
|
|
@@ -14257,7 +14867,6 @@ const LIST_ITEM_COLORS = {
|
|
|
14257
14867
|
// ── ListBox Tokens ──
|
|
14258
14868
|
const LIST_BOX_LAYOUT = {
|
|
14259
14869
|
radius: listBoxTokens.listBox.radius,
|
|
14260
|
-
paddingBottom: listBoxTokens.listBox.paddingBottom,
|
|
14261
14870
|
};
|
|
14262
14871
|
// ── Constants ──
|
|
14263
14872
|
const SEARCH_THRESHOLD = 11;
|
|
@@ -14369,7 +14978,7 @@ class SdSelectV2ListItem {
|
|
|
14369
14978
|
if (isDepth1Group) {
|
|
14370
14979
|
cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
|
|
14371
14980
|
}
|
|
14372
|
-
return (hAsync("div", { key: '
|
|
14981
|
+
return (hAsync("div", { key: 'ad8ea94f02d9e114915e4115237aed32d89e93d9', class: {
|
|
14373
14982
|
'sd-select-v2-list-item': true,
|
|
14374
14983
|
'sd-select-v2-list-item--group': isGroup,
|
|
14375
14984
|
'sd-select-v2-list-item--depth1-group': isDepth1Group,
|
|
@@ -14379,7 +14988,7 @@ class SdSelectV2ListItem {
|
|
|
14379
14988
|
'sd-select-v2-list-item--focused': this.isFocused,
|
|
14380
14989
|
'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
14381
14990
|
'sd-select-v2-list-item--disabled': !!this.option.disabled,
|
|
14382
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
14991
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'c3c5be89457efbd465ebcb89e304aaefaa85e245', 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: 'ce5b528ec88cd6c862fe0df36cf1b46f054bcc0e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: 'e0120384115bb93819675335a574aeb072d0232c', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
14383
14992
|
}
|
|
14384
14993
|
static get style() { return sdSelectV2ListItemCss(); }
|
|
14385
14994
|
static get cmpMeta() { return {
|
|
@@ -14447,15 +15056,15 @@ class SdSelectV2ListItemSearch {
|
|
|
14447
15056
|
clearTimeout(this.debounceTimer);
|
|
14448
15057
|
}
|
|
14449
15058
|
render() {
|
|
14450
|
-
return (hAsync("div", { key: '
|
|
15059
|
+
return (hAsync("div", { key: '77b7f0742212b03108d5da3a1384766bc58da3ce', class: {
|
|
14451
15060
|
'sd-select-v2-list-item-search': true,
|
|
14452
15061
|
'sd-select-v2-list-item-search--scrolled': this.isScrolled,
|
|
14453
|
-
} }, hAsync("div", { key: '
|
|
15062
|
+
} }, hAsync("div", { key: 'bf2086a00ca7924c3b13b28b056a1ee2351cce3d', class: "sd-select-v2-list-item-search__inner" }, hAsync("sd-icon", { key: '471c08d7b293003958e1e0be9c4521b8663c860b', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), hAsync("input", { key: 'b17d8610b73c3701711b5def9b34320156c5f554', ref: el => {
|
|
14454
15063
|
this.inputEl = el;
|
|
14455
|
-
}, 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: '
|
|
15064
|
+
}, 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: '5b8c48df700862476b37b7c24741ee0f9b284c02', type: "button", class: {
|
|
14456
15065
|
'sd-select-v2-list-item-search__clear': true,
|
|
14457
15066
|
'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
|
|
14458
|
-
}, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: '
|
|
15067
|
+
}, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: 'cbcec76b7eb4e400e7154cc652512a36c0660d45', name: "close", size: 12, color: "#888888" })))));
|
|
14459
15068
|
}
|
|
14460
15069
|
static get style() { return sdSelectV2ListItemSearchCss(); }
|
|
14461
15070
|
static get cmpMeta() { return {
|
|
@@ -14472,7 +15081,7 @@ class SdSelectV2ListItemSearch {
|
|
|
14472
15081
|
}; }
|
|
14473
15082
|
}
|
|
14474
15083
|
|
|
14475
|
-
const sdSelectV2ListboxCss = () =>
|
|
15084
|
+
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}`;
|
|
14476
15085
|
|
|
14477
15086
|
class SdSelectV2Listbox {
|
|
14478
15087
|
constructor(hostRef) {
|
|
@@ -14759,9 +15368,8 @@ class SdSelectV2Listbox {
|
|
|
14759
15368
|
'--listbox-max-width': this.maxWidth,
|
|
14760
15369
|
'--listbox-max-height': this.maxHeight,
|
|
14761
15370
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
14762
|
-
'--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
|
|
14763
15371
|
};
|
|
14764
|
-
return (hAsync("div", { key: '
|
|
15372
|
+
return (hAsync("div", { key: 'ca3d529a4a20f394de1358cc0627c730843a8cf9', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: 'e7c421d676c6a94cc31b0df69a489818b26563e3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'f3f44e6df1fc8faf71c607cc0efb0d891dcbfb3d', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
14765
15373
|
this.listEl = el;
|
|
14766
15374
|
} }, 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) })))))));
|
|
14767
15375
|
}
|
|
@@ -14772,7 +15380,7 @@ class SdSelectV2Listbox {
|
|
|
14772
15380
|
}; }
|
|
14773
15381
|
static get style() { return sdSelectV2ListboxCss(); }
|
|
14774
15382
|
static get cmpMeta() { return {
|
|
14775
|
-
"$flags$":
|
|
15383
|
+
"$flags$": 521,
|
|
14776
15384
|
"$tagName$": "sd-select-v2-listbox",
|
|
14777
15385
|
"$members$": {
|
|
14778
15386
|
"name": [1],
|
|
@@ -14826,11 +15434,11 @@ class SdSelectV2Trigger {
|
|
|
14826
15434
|
? SELECT_COLORS.icon.disabled
|
|
14827
15435
|
: SELECT_COLORS.icon.default,
|
|
14828
15436
|
};
|
|
14829
|
-
return (hAsync("div", { key: '
|
|
15437
|
+
return (hAsync("div", { key: '4b3f60a4bd00423337ebd472a628bc67f0a5d55c', class: {
|
|
14830
15438
|
'sd-select-v2-trigger': true,
|
|
14831
15439
|
'sd-select-v2-trigger--open': this.isOpen,
|
|
14832
15440
|
'sd-select-v2-trigger--disabled': this.disabled,
|
|
14833
|
-
}, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: '
|
|
15441
|
+
}, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: '8a6f9aa132aa6db4ba9035b3b97f91b4f29fa475', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: '3fb8fa054682eefc604623da9ecb906581cf1661', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: 'c6ae918c442452018513a144a6f14613a49dedd4', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
14834
15442
|
'sd-select-v2-trigger__icon': true,
|
|
14835
15443
|
'sd-select-v2-trigger__icon--open': this.isOpen,
|
|
14836
15444
|
} }))));
|
|
@@ -14951,7 +15559,7 @@ class SdSwitch {
|
|
|
14951
15559
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
14952
15560
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
14953
15561
|
};
|
|
14954
|
-
return (hAsync("label", { key: '
|
|
15562
|
+
return (hAsync("label", { key: '730eacd9dbc035c76ff99396caf13b37ecc19c86', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '2cb2e4ba617d6f9f2d86a56ac6cc134a43cd1594', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: 'b67a6243d2af4b89e433e44047da3336e87da9f9', class: "sd-switch__track" }, hAsync("div", { key: 'a99cf1e298cd3ed474cb7f94a48332475fe68641', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '084960a8dce47c47b17f807aa46acea3a08aa53b', class: "sd-switch__label" }, this.label)));
|
|
14955
15563
|
}
|
|
14956
15564
|
static get style() { return sdSwitchCss(); }
|
|
14957
15565
|
static get cmpMeta() { return {
|
|
@@ -15499,24 +16107,24 @@ class SdTable {
|
|
|
15499
16107
|
}
|
|
15500
16108
|
render() {
|
|
15501
16109
|
const resolvedTableId = this.getResolvedTableId();
|
|
15502
|
-
return (hAsync(Host, { key: '
|
|
16110
|
+
return (hAsync(Host, { key: 'd2a43d075579bf4ffc53949fb074afaf9987113d' }, hAsync("div", { key: '3e6b69b3ab38281c1763ab779d66b0916b2cb295', class: "sd-table__container", style: {
|
|
15503
16111
|
'--table-width': this.width,
|
|
15504
16112
|
'--table-height': this.height,
|
|
15505
16113
|
'--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
|
|
15506
|
-
} }, hAsync("div", { key: '
|
|
16114
|
+
} }, hAsync("div", { key: '60ac7f5d53cdfbb0225dd3ed57be4788e6b7ff2b', class: {
|
|
15507
16115
|
'sd-table__clip': true,
|
|
15508
16116
|
'sd-table__clip--has-pagination': !!(this.pagination &&
|
|
15509
16117
|
this.pagination.rowsPerPage > 0 &&
|
|
15510
16118
|
this.rowCount > 0 &&
|
|
15511
16119
|
!this.useVirtualScroll),
|
|
15512
|
-
} }, hAsync("div", { key: '
|
|
16120
|
+
} }, hAsync("div", { key: 'ea4144995650e283bf62de067fe792e1b7d90eb1', class: {
|
|
15513
16121
|
'sd-table__wrapper': true,
|
|
15514
16122
|
'sd-table__wrapper--loading': this.isLoading,
|
|
15515
16123
|
'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
|
|
15516
|
-
} }, this.isLoading && (hAsync("div", { key: '
|
|
16124
|
+
} }, this.isLoading && (hAsync("div", { key: '36fd919bbf313d4d5a62d657223ce7e68bd7678d', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '5854fbf9090072e1caf5d4a497fe35403c4c8c21', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '210bc0045bacd05d4134f96716f74c5893c494dd', class: "sd-table__no-data" }, hAsync("slot", { key: 'a2aabac27057d00a6352230d23a9c776a99818b5', name: "no-data" }, hAsync("span", { key: 'd030f9abc7bc3afd8cb70433513a8875ae3eecb2' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '731208435f8e018b74f2a0670e4c4f68f4c7fd58', class: this.tableClasses }, hAsync("slot", { key: 'd12bbe4ed17e9c0d781c50c6b4161c7bddec3480', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), hAsync("slot", { key: '555d63d8f0ad56d49bcc09451b893e05cc7110cd', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
|
|
15517
16125
|
this.pagination.rowsPerPage > 0 &&
|
|
15518
16126
|
this.rowCount > 0 &&
|
|
15519
|
-
!this.useVirtualScroll && (hAsync("div", { key: '
|
|
16127
|
+
!this.useVirtualScroll && (hAsync("div", { key: '83b1c554f574013c8a93707f99d4224c581d485c', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '425c036f79001e4d7f012dc528d2c2ecec25ed9b', 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: '1c7c6ddacdd24cfa0cef627cd8ba06fe2466d415', value: this.useInternalPagination
|
|
15520
16128
|
? this.innerRowsPerPage
|
|
15521
16129
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
15522
16130
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -15657,7 +16265,7 @@ class SdTabs {
|
|
|
15657
16265
|
return `square_xs_${color}`;
|
|
15658
16266
|
}
|
|
15659
16267
|
render() {
|
|
15660
|
-
return (hAsync("div", { key: '
|
|
16268
|
+
return (hAsync("div", { key: '62ace36515932f8889fc35121b6a8cf98fd9a314', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
|
|
15661
16269
|
const badgeName = this.getBadgeName(tab);
|
|
15662
16270
|
return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && hAsync("sd-tag", { name: badgeName, label: tab.badge.toString() })));
|
|
15663
16271
|
})));
|
|
@@ -15853,7 +16461,7 @@ class SdTag {
|
|
|
15853
16461
|
render() {
|
|
15854
16462
|
const config = this.resolvedConfig;
|
|
15855
16463
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
15856
|
-
return (hAsync("span", { key: '
|
|
16464
|
+
return (hAsync("span", { key: '3e3bf735f8d832e75f1061eac69ccd8972b9f40f', class: "sd-tag", style: {
|
|
15857
16465
|
'--sd-tag-background': config.background,
|
|
15858
16466
|
'--sd-tag-content': config.content,
|
|
15859
16467
|
'--sd-tag-height': config.height,
|
|
@@ -15863,7 +16471,7 @@ class SdTag {
|
|
|
15863
16471
|
'--sd-tag-font-weight': config.fontWeight,
|
|
15864
16472
|
'--sd-tag-line-height': config.lineHeight,
|
|
15865
16473
|
'--sd-tag-radius': config.radius,
|
|
15866
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
16474
|
+
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: 'a06237d1d29bb64b4b830294f5385a9b9b909624', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
|
|
15867
16475
|
}
|
|
15868
16476
|
static get style() { return sdTagCss(); }
|
|
15869
16477
|
static get cmpMeta() { return {
|
|
@@ -15927,7 +16535,7 @@ class SdTbody {
|
|
|
15927
16535
|
}
|
|
15928
16536
|
render() {
|
|
15929
16537
|
const hasRows = this.rows.length > 0;
|
|
15930
|
-
return (hAsync(Host, { key: '
|
|
16538
|
+
return (hAsync(Host, { key: '82a437ddf0cb3c34877b9dbcb47b5406c20a0c0e', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '0f0257720491c781eda0479fb0c08d7dffc4f734', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
|
|
15931
16539
|
this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
15932
16540
|
hAsync("slot", null),
|
|
15933
16541
|
this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
@@ -15991,7 +16599,7 @@ class SdTd {
|
|
|
15991
16599
|
}
|
|
15992
16600
|
}
|
|
15993
16601
|
render() {
|
|
15994
|
-
return (hAsync(Host, { key: '
|
|
16602
|
+
return (hAsync(Host, { key: 'c6ddb546268b573694b827509ebdfe74fff8a15a', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '0b59fb8a0cfa1ef628f50496af96aa2f39fdc89a' })));
|
|
15995
16603
|
}
|
|
15996
16604
|
static get watchers() { return {
|
|
15997
16605
|
"field": [{
|
|
@@ -16087,16 +16695,16 @@ class SdTextLink {
|
|
|
16087
16695
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
16088
16696
|
...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
|
|
16089
16697
|
};
|
|
16090
|
-
return (hAsync("span", { key: '
|
|
16698
|
+
return (hAsync("span", { key: 'c485091d0a9d7f8aa946ac54d96baab50bcaa3c7', class: {
|
|
16091
16699
|
'sd-text-link': true,
|
|
16092
16700
|
'sd-text-link--disabled': this.disabled,
|
|
16093
|
-
}, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '
|
|
16701
|
+
}, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '98a2df9a2ba9b5d77eb73c0989cdf38383cfcd15', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '3c6867611e0d970855897b06f7e9368a8588ff76', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: '460bebf92782560d64e41b47ea9ef42b66cc08c0', class: "sd-text-link__arrow", style: {
|
|
16094
16702
|
width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
|
|
16095
16703
|
height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
|
|
16096
16704
|
display: 'inline-flex',
|
|
16097
16705
|
alignItems: 'center',
|
|
16098
16706
|
justifyContent: 'center',
|
|
16099
|
-
} }, hAsync("sd-icon", { key: '
|
|
16707
|
+
} }, hAsync("sd-icon", { key: 'fee7c74359e683829ad3fa802191b651aa9e94da', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
|
|
16100
16708
|
}
|
|
16101
16709
|
static get style() { return sdTextLinkCss(); }
|
|
16102
16710
|
static get cmpMeta() { return {
|
|
@@ -16242,7 +16850,7 @@ class SdTextarea {
|
|
|
16242
16850
|
'--sd-system-size-field-sm-height': 'auto',
|
|
16243
16851
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
16244
16852
|
};
|
|
16245
|
-
return (hAsync("sd-field", { key: '
|
|
16853
|
+
return (hAsync("sd-field", { key: '4c93d887429d6790d2d49c951be64e4be1496fd4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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: 'b64aa1b2f02c1f68db57e5e36e0a7146257629e1', class: "sd-textarea__content" }, hAsync("textarea", { key: 'b2baff1d99b9c2347f0b0bb751fc51268d2c48c7', 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 }))));
|
|
16246
16854
|
}
|
|
16247
16855
|
static get watchers() { return {
|
|
16248
16856
|
"value": [{
|
|
@@ -16427,16 +17035,16 @@ class SdThead {
|
|
|
16427
17035
|
const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
|
|
16428
17036
|
const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
16429
17037
|
const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
|
|
16430
|
-
return (hAsync(Host, { key: '
|
|
17038
|
+
return (hAsync(Host, { key: '97badde9634e2e7363eace5a402fc49a587459c3', slot: `${this.tableId}-head` }, hAsync("thead", { key: 'd1ce731f6082679d8d61f4b74ac122f28f344909', class: {
|
|
16431
17039
|
'thead': true,
|
|
16432
17040
|
'thead--sticky': this._stickyHeader,
|
|
16433
|
-
} }, hAsync("tr", { key: '
|
|
17041
|
+
} }, hAsync("tr", { key: 'd0f8b1e8b8a7174cc9b39fabf782eddf2e2accaa', class: "tr" }, this._selectable && (hAsync("th", { key: 'c422f5bd9f9a045785d2d91dd9e2dee6e8f91185', class: {
|
|
16434
17042
|
'th': true,
|
|
16435
17043
|
'th--selected': true,
|
|
16436
17044
|
'sticky-left': true,
|
|
16437
17045
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
16438
17046
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
16439
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
17047
|
+
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '32cea740457b21d4d6fd53a8f1c10b505a24a481', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
|
|
16440
17048
|
'th': true,
|
|
16441
17049
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
16442
17050
|
'sticky-left': true,
|
|
@@ -16551,10 +17159,10 @@ class SdToast {
|
|
|
16551
17159
|
render() {
|
|
16552
17160
|
const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
|
|
16553
17161
|
const iconSize = Number(TOAST_LAYOUT.iconSize);
|
|
16554
|
-
return (hAsync("div", { key: '
|
|
17162
|
+
return (hAsync("div", { key: 'a041d5561d09ef56f4afd722e141b0a2e3a9453f', style: {
|
|
16555
17163
|
'--sd-toast-bg': typeConfig.bg,
|
|
16556
17164
|
'--sd-toast-text': typeConfig.content,
|
|
16557
|
-
} }, hAsync("div", { key: '
|
|
17165
|
+
} }, hAsync("div", { key: 'bf2a397484ec5938c0442ee0ee98f0ce00ad1ec0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '4ea8468b31909e3aea1a293c393621e1815dea5c', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '407a0be71e36a6dca30f5cfb300f2c9ebf6b32c2', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '756ca54899ec4d6c3543f8fb1f681d09181674c9', class: "sd-toast__content" }, hAsync("span", { key: 'f0e66dbd5e99bc3921a354ac51294a3c29fe9ea0', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '9f4a1a938b7559b03d7dd824c7f2fdbcb093e6fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: '03d64765901bc8a93f09642b09ae733fa9da0db4', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
|
|
16558
17166
|
}
|
|
16559
17167
|
static get style() { return sdToastCss(); }
|
|
16560
17168
|
static get cmpMeta() { return {
|
|
@@ -16577,7 +17185,7 @@ class SdToast {
|
|
|
16577
17185
|
const DEFAULT_DURATION = 4000;
|
|
16578
17186
|
const DEFAULT_MAX_VISIBLE = 3;
|
|
16579
17187
|
const DEFAULT_GAP = 8;
|
|
16580
|
-
const DEFAULT_Z_INDEX =
|
|
17188
|
+
const DEFAULT_Z_INDEX = 999;
|
|
16581
17189
|
const TRANSITION_DURATION = 400;
|
|
16582
17190
|
const TRANSITION_FALLBACK_BUFFER = 100;
|
|
16583
17191
|
const COLLAPSED_SCALE_STEP = 0.05;
|
|
@@ -16806,7 +17414,7 @@ class SdToastContainer {
|
|
|
16806
17414
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
16807
17415
|
const indexMap = new Map();
|
|
16808
17416
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
16809
|
-
return (hAsync("div", { key: '
|
|
17417
|
+
return (hAsync("div", { key: '4660dd2f2626d391bbcca7da59e16e6c4204d80d', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
16810
17418
|
this.expanded = true;
|
|
16811
17419
|
this.pauseTimers();
|
|
16812
17420
|
}, onMouseLeave: () => {
|
|
@@ -16964,7 +17572,7 @@ class SdToggle {
|
|
|
16964
17572
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
16965
17573
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
16966
17574
|
};
|
|
16967
|
-
return (hAsync("label", { key: '
|
|
17575
|
+
return (hAsync("label", { key: '1e0864450b0447ec08643290d1050e4d0ee0c4a4', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '7e44e8569de24839c41e8c28f579923e3a837366', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
16968
17576
|
}
|
|
16969
17577
|
static get style() { return sdToggleCss(); }
|
|
16970
17578
|
static get cmpMeta() { return {
|
|
@@ -17091,14 +17699,14 @@ class SdTooltip {
|
|
|
17091
17699
|
const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
|
|
17092
17700
|
const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
|
|
17093
17701
|
const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
|
|
17094
|
-
return (hAsync(Fragment, { key: '
|
|
17702
|
+
return (hAsync(Fragment, { key: 'aade7a4be8e9955ca4dc437845ee8de9d212fd61' }, hAsync("div", { key: '332c4872541bea334c1f0b6f06de8a1789dc10b8', 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: '96f19d91f765020ae5663f216011e2000617c9d1', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '12c2f1fbf59dc1a790016da071805164b0426419', ref: el => (this.menuEl = el), class: {
|
|
17095
17703
|
'sd-floating-menu': true,
|
|
17096
17704
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
17097
17705
|
[`sd-floating-menu--${placement}`]: true,
|
|
17098
17706
|
}, style: {
|
|
17099
17707
|
'--sd-floating-bg': typeConfig.bg,
|
|
17100
17708
|
'--sd-floating-content': typeConfig.content,
|
|
17101
|
-
}, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '
|
|
17709
|
+
}, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'f69c0cb66d5be975f60bfa7cdbd46e0283d4af2b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '3fbc2c3baa903e80d525225ab1f1aa4b3ec6ad4b' })), hAsync("div", { key: 'a2286ef4e9f5d6c1b1a26ea044ddf1051900c5a2', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
|
|
17102
17710
|
}
|
|
17103
17711
|
static get style() { return sdTooltipCss(); }
|
|
17104
17712
|
static get cmpMeta() { return {
|
|
@@ -17253,13 +17861,13 @@ class SdTr {
|
|
|
17253
17861
|
const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
|
|
17254
17862
|
const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
17255
17863
|
const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
|
|
17256
|
-
return (hAsync(Host, { key: '
|
|
17864
|
+
return (hAsync(Host, { key: '3bc910f3afa801d7824eee2e73456ef152c7dc93', style: { display: this.isVisible ? '' : 'none' } }, hAsync("tr", { key: '93b1f4113ae63aa1c0cf79addaa9e8d15c9e8287', class: "tr" }, this._selectable && (hAsync("td", { key: '0caba47c216126f4b7407dfe26afb9f0c75f6450', class: {
|
|
17257
17865
|
'td': true,
|
|
17258
17866
|
'td--selected': true,
|
|
17259
17867
|
'sticky-left': true,
|
|
17260
17868
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
17261
17869
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
17262
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
17870
|
+
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '2e41b3902f489877b624266e588221698aaa8f12', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (hAsync("td", { key: col.name, class: {
|
|
17263
17871
|
'td': true,
|
|
17264
17872
|
[`td--${col.align || 'left'}`]: true,
|
|
17265
17873
|
'sticky-left': true,
|
|
@@ -17326,6 +17934,7 @@ registerComponents([
|
|
|
17326
17934
|
SdCalendar,
|
|
17327
17935
|
SdCard,
|
|
17328
17936
|
SdCheckbox,
|
|
17937
|
+
SdChip,
|
|
17329
17938
|
SdCircleProgress,
|
|
17330
17939
|
SdConfirmModal,
|
|
17331
17940
|
SdDateBox,
|