@sellmate/design-system 1.0.40 → 1.0.42
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 +44 -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 +17 -73
- package/dist/cjs/sd-popover.cjs.entry.js +10 -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 +7 -7
- 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 +19 -118
- 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 +10 -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 +10 -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-AfdVu7_V.js +1 -0
- package/dist/components/{p-PcxVERcm.js → p-B2IPxQNl.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-CZN_I4v-.js → p-BZJDhQ6h.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-VztCEgcN.js → p-C7dgr7sG.js} +1 -1
- package/dist/components/p-CArAuWdh.js +1 -0
- 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-CnZPI5RL.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-BNNjhCQc.js → p-DgDoP1wQ.js} +1 -1
- package/dist/components/{p-DPjPJkXv.js → p-DvQzT5XM.js} +1 -1
- package/dist/components/{p-CjZTu6hh.js → p-UaMNiu8y.js} +1 -1
- package/dist/components/p-gHb970iC.js +1 -0
- package/dist/components/p-jaHdAlr9.js +1 -0
- package/dist/components/{p-Ese2dRYD.js → p-jk3tAdJg.js} +1 -1
- 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-fb71301e.entry.js → p-4301b50d.entry.js} +1 -1
- package/dist/design-system/p-4921c569.entry.js +1 -0
- package/dist/design-system/{p-2408d1ab.entry.js → p-50b1196b.entry.js} +1 -1
- package/dist/design-system/p-535b0778.entry.js +1 -0
- 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-6db4e8c7.entry.js +1 -0
- 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-9933475e.entry.js → p-aaf91535.entry.js} +1 -1
- package/dist/design-system/{p-e96c881f.entry.js → p-c1963b5e.entry.js} +1 -1
- 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-f91f4fcc.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 +39 -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 +17 -73
- package/dist/esm/sd-popover.entry.js +10 -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-confirm-modal/sd-confirm-modal.d.ts +1 -1
- package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +3 -13
- package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +2 -5
- package/dist/types/components/sd-popover/sd-popover.d.ts +1 -0
- 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/sd-tooltip/sd-tooltip.d.ts +1 -0
- package/dist/types/components.d.ts +249 -130
- package/dist/types/index.d.ts +1 -1
- package/dist/types/utils/modal.d.ts +3 -4
- package/hydrate/index.js +584 -368
- package/hydrate/index.mjs +584 -368
- 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-CrYrMUpQ.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,27 +6198,30 @@ 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) {
|
|
5963
6222
|
registerInstance(this, hostRef);
|
|
5964
6223
|
this.close = createEvent(this, "sdClose");
|
|
5965
|
-
this.
|
|
6224
|
+
this.ok = createEvent(this, "sdOk");
|
|
5966
6225
|
}
|
|
5967
6226
|
get el() { return getElement(this); }
|
|
5968
6227
|
hasSlottedContent = false;
|
|
@@ -5981,7 +6240,7 @@ class SdConfirmModal {
|
|
|
5981
6240
|
slotLabel = '';
|
|
5982
6241
|
tagContents;
|
|
5983
6242
|
close;
|
|
5984
|
-
|
|
6243
|
+
ok;
|
|
5985
6244
|
componentWillLoad() {
|
|
5986
6245
|
this.syncHasSlottedContent();
|
|
5987
6246
|
}
|
|
@@ -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: '9dd835c1020a29e99257690b5d4d6038b13fe5e4', class: "sd-confirm-modal" }, hAsync("sd-icon", { key: '17fea9642aabb047a8017c37beffe3e0b64707c2', 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: '5198d65dbac64b483f63f8a65f7cad987a14e24b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '045887b2224ed46f4d6158a2d3ffc25261a0156d', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: '7f9ce8c5bef7a8f9ee580671ccdb79c093066ee3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'ac533ca4a1dc011d0bbb0c5c72c14228f680741a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: '2fde04429ca9efb0b9ae30116e9a0fd7f57b904e', 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: '5f97a8bf91a60b553b21d80f4b133d2c79e97ba6', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '4cde2779f11b274d71b90dd75584f8ccd9d3044d', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: '9e64571f556c6cfdb9c69dc70e54a2f4bdec7bb6', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), hAsync("sd-button-v2", { key: 'dd86f7cce973862d94e26910341995f743e1944b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.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 {
|
|
@@ -9882,7 +10078,7 @@ class SdModalContainer {
|
|
|
9882
10078
|
this.shakeModal(top.modalEl);
|
|
9883
10079
|
return;
|
|
9884
10080
|
}
|
|
9885
|
-
this.requestDismiss(top.id, '
|
|
10081
|
+
this.requestDismiss(top.id, 'close');
|
|
9886
10082
|
}
|
|
9887
10083
|
}
|
|
9888
10084
|
async open(options, chain) {
|
|
@@ -9892,33 +10088,7 @@ class SdModalContainer {
|
|
|
9892
10088
|
clearTimeout(this.containerDismissTimerId);
|
|
9893
10089
|
this.containerDismissTimerId = undefined;
|
|
9894
10090
|
}
|
|
9895
|
-
this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
|
|
9896
|
-
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 }];
|
|
10091
|
+
this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closeAction: options.closeAction ?? 'none', closing: false }];
|
|
9922
10092
|
this.isVisible = true;
|
|
9923
10093
|
requestAnimationFrame(() => {
|
|
9924
10094
|
if (this.contentRef) {
|
|
@@ -9947,11 +10117,11 @@ class SdModalContainer {
|
|
|
9947
10117
|
el.setAttribute('data-modal-id', id);
|
|
9948
10118
|
el.classList.add('sd-modal-container__modal');
|
|
9949
10119
|
this.applyProps(el, options);
|
|
9950
|
-
el.addEventListener('
|
|
10120
|
+
el.addEventListener('sdOk', () => {
|
|
9951
10121
|
this.requestDismiss(id, 'confirm');
|
|
9952
10122
|
});
|
|
9953
10123
|
el.addEventListener('sdClose', () => {
|
|
9954
|
-
this.requestDismiss(id, '
|
|
10124
|
+
this.requestDismiss(id, 'close');
|
|
9955
10125
|
});
|
|
9956
10126
|
return el;
|
|
9957
10127
|
}
|
|
@@ -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)
|
|
@@ -10029,7 +10162,7 @@ class SdModalContainer {
|
|
|
10029
10162
|
this.shakeModal(top.modalEl);
|
|
10030
10163
|
return;
|
|
10031
10164
|
}
|
|
10032
|
-
this.requestDismiss(top.id, '
|
|
10165
|
+
this.requestDismiss(top.id, 'close');
|
|
10033
10166
|
};
|
|
10034
10167
|
shakeModal(modalEl) {
|
|
10035
10168
|
const cls = 'sd-modal-container__modal--shake';
|
|
@@ -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;
|
|
@@ -10064,10 +10196,18 @@ class SdModalContainer {
|
|
|
10064
10196
|
this.finalizeDismiss(id);
|
|
10065
10197
|
}, ANIMATION_DURATION);
|
|
10066
10198
|
this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
|
|
10067
|
-
if (reason === '
|
|
10068
|
-
entry.
|
|
10069
|
-
|
|
10070
|
-
entry.
|
|
10199
|
+
if (reason === 'close') {
|
|
10200
|
+
if (entry.closeAction === 'ok')
|
|
10201
|
+
entry.chain._triggerOk();
|
|
10202
|
+
else if (entry.closeAction === 'cancel')
|
|
10203
|
+
entry.chain._triggerCancel();
|
|
10204
|
+
}
|
|
10205
|
+
else {
|
|
10206
|
+
if (reason === 'confirm')
|
|
10207
|
+
entry.chain._triggerOk();
|
|
10208
|
+
if (reason === 'cancel')
|
|
10209
|
+
entry.chain._triggerCancel();
|
|
10210
|
+
}
|
|
10071
10211
|
}
|
|
10072
10212
|
finalizeDismiss(id) {
|
|
10073
10213
|
const entry = (this.entries ?? []).find(item => item.id === id);
|
|
@@ -10123,7 +10263,6 @@ class SdModalContainer {
|
|
|
10123
10263
|
"isVisible": [32],
|
|
10124
10264
|
"isBackdropVisible": [32],
|
|
10125
10265
|
"open": [64],
|
|
10126
|
-
"openNotice": [64],
|
|
10127
10266
|
"update": [64]
|
|
10128
10267
|
},
|
|
10129
10268
|
"$listeners$": [[8, "keydown", "handleKeydown"]],
|
|
@@ -10132,101 +10271,6 @@ class SdModalContainer {
|
|
|
10132
10271
|
}; }
|
|
10133
10272
|
}
|
|
10134
10273
|
|
|
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
10274
|
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
10275
|
|
|
10232
10276
|
class SdNumberInput {
|
|
@@ -10477,17 +10521,17 @@ class SdNumberInput {
|
|
|
10477
10521
|
const inputStyles = {
|
|
10478
10522
|
textAlign: this.useButton ? 'center' : 'right',
|
|
10479
10523
|
};
|
|
10480
|
-
return (hAsync("sd-field", { key: '
|
|
10524
|
+
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
10525
|
'sd-number-input': true,
|
|
10482
10526
|
[this.getInputStatus()]: true,
|
|
10483
10527
|
'sd-number-input--with-buttons': this.useButton,
|
|
10484
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: '
|
|
10528
|
+
}, 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
10529
|
'sd-number-input__button': true,
|
|
10486
10530
|
'sd-number-input__button--decrement': true,
|
|
10487
|
-
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '
|
|
10531
|
+
}, 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
10532
|
'sd-number-input__button': true,
|
|
10489
10533
|
'sd-number-input__button--increment': true,
|
|
10490
|
-
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '
|
|
10534
|
+
}, 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
10535
|
}
|
|
10492
10536
|
static get watchers() { return {
|
|
10493
10537
|
"value": [{
|
|
@@ -10613,12 +10657,12 @@ class SdPagination {
|
|
|
10613
10657
|
}
|
|
10614
10658
|
}
|
|
10615
10659
|
render() {
|
|
10616
|
-
return (hAsync("div", { key: '
|
|
10660
|
+
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
10661
|
'pagination-btn': true,
|
|
10618
10662
|
'pagination-btn--selected': this.currentPage === n,
|
|
10619
10663
|
}, disabled: this.currentPage === n, style: {
|
|
10620
10664
|
'--pagination-btn-width': `${this.buttonWidth}px`,
|
|
10621
|
-
}, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '
|
|
10665
|
+
}, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '416e4c3b231a8a9987cce6bd4359edc759c134ee', class: "append-btns" }, this.renderNextButtons())));
|
|
10622
10666
|
}
|
|
10623
10667
|
static get style() { return sdPaginationCss(); }
|
|
10624
10668
|
static get cmpMeta() { return {
|
|
@@ -10678,18 +10722,26 @@ class SdPopover {
|
|
|
10678
10722
|
this.slotContent = this.el.innerHTML;
|
|
10679
10723
|
}
|
|
10680
10724
|
buttonEl;
|
|
10725
|
+
get popoverOffset() {
|
|
10726
|
+
switch (this.placement) {
|
|
10727
|
+
case 'top': return [0, -4];
|
|
10728
|
+
case 'bottom': return [0, 4];
|
|
10729
|
+
case 'left': return [4, 0];
|
|
10730
|
+
case 'right': return [4, 0];
|
|
10731
|
+
}
|
|
10732
|
+
}
|
|
10681
10733
|
handleClose = () => {
|
|
10682
10734
|
this.showPopover = false;
|
|
10683
10735
|
};
|
|
10684
10736
|
render() {
|
|
10685
|
-
return (hAsync(Fragment, { key: '
|
|
10737
|
+
return (hAsync(Fragment, { key: 'f367ea2ada0fda7c28c943bd7bd48785b1810999' }, 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: 'afdb58bfdf25af2adc45a7b81221c1859b517a5a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, hAsync("div", { key: '38757707dd8c055674edbc2381409f5fd8712c8d', class: {
|
|
10686
10738
|
'sd-floating-menu': true,
|
|
10687
10739
|
'sd-floating-menu--popover': true,
|
|
10688
10740
|
[`sd-floating-menu--${this.placement}`]: true,
|
|
10689
10741
|
[this.menuClass]: !!this.menuClass,
|
|
10690
10742
|
}, style: {
|
|
10691
10743
|
'--sd-floating-bg': popoverTokens.popover.bg,
|
|
10692
|
-
} }, hAsync("i", { key: '
|
|
10744
|
+
} }, hAsync("i", { key: '333bae4cb23470121d63d4d8b34a1d2b15837e7d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '617781bb6fc8957576eb149471fd8bf0f44ca552' })), hAsync("div", { key: '8c57d49782edd344c8c2c0b9bf44fff8ec154159', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'a06b93124684cb96910ffa2603cf7410a01d6381', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '24691930b8ae03a3c92ed8e74dae708b5e64f03b', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'd73cd4cc978711857c4c946dd2a1c1b64bb5feb6', 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: 'cda218024d04b03fc2931afa99f0127bc7a9c4c5', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '3f41ebce27fd4bab823370d6bbe25b5caed9d5e1', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
|
|
10693
10745
|
}
|
|
10694
10746
|
static get watchers() { return {
|
|
10695
10747
|
"show": [{
|
|
@@ -10949,7 +11001,7 @@ class SdPortal {
|
|
|
10949
11001
|
this.close.emit();
|
|
10950
11002
|
}
|
|
10951
11003
|
render() {
|
|
10952
|
-
return hAsync("slot", { key: '
|
|
11004
|
+
return hAsync("slot", { key: '04581cb6d22882520a7da534d19dcbec7b540af7' });
|
|
10953
11005
|
}
|
|
10954
11006
|
static get watchers() { return {
|
|
10955
11007
|
"open": [{
|
|
@@ -11012,10 +11064,10 @@ class SdProgress {
|
|
|
11012
11064
|
return this.statusColor[this.progressStatus];
|
|
11013
11065
|
}
|
|
11014
11066
|
render() {
|
|
11015
|
-
return (hAsync("div", { key: '
|
|
11067
|
+
return (hAsync("div", { key: 'b97a1ba0ad800ada8a2e87aab6108a77053a3ed5', style: {
|
|
11016
11068
|
'--progress-color': this.progressColor,
|
|
11017
11069
|
'--progress-percentage': `${this.progressPercentage}%`,
|
|
11018
|
-
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '
|
|
11070
|
+
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '6a182e4ade2d9c361a85d3fda62f08f62f4722a3', class: "sd-progress__label" }, this.label)));
|
|
11019
11071
|
}
|
|
11020
11072
|
renderBarProgress() {
|
|
11021
11073
|
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 +11651,10 @@ class SdSelectDropdown {
|
|
|
11599
11651
|
this.isScrolled = scrollTop > 0;
|
|
11600
11652
|
};
|
|
11601
11653
|
render() {
|
|
11602
|
-
return (hAsync("div", { key: '
|
|
11654
|
+
return (hAsync("div", { key: '70bea150872ff4b70b70d358972b14bf0ad2bdf2', class: {
|
|
11603
11655
|
'sd-select-dropdown': true,
|
|
11604
11656
|
'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: '
|
|
11657
|
+
}, 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
11658
|
}
|
|
11607
11659
|
static get watchers() { return {
|
|
11608
11660
|
"filteredOptions": [{
|
|
@@ -11913,7 +11965,7 @@ class SdSelectGroup extends BaseDropdownEvent {
|
|
|
11913
11965
|
});
|
|
11914
11966
|
}
|
|
11915
11967
|
render() {
|
|
11916
|
-
return (hAsync("sd-field", { key: '
|
|
11968
|
+
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
11969
|
'sd-select-group': true,
|
|
11918
11970
|
'sd-select-group--open': this.isOpen,
|
|
11919
11971
|
'sd-select-group--disabled': this.disabled,
|
|
@@ -12161,7 +12213,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
|
|
|
12161
12213
|
this.handleOptionSelection(option);
|
|
12162
12214
|
};
|
|
12163
12215
|
render() {
|
|
12164
|
-
return (hAsync("sd-field", { key: '
|
|
12216
|
+
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
12217
|
'sd-select-multiple': true,
|
|
12166
12218
|
'sd-select-multiple--open': this.isOpen,
|
|
12167
12219
|
'sd-select-multiple--disabled': this.disabled,
|
|
@@ -12757,7 +12809,7 @@ class SdSelectOption {
|
|
|
12757
12809
|
}
|
|
12758
12810
|
};
|
|
12759
12811
|
render() {
|
|
12760
|
-
return (hAsync("div", { key: '
|
|
12812
|
+
return (hAsync("div", { key: '2e04258ee26b376794a5ebe76503875e48dd3ff2', class: {
|
|
12761
12813
|
'sd-select__option': true,
|
|
12762
12814
|
'sd-select__option--selected': this.isSelected,
|
|
12763
12815
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -12843,7 +12895,7 @@ class SdSelectOptionGroup {
|
|
|
12843
12895
|
}
|
|
12844
12896
|
};
|
|
12845
12897
|
render() {
|
|
12846
|
-
return (hAsync("div", { key: '
|
|
12898
|
+
return (hAsync("div", { key: '809d58fbd23e57920785835b37f00b66b579a96c', class: {
|
|
12847
12899
|
'sd-select__option-group': true,
|
|
12848
12900
|
'sd-select__option-group--selected': !!this.isSelected,
|
|
12849
12901
|
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
@@ -12852,10 +12904,10 @@ class SdSelectOptionGroup {
|
|
|
12852
12904
|
'sd-select__option-group--group': this.option.type === 'group',
|
|
12853
12905
|
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
12854
12906
|
'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: '
|
|
12907
|
+
}, 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
12908
|
e.preventDefault();
|
|
12857
12909
|
this.handleClick(this.option, this.isSelected, e);
|
|
12858
|
-
} })), hAsync("span", { key: '
|
|
12910
|
+
} })), 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
12911
|
}
|
|
12860
12912
|
static get style() { return sdSelectOptionGroupCss(); }
|
|
12861
12913
|
static get cmpMeta() { return {
|
|
@@ -12904,17 +12956,17 @@ class SdSelectSearchInput {
|
|
|
12904
12956
|
input?.focus({ preventScroll: true });
|
|
12905
12957
|
}
|
|
12906
12958
|
render() {
|
|
12907
|
-
return (hAsync("div", { key: '
|
|
12959
|
+
return (hAsync("div", { key: '82fd2b838c46c47b51b93a23e5a837708fb944b1', class: {
|
|
12908
12960
|
'sd-select-search-input': true,
|
|
12909
12961
|
'sd-select-search-input--scrolled': !!this.isScrolled,
|
|
12910
|
-
}, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '
|
|
12962
|
+
}, 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
12963
|
this.searchInput.emit(String(event?.detail));
|
|
12912
12964
|
}, onSdFocus: () => {
|
|
12913
12965
|
this.searchFocus.emit();
|
|
12914
12966
|
}, onKeyDown: event => {
|
|
12915
12967
|
if (event.code === 'Enter')
|
|
12916
12968
|
event.stopPropagation();
|
|
12917
|
-
} }, hAsync("sd-icon", { key: '
|
|
12969
|
+
} }, hAsync("sd-icon", { key: '6a9b19f5910132be045e3a2cc33546307e3d5cb9', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
|
|
12918
12970
|
}
|
|
12919
12971
|
static get style() { return sdSelectSearchInputCss(); }
|
|
12920
12972
|
static get cmpMeta() { return {
|
|
@@ -13010,11 +13062,6 @@ class SdSelectV2 {
|
|
|
13010
13062
|
flattenOptions(options) {
|
|
13011
13063
|
return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
|
|
13012
13064
|
}
|
|
13013
|
-
collectLeaves(option) {
|
|
13014
|
-
if (!option.children)
|
|
13015
|
-
return [option];
|
|
13016
|
-
return option.children.flatMap(child => this.collectLeaves(child));
|
|
13017
|
-
}
|
|
13018
13065
|
getSelectedOptions() {
|
|
13019
13066
|
const val = this.value;
|
|
13020
13067
|
if (!val || !Array.isArray(val))
|
|
@@ -13094,9 +13141,10 @@ class SdSelectV2 {
|
|
|
13094
13141
|
emitUpdate(value) {
|
|
13095
13142
|
this.update.emit(value);
|
|
13096
13143
|
}
|
|
13097
|
-
handleOptionSelect = (
|
|
13144
|
+
handleOptionSelect = (detail) => {
|
|
13145
|
+
const { option, leaves } = detail;
|
|
13098
13146
|
if (this.isMulti) {
|
|
13099
|
-
this.handleMultiSelect(option);
|
|
13147
|
+
this.handleMultiSelect(option, leaves);
|
|
13100
13148
|
}
|
|
13101
13149
|
else {
|
|
13102
13150
|
this.closeDropdown();
|
|
@@ -13107,14 +13155,12 @@ class SdSelectV2 {
|
|
|
13107
13155
|
});
|
|
13108
13156
|
}
|
|
13109
13157
|
};
|
|
13110
|
-
handleMultiSelect(option) {
|
|
13158
|
+
handleMultiSelect(option, leaves) {
|
|
13111
13159
|
const selected = this.getSelectedOptions();
|
|
13112
|
-
|
|
13113
|
-
|
|
13114
|
-
|
|
13115
|
-
const leaves = this.collectLeaves(targetOption);
|
|
13160
|
+
const isGroup = !!option.children;
|
|
13161
|
+
let newSelected;
|
|
13162
|
+
if (isGroup) {
|
|
13116
13163
|
const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
|
|
13117
|
-
let newSelected;
|
|
13118
13164
|
if (allSelected) {
|
|
13119
13165
|
const leafValues = new Set(leaves.map(l => l.value));
|
|
13120
13166
|
newSelected = selected.filter(s => !leafValues.has(s.value));
|
|
@@ -13124,17 +13170,15 @@ class SdSelectV2 {
|
|
|
13124
13170
|
const toAdd = leaves.filter(l => !existing.has(l.value));
|
|
13125
13171
|
newSelected = [...selected, ...toAdd];
|
|
13126
13172
|
}
|
|
13127
|
-
this.value = this.toMultiValue(newSelected);
|
|
13128
|
-
this.emitUpdate(this.value);
|
|
13129
13173
|
}
|
|
13130
13174
|
else {
|
|
13131
13175
|
const exists = selected.some(s => s.value === option.value);
|
|
13132
|
-
|
|
13176
|
+
newSelected = exists
|
|
13133
13177
|
? selected.filter(s => s.value !== option.value)
|
|
13134
13178
|
: [...selected, option];
|
|
13135
|
-
this.value = this.toMultiValue(newSelected);
|
|
13136
|
-
this.emitUpdate(this.value);
|
|
13137
13179
|
}
|
|
13180
|
+
this.value = this.toMultiValue(newSelected);
|
|
13181
|
+
this.emitUpdate(this.value);
|
|
13138
13182
|
}
|
|
13139
13183
|
connectedCallback() {
|
|
13140
13184
|
window.addEventListener('resize', this.handleViewportResize);
|
|
@@ -13153,13 +13197,13 @@ class SdSelectV2 {
|
|
|
13153
13197
|
this.closeDropdown();
|
|
13154
13198
|
},
|
|
13155
13199
|
};
|
|
13156
|
-
return (hAsync("sd-field", { key: '
|
|
13200
|
+
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
13201
|
this.hovered = true;
|
|
13158
13202
|
}, onMouseLeave: () => {
|
|
13159
13203
|
this.hovered = false;
|
|
13160
|
-
} }, hAsync("div", { key: '
|
|
13204
|
+
} }, hAsync("div", { key: '75a27f70ba737748900efd4a68f8b3885b183f27', class: "sd-select-v2", ref: el => {
|
|
13161
13205
|
this.triggerRef = el;
|
|
13162
|
-
} }, hAsync("sd-select-v2-trigger", { key: '
|
|
13206
|
+
} }, 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
13207
|
}
|
|
13164
13208
|
static get watchers() { return {
|
|
13165
13209
|
"isOpen": [{
|
|
@@ -13341,23 +13385,28 @@ function filterTree(options, keyword) {
|
|
|
13341
13385
|
const lowerKeyword = keyword.toLowerCase();
|
|
13342
13386
|
return options.reduce((acc, option) => {
|
|
13343
13387
|
const selfMatch = option.label.toLowerCase().includes(lowerKeyword);
|
|
13344
|
-
if (
|
|
13345
|
-
|
|
13346
|
-
|
|
13347
|
-
|
|
13348
|
-
|
|
13349
|
-
|
|
13350
|
-
else if (option.children) {
|
|
13388
|
+
if (option.children) {
|
|
13389
|
+
// 그룹: 자식은 항상 추가로 필터링한다.
|
|
13390
|
+
// - 자식 중 일치하는 게 있으면 그 자식들만 노출
|
|
13391
|
+
// - 자식 매칭이 없더라도 그룹명이 매칭되면 그룹 헤더는 그대로 노출
|
|
13392
|
+
// (이때 children 은 빈 배열로 두고, 선택 동작은 collectVisibleLeaves
|
|
13393
|
+
// 의 fallback 이 원본 트리를 사용해 처리한다)
|
|
13351
13394
|
const filteredChildren = filterTree(option.children, keyword);
|
|
13352
13395
|
if (filteredChildren.length > 0) {
|
|
13353
13396
|
acc.push({ ...option, children: filteredChildren });
|
|
13354
13397
|
}
|
|
13398
|
+
else if (selfMatch) {
|
|
13399
|
+
acc.push({ ...option, children: [] });
|
|
13400
|
+
}
|
|
13401
|
+
}
|
|
13402
|
+
else if (selfMatch) {
|
|
13403
|
+
acc.push({ ...option });
|
|
13355
13404
|
}
|
|
13356
13405
|
return acc;
|
|
13357
13406
|
}, []);
|
|
13358
13407
|
}
|
|
13359
13408
|
|
|
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--
|
|
13409
|
+
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
13410
|
|
|
13362
13411
|
class SdSelectV2ListItem {
|
|
13363
13412
|
constructor(hostRef) {
|
|
@@ -13427,7 +13476,7 @@ class SdSelectV2ListItem {
|
|
|
13427
13476
|
if (isDepth1Group) {
|
|
13428
13477
|
cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
|
|
13429
13478
|
}
|
|
13430
|
-
return (hAsync("div", { key: '
|
|
13479
|
+
return (hAsync("div", { key: 'af73e77fdeb673b1862b7bd0b153ee0726a3f5db', class: {
|
|
13431
13480
|
'sd-select-v2-list-item': true,
|
|
13432
13481
|
'sd-select-v2-list-item--group': isGroup,
|
|
13433
13482
|
'sd-select-v2-list-item--depth1-group': isDepth1Group,
|
|
@@ -13437,7 +13486,7 @@ class SdSelectV2ListItem {
|
|
|
13437
13486
|
'sd-select-v2-list-item--focused': this.isFocused,
|
|
13438
13487
|
'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
13439
13488
|
'sd-select-v2-list-item--disabled': !!this.option.disabled,
|
|
13440
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
13489
|
+
}, 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
13490
|
}
|
|
13442
13491
|
static get style() { return sdSelectV2ListItemCss(); }
|
|
13443
13492
|
static get cmpMeta() { return {
|
|
@@ -13490,15 +13539,6 @@ class SdSelectV2ListItemSearch {
|
|
|
13490
13539
|
this.searchFilter.emit(this.searchText);
|
|
13491
13540
|
}, SEARCH_DEBOUNCE_MS);
|
|
13492
13541
|
};
|
|
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
13542
|
handleClear = (e) => {
|
|
13503
13543
|
e.stopPropagation();
|
|
13504
13544
|
this.searchText = '';
|
|
@@ -13514,12 +13554,12 @@ class SdSelectV2ListItemSearch {
|
|
|
13514
13554
|
clearTimeout(this.debounceTimer);
|
|
13515
13555
|
}
|
|
13516
13556
|
render() {
|
|
13517
|
-
return (hAsync("div", { key: '
|
|
13557
|
+
return (hAsync("div", { key: '7e0f812a04f8f72e41916aad1c2bd8313dac44c7', class: {
|
|
13518
13558
|
'sd-select-v2-list-item-search': true,
|
|
13519
13559
|
'sd-select-v2-list-item-search--scrolled': this.isScrolled,
|
|
13520
|
-
} }, hAsync("div", { key: '
|
|
13560
|
+
} }, 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
13561
|
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,
|
|
13562
|
+
}, 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
13563
|
}
|
|
13524
13564
|
static get style() { return sdSelectV2ListItemSearchCss(); }
|
|
13525
13565
|
static get cmpMeta() { return {
|
|
@@ -13536,7 +13576,7 @@ class SdSelectV2ListItemSearch {
|
|
|
13536
13576
|
}; }
|
|
13537
13577
|
}
|
|
13538
13578
|
|
|
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}`;
|
|
13579
|
+
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
13580
|
|
|
13541
13581
|
class SdSelectV2Listbox {
|
|
13542
13582
|
constructor(hostRef) {
|
|
@@ -13552,7 +13592,12 @@ class SdSelectV2Listbox {
|
|
|
13552
13592
|
maxHeight = '260px';
|
|
13553
13593
|
searchKeyword = '';
|
|
13554
13594
|
isScrolled = false;
|
|
13595
|
+
focusedIndex = -1;
|
|
13555
13596
|
optionSelect;
|
|
13597
|
+
listEl;
|
|
13598
|
+
lastScrolledIndex = -1;
|
|
13599
|
+
keydownAttached = false;
|
|
13600
|
+
suppressHover = false;
|
|
13556
13601
|
get isDepth() {
|
|
13557
13602
|
return this.name === 'default_depth' || this.name === 'multi_depth';
|
|
13558
13603
|
}
|
|
@@ -13602,9 +13647,9 @@ class SdSelectV2Listbox {
|
|
|
13602
13647
|
const selectedValues = this.getSelectedValues();
|
|
13603
13648
|
if (selectedValues.size === 0)
|
|
13604
13649
|
return false;
|
|
13605
|
-
const
|
|
13606
|
-
|
|
13607
|
-
|
|
13650
|
+
const leaves = this.collectVisibleLeaves(option);
|
|
13651
|
+
if (leaves.length === 0)
|
|
13652
|
+
return false;
|
|
13608
13653
|
const selectedCount = leaves.filter(l => selectedValues.has(l.value)).length;
|
|
13609
13654
|
if (selectedCount === 0)
|
|
13610
13655
|
return false;
|
|
@@ -13616,10 +13661,9 @@ class SdSelectV2Listbox {
|
|
|
13616
13661
|
if (!this.isMulti || !option.children)
|
|
13617
13662
|
return undefined;
|
|
13618
13663
|
const selectedValues = this.getSelectedValues();
|
|
13619
|
-
const
|
|
13620
|
-
const
|
|
13621
|
-
|
|
13622
|
-
return { selected: selectedCount, total: totalLeaves.length };
|
|
13664
|
+
const leaves = this.collectVisibleLeaves(option);
|
|
13665
|
+
const selectedCount = leaves.filter(l => selectedValues.has(l.value)).length;
|
|
13666
|
+
return { selected: selectedCount, total: leaves.length };
|
|
13623
13667
|
}
|
|
13624
13668
|
findOriginalOption(value, options) {
|
|
13625
13669
|
for (const opt of options) {
|
|
@@ -13638,21 +13682,177 @@ class SdSelectV2Listbox {
|
|
|
13638
13682
|
return [option];
|
|
13639
13683
|
return option.children.flatMap(child => this.collectLeaves(child));
|
|
13640
13684
|
}
|
|
13685
|
+
/**
|
|
13686
|
+
* Returns the leaves currently visible to the user for the given (possibly
|
|
13687
|
+
* filtered) option. When a group's own label matched the search keyword its
|
|
13688
|
+
* `children` is emptied by `filterTree`; in that case we fall back to the
|
|
13689
|
+
* full original subtree because the user has no way to deselect descendants
|
|
13690
|
+
* individually.
|
|
13691
|
+
*/
|
|
13692
|
+
collectVisibleLeaves(option) {
|
|
13693
|
+
if (!option.children)
|
|
13694
|
+
return [option];
|
|
13695
|
+
if (option.children.length === 0) {
|
|
13696
|
+
const original = this.findOriginalOption(option.value, this.options);
|
|
13697
|
+
return original ? this.collectLeaves(original) : [];
|
|
13698
|
+
}
|
|
13699
|
+
return option.children.flatMap(child => this.collectVisibleLeaves(child));
|
|
13700
|
+
}
|
|
13701
|
+
get navigableOptions() {
|
|
13702
|
+
const items = [];
|
|
13703
|
+
const walk = (opts) => {
|
|
13704
|
+
for (const opt of opts) {
|
|
13705
|
+
const isGroup = !!opt.children;
|
|
13706
|
+
const isSelectable = !isGroup || this.isMulti;
|
|
13707
|
+
if (isSelectable && !opt.disabled)
|
|
13708
|
+
items.push(opt);
|
|
13709
|
+
if (isGroup && opt.children && opt.children.length > 0)
|
|
13710
|
+
walk(opt.children);
|
|
13711
|
+
}
|
|
13712
|
+
};
|
|
13713
|
+
walk(this.filteredOptions);
|
|
13714
|
+
return items;
|
|
13715
|
+
}
|
|
13716
|
+
isOptionFocused(option) {
|
|
13717
|
+
if (this.focusedIndex < 0)
|
|
13718
|
+
return false;
|
|
13719
|
+
const focused = this.navigableOptions[this.focusedIndex];
|
|
13720
|
+
// filterTree 가 매 호출마다 옵션 객체를 새로 복제하기 때문에 참조 비교
|
|
13721
|
+
// (=== / indexOf) 는 검색이 적용된 동안 항상 실패한다. 고유 식별자인
|
|
13722
|
+
// value 로 비교해야 한다.
|
|
13723
|
+
return !!focused && focused.value === option.value;
|
|
13724
|
+
}
|
|
13725
|
+
resetFocusOnFilter() {
|
|
13726
|
+
// 필터가 바뀌면 이전 인덱스가 가리키던 항목이 사라질 수 있으므로
|
|
13727
|
+
// 새 결과의 첫 항목으로 옮긴다. 결과가 비면 -1.
|
|
13728
|
+
const items = this.navigableOptions;
|
|
13729
|
+
this.focusedIndex = items.length > 0 ? 0 : -1;
|
|
13730
|
+
// 키보드 네비게이션 직후 마우스가 한 번도 안 움직인 채로 사용자가
|
|
13731
|
+
// 검색을 시작했다면 hover suppression 이 켜진 상태로 남아있을 수 있다.
|
|
13732
|
+
// 검색이라는 명백한 사용자 의도 전환 시점에 강제로 해제한다.
|
|
13733
|
+
if (this.suppressHover) {
|
|
13734
|
+
document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
|
|
13735
|
+
this.suppressHover = false;
|
|
13736
|
+
}
|
|
13737
|
+
}
|
|
13641
13738
|
handleSearchFilter = (e) => {
|
|
13642
13739
|
this.searchKeyword = e.detail;
|
|
13643
13740
|
};
|
|
13644
13741
|
handleScroll = (e) => {
|
|
13645
13742
|
this.isScrolled = e.target.scrollTop > 0;
|
|
13646
13743
|
};
|
|
13744
|
+
emitOptionSelect(option) {
|
|
13745
|
+
this.optionSelect.emit({
|
|
13746
|
+
option,
|
|
13747
|
+
leaves: this.collectVisibleLeaves(option),
|
|
13748
|
+
});
|
|
13749
|
+
}
|
|
13647
13750
|
handleOptionClick = (e) => {
|
|
13648
13751
|
e.stopPropagation();
|
|
13649
|
-
this.
|
|
13752
|
+
this.emitOptionSelect(e.detail);
|
|
13753
|
+
};
|
|
13754
|
+
handleOptionHover = (option) => {
|
|
13755
|
+
if (this.suppressHover)
|
|
13756
|
+
return;
|
|
13757
|
+
const idx = this.navigableOptions.findIndex(o => o.value === option.value);
|
|
13758
|
+
if (idx >= 0)
|
|
13759
|
+
this.focusedIndex = idx;
|
|
13760
|
+
};
|
|
13761
|
+
releaseHoverSuppress = () => {
|
|
13762
|
+
this.suppressHover = false;
|
|
13763
|
+
document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
|
|
13764
|
+
};
|
|
13765
|
+
handleKeyDown = (e) => {
|
|
13766
|
+
const items = this.navigableOptions;
|
|
13767
|
+
if (e.key === 'ArrowDown') {
|
|
13768
|
+
if (items.length === 0)
|
|
13769
|
+
return;
|
|
13770
|
+
e.preventDefault();
|
|
13771
|
+
e.stopPropagation();
|
|
13772
|
+
this.focusedIndex = this.focusedIndex < 0 ? 0 : (this.focusedIndex + 1) % items.length;
|
|
13773
|
+
this.beginHoverSuppression();
|
|
13774
|
+
}
|
|
13775
|
+
else if (e.key === 'ArrowUp') {
|
|
13776
|
+
if (items.length === 0)
|
|
13777
|
+
return;
|
|
13778
|
+
e.preventDefault();
|
|
13779
|
+
e.stopPropagation();
|
|
13780
|
+
this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1;
|
|
13781
|
+
this.beginHoverSuppression();
|
|
13782
|
+
}
|
|
13783
|
+
else if (e.key === 'Enter') {
|
|
13784
|
+
if (this.focusedIndex < 0 || this.focusedIndex >= items.length)
|
|
13785
|
+
return;
|
|
13786
|
+
e.preventDefault();
|
|
13787
|
+
e.stopPropagation();
|
|
13788
|
+
this.emitOptionSelect(items[this.focusedIndex]);
|
|
13789
|
+
}
|
|
13650
13790
|
};
|
|
13791
|
+
/**
|
|
13792
|
+
* 키보드로 인덱스를 옮기면 자동 스크롤이 일어나는데, 정지한 마우스 커서
|
|
13793
|
+
* 아래로 다른 항목이 미끄러져 들어오면서 mouseenter 가 발화해 인덱스를
|
|
13794
|
+
* 다시 덮어쓰는 문제를 막는다. 실제로 마우스가 한 번이라도 움직이기 전까지
|
|
13795
|
+
* hover 갱신을 무시한다.
|
|
13796
|
+
*/
|
|
13797
|
+
beginHoverSuppression() {
|
|
13798
|
+
if (this.suppressHover)
|
|
13799
|
+
return;
|
|
13800
|
+
this.suppressHover = true;
|
|
13801
|
+
document.addEventListener('mousemove', this.releaseHoverSuppress, true);
|
|
13802
|
+
}
|
|
13803
|
+
/**
|
|
13804
|
+
* 리스트 컨테이너 내부에서만 스크롤한다. `scrollIntoView` 는 조상 스크롤
|
|
13805
|
+
* 컨테이너(=문서 자체)까지 함께 스크롤시키므로 사용하지 않는다.
|
|
13806
|
+
*/
|
|
13807
|
+
scrollFocusedIntoView() {
|
|
13808
|
+
const list = this.listEl;
|
|
13809
|
+
const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
|
|
13810
|
+
if (!list || !focusedEl)
|
|
13811
|
+
return;
|
|
13812
|
+
const listRect = list.getBoundingClientRect();
|
|
13813
|
+
const itemRect = focusedEl.getBoundingClientRect();
|
|
13814
|
+
if (itemRect.top < listRect.top) {
|
|
13815
|
+
list.scrollTop += itemRect.top - listRect.top;
|
|
13816
|
+
}
|
|
13817
|
+
else if (itemRect.bottom > listRect.bottom) {
|
|
13818
|
+
list.scrollTop += itemRect.bottom - listRect.bottom;
|
|
13819
|
+
}
|
|
13820
|
+
}
|
|
13821
|
+
/**
|
|
13822
|
+
* sd-portal 이 슬롯 노드를 body 로 이동시키면서 disconnect → connect 가
|
|
13823
|
+
* 발생하므로, 키보드 리스너는 한 번만 실행되는 componentDidLoad 가 아니라
|
|
13824
|
+
* connectedCallback / disconnectedCallback 에 묶어 매번 재부착한다.
|
|
13825
|
+
* capture phase 로 잡아 포커스가 검색 input 에 있어도 ↑/↓/Enter 가
|
|
13826
|
+
* input 의 기본 동작(커서 이동)·페이지 스크롤보다 먼저 처리되도록 한다.
|
|
13827
|
+
*/
|
|
13828
|
+
connectedCallback() {
|
|
13829
|
+
if (!this.keydownAttached) {
|
|
13830
|
+
document.addEventListener('keydown', this.handleKeyDown, true);
|
|
13831
|
+
this.keydownAttached = true;
|
|
13832
|
+
}
|
|
13833
|
+
}
|
|
13834
|
+
disconnectedCallback() {
|
|
13835
|
+
if (this.keydownAttached) {
|
|
13836
|
+
document.removeEventListener('keydown', this.handleKeyDown, true);
|
|
13837
|
+
this.keydownAttached = false;
|
|
13838
|
+
}
|
|
13839
|
+
if (this.suppressHover) {
|
|
13840
|
+
document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
|
|
13841
|
+
this.suppressHover = false;
|
|
13842
|
+
}
|
|
13843
|
+
}
|
|
13844
|
+
componentDidRender() {
|
|
13845
|
+
if (this.focusedIndex !== this.lastScrolledIndex) {
|
|
13846
|
+
this.lastScrolledIndex = this.focusedIndex;
|
|
13847
|
+
if (this.focusedIndex >= 0)
|
|
13848
|
+
this.scrollFocusedIntoView();
|
|
13849
|
+
}
|
|
13850
|
+
}
|
|
13651
13851
|
renderOptions(options, depth = 1) {
|
|
13652
13852
|
return options.map(option => {
|
|
13653
13853
|
const isGroup = !!option.children;
|
|
13654
13854
|
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 }),
|
|
13855
|
+
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
13856
|
isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
|
|
13657
13857
|
];
|
|
13658
13858
|
});
|
|
@@ -13665,8 +13865,15 @@ class SdSelectV2Listbox {
|
|
|
13665
13865
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
13666
13866
|
'--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
|
|
13667
13867
|
};
|
|
13668
|
-
return (hAsync("div", { key: '
|
|
13868
|
+
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 => {
|
|
13869
|
+
this.listEl = el;
|
|
13870
|
+
} }, 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
13871
|
}
|
|
13872
|
+
static get watchers() { return {
|
|
13873
|
+
"searchKeyword": [{
|
|
13874
|
+
"resetFocusOnFilter": 0
|
|
13875
|
+
}]
|
|
13876
|
+
}; }
|
|
13670
13877
|
static get style() { return sdSelectV2ListboxCss(); }
|
|
13671
13878
|
static get cmpMeta() { return {
|
|
13672
13879
|
"$flags$": 512,
|
|
@@ -13680,7 +13887,8 @@ class SdSelectV2Listbox {
|
|
|
13680
13887
|
"maxWidth": [1, "max-width"],
|
|
13681
13888
|
"maxHeight": [1, "max-height"],
|
|
13682
13889
|
"searchKeyword": [32],
|
|
13683
|
-
"isScrolled": [32]
|
|
13890
|
+
"isScrolled": [32],
|
|
13891
|
+
"focusedIndex": [32]
|
|
13684
13892
|
},
|
|
13685
13893
|
"$listeners$": undefined,
|
|
13686
13894
|
"$lazyBundleId$": "-",
|
|
@@ -13720,11 +13928,11 @@ class SdSelectV2Trigger {
|
|
|
13720
13928
|
: SELECT_COLORS.icon.default,
|
|
13721
13929
|
'--trigger-icon-color': this.disabled ? SELECT_COLORS.icon.disabled : SELECT_COLORS.icon.default,
|
|
13722
13930
|
};
|
|
13723
|
-
return (hAsync("div", { key: '
|
|
13931
|
+
return (hAsync("div", { key: '2cf4cc98bbfc8808f84d1d6b9dbfbb4f1afee272', class: {
|
|
13724
13932
|
'sd-select-v2-trigger': true,
|
|
13725
13933
|
'sd-select-v2-trigger--open': this.isOpen,
|
|
13726
13934
|
'sd-select-v2-trigger--disabled': this.disabled,
|
|
13727
|
-
}, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: '
|
|
13935
|
+
}, 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
13936
|
'sd-select-v2-trigger__icon': true,
|
|
13729
13937
|
'sd-select-v2-trigger__icon--open': this.isOpen,
|
|
13730
13938
|
} }))));
|
|
@@ -14839,7 +15047,7 @@ class SdTag {
|
|
|
14839
15047
|
render() {
|
|
14840
15048
|
const config = this.resolvedConfig;
|
|
14841
15049
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
14842
|
-
return (hAsync("span", { key: '
|
|
15050
|
+
return (hAsync("span", { key: 'f55a5b3c1aec907d8bc7cf8f52cb3ab33af73801', class: "sd-tag", style: {
|
|
14843
15051
|
'--sd-tag-background': config.background,
|
|
14844
15052
|
'--sd-tag-content': config.content,
|
|
14845
15053
|
'--sd-tag-height': config.height,
|
|
@@ -14849,7 +15057,7 @@ class SdTag {
|
|
|
14849
15057
|
'--sd-tag-font-weight': config.fontWeight,
|
|
14850
15058
|
'--sd-tag-line-height': config.lineHeight,
|
|
14851
15059
|
'--sd-tag-radius': config.radius,
|
|
14852
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
15060
|
+
}, "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
15061
|
}
|
|
14854
15062
|
static get style() { return sdTagCss(); }
|
|
14855
15063
|
static get cmpMeta() { return {
|
|
@@ -14947,16 +15155,16 @@ class SdTextLink {
|
|
|
14947
15155
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
14948
15156
|
'--sd-text-link-color': contentColor,
|
|
14949
15157
|
};
|
|
14950
|
-
return (hAsync("span", { key: '
|
|
15158
|
+
return (hAsync("span", { key: '3345bf7ddd99b9eeca4e8e6014f88e5f4505665e', class: {
|
|
14951
15159
|
'sd-text-link': true,
|
|
14952
15160
|
'sd-text-link--disabled': this.disabled,
|
|
14953
|
-
}, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '
|
|
15161
|
+
}, 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
15162
|
width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
|
|
14955
15163
|
height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
|
|
14956
15164
|
display: 'inline-flex',
|
|
14957
15165
|
alignItems: 'center',
|
|
14958
15166
|
justifyContent: 'center',
|
|
14959
|
-
} }, hAsync("sd-icon", { key: '
|
|
15167
|
+
} }, hAsync("sd-icon", { key: '01def7dd04278fce78f9eb49efd857999fa255db', name: "arrowRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
|
|
14960
15168
|
}
|
|
14961
15169
|
static get style() { return sdTextLinkCss(); }
|
|
14962
15170
|
static get cmpMeta() { return {
|
|
@@ -15060,10 +15268,10 @@ class SdTextarea {
|
|
|
15060
15268
|
}
|
|
15061
15269
|
render() {
|
|
15062
15270
|
const maxLengthCounter = this.getMaxLengthCounter();
|
|
15063
|
-
return (hAsync("div", { key: '
|
|
15271
|
+
return (hAsync("div", { key: 'abc90981d61632afc86d158283575cd65031e10e', class: {
|
|
15064
15272
|
'sd-textarea': true,
|
|
15065
15273
|
[this.getTextareaStatus()]: true,
|
|
15066
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '
|
|
15274
|
+
}, 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
15275
|
}
|
|
15068
15276
|
static get watchers() { return {
|
|
15069
15277
|
"value": [{
|
|
@@ -15153,10 +15361,10 @@ class SdToast {
|
|
|
15153
15361
|
render() {
|
|
15154
15362
|
const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
|
|
15155
15363
|
const iconSize = Number(TOAST_LAYOUT.iconSize);
|
|
15156
|
-
return (hAsync("div", { key: '
|
|
15364
|
+
return (hAsync("div", { key: 'd8e1a82c9daebbe6b262bedcecd3fcdb5d9cdff6', style: {
|
|
15157
15365
|
'--sd-toast-bg': typeConfig.bg,
|
|
15158
15366
|
'--sd-toast-text': typeConfig.content,
|
|
15159
|
-
} }, hAsync("div", { key: '
|
|
15367
|
+
} }, 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
15368
|
}
|
|
15161
15369
|
static get style() { return sdToastCss(); }
|
|
15162
15370
|
static get cmpMeta() { return {
|
|
@@ -15408,7 +15616,7 @@ class SdToastContainer {
|
|
|
15408
15616
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
15409
15617
|
const indexMap = new Map();
|
|
15410
15618
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
15411
|
-
return (hAsync("div", { key: '
|
|
15619
|
+
return (hAsync("div", { key: 'ea70acd97b25230c2c2ae74504381fe00d458043', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
15412
15620
|
this.expanded = true;
|
|
15413
15621
|
this.pauseTimers();
|
|
15414
15622
|
}, onMouseLeave: () => {
|
|
@@ -15483,7 +15691,7 @@ class SdToggle {
|
|
|
15483
15691
|
this.change.emit(newValue);
|
|
15484
15692
|
};
|
|
15485
15693
|
render() {
|
|
15486
|
-
return (hAsync("label", { key: '
|
|
15694
|
+
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
15695
|
}
|
|
15488
15696
|
static get style() { return sdToggleCss(); }
|
|
15489
15697
|
static get cmpMeta() { return {
|
|
@@ -15539,7 +15747,7 @@ class SdToggleButton {
|
|
|
15539
15747
|
this.change.emit(newValue);
|
|
15540
15748
|
};
|
|
15541
15749
|
render() {
|
|
15542
|
-
return (hAsync("label", { key: '
|
|
15750
|
+
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
15751
|
}
|
|
15544
15752
|
static get style() { return sdToggleButtonCss(); }
|
|
15545
15753
|
static get cmpMeta() { return {
|
|
@@ -15602,6 +15810,14 @@ class SdTooltip {
|
|
|
15602
15810
|
showTooltip = false;
|
|
15603
15811
|
slotContentHTML = '';
|
|
15604
15812
|
buttonEl;
|
|
15813
|
+
get tooltipOffset() {
|
|
15814
|
+
switch (this.placement) {
|
|
15815
|
+
case 'top': return [0, -4];
|
|
15816
|
+
case 'bottom': return [0, 4];
|
|
15817
|
+
case 'left': return [4, 0];
|
|
15818
|
+
case 'right': return [4, 0];
|
|
15819
|
+
}
|
|
15820
|
+
}
|
|
15605
15821
|
handleClose = () => {
|
|
15606
15822
|
this.showTooltip = false;
|
|
15607
15823
|
};
|
|
@@ -15628,14 +15844,14 @@ class SdTooltip {
|
|
|
15628
15844
|
: {
|
|
15629
15845
|
onSdClick: () => (this.showTooltip = !this.showTooltip),
|
|
15630
15846
|
};
|
|
15631
|
-
return (hAsync(Fragment, { key: '
|
|
15847
|
+
return (hAsync(Fragment, { key: '2890811dd681299b155d191d6d6023441db6debc' }, 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: '666cf59e0548af92eff225cd91b485824b82249d', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement, offset: this.tooltipOffset }, hAsync("div", { key: 'ad5285750f95fdb0829372dd3b45d96035a02315', class: {
|
|
15632
15848
|
'sd-floating-menu': true,
|
|
15633
15849
|
[`sd-floating-menu--${this.tooltipType}`]: true,
|
|
15634
15850
|
[`sd-floating-menu--${this.placement}`]: true,
|
|
15635
15851
|
}, style: {
|
|
15636
15852
|
'--sd-floating-bg': typeConfig.bg,
|
|
15637
15853
|
'--sd-floating-content': typeConfig.content,
|
|
15638
|
-
} }, hAsync("i", { key: '
|
|
15854
|
+
} }, hAsync("i", { key: 'ee92f004dbd17de84a3410bd555da735c5fcb4ca', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '04ccadfa1de8bcf3b64218e6e048fcbf09ff3301' })), hAsync("div", { key: '0534c8cec5c79c8b0df3950d554a1b62d1e3b32b', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
|
|
15639
15855
|
}
|
|
15640
15856
|
static get style() { return sdTooltipCss(); }
|
|
15641
15857
|
static get cmpMeta() { return {
|
|
@@ -15663,6 +15879,7 @@ class SdTooltip {
|
|
|
15663
15879
|
|
|
15664
15880
|
registerComponents([
|
|
15665
15881
|
SdBadge,
|
|
15882
|
+
SdBarcodeInput,
|
|
15666
15883
|
SdButton,
|
|
15667
15884
|
SdButtonV2,
|
|
15668
15885
|
SdCalendar,
|
|
@@ -15682,7 +15899,6 @@ registerComponents([
|
|
|
15682
15899
|
SdInput,
|
|
15683
15900
|
SdLoadingSpinner,
|
|
15684
15901
|
SdModalContainer,
|
|
15685
|
-
SdNoticeModal,
|
|
15686
15902
|
SdNumberInput,
|
|
15687
15903
|
SdPagination,
|
|
15688
15904
|
SdPopover,
|