@sellmate/design-system 1.0.40 → 1.0.41
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-43trvZ5m.js +41 -0
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/index.cjs.js +0 -9
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-barcode-input.cjs.entry.js +162 -0
- package/dist/cjs/sd-button-v2_2.cjs.entry.js +4 -4
- package/dist/cjs/sd-button_20.cjs.entry.js +36 -69
- package/dist/cjs/sd-card.cjs.entry.js +1 -1
- package/dist/cjs/sd-confirm-modal.cjs.entry.js +124 -0
- package/dist/cjs/sd-date-picker.cjs.entry.js +1 -1
- package/dist/cjs/sd-dropdown-button.cjs.entry.js +3 -3
- package/dist/cjs/sd-file-picker.cjs.entry.js +3 -3
- package/dist/cjs/sd-guide.cjs.entry.js +2 -2
- package/dist/cjs/sd-modal-container.cjs.entry.js +0 -64
- package/dist/cjs/sd-popover.cjs.entry.js +2 -2
- package/dist/cjs/sd-progress.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-group.cjs.entry.js +1 -1
- package/dist/cjs/sd-select-multiple.cjs.entry.js +1 -1
- package/dist/cjs/sd-select-option-group.cjs.entry.js +3 -3
- package/dist/cjs/sd-select-v2-list-item_2.cjs.entry.js +7 -16
- package/dist/cjs/sd-select-v2-listbox_2.cjs.entry.js +181 -14
- package/dist/cjs/sd-select-v2.cjs.entry.js +13 -21
- package/dist/cjs/{sd-select-v2.config-DZrPJ6OS.js → sd-select-v2.config-BJXi4hMP.js} +12 -7
- package/dist/cjs/sd-text-link.cjs.entry.js +3 -3
- package/dist/cjs/sd-toast-container.cjs.entry.js +1 -1
- package/dist/cjs/sd-toast.cjs.entry.js +2 -2
- package/dist/cjs/sd-toggle-button.cjs.entry.js +1 -1
- package/dist/cjs/sd-toggle.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/sd-barcode-input/sd-barcode-input.config.js +34 -0
- package/dist/collection/components/sd-barcode-input/sd-barcode-input.css +72 -0
- package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +750 -0
- 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-confirm-modal/sd-confirm-modal.config.js +4 -1
- package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.css +17 -17
- package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +4 -4
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +1 -1
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +4 -4
- package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js +3 -3
- package/dist/collection/components/sd-field/sd-field.js +4 -3
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +3 -3
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
- package/dist/collection/components/sd-guide/sd-guide.js +2 -2
- package/dist/collection/components/sd-icon/sd-icon.js +1 -1
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
- package/dist/collection/components/sd-modal-container/sd-modal-container.js +2 -109
- package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-progress/sd-progress.js +2 -2
- 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-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-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.css +6 -6
- 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 +3 -12
- package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.css +1 -0
- package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js +185 -16
- 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 +12 -7
- package/dist/collection/components/sd-select-v2/sd-select-v2.js +13 -21
- 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 +2 -2
- package/dist/collection/components/sd-toast/sd-toast.js +2 -2
- 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-toggle-button/sd-toggle-button.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
- package/dist/collection/utils/modal.js +0 -9
- package/dist/components/index.js +1 -1
- package/dist/components/{p-8oyZJ0FK.js → p-6FZWkn3V.js} +1 -1
- package/dist/components/{p-DBCQtIY4.js → p-BBKrHUCP.js} +1 -1
- package/dist/components/{p-A5atk1St.js → p-BKtAiyh0.js} +1 -1
- package/dist/components/{p-5UN9Ry8A.js → p-BXuZFSsU.js} +1 -1
- package/dist/components/{p-CKi7RueC.js → p-BfqA9RSe.js} +1 -1
- package/dist/components/{p-2JXqy61T.js → p-Bo7U7jA2.js} +1 -1
- package/dist/components/{p-CrYrMUpQ.js → p-C4sDmQQ3.js} +1 -1
- package/dist/components/{p-VztCEgcN.js → p-C7dgr7sG.js} +1 -1
- package/dist/components/{p-PcxVERcm.js → p-CHq9aVFe.js} +1 -1
- package/dist/components/{p-vznqVg6E.js → p-CPr3lzac.js} +1 -1
- package/dist/components/{p-DEBuE-pW.js → p-CV1qJByG.js} +1 -1
- package/dist/components/p-CXjMXCNh.js +1 -0
- package/dist/components/p-CbjDAdZ_.js +1 -0
- package/dist/components/{p-du_AmhYu.js → p-CrJXDjO0.js} +1 -1
- package/dist/components/{p-DtCG-y6d.js → p-Cx2K_zB2.js} +1 -1
- package/dist/components/{p-CJZIwyH-.js → p-D3H3ILJG.js} +1 -1
- package/dist/components/{p-CZN_I4v-.js → p-D6ayf5l7.js} +1 -1
- package/dist/components/p-DGA1KNaL.js +1 -0
- package/dist/components/{p-Ese2dRYD.js → p-DZ8T3piH.js} +1 -1
- package/dist/components/{p-BNNjhCQc.js → p-DgDoP1wQ.js} +1 -1
- package/dist/components/p-DpqpugGF.js +1 -0
- package/dist/components/{p-DPjPJkXv.js → p-DvQzT5XM.js} +1 -1
- package/dist/components/p-Pdmk6q_e.js +1 -0
- package/dist/components/{p-CjZTu6hh.js → p-UaMNiu8y.js} +1 -1
- package/dist/components/p-gHb970iC.js +1 -0
- package/dist/components/p-qbtTff3q.js +1 -0
- package/dist/components/{sd-notice-modal.d.ts → sd-barcode-input.d.ts} +4 -4
- package/dist/components/sd-barcode-input.js +1 -0
- 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-confirm-modal.js +1 -1
- package/dist/components/sd-date-picker.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-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-spinner.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-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-table.js +1 -1
- package/dist/components/sd-tabs.js +1 -1
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-text-link.js +1 -1
- package/dist/components/sd-textarea.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-button.js +1 -1
- package/dist/components/sd-toggle.js +1 -1
- package/dist/components/sd-tooltip.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-0174f3c5.entry.js +1 -0
- package/dist/design-system/{p-8e0cc9be.entry.js → p-0dee408f.entry.js} +1 -1
- package/dist/design-system/p-40614adb.entry.js +1 -0
- package/dist/design-system/{p-fb71301e.entry.js → p-4301b50d.entry.js} +1 -1
- package/dist/design-system/{p-2408d1ab.entry.js → p-50b1196b.entry.js} +1 -1
- package/dist/design-system/{p-7ce76a05.entry.js → p-57b1e335.entry.js} +1 -1
- package/dist/design-system/{p-6a34e6b8.entry.js → p-5ce3142c.entry.js} +1 -1
- package/dist/design-system/{p-d8b04e91.entry.js → p-634797a4.entry.js} +1 -1
- package/dist/design-system/{p-b71d0858.entry.js → p-63a43fc9.entry.js} +1 -1
- package/dist/design-system/{p-72b09ede.entry.js → p-6a371d98.entry.js} +1 -1
- package/dist/design-system/{p-36ba5f33.entry.js → p-7368eb09.entry.js} +1 -1
- package/dist/design-system/p-868ce552.entry.js +1 -0
- package/dist/design-system/p-9eea4660.entry.js +1 -0
- package/dist/design-system/p-CbjDAdZ_.js +1 -0
- package/dist/design-system/p-a3c9d924.entry.js +1 -0
- package/dist/design-system/{p-9933475e.entry.js → p-aaf91535.entry.js} +1 -1
- package/dist/design-system/p-ae3b8832.entry.js +1 -0
- package/dist/design-system/{p-e96c881f.entry.js → p-c1963b5e.entry.js} +1 -1
- package/dist/design-system/p-d63e0f4c.entry.js +1 -0
- package/dist/design-system/{p-63f997d7.entry.js → p-dc6246be.entry.js} +1 -1
- package/dist/design-system/p-e39687d0.entry.js +1 -0
- package/dist/design-system/{p-f9075737.entry.js → p-f9cf0d6f.entry.js} +1 -1
- package/dist/design-system/{p-b79756cc.entry.js → p-fdde3de0.entry.js} +1 -1
- package/dist/design-system/p-feb80c2f.entry.js +1 -0
- package/dist/design-system/{p-BOmBg3kj.js → p-o9Ugc4Ua.js} +1 -1
- package/dist/esm/component.textinput-CbjDAdZ_.js +39 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/index.js +0 -9
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-barcode-input.entry.js +160 -0
- package/dist/esm/sd-button-v2_2.entry.js +4 -4
- package/dist/esm/sd-button_20.entry.js +31 -64
- package/dist/esm/sd-card.entry.js +1 -1
- package/dist/esm/sd-confirm-modal.entry.js +122 -0
- package/dist/esm/sd-date-picker.entry.js +1 -1
- package/dist/esm/sd-dropdown-button.entry.js +3 -3
- package/dist/esm/sd-file-picker.entry.js +3 -3
- package/dist/esm/sd-guide.entry.js +2 -2
- package/dist/esm/sd-modal-container.entry.js +0 -64
- package/dist/esm/sd-popover.entry.js +2 -2
- package/dist/esm/sd-progress.entry.js +2 -2
- package/dist/esm/sd-select-group.entry.js +1 -1
- package/dist/esm/sd-select-multiple.entry.js +1 -1
- package/dist/esm/sd-select-option-group.entry.js +3 -3
- package/dist/esm/sd-select-v2-list-item_2.entry.js +7 -16
- package/dist/esm/sd-select-v2-listbox_2.entry.js +181 -14
- package/dist/esm/{sd-select-v2.config-BOmBg3kj.js → sd-select-v2.config-o9Ugc4Ua.js} +12 -7
- package/dist/esm/sd-select-v2.entry.js +13 -21
- package/dist/esm/sd-text-link.entry.js +3 -3
- package/dist/esm/sd-toast-container.entry.js +1 -1
- package/dist/esm/sd-toast.entry.js +2 -2
- package/dist/esm/sd-toggle-button.entry.js +1 -1
- package/dist/esm/sd-toggle.entry.js +1 -1
- package/dist/types/components/sd-barcode-input/sd-barcode-input.config.d.ts +38 -0
- package/dist/types/components/sd-barcode-input/sd-barcode-input.d.ts +50 -0
- package/dist/types/components/sd-confirm-modal/sd-confirm-modal.config.d.ts +4 -3
- package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +0 -13
- package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +2 -5
- package/dist/types/components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.d.ts +0 -1
- package/dist/types/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.d.ts +44 -2
- package/dist/types/components/sd-select-v2/sd-select-v2.config.d.ts +4 -0
- package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +0 -1
- package/dist/types/components.d.ts +247 -128
- package/dist/types/index.d.ts +1 -1
- package/dist/types/utils/modal.d.ts +3 -4
- package/hydrate/index.js +549 -357
- package/hydrate/index.mjs +549 -357
- package/package.json +1 -1
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +0 -199
- package/dist/collection/components/sd-notice-modal/sd-notice-modal.config.js +0 -3
- package/dist/collection/components/sd-notice-modal/sd-notice-modal.css +0 -61
- package/dist/collection/components/sd-notice-modal/sd-notice-modal.js +0 -324
- package/dist/components/p-BDUKWznE.js +0 -1
- package/dist/components/p-BzfvfP0u.js +0 -1
- package/dist/components/p-C-AFCWLs.js +0 -1
- package/dist/components/p-CN-WKnUJ.js +0 -1
- package/dist/components/p-C_L-UaCP.js +0 -1
- package/dist/components/p-D0PYeSW9.js +0 -1
- package/dist/components/p-DLe_Tu-I.js +0 -1
- package/dist/components/p-H9Vl4enQ.js +0 -1
- package/dist/components/sd-notice-modal.js +0 -1
- package/dist/design-system/p-10945e57.entry.js +0 -1
- package/dist/design-system/p-342f48ab.entry.js +0 -1
- package/dist/design-system/p-3ded14dc.entry.js +0 -1
- package/dist/design-system/p-951e5615.entry.js +0 -1
- package/dist/design-system/p-9c6fea35.entry.js +0 -1
- package/dist/design-system/p-9d431ea6.entry.js +0 -1
- package/dist/design-system/p-ba393cc8.entry.js +0 -1
- package/dist/design-system/p-df1f9832.entry.js +0 -1
- package/dist/esm/sd-confirm-modal_2.entry.js +0 -196
- package/dist/types/components/sd-notice-modal/sd-notice-modal.config.d.ts +0 -5
- package/dist/types/components/sd-notice-modal/sd-notice-modal.d.ts +0 -28
package/hydrate/index.js
CHANGED
|
@@ -134,7 +134,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
|
|
|
134
134
|
const NAMESPACE = 'design-system';
|
|
135
135
|
const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", shadowDom: false, 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_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:22px;--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:22px;--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-line-height:20px;--sd-system-typography-feedback-sm-bold-text-decoration:none;--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-feedback-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-feedback-lg-bold-font-weight:700;--sd-system-typography-feedback-lg-bold-font-size:18px;--sd-system-typography-feedback-lg-bold-line-height:30px;--sd-system-typography-feedback-lg-bold-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:16px;--sd-system-typography-field-md-default-line-height:26px;--sd-system-typography-field-md-default-text-decoration:none;--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:16px;--sd-system-typography-field-md-bold-line-height:26px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:34px;--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:36px;--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-sm-height:28px;--sd-system-size-field-icon:12px;--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-default:4px;--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-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-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-button-xs-height:24px;--sd-button-xs-padding-x:8px;--sd-button-xs-gap:4px;--sd-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-xs-typography-font-size:12px;--sd-button-xs-typography-font-weight:500;--sd-button-xs-typography-text-decoration:none;--sd-button-xs-typography-line-height:22px;--sd-button-sm-height:28px;--sd-button-sm-padding-x:12px;--sd-button-sm-gap:6px;--sd-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-sm-typography-font-size:12px;--sd-button-sm-typography-font-weight:500;--sd-button-sm-typography-text-decoration:none;--sd-button-sm-typography-line-height:20px;--sd-button-md-height:34px;--sd-button-md-padding-x:20px;--sd-button-md-gap:8px;--sd-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-md-typography-font-size:16px;--sd-button-md-typography-font-weight:500;--sd-button-md-typography-text-decoration:none;--sd-button-md-typography-line-height:26px;--sd-button-lg-height:62px;--sd-button-lg-padding-x:28px;--sd-button-lg-gap:12px;--sd-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-lg-typography-font-size:18px;--sd-button-lg-typography-font-weight:500;--sd-button-lg-typography-text-decoration:none;--sd-button-lg-typography-line-height:30px;--sd-button-size-xs-icon:12px;--sd-button-size-sm-icon:16px;--sd-button-size-md-icon:20px;--sd-button-size-lg-icon:24px;--sd-button-radius-default:4px;--sd-button-border-width-default:1px;--sd-button-border-disabled:#CCCCCC;--sd-button-label-xs-min-width:36px;--sd-button-label-sm-min-width:70px;--sd-button-label-md-min-width:100px;--sd-button-label-lg-min-width:120px;--sd-button-leading-icon-xs-min-width:44px;--sd-button-leading-icon-sm-min-width:70px;--sd-button-leading-icon-md-min-width:100px;--sd-button-leading-icon-lg-min-width:120px;--sd-button-dropdown-xs-min-width:60px;--sd-button-dropdown-sm-min-width:76px;--sd-button-dropdown-md-min-width:106px;--sd-button-icon-only-xs-width:24px;--sd-button-icon-only-sm-width:28px;--sd-button-icon-only-md-width:34px;--sd-button-icon-only-lg-width:62px;--sd-button-bg-disabled:#E1E1E1;--sd-button-content-disabled:#888888;--sd-button-brand-strong-bg-default:#025497;--sd-button-brand-strong-bg-hover:#004177;--sd-button-brand-strong-content:#FFFFFF;--sd-button-brand-strong-dropdown-divider:#006AC1;--sd-button-brand-subtle-bg-default:#1F8AE1;--sd-button-brand-subtle-bg-hover:#006AC1;--sd-button-brand-subtle-content:#FFFFFF;--sd-button-brand-subtle-dropdown-divider:#5CB0F3;--sd-button-brand-outline-bg-default:#FFFFFF;--sd-button-brand-outline-bg-hover:#EAF5FE;--sd-button-brand-outline-border:#025497;--sd-button-brand-outline-content:#025497;--sd-button-neutral-outline-bg-default:#FFFFFF;--sd-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-neutral-outline-border:#888888;--sd-button-neutral-outline-content:#222222;--sd-button-danger-strong-bg-default:#E30000;--sd-button-danger-strong-bg-hover:#AD0000;--sd-button-danger-strong-content:#FFFFFF;--sd-button-danger-strong-dropdown-divider:#FF7C7C;--sd-button-danger-outline-bg-default:#FFFFFF;--sd-button-danger-outline-bg-hover:#FCEFEF;--sd-button-danger-outline-border:#E30000;--sd-button-danger-outline-content:#E30000;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:6px;--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-line-height:20px;--sd-tag-tag-sm-typography-text-decoration:none;--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-bg:#FB4444;--sd-tag-tag-red-content:#FCEFEF;--sd-tag-tag-orange-bg:#FF6B00;--sd-tag-tag-orange-content:#FEF1EA;--sd-tag-tag-yellow-bg:#916C0D;--sd-tag-tag-yellow-content:#FFF7DD;--sd-tag-tag-green-bg:#00973C;--sd-tag-tag-green-content:#E8F9EF;--sd-tag-tag-blue-bg:#0075FF;--sd-tag-tag-blue-content:#E6F1FF;--sd-tag-tag-darkblue-bg:#006AC1;--sd-tag-tag-darkblue-content:#EAF5FE;--sd-tag-tag-indigo-bg:#004290;--sd-tag-tag-indigo-content:#EFF6FF;--sd-tag-tag-grey-bg:#737373;--sd-tag-tag-grey-content:#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-close-icon:20px;--sd-tooltip-tooltip-close-color:#888888;--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-line-height:20px;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--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-line-height:20px;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--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-line-height:20px;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--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-close-icon:12px;--sd-popover-popover-close-color:#888888;--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-line-height:20px;--sd-popover-popover-sub-action-typography-text-decoration:none;--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-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:#888888;--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-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-font-family:Pretendard Variable, Pretendard, -apple-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-font-weight:400;--sd-list-item-list-item-typography-font-size:12px;--sd-list-item-list-item-typography-line-height:20px;--sd-list-item-list-item-typography-text-decoration:none;--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-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-padding-bottom:4px;--sd-list-box-radius:4px;--sd-list-box-bg:#FFFFFF;--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-addon-label-bg:#F6F6F6;--sd-select-select-addon-label-border-default:#AAAAAA;--sd-select-select-addon-label-border-disabled:#CCCCCC;--sd-select-select-size-icon:16px;--sd-modal-modal-radius:8px;--sd-modal-modal-padding-x:32px;--sd-modal-modal-padding-y:40px;--sd-modal-modal-gap:40px;--sd-modal-modal-body-gap:20px;--sd-modal-modal-title-gap:12px;--sd-modal-modal-title-color:#222222;--sd-modal-modal-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-title-typography-font-weight:700;--sd-modal-modal-title-typography-font-size:18px;--sd-modal-modal-title-typography-line-height:30px;--sd-modal-modal-title-typography-text-decoration:none;--sd-modal-modal-title-icon:32px;--sd-modal-modal-button-gap:8px;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-message-color:#222222;--sd-modal-modal-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-message-typography-font-size:12px;--sd-modal-modal-message-typography-font-weight:400;--sd-modal-modal-message-typography-line-height:22px;--sd-modal-modal-message-typography-text-decoration:none;--sd-modal-modal-close-size:20px;--sd-modal-modal-close-color:#888888;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-textinput-input-sm-height:28px;--sd-textinput-input-sm-padding-x:12px;--sd-textinput-input-sm-gap:8px;--sd-textinput-input-sm-radius:4px;--sd-textinput-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-textinput-input-sm-typography-font-weight:400;--sd-textinput-input-sm-typography-font-size:12px;--sd-textinput-input-sm-typography-line-height:20px;--sd-textinput-input-sm-typography-text-decoration:none;--sd-textinput-input-md-height:36px;--sd-textinput-input-md-padding-x:16px;--sd-textinput-input-md-gap:12px;--sd-textinput-input-md-radius:6px;--sd-textinput-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-textinput-input-md-typography-font-weight:400;--sd-textinput-input-md-typography-font-size:16px;--sd-textinput-input-md-typography-line-height:26px;--sd-textinput-input-md-typography-text-decoration:none;--sd-textinput-input-border-width:1px;--sd-textinput-input-border-default:#AAAAAA;--sd-textinput-input-border-focus:#0075FF;--sd-textinput-input-border-danger:#FB4444;--sd-textinput-input-border-success:#12B553;--sd-textinput-input-border-disabled:#CCCCCC;--sd-textinput-input-bg-default:#FFFFFF;--sd-textinput-input-bg-disabled:#E1E1E1;--sd-textinput-input-bg-barcode:#FAFAA1;--sd-textinput-input-text-default:#222222;--sd-textinput-input-text-placeholder:#AAAAAA;--sd-textinput-input-text-disabled:#888888;--sd-textinput-input-text-hint:#555555;--sd-textinput-input-text-error-message:#E30000;--sd-textinput-input-size-icon:16px;--sd-textinput-input-icon-default:#888888;--sd-textinput-input-unit-color:#888888;--sd-textinput-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-textinput-input-hint-typography-font-weight:400;--sd-textinput-input-hint-typography-font-size:12px;--sd-textinput-input-hint-typography-line-height:20px;--sd-textinput-input-hint-typography-text-decoration:none;--sd-textinput-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-textinput-input-error-message-typography-font-weight:400;--sd-textinput-input-error-message-typography-font-size:12px;--sd-textinput-input-error-message-typography-line-height:20px;--sd-textinput-input-error-message-typography-text-decoration:none;--sd-textinput-input-contents-gap:4px;--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-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}.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_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:22px;--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:22px;--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-line-height:20px;--sd-system-typography-feedback-sm-bold-text-decoration:none;--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:16px;--sd-system-typography-field-md-default-line-height:26px;--sd-system-typography-field-md-default-text-decoration:none;--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:16px;--sd-system-typography-field-md-bold-line-height:26px;--sd-system-typography-field-md-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:36px;--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-sm-height:28px;--sd-system-size-field-icon:12px;--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-default:4px;--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-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-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-button-xs-height:24px;--sd-button-xs-padding-x:8px;--sd-button-xs-gap:4px;--sd-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-xs-typography-font-size:12px;--sd-button-xs-typography-font-weight:500;--sd-button-xs-typography-text-decoration:none;--sd-button-xs-typography-line-height:22px;--sd-button-sm-height:28px;--sd-button-sm-padding-x:12px;--sd-button-sm-gap:6px;--sd-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-sm-typography-font-size:12px;--sd-button-sm-typography-font-weight:500;--sd-button-sm-typography-text-decoration:none;--sd-button-sm-typography-line-height:20px;--sd-button-md-height:36px;--sd-button-md-padding-x:20px;--sd-button-md-gap:8px;--sd-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-md-typography-font-size:16px;--sd-button-md-typography-font-weight:500;--sd-button-md-typography-text-decoration:none;--sd-button-md-typography-line-height:26px;--sd-button-lg-height:62px;--sd-button-lg-padding-x:28px;--sd-button-lg-gap:12px;--sd-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-lg-typography-font-size:18px;--sd-button-lg-typography-font-weight:500;--sd-button-lg-typography-text-decoration:none;--sd-button-lg-typography-line-height:30px;--sd-button-size-xs-icon:12px;--sd-button-size-sm-icon:16px;--sd-button-size-md-icon:20px;--sd-button-size-lg-icon:24px;--sd-button-radius-default:4px;--sd-button-border-width-default:1px;--sd-button-border-disabled:#CCCCCC;--sd-button-label-xs-min-width:36px;--sd-button-label-sm-min-width:70px;--sd-button-label-md-min-width:100px;--sd-button-label-lg-min-width:120px;--sd-button-leading-icon-xs-min-width:44px;--sd-button-leading-icon-sm-min-width:70px;--sd-button-leading-icon-md-min-width:100px;--sd-button-leading-icon-lg-min-width:120px;--sd-button-dropdown-xs-min-width:60px;--sd-button-dropdown-sm-min-width:76px;--sd-button-dropdown-md-min-width:106px;--sd-button-icon-only-xs-width:24px;--sd-button-icon-only-sm-width:28px;--sd-button-icon-only-md-width:36px;--sd-button-icon-only-lg-width:62px;--sd-button-bg-disabled:#E1E1E1;--sd-button-content-disabled:#888888;--sd-button-brand-strong-bg-default:#025497;--sd-button-brand-strong-bg-hover:#004177;--sd-button-brand-strong-content:#FFFFFF;--sd-button-brand-strong-dropdown-divider:#006AC1;--sd-button-brand-subtle-bg-default:#1F8AE1;--sd-button-brand-subtle-bg-hover:#006AC1;--sd-button-brand-subtle-content:#FFFFFF;--sd-button-brand-subtle-dropdown-divider:#5CB0F3;--sd-button-brand-outline-bg-default:#FFFFFF;--sd-button-brand-outline-bg-hover:#EAF5FE;--sd-button-brand-outline-border:#025497;--sd-button-brand-outline-content:#025497;--sd-button-neutral-outline-bg-default:#FFFFFF;--sd-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-neutral-outline-border:#888888;--sd-button-neutral-outline-content:#222222;--sd-button-danger-strong-bg-default:#E30000;--sd-button-danger-strong-bg-hover:#AD0000;--sd-button-danger-strong-content:#FFFFFF;--sd-button-danger-strong-dropdown-divider:#FF7C7C;--sd-button-danger-outline-bg-default:#FFFFFF;--sd-button-danger-outline-bg-hover:#FCEFEF;--sd-button-danger-outline-border:#E30000;--sd-button-danger-outline-content:#E30000;--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-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:6px;--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-line-height:20px;--sd-tag-tag-sm-typography-text-decoration:none;--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-bg:#FB4444;--sd-tag-tag-red-content:#FCEFEF;--sd-tag-tag-orange-bg:#FF6B00;--sd-tag-tag-orange-content:#FEF1EA;--sd-tag-tag-yellow-bg:#916C0D;--sd-tag-tag-yellow-content:#FFF7DD;--sd-tag-tag-green-bg:#00973C;--sd-tag-tag-green-content:#E8F9EF;--sd-tag-tag-blue-bg:#0075FF;--sd-tag-tag-blue-content:#E6F1FF;--sd-tag-tag-darkblue-bg:#006AC1;--sd-tag-tag-darkblue-content:#EAF5FE;--sd-tag-tag-indigo-bg:#004290;--sd-tag-tag-indigo-content:#EFF6FF;--sd-tag-tag-grey-bg:#737373;--sd-tag-tag-grey-content:#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-close-icon:20px;--sd-tooltip-tooltip-close-color:#888888;--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-line-height:20px;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--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-line-height:20px;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--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-line-height:20px;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--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-close-icon:12px;--sd-popover-popover-close-color:#888888;--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-line-height:20px;--sd-popover-popover-sub-action-typography-text-decoration:none;--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-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:#888888;--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-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-font-family:Pretendard Variable, Pretendard, -apple-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-font-weight:400;--sd-list-item-list-item-typography-font-size:12px;--sd-list-item-list-item-typography-line-height:20px;--sd-list-item-list-item-typography-text-decoration:none;--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-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-padding-bottom:4px;--sd-list-box-radius:4px;--sd-list-box-bg:#FFFFFF;--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-addon-label-bg:#F6F6F6;--sd-select-select-addon-label-border-default:#AAAAAA;--sd-select-select-addon-label-border-disabled:#CCCCCC;--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-input-sm-height:28px;--sd-textinput-input-sm-padding-x:12px;--sd-textinput-input-sm-gap:8px;--sd-textinput-input-sm-radius:4px;--sd-textinput-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-textinput-input-sm-typography-font-weight:400;--sd-textinput-input-sm-typography-font-size:12px;--sd-textinput-input-sm-typography-line-height:20px;--sd-textinput-input-sm-typography-text-decoration:none;--sd-textinput-input-md-height:36px;--sd-textinput-input-md-padding-x:16px;--sd-textinput-input-md-gap:12px;--sd-textinput-input-md-radius:6px;--sd-textinput-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-textinput-input-md-typography-font-weight:400;--sd-textinput-input-md-typography-font-size:16px;--sd-textinput-input-md-typography-line-height:26px;--sd-textinput-input-md-typography-text-decoration:none;--sd-textinput-input-border-width:1px;--sd-textinput-input-border-default:#AAAAAA;--sd-textinput-input-border-focus:#0075FF;--sd-textinput-input-border-danger:#FB4444;--sd-textinput-input-border-success:#12B553;--sd-textinput-input-border-disabled:#CCCCCC;--sd-textinput-input-bg-default:#FFFFFF;--sd-textinput-input-bg-disabled:#E1E1E1;--sd-textinput-input-bg-barcode:#FAFAA1;--sd-textinput-input-text-default:#222222;--sd-textinput-input-text-placeholder:#AAAAAA;--sd-textinput-input-text-disabled:#888888;--sd-textinput-input-text-hint:#555555;--sd-textinput-input-text-error-message:#E30000;--sd-textinput-input-size-icon:16px;--sd-textinput-input-icon-default:#888888;--sd-textinput-input-unit-color:#888888;--sd-textinput-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-textinput-input-hint-typography-font-weight:400;--sd-textinput-input-hint-typography-font-size:12px;--sd-textinput-input-hint-typography-line-height:20px;--sd-textinput-input-hint-typography-text-decoration:none;--sd-textinput-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-textinput-input-error-message-typography-font-weight:400;--sd-textinput-input-error-message-typography-font-size:12px;--sd-textinput-input-error-message-typography-line-height:20px;--sd-textinput-input-error-message-typography-text-decoration:none;--sd-textinput-input-contents-gap:4px;--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-close-size:20px;--sd-modal-modal-close-color:#888888;--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}.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
|
|
@@ -4785,7 +4785,265 @@ class SdBadge {
|
|
|
4785
4785
|
}; }
|
|
4786
4786
|
}
|
|
4787
4787
|
|
|
4788
|
+
/* @ts-self-types="./index.d.ts" */
|
|
4789
|
+
let urlAlphabet =
|
|
4790
|
+
'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
|
|
4791
|
+
let nanoid = (size = 21) => {
|
|
4792
|
+
let id = '';
|
|
4793
|
+
let i = size | 0;
|
|
4794
|
+
while (i--) {
|
|
4795
|
+
id += urlAlphabet[(Math.random() * 64) | 0];
|
|
4796
|
+
}
|
|
4797
|
+
return id
|
|
4798
|
+
};
|
|
4799
|
+
|
|
4800
|
+
const input = {
|
|
4801
|
+
sm: {
|
|
4802
|
+
height: "28",
|
|
4803
|
+
paddingX: "12",
|
|
4804
|
+
gap: "8",
|
|
4805
|
+
radius: "4",
|
|
4806
|
+
typography: {
|
|
4807
|
+
fontWeight: "400",
|
|
4808
|
+
fontSize: "12",
|
|
4809
|
+
lineHeight: "20"}
|
|
4810
|
+
},
|
|
4811
|
+
md: {
|
|
4812
|
+
height: "36",
|
|
4813
|
+
paddingX: "16",
|
|
4814
|
+
gap: "12",
|
|
4815
|
+
radius: "6",
|
|
4816
|
+
typography: {
|
|
4817
|
+
fontWeight: "400",
|
|
4818
|
+
fontSize: "16",
|
|
4819
|
+
lineHeight: "26"}
|
|
4820
|
+
},
|
|
4821
|
+
bg: {
|
|
4822
|
+
barcode: "#FAFAA1"
|
|
4823
|
+
},
|
|
4824
|
+
text: {
|
|
4825
|
+
"default": "#222222",
|
|
4826
|
+
placeholder: "#AAAAAA",
|
|
4827
|
+
disabled: "#888888"},
|
|
4828
|
+
size: {
|
|
4829
|
+
icon: "16"
|
|
4830
|
+
},
|
|
4831
|
+
icon: {
|
|
4832
|
+
"default": "#888888"
|
|
4833
|
+
}};
|
|
4834
|
+
var inputTokens = {
|
|
4835
|
+
input: input
|
|
4836
|
+
};
|
|
4837
|
+
|
|
4788
4838
|
const size$1 = {
|
|
4839
|
+
field: {
|
|
4840
|
+
icon: "12"}
|
|
4841
|
+
};
|
|
4842
|
+
const color = {
|
|
4843
|
+
bg: {
|
|
4844
|
+
accent: {
|
|
4845
|
+
"default": "#0075FF"}},
|
|
4846
|
+
content: {
|
|
4847
|
+
secondary: "#555555",
|
|
4848
|
+
inverse: "#FFFFFF"
|
|
4849
|
+
}};
|
|
4850
|
+
var systemTokens = {
|
|
4851
|
+
size: size$1,
|
|
4852
|
+
color: color
|
|
4853
|
+
};
|
|
4854
|
+
|
|
4855
|
+
const sm$1 = inputTokens.input.sm;
|
|
4856
|
+
const md$1 = inputTokens.input.md;
|
|
4857
|
+
const BARCODE_INPUT_SIZE_MAP = {
|
|
4858
|
+
sm: {
|
|
4859
|
+
height: sm$1.height,
|
|
4860
|
+
paddingX: sm$1.paddingX,
|
|
4861
|
+
gap: sm$1.gap,
|
|
4862
|
+
radius: sm$1.radius,
|
|
4863
|
+
fontSize: sm$1.typography.fontSize,
|
|
4864
|
+
lineHeight: sm$1.typography.lineHeight,
|
|
4865
|
+
fontWeight: sm$1.typography.fontWeight,
|
|
4866
|
+
},
|
|
4867
|
+
md: {
|
|
4868
|
+
height: md$1.height,
|
|
4869
|
+
paddingX: md$1.paddingX,
|
|
4870
|
+
gap: md$1.gap,
|
|
4871
|
+
radius: md$1.radius,
|
|
4872
|
+
fontSize: md$1.typography.fontSize,
|
|
4873
|
+
lineHeight: md$1.typography.lineHeight,
|
|
4874
|
+
fontWeight: md$1.typography.fontWeight,
|
|
4875
|
+
},
|
|
4876
|
+
};
|
|
4877
|
+
const BARCODE_INPUT_COLORS = {
|
|
4878
|
+
bg: inputTokens.input.bg,
|
|
4879
|
+
text: inputTokens.input.text,
|
|
4880
|
+
icon: inputTokens.input.icon,
|
|
4881
|
+
};
|
|
4882
|
+
const BARCODE_INPUT_ICON = {
|
|
4883
|
+
iconSize: Number(systemTokens.size.field.icon),
|
|
4884
|
+
};
|
|
4885
|
+
|
|
4886
|
+
const sdBarcodeInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}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 #FAFAA1 inset;box-shadow:0 0 0px 1000px #FAFAA1 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 #FAFAA1 inset;box-shadow:0 0 0px 1000px #FAFAA1 inset;transition:background-color 5000s ease-in-out 0s}sd-barcode-input{display:inline-flex}sd-barcode-input .sd-barcode-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-barcode-input-text-color);font-size:var(--sd-barcode-input-font-size);line-height:var(--sd-barcode-input-line-height);font-weight:var(--sd-barcode-input-font-weight);padding:0 var(--sd-barcode-input-padding-x);gap:var(--sd-barcode-input-gap)}sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native[disabled]{cursor:not-allowed;color:var(--sd-barcode-input-disabled-color)}sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native::placeholder{color:var(--sd-barcode-input-placeholder-color)}sd-barcode-input .sd-barcode-input__content .sd-barcode-input__clear-icon{flex-shrink:0;cursor:pointer}`;
|
|
4887
|
+
|
|
4888
|
+
class SdBarcodeInput {
|
|
4889
|
+
constructor(hostRef) {
|
|
4890
|
+
registerInstance(this, hostRef);
|
|
4891
|
+
this.input = createEvent(this, "sdUpdate");
|
|
4892
|
+
this.focus = createEvent(this, "sdFocus");
|
|
4893
|
+
this.blur = createEvent(this, "sdBlur");
|
|
4894
|
+
}
|
|
4895
|
+
get host() { return getElement(this); }
|
|
4896
|
+
value = null;
|
|
4897
|
+
size = 'sm';
|
|
4898
|
+
addonLabel = '';
|
|
4899
|
+
placeholder = '입력해 주세요.';
|
|
4900
|
+
disabled = false;
|
|
4901
|
+
clearable = false;
|
|
4902
|
+
width = '';
|
|
4903
|
+
rules = [];
|
|
4904
|
+
autoFocus = false;
|
|
4905
|
+
status;
|
|
4906
|
+
hint = '';
|
|
4907
|
+
errorMessage = '';
|
|
4908
|
+
inputClass = '';
|
|
4909
|
+
readonly = false;
|
|
4910
|
+
error = false;
|
|
4911
|
+
focused = false;
|
|
4912
|
+
hovered = false;
|
|
4913
|
+
// props - label
|
|
4914
|
+
label = '';
|
|
4915
|
+
icon = undefined;
|
|
4916
|
+
labelTooltip = '';
|
|
4917
|
+
labelTooltipProps = null;
|
|
4918
|
+
// props - custom styles
|
|
4919
|
+
inputStyle = {};
|
|
4920
|
+
internalValue = null;
|
|
4921
|
+
nativeEl = undefined;
|
|
4922
|
+
formField;
|
|
4923
|
+
name = nanoid();
|
|
4924
|
+
input;
|
|
4925
|
+
focus;
|
|
4926
|
+
blur;
|
|
4927
|
+
valueChanged(newValue) {
|
|
4928
|
+
this.internalValue = newValue;
|
|
4929
|
+
}
|
|
4930
|
+
internalValueChanged(newValue) {
|
|
4931
|
+
if (newValue !== this.value) {
|
|
4932
|
+
this.value = newValue;
|
|
4933
|
+
this.input?.emit(this.value);
|
|
4934
|
+
}
|
|
4935
|
+
}
|
|
4936
|
+
async sdGetNativeElement() {
|
|
4937
|
+
return this.nativeEl || null;
|
|
4938
|
+
}
|
|
4939
|
+
async sdValidate() {
|
|
4940
|
+
this.formField?.sdValidate();
|
|
4941
|
+
}
|
|
4942
|
+
async sdReset() {
|
|
4943
|
+
this.formField?.sdReset();
|
|
4944
|
+
}
|
|
4945
|
+
async sdResetValidate() {
|
|
4946
|
+
this.formField?.sdResetValidation();
|
|
4947
|
+
}
|
|
4948
|
+
async sdFocus() {
|
|
4949
|
+
this.formField?.sdFocus();
|
|
4950
|
+
}
|
|
4951
|
+
componentWillLoad() {
|
|
4952
|
+
if (this.value) {
|
|
4953
|
+
this.internalValue = this.value;
|
|
4954
|
+
}
|
|
4955
|
+
}
|
|
4956
|
+
componentDidLoad() {
|
|
4957
|
+
if (this.autoFocus) {
|
|
4958
|
+
this.nativeEl?.focus();
|
|
4959
|
+
}
|
|
4960
|
+
}
|
|
4961
|
+
handleInput = (event) => {
|
|
4962
|
+
const target = event.target;
|
|
4963
|
+
this.internalValue = target.value;
|
|
4964
|
+
};
|
|
4965
|
+
handleFocus = async (type, event) => {
|
|
4966
|
+
this.focused = type === 'focus';
|
|
4967
|
+
if (type === 'blur') {
|
|
4968
|
+
if (this.rules && this.rules.length > 0) {
|
|
4969
|
+
await this.formField?.sdValidate();
|
|
4970
|
+
}
|
|
4971
|
+
this.blur?.emit(event);
|
|
4972
|
+
}
|
|
4973
|
+
else {
|
|
4974
|
+
this.focus?.emit(event);
|
|
4975
|
+
}
|
|
4976
|
+
};
|
|
4977
|
+
render() {
|
|
4978
|
+
const sizeTokens = BARCODE_INPUT_SIZE_MAP[this.size] ?? BARCODE_INPUT_SIZE_MAP.sm;
|
|
4979
|
+
const cssVars = {
|
|
4980
|
+
'--sd-barcode-input-font-size': `${sizeTokens.fontSize}px`,
|
|
4981
|
+
'--sd-barcode-input-line-height': `${sizeTokens.lineHeight}px`,
|
|
4982
|
+
'--sd-barcode-input-font-weight': sizeTokens.fontWeight,
|
|
4983
|
+
'--sd-barcode-input-padding-x': `${sizeTokens.paddingX}px`,
|
|
4984
|
+
'--sd-barcode-input-gap': `${sizeTokens.gap}px`,
|
|
4985
|
+
'--sd-barcode-input-text-color': BARCODE_INPUT_COLORS.text.default,
|
|
4986
|
+
'--sd-barcode-input-placeholder-color': BARCODE_INPUT_COLORS.text.placeholder,
|
|
4987
|
+
'--sd-barcode-input-disabled-color': BARCODE_INPUT_COLORS.text.disabled,
|
|
4988
|
+
'--sd-barcode-input-icon-color': BARCODE_INPUT_COLORS.icon.default,
|
|
4989
|
+
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
4990
|
+
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
4991
|
+
'--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
|
|
4992
|
+
};
|
|
4993
|
+
return (hAsync("sd-field", { key: 'e600120b172ffacea3a2aa5a06316ee448193015', name: this.name, label: this.label, 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("label", { key: 'b4199792159ad2638e12fd5171b8a773baab69e5', class: "sd-barcode-input__content" }, hAsync("slot", { key: '89ed4e66880446f620027c823f34e6d7e42ef2ab', name: "prefix" }), hAsync("input", { key: 'faa6e87a724c70b8170596a58ea1723241775610', 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: 'b21ee05bfcef8cba3df94013ce1ae78c82d37bee', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: 'a83298bbbe51d08e63c9a3de53cf6d92d20d79e0', name: "close", color: BARCODE_INPUT_COLORS.icon.default, size: BARCODE_INPUT_ICON.iconSize, class: "sd-barcode-input__clear-icon", onClick: async () => {
|
|
4994
|
+
this.internalValue = '';
|
|
4995
|
+
await this.formField?.sdValidate();
|
|
4996
|
+
} })))));
|
|
4997
|
+
}
|
|
4998
|
+
static get watchers() { return {
|
|
4999
|
+
"value": [{
|
|
5000
|
+
"valueChanged": 0
|
|
5001
|
+
}],
|
|
5002
|
+
"internalValue": [{
|
|
5003
|
+
"internalValueChanged": 0
|
|
5004
|
+
}]
|
|
5005
|
+
}; }
|
|
5006
|
+
static get style() { return sdBarcodeInputCss(); }
|
|
5007
|
+
static get cmpMeta() { return {
|
|
5008
|
+
"$flags$": 772,
|
|
5009
|
+
"$tagName$": "sd-barcode-input",
|
|
5010
|
+
"$members$": {
|
|
5011
|
+
"value": [1032],
|
|
5012
|
+
"size": [1],
|
|
5013
|
+
"addonLabel": [1, "addon-label"],
|
|
5014
|
+
"placeholder": [1],
|
|
5015
|
+
"disabled": [4],
|
|
5016
|
+
"clearable": [4],
|
|
5017
|
+
"width": [8],
|
|
5018
|
+
"rules": [16],
|
|
5019
|
+
"autoFocus": [4, "auto-focus"],
|
|
5020
|
+
"status": [1],
|
|
5021
|
+
"hint": [1],
|
|
5022
|
+
"errorMessage": [1, "error-message"],
|
|
5023
|
+
"inputClass": [1, "input-class"],
|
|
5024
|
+
"readonly": [4],
|
|
5025
|
+
"error": [1028],
|
|
5026
|
+
"focused": [1028],
|
|
5027
|
+
"hovered": [1028],
|
|
5028
|
+
"label": [1],
|
|
5029
|
+
"icon": [16],
|
|
5030
|
+
"labelTooltip": [1, "label-tooltip"],
|
|
5031
|
+
"labelTooltipProps": [16],
|
|
5032
|
+
"inputStyle": [16],
|
|
5033
|
+
"internalValue": [32],
|
|
5034
|
+
"sdGetNativeElement": [64],
|
|
5035
|
+
"sdValidate": [64],
|
|
5036
|
+
"sdReset": [64],
|
|
5037
|
+
"sdResetValidate": [64],
|
|
5038
|
+
"sdFocus": [64]
|
|
5039
|
+
},
|
|
5040
|
+
"$listeners$": undefined,
|
|
5041
|
+
"$lazyBundleId$": "-",
|
|
5042
|
+
"$attrsToReflect$": []
|
|
5043
|
+
}; }
|
|
5044
|
+
}
|
|
5045
|
+
|
|
5046
|
+
const size = {
|
|
4789
5047
|
xs: {
|
|
4790
5048
|
icon: "12"
|
|
4791
5049
|
},
|
|
@@ -4880,7 +5138,7 @@ const danger = {
|
|
|
4880
5138
|
}
|
|
4881
5139
|
};
|
|
4882
5140
|
var buttonTokens = {
|
|
4883
|
-
size: size
|
|
5141
|
+
size: size,
|
|
4884
5142
|
border: border,
|
|
4885
5143
|
dropdown: dropdown,
|
|
4886
5144
|
bg: bg,
|
|
@@ -5469,13 +5727,13 @@ class SdButtonV2 {
|
|
|
5469
5727
|
const hasLabel = Boolean(this.label);
|
|
5470
5728
|
const iconOnly = !this.label && Boolean(this.icon);
|
|
5471
5729
|
const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
|
|
5472
|
-
return (hAsync("button", { key: '
|
|
5730
|
+
return (hAsync("button", { key: 'bf5687b1ddd3219232c88462b4067203ae2c3d14', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
5473
5731
|
'--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
|
|
5474
5732
|
'--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
|
|
5475
5733
|
'--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
|
|
5476
5734
|
'--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
|
|
5477
5735
|
'--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
|
|
5478
|
-
}, onClick: this.handleClick }, hAsync("span", { key: '
|
|
5736
|
+
}, onClick: this.handleClick }, hAsync("span", { key: '3294cdbae8d44d06ea800f701af23e5a228cca51', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: '707c6716a97ac1c710d546eff6d4a2fb3c3b6206', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && hAsync("span", { key: 'f63f7c887ca2ee066dfb4c65fdd2e3586109a5dd', class: "sd-button-v2__label" }, this.label))));
|
|
5479
5737
|
}
|
|
5480
5738
|
static get style() { return sdButtonV2Css(); }
|
|
5481
5739
|
static get cmpMeta() { return {
|
|
@@ -5712,7 +5970,7 @@ class SdCard {
|
|
|
5712
5970
|
bordered = false;
|
|
5713
5971
|
sdClass = '';
|
|
5714
5972
|
render() {
|
|
5715
|
-
return (hAsync(Fragment, { key: '
|
|
5973
|
+
return (hAsync(Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, hAsync("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
|
|
5716
5974
|
}
|
|
5717
5975
|
static get style() { return sdCardCss(); }
|
|
5718
5976
|
static get cmpMeta() { return {
|
|
@@ -5919,22 +6177,20 @@ class SdCheckbox {
|
|
|
5919
6177
|
}
|
|
5920
6178
|
|
|
5921
6179
|
const modal = {
|
|
5922
|
-
title: {
|
|
5923
|
-
icon: "32"
|
|
5924
|
-
},
|
|
5925
|
-
close: {
|
|
5926
|
-
size: "20",
|
|
5927
|
-
color: "#888888"
|
|
5928
|
-
},
|
|
5929
6180
|
confirm: {
|
|
6181
|
+
title: {
|
|
6182
|
+
icon: "32"},
|
|
5930
6183
|
positive: {
|
|
5931
6184
|
icon: "#0075FF"
|
|
5932
6185
|
},
|
|
5933
6186
|
negative: {
|
|
5934
6187
|
icon: "#E30000"
|
|
5935
6188
|
}
|
|
5936
|
-
}
|
|
5937
|
-
|
|
6189
|
+
},
|
|
6190
|
+
close: {
|
|
6191
|
+
size: "20",
|
|
6192
|
+
color: "#888888"
|
|
6193
|
+
}};
|
|
5938
6194
|
var modalTokens = {
|
|
5939
6195
|
modal: modal
|
|
5940
6196
|
};
|
|
@@ -5942,21 +6198,24 @@ var modalTokens = {
|
|
|
5942
6198
|
const CONFIRM_MODAL_DEFAULT_BUTTON = {
|
|
5943
6199
|
positive: 'primary_md',
|
|
5944
6200
|
negative: 'danger_md',
|
|
6201
|
+
default: 'neutral_outline_md',
|
|
5945
6202
|
};
|
|
5946
6203
|
const CONFIRM_MODAL_ICON_MAP = {
|
|
5947
6204
|
positive: 'notificationOutline',
|
|
5948
6205
|
negative: 'warningOutline',
|
|
6206
|
+
default: null,
|
|
5949
6207
|
};
|
|
5950
6208
|
const CONFIRM_MODAL_ICON_COLOR = {
|
|
5951
6209
|
positive: modalTokens.modal.confirm.positive.icon,
|
|
5952
6210
|
negative: modalTokens.modal.confirm.negative.icon,
|
|
6211
|
+
default: '',
|
|
5953
6212
|
};
|
|
5954
|
-
const TITLE_ICON_SIZE = Number(modalTokens.modal.title.icon);
|
|
6213
|
+
const TITLE_ICON_SIZE = Number(modalTokens.modal.confirm.title.icon);
|
|
5955
6214
|
const CLOSE_ICON_SIZE = Number(modalTokens.modal.close.size);
|
|
5956
6215
|
const CLOSE_ICON_COLOR = modalTokens.modal.close.color;
|
|
5957
6216
|
const SUB_BUTTON_PRESET = 'neutral_outline_md';
|
|
5958
6217
|
|
|
5959
|
-
const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-padding-y) var(--sd-modal-modal-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-title-icon);height:var(--sd-modal-modal-title-icon);margin:0 auto var(--sd-modal-modal-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-title-color);font-size:var(--sd-modal-modal-title-typography-font-size);font-weight:var(--sd-modal-modal-title-typography-font-weight);line-height:var(--sd-modal-modal-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-message-color);font-size:
|
|
6218
|
+
const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:22px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:32px}`;
|
|
5960
6219
|
|
|
5961
6220
|
class SdConfirmModal {
|
|
5962
6221
|
constructor(hostRef) {
|
|
@@ -6029,9 +6288,9 @@ class SdConfirmModal {
|
|
|
6029
6288
|
render() {
|
|
6030
6289
|
const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
|
|
6031
6290
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
|
|
6032
|
-
return (hAsync("div", { key: '
|
|
6291
|
+
return (hAsync("div", { key: 'cbf103ed02ff04e90d1df1fffee08c572d9f5e18', class: "sd-confirm-modal" }, hAsync("sd-icon", { key: 'dde88047b036420eb710b1edc22a72b0e5cdf784', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '84962276dc06729ef2d5212b615e6f309533c60c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'd4f78a41131a2d4f71f74bbe899fcdd96a650adc', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: 'd6019100eabbc46846c62d33d45f242f6f5fb899', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '97c659470421aa9a32aecedea185df11bd208e4e', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: 'e8bc08bf5fa5e73e65df7b0b18b54053491a5ddb', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
|
|
6033
6292
|
this.customContentRef = el;
|
|
6034
|
-
} })) : (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: '
|
|
6293
|
+
} })) : (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: 'a45baf202c54267da618dead5b5f856eab5a50b2', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '3249a262cf870671641cf57253995f5881718c53', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: '18c42ded4eb94bf4059868ae7f8f18f94d238220', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), hAsync("sd-button-v2", { key: '4bc410cc5e9037fb7f5352910ac4fda0934bed38', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
|
|
6035
6294
|
}
|
|
6036
6295
|
static get style() { return sdConfirmModalCss(); }
|
|
6037
6296
|
static get cmpMeta() { return {
|
|
@@ -6157,7 +6416,7 @@ class SdDatePicker {
|
|
|
6157
6416
|
this.viewChange.emit(e.detail);
|
|
6158
6417
|
};
|
|
6159
6418
|
render() {
|
|
6160
|
-
return (hAsync("div", { key: '
|
|
6419
|
+
return (hAsync("div", { key: '308b6e499027b7316199713cddb8253308cee41d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: '37afc5dd38a77e9e1a3c80df8c589cd1ee6f6185', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '91ca438a2ca3795d10a7671a6fc807eca11c4943', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '85bb2503ec3e9d928e572835a5a750a12972af70', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '9b8ccf203b013189df1ad9ecad9f5956a5dd7cef', class: "sd-date-picker__menu" }, hAsync("sd-calendar", { key: 'b314b4c809cd4675d97892a5873fed8fdfb2b046', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
|
|
6161
6420
|
}
|
|
6162
6421
|
static get style() { return sdDatePickerCss(); }
|
|
6163
6422
|
static get cmpMeta() { return {
|
|
@@ -6341,16 +6600,16 @@ class SdDateRangePicker {
|
|
|
6341
6600
|
this.setHoverDate(hoverDate);
|
|
6342
6601
|
}
|
|
6343
6602
|
render() {
|
|
6344
|
-
return (hAsync("div", { key: '
|
|
6603
|
+
return (hAsync("div", { key: '8870de35f713f9b5cd7756e87dcca0bff60acbcd', class: {
|
|
6345
6604
|
'sd-date-range-picker': true,
|
|
6346
6605
|
'sd-date-range-picker--disabled': this.disabled,
|
|
6347
|
-
} }, hAsync("sd-input", { key: '
|
|
6606
|
+
} }, hAsync("sd-input", { key: '602f5be4d5cf9cbd378ca1236ee28969b5e9ba12', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '06a5bf3feaea7606bddad3fa2e655d0cfbaaf89b', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '2e27d6573a72ba2639dc873e7e295b432908a954', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: 'b682a2ae8fdc168a56d77b32b05b239f2eb5a6cc', class: "sd-date-range-picker__menu" }, hAsync("div", { key: '34b4d36dca8a51c7adae9584e62cd0aaf26021d8', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: '47448fcf5ebc6cf8fd242119c7f318c72f69cd90', type: "button", name: "prev", title: "Previous", onClick: () => {
|
|
6348
6607
|
this.setPrevYear(this.prevYear - 1);
|
|
6349
6608
|
this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
|
|
6350
|
-
} }, hAsync("sd-icon", { key: '
|
|
6609
|
+
} }, hAsync("sd-icon", { key: '5f05f690e1493854c5c91b1b7e6c7f92b2285fe0', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'b8c1d2c567eda67a4c8f7a7e2aac740fe8c8a306', class: "header-label" }, this.prevYear), hAsync("button", { key: '447fd54a95756777f665e628ccf747cf5c9f8bfa', type: "button", name: "next", title: "Next", onClick: () => {
|
|
6351
6610
|
this.setPrevYear(this.prevYear + 1);
|
|
6352
6611
|
this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
|
|
6353
|
-
} }, hAsync("sd-icon", { key: '
|
|
6612
|
+
} }, hAsync("sd-icon", { key: '0aeca212fd4ba80c91cdfeb092bcfc7b426ce3cb', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '1858318f65bde16201f9792499b246432f5c80f4', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
|
|
6354
6613
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
6355
6614
|
: `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), hAsync("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), hAsync("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (hAsync("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
|
|
6356
6615
|
}
|
|
@@ -6470,23 +6729,6 @@ class BaseDropdownEvent {
|
|
|
6470
6729
|
}
|
|
6471
6730
|
}
|
|
6472
6731
|
|
|
6473
|
-
const size = {
|
|
6474
|
-
field: {
|
|
6475
|
-
icon: "12"}
|
|
6476
|
-
};
|
|
6477
|
-
const color = {
|
|
6478
|
-
bg: {
|
|
6479
|
-
accent: {
|
|
6480
|
-
"default": "#0075FF"}},
|
|
6481
|
-
content: {
|
|
6482
|
-
secondary: "#555555",
|
|
6483
|
-
inverse: "#FFFFFF"
|
|
6484
|
-
}};
|
|
6485
|
-
var systemTokens = {
|
|
6486
|
-
size: size,
|
|
6487
|
-
color: color
|
|
6488
|
-
};
|
|
6489
|
-
|
|
6490
6732
|
const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
|
|
6491
6733
|
const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
|
|
6492
6734
|
const DROPDOWN_BUTTON_MIN_WIDTHS = {
|
|
@@ -6727,7 +6969,7 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
6727
6969
|
}
|
|
6728
6970
|
render() {
|
|
6729
6971
|
const { config, preset } = this.resolvedConfig;
|
|
6730
|
-
return (hAsync("div", { key: '
|
|
6972
|
+
return (hAsync("div", { key: 'bdaf7f90ca47cc650fb60ed95b7e6ddeb688feaf', class: "sd-dropdown-button" }, hAsync("button", { key: 'eb31263b21ddcd07e6a59c17ddb88af6906136b4', 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: {
|
|
6731
6973
|
'--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
|
|
6732
6974
|
'--sd-dropdown-button-bg': config.color,
|
|
6733
6975
|
'--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
|
|
@@ -6738,10 +6980,10 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
6738
6980
|
'--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
|
|
6739
6981
|
'--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
|
|
6740
6982
|
'--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
|
|
6741
|
-
} }, hAsync("span", { key: '
|
|
6983
|
+
} }, hAsync("span", { key: 'b9501cbab79d5472e9680528282191d97fb9c579', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '83c6b1e937bb7f7d676561d607e8223d05897715', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: '58b1ed6195672372ecd180c9567bc74aeefb1db9', class: {
|
|
6742
6984
|
'sd-dropdown-button__trigger-icon': true,
|
|
6743
6985
|
'sd-dropdown-button__trigger-icon--open': this.isOpen,
|
|
6744
|
-
}, "aria-hidden": "true" }, hAsync("sd-icon", { key: '
|
|
6986
|
+
}, "aria-hidden": "true" }, hAsync("sd-icon", { key: 'd7dfe4aef651f4f55ed661f1d84850009a61bb2e', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
|
|
6745
6987
|
}
|
|
6746
6988
|
static get watchers() { return {
|
|
6747
6989
|
"isOpen": [{
|
|
@@ -6794,6 +7036,7 @@ const FORM_PARENT_TAGS = [
|
|
|
6794
7036
|
'sd-select-multiple',
|
|
6795
7037
|
'sd-select-multiple-group',
|
|
6796
7038
|
'sd-input',
|
|
7039
|
+
'sd-barcode-input',
|
|
6797
7040
|
'sd-textarea',
|
|
6798
7041
|
'sd-number-input',
|
|
6799
7042
|
'sd-select-v2',
|
|
@@ -6923,15 +7166,15 @@ class SdField {
|
|
|
6923
7166
|
? addonTokens.border.disabled
|
|
6924
7167
|
: addonTokens.border.default,
|
|
6925
7168
|
} : {};
|
|
6926
|
-
return (hAsync("div", { key: '
|
|
7169
|
+
return (hAsync("div", { key: '1badb3752c758c30995188f73505d912f4318ba3', class: {
|
|
6927
7170
|
'sd-field': true,
|
|
6928
7171
|
'sd-field--has-label': !!this.label,
|
|
6929
7172
|
'sd-field--has-addon': !!addon,
|
|
6930
7173
|
[this.fieldStatus]: !!this.fieldStatus,
|
|
6931
|
-
}, style: addonCssVars }, hAsync("div", { key: '
|
|
7174
|
+
}, style: addonCssVars }, hAsync("div", { key: 'b8c08b4783eb7035cc28e6ffb1d541871cd25616', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '31efca0604479d2fa9bed06aaaeb9ca9930c62fb', class: {
|
|
6932
7175
|
'sd-field__control': true,
|
|
6933
7176
|
'sd-field__control--has-addon': !!addon,
|
|
6934
|
-
}, style: this.width ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width, flex: 'none' } : {} }, addon && (hAsync("div", { key: '
|
|
7177
|
+
}, style: this.width ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width, flex: 'none' } : {} }, addon && (hAsync("div", { key: '159191a432603cbfa4b1755fc7f4c784868b3749', class: "sd-field__addon" }, addon)), hAsync("slot", { key: '58918e5af7dc2564af8d86b24cb5972cb9d0d67f' }))), (this.errorMsg || this.errorMessage)
|
|
6935
7178
|
? hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)
|
|
6936
7179
|
: this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint)));
|
|
6937
7180
|
}
|
|
@@ -7070,15 +7313,15 @@ class SdFilePicker {
|
|
|
7070
7313
|
render() {
|
|
7071
7314
|
const hasFiles = this.hasFiles();
|
|
7072
7315
|
const displayText = this.getDisplayText();
|
|
7073
|
-
return (hAsync("div", { key: '
|
|
7316
|
+
return (hAsync("div", { key: '3133b2f12d79b36a0f21bbb1d93ae738f35611ce', class: {
|
|
7074
7317
|
'sd-file-picker': true,
|
|
7075
7318
|
[this.getStatusClass()]: true,
|
|
7076
7319
|
'sd-file-picker--inline': this.inline,
|
|
7077
|
-
}, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: '
|
|
7320
|
+
}, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: '56bad5fd0fbd58effe130828312a2b199a132e3b', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), hAsync("sd-icon", { key: 'b1bba7f527e177a51939c98eefe0ca7b84dada7e', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '3a8717611a8716c64a028e5f2c8ac1784797e68c', ref: el => (this.fileNamesRef = el), class: {
|
|
7078
7321
|
'sd-file-picker__text': true,
|
|
7079
7322
|
'sd-file-picker__text--placeholder': !hasFiles,
|
|
7080
7323
|
'sd-file-picker__text--active': hasFiles,
|
|
7081
|
-
} }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: '
|
|
7324
|
+
} }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: 'd05a21388823cc596d8c2f9e31f3fc39a2b84d09', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '24c65a0b7743fa66d44d24cc12bfff46172d620e', class: "sd-file-picker__tooltip" }, displayText))));
|
|
7082
7325
|
}
|
|
7083
7326
|
static get watchers() { return {
|
|
7084
7327
|
"value": [{
|
|
@@ -7257,7 +7500,7 @@ class SdFloatingPopover {
|
|
|
7257
7500
|
this.close.emit();
|
|
7258
7501
|
}
|
|
7259
7502
|
render() {
|
|
7260
|
-
return hAsync("slot", { key: '
|
|
7503
|
+
return hAsync("slot", { key: 'd3ee1daa4b0009285df341cc1d8b892fb2a2fed6' });
|
|
7261
7504
|
}
|
|
7262
7505
|
static get style() { return sdFloatingPortalCss(); }
|
|
7263
7506
|
static get cmpMeta() { return {
|
|
@@ -7414,9 +7657,9 @@ class SdGuide {
|
|
|
7414
7657
|
};
|
|
7415
7658
|
render() {
|
|
7416
7659
|
const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
|
|
7417
|
-
return (hAsync("div", { key: '
|
|
7660
|
+
return (hAsync("div", { key: 'd6736d62ad87e750ed147e48d36d05e4304dae2b', class: "sd-guide", style: {
|
|
7418
7661
|
'--sd-guide-color': GUIDE_ICON[this.type].color,
|
|
7419
|
-
} }, hAsync("sd-button", { key: '
|
|
7662
|
+
} }, hAsync("sd-button", { key: '430e29a73b5bc5380f33773a13c53bc7d6f86590', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: '2b68fd8e9b67c831d212a90c0863551e022de7da', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '735de560510986e014611a2388b4eda55412282f', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '33f612c4c2241f539a84eee6ab8d5ae8d7f933bd', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: '6770783357a95ade4f1037f55397394b64624e2b', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: '1f5d49db7e830f14937db99348f0e1f2332db377', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '69faeb8e2de8e4d4895e0cd0938a027bcff2277b', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: 'c87c814502da7534382cf72b2bc2ab30003d7803', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '73a66a5a39d0b7c5eb9f4076eafdc0a8bf067deb', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
|
|
7420
7663
|
}
|
|
7421
7664
|
// 현재 2depth까지만 스타일 적용
|
|
7422
7665
|
renderListItem(message, depth = 0) {
|
|
@@ -9569,7 +9812,7 @@ class SdIcon {
|
|
|
9569
9812
|
}
|
|
9570
9813
|
render() {
|
|
9571
9814
|
const IconComponent = Icons[this.name]?.[this.size];
|
|
9572
|
-
return (hAsync("i", { key: '
|
|
9815
|
+
return (hAsync("i", { key: '64d1789805536124f229d7dde816ef986d583276', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '35ba2d95f6e3e9d7cb346b4872ba1a436a08e04d', color: this.resolvedColor })));
|
|
9573
9816
|
}
|
|
9574
9817
|
static get style() { return sdIconCss(); }
|
|
9575
9818
|
static get cmpMeta() { return {
|
|
@@ -9589,53 +9832,6 @@ class SdIcon {
|
|
|
9589
9832
|
}; }
|
|
9590
9833
|
}
|
|
9591
9834
|
|
|
9592
|
-
/* @ts-self-types="./index.d.ts" */
|
|
9593
|
-
let urlAlphabet =
|
|
9594
|
-
'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
|
|
9595
|
-
let nanoid = (size = 21) => {
|
|
9596
|
-
let id = '';
|
|
9597
|
-
let i = size | 0;
|
|
9598
|
-
while (i--) {
|
|
9599
|
-
id += urlAlphabet[(Math.random() * 64) | 0];
|
|
9600
|
-
}
|
|
9601
|
-
return id
|
|
9602
|
-
};
|
|
9603
|
-
|
|
9604
|
-
const input = {
|
|
9605
|
-
sm: {
|
|
9606
|
-
height: "28",
|
|
9607
|
-
paddingX: "12",
|
|
9608
|
-
gap: "8",
|
|
9609
|
-
radius: "4",
|
|
9610
|
-
typography: {
|
|
9611
|
-
fontWeight: "400",
|
|
9612
|
-
fontSize: "12",
|
|
9613
|
-
lineHeight: "20"}
|
|
9614
|
-
},
|
|
9615
|
-
md: {
|
|
9616
|
-
height: "36",
|
|
9617
|
-
paddingX: "16",
|
|
9618
|
-
gap: "12",
|
|
9619
|
-
radius: "6",
|
|
9620
|
-
typography: {
|
|
9621
|
-
fontWeight: "400",
|
|
9622
|
-
fontSize: "16",
|
|
9623
|
-
lineHeight: "26"}
|
|
9624
|
-
},
|
|
9625
|
-
text: {
|
|
9626
|
-
"default": "#222222",
|
|
9627
|
-
placeholder: "#AAAAAA",
|
|
9628
|
-
disabled: "#888888"},
|
|
9629
|
-
size: {
|
|
9630
|
-
icon: "16"
|
|
9631
|
-
},
|
|
9632
|
-
icon: {
|
|
9633
|
-
"default": "#888888"
|
|
9634
|
-
}};
|
|
9635
|
-
var inputTokens = {
|
|
9636
|
-
input: input
|
|
9637
|
-
};
|
|
9638
|
-
|
|
9639
9835
|
const sm = inputTokens.input.sm;
|
|
9640
9836
|
const md = inputTokens.input.md;
|
|
9641
9837
|
const INPUT_SIZE_MAP = {
|
|
@@ -9778,10 +9974,10 @@ class SdInput {
|
|
|
9778
9974
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
9779
9975
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
9780
9976
|
};
|
|
9781
|
-
return (hAsync("sd-field", { key: '
|
|
9977
|
+
return (hAsync("sd-field", { key: '82adfc401e74a6d823aa4f95442aa74b663e3ee4', name: this.name, label: this.label, 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("label", { key: '6c7a76e6d863cddf4e7ca83d1231255fe5e7edea', class: "sd-input__content" }, hAsync("slot", { key: '14ab01247317f114f92127b6c1c43c42251fa90c', name: "prefix" }), hAsync("input", { key: 'ee546204bc6cfa28f8e42dce6deebdf251dc04da', 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, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '4f52aa176c00462996d8794da1d8fd86c468e132', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '40ab163ef22e68a261e639ec5d8fb3bc1d6cd42a', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
|
|
9782
9978
|
this.internalValue = '';
|
|
9783
9979
|
await this.formField?.sdValidate();
|
|
9784
|
-
} })), this.type === 'password' && (hAsync("sd-icon", { key: '
|
|
9980
|
+
} })), this.type === 'password' && (hAsync("sd-icon", { key: 'd841ed3ca46d065048107b8733c41e63155b0990', name: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', color: INPUT_COLORS.icon.default, size: INPUT_ICON.frameSize, class: "sd-input__password-icon", onClick: () => { this.passwordVisible = !this.passwordVisible; } })))));
|
|
9785
9981
|
}
|
|
9786
9982
|
static get watchers() { return {
|
|
9787
9983
|
"value": [{
|
|
@@ -9844,7 +10040,7 @@ class SdLoadingSpinner {
|
|
|
9844
10040
|
return resolveColor(this.color);
|
|
9845
10041
|
}
|
|
9846
10042
|
render() {
|
|
9847
|
-
return (hAsync(Fragment, { key: '
|
|
10043
|
+
return (hAsync(Fragment, { key: 'debc93482bd2c47f317457fd97ee2bf40b6f3e59' }, hAsync("svg", { key: '915a8e743e9286e32c81b1bf49714da01ba9a1c3', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: '04abf57521d77d5492a0e5553a7f64017fe0d1a3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
|
|
9848
10044
|
}
|
|
9849
10045
|
static get style() { return sdLoadingSpinnerCss(); }
|
|
9850
10046
|
static get cmpMeta() { return {
|
|
@@ -9894,32 +10090,6 @@ class SdModalContainer {
|
|
|
9894
10090
|
}
|
|
9895
10091
|
this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
|
|
9896
10092
|
this.isVisible = true;
|
|
9897
|
-
// Append after the container renders, then wait until the modal can paint before starting transitions.
|
|
9898
|
-
requestAnimationFrame(() => {
|
|
9899
|
-
if (this.contentRef) {
|
|
9900
|
-
this.contentRef.appendChild(modalEl);
|
|
9901
|
-
this.waitForModalReady(modalEl).then(() => {
|
|
9902
|
-
requestAnimationFrame(() => {
|
|
9903
|
-
const currentEntry = (this.entries ?? []).find(item => item.id === id);
|
|
9904
|
-
if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
|
|
9905
|
-
return;
|
|
9906
|
-
this.isBackdropVisible = true;
|
|
9907
|
-
modalEl.classList.add('sd-modal-container__modal--visible');
|
|
9908
|
-
});
|
|
9909
|
-
});
|
|
9910
|
-
}
|
|
9911
|
-
});
|
|
9912
|
-
return id;
|
|
9913
|
-
}
|
|
9914
|
-
async openNotice(options, chain) {
|
|
9915
|
-
const id = `modal-${++modalIdCounter}`;
|
|
9916
|
-
const modalEl = this.createNoticeModal(id, options);
|
|
9917
|
-
if (this.containerDismissTimerId) {
|
|
9918
|
-
clearTimeout(this.containerDismissTimerId);
|
|
9919
|
-
this.containerDismissTimerId = undefined;
|
|
9920
|
-
}
|
|
9921
|
-
this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
|
|
9922
|
-
this.isVisible = true;
|
|
9923
10093
|
requestAnimationFrame(() => {
|
|
9924
10094
|
if (this.contentRef) {
|
|
9925
10095
|
this.contentRef.appendChild(modalEl);
|
|
@@ -9984,43 +10154,6 @@ class SdModalContainer {
|
|
|
9984
10154
|
if (this.hasOwnProp(options, 'tagContents'))
|
|
9985
10155
|
el.tagContents = options.tagContents;
|
|
9986
10156
|
}
|
|
9987
|
-
createNoticeModal(id, options) {
|
|
9988
|
-
const el = document.createElement('sd-notice-modal');
|
|
9989
|
-
el.setAttribute('data-modal-id', id);
|
|
9990
|
-
el.classList.add('sd-modal-container__modal');
|
|
9991
|
-
this.applyNoticeProps(el, options);
|
|
9992
|
-
el.addEventListener('sdConfirm', () => {
|
|
9993
|
-
this.requestDismiss(id, 'confirm');
|
|
9994
|
-
});
|
|
9995
|
-
el.addEventListener('sdClose', () => {
|
|
9996
|
-
this.requestDismiss(id, 'cancel');
|
|
9997
|
-
});
|
|
9998
|
-
return el;
|
|
9999
|
-
}
|
|
10000
|
-
applyNoticeProps(el, options) {
|
|
10001
|
-
if (this.hasOwnProp(options, 'title'))
|
|
10002
|
-
this.setAttr(el, 'modal-title', options.title);
|
|
10003
|
-
if (this.hasOwnProp(options, 'titleClass'))
|
|
10004
|
-
this.setAttr(el, 'title-class', options.titleClass);
|
|
10005
|
-
if (this.hasOwnProp(options, 'mainButtonLabel')) {
|
|
10006
|
-
this.setAttr(el, 'main-button-label', options.mainButtonLabel);
|
|
10007
|
-
}
|
|
10008
|
-
if (this.hasOwnProp(options, 'subButtonLabel')) {
|
|
10009
|
-
this.setAttr(el, 'sub-button-label', options.subButtonLabel);
|
|
10010
|
-
}
|
|
10011
|
-
if (this.hasOwnProp(options, 'tagPreset'))
|
|
10012
|
-
this.setAttr(el, 'tag-preset', options.tagPreset);
|
|
10013
|
-
if (this.hasOwnProp(options, 'tagLabel'))
|
|
10014
|
-
this.setAttr(el, 'tag-label', options.tagLabel);
|
|
10015
|
-
if (this.hasOwnProp(options, 'slotLabel'))
|
|
10016
|
-
this.setAttr(el, 'slot-label', options.slotLabel);
|
|
10017
|
-
if (this.hasOwnProp(options, 'topMessage'))
|
|
10018
|
-
el.topMessage = options.topMessage ?? [];
|
|
10019
|
-
if (this.hasOwnProp(options, 'bottomMessage'))
|
|
10020
|
-
el.bottomMessage = options.bottomMessage ?? [];
|
|
10021
|
-
if (this.hasOwnProp(options, 'tagContents'))
|
|
10022
|
-
el.tagContents = options.tagContents;
|
|
10023
|
-
}
|
|
10024
10157
|
handleBackdropClick = () => {
|
|
10025
10158
|
const top = this.getTopEntry();
|
|
10026
10159
|
if (!top)
|
|
@@ -10055,7 +10188,6 @@ class SdModalContainer {
|
|
|
10055
10188
|
if (!entry || entry.closing)
|
|
10056
10189
|
return;
|
|
10057
10190
|
entry.modalEl.classList.remove('sd-modal-container__modal--visible');
|
|
10058
|
-
// fade out backdrop simultaneously if this is the last active modal
|
|
10059
10191
|
const remainingActive = (this.entries ?? []).filter(item => item.id !== id && !item.closing);
|
|
10060
10192
|
if (remainingActive.length === 0) {
|
|
10061
10193
|
this.isBackdropVisible = false;
|
|
@@ -10123,7 +10255,6 @@ class SdModalContainer {
|
|
|
10123
10255
|
"isVisible": [32],
|
|
10124
10256
|
"isBackdropVisible": [32],
|
|
10125
10257
|
"open": [64],
|
|
10126
|
-
"openNotice": [64],
|
|
10127
10258
|
"update": [64]
|
|
10128
10259
|
},
|
|
10129
10260
|
"$listeners$": [[8, "keydown", "handleKeydown"]],
|
|
@@ -10132,101 +10263,6 @@ class SdModalContainer {
|
|
|
10132
10263
|
}; }
|
|
10133
10264
|
}
|
|
10134
10265
|
|
|
10135
|
-
const NOTICE_BUTTON_PRESET = 'neutral_outline_md';
|
|
10136
|
-
|
|
10137
|
-
const sdNoticeModalCss = () => `sd-notice-modal{display:block;width:fit-content;min-width:520px}sd-notice-modal .sd-notice-modal{position:relative;padding:var(--sd-modal-modal-padding-y) var(--sd-modal-modal-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-notice-modal .sd-notice-modal__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-notice-modal .sd-notice-modal__title{color:var(--sd-modal-modal-title-color);font-size:var(--sd-modal-modal-title-typography-font-size);font-weight:var(--sd-modal-modal-title-typography-font-weight);line-height:var(--sd-modal-modal-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-body-gap) 0}sd-notice-modal .sd-notice-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-body-gap)}sd-notice-modal .sd-notice-modal__message-text{color:var(--sd-modal-modal-message-color);font-size:var(--sd-modal-modal-message-typography-font-size);font-weight:var(--sd-modal-modal-message-typography-font-weight);line-height:var(--sd-modal-modal-message-typography-line-height);text-align:center;margin:0}sd-notice-modal .sd-notice-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-notice-modal .sd-notice-modal__slot-label{font-size:14px;font-weight:700;line-height:var(--sd-modal-modal-message-typography-line-height);color:var(--sd-modal-modal-message-color)}sd-notice-modal .sd-notice-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-button-gap);margin-top:32px}`;
|
|
10138
|
-
|
|
10139
|
-
class SdNoticeModal {
|
|
10140
|
-
constructor(hostRef) {
|
|
10141
|
-
registerInstance(this, hostRef);
|
|
10142
|
-
this.close = createEvent(this, "sdClose");
|
|
10143
|
-
this.confirm = createEvent(this, "sdConfirm");
|
|
10144
|
-
}
|
|
10145
|
-
get el() { return getElement(this); }
|
|
10146
|
-
hasSlottedContent = false;
|
|
10147
|
-
customContentRef;
|
|
10148
|
-
slotObserver;
|
|
10149
|
-
modalTitle = '';
|
|
10150
|
-
titleClass = '';
|
|
10151
|
-
topMessage = [];
|
|
10152
|
-
bottomMessage = [];
|
|
10153
|
-
mainButtonLabel = '확인';
|
|
10154
|
-
subButtonLabel = '';
|
|
10155
|
-
tagPreset;
|
|
10156
|
-
tagLabel = '';
|
|
10157
|
-
slotLabel = '';
|
|
10158
|
-
tagContents;
|
|
10159
|
-
close;
|
|
10160
|
-
confirm;
|
|
10161
|
-
componentWillLoad() {
|
|
10162
|
-
this.syncHasSlottedContent();
|
|
10163
|
-
}
|
|
10164
|
-
componentDidLoad() {
|
|
10165
|
-
if (typeof MutationObserver === 'undefined')
|
|
10166
|
-
return;
|
|
10167
|
-
this.slotObserver = new MutationObserver(() => this.syncHasSlottedContent());
|
|
10168
|
-
this.slotObserver.observe(this.el, {
|
|
10169
|
-
childList: true,
|
|
10170
|
-
characterData: true,
|
|
10171
|
-
});
|
|
10172
|
-
}
|
|
10173
|
-
componentDidRender() {
|
|
10174
|
-
if (this.customContentRef && this.tagContents instanceof HTMLElement) {
|
|
10175
|
-
if (typeof this.customContentRef.replaceChildren === 'function') {
|
|
10176
|
-
this.customContentRef.replaceChildren(this.tagContents);
|
|
10177
|
-
}
|
|
10178
|
-
else {
|
|
10179
|
-
this.customContentRef.innerHTML = '';
|
|
10180
|
-
this.customContentRef.appendChild(this.tagContents);
|
|
10181
|
-
}
|
|
10182
|
-
}
|
|
10183
|
-
}
|
|
10184
|
-
disconnectedCallback() {
|
|
10185
|
-
this.slotObserver?.disconnect();
|
|
10186
|
-
}
|
|
10187
|
-
get hasTagContent() {
|
|
10188
|
-
return !!(this.tagLabel && this.tagPreset);
|
|
10189
|
-
}
|
|
10190
|
-
get showContentBox() {
|
|
10191
|
-
return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
|
|
10192
|
-
}
|
|
10193
|
-
syncHasSlottedContent() {
|
|
10194
|
-
const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
|
|
10195
|
-
node.classList.contains('sd-notice-modal')) &&
|
|
10196
|
-
(node.nodeType === Node.ELEMENT_NODE ||
|
|
10197
|
-
(node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
|
|
10198
|
-
if (hasSlottedContent !== this.hasSlottedContent) {
|
|
10199
|
-
this.hasSlottedContent = hasSlottedContent;
|
|
10200
|
-
}
|
|
10201
|
-
}
|
|
10202
|
-
render() {
|
|
10203
|
-
return (hAsync("div", { key: 'bdabd03353df6668e77ea29477e79586b9ee18ad', class: "sd-notice-modal" }, hAsync("sd-icon", { key: '2369161b7a25a72da40235f32f6cc006c8b060bd', class: "sd-notice-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), hAsync("h2", { key: '9a8b1c37f874b5299911ae5f081f692cd2bce470', class: `sd-notice-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: 'c44382d6484301d3ed4081cda456628bad387f53', class: "sd-notice-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '81ff93a305aeb3e1fac90362e0a5158355b96d88', class: "sd-notice-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-notice-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: '5d3131ed1aba498fdadf4b035df9c1b178dd1b36', class: "sd-notice-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-notice-modal__custom-content", ref: el => {
|
|
10204
|
-
this.customContentRef = el;
|
|
10205
|
-
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && hAsync("span", { class: "sd-notice-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '0c9e040dbcdb0873f6a4e1606ef0fa9729340860', class: "sd-notice-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-notice-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '7fe0737620fd3583300a62eb5b55704147a7511e', class: "sd-notice-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: '70f0d98a14eb0184ac08cd16aa0676e848fa035d', name: NOTICE_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), hAsync("sd-button-v2", { key: '54554ce5c26fa59924db03728628cca8538de081', name: NOTICE_BUTTON_PRESET, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
|
|
10206
|
-
}
|
|
10207
|
-
static get style() { return sdNoticeModalCss(); }
|
|
10208
|
-
static get cmpMeta() { return {
|
|
10209
|
-
"$flags$": 772,
|
|
10210
|
-
"$tagName$": "sd-notice-modal",
|
|
10211
|
-
"$members$": {
|
|
10212
|
-
"modalTitle": [1, "modal-title"],
|
|
10213
|
-
"titleClass": [1, "title-class"],
|
|
10214
|
-
"topMessage": [16],
|
|
10215
|
-
"bottomMessage": [16],
|
|
10216
|
-
"mainButtonLabel": [1, "main-button-label"],
|
|
10217
|
-
"subButtonLabel": [1, "sub-button-label"],
|
|
10218
|
-
"tagPreset": [1, "tag-preset"],
|
|
10219
|
-
"tagLabel": [1, "tag-label"],
|
|
10220
|
-
"slotLabel": [1, "slot-label"],
|
|
10221
|
-
"tagContents": [16],
|
|
10222
|
-
"hasSlottedContent": [32]
|
|
10223
|
-
},
|
|
10224
|
-
"$listeners$": undefined,
|
|
10225
|
-
"$lazyBundleId$": "-",
|
|
10226
|
-
"$attrsToReflect$": []
|
|
10227
|
-
}; }
|
|
10228
|
-
}
|
|
10229
|
-
|
|
10230
10266
|
const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}sd-number-input .sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border-radius:4px;color:#333333;font-size:12px;line-height:20px;position:relative}sd-number-input .sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}sd-number-input .sd-number-input .sd-number-input__input[disabled]{cursor:not-allowed;color:#888888}sd-number-input .sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#AAAAAA}sd-number-input .sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}sd-number-input .sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#EFF6FF;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#E6F1FF}sd-number-input .sd-number-input .sd-number-input__button:disabled{background-color:#EEEEEE;cursor:not-allowed}sd-number-input .sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}sd-number-input .sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}sd-number-input .sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075FF;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
|
|
10231
10267
|
|
|
10232
10268
|
class SdNumberInput {
|
|
@@ -10477,17 +10513,17 @@ class SdNumberInput {
|
|
|
10477
10513
|
const inputStyles = {
|
|
10478
10514
|
textAlign: this.useButton ? 'center' : 'right',
|
|
10479
10515
|
};
|
|
10480
|
-
return (hAsync("sd-field", { key: '
|
|
10516
|
+
return (hAsync("sd-field", { key: '7c278ee43828ff5619efe471b7f2a8c6ea09c300', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: '10987e5255b183d774affb873866d2fab5721997', class: {
|
|
10481
10517
|
'sd-number-input': true,
|
|
10482
10518
|
[this.getInputStatus()]: true,
|
|
10483
10519
|
'sd-number-input--with-buttons': this.useButton,
|
|
10484
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: '
|
|
10520
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: 'ea09e409d3c4c0a9e59b57b8f0d9211ca271b0ed', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${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, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: '3539fa8237cde3c5220934d18152bd6e3c20b979', class: "sd-number-input__buttons" }, hAsync("button", { key: '4b48a586dbe4509a9c780c1d23b06252f3e5cf55', type: "button", class: {
|
|
10485
10521
|
'sd-number-input__button': true,
|
|
10486
10522
|
'sd-number-input__button--decrement': true,
|
|
10487
|
-
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '
|
|
10523
|
+
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '25076f714328a1bce556ecff6317573c98bd8214', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: '99b5951b072d6bdbd1f36f217d441604aada3f4b', type: "button", class: {
|
|
10488
10524
|
'sd-number-input__button': true,
|
|
10489
10525
|
'sd-number-input__button--increment': true,
|
|
10490
|
-
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '
|
|
10526
|
+
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '13e8eda3bb5042bd65381057159dd60f04ecf69d', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
|
|
10491
10527
|
}
|
|
10492
10528
|
static get watchers() { return {
|
|
10493
10529
|
"value": [{
|
|
@@ -10613,12 +10649,12 @@ class SdPagination {
|
|
|
10613
10649
|
}
|
|
10614
10650
|
}
|
|
10615
10651
|
render() {
|
|
10616
|
-
return (hAsync("div", { key: '
|
|
10652
|
+
return (hAsync("div", { key: 'fe61b181ec08d65564d8e68787403a7a83a90631', class: this.paginationClasses }, hAsync("div", { key: '79237017bd874cf9bfa9af51e66f06ec641cefcf', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
10617
10653
|
'pagination-btn': true,
|
|
10618
10654
|
'pagination-btn--selected': this.currentPage === n,
|
|
10619
10655
|
}, disabled: this.currentPage === n, style: {
|
|
10620
10656
|
'--pagination-btn-width': `${this.buttonWidth}px`,
|
|
10621
|
-
}, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '
|
|
10657
|
+
}, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '416e4c3b231a8a9987cce6bd4359edc759c134ee', class: "append-btns" }, this.renderNextButtons())));
|
|
10622
10658
|
}
|
|
10623
10659
|
static get style() { return sdPaginationCss(); }
|
|
10624
10660
|
static get cmpMeta() { return {
|
|
@@ -10682,14 +10718,14 @@ class SdPopover {
|
|
|
10682
10718
|
this.showPopover = false;
|
|
10683
10719
|
};
|
|
10684
10720
|
render() {
|
|
10685
|
-
return (hAsync(Fragment, { key: '
|
|
10721
|
+
return (hAsync(Fragment, { key: '0ff8739ff39d53fdc5fb4553c4d8a483b1c089c8' }, 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: 'c2373df5edb583a6027575f9b489f669d7864367', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: 'e86db6af4e6a1fac3c2ed78367bf95038d0e618a', class: {
|
|
10686
10722
|
'sd-floating-menu': true,
|
|
10687
10723
|
'sd-floating-menu--popover': true,
|
|
10688
10724
|
[`sd-floating-menu--${this.placement}`]: true,
|
|
10689
10725
|
[this.menuClass]: !!this.menuClass,
|
|
10690
10726
|
}, style: {
|
|
10691
10727
|
'--sd-floating-bg': popoverTokens.popover.bg,
|
|
10692
|
-
} }, hAsync("i", { key: '
|
|
10728
|
+
} }, hAsync("i", { key: 'b5d9109d520bebc16b9b42e663f595d3287c4c9c', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '4981cc2c7bced0653be487ded749563baa17c068' })), hAsync("div", { key: '9abaac42bed464418fb1bf13891ce26a98d78784', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '022ba941f74b58dd9221aec89a13aa295810b6da', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'c391e3db270e291864f0e10f98501bf00ebc9d05', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'ae10feb7e6c1cd98d7ddb3b0527954c2ff89aced', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '0fc4fa46086167325c30403eb8f745f4a81a14d6', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '1b8b5c85a77036075a4554645fda2fabb97016a5', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
|
|
10693
10729
|
}
|
|
10694
10730
|
static get watchers() { return {
|
|
10695
10731
|
"show": [{
|
|
@@ -10949,7 +10985,7 @@ class SdPortal {
|
|
|
10949
10985
|
this.close.emit();
|
|
10950
10986
|
}
|
|
10951
10987
|
render() {
|
|
10952
|
-
return hAsync("slot", { key: '
|
|
10988
|
+
return hAsync("slot", { key: '04581cb6d22882520a7da534d19dcbec7b540af7' });
|
|
10953
10989
|
}
|
|
10954
10990
|
static get watchers() { return {
|
|
10955
10991
|
"open": [{
|
|
@@ -11012,10 +11048,10 @@ class SdProgress {
|
|
|
11012
11048
|
return this.statusColor[this.progressStatus];
|
|
11013
11049
|
}
|
|
11014
11050
|
render() {
|
|
11015
|
-
return (hAsync("div", { key: '
|
|
11051
|
+
return (hAsync("div", { key: 'b97a1ba0ad800ada8a2e87aab6108a77053a3ed5', style: {
|
|
11016
11052
|
'--progress-color': this.progressColor,
|
|
11017
11053
|
'--progress-percentage': `${this.progressPercentage}%`,
|
|
11018
|
-
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '
|
|
11054
|
+
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '6a182e4ade2d9c361a85d3fda62f08f62f4722a3', class: "sd-progress__label" }, this.label)));
|
|
11019
11055
|
}
|
|
11020
11056
|
renderBarProgress() {
|
|
11021
11057
|
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, "%")));
|
|
@@ -11599,10 +11635,10 @@ class SdSelectDropdown {
|
|
|
11599
11635
|
this.isScrolled = scrollTop > 0;
|
|
11600
11636
|
};
|
|
11601
11637
|
render() {
|
|
11602
|
-
return (hAsync("div", { key: '
|
|
11638
|
+
return (hAsync("div", { key: '70bea150872ff4b70b70d358972b14bf0ad2bdf2', class: {
|
|
11603
11639
|
'sd-select-dropdown': true,
|
|
11604
11640
|
'sd-select-dropdown--ready': this.isDropdownReady,
|
|
11605
|
-
}, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '
|
|
11641
|
+
}, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '79ebdc72ca4a905f700dc6293d8033a5ec22d679', 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)))));
|
|
11606
11642
|
}
|
|
11607
11643
|
static get watchers() { return {
|
|
11608
11644
|
"filteredOptions": [{
|
|
@@ -11913,7 +11949,7 @@ class SdSelectGroup extends BaseDropdownEvent {
|
|
|
11913
11949
|
});
|
|
11914
11950
|
}
|
|
11915
11951
|
render() {
|
|
11916
|
-
return (hAsync("sd-field", { key: '
|
|
11952
|
+
return (hAsync("sd-field", { key: '822acc0b4200ab415646218d0f059b45f348f5ea', label: this.label, 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: 'f5a76e913d116469a9d3d9c777d5a3ad62ea42b7', class: {
|
|
11917
11953
|
'sd-select-group': true,
|
|
11918
11954
|
'sd-select-group--open': this.isOpen,
|
|
11919
11955
|
'sd-select-group--disabled': this.disabled,
|
|
@@ -12161,7 +12197,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
|
|
|
12161
12197
|
this.handleOptionSelection(option);
|
|
12162
12198
|
};
|
|
12163
12199
|
render() {
|
|
12164
|
-
return (hAsync("sd-field", { key: '
|
|
12200
|
+
return (hAsync("sd-field", { key: '315be9fce15876ab835f0a6609657dfc04b4f9cf', label: this.label, 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: 'db4754bd0710e217119e02827e9e9db3285a5c74', class: {
|
|
12165
12201
|
'sd-select-multiple': true,
|
|
12166
12202
|
'sd-select-multiple--open': this.isOpen,
|
|
12167
12203
|
'sd-select-multiple--disabled': this.disabled,
|
|
@@ -12757,7 +12793,7 @@ class SdSelectOption {
|
|
|
12757
12793
|
}
|
|
12758
12794
|
};
|
|
12759
12795
|
render() {
|
|
12760
|
-
return (hAsync("div", { key: '
|
|
12796
|
+
return (hAsync("div", { key: '2e04258ee26b376794a5ebe76503875e48dd3ff2', class: {
|
|
12761
12797
|
'sd-select__option': true,
|
|
12762
12798
|
'sd-select__option--selected': this.isSelected,
|
|
12763
12799
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -12843,7 +12879,7 @@ class SdSelectOptionGroup {
|
|
|
12843
12879
|
}
|
|
12844
12880
|
};
|
|
12845
12881
|
render() {
|
|
12846
|
-
return (hAsync("div", { key: '
|
|
12882
|
+
return (hAsync("div", { key: '809d58fbd23e57920785835b37f00b66b579a96c', class: {
|
|
12847
12883
|
'sd-select__option-group': true,
|
|
12848
12884
|
'sd-select__option-group--selected': !!this.isSelected,
|
|
12849
12885
|
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
@@ -12852,10 +12888,10 @@ class SdSelectOptionGroup {
|
|
|
12852
12888
|
'sd-select__option-group--group': this.option.type === 'group',
|
|
12853
12889
|
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
12854
12890
|
'sd-select__option-group--item': this.option.type === 'item',
|
|
12855
|
-
}, 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: '
|
|
12891
|
+
}, 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: 'f2ff05ee37333111548779d9fe78d0c4b91c9a1e', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '4ca8aaffb38af21f27d429f6c937b1da3374c24a', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
|
|
12856
12892
|
e.preventDefault();
|
|
12857
12893
|
this.handleClick(this.option, this.isSelected, e);
|
|
12858
|
-
} })), hAsync("span", { key: '
|
|
12894
|
+
} })), hAsync("span", { key: 'b4b2943e68b98ce82c32e78a9841aae3be4d8e5f', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '6e1414b3738c43f8bd5d308b57440d34f9e1b7fa', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
|
|
12859
12895
|
}
|
|
12860
12896
|
static get style() { return sdSelectOptionGroupCss(); }
|
|
12861
12897
|
static get cmpMeta() { return {
|
|
@@ -12904,17 +12940,17 @@ class SdSelectSearchInput {
|
|
|
12904
12940
|
input?.focus({ preventScroll: true });
|
|
12905
12941
|
}
|
|
12906
12942
|
render() {
|
|
12907
|
-
return (hAsync("div", { key: '
|
|
12943
|
+
return (hAsync("div", { key: '82fd2b838c46c47b51b93a23e5a837708fb944b1', class: {
|
|
12908
12944
|
'sd-select-search-input': true,
|
|
12909
12945
|
'sd-select-search-input--scrolled': !!this.isScrolled,
|
|
12910
|
-
}, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '
|
|
12946
|
+
}, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: 'fc0821ce63f445bed3dfce51668ece1831914f86', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
|
|
12911
12947
|
this.searchInput.emit(String(event?.detail));
|
|
12912
12948
|
}, onSdFocus: () => {
|
|
12913
12949
|
this.searchFocus.emit();
|
|
12914
12950
|
}, onKeyDown: event => {
|
|
12915
12951
|
if (event.code === 'Enter')
|
|
12916
12952
|
event.stopPropagation();
|
|
12917
|
-
} }, hAsync("sd-icon", { key: '
|
|
12953
|
+
} }, hAsync("sd-icon", { key: '6a9b19f5910132be045e3a2cc33546307e3d5cb9', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
|
|
12918
12954
|
}
|
|
12919
12955
|
static get style() { return sdSelectSearchInputCss(); }
|
|
12920
12956
|
static get cmpMeta() { return {
|
|
@@ -13010,11 +13046,6 @@ class SdSelectV2 {
|
|
|
13010
13046
|
flattenOptions(options) {
|
|
13011
13047
|
return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
|
|
13012
13048
|
}
|
|
13013
|
-
collectLeaves(option) {
|
|
13014
|
-
if (!option.children)
|
|
13015
|
-
return [option];
|
|
13016
|
-
return option.children.flatMap(child => this.collectLeaves(child));
|
|
13017
|
-
}
|
|
13018
13049
|
getSelectedOptions() {
|
|
13019
13050
|
const val = this.value;
|
|
13020
13051
|
if (!val || !Array.isArray(val))
|
|
@@ -13094,9 +13125,10 @@ class SdSelectV2 {
|
|
|
13094
13125
|
emitUpdate(value) {
|
|
13095
13126
|
this.update.emit(value);
|
|
13096
13127
|
}
|
|
13097
|
-
handleOptionSelect = (
|
|
13128
|
+
handleOptionSelect = (detail) => {
|
|
13129
|
+
const { option, leaves } = detail;
|
|
13098
13130
|
if (this.isMulti) {
|
|
13099
|
-
this.handleMultiSelect(option);
|
|
13131
|
+
this.handleMultiSelect(option, leaves);
|
|
13100
13132
|
}
|
|
13101
13133
|
else {
|
|
13102
13134
|
this.closeDropdown();
|
|
@@ -13107,14 +13139,12 @@ class SdSelectV2 {
|
|
|
13107
13139
|
});
|
|
13108
13140
|
}
|
|
13109
13141
|
};
|
|
13110
|
-
handleMultiSelect(option) {
|
|
13142
|
+
handleMultiSelect(option, leaves) {
|
|
13111
13143
|
const selected = this.getSelectedOptions();
|
|
13112
|
-
|
|
13113
|
-
|
|
13114
|
-
|
|
13115
|
-
const leaves = this.collectLeaves(targetOption);
|
|
13144
|
+
const isGroup = !!option.children;
|
|
13145
|
+
let newSelected;
|
|
13146
|
+
if (isGroup) {
|
|
13116
13147
|
const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
|
|
13117
|
-
let newSelected;
|
|
13118
13148
|
if (allSelected) {
|
|
13119
13149
|
const leafValues = new Set(leaves.map(l => l.value));
|
|
13120
13150
|
newSelected = selected.filter(s => !leafValues.has(s.value));
|
|
@@ -13124,17 +13154,15 @@ class SdSelectV2 {
|
|
|
13124
13154
|
const toAdd = leaves.filter(l => !existing.has(l.value));
|
|
13125
13155
|
newSelected = [...selected, ...toAdd];
|
|
13126
13156
|
}
|
|
13127
|
-
this.value = this.toMultiValue(newSelected);
|
|
13128
|
-
this.emitUpdate(this.value);
|
|
13129
13157
|
}
|
|
13130
13158
|
else {
|
|
13131
13159
|
const exists = selected.some(s => s.value === option.value);
|
|
13132
|
-
|
|
13160
|
+
newSelected = exists
|
|
13133
13161
|
? selected.filter(s => s.value !== option.value)
|
|
13134
13162
|
: [...selected, option];
|
|
13135
|
-
this.value = this.toMultiValue(newSelected);
|
|
13136
|
-
this.emitUpdate(this.value);
|
|
13137
13163
|
}
|
|
13164
|
+
this.value = this.toMultiValue(newSelected);
|
|
13165
|
+
this.emitUpdate(this.value);
|
|
13138
13166
|
}
|
|
13139
13167
|
connectedCallback() {
|
|
13140
13168
|
window.addEventListener('resize', this.handleViewportResize);
|
|
@@ -13153,13 +13181,13 @@ class SdSelectV2 {
|
|
|
13153
13181
|
this.closeDropdown();
|
|
13154
13182
|
},
|
|
13155
13183
|
};
|
|
13156
|
-
return (hAsync("sd-field", { key: '
|
|
13184
|
+
return (hAsync("sd-field", { key: 'd9659682ab2e8b46fe24491149b8bc3c19d169c2', name: this.fieldName || this.internalName, label: this.label, 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: () => {
|
|
13157
13185
|
this.hovered = true;
|
|
13158
13186
|
}, onMouseLeave: () => {
|
|
13159
13187
|
this.hovered = false;
|
|
13160
|
-
} }, hAsync("div", { key: '
|
|
13188
|
+
} }, hAsync("div", { key: '75a27f70ba737748900efd4a68f8b3885b183f27', class: "sd-select-v2", ref: el => {
|
|
13161
13189
|
this.triggerRef = el;
|
|
13162
|
-
} }, hAsync("sd-select-v2-trigger", { key: '
|
|
13190
|
+
} }, hAsync("sd-select-v2-trigger", { key: 'e639279afd63ec5addbaccd76bf9c73ec3a3da7d', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '3df82f58ba7bf599694ab1ce6ae7ef1ec3fb6035', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'a1afe865d25f3afd39e28011dbb036f74604b76f', 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) })))));
|
|
13163
13191
|
}
|
|
13164
13192
|
static get watchers() { return {
|
|
13165
13193
|
"isOpen": [{
|
|
@@ -13341,23 +13369,28 @@ function filterTree(options, keyword) {
|
|
|
13341
13369
|
const lowerKeyword = keyword.toLowerCase();
|
|
13342
13370
|
return options.reduce((acc, option) => {
|
|
13343
13371
|
const selfMatch = option.label.toLowerCase().includes(lowerKeyword);
|
|
13344
|
-
if (
|
|
13345
|
-
|
|
13346
|
-
|
|
13347
|
-
|
|
13348
|
-
|
|
13349
|
-
|
|
13350
|
-
else if (option.children) {
|
|
13372
|
+
if (option.children) {
|
|
13373
|
+
// 그룹: 자식은 항상 추가로 필터링한다.
|
|
13374
|
+
// - 자식 중 일치하는 게 있으면 그 자식들만 노출
|
|
13375
|
+
// - 자식 매칭이 없더라도 그룹명이 매칭되면 그룹 헤더는 그대로 노출
|
|
13376
|
+
// (이때 children 은 빈 배열로 두고, 선택 동작은 collectVisibleLeaves
|
|
13377
|
+
// 의 fallback 이 원본 트리를 사용해 처리한다)
|
|
13351
13378
|
const filteredChildren = filterTree(option.children, keyword);
|
|
13352
13379
|
if (filteredChildren.length > 0) {
|
|
13353
13380
|
acc.push({ ...option, children: filteredChildren });
|
|
13354
13381
|
}
|
|
13382
|
+
else if (selfMatch) {
|
|
13383
|
+
acc.push({ ...option, children: [] });
|
|
13384
|
+
}
|
|
13385
|
+
}
|
|
13386
|
+
else if (selfMatch) {
|
|
13387
|
+
acc.push({ ...option });
|
|
13355
13388
|
}
|
|
13356
13389
|
return acc;
|
|
13357
13390
|
}, []);
|
|
13358
13391
|
}
|
|
13359
13392
|
|
|
13360
|
-
const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--
|
|
13393
|
+
const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:700;color:var(--list-item-bg-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count{color:#ffffff}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}`;
|
|
13361
13394
|
|
|
13362
13395
|
class SdSelectV2ListItem {
|
|
13363
13396
|
constructor(hostRef) {
|
|
@@ -13427,7 +13460,7 @@ class SdSelectV2ListItem {
|
|
|
13427
13460
|
if (isDepth1Group) {
|
|
13428
13461
|
cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
|
|
13429
13462
|
}
|
|
13430
|
-
return (hAsync("div", { key: '
|
|
13463
|
+
return (hAsync("div", { key: 'af73e77fdeb673b1862b7bd0b153ee0726a3f5db', class: {
|
|
13431
13464
|
'sd-select-v2-list-item': true,
|
|
13432
13465
|
'sd-select-v2-list-item--group': isGroup,
|
|
13433
13466
|
'sd-select-v2-list-item--depth1-group': isDepth1Group,
|
|
@@ -13437,7 +13470,7 @@ class SdSelectV2ListItem {
|
|
|
13437
13470
|
'sd-select-v2-list-item--focused': this.isFocused,
|
|
13438
13471
|
'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
13439
13472
|
'sd-select-v2-list-item--disabled': !!this.option.disabled,
|
|
13440
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
13473
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '8cfcf0375fc756562c4ac698c843bfde3ec3750c', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '1a993c125767559c9cd27f343983b26a24413a93', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '377d0d6c6acab983aff2471fc0f4f78eaa637370', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
13441
13474
|
}
|
|
13442
13475
|
static get style() { return sdSelectV2ListItemCss(); }
|
|
13443
13476
|
static get cmpMeta() { return {
|
|
@@ -13490,15 +13523,6 @@ class SdSelectV2ListItemSearch {
|
|
|
13490
13523
|
this.searchFilter.emit(this.searchText);
|
|
13491
13524
|
}, SEARCH_DEBOUNCE_MS);
|
|
13492
13525
|
};
|
|
13493
|
-
handleKeyDown = (e) => {
|
|
13494
|
-
if (e.key === 'Enter') {
|
|
13495
|
-
e.preventDefault();
|
|
13496
|
-
e.stopPropagation();
|
|
13497
|
-
if (this.debounceTimer)
|
|
13498
|
-
clearTimeout(this.debounceTimer);
|
|
13499
|
-
this.searchFilter.emit(this.searchText);
|
|
13500
|
-
}
|
|
13501
|
-
};
|
|
13502
13526
|
handleClear = (e) => {
|
|
13503
13527
|
e.stopPropagation();
|
|
13504
13528
|
this.searchText = '';
|
|
@@ -13514,12 +13538,12 @@ class SdSelectV2ListItemSearch {
|
|
|
13514
13538
|
clearTimeout(this.debounceTimer);
|
|
13515
13539
|
}
|
|
13516
13540
|
render() {
|
|
13517
|
-
return (hAsync("div", { key: '
|
|
13541
|
+
return (hAsync("div", { key: '7e0f812a04f8f72e41916aad1c2bd8313dac44c7', class: {
|
|
13518
13542
|
'sd-select-v2-list-item-search': true,
|
|
13519
13543
|
'sd-select-v2-list-item-search--scrolled': this.isScrolled,
|
|
13520
|
-
} }, hAsync("div", { key: '
|
|
13544
|
+
} }, hAsync("div", { key: 'f9df679b4cab727ba2c29293194556dad00bf46b', class: "sd-select-v2-list-item-search__inner" }, hAsync("sd-icon", { key: '5f9eb6de82437a6344cc3a0042a24196cb7392a5', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), hAsync("input", { key: '382b15077dd49e3addceca6026953c6065a5f60c', ref: el => {
|
|
13521
13545
|
this.inputEl = el;
|
|
13522
|
-
}, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput,
|
|
13546
|
+
}, 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() }), this.searchText && (hAsync("button", { key: '00830db3b8d303993acf0787e3818e36f7c2c19c', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, hAsync("sd-icon", { key: 'a40a022ec7a3ea9d4bda28e7b5fd41850966c716', name: "close", size: 12, color: "#888888" }))))));
|
|
13523
13547
|
}
|
|
13524
13548
|
static get style() { return sdSelectV2ListItemSearchCss(); }
|
|
13525
13549
|
static get cmpMeta() { return {
|
|
@@ -13536,7 +13560,7 @@ class SdSelectV2ListItemSearch {
|
|
|
13536
13560
|
}; }
|
|
13537
13561
|
}
|
|
13538
13562
|
|
|
13539
|
-
const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select-v2-listbox .sd-select-v2-listbox{display:flex;flex-direction:column;min-width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);width:fit-content;border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden}sd-select-v2-listbox .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:var(--listbox-padding-bottom)}sd-select-v2-listbox .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
|
|
13563
|
+
const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select-v2-listbox .sd-select-v2-listbox{display:flex;flex-direction:column;min-width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);width:fit-content;border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}sd-select-v2-listbox .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:var(--listbox-padding-bottom)}sd-select-v2-listbox .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
|
|
13540
13564
|
|
|
13541
13565
|
class SdSelectV2Listbox {
|
|
13542
13566
|
constructor(hostRef) {
|
|
@@ -13552,7 +13576,12 @@ class SdSelectV2Listbox {
|
|
|
13552
13576
|
maxHeight = '260px';
|
|
13553
13577
|
searchKeyword = '';
|
|
13554
13578
|
isScrolled = false;
|
|
13579
|
+
focusedIndex = -1;
|
|
13555
13580
|
optionSelect;
|
|
13581
|
+
listEl;
|
|
13582
|
+
lastScrolledIndex = -1;
|
|
13583
|
+
keydownAttached = false;
|
|
13584
|
+
suppressHover = false;
|
|
13556
13585
|
get isDepth() {
|
|
13557
13586
|
return this.name === 'default_depth' || this.name === 'multi_depth';
|
|
13558
13587
|
}
|
|
@@ -13602,9 +13631,9 @@ class SdSelectV2Listbox {
|
|
|
13602
13631
|
const selectedValues = this.getSelectedValues();
|
|
13603
13632
|
if (selectedValues.size === 0)
|
|
13604
13633
|
return false;
|
|
13605
|
-
const
|
|
13606
|
-
|
|
13607
|
-
|
|
13634
|
+
const leaves = this.collectVisibleLeaves(option);
|
|
13635
|
+
if (leaves.length === 0)
|
|
13636
|
+
return false;
|
|
13608
13637
|
const selectedCount = leaves.filter(l => selectedValues.has(l.value)).length;
|
|
13609
13638
|
if (selectedCount === 0)
|
|
13610
13639
|
return false;
|
|
@@ -13616,10 +13645,9 @@ class SdSelectV2Listbox {
|
|
|
13616
13645
|
if (!this.isMulti || !option.children)
|
|
13617
13646
|
return undefined;
|
|
13618
13647
|
const selectedValues = this.getSelectedValues();
|
|
13619
|
-
const
|
|
13620
|
-
const
|
|
13621
|
-
|
|
13622
|
-
return { selected: selectedCount, total: totalLeaves.length };
|
|
13648
|
+
const leaves = this.collectVisibleLeaves(option);
|
|
13649
|
+
const selectedCount = leaves.filter(l => selectedValues.has(l.value)).length;
|
|
13650
|
+
return { selected: selectedCount, total: leaves.length };
|
|
13623
13651
|
}
|
|
13624
13652
|
findOriginalOption(value, options) {
|
|
13625
13653
|
for (const opt of options) {
|
|
@@ -13638,21 +13666,177 @@ class SdSelectV2Listbox {
|
|
|
13638
13666
|
return [option];
|
|
13639
13667
|
return option.children.flatMap(child => this.collectLeaves(child));
|
|
13640
13668
|
}
|
|
13669
|
+
/**
|
|
13670
|
+
* Returns the leaves currently visible to the user for the given (possibly
|
|
13671
|
+
* filtered) option. When a group's own label matched the search keyword its
|
|
13672
|
+
* `children` is emptied by `filterTree`; in that case we fall back to the
|
|
13673
|
+
* full original subtree because the user has no way to deselect descendants
|
|
13674
|
+
* individually.
|
|
13675
|
+
*/
|
|
13676
|
+
collectVisibleLeaves(option) {
|
|
13677
|
+
if (!option.children)
|
|
13678
|
+
return [option];
|
|
13679
|
+
if (option.children.length === 0) {
|
|
13680
|
+
const original = this.findOriginalOption(option.value, this.options);
|
|
13681
|
+
return original ? this.collectLeaves(original) : [];
|
|
13682
|
+
}
|
|
13683
|
+
return option.children.flatMap(child => this.collectVisibleLeaves(child));
|
|
13684
|
+
}
|
|
13685
|
+
get navigableOptions() {
|
|
13686
|
+
const items = [];
|
|
13687
|
+
const walk = (opts) => {
|
|
13688
|
+
for (const opt of opts) {
|
|
13689
|
+
const isGroup = !!opt.children;
|
|
13690
|
+
const isSelectable = !isGroup || this.isMulti;
|
|
13691
|
+
if (isSelectable && !opt.disabled)
|
|
13692
|
+
items.push(opt);
|
|
13693
|
+
if (isGroup && opt.children && opt.children.length > 0)
|
|
13694
|
+
walk(opt.children);
|
|
13695
|
+
}
|
|
13696
|
+
};
|
|
13697
|
+
walk(this.filteredOptions);
|
|
13698
|
+
return items;
|
|
13699
|
+
}
|
|
13700
|
+
isOptionFocused(option) {
|
|
13701
|
+
if (this.focusedIndex < 0)
|
|
13702
|
+
return false;
|
|
13703
|
+
const focused = this.navigableOptions[this.focusedIndex];
|
|
13704
|
+
// filterTree 가 매 호출마다 옵션 객체를 새로 복제하기 때문에 참조 비교
|
|
13705
|
+
// (=== / indexOf) 는 검색이 적용된 동안 항상 실패한다. 고유 식별자인
|
|
13706
|
+
// value 로 비교해야 한다.
|
|
13707
|
+
return !!focused && focused.value === option.value;
|
|
13708
|
+
}
|
|
13709
|
+
resetFocusOnFilter() {
|
|
13710
|
+
// 필터가 바뀌면 이전 인덱스가 가리키던 항목이 사라질 수 있으므로
|
|
13711
|
+
// 새 결과의 첫 항목으로 옮긴다. 결과가 비면 -1.
|
|
13712
|
+
const items = this.navigableOptions;
|
|
13713
|
+
this.focusedIndex = items.length > 0 ? 0 : -1;
|
|
13714
|
+
// 키보드 네비게이션 직후 마우스가 한 번도 안 움직인 채로 사용자가
|
|
13715
|
+
// 검색을 시작했다면 hover suppression 이 켜진 상태로 남아있을 수 있다.
|
|
13716
|
+
// 검색이라는 명백한 사용자 의도 전환 시점에 강제로 해제한다.
|
|
13717
|
+
if (this.suppressHover) {
|
|
13718
|
+
document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
|
|
13719
|
+
this.suppressHover = false;
|
|
13720
|
+
}
|
|
13721
|
+
}
|
|
13641
13722
|
handleSearchFilter = (e) => {
|
|
13642
13723
|
this.searchKeyword = e.detail;
|
|
13643
13724
|
};
|
|
13644
13725
|
handleScroll = (e) => {
|
|
13645
13726
|
this.isScrolled = e.target.scrollTop > 0;
|
|
13646
13727
|
};
|
|
13728
|
+
emitOptionSelect(option) {
|
|
13729
|
+
this.optionSelect.emit({
|
|
13730
|
+
option,
|
|
13731
|
+
leaves: this.collectVisibleLeaves(option),
|
|
13732
|
+
});
|
|
13733
|
+
}
|
|
13647
13734
|
handleOptionClick = (e) => {
|
|
13648
13735
|
e.stopPropagation();
|
|
13649
|
-
this.
|
|
13736
|
+
this.emitOptionSelect(e.detail);
|
|
13737
|
+
};
|
|
13738
|
+
handleOptionHover = (option) => {
|
|
13739
|
+
if (this.suppressHover)
|
|
13740
|
+
return;
|
|
13741
|
+
const idx = this.navigableOptions.findIndex(o => o.value === option.value);
|
|
13742
|
+
if (idx >= 0)
|
|
13743
|
+
this.focusedIndex = idx;
|
|
13650
13744
|
};
|
|
13745
|
+
releaseHoverSuppress = () => {
|
|
13746
|
+
this.suppressHover = false;
|
|
13747
|
+
document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
|
|
13748
|
+
};
|
|
13749
|
+
handleKeyDown = (e) => {
|
|
13750
|
+
const items = this.navigableOptions;
|
|
13751
|
+
if (e.key === 'ArrowDown') {
|
|
13752
|
+
if (items.length === 0)
|
|
13753
|
+
return;
|
|
13754
|
+
e.preventDefault();
|
|
13755
|
+
e.stopPropagation();
|
|
13756
|
+
this.focusedIndex = this.focusedIndex < 0 ? 0 : (this.focusedIndex + 1) % items.length;
|
|
13757
|
+
this.beginHoverSuppression();
|
|
13758
|
+
}
|
|
13759
|
+
else if (e.key === 'ArrowUp') {
|
|
13760
|
+
if (items.length === 0)
|
|
13761
|
+
return;
|
|
13762
|
+
e.preventDefault();
|
|
13763
|
+
e.stopPropagation();
|
|
13764
|
+
this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1;
|
|
13765
|
+
this.beginHoverSuppression();
|
|
13766
|
+
}
|
|
13767
|
+
else if (e.key === 'Enter') {
|
|
13768
|
+
if (this.focusedIndex < 0 || this.focusedIndex >= items.length)
|
|
13769
|
+
return;
|
|
13770
|
+
e.preventDefault();
|
|
13771
|
+
e.stopPropagation();
|
|
13772
|
+
this.emitOptionSelect(items[this.focusedIndex]);
|
|
13773
|
+
}
|
|
13774
|
+
};
|
|
13775
|
+
/**
|
|
13776
|
+
* 키보드로 인덱스를 옮기면 자동 스크롤이 일어나는데, 정지한 마우스 커서
|
|
13777
|
+
* 아래로 다른 항목이 미끄러져 들어오면서 mouseenter 가 발화해 인덱스를
|
|
13778
|
+
* 다시 덮어쓰는 문제를 막는다. 실제로 마우스가 한 번이라도 움직이기 전까지
|
|
13779
|
+
* hover 갱신을 무시한다.
|
|
13780
|
+
*/
|
|
13781
|
+
beginHoverSuppression() {
|
|
13782
|
+
if (this.suppressHover)
|
|
13783
|
+
return;
|
|
13784
|
+
this.suppressHover = true;
|
|
13785
|
+
document.addEventListener('mousemove', this.releaseHoverSuppress, true);
|
|
13786
|
+
}
|
|
13787
|
+
/**
|
|
13788
|
+
* 리스트 컨테이너 내부에서만 스크롤한다. `scrollIntoView` 는 조상 스크롤
|
|
13789
|
+
* 컨테이너(=문서 자체)까지 함께 스크롤시키므로 사용하지 않는다.
|
|
13790
|
+
*/
|
|
13791
|
+
scrollFocusedIntoView() {
|
|
13792
|
+
const list = this.listEl;
|
|
13793
|
+
const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
|
|
13794
|
+
if (!list || !focusedEl)
|
|
13795
|
+
return;
|
|
13796
|
+
const listRect = list.getBoundingClientRect();
|
|
13797
|
+
const itemRect = focusedEl.getBoundingClientRect();
|
|
13798
|
+
if (itemRect.top < listRect.top) {
|
|
13799
|
+
list.scrollTop += itemRect.top - listRect.top;
|
|
13800
|
+
}
|
|
13801
|
+
else if (itemRect.bottom > listRect.bottom) {
|
|
13802
|
+
list.scrollTop += itemRect.bottom - listRect.bottom;
|
|
13803
|
+
}
|
|
13804
|
+
}
|
|
13805
|
+
/**
|
|
13806
|
+
* sd-portal 이 슬롯 노드를 body 로 이동시키면서 disconnect → connect 가
|
|
13807
|
+
* 발생하므로, 키보드 리스너는 한 번만 실행되는 componentDidLoad 가 아니라
|
|
13808
|
+
* connectedCallback / disconnectedCallback 에 묶어 매번 재부착한다.
|
|
13809
|
+
* capture phase 로 잡아 포커스가 검색 input 에 있어도 ↑/↓/Enter 가
|
|
13810
|
+
* input 의 기본 동작(커서 이동)·페이지 스크롤보다 먼저 처리되도록 한다.
|
|
13811
|
+
*/
|
|
13812
|
+
connectedCallback() {
|
|
13813
|
+
if (!this.keydownAttached) {
|
|
13814
|
+
document.addEventListener('keydown', this.handleKeyDown, true);
|
|
13815
|
+
this.keydownAttached = true;
|
|
13816
|
+
}
|
|
13817
|
+
}
|
|
13818
|
+
disconnectedCallback() {
|
|
13819
|
+
if (this.keydownAttached) {
|
|
13820
|
+
document.removeEventListener('keydown', this.handleKeyDown, true);
|
|
13821
|
+
this.keydownAttached = false;
|
|
13822
|
+
}
|
|
13823
|
+
if (this.suppressHover) {
|
|
13824
|
+
document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
|
|
13825
|
+
this.suppressHover = false;
|
|
13826
|
+
}
|
|
13827
|
+
}
|
|
13828
|
+
componentDidRender() {
|
|
13829
|
+
if (this.focusedIndex !== this.lastScrolledIndex) {
|
|
13830
|
+
this.lastScrolledIndex = this.focusedIndex;
|
|
13831
|
+
if (this.focusedIndex >= 0)
|
|
13832
|
+
this.scrollFocusedIntoView();
|
|
13833
|
+
}
|
|
13834
|
+
}
|
|
13651
13835
|
renderOptions(options, depth = 1) {
|
|
13652
13836
|
return options.map(option => {
|
|
13653
13837
|
const isGroup = !!option.children;
|
|
13654
13838
|
return [
|
|
13655
|
-
hAsync("sd-select-v2-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick }),
|
|
13839
|
+
hAsync("sd-select-v2-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
|
|
13656
13840
|
isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
|
|
13657
13841
|
];
|
|
13658
13842
|
});
|
|
@@ -13665,8 +13849,15 @@ class SdSelectV2Listbox {
|
|
|
13665
13849
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
13666
13850
|
'--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
|
|
13667
13851
|
};
|
|
13668
|
-
return (hAsync("div", { key: '
|
|
13852
|
+
return (hAsync("div", { key: 'f47839574d0c149ab4aa2a3912b51318ec815b55', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: '3c3f9fd3e0c935da59bc7727af5c719b76b309d5', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '4d4ef6c7c543689abb9ed085e07e613deca6c8d8', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
13853
|
+
this.listEl = el;
|
|
13854
|
+
} }, 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) })))))));
|
|
13669
13855
|
}
|
|
13856
|
+
static get watchers() { return {
|
|
13857
|
+
"searchKeyword": [{
|
|
13858
|
+
"resetFocusOnFilter": 0
|
|
13859
|
+
}]
|
|
13860
|
+
}; }
|
|
13670
13861
|
static get style() { return sdSelectV2ListboxCss(); }
|
|
13671
13862
|
static get cmpMeta() { return {
|
|
13672
13863
|
"$flags$": 512,
|
|
@@ -13680,7 +13871,8 @@ class SdSelectV2Listbox {
|
|
|
13680
13871
|
"maxWidth": [1, "max-width"],
|
|
13681
13872
|
"maxHeight": [1, "max-height"],
|
|
13682
13873
|
"searchKeyword": [32],
|
|
13683
|
-
"isScrolled": [32]
|
|
13874
|
+
"isScrolled": [32],
|
|
13875
|
+
"focusedIndex": [32]
|
|
13684
13876
|
},
|
|
13685
13877
|
"$listeners$": undefined,
|
|
13686
13878
|
"$lazyBundleId$": "-",
|
|
@@ -13720,11 +13912,11 @@ class SdSelectV2Trigger {
|
|
|
13720
13912
|
: SELECT_COLORS.icon.default,
|
|
13721
13913
|
'--trigger-icon-color': this.disabled ? SELECT_COLORS.icon.disabled : SELECT_COLORS.icon.default,
|
|
13722
13914
|
};
|
|
13723
|
-
return (hAsync("div", { key: '
|
|
13915
|
+
return (hAsync("div", { key: '2cf4cc98bbfc8808f84d1d6b9dbfbb4f1afee272', class: {
|
|
13724
13916
|
'sd-select-v2-trigger': true,
|
|
13725
13917
|
'sd-select-v2-trigger--open': this.isOpen,
|
|
13726
13918
|
'sd-select-v2-trigger--disabled': this.disabled,
|
|
13727
|
-
}, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: '
|
|
13919
|
+
}, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: '8835de30555a7ef7846afacad8ec6ee5482b36cf', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: '5afd6845dc9b412a3cd87e6a16de8bd506b38dbb', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: '727d44f2814321bc80ca5a9d127ce5676f0bfdc6', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
13728
13920
|
'sd-select-v2-trigger__icon': true,
|
|
13729
13921
|
'sd-select-v2-trigger__icon--open': this.isOpen,
|
|
13730
13922
|
} }))));
|
|
@@ -14839,7 +15031,7 @@ class SdTag {
|
|
|
14839
15031
|
render() {
|
|
14840
15032
|
const config = this.resolvedConfig;
|
|
14841
15033
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
14842
|
-
return (hAsync("span", { key: '
|
|
15034
|
+
return (hAsync("span", { key: 'f55a5b3c1aec907d8bc7cf8f52cb3ab33af73801', class: "sd-tag", style: {
|
|
14843
15035
|
'--sd-tag-background': config.background,
|
|
14844
15036
|
'--sd-tag-content': config.content,
|
|
14845
15037
|
'--sd-tag-height': config.height,
|
|
@@ -14849,7 +15041,7 @@ class SdTag {
|
|
|
14849
15041
|
'--sd-tag-font-weight': config.fontWeight,
|
|
14850
15042
|
'--sd-tag-line-height': config.lineHeight,
|
|
14851
15043
|
'--sd-tag-radius': config.radius,
|
|
14852
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
15044
|
+
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: 'efb11bdbbb2d82db64d3153255bceab92a5b7a1c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
|
|
14853
15045
|
}
|
|
14854
15046
|
static get style() { return sdTagCss(); }
|
|
14855
15047
|
static get cmpMeta() { return {
|
|
@@ -14947,16 +15139,16 @@ class SdTextLink {
|
|
|
14947
15139
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
14948
15140
|
'--sd-text-link-color': contentColor,
|
|
14949
15141
|
};
|
|
14950
|
-
return (hAsync("span", { key: '
|
|
15142
|
+
return (hAsync("span", { key: '3345bf7ddd99b9eeca4e8e6014f88e5f4505665e', class: {
|
|
14951
15143
|
'sd-text-link': true,
|
|
14952
15144
|
'sd-text-link--disabled': this.disabled,
|
|
14953
|
-
}, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '
|
|
15145
|
+
}, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: 'e8f1cf6482745bce5856988d5e30702d807335db', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '09293467bc7289dd587a5ed0fc4b2cedbc1d925a', class: "sd-text-link__label" }, this.label), this.useArrow && (hAsync("span", { key: '10330d4acc1e323997804146629e3397605b9d58', class: "sd-text-link__arrow", style: {
|
|
14954
15146
|
width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
|
|
14955
15147
|
height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
|
|
14956
15148
|
display: 'inline-flex',
|
|
14957
15149
|
alignItems: 'center',
|
|
14958
15150
|
justifyContent: 'center',
|
|
14959
|
-
} }, hAsync("sd-icon", { key: '
|
|
15151
|
+
} }, hAsync("sd-icon", { key: '01def7dd04278fce78f9eb49efd857999fa255db', name: "arrowRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
|
|
14960
15152
|
}
|
|
14961
15153
|
static get style() { return sdTextLinkCss(); }
|
|
14962
15154
|
static get cmpMeta() { return {
|
|
@@ -15060,10 +15252,10 @@ class SdTextarea {
|
|
|
15060
15252
|
}
|
|
15061
15253
|
render() {
|
|
15062
15254
|
const maxLengthCounter = this.getMaxLengthCounter();
|
|
15063
|
-
return (hAsync("div", { key: '
|
|
15255
|
+
return (hAsync("div", { key: 'abc90981d61632afc86d158283575cd65031e10e', class: {
|
|
15064
15256
|
'sd-textarea': true,
|
|
15065
15257
|
[this.getTextareaStatus()]: true,
|
|
15066
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '
|
|
15258
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: 'e2c3599dc763d59df0ba1ed6d80d2b8e6b9846f9', class: "sd-textarea__content" }, hAsync("textarea", { key: 'f6ac448db448ed16eeac15313b3ca8016b51b70f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: 'dfa41f4149b2f8b51c485e2f6306256982c7fdd1', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: '909c7c59fde0bec3ac398899e9301b2f93fbb0f4', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: 'a0907c3745f7b07ddc5458e5f822bf87873a5316', class: "sd-textarea__counter" }, maxLengthCounter)))));
|
|
15067
15259
|
}
|
|
15068
15260
|
static get watchers() { return {
|
|
15069
15261
|
"value": [{
|
|
@@ -15153,10 +15345,10 @@ class SdToast {
|
|
|
15153
15345
|
render() {
|
|
15154
15346
|
const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
|
|
15155
15347
|
const iconSize = Number(TOAST_LAYOUT.iconSize);
|
|
15156
|
-
return (hAsync("div", { key: '
|
|
15348
|
+
return (hAsync("div", { key: 'd8e1a82c9daebbe6b262bedcecd3fcdb5d9cdff6', style: {
|
|
15157
15349
|
'--sd-toast-bg': typeConfig.bg,
|
|
15158
15350
|
'--sd-toast-text': typeConfig.content,
|
|
15159
|
-
} }, hAsync("div", { key: '
|
|
15351
|
+
} }, hAsync("div", { key: 'ef1c9243616c34947bd03a8de734b28fd7d32bd4', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'ef4ff52c084175eb34f1e88b69258b72966af947', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '7c8f49358fb158807f09855c169ec99f3dcd9469', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: 'b229d53142ab92037b8c409da478305bba954710', class: "sd-toast__content" }, hAsync("span", { key: '1c623880c6e6e7d5d5a0fbaab980774cc494ab82', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '9ff007a2436fd16519e22f024486a40a3c9f6ff9', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("button", { key: '4b2371414437c7f3c9c70ec3b44879d0b6bbc212', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: '3aed44c8b9bf783445cb49d4fc513b086f5fc428', name: "close", size: iconSize, color: typeConfig.content }))))));
|
|
15160
15352
|
}
|
|
15161
15353
|
static get style() { return sdToastCss(); }
|
|
15162
15354
|
static get cmpMeta() { return {
|
|
@@ -15408,7 +15600,7 @@ class SdToastContainer {
|
|
|
15408
15600
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
15409
15601
|
const indexMap = new Map();
|
|
15410
15602
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
15411
|
-
return (hAsync("div", { key: '
|
|
15603
|
+
return (hAsync("div", { key: 'ea70acd97b25230c2c2ae74504381fe00d458043', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
15412
15604
|
this.expanded = true;
|
|
15413
15605
|
this.pauseTimers();
|
|
15414
15606
|
}, onMouseLeave: () => {
|
|
@@ -15483,7 +15675,7 @@ class SdToggle {
|
|
|
15483
15675
|
this.change.emit(newValue);
|
|
15484
15676
|
};
|
|
15485
15677
|
render() {
|
|
15486
|
-
return (hAsync("label", { key: '
|
|
15678
|
+
return (hAsync("label", { key: '60d9d2c1feca4256b7a279bc64e52da8e9f81995', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'd25f6af7f9c6ea95e423a39ff44c394ad9624fe6', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: '52383a1ca0f17666fdc386beed30512e7349b470', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '32c76872e30e2d8b1b06e096c394ee1d3dfc4381', class: "sd-toggle__track" }, hAsync("div", { key: '0ec405309e322492ed7af4e0ddf115da87d03150', class: "sd-toggle__thumb" }))));
|
|
15487
15679
|
}
|
|
15488
15680
|
static get style() { return sdToggleCss(); }
|
|
15489
15681
|
static get cmpMeta() { return {
|
|
@@ -15539,7 +15731,7 @@ class SdToggleButton {
|
|
|
15539
15731
|
this.change.emit(newValue);
|
|
15540
15732
|
};
|
|
15541
15733
|
render() {
|
|
15542
|
-
return (hAsync("label", { key: '
|
|
15734
|
+
return (hAsync("label", { key: 'c8e3adb9201066f7e39ff49df97e80cd4a716345', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: '8fb523287f4d593a455a2366632797098401398e', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
15543
15735
|
}
|
|
15544
15736
|
static get style() { return sdToggleButtonCss(); }
|
|
15545
15737
|
static get cmpMeta() { return {
|
|
@@ -15628,14 +15820,14 @@ class SdTooltip {
|
|
|
15628
15820
|
: {
|
|
15629
15821
|
onSdClick: () => (this.showTooltip = !this.showTooltip),
|
|
15630
15822
|
};
|
|
15631
|
-
return (hAsync(Fragment, { key: '
|
|
15823
|
+
return (hAsync(Fragment, { key: '53edf89a07b59cc1f6f3b84cbba7f4b77c6819c7' }, 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-tooltip", ...buttonTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-floating-portal", { key: '0011143fc06ea5bcf0b800bc4baabb06dd822911', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, hAsync("div", { key: '5cd0ed3132d542436a951bf74784d0aa0cd8078d', class: {
|
|
15632
15824
|
'sd-floating-menu': true,
|
|
15633
15825
|
[`sd-floating-menu--${this.tooltipType}`]: true,
|
|
15634
15826
|
[`sd-floating-menu--${this.placement}`]: true,
|
|
15635
15827
|
}, style: {
|
|
15636
15828
|
'--sd-floating-bg': typeConfig.bg,
|
|
15637
15829
|
'--sd-floating-content': typeConfig.content,
|
|
15638
|
-
} }, hAsync("i", { key: '
|
|
15830
|
+
} }, hAsync("i", { key: '9502962bbd9a95f04d0b6bef1e03c0c048515090', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'b41486b3cecd413dd817b0a1384cfe9fb7255434' })), hAsync("div", { key: 'ea15c6250d1b8dabc5c6ecf1b5c48674a877a3c4', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
|
|
15639
15831
|
}
|
|
15640
15832
|
static get style() { return sdTooltipCss(); }
|
|
15641
15833
|
static get cmpMeta() { return {
|
|
@@ -15663,6 +15855,7 @@ class SdTooltip {
|
|
|
15663
15855
|
|
|
15664
15856
|
registerComponents([
|
|
15665
15857
|
SdBadge,
|
|
15858
|
+
SdBarcodeInput,
|
|
15666
15859
|
SdButton,
|
|
15667
15860
|
SdButtonV2,
|
|
15668
15861
|
SdCalendar,
|
|
@@ -15682,7 +15875,6 @@ registerComponents([
|
|
|
15682
15875
|
SdInput,
|
|
15683
15876
|
SdLoadingSpinner,
|
|
15684
15877
|
SdModalContainer,
|
|
15685
|
-
SdNoticeModal,
|
|
15686
15878
|
SdNumberInput,
|
|
15687
15879
|
SdPagination,
|
|
15688
15880
|
SdPopover,
|