@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.mjs
CHANGED
|
@@ -134,7 +134,7 @@ var node_crypto = require('node:crypto');
|
|
|
134
134
|
const NAMESPACE = 'design-system';
|
|
135
135
|
const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
136
136
|
|
|
137
|
-
const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, 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}";
|
|
137
|
+
const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-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}";
|
|
138
138
|
|
|
139
139
|
/*
|
|
140
140
|
Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -5285,7 +5285,7 @@ class DataTable {
|
|
|
5285
5285
|
return el.innerHTML;
|
|
5286
5286
|
}
|
|
5287
5287
|
render() {
|
|
5288
|
-
return (hAsync("div", { key: '
|
|
5288
|
+
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' }))));
|
|
5289
5289
|
}
|
|
5290
5290
|
static get watchers() { return {
|
|
5291
5291
|
"columns": [{
|
|
@@ -5446,7 +5446,7 @@ class SdActionModal {
|
|
|
5446
5446
|
if (this.height != null && this.height !== '') {
|
|
5447
5447
|
sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
|
5448
5448
|
}
|
|
5449
|
-
return (hAsync("div", { key: '
|
|
5449
|
+
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() })))));
|
|
5450
5450
|
}
|
|
5451
5451
|
static get style() { return sdActionModalCss(); }
|
|
5452
5452
|
static get cmpMeta() { return {
|
|
@@ -5499,7 +5499,7 @@ class SdBadge {
|
|
|
5499
5499
|
label = '';
|
|
5500
5500
|
render() {
|
|
5501
5501
|
const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
|
|
5502
|
-
return (hAsync("div", { key: '
|
|
5502
|
+
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)));
|
|
5503
5503
|
}
|
|
5504
5504
|
static get style() { return sdBadgeCss(); }
|
|
5505
5505
|
static get cmpMeta() { return {
|
|
@@ -5546,8 +5546,9 @@ const textinput = {
|
|
|
5546
5546
|
radius: "6",
|
|
5547
5547
|
typography: {
|
|
5548
5548
|
fontWeight: "400",
|
|
5549
|
-
fontSize: "
|
|
5550
|
-
lineHeight: "
|
|
5549
|
+
fontSize: "14",
|
|
5550
|
+
lineHeight: "24"
|
|
5551
|
+
}
|
|
5551
5552
|
},
|
|
5552
5553
|
border: {
|
|
5553
5554
|
"default": "#AAAAAA"},
|
|
@@ -5707,7 +5708,7 @@ class SdBarcodeInput {
|
|
|
5707
5708
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
5708
5709
|
'--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
|
|
5709
5710
|
};
|
|
5710
|
-
return (hAsync("sd-field", { key: '
|
|
5711
|
+
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 () => {
|
|
5711
5712
|
if (this.disabled)
|
|
5712
5713
|
return;
|
|
5713
5714
|
this.internalValue = '';
|
|
@@ -5763,7 +5764,7 @@ class SdBarcodeInput {
|
|
|
5763
5764
|
}; }
|
|
5764
5765
|
}
|
|
5765
5766
|
|
|
5766
|
-
const button = {
|
|
5767
|
+
const button$1 = {
|
|
5767
5768
|
xs: {
|
|
5768
5769
|
icon: "12"
|
|
5769
5770
|
},
|
|
@@ -5847,7 +5848,7 @@ const button = {
|
|
|
5847
5848
|
}
|
|
5848
5849
|
};
|
|
5849
5850
|
var buttonTokens = {
|
|
5850
|
-
button: button
|
|
5851
|
+
button: button$1
|
|
5851
5852
|
};
|
|
5852
5853
|
|
|
5853
5854
|
const primary = "#051D36";
|
|
@@ -6432,13 +6433,13 @@ class SdButtonV2 {
|
|
|
6432
6433
|
const hasLabel = Boolean(this.label);
|
|
6433
6434
|
const iconOnly = !this.label && (Boolean(this.icon) !== Boolean(this.rightIcon));
|
|
6434
6435
|
const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
|
|
6435
|
-
return (hAsync("button", { key: '
|
|
6436
|
+
return (hAsync("button", { key: '61dde2ec51ac5099909d38a7420568bfd4fcde0b', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
6436
6437
|
'--sd-button-v2-bg': config.color,
|
|
6437
6438
|
'--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
|
|
6438
6439
|
'--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
|
|
6439
6440
|
'--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
|
|
6440
6441
|
'--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
|
|
6441
|
-
}, onClick: this.handleClick }, hAsync("span", { key: '
|
|
6442
|
+
}, 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)" })))));
|
|
6442
6443
|
}
|
|
6443
6444
|
static get style() { return sdButtonV2Css(); }
|
|
6444
6445
|
static get cmpMeta() { return {
|
|
@@ -6676,7 +6677,7 @@ class SdCard {
|
|
|
6676
6677
|
bordered = false;
|
|
6677
6678
|
sdClass = '';
|
|
6678
6679
|
render() {
|
|
6679
|
-
return (hAsync(Fragment, { key: '
|
|
6680
|
+
return (hAsync(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, hAsync("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
|
|
6680
6681
|
}
|
|
6681
6682
|
static get style() { return sdCardCss(); }
|
|
6682
6683
|
static get cmpMeta() { return {
|
|
@@ -6908,6 +6909,336 @@ class SdCheckbox {
|
|
|
6908
6909
|
}; }
|
|
6909
6910
|
}
|
|
6910
6911
|
|
|
6912
|
+
const chip = {
|
|
6913
|
+
height: "24",
|
|
6914
|
+
paddingX: "8",
|
|
6915
|
+
gap: "4",
|
|
6916
|
+
radius: "9999",
|
|
6917
|
+
typography: {
|
|
6918
|
+
"default": {
|
|
6919
|
+
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",
|
|
6920
|
+
fontSize: "12",
|
|
6921
|
+
fontWeight: "500",
|
|
6922
|
+
lineHeight: "20"
|
|
6923
|
+
},
|
|
6924
|
+
focus: {
|
|
6925
|
+
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",
|
|
6926
|
+
fontSize: "12",
|
|
6927
|
+
fontWeight: "400",
|
|
6928
|
+
lineHeight: "20"
|
|
6929
|
+
}
|
|
6930
|
+
},
|
|
6931
|
+
bg: {
|
|
6932
|
+
"default": "#F6F6F6",
|
|
6933
|
+
error: "#FCEFEF",
|
|
6934
|
+
focus: "#FFFFFF"
|
|
6935
|
+
},
|
|
6936
|
+
content: {
|
|
6937
|
+
"default": "#888888",
|
|
6938
|
+
error: "#E30000",
|
|
6939
|
+
focus: "#555555"
|
|
6940
|
+
},
|
|
6941
|
+
border: {
|
|
6942
|
+
focus: "#E1E1E1",
|
|
6943
|
+
width: "1"
|
|
6944
|
+
}
|
|
6945
|
+
};
|
|
6946
|
+
var chipTokens = {
|
|
6947
|
+
chip: chip
|
|
6948
|
+
};
|
|
6949
|
+
|
|
6950
|
+
const CHIP_LAYOUT = {
|
|
6951
|
+
height: `${chipTokens.chip.height}px`,
|
|
6952
|
+
paddingX: `${chipTokens.chip.paddingX}px`,
|
|
6953
|
+
gap: `${chipTokens.chip.gap}px`,
|
|
6954
|
+
radius: `${chipTokens.chip.radius}px`,
|
|
6955
|
+
borderWidth: `${chipTokens.chip.border.width}px`,
|
|
6956
|
+
};
|
|
6957
|
+
const CHIP_COLORS = {
|
|
6958
|
+
bg: {
|
|
6959
|
+
default: chipTokens.chip.bg.default,
|
|
6960
|
+
error: chipTokens.chip.bg.error,
|
|
6961
|
+
focus: chipTokens.chip.bg.focus,
|
|
6962
|
+
},
|
|
6963
|
+
content: {
|
|
6964
|
+
default: chipTokens.chip.content.default,
|
|
6965
|
+
error: chipTokens.chip.content.error,
|
|
6966
|
+
focus: chipTokens.chip.content.focus,
|
|
6967
|
+
},
|
|
6968
|
+
border: {
|
|
6969
|
+
focus: chipTokens.chip.border.focus,
|
|
6970
|
+
},
|
|
6971
|
+
};
|
|
6972
|
+
const CHIP_TYPOGRAPHY = {
|
|
6973
|
+
default: {
|
|
6974
|
+
fontFamily: chipTokens.chip.typography.default.fontFamily,
|
|
6975
|
+
fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
|
|
6976
|
+
fontWeight: chipTokens.chip.typography.default.fontWeight,
|
|
6977
|
+
lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
|
|
6978
|
+
},
|
|
6979
|
+
focus: {
|
|
6980
|
+
fontFamily: chipTokens.chip.typography.focus.fontFamily,
|
|
6981
|
+
fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
|
|
6982
|
+
fontWeight: chipTokens.chip.typography.focus.fontWeight,
|
|
6983
|
+
lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
|
|
6984
|
+
},
|
|
6985
|
+
};
|
|
6986
|
+
|
|
6987
|
+
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}`;
|
|
6988
|
+
|
|
6989
|
+
class SdChip {
|
|
6990
|
+
constructor(hostRef) {
|
|
6991
|
+
registerInstance(this, hostRef);
|
|
6992
|
+
this.update = createEvent(this, "sdUpdate", 7);
|
|
6993
|
+
this.remove = createEvent(this, "sdRemove", 7);
|
|
6994
|
+
this.focus = createEvent(this, "sdFocus", 7);
|
|
6995
|
+
this.blur = createEvent(this, "sdBlur", 7);
|
|
6996
|
+
}
|
|
6997
|
+
get el() { return getElement(this); }
|
|
6998
|
+
name = '';
|
|
6999
|
+
value = '';
|
|
7000
|
+
error = false;
|
|
7001
|
+
disabled = false;
|
|
7002
|
+
placeholder = '';
|
|
7003
|
+
rules = [];
|
|
7004
|
+
internalValue = '';
|
|
7005
|
+
isEditing = false;
|
|
7006
|
+
update;
|
|
7007
|
+
remove;
|
|
7008
|
+
focus;
|
|
7009
|
+
blur;
|
|
7010
|
+
inputEl;
|
|
7011
|
+
draftValue = '';
|
|
7012
|
+
shouldInitInput = false;
|
|
7013
|
+
valueChanged(newValue) {
|
|
7014
|
+
const nextValue = newValue ?? '';
|
|
7015
|
+
const wasEditing = this.isEditing;
|
|
7016
|
+
this.internalValue = nextValue;
|
|
7017
|
+
this.draftValue = nextValue;
|
|
7018
|
+
if (wasEditing) {
|
|
7019
|
+
this.isEditing = false;
|
|
7020
|
+
this.shouldInitInput = false;
|
|
7021
|
+
this.inputEl?.blur();
|
|
7022
|
+
this.blur.emit();
|
|
7023
|
+
}
|
|
7024
|
+
}
|
|
7025
|
+
componentWillLoad() {
|
|
7026
|
+
this.internalValue = this.value ?? '';
|
|
7027
|
+
}
|
|
7028
|
+
componentDidLoad() {
|
|
7029
|
+
this.registerToForm();
|
|
7030
|
+
}
|
|
7031
|
+
disconnectedCallback() {
|
|
7032
|
+
this.unregisterFromForm();
|
|
7033
|
+
}
|
|
7034
|
+
async sdValidate() {
|
|
7035
|
+
if (!this.rules || this.rules.length === 0) {
|
|
7036
|
+
this.error = false;
|
|
7037
|
+
return true;
|
|
7038
|
+
}
|
|
7039
|
+
for (const rule of this.rules) {
|
|
7040
|
+
const result = rule(this.internalValue ?? '');
|
|
7041
|
+
if (result !== true) {
|
|
7042
|
+
this.error = true;
|
|
7043
|
+
return false;
|
|
7044
|
+
}
|
|
7045
|
+
}
|
|
7046
|
+
this.error = false;
|
|
7047
|
+
return true;
|
|
7048
|
+
}
|
|
7049
|
+
async sdReset() {
|
|
7050
|
+
this.internalValue = '';
|
|
7051
|
+
this.value = '';
|
|
7052
|
+
this.error = false;
|
|
7053
|
+
this.draftValue = '';
|
|
7054
|
+
this.isEditing = false;
|
|
7055
|
+
this.shouldInitInput = false;
|
|
7056
|
+
}
|
|
7057
|
+
async sdResetValidate() {
|
|
7058
|
+
this.error = false;
|
|
7059
|
+
}
|
|
7060
|
+
async sdResetValidation() {
|
|
7061
|
+
this.error = false;
|
|
7062
|
+
}
|
|
7063
|
+
async sdFocus() {
|
|
7064
|
+
if (this.disabled)
|
|
7065
|
+
return;
|
|
7066
|
+
this.enterEditMode();
|
|
7067
|
+
}
|
|
7068
|
+
async sdGetNativeElement() {
|
|
7069
|
+
return this.inputEl ?? null;
|
|
7070
|
+
}
|
|
7071
|
+
enterEditMode = () => {
|
|
7072
|
+
if (this.disabled || this.isEditing)
|
|
7073
|
+
return;
|
|
7074
|
+
this.draftValue = this.internalValue;
|
|
7075
|
+
this.shouldInitInput = true;
|
|
7076
|
+
this.isEditing = true;
|
|
7077
|
+
this.focus.emit();
|
|
7078
|
+
};
|
|
7079
|
+
commitEdit = async () => {
|
|
7080
|
+
if (!this.isEditing)
|
|
7081
|
+
return;
|
|
7082
|
+
const next = (this.inputEl?.textContent ?? this.draftValue).trim();
|
|
7083
|
+
const changed = next !== this.draftValue;
|
|
7084
|
+
this.internalValue = next;
|
|
7085
|
+
this.isEditing = false;
|
|
7086
|
+
this.shouldInitInput = false;
|
|
7087
|
+
this.value = next;
|
|
7088
|
+
if (changed) {
|
|
7089
|
+
this.update.emit(next);
|
|
7090
|
+
}
|
|
7091
|
+
await this.sdValidate();
|
|
7092
|
+
this.blur.emit();
|
|
7093
|
+
};
|
|
7094
|
+
cancelEdit = () => {
|
|
7095
|
+
if (!this.isEditing)
|
|
7096
|
+
return;
|
|
7097
|
+
this.internalValue = this.draftValue;
|
|
7098
|
+
this.isEditing = false;
|
|
7099
|
+
this.shouldInitInput = false;
|
|
7100
|
+
this.blur.emit();
|
|
7101
|
+
};
|
|
7102
|
+
handleChipClick = () => {
|
|
7103
|
+
if (this.disabled || this.isEditing)
|
|
7104
|
+
return;
|
|
7105
|
+
this.enterEditMode();
|
|
7106
|
+
};
|
|
7107
|
+
handleChipKeyDown = (event) => {
|
|
7108
|
+
if (this.disabled || this.isEditing)
|
|
7109
|
+
return;
|
|
7110
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
7111
|
+
event.preventDefault();
|
|
7112
|
+
this.enterEditMode();
|
|
7113
|
+
}
|
|
7114
|
+
};
|
|
7115
|
+
handleInputChange = (event) => {
|
|
7116
|
+
const target = event.target;
|
|
7117
|
+
this.internalValue = target.textContent ?? '';
|
|
7118
|
+
};
|
|
7119
|
+
handleInputKeyDown = (event) => {
|
|
7120
|
+
if (event.key === 'Enter') {
|
|
7121
|
+
event.preventDefault();
|
|
7122
|
+
this.commitEdit();
|
|
7123
|
+
}
|
|
7124
|
+
else if (event.key === 'Escape') {
|
|
7125
|
+
event.preventDefault();
|
|
7126
|
+
this.cancelEdit();
|
|
7127
|
+
}
|
|
7128
|
+
};
|
|
7129
|
+
handleInputBlur = () => {
|
|
7130
|
+
this.commitEdit();
|
|
7131
|
+
};
|
|
7132
|
+
handlePaste = (event) => {
|
|
7133
|
+
event.preventDefault();
|
|
7134
|
+
const text = event.clipboardData?.getData('text/plain') ?? '';
|
|
7135
|
+
document.execCommand('insertText', false, text);
|
|
7136
|
+
};
|
|
7137
|
+
handleRemoveClick = (event) => {
|
|
7138
|
+
event.stopPropagation();
|
|
7139
|
+
if (this.disabled)
|
|
7140
|
+
return;
|
|
7141
|
+
this.remove.emit();
|
|
7142
|
+
};
|
|
7143
|
+
syncInputValue(value) {
|
|
7144
|
+
if (!this.inputEl)
|
|
7145
|
+
return;
|
|
7146
|
+
this.inputEl.textContent = value;
|
|
7147
|
+
const range = document.createRange();
|
|
7148
|
+
range.selectNodeContents(this.inputEl);
|
|
7149
|
+
range.collapse(false);
|
|
7150
|
+
const selection = window.getSelection();
|
|
7151
|
+
selection?.removeAllRanges();
|
|
7152
|
+
selection?.addRange(range);
|
|
7153
|
+
}
|
|
7154
|
+
registerToForm() {
|
|
7155
|
+
const formEl = this.el.closest('sd-form');
|
|
7156
|
+
if (!formEl || typeof formEl.componentOnReady !== 'function')
|
|
7157
|
+
return;
|
|
7158
|
+
formEl.componentOnReady().then(form => {
|
|
7159
|
+
form.sdRegisterField(this);
|
|
7160
|
+
});
|
|
7161
|
+
}
|
|
7162
|
+
unregisterFromForm() {
|
|
7163
|
+
if (!this.name)
|
|
7164
|
+
return;
|
|
7165
|
+
const formEl = this.el.closest('sd-form');
|
|
7166
|
+
formEl?.componentOnReady().then(form => {
|
|
7167
|
+
form.sdUnregisterField(this.name);
|
|
7168
|
+
});
|
|
7169
|
+
}
|
|
7170
|
+
componentDidUpdate() {
|
|
7171
|
+
if (this.isEditing && this.inputEl && this.shouldInitInput) {
|
|
7172
|
+
this.inputEl.focus();
|
|
7173
|
+
this.syncInputValue(this.internalValue);
|
|
7174
|
+
this.shouldInitInput = false;
|
|
7175
|
+
}
|
|
7176
|
+
}
|
|
7177
|
+
resolveState() {
|
|
7178
|
+
if (this.isEditing)
|
|
7179
|
+
return 'focus';
|
|
7180
|
+
if (this.error)
|
|
7181
|
+
return 'error';
|
|
7182
|
+
return 'default';
|
|
7183
|
+
}
|
|
7184
|
+
render() {
|
|
7185
|
+
const state = this.resolveState();
|
|
7186
|
+
const typography = state === 'focus' ? CHIP_TYPOGRAPHY.focus : CHIP_TYPOGRAPHY.default;
|
|
7187
|
+
const cssVars = {
|
|
7188
|
+
'--sd-chip-height': CHIP_LAYOUT.height,
|
|
7189
|
+
'--sd-chip-padding-x': CHIP_LAYOUT.paddingX,
|
|
7190
|
+
'--sd-chip-gap': CHIP_LAYOUT.gap,
|
|
7191
|
+
'--sd-chip-radius': CHIP_LAYOUT.radius,
|
|
7192
|
+
'--sd-chip-border-width': CHIP_LAYOUT.borderWidth,
|
|
7193
|
+
'--sd-chip-bg': CHIP_COLORS.bg[state],
|
|
7194
|
+
'--sd-chip-content': CHIP_COLORS.content[state],
|
|
7195
|
+
'--sd-chip-border-color': state === 'focus' ? CHIP_COLORS.border.focus : 'transparent',
|
|
7196
|
+
'--sd-chip-font-family': typography.fontFamily,
|
|
7197
|
+
'--sd-chip-font-size': typography.fontSize,
|
|
7198
|
+
'--sd-chip-font-weight': typography.fontWeight,
|
|
7199
|
+
'--sd-chip-line-height': typography.lineHeight,
|
|
7200
|
+
};
|
|
7201
|
+
return (hAsync("span", { key: 'ec814d57fb4032de1370e56d61cd51b6e831312a', class: {
|
|
7202
|
+
'sd-chip': true,
|
|
7203
|
+
[`sd-chip--${state}`]: true,
|
|
7204
|
+
'sd-chip--disabled': this.disabled,
|
|
7205
|
+
'sd-chip--editable': !this.disabled,
|
|
7206
|
+
}, 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() })) : ([
|
|
7207
|
+
hAsync("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
|
|
7208
|
+
!this.disabled && (hAsync("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
|
|
7209
|
+
])));
|
|
7210
|
+
}
|
|
7211
|
+
static get watchers() { return {
|
|
7212
|
+
"value": [{
|
|
7213
|
+
"valueChanged": 0
|
|
7214
|
+
}]
|
|
7215
|
+
}; }
|
|
7216
|
+
static get style() { return sdChipCss(); }
|
|
7217
|
+
static get cmpMeta() { return {
|
|
7218
|
+
"$flags$": 512,
|
|
7219
|
+
"$tagName$": "sd-chip",
|
|
7220
|
+
"$members$": {
|
|
7221
|
+
"name": [1],
|
|
7222
|
+
"value": [1025],
|
|
7223
|
+
"error": [1028],
|
|
7224
|
+
"disabled": [4],
|
|
7225
|
+
"placeholder": [1],
|
|
7226
|
+
"rules": [16],
|
|
7227
|
+
"internalValue": [32],
|
|
7228
|
+
"isEditing": [32],
|
|
7229
|
+
"sdValidate": [64],
|
|
7230
|
+
"sdReset": [64],
|
|
7231
|
+
"sdResetValidate": [64],
|
|
7232
|
+
"sdResetValidation": [64],
|
|
7233
|
+
"sdFocus": [64],
|
|
7234
|
+
"sdGetNativeElement": [64]
|
|
7235
|
+
},
|
|
7236
|
+
"$listeners$": undefined,
|
|
7237
|
+
"$lazyBundleId$": "-",
|
|
7238
|
+
"$attrsToReflect$": []
|
|
7239
|
+
}; }
|
|
7240
|
+
}
|
|
7241
|
+
|
|
6911
7242
|
const spinner = {
|
|
6912
7243
|
color: {
|
|
6913
7244
|
track: "#EEEEEE",
|
|
@@ -6969,7 +7300,7 @@ class SdCircleProgress {
|
|
|
6969
7300
|
arcStyle.strokeDashoffset = '0';
|
|
6970
7301
|
}
|
|
6971
7302
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
6972
|
-
return (hAsync(Host, { key: '
|
|
7303
|
+
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 }))));
|
|
6973
7304
|
}
|
|
6974
7305
|
static get style() { return sdCircleProgressCss(); }
|
|
6975
7306
|
static get cmpMeta() { return {
|
|
@@ -7079,9 +7410,9 @@ class SdConfirmModal {
|
|
|
7079
7410
|
render() {
|
|
7080
7411
|
const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
|
|
7081
7412
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
|
|
7082
|
-
return (hAsync("div", { key: '
|
|
7413
|
+
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 => {
|
|
7083
7414
|
this.customContentRef = el;
|
|
7084
|
-
} })) : (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: '
|
|
7415
|
+
} })) : (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() }))));
|
|
7085
7416
|
}
|
|
7086
7417
|
static get style() { return sdConfirmModalCss(); }
|
|
7087
7418
|
static get cmpMeta() { return {
|
|
@@ -7438,9 +7769,9 @@ class SdDatePicker {
|
|
|
7438
7769
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
7439
7770
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
7440
7771
|
};
|
|
7441
|
-
return (hAsync("sd-field", { key: '
|
|
7772
|
+
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 => {
|
|
7442
7773
|
this.triggerRef = el;
|
|
7443
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
7774
|
+
} }, 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 })))));
|
|
7444
7775
|
}
|
|
7445
7776
|
static get watchers() { return {
|
|
7446
7777
|
"isOpen": [{
|
|
@@ -7621,7 +7952,7 @@ class SdDatePickerCalendar {
|
|
|
7621
7952
|
'--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
|
|
7622
7953
|
'--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
|
|
7623
7954
|
};
|
|
7624
|
-
return (hAsync("div", { key: '
|
|
7955
|
+
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 => {
|
|
7625
7956
|
const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
|
|
7626
7957
|
const isToday = cell.inCurrentMonth && today === cell.date;
|
|
7627
7958
|
const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
|
|
@@ -7692,10 +8023,10 @@ class SdDatePickerTrigger {
|
|
|
7692
8023
|
? DATEPICKER_COLORS.icon.disabled
|
|
7693
8024
|
: DATEPICKER_COLORS.icon.default,
|
|
7694
8025
|
};
|
|
7695
|
-
return (hAsync("div", { key: '
|
|
8026
|
+
return (hAsync("div", { key: 'ebe886b3df3b50c53d31081f6ad7e251721b5cb1', class: {
|
|
7696
8027
|
'sd-date-picker-trigger': true,
|
|
7697
8028
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
7698
|
-
}, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: '
|
|
8029
|
+
}, 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)));
|
|
7699
8030
|
}
|
|
7700
8031
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
7701
8032
|
static get cmpMeta() { return {
|
|
@@ -8114,7 +8445,7 @@ class SdDateRangePickerCalendar {
|
|
|
8114
8445
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
8115
8446
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
8116
8447
|
};
|
|
8117
|
-
return (hAsync(Fragment, { key: '
|
|
8448
|
+
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)))));
|
|
8118
8449
|
}
|
|
8119
8450
|
static get watchers() { return {
|
|
8120
8451
|
"value": [{
|
|
@@ -8234,6 +8565,7 @@ const color = {
|
|
|
8234
8565
|
accent: {
|
|
8235
8566
|
"default": "#0075FF"}},
|
|
8236
8567
|
content: {
|
|
8568
|
+
primary: "#222222",
|
|
8237
8569
|
secondary: "#555555",
|
|
8238
8570
|
inverse: "#FFFFFF"
|
|
8239
8571
|
}};
|
|
@@ -8481,7 +8813,7 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
8481
8813
|
}
|
|
8482
8814
|
render() {
|
|
8483
8815
|
const { config, preset } = this.resolvedConfig;
|
|
8484
|
-
return (hAsync("div", { key: '
|
|
8816
|
+
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: {
|
|
8485
8817
|
'--sd-dropdown-button-bg': config.color,
|
|
8486
8818
|
'--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
|
|
8487
8819
|
'--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
|
|
@@ -8491,10 +8823,10 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
8491
8823
|
'--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
|
|
8492
8824
|
'--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
|
|
8493
8825
|
'--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
|
|
8494
|
-
} }, hAsync("span", { key: '
|
|
8826
|
+
} }, 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: {
|
|
8495
8827
|
'sd-dropdown-button__trigger-icon': true,
|
|
8496
8828
|
'sd-dropdown-button__trigger-icon--open': this.isOpen,
|
|
8497
|
-
}, "aria-hidden": "true" }, hAsync("sd-icon", { key: '
|
|
8829
|
+
}, "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)));
|
|
8498
8830
|
}
|
|
8499
8831
|
static get watchers() { return {
|
|
8500
8832
|
"isOpen": [{
|
|
@@ -8540,8 +8872,9 @@ const field = {
|
|
|
8540
8872
|
icon: "16",
|
|
8541
8873
|
typography: {
|
|
8542
8874
|
fontWeight: "700",
|
|
8543
|
-
fontSize: "
|
|
8544
|
-
lineHeight: "
|
|
8875
|
+
fontSize: "14",
|
|
8876
|
+
lineHeight: "24"
|
|
8877
|
+
}
|
|
8545
8878
|
}
|
|
8546
8879
|
},
|
|
8547
8880
|
addonLabel: {
|
|
@@ -8752,20 +9085,20 @@ class SdField {
|
|
|
8752
9085
|
'--sd-field-addon-border-width': `${addonTokens.border.width}px`,
|
|
8753
9086
|
}
|
|
8754
9087
|
: {};
|
|
8755
|
-
return (hAsync("div", { key: '
|
|
9088
|
+
return (hAsync("div", { key: 'af5531a8bad5b8685f56748ce55044927f061903', class: {
|
|
8756
9089
|
'sd-field': true,
|
|
8757
9090
|
'sd-field--has-label': !!this.label,
|
|
8758
9091
|
'sd-field--has-addon': !!addon,
|
|
8759
9092
|
[this.fieldStatus]: !!this.fieldStatus,
|
|
8760
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '
|
|
9093
|
+
}, 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
|
|
8761
9094
|
? {
|
|
8762
9095
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
8763
9096
|
flex: 'none',
|
|
8764
9097
|
}
|
|
8765
|
-
: {} }, hAsync("div", { key: '
|
|
9098
|
+
: {} }, hAsync("div", { key: '0c80a69019f7b14c5f19eeb21f751c885df4c82b', class: {
|
|
8766
9099
|
'sd-field__control': true,
|
|
8767
9100
|
'sd-field__control--has-addon': !!addon,
|
|
8768
|
-
} }, addon && hAsync("div", { key: '
|
|
9101
|
+
} }, 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))))));
|
|
8769
9102
|
}
|
|
8770
9103
|
renderLabel(label) {
|
|
8771
9104
|
if (!label)
|
|
@@ -8849,7 +9182,7 @@ const FILE_PICKER_COLORS = {
|
|
|
8849
9182
|
},
|
|
8850
9183
|
};
|
|
8851
9184
|
|
|
8852
|
-
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:
|
|
9185
|
+
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)}`;
|
|
8853
9186
|
|
|
8854
9187
|
class SdFilePicker {
|
|
8855
9188
|
constructor(hostRef) {
|
|
@@ -9026,7 +9359,7 @@ class SdFilePicker {
|
|
|
9026
9359
|
'sd-file-picker__text': true,
|
|
9027
9360
|
'sd-file-picker__text--placeholder': !hasFiles,
|
|
9028
9361
|
'sd-file-picker__text--active': hasFiles,
|
|
9029
|
-
} }, 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))));
|
|
9362
|
+
} }, 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))));
|
|
9030
9363
|
if (this.inline) {
|
|
9031
9364
|
return (hAsync("div", { class: {
|
|
9032
9365
|
'sd-file-picker--inline': true,
|
|
@@ -9092,7 +9425,7 @@ class SdFloatingPopover {
|
|
|
9092
9425
|
to = 'body';
|
|
9093
9426
|
parentRef = null;
|
|
9094
9427
|
offset = [0, 0];
|
|
9095
|
-
zIndex =
|
|
9428
|
+
zIndex = 998;
|
|
9096
9429
|
placement = 'bottom';
|
|
9097
9430
|
open = false;
|
|
9098
9431
|
close;
|
|
@@ -9150,7 +9483,7 @@ class SdFloatingPopover {
|
|
|
9150
9483
|
this.wrapper = document.createElement('div');
|
|
9151
9484
|
Object.assign(this.wrapper.style, {
|
|
9152
9485
|
position: 'absolute',
|
|
9153
|
-
zIndex: (this.zIndex ??
|
|
9486
|
+
zIndex: (this.zIndex ?? 998).toString(),
|
|
9154
9487
|
transition: 'opacity 0.4s',
|
|
9155
9488
|
top: '-9999px',
|
|
9156
9489
|
left: '-9999px',
|
|
@@ -9180,18 +9513,22 @@ class SdFloatingPopover {
|
|
|
9180
9513
|
switch (this.placement) {
|
|
9181
9514
|
case 'top':
|
|
9182
9515
|
top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
|
|
9183
|
-
left =
|
|
9516
|
+
left =
|
|
9517
|
+
rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
|
|
9184
9518
|
break;
|
|
9185
9519
|
case 'bottom':
|
|
9186
9520
|
top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
|
|
9187
|
-
left =
|
|
9521
|
+
left =
|
|
9522
|
+
rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
|
|
9188
9523
|
break;
|
|
9189
9524
|
case 'left':
|
|
9190
|
-
top =
|
|
9525
|
+
top =
|
|
9526
|
+
rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
|
|
9191
9527
|
left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
|
|
9192
9528
|
break;
|
|
9193
9529
|
case 'right':
|
|
9194
|
-
top =
|
|
9530
|
+
top =
|
|
9531
|
+
rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
|
|
9195
9532
|
left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
|
|
9196
9533
|
break;
|
|
9197
9534
|
}
|
|
@@ -9232,7 +9569,7 @@ class SdFloatingPopover {
|
|
|
9232
9569
|
this.close.emit();
|
|
9233
9570
|
}
|
|
9234
9571
|
render() {
|
|
9235
|
-
return hAsync("slot", { key: '
|
|
9572
|
+
return hAsync("slot", { key: 'f463fadca5060ebc995d8115575404611b94fb11' });
|
|
9236
9573
|
}
|
|
9237
9574
|
static get style() { return sdFloatingPortalCss(); }
|
|
9238
9575
|
static get cmpMeta() { return {
|
|
@@ -9486,19 +9823,19 @@ class SdGhostButton {
|
|
|
9486
9823
|
render() {
|
|
9487
9824
|
const sizeConfig = GHOST_BUTTON_SIZES[this.size];
|
|
9488
9825
|
const contentColor = this.disabled
|
|
9489
|
-
? GHOST_BUTTON_DISABLED_COLORS[this.intent]
|
|
9490
|
-
: GHOST_BUTTON_CONTENT_COLORS[this.intent];
|
|
9826
|
+
? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
|
|
9827
|
+
: GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
|
|
9491
9828
|
const accessibleName = this.ariaLabel.trim() || undefined;
|
|
9492
|
-
return (hAsync("button", { key: '
|
|
9829
|
+
return (hAsync("button", { key: '690151271d15b4a3e07b47021f368647cc9daf62', class: {
|
|
9493
9830
|
'sd-ghost-button': true,
|
|
9494
9831
|
'sd-ghost-button--disabled': this.disabled,
|
|
9495
9832
|
}, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
9496
9833
|
'--sd-ghost-button-size': `${sizeConfig.size}px`,
|
|
9497
9834
|
'--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
|
|
9498
|
-
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
|
|
9835
|
+
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
|
|
9499
9836
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
9500
9837
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
9501
|
-
}, onClick: this.handleClick }, hAsync("sd-icon", { key: '
|
|
9838
|
+
}, onClick: this.handleClick }, hAsync("sd-icon", { key: '9769fff9f694e7d1fa2cba94fa8e80498d0afe2e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
9502
9839
|
}
|
|
9503
9840
|
static get style() { return sdGhostButtonCss(); }
|
|
9504
9841
|
static get cmpMeta() { return {
|
|
@@ -9517,62 +9854,194 @@ class SdGhostButton {
|
|
|
9517
9854
|
}; }
|
|
9518
9855
|
}
|
|
9519
9856
|
|
|
9520
|
-
const
|
|
9857
|
+
const guide = {
|
|
9858
|
+
button: {
|
|
9859
|
+
height: "28",
|
|
9860
|
+
paddingX: "12",
|
|
9861
|
+
radius: "9999",
|
|
9862
|
+
gap: "6",
|
|
9863
|
+
typography: {
|
|
9864
|
+
fontSize: "12",
|
|
9865
|
+
fontWeight: "500",
|
|
9866
|
+
lineHeight: "20"
|
|
9867
|
+
},
|
|
9868
|
+
icon: {
|
|
9869
|
+
size: "16",
|
|
9870
|
+
"default": "#00973C",
|
|
9871
|
+
active: "#FFFFFF"
|
|
9872
|
+
},
|
|
9873
|
+
border: {
|
|
9874
|
+
width: "1",
|
|
9875
|
+
"default": "#E1E1E1"
|
|
9876
|
+
},
|
|
9877
|
+
bg: {
|
|
9878
|
+
"default": "#FFFFFF",
|
|
9879
|
+
tip: "#00973C",
|
|
9880
|
+
notion: "#1F8AE1"
|
|
9881
|
+
},
|
|
9882
|
+
text: {
|
|
9883
|
+
"default": "#222222",
|
|
9884
|
+
active: "#FFFFFF"
|
|
9885
|
+
}
|
|
9886
|
+
},
|
|
9887
|
+
contents: {
|
|
9888
|
+
paddingX: "24",
|
|
9889
|
+
paddingY: "20",
|
|
9890
|
+
gap: "12",
|
|
9891
|
+
title: {
|
|
9892
|
+
gap: "8"
|
|
9893
|
+
},
|
|
9894
|
+
row: {
|
|
9895
|
+
gap: "8"
|
|
9896
|
+
},
|
|
9897
|
+
body: {
|
|
9898
|
+
gap: "2"
|
|
9899
|
+
},
|
|
9900
|
+
typography: {
|
|
9901
|
+
title: {
|
|
9902
|
+
fontWeight: "700",
|
|
9903
|
+
fontSize: "16",
|
|
9904
|
+
lineHeight: "26"
|
|
9905
|
+
},
|
|
9906
|
+
body: {
|
|
9907
|
+
fontWeight: "400",
|
|
9908
|
+
fontSize: "12",
|
|
9909
|
+
lineHeight: "20"},
|
|
9910
|
+
color: "#222222"
|
|
9911
|
+
},
|
|
9912
|
+
icon: "#00973C",
|
|
9913
|
+
radius: "8"}
|
|
9914
|
+
};
|
|
9915
|
+
var guideTokens = {
|
|
9916
|
+
guide: guide
|
|
9917
|
+
};
|
|
9918
|
+
|
|
9919
|
+
const { button, contents} = guideTokens.guide;
|
|
9920
|
+
const NOTION_ICON_COLOR = systemTokens.color.content.primary;
|
|
9921
|
+
const GUIDE_CONFIG = {
|
|
9922
|
+
button: {
|
|
9923
|
+
height: `${button.height}px`,
|
|
9924
|
+
paddingX: `${button.paddingX}px`,
|
|
9925
|
+
radius: `${button.radius}px`,
|
|
9926
|
+
gap: `${button.gap}px`,
|
|
9927
|
+
fontSize: `${button.typography.fontSize}px`,
|
|
9928
|
+
fontWeight: button.typography.fontWeight,
|
|
9929
|
+
lineHeight: `${button.typography.lineHeight}px`,
|
|
9930
|
+
iconSize: Number(button.icon.size),
|
|
9931
|
+
iconColorDefault: button.icon.default,
|
|
9932
|
+
iconColorActive: button.icon.active,
|
|
9933
|
+
iconColorNotion: NOTION_ICON_COLOR,
|
|
9934
|
+
borderWidth: `${button.border.width}px`,
|
|
9935
|
+
borderColor: button.border.default,
|
|
9936
|
+
bgDefault: button.bg.default,
|
|
9937
|
+
bgTip: button.bg.tip,
|
|
9938
|
+
bgNotion: button.bg.notion,
|
|
9939
|
+
textDefault: button.text.default,
|
|
9940
|
+
textActive: button.text.active,
|
|
9941
|
+
},
|
|
9942
|
+
contents: {
|
|
9943
|
+
paddingX: `${contents.paddingX}px`,
|
|
9944
|
+
paddingY: `${contents.paddingY}px`,
|
|
9945
|
+
gap: `${contents.gap}px`,
|
|
9946
|
+
rowGap: `${contents.row.gap}px`,
|
|
9947
|
+
bodyGap: `${contents.body.gap}px`,
|
|
9948
|
+
titleGap: `${contents.title.gap}px`,
|
|
9949
|
+
radius: `${contents.radius}px`,
|
|
9950
|
+
iconColor: contents.icon,
|
|
9951
|
+
iconColorNotion: NOTION_ICON_COLOR,
|
|
9952
|
+
titleFontSize: `${contents.typography.title.fontSize}px`,
|
|
9953
|
+
titleFontWeight: contents.typography.title.fontWeight,
|
|
9954
|
+
titleLineHeight: `${contents.typography.title.lineHeight}px`,
|
|
9955
|
+
bodyFontSize: `${contents.typography.body.fontSize}px`,
|
|
9956
|
+
bodyFontWeight: contents.typography.body.fontWeight,
|
|
9957
|
+
bodyLineHeight: `${contents.typography.body.lineHeight}px`,
|
|
9958
|
+
textColor: contents.typography.color,
|
|
9959
|
+
},
|
|
9960
|
+
};
|
|
9961
|
+
|
|
9962
|
+
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}`;
|
|
9521
9963
|
|
|
9522
|
-
const
|
|
9523
|
-
|
|
9524
|
-
pdf: 'PDF Guide',
|
|
9525
|
-
youtube: 'Video Guide',
|
|
9964
|
+
const DEFAULT_LABEL_BY_TYPE = {
|
|
9965
|
+
tip: '활용 TIP',
|
|
9526
9966
|
notion: '사용법 안내',
|
|
9527
|
-
event: 'Event Button',
|
|
9528
9967
|
};
|
|
9529
|
-
const
|
|
9530
|
-
|
|
9531
|
-
|
|
9532
|
-
size: 20,
|
|
9533
|
-
color: 'green_75',
|
|
9534
|
-
},
|
|
9535
|
-
pdf: { name: 'pdf', size: 20, color: 'red_75' },
|
|
9536
|
-
youtube: { name: 'youtube', size: 20, color: 'red_75' },
|
|
9537
|
-
notion: { name: 'notion', size: 16, color: 'black' },
|
|
9538
|
-
event: { name: 'event', size: 16, color: 'brilliantblue_70' },
|
|
9968
|
+
const ICON_BY_TYPE = {
|
|
9969
|
+
tip: 'helpOutline',
|
|
9970
|
+
notion: 'notion',
|
|
9539
9971
|
};
|
|
9540
9972
|
class SdGuide {
|
|
9541
9973
|
constructor(hostRef) {
|
|
9542
9974
|
registerInstance(this, hostRef);
|
|
9543
9975
|
}
|
|
9544
9976
|
get el() { return getElement(this); }
|
|
9545
|
-
type = '
|
|
9977
|
+
type = 'tip';
|
|
9546
9978
|
label = '';
|
|
9547
9979
|
message = '';
|
|
9548
|
-
|
|
9980
|
+
url = '';
|
|
9549
9981
|
popupTitle = '';
|
|
9550
9982
|
popupWidth;
|
|
9551
9983
|
popupShow = false;
|
|
9552
9984
|
guideRef;
|
|
9553
9985
|
handleClickGuide = () => {
|
|
9554
|
-
if (this.type === '
|
|
9555
|
-
this.
|
|
9986
|
+
if (this.type === 'notion') {
|
|
9987
|
+
if (this.url) {
|
|
9988
|
+
window.open(this.url, '_blank', 'noopener,noreferrer');
|
|
9989
|
+
}
|
|
9556
9990
|
return;
|
|
9557
9991
|
}
|
|
9558
|
-
|
|
9559
|
-
window.open(this.guideUrl, '_blank');
|
|
9560
|
-
}
|
|
9992
|
+
this.popupShow = !this.popupShow;
|
|
9561
9993
|
};
|
|
9562
|
-
get guideClass() {
|
|
9563
|
-
const classes = ['sd-guide', `sd-guide--${this.type}`];
|
|
9564
|
-
if (this.popupShow)
|
|
9565
|
-
classes.push('sd-guide--active');
|
|
9566
|
-
return classes.join(' ');
|
|
9567
|
-
}
|
|
9568
9994
|
closeDropdown = () => {
|
|
9569
9995
|
this.popupShow = false;
|
|
9570
9996
|
};
|
|
9997
|
+
get guideStyle() {
|
|
9998
|
+
const { button, contents } = GUIDE_CONFIG;
|
|
9999
|
+
return {
|
|
10000
|
+
'--sd-guide-button-height': button.height,
|
|
10001
|
+
'--sd-guide-button-padding-x': button.paddingX,
|
|
10002
|
+
'--sd-guide-button-radius': button.radius,
|
|
10003
|
+
'--sd-guide-button-gap': button.gap,
|
|
10004
|
+
'--sd-guide-button-font-size': button.fontSize,
|
|
10005
|
+
'--sd-guide-button-font-weight': button.fontWeight,
|
|
10006
|
+
'--sd-guide-button-line-height': button.lineHeight,
|
|
10007
|
+
'--sd-guide-button-border-width': button.borderWidth,
|
|
10008
|
+
'--sd-guide-button-border-color': button.borderColor,
|
|
10009
|
+
'--sd-guide-button-bg-default': button.bgDefault,
|
|
10010
|
+
'--sd-guide-button-bg-tip': button.bgTip,
|
|
10011
|
+
'--sd-guide-button-bg-notion': button.bgNotion,
|
|
10012
|
+
'--sd-guide-button-text-default': button.textDefault,
|
|
10013
|
+
'--sd-guide-button-text-active': button.textActive,
|
|
10014
|
+
'--sd-guide-contents-padding-x': contents.paddingX,
|
|
10015
|
+
'--sd-guide-contents-padding-y': contents.paddingY,
|
|
10016
|
+
'--sd-guide-contents-gap': contents.gap,
|
|
10017
|
+
'--sd-guide-contents-row-gap': contents.rowGap,
|
|
10018
|
+
'--sd-guide-contents-body-gap': contents.bodyGap,
|
|
10019
|
+
'--sd-guide-contents-title-gap': contents.titleGap,
|
|
10020
|
+
'--sd-guide-contents-radius': contents.radius,
|
|
10021
|
+
'--sd-guide-contents-title-font-size': contents.titleFontSize,
|
|
10022
|
+
'--sd-guide-contents-title-font-weight': contents.titleFontWeight,
|
|
10023
|
+
'--sd-guide-contents-title-line-height': contents.titleLineHeight,
|
|
10024
|
+
'--sd-guide-contents-body-font-size': contents.bodyFontSize,
|
|
10025
|
+
'--sd-guide-contents-body-font-weight': contents.bodyFontWeight,
|
|
10026
|
+
'--sd-guide-contents-body-line-height': contents.bodyLineHeight,
|
|
10027
|
+
'--sd-guide-contents-text-color': contents.textColor,
|
|
10028
|
+
};
|
|
10029
|
+
}
|
|
9571
10030
|
render() {
|
|
9572
|
-
const {
|
|
9573
|
-
|
|
9574
|
-
|
|
9575
|
-
|
|
10031
|
+
const { button, contents } = GUIDE_CONFIG;
|
|
10032
|
+
const isActive = this.popupShow;
|
|
10033
|
+
const isNotion = (this.type ?? 'tip') === 'notion';
|
|
10034
|
+
const defaultLabel = DEFAULT_LABEL_BY_TYPE[this.type ?? 'tip'];
|
|
10035
|
+
const iconName = ICON_BY_TYPE[this.type ?? 'tip'];
|
|
10036
|
+
const buttonIconDefault = isNotion ? button.iconColorNotion : button.iconColorDefault;
|
|
10037
|
+
const popupIconColor = isNotion ? contents.iconColorNotion : contents.iconColor;
|
|
10038
|
+
const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
|
|
10039
|
+
if (isActive)
|
|
10040
|
+
buttonClasses.push('sd-guide__button--active');
|
|
10041
|
+
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: {
|
|
10042
|
+
...this.guideStyle,
|
|
10043
|
+
width: this.popupWidth ? this.popupWidth + 'px' : '426px',
|
|
10044
|
+
} }, 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))))))));
|
|
9576
10045
|
}
|
|
9577
10046
|
// 현재 2depth까지만 스타일 적용
|
|
9578
10047
|
renderListItem(message, depth = 0) {
|
|
@@ -9594,17 +10063,17 @@ class SdGuide {
|
|
|
9594
10063
|
"$flags$": 512,
|
|
9595
10064
|
"$tagName$": "sd-guide",
|
|
9596
10065
|
"$members$": {
|
|
9597
|
-
"type": [
|
|
9598
|
-
"label": [
|
|
10066
|
+
"type": [513],
|
|
10067
|
+
"label": [513],
|
|
9599
10068
|
"message": [1],
|
|
9600
|
-
"
|
|
10069
|
+
"url": [1],
|
|
9601
10070
|
"popupTitle": [1, "popup-title"],
|
|
9602
10071
|
"popupWidth": [2, "popup-width"],
|
|
9603
10072
|
"popupShow": [32]
|
|
9604
10073
|
},
|
|
9605
10074
|
"$listeners$": undefined,
|
|
9606
10075
|
"$lazyBundleId$": "-",
|
|
9607
|
-
"$attrsToReflect$": []
|
|
10076
|
+
"$attrsToReflect$": [["type", "type"], ["label", "label"]]
|
|
9608
10077
|
}; }
|
|
9609
10078
|
}
|
|
9610
10079
|
|
|
@@ -10276,12 +10745,12 @@ class SdInput {
|
|
|
10276
10745
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
10277
10746
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
10278
10747
|
};
|
|
10279
|
-
return (hAsync("sd-field", { key: '
|
|
10748
|
+
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 () => {
|
|
10280
10749
|
if (this.disabled)
|
|
10281
10750
|
return;
|
|
10282
10751
|
this.internalValue = '';
|
|
10283
10752
|
await this.formField?.sdValidate();
|
|
10284
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
10753
|
+
} })), 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: () => {
|
|
10285
10754
|
if (this.disabled)
|
|
10286
10755
|
return;
|
|
10287
10756
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -10344,7 +10813,7 @@ class SdInput {
|
|
|
10344
10813
|
}; }
|
|
10345
10814
|
}
|
|
10346
10815
|
|
|
10347
|
-
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,
|
|
10816
|
+
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}`;
|
|
10348
10817
|
|
|
10349
10818
|
class SdLoadingContainer {
|
|
10350
10819
|
constructor(hostRef) {
|
|
@@ -10360,10 +10829,10 @@ class SdLoadingContainer {
|
|
|
10360
10829
|
this.visible = false;
|
|
10361
10830
|
}
|
|
10362
10831
|
render() {
|
|
10363
|
-
return (hAsync("div", { key: '
|
|
10832
|
+
return (hAsync("div", { key: '8236579ed01f703fb105576c2fd575b157b3aa76', class: {
|
|
10364
10833
|
'sd-loading-container': true,
|
|
10365
10834
|
'sd-loading-container--visible': this.visible,
|
|
10366
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
10835
|
+
}, "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)))));
|
|
10367
10836
|
}
|
|
10368
10837
|
static get style() { return sdLoadingContainerCss(); }
|
|
10369
10838
|
static get cmpMeta() { return {
|
|
@@ -10456,7 +10925,7 @@ class SdLoadingModal {
|
|
|
10456
10925
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
10457
10926
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
10458
10927
|
};
|
|
10459
|
-
return (hAsync(Host, { key: '
|
|
10928
|
+
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 }))))));
|
|
10460
10929
|
}
|
|
10461
10930
|
static get style() { return sdLoadingModalCss(); }
|
|
10462
10931
|
static get cmpMeta() { return {
|
|
@@ -10476,7 +10945,105 @@ class SdLoadingModal {
|
|
|
10476
10945
|
}; }
|
|
10477
10946
|
}
|
|
10478
10947
|
|
|
10479
|
-
const
|
|
10948
|
+
const DEFAULT_BASE_Z_INDEX = 997;
|
|
10949
|
+
let baseZIndex = DEFAULT_BASE_Z_INDEX;
|
|
10950
|
+
let entries = [];
|
|
10951
|
+
let bodyScrollLocked = false;
|
|
10952
|
+
let previousBodyOverflow = null;
|
|
10953
|
+
let isKeydownAttached = false;
|
|
10954
|
+
function isBrowserEnvironment() {
|
|
10955
|
+
return typeof window !== 'undefined' && typeof document !== 'undefined';
|
|
10956
|
+
}
|
|
10957
|
+
function getTopInteractiveEntry() {
|
|
10958
|
+
return [...entries].reverse().find(entry => entry.interactive);
|
|
10959
|
+
}
|
|
10960
|
+
function syncBodyScrollLock() {
|
|
10961
|
+
if (!isBrowserEnvironment())
|
|
10962
|
+
return;
|
|
10963
|
+
const shouldLock = entries.length > 0;
|
|
10964
|
+
if (shouldLock === bodyScrollLocked)
|
|
10965
|
+
return;
|
|
10966
|
+
if (shouldLock) {
|
|
10967
|
+
previousBodyOverflow = document.body.style.overflow || '';
|
|
10968
|
+
document.body.style.overflow = 'hidden';
|
|
10969
|
+
}
|
|
10970
|
+
else {
|
|
10971
|
+
document.body.style.overflow = previousBodyOverflow ?? '';
|
|
10972
|
+
previousBodyOverflow = null;
|
|
10973
|
+
}
|
|
10974
|
+
bodyScrollLocked = shouldLock;
|
|
10975
|
+
}
|
|
10976
|
+
function updateEntryZIndices() {
|
|
10977
|
+
entries.forEach(entry => {
|
|
10978
|
+
entry.setZIndex(baseZIndex);
|
|
10979
|
+
});
|
|
10980
|
+
}
|
|
10981
|
+
function detachKeydownListener() {
|
|
10982
|
+
if (!isBrowserEnvironment() || !isKeydownAttached)
|
|
10983
|
+
return;
|
|
10984
|
+
window.removeEventListener('keydown', handleWindowKeydown);
|
|
10985
|
+
isKeydownAttached = false;
|
|
10986
|
+
}
|
|
10987
|
+
function attachKeydownListener() {
|
|
10988
|
+
if (!isBrowserEnvironment() || isKeydownAttached)
|
|
10989
|
+
return;
|
|
10990
|
+
window.addEventListener('keydown', handleWindowKeydown);
|
|
10991
|
+
isKeydownAttached = true;
|
|
10992
|
+
}
|
|
10993
|
+
function syncGlobalState() {
|
|
10994
|
+
updateEntryZIndices();
|
|
10995
|
+
syncBodyScrollLock();
|
|
10996
|
+
if (entries.length > 0)
|
|
10997
|
+
attachKeydownListener();
|
|
10998
|
+
else
|
|
10999
|
+
detachKeydownListener();
|
|
11000
|
+
}
|
|
11001
|
+
function handleWindowKeydown(e) {
|
|
11002
|
+
if (e.key !== 'Escape')
|
|
11003
|
+
return;
|
|
11004
|
+
const topEntry = getTopInteractiveEntry();
|
|
11005
|
+
if (!topEntry)
|
|
11006
|
+
return;
|
|
11007
|
+
if (topEntry.persistent) {
|
|
11008
|
+
topEntry.shake();
|
|
11009
|
+
return;
|
|
11010
|
+
}
|
|
11011
|
+
topEntry.requestClose('close');
|
|
11012
|
+
}
|
|
11013
|
+
function registerModal(entry) {
|
|
11014
|
+
entries = [
|
|
11015
|
+
...entries.filter(item => item.id !== entry.id),
|
|
11016
|
+
{
|
|
11017
|
+
...entry,
|
|
11018
|
+
interactive: true,
|
|
11019
|
+
},
|
|
11020
|
+
];
|
|
11021
|
+
syncGlobalState();
|
|
11022
|
+
}
|
|
11023
|
+
function unregisterModal(id) {
|
|
11024
|
+
entries = entries.filter(entry => entry.id !== id);
|
|
11025
|
+
syncGlobalState();
|
|
11026
|
+
}
|
|
11027
|
+
function setModalInteractive(id, interactive) {
|
|
11028
|
+
entries = entries.map(entry => (entry.id === id ? { ...entry, interactive } : entry));
|
|
11029
|
+
syncGlobalState();
|
|
11030
|
+
}
|
|
11031
|
+
function isTopInteractiveModal(id) {
|
|
11032
|
+
return getTopInteractiveEntry()?.id === id;
|
|
11033
|
+
}
|
|
11034
|
+
function requestCloseForModal(id) {
|
|
11035
|
+
const topEntry = getTopInteractiveEntry();
|
|
11036
|
+
if (!topEntry || topEntry.id !== id)
|
|
11037
|
+
return false;
|
|
11038
|
+
if (topEntry.persistent) {
|
|
11039
|
+
topEntry.shake();
|
|
11040
|
+
return true;
|
|
11041
|
+
}
|
|
11042
|
+
topEntry.requestClose('close');
|
|
11043
|
+
return true;
|
|
11044
|
+
}
|
|
11045
|
+
|
|
11046
|
+
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)}}`;
|
|
10480
11047
|
|
|
10481
11048
|
let modalIdCounter = 0;
|
|
10482
11049
|
const ANIMATION_DURATION = 350;
|
|
@@ -10485,31 +11052,21 @@ class SdModalContainer {
|
|
|
10485
11052
|
registerInstance(this, hostRef);
|
|
10486
11053
|
}
|
|
10487
11054
|
get el() { return getElement(this); }
|
|
10488
|
-
|
|
11055
|
+
autoRemove = false;
|
|
11056
|
+
entry;
|
|
10489
11057
|
isVisible = false;
|
|
10490
|
-
|
|
10491
|
-
|
|
10492
|
-
containerDismissTimerId;
|
|
10493
|
-
previousBodyOverflow = null;
|
|
10494
|
-
bodyScrollLocked = false;
|
|
10495
|
-
handleKeydown(e) {
|
|
10496
|
-
if (e.key === 'Escape') {
|
|
10497
|
-
const top = this.getTopEntry();
|
|
10498
|
-
if (!top)
|
|
10499
|
-
return;
|
|
10500
|
-
if (top.persistent) {
|
|
10501
|
-
this.shakeModal(top.modalEl);
|
|
10502
|
-
return;
|
|
10503
|
-
}
|
|
10504
|
-
this.dispatchClose(top.modalEl);
|
|
10505
|
-
}
|
|
10506
|
-
}
|
|
11058
|
+
backdropVisible = false;
|
|
11059
|
+
layerRef;
|
|
10507
11060
|
async open(options, modalRef) {
|
|
10508
11061
|
const id = `modal-${++modalIdCounter}`;
|
|
10509
11062
|
const modalEl = this.createConfirmModal(id, options);
|
|
10510
11063
|
this.attachModalEventListeners(id, modalEl);
|
|
10511
|
-
this.
|
|
11064
|
+
this.mountEntry({
|
|
11065
|
+
id,
|
|
11066
|
+
modalEl,
|
|
11067
|
+
modalRef,
|
|
10512
11068
|
persistent: !!options.persistent,
|
|
11069
|
+
closing: false,
|
|
10513
11070
|
});
|
|
10514
11071
|
return id;
|
|
10515
11072
|
}
|
|
@@ -10517,8 +11074,12 @@ class SdModalContainer {
|
|
|
10517
11074
|
const id = `modal-${++modalIdCounter}`;
|
|
10518
11075
|
const modalEl = this.createLoadingModal(id, options);
|
|
10519
11076
|
this.attachLoadingModalEventListeners(id, modalEl);
|
|
10520
|
-
this.
|
|
11077
|
+
this.mountEntry({
|
|
11078
|
+
id,
|
|
11079
|
+
modalEl,
|
|
11080
|
+
modalRef,
|
|
10521
11081
|
persistent: !!options.persistent,
|
|
11082
|
+
closing: false,
|
|
10522
11083
|
});
|
|
10523
11084
|
return id;
|
|
10524
11085
|
}
|
|
@@ -10527,70 +11088,118 @@ class SdModalContainer {
|
|
|
10527
11088
|
element.setAttribute('data-modal-id', id);
|
|
10528
11089
|
element.classList.add('sd-modal-container__modal');
|
|
10529
11090
|
this.attachModalEventListeners(id, element);
|
|
10530
|
-
this.
|
|
11091
|
+
this.mountEntry({
|
|
11092
|
+
id,
|
|
11093
|
+
modalEl: element,
|
|
11094
|
+
modalRef,
|
|
10531
11095
|
persistent: !!options.persistent,
|
|
11096
|
+
closing: false,
|
|
10532
11097
|
});
|
|
10533
11098
|
return id;
|
|
10534
11099
|
}
|
|
10535
|
-
|
|
10536
|
-
|
|
10537
|
-
|
|
10538
|
-
|
|
10539
|
-
|
|
10540
|
-
|
|
10541
|
-
|
|
10542
|
-
|
|
10543
|
-
|
|
10544
|
-
|
|
10545
|
-
|
|
10546
|
-
|
|
10547
|
-
|
|
10548
|
-
}
|
|
10549
|
-
registerEntry(id, modalEl, modalRef, meta) {
|
|
10550
|
-
if (this.containerDismissTimerId) {
|
|
10551
|
-
clearTimeout(this.containerDismissTimerId);
|
|
10552
|
-
this.containerDismissTimerId = undefined;
|
|
10553
|
-
}
|
|
10554
|
-
this.entries = [
|
|
10555
|
-
...(this.entries ?? []),
|
|
10556
|
-
{
|
|
10557
|
-
id,
|
|
10558
|
-
modalEl,
|
|
10559
|
-
modalRef,
|
|
10560
|
-
persistent: meta.persistent,
|
|
10561
|
-
closing: false,
|
|
10562
|
-
},
|
|
10563
|
-
];
|
|
10564
|
-
this.isVisible = true;
|
|
10565
|
-
this.setBodyScrollLock(true);
|
|
10566
|
-
requestAnimationFrame(() => {
|
|
10567
|
-
if (!this.contentRef)
|
|
10568
|
-
return;
|
|
10569
|
-
this.contentRef.appendChild(modalEl);
|
|
10570
|
-
this.waitForModalReady(modalEl).then(() => {
|
|
10571
|
-
requestAnimationFrame(() => {
|
|
10572
|
-
const currentEntry = (this.entries ?? []).find(item => item.id === id);
|
|
10573
|
-
if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
|
|
10574
|
-
return;
|
|
10575
|
-
this.isBackdropVisible = true;
|
|
10576
|
-
modalEl.classList.add('sd-modal-container__modal--visible');
|
|
10577
|
-
});
|
|
11100
|
+
componentDidRender() {
|
|
11101
|
+
if (!this.entry || this.entry.closing || !this.layerRef)
|
|
11102
|
+
return;
|
|
11103
|
+
if (this.entry.modalEl.isConnected)
|
|
11104
|
+
return;
|
|
11105
|
+
const { id, modalEl } = this.entry;
|
|
11106
|
+
this.layerRef.appendChild(modalEl);
|
|
11107
|
+
this.waitForModalReady(modalEl).then(() => {
|
|
11108
|
+
requestAnimationFrame(() => {
|
|
11109
|
+
if (!this.entry || this.entry.id !== id || this.entry.closing || !modalEl.isConnected)
|
|
11110
|
+
return;
|
|
11111
|
+
this.backdropVisible = true;
|
|
11112
|
+
modalEl.classList.add('sd-modal-container__modal--visible');
|
|
10578
11113
|
});
|
|
10579
11114
|
});
|
|
10580
11115
|
}
|
|
11116
|
+
disconnectedCallback() {
|
|
11117
|
+
if (this.entry?.dismissTimerId)
|
|
11118
|
+
clearTimeout(this.entry.dismissTimerId);
|
|
11119
|
+
if (this.entry)
|
|
11120
|
+
unregisterModal(this.entry.id);
|
|
11121
|
+
}
|
|
10581
11122
|
async dismissById(id, reason) {
|
|
10582
|
-
this.
|
|
11123
|
+
if (this.entry?.id !== id)
|
|
11124
|
+
return;
|
|
11125
|
+
this.requestDismiss(reason);
|
|
10583
11126
|
}
|
|
10584
11127
|
async update(id, props) {
|
|
10585
|
-
|
|
10586
|
-
if (!entry || entry.closing)
|
|
11128
|
+
if (!this.entry || this.entry.id !== id || this.entry.closing)
|
|
10587
11129
|
return;
|
|
10588
|
-
const tag = entry.modalEl.tagName.toLowerCase();
|
|
11130
|
+
const tag = this.entry.modalEl.tagName.toLowerCase();
|
|
10589
11131
|
if (tag === 'sd-loading-modal') {
|
|
10590
|
-
this.applyLoadingProps(entry.modalEl, props);
|
|
11132
|
+
this.applyLoadingProps(this.entry.modalEl, props);
|
|
11133
|
+
return;
|
|
10591
11134
|
}
|
|
10592
|
-
|
|
10593
|
-
|
|
11135
|
+
this.applyProps(this.entry.modalEl, props);
|
|
11136
|
+
}
|
|
11137
|
+
mountEntry(entry) {
|
|
11138
|
+
if (this.entry) {
|
|
11139
|
+
throw new Error('[sd-modal-container] This instance already manages an active modal.');
|
|
11140
|
+
}
|
|
11141
|
+
this.entry = entry;
|
|
11142
|
+
this.backdropVisible = false;
|
|
11143
|
+
this.isVisible = true;
|
|
11144
|
+
registerModal({
|
|
11145
|
+
id: entry.id,
|
|
11146
|
+
persistent: entry.persistent,
|
|
11147
|
+
requestClose: () => this.dispatchClose(),
|
|
11148
|
+
shake: () => this.shakeModal(entry.modalEl),
|
|
11149
|
+
setZIndex: zIndex => {
|
|
11150
|
+
this.el.style.setProperty('--sd-modal-container-z-index', String(zIndex));
|
|
11151
|
+
},
|
|
11152
|
+
});
|
|
11153
|
+
}
|
|
11154
|
+
attachModalEventListeners(_id, modalEl) {
|
|
11155
|
+
modalEl.addEventListener('sdOk', () => this.requestDismiss('confirm'));
|
|
11156
|
+
modalEl.addEventListener('sdCancel', () => this.requestDismiss('cancel'));
|
|
11157
|
+
modalEl.addEventListener('sdClose', () => this.requestDismiss('close'));
|
|
11158
|
+
}
|
|
11159
|
+
attachLoadingModalEventListeners(_id, modalEl) {
|
|
11160
|
+
modalEl.addEventListener('sdClick', () => {
|
|
11161
|
+
this.entry?.modalRef._triggerClick?.();
|
|
11162
|
+
});
|
|
11163
|
+
}
|
|
11164
|
+
dispatchClose() {
|
|
11165
|
+
this.entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
|
|
11166
|
+
}
|
|
11167
|
+
requestDismiss(reason) {
|
|
11168
|
+
const currentEntry = this.entry;
|
|
11169
|
+
if (!currentEntry || currentEntry.closing)
|
|
11170
|
+
return;
|
|
11171
|
+
currentEntry.modalEl.classList.remove('sd-modal-container__modal--visible');
|
|
11172
|
+
const dismissTimerId = setTimeout(() => {
|
|
11173
|
+
this.finalizeDismiss(currentEntry.id);
|
|
11174
|
+
}, ANIMATION_DURATION);
|
|
11175
|
+
setModalInteractive(currentEntry.id, false);
|
|
11176
|
+
this.entry = {
|
|
11177
|
+
...currentEntry,
|
|
11178
|
+
closing: true,
|
|
11179
|
+
dismissTimerId,
|
|
11180
|
+
};
|
|
11181
|
+
this.backdropVisible = false;
|
|
11182
|
+
if (reason === 'confirm')
|
|
11183
|
+
currentEntry.modalRef._triggerOk();
|
|
11184
|
+
else if (reason === 'cancel')
|
|
11185
|
+
currentEntry.modalRef._triggerCancel();
|
|
11186
|
+
else if (reason === 'close')
|
|
11187
|
+
currentEntry.modalRef._triggerClose();
|
|
11188
|
+
}
|
|
11189
|
+
finalizeDismiss(id) {
|
|
11190
|
+
const currentEntry = this.entry;
|
|
11191
|
+
if (!currentEntry || currentEntry.id !== id)
|
|
11192
|
+
return;
|
|
11193
|
+
if (currentEntry.dismissTimerId)
|
|
11194
|
+
clearTimeout(currentEntry.dismissTimerId);
|
|
11195
|
+
currentEntry.modalEl.remove();
|
|
11196
|
+
unregisterModal(id);
|
|
11197
|
+
currentEntry.modalRef._triggerDismissed();
|
|
11198
|
+
this.entry = undefined;
|
|
11199
|
+
this.backdropVisible = false;
|
|
11200
|
+
this.isVisible = false;
|
|
11201
|
+
if (this.autoRemove) {
|
|
11202
|
+
this.el.remove();
|
|
10594
11203
|
}
|
|
10595
11204
|
}
|
|
10596
11205
|
createConfirmModal(id, options) {
|
|
@@ -10613,12 +11222,10 @@ class SdModalContainer {
|
|
|
10613
11222
|
if (this.hasOwnProp(options, 'message'))
|
|
10614
11223
|
this.setAttr(el, 'message', options.message);
|
|
10615
11224
|
if (this.hasOwnProp(options, 'useButton')) {
|
|
10616
|
-
if (options.useButton)
|
|
11225
|
+
if (options.useButton)
|
|
10617
11226
|
el.setAttribute('use-button', '');
|
|
10618
|
-
|
|
10619
|
-
else {
|
|
11227
|
+
else
|
|
10620
11228
|
el.removeAttribute('use-button');
|
|
10621
|
-
}
|
|
10622
11229
|
}
|
|
10623
11230
|
if (this.hasOwnProp(options, 'buttonLabel')) {
|
|
10624
11231
|
this.setAttr(el, 'button-label', options.buttonLabel);
|
|
@@ -10660,14 +11267,9 @@ class SdModalContainer {
|
|
|
10660
11267
|
el.tagContents = options.tagContents;
|
|
10661
11268
|
}
|
|
10662
11269
|
handleBackdropClick = () => {
|
|
10663
|
-
|
|
10664
|
-
if (!top)
|
|
11270
|
+
if (!this.entry || !isTopInteractiveModal(this.entry.id))
|
|
10665
11271
|
return;
|
|
10666
|
-
|
|
10667
|
-
this.shakeModal(top.modalEl);
|
|
10668
|
-
return;
|
|
10669
|
-
}
|
|
10670
|
-
this.dispatchClose(top.modalEl);
|
|
11272
|
+
requestCloseForModal(this.entry.id);
|
|
10671
11273
|
};
|
|
10672
11274
|
shakeModal(modalEl) {
|
|
10673
11275
|
const cls = 'sd-modal-container__modal--shake';
|
|
@@ -10677,73 +11279,6 @@ class SdModalContainer {
|
|
|
10677
11279
|
modalEl.classList.add(cls);
|
|
10678
11280
|
});
|
|
10679
11281
|
}
|
|
10680
|
-
disconnectedCallback() {
|
|
10681
|
-
(this.entries ?? []).forEach(entry => {
|
|
10682
|
-
if (entry.dismissTimerId)
|
|
10683
|
-
clearTimeout(entry.dismissTimerId);
|
|
10684
|
-
});
|
|
10685
|
-
if (this.containerDismissTimerId)
|
|
10686
|
-
clearTimeout(this.containerDismissTimerId);
|
|
10687
|
-
this.setBodyScrollLock(false);
|
|
10688
|
-
}
|
|
10689
|
-
setBodyScrollLock(lock) {
|
|
10690
|
-
if (typeof document === 'undefined')
|
|
10691
|
-
return;
|
|
10692
|
-
if (lock === this.bodyScrollLocked)
|
|
10693
|
-
return;
|
|
10694
|
-
if (lock) {
|
|
10695
|
-
this.previousBodyOverflow = document.body.style.overflow || '';
|
|
10696
|
-
document.body.style.overflow = 'hidden';
|
|
10697
|
-
}
|
|
10698
|
-
else {
|
|
10699
|
-
document.body.style.overflow = this.previousBodyOverflow ?? '';
|
|
10700
|
-
this.previousBodyOverflow = null;
|
|
10701
|
-
}
|
|
10702
|
-
this.bodyScrollLocked = lock;
|
|
10703
|
-
}
|
|
10704
|
-
getTopEntry() {
|
|
10705
|
-
return [...(this.entries ?? [])].reverse().find(entry => !entry.closing);
|
|
10706
|
-
}
|
|
10707
|
-
requestDismiss(id, reason) {
|
|
10708
|
-
const entry = (this.entries ?? []).find(item => item.id === id);
|
|
10709
|
-
if (!entry || entry.closing)
|
|
10710
|
-
return;
|
|
10711
|
-
entry.modalEl.classList.remove('sd-modal-container__modal--visible');
|
|
10712
|
-
const remainingActive = (this.entries ?? []).filter(item => item.id !== id && !item.closing);
|
|
10713
|
-
if (remainingActive.length === 0) {
|
|
10714
|
-
this.isBackdropVisible = false;
|
|
10715
|
-
}
|
|
10716
|
-
const dismissTimerId = setTimeout(() => {
|
|
10717
|
-
this.finalizeDismiss(id);
|
|
10718
|
-
}, ANIMATION_DURATION);
|
|
10719
|
-
this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
|
|
10720
|
-
if (reason === 'confirm')
|
|
10721
|
-
entry.modalRef._triggerOk();
|
|
10722
|
-
else if (reason === 'cancel')
|
|
10723
|
-
entry.modalRef._triggerCancel();
|
|
10724
|
-
else if (reason === 'close')
|
|
10725
|
-
entry.modalRef._triggerClose();
|
|
10726
|
-
}
|
|
10727
|
-
finalizeDismiss(id) {
|
|
10728
|
-
const entry = (this.entries ?? []).find(item => item.id === id);
|
|
10729
|
-
if (!entry)
|
|
10730
|
-
return;
|
|
10731
|
-
if (entry.dismissTimerId)
|
|
10732
|
-
clearTimeout(entry.dismissTimerId);
|
|
10733
|
-
entry.modalEl.remove();
|
|
10734
|
-
const nextEntries = (this.entries ?? []).filter(item => item.id !== id);
|
|
10735
|
-
this.entries = nextEntries;
|
|
10736
|
-
if (nextEntries.length === 0) {
|
|
10737
|
-
this.setBodyScrollLock(false);
|
|
10738
|
-
this.containerDismissTimerId = setTimeout(() => {
|
|
10739
|
-
if ((this.entries ?? []).length === 0) {
|
|
10740
|
-
this.isVisible = false;
|
|
10741
|
-
}
|
|
10742
|
-
this.containerDismissTimerId = undefined;
|
|
10743
|
-
}, ANIMATION_DURATION);
|
|
10744
|
-
}
|
|
10745
|
-
entry.modalRef._triggerDismissed();
|
|
10746
|
-
}
|
|
10747
11282
|
waitForModalReady(modalEl) {
|
|
10748
11283
|
const componentOnReady = modalEl.componentOnReady;
|
|
10749
11284
|
if (typeof componentOnReady === 'function') {
|
|
@@ -10764,28 +11299,31 @@ class SdModalContainer {
|
|
|
10764
11299
|
el.setAttribute(name, value);
|
|
10765
11300
|
}
|
|
10766
11301
|
render() {
|
|
10767
|
-
if (!this.isVisible)
|
|
11302
|
+
if (!this.isVisible || !this.entry)
|
|
10768
11303
|
return null;
|
|
10769
|
-
return (hAsync("div", { class: "sd-modal-container" }, hAsync("div", { class: {
|
|
11304
|
+
return (hAsync("div", { class: "sd-modal-container" }, hAsync("div", { class: "sd-modal-container__layer", "data-modal-id": this.entry.id, ref: el => {
|
|
11305
|
+
this.layerRef = el;
|
|
11306
|
+
} }, hAsync("div", { class: {
|
|
10770
11307
|
'sd-modal-container__backdrop': true,
|
|
10771
|
-
'sd-modal-container__backdrop--visible': this.
|
|
10772
|
-
}, onClick: this.handleBackdropClick })
|
|
11308
|
+
'sd-modal-container__backdrop--visible': this.backdropVisible,
|
|
11309
|
+
}, onClick: this.handleBackdropClick }))));
|
|
10773
11310
|
}
|
|
10774
11311
|
static get style() { return sdModalContainerCss(); }
|
|
10775
11312
|
static get cmpMeta() { return {
|
|
10776
11313
|
"$flags$": 512,
|
|
10777
11314
|
"$tagName$": "sd-modal-container",
|
|
10778
11315
|
"$members$": {
|
|
10779
|
-
"
|
|
11316
|
+
"autoRemove": [4, "auto-remove"],
|
|
11317
|
+
"entry": [32],
|
|
10780
11318
|
"isVisible": [32],
|
|
10781
|
-
"
|
|
11319
|
+
"backdropVisible": [32],
|
|
10782
11320
|
"open": [64],
|
|
10783
11321
|
"openLoading": [64],
|
|
10784
11322
|
"createCustom": [64],
|
|
10785
11323
|
"dismissById": [64],
|
|
10786
11324
|
"update": [64]
|
|
10787
11325
|
},
|
|
10788
|
-
"$listeners$":
|
|
11326
|
+
"$listeners$": undefined,
|
|
10789
11327
|
"$lazyBundleId$": "-",
|
|
10790
11328
|
"$attrsToReflect$": []
|
|
10791
11329
|
}; }
|
|
@@ -11172,12 +11710,12 @@ class SdNumberInput {
|
|
|
11172
11710
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
11173
11711
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
11174
11712
|
};
|
|
11175
|
-
return (hAsync("sd-field", { key: '
|
|
11713
|
+
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()
|
|
11176
11714
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11177
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '
|
|
11715
|
+
: 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: {
|
|
11178
11716
|
textAlign: this.useButton ? 'center' : 'right',
|
|
11179
11717
|
...this.inputStyle,
|
|
11180
|
-
} }), this.inputSuffix && (hAsync("span", { key: '
|
|
11718
|
+
} }), 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()
|
|
11181
11719
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11182
11720
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
11183
11721
|
}
|
|
@@ -11234,16 +11772,75 @@ class SdNumberInput {
|
|
|
11234
11772
|
}; }
|
|
11235
11773
|
}
|
|
11236
11774
|
|
|
11237
|
-
const
|
|
11775
|
+
const pagination = {
|
|
11776
|
+
height: "24",
|
|
11777
|
+
paddingX: "6",
|
|
11778
|
+
radius: "6",
|
|
11779
|
+
gap: "12",
|
|
11780
|
+
move: {
|
|
11781
|
+
gap: "4"
|
|
11782
|
+
},
|
|
11783
|
+
icon: "12",
|
|
11784
|
+
typography: {
|
|
11785
|
+
"default": {
|
|
11786
|
+
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",
|
|
11787
|
+
fontSize: "12",
|
|
11788
|
+
fontWeight: "500",
|
|
11789
|
+
lineHeight: "20"},
|
|
11790
|
+
selected: {
|
|
11791
|
+
fontWeight: "700"}
|
|
11792
|
+
},
|
|
11793
|
+
item: {
|
|
11794
|
+
bg: {
|
|
11795
|
+
hover: "#EEEEEE",
|
|
11796
|
+
selected: "#E6F1FF"
|
|
11797
|
+
},
|
|
11798
|
+
content: {
|
|
11799
|
+
"default": "#555555",
|
|
11800
|
+
hover: "#004290",
|
|
11801
|
+
selected: "#004290"
|
|
11802
|
+
}
|
|
11803
|
+
}
|
|
11804
|
+
};
|
|
11805
|
+
var paginationTokens = {
|
|
11806
|
+
pagination: pagination
|
|
11807
|
+
};
|
|
11808
|
+
|
|
11809
|
+
const PAGINATION_LAYOUT = {
|
|
11810
|
+
height: `${paginationTokens.pagination.height}px`,
|
|
11811
|
+
paddingX: `${paginationTokens.pagination.paddingX}px`,
|
|
11812
|
+
radius: `${paginationTokens.pagination.radius}px`,
|
|
11813
|
+
gap: `${paginationTokens.pagination.gap}px`,
|
|
11814
|
+
moveGap: `${paginationTokens.pagination.move.gap}px`,
|
|
11815
|
+
iconSize: Number(paginationTokens.pagination.icon),
|
|
11816
|
+
};
|
|
11817
|
+
const PAGINATION_TYPOGRAPHY = {
|
|
11818
|
+
fontFamily: paginationTokens.pagination.typography.default.fontFamily,
|
|
11819
|
+
fontSize: `${paginationTokens.pagination.typography.default.fontSize}px`,
|
|
11820
|
+
lineHeight: `${paginationTokens.pagination.typography.default.lineHeight}px`,
|
|
11821
|
+
fontWeightDefault: paginationTokens.pagination.typography.default.fontWeight,
|
|
11822
|
+
fontWeightSelected: paginationTokens.pagination.typography.selected.fontWeight,
|
|
11823
|
+
};
|
|
11824
|
+
const PAGINATION_COLORS = {
|
|
11825
|
+
contentDefault: paginationTokens.pagination.item.content.default,
|
|
11826
|
+
contentHover: paginationTokens.pagination.item.content.hover,
|
|
11827
|
+
contentSelected: paginationTokens.pagination.item.content.selected,
|
|
11828
|
+
bgHover: paginationTokens.pagination.item.bg.hover,
|
|
11829
|
+
bgSelected: paginationTokens.pagination.item.bg.selected,
|
|
11830
|
+
// TODO: 토큰 반영 후 교체 — nav 화살표 색상은 현재 토큰에 없음
|
|
11831
|
+
iconDefault: '#888888',
|
|
11832
|
+
};
|
|
11238
11833
|
|
|
11834
|
+
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)}`;
|
|
11835
|
+
|
|
11836
|
+
const PER_PAGE = 10;
|
|
11239
11837
|
const BUTTON_WIDTH = {
|
|
11240
|
-
1:
|
|
11241
|
-
2:
|
|
11242
|
-
3:
|
|
11243
|
-
4:
|
|
11244
|
-
5:
|
|
11838
|
+
1: 24,
|
|
11839
|
+
2: 34,
|
|
11840
|
+
3: 40,
|
|
11841
|
+
4: 48,
|
|
11842
|
+
5: 56,
|
|
11245
11843
|
};
|
|
11246
|
-
const PER_PAGE = 10;
|
|
11247
11844
|
class SdPagination {
|
|
11248
11845
|
constructor(hostRef) {
|
|
11249
11846
|
registerInstance(this, hostRef);
|
|
@@ -11253,13 +11850,6 @@ class SdPagination {
|
|
|
11253
11850
|
lastPage = 1;
|
|
11254
11851
|
simple = false;
|
|
11255
11852
|
pageChange;
|
|
11256
|
-
get paginationClasses() {
|
|
11257
|
-
const classes = ['sd-pagination'];
|
|
11258
|
-
if (this.simple) {
|
|
11259
|
-
classes.push('sd-pagination--simple');
|
|
11260
|
-
}
|
|
11261
|
-
return classes.join(' ');
|
|
11262
|
-
}
|
|
11263
11853
|
get pageNumbers() {
|
|
11264
11854
|
const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
11265
11855
|
const end = Math.min(start + PER_PAGE - 1, this.lastPage);
|
|
@@ -11270,51 +11860,73 @@ class SdPagination {
|
|
|
11270
11860
|
const maxPageLength = lastPageNum.toString().length;
|
|
11271
11861
|
return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
|
|
11272
11862
|
}
|
|
11273
|
-
|
|
11863
|
+
get isFirstGroup() {
|
|
11864
|
+
return this.currentPage <= PER_PAGE;
|
|
11865
|
+
}
|
|
11866
|
+
get isLastGroup() {
|
|
11867
|
+
const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
11868
|
+
return startPageGroup + PER_PAGE - 1 >= this.lastPage;
|
|
11869
|
+
}
|
|
11870
|
+
handlePageChange = (page) => {
|
|
11274
11871
|
if (page < 1 || page > this.lastPage)
|
|
11275
11872
|
return;
|
|
11276
11873
|
this.currentPage = page;
|
|
11277
11874
|
this.pageChange.emit(page);
|
|
11278
|
-
}
|
|
11279
|
-
handleGroupChange(direction) {
|
|
11875
|
+
};
|
|
11876
|
+
handleGroupChange = (direction) => {
|
|
11280
11877
|
const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
|
|
11281
11878
|
const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
|
|
11282
11879
|
this.handlePageChange(newPage);
|
|
11283
|
-
}
|
|
11284
|
-
|
|
11285
|
-
return
|
|
11286
|
-
}
|
|
11287
|
-
get isLastGroup() {
|
|
11288
|
-
const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
11289
|
-
return startPageGroup + PER_PAGE - 1 >= this.lastPage;
|
|
11880
|
+
};
|
|
11881
|
+
renderNavButton(iconName, ariaLabel, onClick) {
|
|
11882
|
+
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 })));
|
|
11290
11883
|
}
|
|
11291
11884
|
renderPrevButtons() {
|
|
11292
11885
|
if (this.simple) {
|
|
11293
11886
|
if (this.currentPage <= 1)
|
|
11294
11887
|
return null;
|
|
11295
|
-
return (hAsync(Fragment, null,
|
|
11296
|
-
}
|
|
11297
|
-
if (!this.isFirstGroup) {
|
|
11298
|
-
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" }))));
|
|
11888
|
+
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))));
|
|
11299
11889
|
}
|
|
11890
|
+
if (this.isFirstGroup)
|
|
11891
|
+
return null;
|
|
11892
|
+
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'))));
|
|
11300
11893
|
}
|
|
11301
11894
|
renderNextButtons() {
|
|
11302
11895
|
if (this.simple) {
|
|
11303
11896
|
if (this.currentPage >= this.lastPage)
|
|
11304
11897
|
return null;
|
|
11305
|
-
return (hAsync(Fragment, null,
|
|
11306
|
-
}
|
|
11307
|
-
if (!this.isLastGroup) {
|
|
11308
|
-
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" }))));
|
|
11898
|
+
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))));
|
|
11309
11899
|
}
|
|
11900
|
+
if (this.isLastGroup)
|
|
11901
|
+
return null;
|
|
11902
|
+
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))));
|
|
11310
11903
|
}
|
|
11311
11904
|
render() {
|
|
11312
|
-
|
|
11313
|
-
|
|
11314
|
-
|
|
11315
|
-
|
|
11316
|
-
|
|
11317
|
-
|
|
11905
|
+
const cssVars = {
|
|
11906
|
+
'--sd-pagination-height': PAGINATION_LAYOUT.height,
|
|
11907
|
+
'--sd-pagination-padding-x': PAGINATION_LAYOUT.paddingX,
|
|
11908
|
+
'--sd-pagination-radius': PAGINATION_LAYOUT.radius,
|
|
11909
|
+
'--sd-pagination-gap': PAGINATION_LAYOUT.gap,
|
|
11910
|
+
'--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
|
|
11911
|
+
'--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
|
|
11912
|
+
'--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
|
|
11913
|
+
'--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
|
|
11914
|
+
'--sd-pagination-font-weight-default': PAGINATION_TYPOGRAPHY.fontWeightDefault,
|
|
11915
|
+
'--sd-pagination-font-weight-selected': PAGINATION_TYPOGRAPHY.fontWeightSelected,
|
|
11916
|
+
'--sd-pagination-content': PAGINATION_COLORS.contentDefault,
|
|
11917
|
+
'--sd-pagination-content-hover': PAGINATION_COLORS.contentHover,
|
|
11918
|
+
'--sd-pagination-content-selected': PAGINATION_COLORS.contentSelected,
|
|
11919
|
+
'--sd-pagination-bg-hover': PAGINATION_COLORS.bgHover,
|
|
11920
|
+
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
11921
|
+
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
11922
|
+
};
|
|
11923
|
+
return (hAsync("div", { key: '1f6d3909c5c7f17701c405f058bf999020d9424e', class: {
|
|
11924
|
+
'sd-pagination': true,
|
|
11925
|
+
'sd-pagination--simple': this.simple,
|
|
11926
|
+
}, 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: {
|
|
11927
|
+
'sd-pagination__item': true,
|
|
11928
|
+
'sd-pagination__item--selected': this.currentPage === n,
|
|
11929
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'c8d21679938032bee223f6dfefff3a87dc5badec', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
11318
11930
|
}
|
|
11319
11931
|
static get style() { return sdPaginationCss(); }
|
|
11320
11932
|
static get cmpMeta() { return {
|
|
@@ -11386,14 +11998,14 @@ class SdPopover {
|
|
|
11386
11998
|
this.showPopover = false;
|
|
11387
11999
|
};
|
|
11388
12000
|
render() {
|
|
11389
|
-
return (hAsync(Fragment, { key: '
|
|
12001
|
+
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: {
|
|
11390
12002
|
'sd-floating-menu': true,
|
|
11391
12003
|
'sd-floating-menu--popover': true,
|
|
11392
12004
|
[`sd-floating-menu--${this.placement}`]: true,
|
|
11393
12005
|
[this.menuClass]: !!this.menuClass,
|
|
11394
12006
|
}, style: {
|
|
11395
12007
|
'--sd-floating-bg': popoverTokens.popover.bg,
|
|
11396
|
-
} }, hAsync("i", { key: '
|
|
12008
|
+
} }, 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() })))))));
|
|
11397
12009
|
}
|
|
11398
12010
|
static get watchers() { return {
|
|
11399
12011
|
"show": [{
|
|
@@ -11438,7 +12050,7 @@ class SdPortal {
|
|
|
11438
12050
|
parentRef = null;
|
|
11439
12051
|
offset = [0, 4];
|
|
11440
12052
|
viewportPadding = 0;
|
|
11441
|
-
zIndex =
|
|
12053
|
+
zIndex = 998;
|
|
11442
12054
|
open = false;
|
|
11443
12055
|
close;
|
|
11444
12056
|
container;
|
|
@@ -11484,7 +12096,7 @@ class SdPortal {
|
|
|
11484
12096
|
position: 'absolute',
|
|
11485
12097
|
top: '0',
|
|
11486
12098
|
left: '0',
|
|
11487
|
-
zIndex: (this.zIndex ??
|
|
12099
|
+
zIndex: (this.zIndex ?? 998).toString(),
|
|
11488
12100
|
opacity: '0',
|
|
11489
12101
|
transition: 'opacity 0.15s ease-out',
|
|
11490
12102
|
boxSizing: 'border-box',
|
|
@@ -11653,7 +12265,7 @@ class SdPortal {
|
|
|
11653
12265
|
this.close.emit();
|
|
11654
12266
|
}
|
|
11655
12267
|
render() {
|
|
11656
|
-
return hAsync("slot", { key: '
|
|
12268
|
+
return hAsync("slot", { key: '394cce939280a171c13e875eaead3fbdd0163d5b' });
|
|
11657
12269
|
}
|
|
11658
12270
|
static get watchers() { return {
|
|
11659
12271
|
"open": [{
|
|
@@ -11716,10 +12328,10 @@ class SdProgress {
|
|
|
11716
12328
|
return this.statusColor[this.progressStatus];
|
|
11717
12329
|
}
|
|
11718
12330
|
render() {
|
|
11719
|
-
return (hAsync("div", { key: '
|
|
12331
|
+
return (hAsync("div", { key: 'b1c93dc549893b5a3ccef1ab9cea54ca8c9d8d44', style: {
|
|
11720
12332
|
'--progress-color': this.progressColor,
|
|
11721
12333
|
'--progress-percentage': `${this.progressPercentage}%`,
|
|
11722
|
-
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '
|
|
12334
|
+
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '843cb8d0994831da375d26f0421d98dddb068128', class: "sd-progress__label" }, this.label)));
|
|
11723
12335
|
}
|
|
11724
12336
|
renderBarProgress() {
|
|
11725
12337
|
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, "%")));
|
|
@@ -11866,7 +12478,7 @@ class SdRadio {
|
|
|
11866
12478
|
'--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
|
|
11867
12479
|
'--sd-radio-label-color': RADIO_COLORS.label,
|
|
11868
12480
|
};
|
|
11869
|
-
return (hAsync("label", { key: '
|
|
12481
|
+
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)));
|
|
11870
12482
|
}
|
|
11871
12483
|
static get watchers() { return {
|
|
11872
12484
|
"value": [{
|
|
@@ -12057,7 +12669,7 @@ class SdRadioButton {
|
|
|
12057
12669
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
12058
12670
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
12059
12671
|
};
|
|
12060
|
-
return (hAsync("div", { key: '
|
|
12672
|
+
return (hAsync("div", { key: 'f4ac83797b2661b0c2a612674911cbb0e41350a6', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
12061
12673
|
const isSelected = this.isOptionSelected(option);
|
|
12062
12674
|
const isDisabled = this.isOptionDisabled(option);
|
|
12063
12675
|
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)));
|
|
@@ -12109,7 +12721,7 @@ class SdRadioGroup {
|
|
|
12109
12721
|
return classes.join(' ');
|
|
12110
12722
|
}
|
|
12111
12723
|
render() {
|
|
12112
|
-
return (hAsync("div", { key: '
|
|
12724
|
+
return (hAsync("div", { key: '8b01aca15ce9452921f37ba648d2d47728b84f41', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
|
|
12113
12725
|
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) }));
|
|
12114
12726
|
})));
|
|
12115
12727
|
}
|
|
@@ -12304,7 +12916,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
12304
12916
|
}
|
|
12305
12917
|
};
|
|
12306
12918
|
render() {
|
|
12307
|
-
return (hAsync("sd-field", { key: '
|
|
12919
|
+
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: {
|
|
12308
12920
|
'sd-select': true,
|
|
12309
12921
|
'sd-select--disabled': this.disabled,
|
|
12310
12922
|
'sd-select--error': !!this.error,
|
|
@@ -12523,10 +13135,10 @@ class SdSelectDropdown {
|
|
|
12523
13135
|
this.isScrolled = scrollTop > 0;
|
|
12524
13136
|
};
|
|
12525
13137
|
render() {
|
|
12526
|
-
return (hAsync("div", { key: '
|
|
13138
|
+
return (hAsync("div", { key: '4d593edbf6e4480e171963aad54ceb2f489f189b', class: {
|
|
12527
13139
|
'sd-select-dropdown': true,
|
|
12528
13140
|
'sd-select-dropdown--ready': this.isDropdownReady,
|
|
12529
|
-
}, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '
|
|
13141
|
+
}, 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)))));
|
|
12530
13142
|
}
|
|
12531
13143
|
static get watchers() { return {
|
|
12532
13144
|
"filteredOptions": [{
|
|
@@ -12838,7 +13450,7 @@ class SdSelectGroup extends BaseDropdownEvent {
|
|
|
12838
13450
|
});
|
|
12839
13451
|
}
|
|
12840
13452
|
render() {
|
|
12841
|
-
return (hAsync("sd-field", { key: '
|
|
13453
|
+
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: {
|
|
12842
13454
|
'sd-select-group': true,
|
|
12843
13455
|
'sd-select-group--open': this.isOpen,
|
|
12844
13456
|
'sd-select-group--disabled': this.disabled,
|
|
@@ -13088,7 +13700,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
|
|
|
13088
13700
|
this.handleOptionSelection(option);
|
|
13089
13701
|
};
|
|
13090
13702
|
render() {
|
|
13091
|
-
return (hAsync("sd-field", { key: '
|
|
13703
|
+
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: {
|
|
13092
13704
|
'sd-select-multiple': true,
|
|
13093
13705
|
'sd-select-multiple--open': this.isOpen,
|
|
13094
13706
|
'sd-select-multiple--disabled': this.disabled,
|
|
@@ -13553,7 +14165,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
|
|
|
13553
14165
|
});
|
|
13554
14166
|
}
|
|
13555
14167
|
render() {
|
|
13556
|
-
return (hAsync("sd-field", { key: '
|
|
14168
|
+
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: {
|
|
13557
14169
|
'sd-select-multiple-group': true,
|
|
13558
14170
|
'sd-select-multiple-group--open': this.isOpen,
|
|
13559
14171
|
'sd-select-multiple-group--disabled': this.disabled,
|
|
@@ -13687,7 +14299,7 @@ class SdSelectOption {
|
|
|
13687
14299
|
}
|
|
13688
14300
|
};
|
|
13689
14301
|
render() {
|
|
13690
|
-
return (hAsync("div", { key: '
|
|
14302
|
+
return (hAsync("div", { key: '02e314232067bfb8f9bd882c01ae1462fa492cbf', class: {
|
|
13691
14303
|
'sd-select__option': true,
|
|
13692
14304
|
'sd-select__option--selected': this.isSelected,
|
|
13693
14305
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -13773,7 +14385,7 @@ class SdSelectOptionGroup {
|
|
|
13773
14385
|
}
|
|
13774
14386
|
};
|
|
13775
14387
|
render() {
|
|
13776
|
-
return (hAsync("div", { key: '
|
|
14388
|
+
return (hAsync("div", { key: '748c32883a0262612daf9bafc0617563c77254f8', class: {
|
|
13777
14389
|
'sd-select__option-group': true,
|
|
13778
14390
|
'sd-select__option-group--selected': !!this.isSelected,
|
|
13779
14391
|
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
@@ -13782,10 +14394,10 @@ class SdSelectOptionGroup {
|
|
|
13782
14394
|
'sd-select__option-group--group': this.option.type === 'group',
|
|
13783
14395
|
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
13784
14396
|
'sd-select__option-group--item': this.option.type === 'item',
|
|
13785
|
-
}, 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: '
|
|
14397
|
+
}, 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 => {
|
|
13786
14398
|
e.preventDefault();
|
|
13787
14399
|
this.handleClick(this.option, this.isSelected, e);
|
|
13788
|
-
} })), hAsync("span", { key: '
|
|
14400
|
+
} })), 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})`)))));
|
|
13789
14401
|
}
|
|
13790
14402
|
static get style() { return sdSelectOptionGroupCss(); }
|
|
13791
14403
|
static get cmpMeta() { return {
|
|
@@ -13834,17 +14446,17 @@ class SdSelectSearchInput {
|
|
|
13834
14446
|
input?.focus({ preventScroll: true });
|
|
13835
14447
|
}
|
|
13836
14448
|
render() {
|
|
13837
|
-
return (hAsync("div", { key: '
|
|
14449
|
+
return (hAsync("div", { key: '2629fd8c13f67bc89c3b66f5f8aa14f2fb2e5fcd', class: {
|
|
13838
14450
|
'sd-select-search-input': true,
|
|
13839
14451
|
'sd-select-search-input--scrolled': !!this.isScrolled,
|
|
13840
|
-
}, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '
|
|
14452
|
+
}, 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 => {
|
|
13841
14453
|
this.searchInput.emit(String(event?.detail));
|
|
13842
14454
|
}, onSdFocus: () => {
|
|
13843
14455
|
this.searchFocus.emit();
|
|
13844
14456
|
}, onKeyDown: event => {
|
|
13845
14457
|
if (event.code === 'Enter')
|
|
13846
14458
|
event.stopPropagation();
|
|
13847
|
-
} }, hAsync("sd-icon", { key: '
|
|
14459
|
+
} }, hAsync("sd-icon", { key: '773f5638821c73c20435f747c3dea5b6684b89eb', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
|
|
13848
14460
|
}
|
|
13849
14461
|
static get style() { return sdSelectSearchInputCss(); }
|
|
13850
14462
|
static get cmpMeta() { return {
|
|
@@ -14076,13 +14688,13 @@ class SdSelectV2 {
|
|
|
14076
14688
|
this.closeDropdown();
|
|
14077
14689
|
},
|
|
14078
14690
|
};
|
|
14079
|
-
return (hAsync("sd-field", { key: '
|
|
14691
|
+
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: () => {
|
|
14080
14692
|
this.hovered = true;
|
|
14081
14693
|
}, onMouseLeave: () => {
|
|
14082
14694
|
this.hovered = false;
|
|
14083
|
-
} }, hAsync("div", { key: '
|
|
14695
|
+
} }, hAsync("div", { key: 'f53f38543b165040eb48236e2a25e43b78444350', class: "sd-select-v2", ref: el => {
|
|
14084
14696
|
this.triggerRef = el;
|
|
14085
|
-
} }, hAsync("sd-select-v2-trigger", { key: '
|
|
14697
|
+
} }, 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) })))));
|
|
14086
14698
|
}
|
|
14087
14699
|
static get watchers() { return {
|
|
14088
14700
|
"isOpen": [{
|
|
@@ -14190,9 +14802,7 @@ var listItemTokens = {
|
|
|
14190
14802
|
};
|
|
14191
14803
|
|
|
14192
14804
|
const listBox = {
|
|
14193
|
-
radius: "4"
|
|
14194
|
-
paddingBottom: "4"
|
|
14195
|
-
};
|
|
14805
|
+
radius: "4"};
|
|
14196
14806
|
var listBoxTokens = {
|
|
14197
14807
|
listBox: listBox
|
|
14198
14808
|
};
|
|
@@ -14255,7 +14865,6 @@ const LIST_ITEM_COLORS = {
|
|
|
14255
14865
|
// ── ListBox Tokens ──
|
|
14256
14866
|
const LIST_BOX_LAYOUT = {
|
|
14257
14867
|
radius: listBoxTokens.listBox.radius,
|
|
14258
|
-
paddingBottom: listBoxTokens.listBox.paddingBottom,
|
|
14259
14868
|
};
|
|
14260
14869
|
// ── Constants ──
|
|
14261
14870
|
const SEARCH_THRESHOLD = 11;
|
|
@@ -14367,7 +14976,7 @@ class SdSelectV2ListItem {
|
|
|
14367
14976
|
if (isDepth1Group) {
|
|
14368
14977
|
cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
|
|
14369
14978
|
}
|
|
14370
|
-
return (hAsync("div", { key: '
|
|
14979
|
+
return (hAsync("div", { key: 'ad8ea94f02d9e114915e4115237aed32d89e93d9', class: {
|
|
14371
14980
|
'sd-select-v2-list-item': true,
|
|
14372
14981
|
'sd-select-v2-list-item--group': isGroup,
|
|
14373
14982
|
'sd-select-v2-list-item--depth1-group': isDepth1Group,
|
|
@@ -14377,7 +14986,7 @@ class SdSelectV2ListItem {
|
|
|
14377
14986
|
'sd-select-v2-list-item--focused': this.isFocused,
|
|
14378
14987
|
'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
14379
14988
|
'sd-select-v2-list-item--disabled': !!this.option.disabled,
|
|
14380
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
14989
|
+
}, 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, ")"))));
|
|
14381
14990
|
}
|
|
14382
14991
|
static get style() { return sdSelectV2ListItemCss(); }
|
|
14383
14992
|
static get cmpMeta() { return {
|
|
@@ -14445,15 +15054,15 @@ class SdSelectV2ListItemSearch {
|
|
|
14445
15054
|
clearTimeout(this.debounceTimer);
|
|
14446
15055
|
}
|
|
14447
15056
|
render() {
|
|
14448
|
-
return (hAsync("div", { key: '
|
|
15057
|
+
return (hAsync("div", { key: '77b7f0742212b03108d5da3a1384766bc58da3ce', class: {
|
|
14449
15058
|
'sd-select-v2-list-item-search': true,
|
|
14450
15059
|
'sd-select-v2-list-item-search--scrolled': this.isScrolled,
|
|
14451
|
-
} }, hAsync("div", { key: '
|
|
15060
|
+
} }, 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 => {
|
|
14452
15061
|
this.inputEl = el;
|
|
14453
|
-
}, 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: '
|
|
15062
|
+
}, 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: {
|
|
14454
15063
|
'sd-select-v2-list-item-search__clear': true,
|
|
14455
15064
|
'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
|
|
14456
|
-
}, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, hAsync("sd-icon", { key: '
|
|
15065
|
+
}, 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" })))));
|
|
14457
15066
|
}
|
|
14458
15067
|
static get style() { return sdSelectV2ListItemSearchCss(); }
|
|
14459
15068
|
static get cmpMeta() { return {
|
|
@@ -14470,7 +15079,7 @@ class SdSelectV2ListItemSearch {
|
|
|
14470
15079
|
}; }
|
|
14471
15080
|
}
|
|
14472
15081
|
|
|
14473
|
-
const sdSelectV2ListboxCss = () =>
|
|
15082
|
+
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}`;
|
|
14474
15083
|
|
|
14475
15084
|
class SdSelectV2Listbox {
|
|
14476
15085
|
constructor(hostRef) {
|
|
@@ -14757,9 +15366,8 @@ class SdSelectV2Listbox {
|
|
|
14757
15366
|
'--listbox-max-width': this.maxWidth,
|
|
14758
15367
|
'--listbox-max-height': this.maxHeight,
|
|
14759
15368
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
14760
|
-
'--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
|
|
14761
15369
|
};
|
|
14762
|
-
return (hAsync("div", { key: '
|
|
15370
|
+
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 => {
|
|
14763
15371
|
this.listEl = el;
|
|
14764
15372
|
} }, 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) })))))));
|
|
14765
15373
|
}
|
|
@@ -14770,7 +15378,7 @@ class SdSelectV2Listbox {
|
|
|
14770
15378
|
}; }
|
|
14771
15379
|
static get style() { return sdSelectV2ListboxCss(); }
|
|
14772
15380
|
static get cmpMeta() { return {
|
|
14773
|
-
"$flags$":
|
|
15381
|
+
"$flags$": 521,
|
|
14774
15382
|
"$tagName$": "sd-select-v2-listbox",
|
|
14775
15383
|
"$members$": {
|
|
14776
15384
|
"name": [1],
|
|
@@ -14824,11 +15432,11 @@ class SdSelectV2Trigger {
|
|
|
14824
15432
|
? SELECT_COLORS.icon.disabled
|
|
14825
15433
|
: SELECT_COLORS.icon.default,
|
|
14826
15434
|
};
|
|
14827
|
-
return (hAsync("div", { key: '
|
|
15435
|
+
return (hAsync("div", { key: '4b3f60a4bd00423337ebd472a628bc67f0a5d55c', class: {
|
|
14828
15436
|
'sd-select-v2-trigger': true,
|
|
14829
15437
|
'sd-select-v2-trigger--open': this.isOpen,
|
|
14830
15438
|
'sd-select-v2-trigger--disabled': this.disabled,
|
|
14831
|
-
}, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: '
|
|
15439
|
+
}, 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: {
|
|
14832
15440
|
'sd-select-v2-trigger__icon': true,
|
|
14833
15441
|
'sd-select-v2-trigger__icon--open': this.isOpen,
|
|
14834
15442
|
} }))));
|
|
@@ -14949,7 +15557,7 @@ class SdSwitch {
|
|
|
14949
15557
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
14950
15558
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
14951
15559
|
};
|
|
14952
|
-
return (hAsync("label", { key: '
|
|
15560
|
+
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)));
|
|
14953
15561
|
}
|
|
14954
15562
|
static get style() { return sdSwitchCss(); }
|
|
14955
15563
|
static get cmpMeta() { return {
|
|
@@ -15497,24 +16105,24 @@ class SdTable {
|
|
|
15497
16105
|
}
|
|
15498
16106
|
render() {
|
|
15499
16107
|
const resolvedTableId = this.getResolvedTableId();
|
|
15500
|
-
return (hAsync(Host, { key: '
|
|
16108
|
+
return (hAsync(Host, { key: 'd2a43d075579bf4ffc53949fb074afaf9987113d' }, hAsync("div", { key: '3e6b69b3ab38281c1763ab779d66b0916b2cb295', class: "sd-table__container", style: {
|
|
15501
16109
|
'--table-width': this.width,
|
|
15502
16110
|
'--table-height': this.height,
|
|
15503
16111
|
'--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
|
|
15504
|
-
} }, hAsync("div", { key: '
|
|
16112
|
+
} }, hAsync("div", { key: '60ac7f5d53cdfbb0225dd3ed57be4788e6b7ff2b', class: {
|
|
15505
16113
|
'sd-table__clip': true,
|
|
15506
16114
|
'sd-table__clip--has-pagination': !!(this.pagination &&
|
|
15507
16115
|
this.pagination.rowsPerPage > 0 &&
|
|
15508
16116
|
this.rowCount > 0 &&
|
|
15509
16117
|
!this.useVirtualScroll),
|
|
15510
|
-
} }, hAsync("div", { key: '
|
|
16118
|
+
} }, hAsync("div", { key: 'ea4144995650e283bf62de067fe792e1b7d90eb1', class: {
|
|
15511
16119
|
'sd-table__wrapper': true,
|
|
15512
16120
|
'sd-table__wrapper--loading': this.isLoading,
|
|
15513
16121
|
'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
|
|
15514
|
-
} }, this.isLoading && (hAsync("div", { key: '
|
|
16122
|
+
} }, 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 &&
|
|
15515
16123
|
this.pagination.rowsPerPage > 0 &&
|
|
15516
16124
|
this.rowCount > 0 &&
|
|
15517
|
-
!this.useVirtualScroll && (hAsync("div", { key: '
|
|
16125
|
+
!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
|
|
15518
16126
|
? this.innerRowsPerPage
|
|
15519
16127
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
15520
16128
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -15655,7 +16263,7 @@ class SdTabs {
|
|
|
15655
16263
|
return `square_xs_${color}`;
|
|
15656
16264
|
}
|
|
15657
16265
|
render() {
|
|
15658
|
-
return (hAsync("div", { key: '
|
|
16266
|
+
return (hAsync("div", { key: '62ace36515932f8889fc35121b6a8cf98fd9a314', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
|
|
15659
16267
|
const badgeName = this.getBadgeName(tab);
|
|
15660
16268
|
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() })));
|
|
15661
16269
|
})));
|
|
@@ -15851,7 +16459,7 @@ class SdTag {
|
|
|
15851
16459
|
render() {
|
|
15852
16460
|
const config = this.resolvedConfig;
|
|
15853
16461
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
15854
|
-
return (hAsync("span", { key: '
|
|
16462
|
+
return (hAsync("span", { key: '3e3bf735f8d832e75f1061eac69ccd8972b9f40f', class: "sd-tag", style: {
|
|
15855
16463
|
'--sd-tag-background': config.background,
|
|
15856
16464
|
'--sd-tag-content': config.content,
|
|
15857
16465
|
'--sd-tag-height': config.height,
|
|
@@ -15861,7 +16469,7 @@ class SdTag {
|
|
|
15861
16469
|
'--sd-tag-font-weight': config.fontWeight,
|
|
15862
16470
|
'--sd-tag-line-height': config.lineHeight,
|
|
15863
16471
|
'--sd-tag-radius': config.radius,
|
|
15864
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
16472
|
+
}, "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));
|
|
15865
16473
|
}
|
|
15866
16474
|
static get style() { return sdTagCss(); }
|
|
15867
16475
|
static get cmpMeta() { return {
|
|
@@ -15925,7 +16533,7 @@ class SdTbody {
|
|
|
15925
16533
|
}
|
|
15926
16534
|
render() {
|
|
15927
16535
|
const hasRows = this.rows.length > 0;
|
|
15928
|
-
return (hAsync(Host, { key: '
|
|
16536
|
+
return (hAsync(Host, { key: '82a437ddf0cb3c34877b9dbcb47b5406c20a0c0e', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '0f0257720491c781eda0479fb0c08d7dffc4f734', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
|
|
15929
16537
|
this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
15930
16538
|
hAsync("slot", null),
|
|
15931
16539
|
this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
@@ -15989,7 +16597,7 @@ class SdTd {
|
|
|
15989
16597
|
}
|
|
15990
16598
|
}
|
|
15991
16599
|
render() {
|
|
15992
|
-
return (hAsync(Host, { key: '
|
|
16600
|
+
return (hAsync(Host, { key: 'c6ddb546268b573694b827509ebdfe74fff8a15a', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '0b59fb8a0cfa1ef628f50496af96aa2f39fdc89a' })));
|
|
15993
16601
|
}
|
|
15994
16602
|
static get watchers() { return {
|
|
15995
16603
|
"field": [{
|
|
@@ -16085,16 +16693,16 @@ class SdTextLink {
|
|
|
16085
16693
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
16086
16694
|
...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
|
|
16087
16695
|
};
|
|
16088
|
-
return (hAsync("span", { key: '
|
|
16696
|
+
return (hAsync("span", { key: 'c485091d0a9d7f8aa946ac54d96baab50bcaa3c7', class: {
|
|
16089
16697
|
'sd-text-link': true,
|
|
16090
16698
|
'sd-text-link--disabled': this.disabled,
|
|
16091
|
-
}, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '
|
|
16699
|
+
}, 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: {
|
|
16092
16700
|
width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
|
|
16093
16701
|
height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
|
|
16094
16702
|
display: 'inline-flex',
|
|
16095
16703
|
alignItems: 'center',
|
|
16096
16704
|
justifyContent: 'center',
|
|
16097
|
-
} }, hAsync("sd-icon", { key: '
|
|
16705
|
+
} }, hAsync("sd-icon", { key: 'fee7c74359e683829ad3fa802191b651aa9e94da', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
|
|
16098
16706
|
}
|
|
16099
16707
|
static get style() { return sdTextLinkCss(); }
|
|
16100
16708
|
static get cmpMeta() { return {
|
|
@@ -16240,7 +16848,7 @@ class SdTextarea {
|
|
|
16240
16848
|
'--sd-system-size-field-sm-height': 'auto',
|
|
16241
16849
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
16242
16850
|
};
|
|
16243
|
-
return (hAsync("sd-field", { key: '
|
|
16851
|
+
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 }))));
|
|
16244
16852
|
}
|
|
16245
16853
|
static get watchers() { return {
|
|
16246
16854
|
"value": [{
|
|
@@ -16425,16 +17033,16 @@ class SdThead {
|
|
|
16425
17033
|
const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
|
|
16426
17034
|
const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
16427
17035
|
const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
|
|
16428
|
-
return (hAsync(Host, { key: '
|
|
17036
|
+
return (hAsync(Host, { key: '97badde9634e2e7363eace5a402fc49a587459c3', slot: `${this.tableId}-head` }, hAsync("thead", { key: 'd1ce731f6082679d8d61f4b74ac122f28f344909', class: {
|
|
16429
17037
|
'thead': true,
|
|
16430
17038
|
'thead--sticky': this._stickyHeader,
|
|
16431
|
-
} }, hAsync("tr", { key: '
|
|
17039
|
+
} }, hAsync("tr", { key: 'd0f8b1e8b8a7174cc9b39fabf782eddf2e2accaa', class: "tr" }, this._selectable && (hAsync("th", { key: 'c422f5bd9f9a045785d2d91dd9e2dee6e8f91185', class: {
|
|
16432
17040
|
'th': true,
|
|
16433
17041
|
'th--selected': true,
|
|
16434
17042
|
'sticky-left': true,
|
|
16435
17043
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
16436
17044
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
16437
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
17045
|
+
}, 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: {
|
|
16438
17046
|
'th': true,
|
|
16439
17047
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
16440
17048
|
'sticky-left': true,
|
|
@@ -16549,10 +17157,10 @@ class SdToast {
|
|
|
16549
17157
|
render() {
|
|
16550
17158
|
const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
|
|
16551
17159
|
const iconSize = Number(TOAST_LAYOUT.iconSize);
|
|
16552
|
-
return (hAsync("div", { key: '
|
|
17160
|
+
return (hAsync("div", { key: 'a041d5561d09ef56f4afd722e141b0a2e3a9453f', style: {
|
|
16553
17161
|
'--sd-toast-bg': typeConfig.bg,
|
|
16554
17162
|
'--sd-toast-text': typeConfig.content,
|
|
16555
|
-
} }, hAsync("div", { key: '
|
|
17163
|
+
} }, 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() })))));
|
|
16556
17164
|
}
|
|
16557
17165
|
static get style() { return sdToastCss(); }
|
|
16558
17166
|
static get cmpMeta() { return {
|
|
@@ -16575,7 +17183,7 @@ class SdToast {
|
|
|
16575
17183
|
const DEFAULT_DURATION = 4000;
|
|
16576
17184
|
const DEFAULT_MAX_VISIBLE = 3;
|
|
16577
17185
|
const DEFAULT_GAP = 8;
|
|
16578
|
-
const DEFAULT_Z_INDEX =
|
|
17186
|
+
const DEFAULT_Z_INDEX = 999;
|
|
16579
17187
|
const TRANSITION_DURATION = 400;
|
|
16580
17188
|
const TRANSITION_FALLBACK_BUFFER = 100;
|
|
16581
17189
|
const COLLAPSED_SCALE_STEP = 0.05;
|
|
@@ -16804,7 +17412,7 @@ class SdToastContainer {
|
|
|
16804
17412
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
16805
17413
|
const indexMap = new Map();
|
|
16806
17414
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
16807
|
-
return (hAsync("div", { key: '
|
|
17415
|
+
return (hAsync("div", { key: '4660dd2f2626d391bbcca7da59e16e6c4204d80d', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
16808
17416
|
this.expanded = true;
|
|
16809
17417
|
this.pauseTimers();
|
|
16810
17418
|
}, onMouseLeave: () => {
|
|
@@ -16962,7 +17570,7 @@ class SdToggle {
|
|
|
16962
17570
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
16963
17571
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
16964
17572
|
};
|
|
16965
|
-
return (hAsync("label", { key: '
|
|
17573
|
+
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 })));
|
|
16966
17574
|
}
|
|
16967
17575
|
static get style() { return sdToggleCss(); }
|
|
16968
17576
|
static get cmpMeta() { return {
|
|
@@ -17089,14 +17697,14 @@ class SdTooltip {
|
|
|
17089
17697
|
const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
|
|
17090
17698
|
const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
|
|
17091
17699
|
const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
|
|
17092
|
-
return (hAsync(Fragment, { key: '
|
|
17700
|
+
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: {
|
|
17093
17701
|
'sd-floating-menu': true,
|
|
17094
17702
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
17095
17703
|
[`sd-floating-menu--${placement}`]: true,
|
|
17096
17704
|
}, style: {
|
|
17097
17705
|
'--sd-floating-bg': typeConfig.bg,
|
|
17098
17706
|
'--sd-floating-content': typeConfig.content,
|
|
17099
|
-
}, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '
|
|
17707
|
+
}, 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 }))))));
|
|
17100
17708
|
}
|
|
17101
17709
|
static get style() { return sdTooltipCss(); }
|
|
17102
17710
|
static get cmpMeta() { return {
|
|
@@ -17251,13 +17859,13 @@ class SdTr {
|
|
|
17251
17859
|
const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
|
|
17252
17860
|
const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
17253
17861
|
const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
|
|
17254
|
-
return (hAsync(Host, { key: '
|
|
17862
|
+
return (hAsync(Host, { key: '3bc910f3afa801d7824eee2e73456ef152c7dc93', style: { display: this.isVisible ? '' : 'none' } }, hAsync("tr", { key: '93b1f4113ae63aa1c0cf79addaa9e8d15c9e8287', class: "tr" }, this._selectable && (hAsync("td", { key: '0caba47c216126f4b7407dfe26afb9f0c75f6450', class: {
|
|
17255
17863
|
'td': true,
|
|
17256
17864
|
'td--selected': true,
|
|
17257
17865
|
'sticky-left': true,
|
|
17258
17866
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
17259
17867
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
17260
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
17868
|
+
}, 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: {
|
|
17261
17869
|
'td': true,
|
|
17262
17870
|
[`td--${col.align || 'left'}`]: true,
|
|
17263
17871
|
'sticky-left': true,
|
|
@@ -17324,6 +17932,7 @@ registerComponents([
|
|
|
17324
17932
|
SdCalendar,
|
|
17325
17933
|
SdCard,
|
|
17326
17934
|
SdCheckbox,
|
|
17935
|
+
SdChip,
|
|
17327
17936
|
SdCircleProgress,
|
|
17328
17937
|
SdConfirmModal,
|
|
17329
17938
|
SdDateBox,
|