@sellmate/design-system 0.0.13 → 0.0.16

package/dist/components/sd-guide.js

@@ -1,11 +1,29 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CLODAhOA.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-D_VunbXE.js';
 import { c as colors } from './p-BYf-ybt2.js';
-import { d as defineCustomElement$4 } from './p-tyC8W4sw.js';
-import { d as defineCustomElement$3 } from './p-DVFPBdfj.js';
-import { d as defineCustomElement$2 } from './p-BqCRj-SM.js';
+import { d as defineCustomElement$4 } from './p-Biihf4L_.js';
+import { d as defineCustomElement$3 } from './p-B60pARKe.js';
+import { d as defineCustomElement$2 } from './p-CxfkkYH4.js';
 
-const sdGuideCss = "@charset \"UTF-8\";@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\")}.sc-sd-guide:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html.sc-sd-guide{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary.sc-sd-guide{background-color:var(--color-primary, #051d36)}.bg-secondary.sc-sd-guide{background-color:var(--color-secondary, #555555)}.bg-accent.sc-sd-guide{background-color:var(--color-accent, #9c27b0)}.bg-positive.sc-sd-guide{background-color:var(--color-positive, #0075ff)}.bg-negative.sc-sd-guide{background-color:var(--color-negative, #e30000)}.bg-info.sc-sd-guide{background-color:var(--color-info, #00cd52)}.bg-warning.sc-sd-guide{background-color:var(--color-warning, #f2c037)}.bg-red_99.sc-sd-guide{background-color:var(--color-red_99, #220000)}.bg-red_95.sc-sd-guide{background-color:var(--color-red_95, #440000)}.bg-red_90.sc-sd-guide{background-color:var(--color-red_90, #5E0000)}.bg-red_85.sc-sd-guide{background-color:var(--color-red_85, #820000)}.bg-red_80.sc-sd-guide{background-color:var(--color-red_80, #AD0000)}.bg-red_75.sc-sd-guide{background-color:var(--color-red_75, #E30000)}.bg-red_70.sc-sd-guide{background-color:var(--color-red_70, #FB4444)}.bg-red_60.sc-sd-guide{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45.sc-sd-guide{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30.sc-sd-guide{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20.sc-sd-guide{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15.sc-sd-guide{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg.sc-sd-guide{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon.sc-sd-guide{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99.sc-sd-guide{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95.sc-sd-guide{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90.sc-sd-guide{background-color:var(--color-orange_90, #752A00)}.bg-orange_85.sc-sd-guide{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75.sc-sd-guide{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65.sc-sd-guide{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60.sc-sd-guide{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55.sc-sd-guide{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45.sc-sd-guide{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35.sc-sd-guide{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20.sc-sd-guide{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10.sc-sd-guide{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert.sc-sd-guide{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95.sc-sd-guide{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90.sc-sd-guide{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80.sc-sd-guide{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70.sc-sd-guide{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60.sc-sd-guide{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50.sc-sd-guide{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45.sc-sd-guide{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40.sc-sd-guide{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30.sc-sd-guide{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25.sc-sd-guide{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20.sc-sd-guide{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10.sc-sd-guide{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95.sc-sd-guide{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90.sc-sd-guide{background-color:var(--color-olive_90, #454500)}.bg-olive_80.sc-sd-guide{background-color:var(--color-olive_80, #636300)}.bg-olive_70.sc-sd-guide{background-color:var(--color-olive_70, #838300)}.bg-olive_65.sc-sd-guide{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55.sc-sd-guide{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45.sc-sd-guide{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30.sc-sd-guide{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20.sc-sd-guide{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15.sc-sd-guide{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10.sc-sd-guide{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05.sc-sd-guide{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99.sc-sd-guide{background-color:var(--color-green_99, #001D0B)}.bg-green_95.sc-sd-guide{background-color:var(--color-green_95, #003013)}.bg-green_90.sc-sd-guide{background-color:var(--color-green_90, #00461C)}.bg-green_85.sc-sd-guide{background-color:var(--color-green_85, #006629)}.bg-green_80.sc-sd-guide{background-color:var(--color-green_80, #007B31)}.bg-green_75.sc-sd-guide{background-color:var(--color-green_75, #00973C)}.bg-green_70.sc-sd-guide{background-color:var(--color-green_70, #12B553)}.bg-green_65.sc-sd-guide{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55.sc-sd-guide{background-color:var(--color-green_55, #6DE39C)}.bg-green_45.sc-sd-guide{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25.sc-sd-guide{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15.sc-sd-guide{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99.sc-sd-guide{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95.sc-sd-guide{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90.sc-sd-guide{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85.sc-sd-guide{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80.sc-sd-guide{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75.sc-sd-guide{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70.sc-sd-guide{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65.sc-sd-guide{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60.sc-sd-guide{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45.sc-sd-guide{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25.sc-sd-guide{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10.sc-sd-guide{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99.sc-sd-guide{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95.sc-sd-guide{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90.sc-sd-guide{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85.sc-sd-guide{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80.sc-sd-guide{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75.sc-sd-guide{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70.sc-sd-guide{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65.sc-sd-guide{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60.sc-sd-guide{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50.sc-sd-guide{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25.sc-sd-guide{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15.sc-sd-guide{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99.sc-sd-guide{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95.sc-sd-guide{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90.sc-sd-guide{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85.sc-sd-guide{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80.sc-sd-guide{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75.sc-sd-guide{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70.sc-sd-guide{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60.sc-sd-guide{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50.sc-sd-guide{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40.sc-sd-guide{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25.sc-sd-guide{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20.sc-sd-guide{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10.sc-sd-guide{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05.sc-sd-guide{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95.sc-sd-guide{background-color:var(--color-grey_95, #222222)}.bg-grey_90.sc-sd-guide{background-color:var(--color-grey_90, #333333)}.bg-grey_85.sc-sd-guide{background-color:var(--color-grey_85, #444444)}.bg-grey_80.sc-sd-guide{background-color:var(--color-grey_80, #555555)}.bg-grey_70.sc-sd-guide{background-color:var(--color-grey_70, #737373)}.bg-grey_65.sc-sd-guide{background-color:var(--color-grey_65, #888888)}.bg-grey_60.sc-sd-guide{background-color:var(--color-grey_60, #999999)}.bg-grey_55.sc-sd-guide{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50.sc-sd-guide{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45.sc-sd-guide{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35.sc-sd-guide{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30.sc-sd-guide{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25.sc-sd-guide{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20.sc-sd-guide{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10.sc-sd-guide{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05.sc-sd-guide{background-color:var(--color-grey_05, #f9f9f9)}.bg-white.sc-sd-guide{background-color:var(--color-white, #ffffff)}.bg-black.sc-sd-guide{background-color:var(--color-black, #000000)}.text-primary.sc-sd-guide{color:var(--color-primary, #051d36)}.text-secondary.sc-sd-guide{color:var(--color-secondary, #555555)}.text-accent.sc-sd-guide{color:var(--color-accent, #9c27b0)}.text-positive.sc-sd-guide{color:var(--color-positive, #0075ff)}.text-negative.sc-sd-guide{color:var(--color-negative, #e30000)}.text-info.sc-sd-guide{color:var(--color-info, #00cd52)}.text-warning.sc-sd-guide{color:var(--color-warning, #f2c037)}.text-red_99.sc-sd-guide{color:var(--color-red_99, #220000)}.text-red_95.sc-sd-guide{color:var(--color-red_95, #440000)}.text-red_90.sc-sd-guide{color:var(--color-red_90, #5E0000)}.text-red_85.sc-sd-guide{color:var(--color-red_85, #820000)}.text-red_80.sc-sd-guide{color:var(--color-red_80, #AD0000)}.text-red_75.sc-sd-guide{color:var(--color-red_75, #E30000)}.text-red_70.sc-sd-guide{color:var(--color-red_70, #FB4444)}.text-red_60.sc-sd-guide{color:var(--color-red_60, #FF7C7C)}.text-red_45.sc-sd-guide{color:var(--color-red_45, #FFB5B5)}.text-red_30.sc-sd-guide{color:var(--color-red_30, #FFD3D3)}.text-red_20.sc-sd-guide{color:var(--color-red_20, #FCE6E6)}.text-red_15.sc-sd-guide{color:var(--color-red_15, #FCEFEF)}.text-caution_bg.sc-sd-guide{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon.sc-sd-guide{color:var(--color-caution_icon, #fd9595)}.text-orange_99.sc-sd-guide{color:var(--color-orange_99, #2F1100)}.text-orange_95.sc-sd-guide{color:var(--color-orange_95, #4D1B00)}.text-orange_90.sc-sd-guide{color:var(--color-orange_90, #752A00)}.text-orange_85.sc-sd-guide{color:var(--color-orange_85, #9B3700)}.text-orange_75.sc-sd-guide{color:var(--color-orange_75, #CE4900)}.text-orange_65.sc-sd-guide{color:var(--color-orange_65, #FF6B00)}.text-orange_60.sc-sd-guide{color:var(--color-orange_60, #FF7F22)}.text-orange_55.sc-sd-guide{color:var(--color-orange_55, #FFA452)}.text-orange_45.sc-sd-guide{color:var(--color-orange_45, #FFBC81)}.text-orange_35.sc-sd-guide{color:var(--color-orange_35, #FFD5AF)}.text-orange_20.sc-sd-guide{color:var(--color-orange_20, #FFEAD7)}.text-orange_10.sc-sd-guide{color:var(--color-orange_10, #FEF1EA)}.text-header_alert.sc-sd-guide{color:var(--color-header_alert, #FF7A00)}.text-yellow_95.sc-sd-guide{color:var(--color-yellow_95, #322700)}.text-yellow_90.sc-sd-guide{color:var(--color-yellow_90, #453702)}.text-yellow_80.sc-sd-guide{color:var(--color-yellow_80, #6C5602)}.text-yellow_70.sc-sd-guide{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60.sc-sd-guide{color:var(--color-yellow_60, #C49900)}.text-yellow_50.sc-sd-guide{color:var(--color-yellow_50, #EBB800)}.text-yellow_45.sc-sd-guide{color:var(--color-yellow_45, #FFC700)}.text-yellow_40.sc-sd-guide{color:var(--color-yellow_40, #FFD643)}.text-yellow_30.sc-sd-guide{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25.sc-sd-guide{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20.sc-sd-guide{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10.sc-sd-guide{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95.sc-sd-guide{color:var(--color-olive_95, #2C2C00)}.text-olive_90.sc-sd-guide{color:var(--color-olive_90, #454500)}.text-olive_80.sc-sd-guide{color:var(--color-olive_80, #636300)}.text-olive_70.sc-sd-guide{color:var(--color-olive_70, #838300)}.text-olive_65.sc-sd-guide{color:var(--color-olive_65, #A5A500)}.text-olive_55.sc-sd-guide{color:var(--color-olive_55, #C7C700)}.text-olive_45.sc-sd-guide{color:var(--color-olive_45, #DDDD12)}.text-olive_30.sc-sd-guide{color:var(--color-olive_30, #EEEE37)}.text-olive_20.sc-sd-guide{color:var(--color-olive_20, #F6F65F)}.text-olive_15.sc-sd-guide{color:var(--color-olive_15, #FAFAA1)}.text-olive_10.sc-sd-guide{color:var(--color-olive_10, #FBFBBF)}.text-olive_05.sc-sd-guide{color:var(--color-olive_05, #FEFED9)}.text-green_99.sc-sd-guide{color:var(--color-green_99, #001D0B)}.text-green_95.sc-sd-guide{color:var(--color-green_95, #003013)}.text-green_90.sc-sd-guide{color:var(--color-green_90, #00461C)}.text-green_85.sc-sd-guide{color:var(--color-green_85, #006629)}.text-green_80.sc-sd-guide{color:var(--color-green_80, #007B31)}.text-green_75.sc-sd-guide{color:var(--color-green_75, #00973C)}.text-green_70.sc-sd-guide{color:var(--color-green_70, #12B553)}.text-green_65.sc-sd-guide{color:var(--color-green_65, #2BCE6C)}.text-green_55.sc-sd-guide{color:var(--color-green_55, #6DE39C)}.text-green_45.sc-sd-guide{color:var(--color-green_45, #ACF4C9)}.text-green_25.sc-sd-guide{color:var(--color-green_25, #D4FAE3)}.text-green_15.sc-sd-guide{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99.sc-sd-guide{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95.sc-sd-guide{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90.sc-sd-guide{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85.sc-sd-guide{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80.sc-sd-guide{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75.sc-sd-guide{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70.sc-sd-guide{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65.sc-sd-guide{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60.sc-sd-guide{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45.sc-sd-guide{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25.sc-sd-guide{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10.sc-sd-guide{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99.sc-sd-guide{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95.sc-sd-guide{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90.sc-sd-guide{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85.sc-sd-guide{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80.sc-sd-guide{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75.sc-sd-guide{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70.sc-sd-guide{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65.sc-sd-guide{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60.sc-sd-guide{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50.sc-sd-guide{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25.sc-sd-guide{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15.sc-sd-guide{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99.sc-sd-guide{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95.sc-sd-guide{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90.sc-sd-guide{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85.sc-sd-guide{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80.sc-sd-guide{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75.sc-sd-guide{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70.sc-sd-guide{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60.sc-sd-guide{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50.sc-sd-guide{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40.sc-sd-guide{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25.sc-sd-guide{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20.sc-sd-guide{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10.sc-sd-guide{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05.sc-sd-guide{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95.sc-sd-guide{color:var(--color-grey_95, #222222)}.text-grey_90.sc-sd-guide{color:var(--color-grey_90, #333333)}.text-grey_85.sc-sd-guide{color:var(--color-grey_85, #444444)}.text-grey_80.sc-sd-guide{color:var(--color-grey_80, #555555)}.text-grey_70.sc-sd-guide{color:var(--color-grey_70, #737373)}.text-grey_65.sc-sd-guide{color:var(--color-grey_65, #888888)}.text-grey_60.sc-sd-guide{color:var(--color-grey_60, #999999)}.text-grey_55.sc-sd-guide{color:var(--color-grey_55, #aaaaaa)}.text-grey_50.sc-sd-guide{color:var(--color-grey_50, #bbbbbb)}.text-grey_45.sc-sd-guide{color:var(--color-grey_45, #cccccc)}.text-grey_35.sc-sd-guide{color:var(--color-grey_35, #D8D8D8)}.text-grey_30.sc-sd-guide{color:var(--color-grey_30, #e1e1e1)}.text-grey_25.sc-sd-guide{color:var(--color-grey_25, #E5E5E5)}.text-grey_20.sc-sd-guide{color:var(--color-grey_20, #eeeeee)}.text-grey_10.sc-sd-guide{color:var(--color-grey_10, #f6f6f6)}.text-grey_05.sc-sd-guide{color:var(--color-grey_05, #f9f9f9)}.text-white.sc-sd-guide{color:var(--color-white, #ffffff)}.text-black.sc-sd-guide{color:var(--color-black, #000000)}*.sc-sd-guide,*.sc-sd-guide::before,*.sc-sd-guide::after{box-sizing:border-box}html.sc-sd-guide{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body.sc-sd-guide,h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide,p.sc-sd-guide,figure.sc-sd-guide,blockquote.sc-sd-guide,dl.sc-sd-guide,dd.sc-sd-guide{margin-block-end:0}ul[role=list].sc-sd-guide,ol[role=list].sc-sd-guide{list-style:none}body.sc-sd-guide{min-height:100vh;line-height:1.5}h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide,button.sc-sd-guide,input.sc-sd-guide,label.sc-sd-guide{line-height:1}h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide{text-wrap:balance}a.sc-sd-guide:not([class]){text-decoration-skip-ink:auto;color:currentColor}img.sc-sd-guide,picture.sc-sd-guide{max-width:100%;display:block}input.sc-sd-guide,button.sc-sd-guide,textarea.sc-sd-guide,select.sc-sd-guide{font-size:inherit}.sc-sd-guide:target{scroll-margin-block:5ex}button.sc-sd-guide{background:none;border:none;cursor:pointer;padding:0;outline:0}button.sc-sd-guide:focus{outline:0 !important}.sc-sd-guide-h{display:inline-block;height:fit-content;line-height:0}.text-center.sc-sd-guide{text-align:center}.text-right.sc-sd-guide{text-align:right}.text-left.sc-sd-guide{text-align:left}input[type=text].sc-sd-guide,input[type=number].sc-sd-guide,input[type=password].sc-sd-guide,input[type=email].sc-sd-guide,input[type=tel].sc-sd-guide,textarea.sc-sd-guide{padding-block:0px;padding-inline:0px}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide{background:currentColor;opacity:0.15}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide:before{opacity:0.1}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide:after{opacity:0.4}.sd-focus-helper.sc-sd-guide{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.sc-sd-guide:before,.sd-focus-helper.sc-sd-guide: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.sc-sd-guide:before{background:#000000}.sd-focus-helper.sc-sd-guide:after{background:#ffffff}.sd-tooltip-menu.sc-sd-guide{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close.sc-sd-guide{padding-right:12px !important}.sd-tooltip-menu__arrow.sc-sd-guide{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow.sc-sd-guide svg.sc-sd-guide{width:100%;height:100%}.sd-tooltip-menu__arrow--top.sc-sd-guide{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom.sc-sd-guide{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left.sc-sd-guide{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right.sc-sd-guide{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content.sc-sd-guide{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button.sc-sd-guide{padding-top:4px;display:flex}.sd-tooltip-menu__close-button.sc-sd-guide button.sc-sd-guide{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu.sc-sd-guide{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow.sc-sd-guide{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow.sc-sd-guide svg.sc-sd-guide{width:100%;height:100%}.sd-popover-menu__arrow--top.sc-sd-guide{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom.sc-sd-guide{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left.sc-sd-guide{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right.sc-sd-guide{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content.sc-sd-guide{font-size:12px;line-height:20px}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__title.sc-sd-guide{font-weight:700;margin-bottom:4px}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__messages.sc-sd-guide{font-weight:500}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons.sc-sd-guide{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons--1.sc-sd-guide{justify-content:flex-end}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons--2.sc-sd-guide{justify-content:space-between}.sd-popover-menu__close-button.sc-sd-guide{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-guide__popup.sc-sd-guide{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup__close.sc-sd-guide{position:absolute;top:12px;right:12px}.sd-guide__popup__header.sc-sd-guide{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header.sc-sd-guide .sd-guide__popup__title.sc-sd-guide{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list.sc-sd-guide{width:100%;padding:0;margin:0}.sd-guide__popup__list__item.sc-sd-guide{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item.sc-sd-guide p.sc-sd-guide{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item.sc-sd-guide::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2.sc-sd-guide::before{content:\"•\"}.sd-guide__popup__list__item--depth-2.sc-sd-guide{padding-left:26px}";
+const sdGuideCss = "@charset \"UTF-8\";.bg-primary.sc-sd-guide{background-color:var(--color-primary, #051d36)}.bg-secondary.sc-sd-guide{background-color:var(--color-secondary, #555555)}.bg-accent.sc-sd-guide{background-color:var(--color-accent, #9c27b0)}.bg-positive.sc-sd-guide{background-color:var(--color-positive, #0075ff)}.bg-negative.sc-sd-guide{background-color:var(--color-negative, #e30000)}.bg-info.sc-sd-guide{background-color:var(--color-info, #00cd52)}.bg-warning.sc-sd-guide{background-color:var(--color-warning, #f2c037)}.bg-red_99.sc-sd-guide{background-color:var(--color-red_99, #220000)}.bg-red_95.sc-sd-guide{background-color:var(--color-red_95, #440000)}.bg-red_90.sc-sd-guide{background-color:var(--color-red_90, #5E0000)}.bg-red_85.sc-sd-guide{background-color:var(--color-red_85, #820000)}.bg-red_80.sc-sd-guide{background-color:var(--color-red_80, #AD0000)}.bg-red_75.sc-sd-guide{background-color:var(--color-red_75, #E30000)}.bg-red_70.sc-sd-guide{background-color:var(--color-red_70, #FB4444)}.bg-red_60.sc-sd-guide{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45.sc-sd-guide{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30.sc-sd-guide{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20.sc-sd-guide{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15.sc-sd-guide{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg.sc-sd-guide{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon.sc-sd-guide{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99.sc-sd-guide{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95.sc-sd-guide{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90.sc-sd-guide{background-color:var(--color-orange_90, #752A00)}.bg-orange_85.sc-sd-guide{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75.sc-sd-guide{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65.sc-sd-guide{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60.sc-sd-guide{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55.sc-sd-guide{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45.sc-sd-guide{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35.sc-sd-guide{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20.sc-sd-guide{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10.sc-sd-guide{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert.sc-sd-guide{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95.sc-sd-guide{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90.sc-sd-guide{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80.sc-sd-guide{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70.sc-sd-guide{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60.sc-sd-guide{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50.sc-sd-guide{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45.sc-sd-guide{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40.sc-sd-guide{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30.sc-sd-guide{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25.sc-sd-guide{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20.sc-sd-guide{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10.sc-sd-guide{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95.sc-sd-guide{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90.sc-sd-guide{background-color:var(--color-olive_90, #454500)}.bg-olive_80.sc-sd-guide{background-color:var(--color-olive_80, #636300)}.bg-olive_70.sc-sd-guide{background-color:var(--color-olive_70, #838300)}.bg-olive_65.sc-sd-guide{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55.sc-sd-guide{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45.sc-sd-guide{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30.sc-sd-guide{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20.sc-sd-guide{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15.sc-sd-guide{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10.sc-sd-guide{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05.sc-sd-guide{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99.sc-sd-guide{background-color:var(--color-green_99, #001D0B)}.bg-green_95.sc-sd-guide{background-color:var(--color-green_95, #003013)}.bg-green_90.sc-sd-guide{background-color:var(--color-green_90, #00461C)}.bg-green_85.sc-sd-guide{background-color:var(--color-green_85, #006629)}.bg-green_80.sc-sd-guide{background-color:var(--color-green_80, #007B31)}.bg-green_75.sc-sd-guide{background-color:var(--color-green_75, #00973C)}.bg-green_70.sc-sd-guide{background-color:var(--color-green_70, #12B553)}.bg-green_65.sc-sd-guide{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55.sc-sd-guide{background-color:var(--color-green_55, #6DE39C)}.bg-green_45.sc-sd-guide{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25.sc-sd-guide{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15.sc-sd-guide{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99.sc-sd-guide{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95.sc-sd-guide{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90.sc-sd-guide{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85.sc-sd-guide{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80.sc-sd-guide{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75.sc-sd-guide{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70.sc-sd-guide{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65.sc-sd-guide{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60.sc-sd-guide{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45.sc-sd-guide{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25.sc-sd-guide{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10.sc-sd-guide{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99.sc-sd-guide{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95.sc-sd-guide{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90.sc-sd-guide{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85.sc-sd-guide{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80.sc-sd-guide{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75.sc-sd-guide{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70.sc-sd-guide{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65.sc-sd-guide{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60.sc-sd-guide{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50.sc-sd-guide{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25.sc-sd-guide{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15.sc-sd-guide{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99.sc-sd-guide{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95.sc-sd-guide{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90.sc-sd-guide{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85.sc-sd-guide{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80.sc-sd-guide{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75.sc-sd-guide{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70.sc-sd-guide{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60.sc-sd-guide{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50.sc-sd-guide{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40.sc-sd-guide{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25.sc-sd-guide{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20.sc-sd-guide{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10.sc-sd-guide{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05.sc-sd-guide{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95.sc-sd-guide{background-color:var(--color-grey_95, #222222)}.bg-grey_90.sc-sd-guide{background-color:var(--color-grey_90, #333333)}.bg-grey_85.sc-sd-guide{background-color:var(--color-grey_85, #444444)}.bg-grey_80.sc-sd-guide{background-color:var(--color-grey_80, #555555)}.bg-grey_70.sc-sd-guide{background-color:var(--color-grey_70, #737373)}.bg-grey_65.sc-sd-guide{background-color:var(--color-grey_65, #888888)}.bg-grey_60.sc-sd-guide{background-color:var(--color-grey_60, #999999)}.bg-grey_55.sc-sd-guide{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50.sc-sd-guide{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45.sc-sd-guide{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35.sc-sd-guide{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30.sc-sd-guide{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25.sc-sd-guide{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20.sc-sd-guide{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10.sc-sd-guide{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05.sc-sd-guide{background-color:var(--color-grey_05, #f9f9f9)}.bg-white.sc-sd-guide{background-color:var(--color-white, #ffffff)}.bg-black.sc-sd-guide{background-color:var(--color-black, #000000)}.text-primary.sc-sd-guide{color:var(--color-primary, #051d36)}.text-secondary.sc-sd-guide{color:var(--color-secondary, #555555)}.text-accent.sc-sd-guide{color:var(--color-accent, #9c27b0)}.text-positive.sc-sd-guide{color:var(--color-positive, #0075ff)}.text-negative.sc-sd-guide{color:var(--color-negative, #e30000)}.text-info.sc-sd-guide{color:var(--color-info, #00cd52)}.text-warning.sc-sd-guide{color:var(--color-warning, #f2c037)}.text-red_99.sc-sd-guide{color:var(--color-red_99, #220000)}.text-red_95.sc-sd-guide{color:var(--color-red_95, #440000)}.text-red_90.sc-sd-guide{color:var(--color-red_90, #5E0000)}.text-red_85.sc-sd-guide{color:var(--color-red_85, #820000)}.text-red_80.sc-sd-guide{color:var(--color-red_80, #AD0000)}.text-red_75.sc-sd-guide{color:var(--color-red_75, #E30000)}.text-red_70.sc-sd-guide{color:var(--color-red_70, #FB4444)}.text-red_60.sc-sd-guide{color:var(--color-red_60, #FF7C7C)}.text-red_45.sc-sd-guide{color:var(--color-red_45, #FFB5B5)}.text-red_30.sc-sd-guide{color:var(--color-red_30, #FFD3D3)}.text-red_20.sc-sd-guide{color:var(--color-red_20, #FCE6E6)}.text-red_15.sc-sd-guide{color:var(--color-red_15, #FCEFEF)}.text-caution_bg.sc-sd-guide{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon.sc-sd-guide{color:var(--color-caution_icon, #fd9595)}.text-orange_99.sc-sd-guide{color:var(--color-orange_99, #2F1100)}.text-orange_95.sc-sd-guide{color:var(--color-orange_95, #4D1B00)}.text-orange_90.sc-sd-guide{color:var(--color-orange_90, #752A00)}.text-orange_85.sc-sd-guide{color:var(--color-orange_85, #9B3700)}.text-orange_75.sc-sd-guide{color:var(--color-orange_75, #CE4900)}.text-orange_65.sc-sd-guide{color:var(--color-orange_65, #FF6B00)}.text-orange_60.sc-sd-guide{color:var(--color-orange_60, #FF7F22)}.text-orange_55.sc-sd-guide{color:var(--color-orange_55, #FFA452)}.text-orange_45.sc-sd-guide{color:var(--color-orange_45, #FFBC81)}.text-orange_35.sc-sd-guide{color:var(--color-orange_35, #FFD5AF)}.text-orange_20.sc-sd-guide{color:var(--color-orange_20, #FFEAD7)}.text-orange_10.sc-sd-guide{color:var(--color-orange_10, #FEF1EA)}.text-header_alert.sc-sd-guide{color:var(--color-header_alert, #FF7A00)}.text-yellow_95.sc-sd-guide{color:var(--color-yellow_95, #322700)}.text-yellow_90.sc-sd-guide{color:var(--color-yellow_90, #453702)}.text-yellow_80.sc-sd-guide{color:var(--color-yellow_80, #6C5602)}.text-yellow_70.sc-sd-guide{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60.sc-sd-guide{color:var(--color-yellow_60, #C49900)}.text-yellow_50.sc-sd-guide{color:var(--color-yellow_50, #EBB800)}.text-yellow_45.sc-sd-guide{color:var(--color-yellow_45, #FFC700)}.text-yellow_40.sc-sd-guide{color:var(--color-yellow_40, #FFD643)}.text-yellow_30.sc-sd-guide{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25.sc-sd-guide{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20.sc-sd-guide{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10.sc-sd-guide{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95.sc-sd-guide{color:var(--color-olive_95, #2C2C00)}.text-olive_90.sc-sd-guide{color:var(--color-olive_90, #454500)}.text-olive_80.sc-sd-guide{color:var(--color-olive_80, #636300)}.text-olive_70.sc-sd-guide{color:var(--color-olive_70, #838300)}.text-olive_65.sc-sd-guide{color:var(--color-olive_65, #A5A500)}.text-olive_55.sc-sd-guide{color:var(--color-olive_55, #C7C700)}.text-olive_45.sc-sd-guide{color:var(--color-olive_45, #DDDD12)}.text-olive_30.sc-sd-guide{color:var(--color-olive_30, #EEEE37)}.text-olive_20.sc-sd-guide{color:var(--color-olive_20, #F6F65F)}.text-olive_15.sc-sd-guide{color:var(--color-olive_15, #FAFAA1)}.text-olive_10.sc-sd-guide{color:var(--color-olive_10, #FBFBBF)}.text-olive_05.sc-sd-guide{color:var(--color-olive_05, #FEFED9)}.text-green_99.sc-sd-guide{color:var(--color-green_99, #001D0B)}.text-green_95.sc-sd-guide{color:var(--color-green_95, #003013)}.text-green_90.sc-sd-guide{color:var(--color-green_90, #00461C)}.text-green_85.sc-sd-guide{color:var(--color-green_85, #006629)}.text-green_80.sc-sd-guide{color:var(--color-green_80, #007B31)}.text-green_75.sc-sd-guide{color:var(--color-green_75, #00973C)}.text-green_70.sc-sd-guide{color:var(--color-green_70, #12B553)}.text-green_65.sc-sd-guide{color:var(--color-green_65, #2BCE6C)}.text-green_55.sc-sd-guide{color:var(--color-green_55, #6DE39C)}.text-green_45.sc-sd-guide{color:var(--color-green_45, #ACF4C9)}.text-green_25.sc-sd-guide{color:var(--color-green_25, #D4FAE3)}.text-green_15.sc-sd-guide{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99.sc-sd-guide{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95.sc-sd-guide{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90.sc-sd-guide{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85.sc-sd-guide{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80.sc-sd-guide{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75.sc-sd-guide{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70.sc-sd-guide{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65.sc-sd-guide{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60.sc-sd-guide{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45.sc-sd-guide{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25.sc-sd-guide{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10.sc-sd-guide{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99.sc-sd-guide{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95.sc-sd-guide{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90.sc-sd-guide{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85.sc-sd-guide{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80.sc-sd-guide{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75.sc-sd-guide{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70.sc-sd-guide{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65.sc-sd-guide{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60.sc-sd-guide{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50.sc-sd-guide{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25.sc-sd-guide{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15.sc-sd-guide{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99.sc-sd-guide{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95.sc-sd-guide{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90.sc-sd-guide{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85.sc-sd-guide{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80.sc-sd-guide{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75.sc-sd-guide{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70.sc-sd-guide{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60.sc-sd-guide{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50.sc-sd-guide{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40.sc-sd-guide{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25.sc-sd-guide{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20.sc-sd-guide{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10.sc-sd-guide{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05.sc-sd-guide{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95.sc-sd-guide{color:var(--color-grey_95, #222222)}.text-grey_90.sc-sd-guide{color:var(--color-grey_90, #333333)}.text-grey_85.sc-sd-guide{color:var(--color-grey_85, #444444)}.text-grey_80.sc-sd-guide{color:var(--color-grey_80, #555555)}.text-grey_70.sc-sd-guide{color:var(--color-grey_70, #737373)}.text-grey_65.sc-sd-guide{color:var(--color-grey_65, #888888)}.text-grey_60.sc-sd-guide{color:var(--color-grey_60, #999999)}.text-grey_55.sc-sd-guide{color:var(--color-grey_55, #aaaaaa)}.text-grey_50.sc-sd-guide{color:var(--color-grey_50, #bbbbbb)}.text-grey_45.sc-sd-guide{color:var(--color-grey_45, #cccccc)}.text-grey_35.sc-sd-guide{color:var(--color-grey_35, #D8D8D8)}.text-grey_30.sc-sd-guide{color:var(--color-grey_30, #e1e1e1)}.text-grey_25.sc-sd-guide{color:var(--color-grey_25, #E5E5E5)}.text-grey_20.sc-sd-guide{color:var(--color-grey_20, #eeeeee)}.text-grey_10.sc-sd-guide{color:var(--color-grey_10, #f6f6f6)}.text-grey_05.sc-sd-guide{color:var(--color-grey_05, #f9f9f9)}.text-white.sc-sd-guide{color:var(--color-white, #ffffff)}.text-black.sc-sd-guide{color:var(--color-black, #000000)}*.sc-sd-guide,*.sc-sd-guide::before,*.sc-sd-guide::after{box-sizing:border-box}html.sc-sd-guide{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body.sc-sd-guide,h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide,p.sc-sd-guide,figure.sc-sd-guide,blockquote.sc-sd-guide,dl.sc-sd-guide,dd.sc-sd-guide{margin-block-end:0}ul[role=list].sc-sd-guide,ol[role=list].sc-sd-guide{list-style:none}body.sc-sd-guide{min-height:100vh;line-height:1.5}h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide,button.sc-sd-guide,input.sc-sd-guide,label.sc-sd-guide{line-height:1}h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide{text-wrap:balance}a.sc-sd-guide:not([class]){text-decoration-skip-ink:auto;color:currentColor}img.sc-sd-guide,picture.sc-sd-guide{max-width:100%;display:block}input.sc-sd-guide,button.sc-sd-guide,textarea.sc-sd-guide,select.sc-sd-guide{font-size:inherit}.sc-sd-guide:target{scroll-margin-block:5ex}button.sc-sd-guide{background:none;border:none;cursor:pointer;padding:0;outline:0}button.sc-sd-guide:focus{outline:0 !important}.sc-sd-guide-h{display:inline-block;height:fit-content;line-height:0}.text-center.sc-sd-guide{text-align:center}.text-right.sc-sd-guide{text-align:right}.text-left.sc-sd-guide{text-align:left}input[type=text].sc-sd-guide,input[type=number].sc-sd-guide,input[type=password].sc-sd-guide,input[type=email].sc-sd-guide,input[type=tel].sc-sd-guide,textarea.sc-sd-guide{padding-block:0px;padding-inline:0px}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide{background:currentColor;opacity:0.15}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide:before{opacity:0.1}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide:after{opacity:0.4}.sd-focus-helper.sc-sd-guide{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.sc-sd-guide:before,.sd-focus-helper.sc-sd-guide: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.sc-sd-guide:before{background:#000000}.sd-focus-helper.sc-sd-guide:after{background:#ffffff}.sd-tooltip-menu.sc-sd-guide{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close.sc-sd-guide{padding-right:12px !important}.sd-tooltip-menu__arrow.sc-sd-guide{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow.sc-sd-guide svg.sc-sd-guide{width:100%;height:100%}.sd-tooltip-menu__arrow--top.sc-sd-guide{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom.sc-sd-guide{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left.sc-sd-guide{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right.sc-sd-guide{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content.sc-sd-guide{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button.sc-sd-guide{padding-top:4px;display:flex}.sd-tooltip-menu__close-button.sc-sd-guide button.sc-sd-guide{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu.sc-sd-guide{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow.sc-sd-guide{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow.sc-sd-guide svg.sc-sd-guide{width:100%;height:100%}.sd-popover-menu__arrow--top.sc-sd-guide{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom.sc-sd-guide{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left.sc-sd-guide{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right.sc-sd-guide{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content.sc-sd-guide{font-size:12px;line-height:20px}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__title.sc-sd-guide{font-weight:700;margin-bottom:4px}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__messages.sc-sd-guide{font-weight:500}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons.sc-sd-guide{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons--1.sc-sd-guide{justify-content:flex-end}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons--2.sc-sd-guide{justify-content:space-between}.sd-popover-menu__close-button.sc-sd-guide{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.bg-primary.sc-sd-guide{background-color:var(--color-primary, #051d36)}.bg-secondary.sc-sd-guide{background-color:var(--color-secondary, #555555)}.bg-accent.sc-sd-guide{background-color:var(--color-accent, #9c27b0)}.bg-positive.sc-sd-guide{background-color:var(--color-positive, #0075ff)}.bg-negative.sc-sd-guide{background-color:var(--color-negative, #e30000)}.bg-info.sc-sd-guide{background-color:var(--color-info, #00cd52)}.bg-warning.sc-sd-guide{background-color:var(--color-warning, #f2c037)}.bg-red_99.sc-sd-guide{background-color:var(--color-red_99, #220000)}.bg-red_95.sc-sd-guide{background-color:var(--color-red_95, #440000)}.bg-red_90.sc-sd-guide{background-color:var(--color-red_90, #5E0000)}.bg-red_85.sc-sd-guide{background-color:var(--color-red_85, #820000)}.bg-red_80.sc-sd-guide{background-color:var(--color-red_80, #AD0000)}.bg-red_75.sc-sd-guide{background-color:var(--color-red_75, #E30000)}.bg-red_70.sc-sd-guide{background-color:var(--color-red_70, #FB4444)}.bg-red_60.sc-sd-guide{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45.sc-sd-guide{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30.sc-sd-guide{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20.sc-sd-guide{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15.sc-sd-guide{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg.sc-sd-guide{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon.sc-sd-guide{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99.sc-sd-guide{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95.sc-sd-guide{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90.sc-sd-guide{background-color:var(--color-orange_90, #752A00)}.bg-orange_85.sc-sd-guide{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75.sc-sd-guide{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65.sc-sd-guide{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60.sc-sd-guide{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55.sc-sd-guide{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45.sc-sd-guide{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35.sc-sd-guide{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20.sc-sd-guide{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10.sc-sd-guide{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert.sc-sd-guide{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95.sc-sd-guide{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90.sc-sd-guide{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80.sc-sd-guide{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70.sc-sd-guide{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60.sc-sd-guide{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50.sc-sd-guide{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45.sc-sd-guide{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40.sc-sd-guide{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30.sc-sd-guide{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25.sc-sd-guide{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20.sc-sd-guide{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10.sc-sd-guide{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95.sc-sd-guide{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90.sc-sd-guide{background-color:var(--color-olive_90, #454500)}.bg-olive_80.sc-sd-guide{background-color:var(--color-olive_80, #636300)}.bg-olive_70.sc-sd-guide{background-color:var(--color-olive_70, #838300)}.bg-olive_65.sc-sd-guide{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55.sc-sd-guide{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45.sc-sd-guide{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30.sc-sd-guide{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20.sc-sd-guide{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15.sc-sd-guide{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10.sc-sd-guide{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05.sc-sd-guide{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99.sc-sd-guide{background-color:var(--color-green_99, #001D0B)}.bg-green_95.sc-sd-guide{background-color:var(--color-green_95, #003013)}.bg-green_90.sc-sd-guide{background-color:var(--color-green_90, #00461C)}.bg-green_85.sc-sd-guide{background-color:var(--color-green_85, #006629)}.bg-green_80.sc-sd-guide{background-color:var(--color-green_80, #007B31)}.bg-green_75.sc-sd-guide{background-color:var(--color-green_75, #00973C)}.bg-green_70.sc-sd-guide{background-color:var(--color-green_70, #12B553)}.bg-green_65.sc-sd-guide{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55.sc-sd-guide{background-color:var(--color-green_55, #6DE39C)}.bg-green_45.sc-sd-guide{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25.sc-sd-guide{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15.sc-sd-guide{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99.sc-sd-guide{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95.sc-sd-guide{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90.sc-sd-guide{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85.sc-sd-guide{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80.sc-sd-guide{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75.sc-sd-guide{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70.sc-sd-guide{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65.sc-sd-guide{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60.sc-sd-guide{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45.sc-sd-guide{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25.sc-sd-guide{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10.sc-sd-guide{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99.sc-sd-guide{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95.sc-sd-guide{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90.sc-sd-guide{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85.sc-sd-guide{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80.sc-sd-guide{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75.sc-sd-guide{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70.sc-sd-guide{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65.sc-sd-guide{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60.sc-sd-guide{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50.sc-sd-guide{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25.sc-sd-guide{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15.sc-sd-guide{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99.sc-sd-guide{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95.sc-sd-guide{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90.sc-sd-guide{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85.sc-sd-guide{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80.sc-sd-guide{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75.sc-sd-guide{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70.sc-sd-guide{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60.sc-sd-guide{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50.sc-sd-guide{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40.sc-sd-guide{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25.sc-sd-guide{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20.sc-sd-guide{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10.sc-sd-guide{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05.sc-sd-guide{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95.sc-sd-guide{background-color:var(--color-grey_95, #222222)}.bg-grey_90.sc-sd-guide{background-color:var(--color-grey_90, #333333)}.bg-grey_85.sc-sd-guide{background-color:var(--color-grey_85, #444444)}.bg-grey_80.sc-sd-guide{background-color:var(--color-grey_80, #555555)}.bg-grey_70.sc-sd-guide{background-color:var(--color-grey_70, #737373)}.bg-grey_65.sc-sd-guide{background-color:var(--color-grey_65, #888888)}.bg-grey_60.sc-sd-guide{background-color:var(--color-grey_60, #999999)}.bg-grey_55.sc-sd-guide{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50.sc-sd-guide{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45.sc-sd-guide{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35.sc-sd-guide{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30.sc-sd-guide{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25.sc-sd-guide{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20.sc-sd-guide{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10.sc-sd-guide{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05.sc-sd-guide{background-color:var(--color-grey_05, #f9f9f9)}.bg-white.sc-sd-guide{background-color:var(--color-white, #ffffff)}.bg-black.sc-sd-guide{background-color:var(--color-black, #000000)}.text-primary.sc-sd-guide{color:var(--color-primary, #051d36)}.text-secondary.sc-sd-guide{color:var(--color-secondary, #555555)}.text-accent.sc-sd-guide{color:var(--color-accent, #9c27b0)}.text-positive.sc-sd-guide{color:var(--color-positive, #0075ff)}.text-negative.sc-sd-guide{color:var(--color-negative, #e30000)}.text-info.sc-sd-guide{color:var(--color-info, #00cd52)}.text-warning.sc-sd-guide{color:var(--color-warning, #f2c037)}.text-red_99.sc-sd-guide{color:var(--color-red_99, #220000)}.text-red_95.sc-sd-guide{color:var(--color-red_95, #440000)}.text-red_90.sc-sd-guide{color:var(--color-red_90, #5E0000)}.text-red_85.sc-sd-guide{color:var(--color-red_85, #820000)}.text-red_80.sc-sd-guide{color:var(--color-red_80, #AD0000)}.text-red_75.sc-sd-guide{color:var(--color-red_75, #E30000)}.text-red_70.sc-sd-guide{color:var(--color-red_70, #FB4444)}.text-red_60.sc-sd-guide{color:var(--color-red_60, #FF7C7C)}.text-red_45.sc-sd-guide{color:var(--color-red_45, #FFB5B5)}.text-red_30.sc-sd-guide{color:var(--color-red_30, #FFD3D3)}.text-red_20.sc-sd-guide{color:var(--color-red_20, #FCE6E6)}.text-red_15.sc-sd-guide{color:var(--color-red_15, #FCEFEF)}.text-caution_bg.sc-sd-guide{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon.sc-sd-guide{color:var(--color-caution_icon, #fd9595)}.text-orange_99.sc-sd-guide{color:var(--color-orange_99, #2F1100)}.text-orange_95.sc-sd-guide{color:var(--color-orange_95, #4D1B00)}.text-orange_90.sc-sd-guide{color:var(--color-orange_90, #752A00)}.text-orange_85.sc-sd-guide{color:var(--color-orange_85, #9B3700)}.text-orange_75.sc-sd-guide{color:var(--color-orange_75, #CE4900)}.text-orange_65.sc-sd-guide{color:var(--color-orange_65, #FF6B00)}.text-orange_60.sc-sd-guide{color:var(--color-orange_60, #FF7F22)}.text-orange_55.sc-sd-guide{color:var(--color-orange_55, #FFA452)}.text-orange_45.sc-sd-guide{color:var(--color-orange_45, #FFBC81)}.text-orange_35.sc-sd-guide{color:var(--color-orange_35, #FFD5AF)}.text-orange_20.sc-sd-guide{color:var(--color-orange_20, #FFEAD7)}.text-orange_10.sc-sd-guide{color:var(--color-orange_10, #FEF1EA)}.text-header_alert.sc-sd-guide{color:var(--color-header_alert, #FF7A00)}.text-yellow_95.sc-sd-guide{color:var(--color-yellow_95, #322700)}.text-yellow_90.sc-sd-guide{color:var(--color-yellow_90, #453702)}.text-yellow_80.sc-sd-guide{color:var(--color-yellow_80, #6C5602)}.text-yellow_70.sc-sd-guide{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60.sc-sd-guide{color:var(--color-yellow_60, #C49900)}.text-yellow_50.sc-sd-guide{color:var(--color-yellow_50, #EBB800)}.text-yellow_45.sc-sd-guide{color:var(--color-yellow_45, #FFC700)}.text-yellow_40.sc-sd-guide{color:var(--color-yellow_40, #FFD643)}.text-yellow_30.sc-sd-guide{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25.sc-sd-guide{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20.sc-sd-guide{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10.sc-sd-guide{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95.sc-sd-guide{color:var(--color-olive_95, #2C2C00)}.text-olive_90.sc-sd-guide{color:var(--color-olive_90, #454500)}.text-olive_80.sc-sd-guide{color:var(--color-olive_80, #636300)}.text-olive_70.sc-sd-guide{color:var(--color-olive_70, #838300)}.text-olive_65.sc-sd-guide{color:var(--color-olive_65, #A5A500)}.text-olive_55.sc-sd-guide{color:var(--color-olive_55, #C7C700)}.text-olive_45.sc-sd-guide{color:var(--color-olive_45, #DDDD12)}.text-olive_30.sc-sd-guide{color:var(--color-olive_30, #EEEE37)}.text-olive_20.sc-sd-guide{color:var(--color-olive_20, #F6F65F)}.text-olive_15.sc-sd-guide{color:var(--color-olive_15, #FAFAA1)}.text-olive_10.sc-sd-guide{color:var(--color-olive_10, #FBFBBF)}.text-olive_05.sc-sd-guide{color:var(--color-olive_05, #FEFED9)}.text-green_99.sc-sd-guide{color:var(--color-green_99, #001D0B)}.text-green_95.sc-sd-guide{color:var(--color-green_95, #003013)}.text-green_90.sc-sd-guide{color:var(--color-green_90, #00461C)}.text-green_85.sc-sd-guide{color:var(--color-green_85, #006629)}.text-green_80.sc-sd-guide{color:var(--color-green_80, #007B31)}.text-green_75.sc-sd-guide{color:var(--color-green_75, #00973C)}.text-green_70.sc-sd-guide{color:var(--color-green_70, #12B553)}.text-green_65.sc-sd-guide{color:var(--color-green_65, #2BCE6C)}.text-green_55.sc-sd-guide{color:var(--color-green_55, #6DE39C)}.text-green_45.sc-sd-guide{color:var(--color-green_45, #ACF4C9)}.text-green_25.sc-sd-guide{color:var(--color-green_25, #D4FAE3)}.text-green_15.sc-sd-guide{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99.sc-sd-guide{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95.sc-sd-guide{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90.sc-sd-guide{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85.sc-sd-guide{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80.sc-sd-guide{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75.sc-sd-guide{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70.sc-sd-guide{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65.sc-sd-guide{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60.sc-sd-guide{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45.sc-sd-guide{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25.sc-sd-guide{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10.sc-sd-guide{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99.sc-sd-guide{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95.sc-sd-guide{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90.sc-sd-guide{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85.sc-sd-guide{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80.sc-sd-guide{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75.sc-sd-guide{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70.sc-sd-guide{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65.sc-sd-guide{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60.sc-sd-guide{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50.sc-sd-guide{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25.sc-sd-guide{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15.sc-sd-guide{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99.sc-sd-guide{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95.sc-sd-guide{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90.sc-sd-guide{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85.sc-sd-guide{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80.sc-sd-guide{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75.sc-sd-guide{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70.sc-sd-guide{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60.sc-sd-guide{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50.sc-sd-guide{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40.sc-sd-guide{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25.sc-sd-guide{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20.sc-sd-guide{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10.sc-sd-guide{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05.sc-sd-guide{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95.sc-sd-guide{color:var(--color-grey_95, #222222)}.text-grey_90.sc-sd-guide{color:var(--color-grey_90, #333333)}.text-grey_85.sc-sd-guide{color:var(--color-grey_85, #444444)}.text-grey_80.sc-sd-guide{color:var(--color-grey_80, #555555)}.text-grey_70.sc-sd-guide{color:var(--color-grey_70, #737373)}.text-grey_65.sc-sd-guide{color:var(--color-grey_65, #888888)}.text-grey_60.sc-sd-guide{color:var(--color-grey_60, #999999)}.text-grey_55.sc-sd-guide{color:var(--color-grey_55, #aaaaaa)}.text-grey_50.sc-sd-guide{color:var(--color-grey_50, #bbbbbb)}.text-grey_45.sc-sd-guide{color:var(--color-grey_45, #cccccc)}.text-grey_35.sc-sd-guide{color:var(--color-grey_35, #D8D8D8)}.text-grey_30.sc-sd-guide{color:var(--color-grey_30, #e1e1e1)}.text-grey_25.sc-sd-guide{color:var(--color-grey_25, #E5E5E5)}.text-grey_20.sc-sd-guide{color:var(--color-grey_20, #eeeeee)}.text-grey_10.sc-sd-guide{color:var(--color-grey_10, #f6f6f6)}.text-grey_05.sc-sd-guide{color:var(--color-grey_05, #f9f9f9)}.text-white.sc-sd-guide{color:var(--color-white, #ffffff)}.text-black.sc-sd-guide{color:var(--color-black, #000000)}*.sc-sd-guide,*.sc-sd-guide::before,*.sc-sd-guide::after{box-sizing:border-box}html.sc-sd-guide{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body.sc-sd-guide,h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide,p.sc-sd-guide,figure.sc-sd-guide,blockquote.sc-sd-guide,dl.sc-sd-guide,dd.sc-sd-guide{margin-block-end:0}ul[role=list].sc-sd-guide,ol[role=list].sc-sd-guide{list-style:none}body.sc-sd-guide{min-height:100vh;line-height:1.5}h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide,button.sc-sd-guide,input.sc-sd-guide,label.sc-sd-guide{line-height:1}h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide{text-wrap:balance}a.sc-sd-guide:not([class]){text-decoration-skip-ink:auto;color:currentColor}img.sc-sd-guide,picture.sc-sd-guide{max-width:100%;display:block}input.sc-sd-guide,button.sc-sd-guide,textarea.sc-sd-guide,select.sc-sd-guide{font-size:inherit}.sc-sd-guide:target{scroll-margin-block:5ex}button.sc-sd-guide{background:none;border:none;cursor:pointer;padding:0;outline:0}button.sc-sd-guide:focus{outline:0 !important}.sc-sd-guide-h{display:inline-block;height:fit-content;line-height:0}.text-center.sc-sd-guide{text-align:center}.text-right.sc-sd-guide{text-align:right}.text-left.sc-sd-guide{text-align:left}input[type=text].sc-sd-guide,input[type=number].sc-sd-guide,input[type=password].sc-sd-guide,input[type=email].sc-sd-guide,input[type=tel].sc-sd-guide,textarea.sc-sd-guide{padding-block:0px;padding-inline:0px}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide{background:currentColor;opacity:0.15}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide:before{opacity:0.1}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide:after{opacity:0.4}.sd-focus-helper.sc-sd-guide{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.sc-sd-guide:before,.sd-focus-helper.sc-sd-guide: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.sc-sd-guide:before{background:#000000}.sd-focus-helper.sc-sd-guide:after{background:#ffffff}.sd-tooltip-menu.sc-sd-guide{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close.sc-sd-guide{padding-right:12px !important}.sd-tooltip-menu__arrow.sc-sd-guide{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow.sc-sd-guide svg.sc-sd-guide{width:100%;height:100%}.sd-tooltip-menu__arrow--top.sc-sd-guide{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom.sc-sd-guide{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left.sc-sd-guide{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right.sc-sd-guide{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content.sc-sd-guide{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button.sc-sd-guide{padding-top:4px;display:flex}.sd-tooltip-menu__close-button.sc-sd-guide button.sc-sd-guide{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu.sc-sd-guide{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow.sc-sd-guide{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow.sc-sd-guide svg.sc-sd-guide{width:100%;height:100%}.sd-popover-menu__arrow--top.sc-sd-guide{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom.sc-sd-guide{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left.sc-sd-guide{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right.sc-sd-guide{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content.sc-sd-guide{font-size:12px;line-height:20px}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__title.sc-sd-guide{font-weight:700;margin-bottom:4px}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__messages.sc-sd-guide{font-weight:500}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons.sc-sd-guide{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons--1.sc-sd-guide{justify-content:flex-end}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons--2.sc-sd-guide{justify-content:space-between}.sd-popover-menu__close-button.sc-sd-guide{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-button.sc-sd-guide{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs.sc-sd-guide{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm.sc-sd-guide{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md.sc-sd-guide{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg.sc-sd-guide{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary.sc-sd-guide{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary.sc-sd-guide::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary.sc-sd-guide:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline.sc-sd-guide{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline.sc-sd-guide::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline.sc-sd-guide:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline.sc-sd-guide .sd-button__content.sc-sd-guide{position:relative;z-index:1}.sd-button--ghost.sc-sd-guide{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost.sc-sd-guide::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost.sc-sd-guide:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost.sc-sd-guide .sd-button__content.sc-sd-guide{position:relative;z-index:1}.sd-button--disabled.sc-sd-guide{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only.sc-sd-guide{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover.sc-sd-guide:hover::before{opacity:0 !important}.sd-button.sc-sd-guide .sd-button__content.sc-sd-guide{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}.sd-guide.sc-sd-guide{display:inline-block}.sd-guide.sc-sd-guide .sd-button.sc-sd-guide{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center}.sd-guide.sc-sd-guide .sd-button.sc-sd-guide .sd-button__content.sc-sd-guide{color:#333333 !important}.sd-guide.sc-sd-guide .sd-button.sc-sd-guide .sd-button__content.sc-sd-guide .sd-button__label.sc-sd-guide{color:#333333 !important}.sd-guide__popup.sc-sd-guide{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup__close.sc-sd-guide{position:absolute;top:12px;right:12px}.sd-guide__popup__header.sc-sd-guide{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header.sc-sd-guide .sd-guide__popup__title.sc-sd-guide{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list.sc-sd-guide{width:100%;padding:0;margin:0}.sd-guide__popup__list__item.sc-sd-guide{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item.sc-sd-guide p.sc-sd-guide{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item.sc-sd-guide::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2.sc-sd-guide::before{content:\"•\"}.sd-guide__popup__list__item--depth-2.sc-sd-guide{padding-left:26px}";
 
+const GUIDE_LABEL = {
+    help: '활용 TIP',
+    pdf: 'PDF Guide',
+    youtube: 'Video Guide',
+    notion: '사용 가이드',
+    event: 'Event Button',
+};
+const GUIDE_ICON = {
+    help: {
+        name: 'helpOutline',
+        size: 20,
+        color: colors.green_65,
+    },
+    pdf: { name: 'pdf', size: 20, color: colors.red_75 },
+    youtube: { name: 'youtube', size: 20, color: colors.red_75 },
+    notion: { name: 'notion', size: 16, color: colors.black },
+    event: { name: 'event', size: 16, color: colors.brilliantblue_70 },
+};
 const SdGuide$1 = /*@__PURE__*/ proxyCustomElement(class SdGuide extends H {
     constructor(registerHost) {
         super();
@@ -15,19 +33,12 @@ const SdGuide$1 = /*@__PURE__*/ proxyCustomElement(class SdGuide extends H {
     }
     get el() { return this; }
     type = 'help';
-    popupTitle = '';
+    label = '';
     message = '';
     guideUrl = '';
     popupWidth;
     popupShow = false;
     guideRef;
-    static guideTitle = {
-        help: '활용 Tip',
-        pdf: 'PDF Guide',
-        youtube: 'Video Guide',
-        notion: '사용 가이드',
-        event: 'Event Button',
-    };
     handleClickGuide = () => {
         if (this.type === 'help') {
             this.popupShow = !this.popupShow;
@@ -37,58 +48,58 @@ const SdGuide$1 = /*@__PURE__*/ proxyCustomElement(class SdGuide extends H {
             window.open(this.guideUrl, '_blank');
         }
     };
-    getGuideClasses() {
-        const classes = ['sd-guide'];
-        classes.push(`sd-guide--${this.type}`);
+    get guideClass() {
+        const classes = ['sd-guide', `sd-guide--${this.type}`];
         if (this.popupShow)
             classes.push('sd-guide--active');
         return classes.join(' ');
     }
-    getGuideStyle() {
-        const styles = {};
-        if (this.type === 'help') {
-            styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;
-            styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;
-            styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;
-        }
-        else {
-            styles['--guide-border'] = colors.grey_45;
-            styles['--guide-color'] = colors.grey_90;
-            styles['--guide-background'] = colors.white;
-        }
-        return styles;
-    }
-    getGuidIcon() {
-        if (this.type === 'pdf') {
-            return { name: 'pdf', size: 20, color: colors.red_75 };
-        }
-        else if (this.type === 'youtube') {
-            return { name: 'youtube', size: 20, color: colors.red_75 };
-        }
-        else if (this.type === 'notion') {
-            return { name: 'notion', size: 16, color: colors.black };
-        }
-        else if (this.type === 'event') {
-            return { name: 'event', size: 16, color: colors.brilliantblue_70 };
-        }
-        return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };
-    }
+    // private getGuideStyle(): StyleProps {
+    //  const styles: StyleProps = {};
+    //  if (this.type === 'help') {
+    //   styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;
+    //   styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;
+    //   styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;
+    //  } else {
+    //   styles['--guide-border'] = colors.grey_45;
+    //   styles['--guide-color'] = colors.grey_90;
+    //   styles['--guide-background'] = colors.white;
+    //  }
+    //  return styles;
+    // }
+    // private getGuidIcon(): { name: IconName; size: number; color: string } {
+    //  if (this.type === 'pdf') {
+    //   return { name: 'pdf', size: 20, color: colors.red_75 };
+    //  } else if (this.type === 'youtube') {
+    //   return { name: 'youtube', size: 20, color: colors.red_75 };
+    //  } else if (this.type === 'notion') {
+    //   return { name: 'notion', size: 16, color: colors.black };
+    //  } else if (this.type === 'event') {
+    //   return { name: 'event', size: 16, color: colors.brilliantblue_70 };
+    //  }
+    //  return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };
+    // }
     closeDropdown = () => {
         this.popupShow = false;
     };
     render() {
-        const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
-        return (h(Host, { key: 'd3975227833fe5304ee63c26989724bf505e4e6c', style: this.getGuideStyle() }, h("sd-button", { key: '7d9c8788d6022f718e986c1a30591f5fcf7dab91', ref: el => (this.guideRef = el), class: this.getGuideClasses(), variant: "outline", label: SdGuide.guideTitle[this.type], size: "md", color: "var(--guide-color)", icon: iconName, iconColor: iconColor, iconSize: iconSize, iconStyle: { marginRight: '4px' }, buttonStyle: {
-                height: '28px',
-                minHeight: '28px',
-                padding: '4px 12px',
-                borderRadius: '16px',
-                borderColor: 'var(--guide-border)',
-                color: 'var(--guide-color)',
-                fontSize: '12px',
-                fontWeight: '400',
-                backgroundColor: 'var(--guide-background)',
-            }, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'f0b87eea6c9abe2b61d4e3a30b931b54585219ae', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 24] }, h("div", { key: 'b151630790e32f2da7f54307853d728ac08d8cfd', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'e265b60f46ed7f76e9c021d5c673d44ed02f0ee6', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true, buttonStyle: { padding: '0px', minHeight: '0px' }, onSdClick: this.closeDropdown }), h("div", { key: '50406979d5c832abb262ea121b3c1cd0fb464b77', class: "sd-guide__popup__header" }, h("sd-icon", { key: '2e0fd5798d96b58c732a88e4917a7c9d47e28901', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'ab6f05250c499dc741b118ddf346857f2c55969f', class: "sd-guide__popup__title" }, this.popupTitle || SdGuide.guideTitle[this.type])), h("ul", { key: '6676f25ca3f75a5fb306013ad1efc33e5ccac1c2', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+        // const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
+        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
+        return (h(Host, { key: '9f8b8af98d5bbcbde8544d0e8e337068e8e5778d' }, h("sd-button", { key: '39ea0d0680d295569e61d72d48c5ac4cd47ddf2f', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
+            // buttonStyle={{
+            //  height: '28px',
+            //  minHeight: '28px',
+            //  padding: '4px 12px',
+            //  borderRadius: '16px',
+            //  borderColor: 'var(--guide-border)',
+            //  color: 'var(--guide-color)',
+            //  fontSize: '12px',
+            //  fontWeight: '400',
+            //  backgroundColor: 'var(--guide-background)',
+            // }}
+            onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'b23d82a4d0d584aa8ffb38808439ab629fc1d5e3', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '27cdbb0baf95d0e3bfbf43233e2d3390675cb877', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '02861a4e8cd618fe88a4532142741a590c8d322b', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            // buttonStyle={{ padding: '0px', minHeight: '0px' }}
+            onSdClick: this.closeDropdown }), h("div", { key: '1098dbacbb4c9151979636e473fb26c020b2723c', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'de5d306c106fc964251425ebd11ebb01a59b6c4c', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'b7c35de7a56d92ec83393e0aa43e187aa0a4112a', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '4d6d02dd32073b9cee125492be7fab59d70f25ce', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -109,7 +120,7 @@ const SdGuide$1 = /*@__PURE__*/ proxyCustomElement(class SdGuide extends H {
     static get style() { return sdGuideCss; }
 }, [770, "sd-guide", {
         "type": [1],
-        "popupTitle": [1, "popup-title"],
+        "label": [1],
         "message": [1],
         "guideUrl": [1, "guide-url"],
         "popupWidth": [2, "popup-width"],

package/dist/components/sd-guide.js.map

@@ -1 +1 @@
-{"file":"sd-guide.js","mappings":"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","names":["SdGuide","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-guide/sd-guide.scss?tag=sd-guide&encapsulation=scoped","src/components/sd-guide/sd-guide.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n\r\n.sd-guide__popup {\r\n position: relative;\r\n padding: 20px 32px;\r\n border-radius: 8px;\r\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.1);\r\n background: white;\r\n\r\n &__close {\r\n  position: absolute;\r\n  top: 12px;\r\n  right: 12px;\r\n }\r\n\r\n &__header {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  margin-bottom: 12px;\r\n\r\n  .sd-guide__popup__title {\r\n   margin-top: 0;\r\n   font-size: 16px;\r\n   font-weight: 700;\r\n   line-height: 26px;\r\n   color: $grey_90;\r\n  }\r\n }\r\n\r\n &__list {\r\n  width: 100%;\r\n  padding: 0;\r\n  margin: 0;\r\n\r\n  &__item {\r\n   display: flex;\r\n   width: 100%;\r\n   align-items: start;\r\n   list-style: none;\r\n   color: $grey_90;\r\n   font-size: 12px;\r\n   font-weight: 400;\r\n\r\n   p {\r\n    width: 100%;\r\n    padding: 0;\r\n    margin: 0;\r\n    word-wrap: break-word;\r\n    word-break: break-word;\r\n    white-space: normal;\r\n    overflow-wrap: break-word;\r\n    min-width: 0;\r\n   }\r\n\r\n   &::before {\r\n    display: block;\r\n    content: '-';\r\n    width: 6px;\r\n    color: $grey_90;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    margin-left: 10px;\r\n    margin-right: 12px;\r\n    flex-shrink: 0;\r\n   }\r\n\r\n   &--depth-2 {\r\n    &::before {\r\n     content: '•';\r\n    }\r\n    padding-left: 26px;\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n scoped: true,\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() popupTitle: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n static guideTitle = {\r\n  help: '활용 Tip',\r\n  pdf: 'PDF Guide',\r\n  youtube: 'Video Guide',\r\n  notion: '사용 가이드',\r\n  event: 'Event Button',\r\n };\r\n\r\n private handleClickGuide = () => {\r\n  if (this.type === 'help') {\r\n   this.popupShow = !this.popupShow;\r\n   return;\r\n  }\r\n\r\n  if (this.guideUrl) {\r\n   window.open(this.guideUrl, '_blank');\r\n  }\r\n };\r\n\r\n private getGuideClasses(): string {\r\n  const classes = ['sd-guide'];\r\n\r\n  classes.push(`sd-guide--${this.type}`);\r\n\r\n  if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private getGuideStyle(): StyleProps {\r\n  const styles: StyleProps = {};\r\n\r\n  if (this.type === 'help') {\r\n   styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;\r\n   styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;\r\n   styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;\r\n  } else {\r\n   styles['--guide-border'] = colors.grey_45;\r\n   styles['--guide-color'] = colors.grey_90;\r\n   styles['--guide-background'] = colors.white;\r\n  }\r\n\r\n  return styles;\r\n }\r\n\r\n private getGuidIcon(): { name: IconName; size: number; color: string } {\r\n  if (this.type === 'pdf') {\r\n   return { name: 'pdf', size: 20, color: colors.red_75 };\r\n  } else if (this.type === 'youtube') {\r\n   return { name: 'youtube', size: 20, color: colors.red_75 };\r\n  } else if (this.type === 'notion') {\r\n   return { name: 'notion', size: 16, color: colors.black };\r\n  } else if (this.type === 'event') {\r\n   return { name: 'event', size: 16, color: colors.brilliantblue_70 };\r\n  }\r\n\r\n  return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };\r\n }\r\n\r\n closeDropdown = () => {\r\n  this.popupShow = false;\r\n };\r\n\r\n render() {\r\n  const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();\r\n\r\n  return (\r\n   <Host style={this.getGuideStyle()}>\r\n    <sd-button\r\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n     class={this.getGuideClasses()}\r\n     variant=\"outline\"\r\n     label={SdGuide.guideTitle[this.type]}\r\n     size=\"md\"\r\n     color=\"var(--guide-color)\"\r\n     icon={iconName}\r\n     iconColor={iconColor}\r\n     iconSize={iconSize}\r\n     iconStyle={{ marginRight: '4px' }}\r\n     buttonStyle={{\r\n      height: '28px',\r\n      minHeight: '28px',\r\n      padding: '4px 12px',\r\n      borderRadius: '16px',\r\n      borderColor: 'var(--guide-border)',\r\n      color: 'var(--guide-color)',\r\n      fontSize: '12px',\r\n      fontWeight: '400',\r\n      backgroundColor: 'var(--guide-background)',\r\n     }}\r\n     onSdClick={this.handleClickGuide}\r\n    />\r\n    {this.type === 'help' && this.popupShow && (\r\n     <sd-portal\r\n      open={this.popupShow}\r\n      parentRef={this.guideRef}\r\n      onSdClose={this.closeDropdown}\r\n      offset={[0, 24]}\r\n     >\r\n      <div\r\n       class=\"sd-guide__popup\"\r\n       style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n      >\r\n       <sd-button\r\n        class=\"sd-guide__popup__close\"\r\n        icon=\"close\"\r\n        color={colors.grey_65}\r\n        size=\"md\"\r\n        variant=\"ghost\"\r\n        noHover\r\n        buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n        onSdClick={this.closeDropdown}\r\n       />\r\n       <div class=\"sd-guide__popup__header\">\r\n        <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n        <h3 class=\"sd-guide__popup__title\">{this.popupTitle || SdGuide.guideTitle[this.type]}</h3>\r\n       </div>\r\n       <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n  const listItems: HTMLElement[] = [];\r\n\r\n  if (Array.isArray(message)) {\r\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n   listItems.push(...depthMsg.flat());\r\n  } else {\r\n   listItems.push(this.renderLi(message, depth));\r\n  }\r\n\r\n  return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n  const listContent = message.replace(/ /gi, '&nbsp;');\r\n  return (\r\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n    <p innerHTML={listContent}></p>\r\n   </li>\r\n  );\r\n };\r\n}\r\n"],"version":3}
+{"file":"sd-guide.js","mappings":"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","names":["SdGuide","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-guide/sd-guide.scss?tag=sd-guide&encapsulation=scoped","src/components/sd-guide/sd-guide.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n@import '../sd-button/sd-button.scss';\r\n\r\n.sd-guide {\r\n display: inline-block;\r\n .sd-button {\r\n  padding: 0 16px 0 12px;\r\n  border-radius: 16px;\r\n  color: $grey_90 !important;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  .sd-button__content {\r\n   color: $grey_90 !important;\r\n\r\n   .sd-button__label {\r\n    color: $grey_90 !important;\r\n   }\r\n  }\r\n }\r\n}\r\n\r\n.sd-guide__popup {\r\n position: relative;\r\n padding: 20px 32px;\r\n border-radius: 8px;\r\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.1);\r\n background: white;\r\n\r\n &__close {\r\n  position: absolute;\r\n  top: 12px;\r\n  right: 12px;\r\n }\r\n\r\n &__header {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  margin-bottom: 12px;\r\n\r\n  .sd-guide__popup__title {\r\n   margin-top: 0;\r\n   font-size: 16px;\r\n   font-weight: 700;\r\n   line-height: 26px;\r\n   color: $grey_90;\r\n  }\r\n }\r\n\r\n &__list {\r\n  width: 100%;\r\n  padding: 0;\r\n  margin: 0;\r\n\r\n  &__item {\r\n   display: flex;\r\n   width: 100%;\r\n   align-items: start;\r\n   list-style: none;\r\n   color: $grey_90;\r\n   font-size: 12px;\r\n   font-weight: 400;\r\n\r\n   p {\r\n    width: 100%;\r\n    padding: 0;\r\n    margin: 0;\r\n    word-wrap: break-word;\r\n    word-break: break-word;\r\n    white-space: normal;\r\n    overflow-wrap: break-word;\r\n    min-width: 0;\r\n   }\r\n\r\n   &::before {\r\n    display: block;\r\n    content: '-';\r\n    width: 6px;\r\n    color: $grey_90;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    margin-left: 10px;\r\n    margin-right: 12px;\r\n    flex-shrink: 0;\r\n   }\r\n\r\n   &--depth-2 {\r\n    &::before {\r\n     content: '•';\r\n    }\r\n    padding-left: 26px;\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용 가이드',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n  name: 'helpOutline',\r\n  size: 20,\r\n  color: colors.green_65,\r\n },\r\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\r\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\r\n notion: { name: 'notion', size: 16, color: colors.black },\r\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\r\n} as const;\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n scoped: true,\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() label: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n private handleClickGuide = () => {\r\n  if (this.type === 'help') {\r\n   this.popupShow = !this.popupShow;\r\n   return;\r\n  }\r\n\r\n  if (this.guideUrl) {\r\n   window.open(this.guideUrl, '_blank');\r\n  }\r\n };\r\n\r\n private get guideClass(): string {\r\n  const classes = ['sd-guide', `sd-guide--${this.type}`];\r\n\r\n  if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n // private getGuideStyle(): StyleProps {\r\n //  const styles: StyleProps = {};\r\n\r\n //  if (this.type === 'help') {\r\n //   styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;\r\n //   styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;\r\n //   styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;\r\n //  } else {\r\n //   styles['--guide-border'] = colors.grey_45;\r\n //   styles['--guide-color'] = colors.grey_90;\r\n //   styles['--guide-background'] = colors.white;\r\n //  }\r\n\r\n //  return styles;\r\n // }\r\n\r\n // private getGuidIcon(): { name: IconName; size: number; color: string } {\r\n //  if (this.type === 'pdf') {\r\n //   return { name: 'pdf', size: 20, color: colors.red_75 };\r\n //  } else if (this.type === 'youtube') {\r\n //   return { name: 'youtube', size: 20, color: colors.red_75 };\r\n //  } else if (this.type === 'notion') {\r\n //   return { name: 'notion', size: 16, color: colors.black };\r\n //  } else if (this.type === 'event') {\r\n //   return { name: 'event', size: 16, color: colors.brilliantblue_70 };\r\n //  }\r\n\r\n //  return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };\r\n // }\r\n\r\n closeDropdown = () => {\r\n  this.popupShow = false;\r\n };\r\n\r\n render() {\r\n  // const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();\r\n  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\r\n\r\n  return (\r\n   <Host>\r\n    <sd-button\r\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n     class={this.guideClass}\r\n     variant={this.popupShow ? 'primary' : 'outline'}\r\n     label={GUIDE_LABEL[this.type]}\r\n     size=\"sm\"\r\n     color=\"grey_45\"\r\n     icon={iconName}\r\n     iconColor={iconColor}\r\n     iconSize={iconSize}\r\n     // buttonStyle={{\r\n     //  height: '28px',\r\n     //  minHeight: '28px',\r\n     //  padding: '4px 12px',\r\n     //  borderRadius: '16px',\r\n     //  borderColor: 'var(--guide-border)',\r\n     //  color: 'var(--guide-color)',\r\n     //  fontSize: '12px',\r\n     //  fontWeight: '400',\r\n     //  backgroundColor: 'var(--guide-background)',\r\n     // }}\r\n     onSdClick={this.handleClickGuide}\r\n    />\r\n    {this.type === 'help' && this.popupShow && (\r\n     <sd-portal\r\n      open={this.popupShow}\r\n      parentRef={this.guideRef}\r\n      onSdClose={this.closeDropdown}\r\n      offset={[0, 4]}\r\n     >\r\n      <div\r\n       class=\"sd-guide__popup\"\r\n       style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n      >\r\n       <sd-button\r\n        class=\"sd-guide__popup__close\"\r\n        icon=\"close\"\r\n        color={colors.grey_65}\r\n        size=\"md\"\r\n        variant=\"ghost\"\r\n        noHover\r\n        // buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n        onSdClick={this.closeDropdown}\r\n       />\r\n       <div class=\"sd-guide__popup__header\">\r\n        <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n        <h3 class=\"sd-guide__popup__title\">{this.label || GUIDE_LABEL[this.type]}</h3>\r\n       </div>\r\n       <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n  const listItems: HTMLElement[] = [];\r\n\r\n  if (Array.isArray(message)) {\r\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n   listItems.push(...depthMsg.flat());\r\n  } else {\r\n   listItems.push(this.renderLi(message, depth));\r\n  }\r\n\r\n  return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n  const listContent = message.replace(/ /gi, '&nbsp;');\r\n  return (\r\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n    <p innerHTML={listContent}></p>\r\n   </li>\r\n  );\r\n };\r\n}\r\n"],"version":3}

package/dist/components/sd-icon.js

@@ -1,4 +1,4 @@
-import { S as SdIcon$1, d as defineCustomElement$1 } from './p-DVFPBdfj.js';
+import { S as SdIcon$1, d as defineCustomElement$1 } from './p-B60pARKe.js';
 
 const SdIcon = SdIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-input.js

@@ -1,4 +1,4 @@
-import { S as SdInput$1, d as defineCustomElement$1 } from './p-BBm_kUA7.js';
+import { S as SdInput$1, d as defineCustomElement$1 } from './p-ChtYytaJ.js';
 
 const SdInput = SdInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-pagination.js

@@ -1,4 +1,4 @@
-import { S as SdPagination$1, d as defineCustomElement$1 } from './p-D0hPGqjM.js';
+import { S as SdPagination$1, d as defineCustomElement$1 } from './p-BSERuUHP.js';
 
 const SdPagination = SdPagination$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-popover.js

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, h, F as Fragment } from './p-CLODAhOA.js';
-import { T as TooltipArrow } from './p-Bws0p2kF.js';
-import { d as defineCustomElement$4 } from './p-tyC8W4sw.js';
-import { d as defineCustomElement$3 } from './p-DVFPBdfj.js';
-import { d as defineCustomElement$2 } from './p-D267VRcj.js';
+import { p as proxyCustomElement, H, h, F as Fragment } from './p-D_VunbXE.js';
+import { T as TooltipArrow } from './p-Pgg2vJbw.js';
+import { d as defineCustomElement$4 } from './p-Biihf4L_.js';
+import { d as defineCustomElement$3 } from './p-B60pARKe.js';
+import { d as defineCustomElement$2 } from './p-BXPm14Mz.js';
 
-const sdPopoverCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.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}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}: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}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-popover{position:relative;cursor:pointer;display:inline-block}";
+const sdPopoverCss = ".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}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}: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}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-popover{position:relative;cursor:pointer;display:inline-block}";
 
 const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
     constructor(registerHost) {
@@ -44,11 +44,11 @@ const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'e058418533929563a9ea1991823ec5bf2406e5f6' }, this.label ? (h("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", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: 'debecbef44714e705bf87bded2b7a85d016faba1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '26afb49bf9bc4c8227427a9fe93280e5435d20fc', class: {
+        return (h(Fragment, { key: 'fb877e8d016d13fb33b49a1a4dbfed9fc01b1336' }, this.label ? (h("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", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '02208721da61cb84086a57c823f8e31775fdbd5e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '3f3c4fc690dac5061bda08af37121e2b98374979', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '52dd82b64d1d4ae5ec3741febb07ef553e50f42d', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'e94ac6ea51e421546a813406d1821e6f3727e7bd' })), h("div", { key: '0abdb59077846308b2ccff14339eb193f8073433', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '9b0f289d9f7dbfb09c3e0a8b4162af97aef53e73', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '6311f5e4a7ae9699d65d344f0b407b3715f2e072', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '65b7ea1a67400b1887248a615fdb1ba93928e34a', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '9032a6f6381cdf0b4bd3df689280aadb8357ffa6', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '6ac75128090091c510065cb7317478722a35de7c', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: '6f0df95bafc2cbf564fd0e5a133c89f03c3a924b', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '535acee0be86db4ed58d6cc1631732541f1e475e' })), h("div", { key: 'd4366800a8cbd5a1f9630344a5ca4241b0eaa8dd', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '1cd9de3129988c5d26be0ded5b03520ab591cb9a', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '5aae57948bd5e0fd98e73a8ae504b77ce6cdbe07', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '814ac9ba0b2cf4367bb4cd5e688fa5433fee7126', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'a21ad0a5e28f8609b2f9d9accd0be5d81ed9de5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '10738ec0926ea5fbc0b30b5c8c08b6cc37bf47d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]

package/dist/components/sd-popover.js.map

@@ -1 +1 @@
-{"file":"sd-popover.js","mappings":"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","names":["SdPopover","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover&encapsulation=shadow","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n\r\n.sd-popover {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n","import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-popover',\r\n styleUrl: 'sd-popover.scss',\r\n shadow: true,\r\n})\r\nexport class SdPopover {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) show: boolean = false;\r\n\r\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\r\n @Prop({ reflect: true }) messages: string[] = [];\r\n @Prop({ reflect: true }) buttons: {\r\n  [key: string]: any;\r\n }[] = [];\r\n @Prop() menuClass: string = '';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showPopover: boolean = false;\r\n @State() slotContent: string = '';\r\n\r\n @Watch('show')\r\n watchShowHandler(newValue: boolean) {\r\n  this.showPopover = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.showPopover = this.show;\r\n\r\n  this.slotContent = this.el.innerHTML;\r\n\r\n  console.log(this.el);\r\n }\r\n\r\n private buttonEl?: HTMLElement;\r\n\r\n private handleClose = () => {\r\n  this.showPopover = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-popover\"\r\n      onClick={() => (console.log('click popover'), (this.showPopover = !this.showPopover))}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-popover\"\r\n      onClick={() => (console.log('click popover'), (this.showPopover = !this.showPopover))}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showPopover && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={this.handleClose}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-popover-menu': true,\r\n        [`sd-popover-menu--${this.placement}`]: true,\r\n        [this.menuClass]: !!this.menuClass,\r\n       }}\r\n      >\r\n       <i class={`sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow></TooltipArrow>\r\n       </i>\r\n\r\n       <div class=\"sd-popover-menu__content\">\r\n        {this.menuTitle && <div class=\"sd-popover-menu__title\">{this.menuTitle}</div>}\r\n\r\n        {this.messages.length > 0 && (\r\n         <div class=\"sd-popover-menu__messages\">\r\n          {this.messages.map(message => (\r\n           <div>{message}</div>\r\n          ))}\r\n         </div>\r\n        )}\r\n\r\n        {this.buttons.length > 0 && (\r\n         <div class={`sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}`}>\r\n          {this.buttons.map(button => (\r\n           <sd-button {...button} />\r\n          ))}\r\n         </div>\r\n        )}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <button class=\"sd-popover-menu__close-button\" onClick={() => this.handleClose()}>\r\n         <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n        </button>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"],"version":3}
+{"file":"sd-popover.js","mappings":"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","names":["SdPopover","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover&encapsulation=shadow","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n\r\n.sd-popover {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n","import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-popover',\r\n styleUrl: 'sd-popover.scss',\r\n shadow: true,\r\n})\r\nexport class SdPopover {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) show: boolean = false;\r\n\r\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\r\n @Prop({ reflect: true }) messages: string[] = [];\r\n @Prop({ reflect: true }) buttons: {\r\n  [key: string]: any;\r\n }[] = [];\r\n @Prop() menuClass: string = '';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showPopover: boolean = false;\r\n @State() slotContent: string = '';\r\n\r\n @Watch('show')\r\n watchShowHandler(newValue: boolean) {\r\n  this.showPopover = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.showPopover = this.show;\r\n\r\n  this.slotContent = this.el.innerHTML;\r\n\r\n  console.log(this.el);\r\n }\r\n\r\n private buttonEl?: HTMLElement;\r\n\r\n private handleClose = () => {\r\n  this.showPopover = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-popover\"\r\n      onClick={() => (console.log('click popover'), (this.showPopover = !this.showPopover))}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-popover\"\r\n      onClick={() => (console.log('click popover'), (this.showPopover = !this.showPopover))}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showPopover && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={this.handleClose}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-popover-menu': true,\r\n        [`sd-popover-menu--${this.placement}`]: true,\r\n        [this.menuClass]: !!this.menuClass,\r\n       }}\r\n      >\r\n       <i class={`sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow></TooltipArrow>\r\n       </i>\r\n\r\n       <div class=\"sd-popover-menu__content\">\r\n        {this.menuTitle && <div class=\"sd-popover-menu__title\">{this.menuTitle}</div>}\r\n\r\n        {this.messages.length > 0 && (\r\n         <div class=\"sd-popover-menu__messages\">\r\n          {this.messages.map(message => (\r\n           <div>{message}</div>\r\n          ))}\r\n         </div>\r\n        )}\r\n\r\n        {this.buttons.length > 0 && (\r\n         <div class={`sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}`}>\r\n          {this.buttons.map(button => (\r\n           <sd-button {...button} />\r\n          ))}\r\n         </div>\r\n        )}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <button class=\"sd-popover-menu__close-button\" onClick={() => this.handleClose()}>\r\n         <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n        </button>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"],"version":3}