From afaeea1fc4d1fe55b1bd6fec6748e4fc0504763f Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Sat, 12 Oct 2024 11:58:26 -0400
Subject: [PATCH] chore: add Context, Header & Grid Menus to Trading Demo

---
 dist/styles/css/slick-icons.css   |   2 +-
 examples/example-icons.html       |   2 +-
 examples/example-trading-esm.html | 112 ++++++++++++++++++++++++++++--
 src/styles/slick-icons.scss       |   2 +
 4 files changed, 112 insertions(+), 6 deletions(-)

diff --git a/dist/styles/css/slick-icons.css b/dist/styles/css/slick-icons.css
index 7c0b0aad0..bdc0983c5 100644
--- a/dist/styles/css/slick-icons.css
+++ b/dist/styles/css/slick-icons.css
@@ -1 +1 @@
-.sgi-chevron-start{--sgi-chevron-start-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-chevron-start-icon-svg) no-repeat;mask:var(--sgi-chevron-start-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-chevron-left{--sgi-chevron-left-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.42Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-chevron-left-icon-svg) no-repeat;mask:var(--sgi-chevron-left-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-chevron-right{--sgi-chevron-right-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-chevron-right-icon-svg) no-repeat;mask:var(--sgi-chevron-right-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-chevron-end{--sgi-chevron-end-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M5.59 7.41 10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-chevron-end-icon-svg) no-repeat;mask:var(--sgi-chevron-end-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-cancel{--sgi-cancel-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-cancel-icon-svg) no-repeat;mask:var(--sgi-cancel-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-caret{--sgi-caret-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M7,10L12,15L17,10H7Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-caret-icon-svg) no-repeat;mask:var(--sgi-caret-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-check{--sgi-check-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-check-icon-svg) no-repeat;mask:var(--sgi-check-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-check-bold{--sgi-check-bold-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-check-bold-icon-svg) no-repeat;mask:var(--sgi-check-bold-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-close{--sgi-close-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-close-icon-svg) no-repeat;mask:var(--sgi-close-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-checkbox-outline{--sgi-checkbox-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-checkbox-outline-icon-svg) no-repeat;mask:var(--sgi-checkbox-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-checkbox-marked-outline{--sgi-checkbox-marked-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-checkbox-marked-outline-icon-svg) no-repeat;mask:var(--sgi-checkbox-marked-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-checkbox-blank-outline{--sgi-checkbox-blank-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-checkbox-blank-outline-icon-svg) no-repeat;mask:var(--sgi-checkbox-blank-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-checkbox-intermediate{--sgi-checkbox-intermediate-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M17,17H7V7H17V17Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-checkbox-intermediate-icon-svg) no-repeat;mask:var(--sgi-checkbox-intermediate-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-coffee-outline{--sgi-coffee-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-coffee-outline-icon-svg) no-repeat;mask:var(--sgi-coffee-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-drag{--sgi-drag-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-drag-icon-svg) no-repeat;mask:var(--sgi-drag-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-drag-vertical{--sgi-drag-vertical-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-drag-vertical-icon-svg) no-repeat;mask:var(--sgi-drag-vertical-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-hashtag{--sgi-hashtag-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-hashtag-icon-svg) no-repeat;mask:var(--sgi-hashtag-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-help-circle-outline{--sgi-help-circle-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-help-circle-outline-icon-svg) no-repeat;mask:var(--sgi-help-circle-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-information-outline{--sgi-information-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-information-outline-icon-svg) no-repeat;mask:var(--sgi-information-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-lightbulb{--sgi-lightbulb-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7M9 21v-1h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1m3-17a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-lightbulb-icon-svg) no-repeat;mask:var(--sgi-lightbulb-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-loading{--sgi-loading-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-loading-icon-svg) no-repeat;mask:var(--sgi-loading-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-menu{--sgi-menu-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-menu-icon-svg) no-repeat;mask:var(--sgi-menu-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-message-outline{--sgi-message-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2M20 16H5.2L4 17.2V4H20V16Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-message-outline-icon-svg) no-repeat;mask:var(--sgi-message-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-pencil-outline{--sgi-pencil-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-pencil-outline-icon-svg) no-repeat;mask:var(--sgi-pencil-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-minus-box-outline{--sgi-minus-box-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-minus-box-outline-icon-svg) no-repeat;mask:var(--sgi-minus-box-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-plus-box-outline{--sgi-plus-box-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-plus-box-outline-icon-svg) no-repeat;mask:var(--sgi-plus-box-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-search{--sgi-search-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-search-icon-svg) no-repeat;mask:var(--sgi-search-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-star{--sgi-star-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-star-icon-svg) no-repeat;mask:var(--sgi-star-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-star-outline{--sgi-star-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-star-outline-icon-svg) no-repeat;mask:var(--sgi-star-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-tag-outline{--sgi-tag-outline-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M21.41 11.58L12.41 2.58A2 2 0 0 0 11 2H4A2 2 0 0 0 2 4V11A2 2 0 0 0 2.59 12.42L11.59 21.42A2 2 0 0 0 13 22A2 2 0 0 0 14.41 21.41L21.41 14.41A2 2 0 0 0 22 13A2 2 0 0 0 21.41 11.58M13 20L4 11V4H11L20 13M6.5 5A1.5 1.5 0 1 1 5 6.5A1.5 1.5 0 0 1 6.5 5Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-tag-outline-icon-svg) no-repeat;mask:var(--sgi-tag-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-undo{--sgi-undo-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-undo-icon-svg) no-repeat;mask:var(--sgi-undo-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-user{--sgi-user-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-user-icon-svg) no-repeat;mask:var(--sgi-user-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi{background-color:currentColor;color:inherit;display:inline-block;font-size:18px;height:1em;width:1em}.sgi.sgi-state-disabled{opacity:.35}.sgi.sgi-10px{font-size:10px}.sgi.sgi-11px{font-size:11px}.sgi.sgi-12px{font-size:12px}.sgi.sgi-13px{font-size:13px}.sgi.sgi-14px{font-size:14px}.sgi.sgi-15px{font-size:15px}.sgi.sgi-16px{font-size:16px}.sgi.sgi-17px{font-size:17px}.sgi.sgi-18px{font-size:18px}.sgi.sgi-19px{font-size:19px}.sgi.sgi-20px{font-size:20px}.sgi.sgi-21px{font-size:21px}.sgi.sgi-22px{font-size:22px}.sgi.sgi-23px{font-size:23px}.sgi.sgi-24px{font-size:24px}.sgi.sgi-25px{font-size:25px}.sgi.sgi-26px{font-size:26px}.sgi.sgi-27px{font-size:27px}.sgi.sgi-28px{font-size:28px}.sgi.sgi-29px{font-size:29px}.sgi.sgi-30px{font-size:30px}.sgi.sgi-flip-h{transform:scaleX(-1)}.sgi.sgi-flip-v{transform:scaleY(-1)}.sgi.sgi-spin{align-items:center;animation:md-spin 2s linear infinite;display:inline-flex;justify-content:center}@keyframes md-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
\ No newline at end of file
+.sgi-chevron-start{--sgi-chevron-start-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-chevron-start-icon-svg) no-repeat;mask:var(--sgi-chevron-start-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-chevron-left{--sgi-chevron-left-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.42Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-chevron-left-icon-svg) no-repeat;mask:var(--sgi-chevron-left-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-chevron-right{--sgi-chevron-right-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-chevron-right-icon-svg) no-repeat;mask:var(--sgi-chevron-right-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-chevron-end{--sgi-chevron-end-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M5.59 7.41 10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-chevron-end-icon-svg) no-repeat;mask:var(--sgi-chevron-end-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-arrow-collapse{--sgi-arrow-collapse-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-arrow-collapse-icon-svg) no-repeat;mask:var(--sgi-arrow-collapse-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-arrow-expand{--sgi-arrow-expand-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-arrow-expand-icon-svg) no-repeat;mask:var(--sgi-arrow-expand-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-cancel{--sgi-cancel-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-cancel-icon-svg) no-repeat;mask:var(--sgi-cancel-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-caret{--sgi-caret-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M7,10L12,15L17,10H7Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-caret-icon-svg) no-repeat;mask:var(--sgi-caret-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-check{--sgi-check-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-check-icon-svg) no-repeat;mask:var(--sgi-check-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-check-bold{--sgi-check-bold-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-check-bold-icon-svg) no-repeat;mask:var(--sgi-check-bold-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-close{--sgi-close-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-close-icon-svg) no-repeat;mask:var(--sgi-close-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-checkbox-outline{--sgi-checkbox-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-checkbox-outline-icon-svg) no-repeat;mask:var(--sgi-checkbox-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-checkbox-marked-outline{--sgi-checkbox-marked-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-checkbox-marked-outline-icon-svg) no-repeat;mask:var(--sgi-checkbox-marked-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-checkbox-blank-outline{--sgi-checkbox-blank-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-checkbox-blank-outline-icon-svg) no-repeat;mask:var(--sgi-checkbox-blank-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-checkbox-intermediate{--sgi-checkbox-intermediate-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M17,17H7V7H17V17Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-checkbox-intermediate-icon-svg) no-repeat;mask:var(--sgi-checkbox-intermediate-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-coffee-outline{--sgi-coffee-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-coffee-outline-icon-svg) no-repeat;mask:var(--sgi-coffee-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-drag{--sgi-drag-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-drag-icon-svg) no-repeat;mask:var(--sgi-drag-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-drag-vertical{--sgi-drag-vertical-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-drag-vertical-icon-svg) no-repeat;mask:var(--sgi-drag-vertical-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-hashtag{--sgi-hashtag-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-hashtag-icon-svg) no-repeat;mask:var(--sgi-hashtag-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-help-circle-outline{--sgi-help-circle-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-help-circle-outline-icon-svg) no-repeat;mask:var(--sgi-help-circle-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-information-outline{--sgi-information-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-information-outline-icon-svg) no-repeat;mask:var(--sgi-information-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-lightbulb{--sgi-lightbulb-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7M9 21v-1h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1m3-17a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-lightbulb-icon-svg) no-repeat;mask:var(--sgi-lightbulb-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-loading{--sgi-loading-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-loading-icon-svg) no-repeat;mask:var(--sgi-loading-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-menu{--sgi-menu-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-menu-icon-svg) no-repeat;mask:var(--sgi-menu-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-message-outline{--sgi-message-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2M20 16H5.2L4 17.2V4H20V16Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-message-outline-icon-svg) no-repeat;mask:var(--sgi-message-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-pencil-outline{--sgi-pencil-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-pencil-outline-icon-svg) no-repeat;mask:var(--sgi-pencil-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-minus-box-outline{--sgi-minus-box-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-minus-box-outline-icon-svg) no-repeat;mask:var(--sgi-minus-box-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-plus-box-outline{--sgi-plus-box-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-plus-box-outline-icon-svg) no-repeat;mask:var(--sgi-plus-box-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-search{--sgi-search-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-search-icon-svg) no-repeat;mask:var(--sgi-search-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-star{--sgi-star-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-star-icon-svg) no-repeat;mask:var(--sgi-star-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-star-outline{--sgi-star-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-star-outline-icon-svg) no-repeat;mask:var(--sgi-star-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-tag-outline{--sgi-tag-outline-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M21.41 11.58L12.41 2.58A2 2 0 0 0 11 2H4A2 2 0 0 0 2 4V11A2 2 0 0 0 2.59 12.42L11.59 21.42A2 2 0 0 0 13 22A2 2 0 0 0 14.41 21.41L21.41 14.41A2 2 0 0 0 22 13A2 2 0 0 0 21.41 11.58M13 20L4 11V4H11L20 13M6.5 5A1.5 1.5 0 1 1 5 6.5A1.5 1.5 0 0 1 6.5 5Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-tag-outline-icon-svg) no-repeat;mask:var(--sgi-tag-outline-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-undo{--sgi-undo-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-undo-icon-svg) no-repeat;mask:var(--sgi-undo-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi-user{--sgi-user-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/%3E%3C/svg%3E');-webkit-mask:var(--sgi-user-icon-svg) no-repeat;mask:var(--sgi-user-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.sgi{display:inline-block;background-color:currentColor;color:inherit;font-size:18px;width:1em;height:1em}.sgi.sgi-state-disabled{opacity:.35}.sgi.sgi-10px{font-size:10px}.sgi.sgi-11px{font-size:11px}.sgi.sgi-12px{font-size:12px}.sgi.sgi-13px{font-size:13px}.sgi.sgi-14px{font-size:14px}.sgi.sgi-15px{font-size:15px}.sgi.sgi-16px{font-size:16px}.sgi.sgi-17px{font-size:17px}.sgi.sgi-18px{font-size:18px}.sgi.sgi-19px{font-size:19px}.sgi.sgi-20px{font-size:20px}.sgi.sgi-21px{font-size:21px}.sgi.sgi-22px{font-size:22px}.sgi.sgi-23px{font-size:23px}.sgi.sgi-24px{font-size:24px}.sgi.sgi-25px{font-size:25px}.sgi.sgi-26px{font-size:26px}.sgi.sgi-27px{font-size:27px}.sgi.sgi-28px{font-size:28px}.sgi.sgi-29px{font-size:29px}.sgi.sgi-30px{font-size:30px}.sgi.sgi-flip-h{transform:scaleX(-1)}.sgi.sgi-flip-v{transform:scaleY(-1)}.sgi.sgi-spin{align-items:center;display:inline-flex;justify-content:center;animation:md-spin 2s infinite linear}@-webkit-keyframes md-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes md-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
\ No newline at end of file
diff --git a/examples/example-icons.html b/examples/example-icons.html
index e6a14863a..cd55d1d93 100644
--- a/examples/example-icons.html
+++ b/examples/example-icons.html
@@ -58,7 +58,7 @@
 </style>
 <script>
 const iconList = [
-  'sgi-chevron-start', 'sgi-chevron-left', 'sgi-chevron-right', 'sgi-chevron-end', 'sgi-cancel', 'sgi-caret', 'sgi-check', 'sgi-check-bold',
+  'sgi-arrow-collapse', 'sgi-arrow-expand', 'sgi-chevron-start', 'sgi-chevron-left', 'sgi-chevron-right', 'sgi-chevron-end', 'sgi-cancel', 'sgi-caret', 'sgi-check', 'sgi-check-bold',
   'sgi-close', 'sgi-checkbox-blank-outline', 'sgi-checkbox-outline', 'sgi-checkbox-marked-outline',
   'sgi-checkbox-intermediate', 'sgi-coffee-outline', 'sgi-drag', 'sgi-drag-vertical', 'sgi-help-circle-outline', 'sgi-hashtag', 'sgi-information-outline',
   'sgi-lightbulb', 'sgi-loading', 'sgi-menu', 'sgi-message-outline',
diff --git a/examples/example-trading-esm.html b/examples/example-trading-esm.html
index 15cbcb790..85f08ff5f 100644
--- a/examples/example-trading-esm.html
+++ b/examples/example-trading-esm.html
@@ -5,6 +5,9 @@
   <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
   <title>SlickGrid example 4: Model</title>
   <link rel="stylesheet" href="../dist/styles/css/slick.columnpicker.css" type="text/css"/>
+  <link rel="stylesheet" href="../dist/styles/css/slick.gridmenu.css" type="text/css"/>
+  <link rel="stylesheet" href="../dist/styles/css/slick.contextmenu.css" type="text/css" />
+  <link rel="stylesheet" href="../dist/styles/css/slick.headermenu.css" type="text/css" />
   <link rel="stylesheet" href="../dist/styles/css/slick-icons.css" type="text/css"/>
   <link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
   <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
@@ -55,6 +58,13 @@
     .color-warning {
       color: #ffa700;
     }
+    .slick-header-menubutton {
+      border: 1px solid #dedede;
+      border-width: 0 1px 0 1px;
+    }
+    .slick-header-menubutton span {
+      margin-top: 40%;
+    }
   </style>
 </head>
 <body>
@@ -120,8 +130,11 @@ <h2>View Source:</h2>
     SlickGlobalEditorLock,
     SlickRowSelectionModel,
     SlickColumnPicker,
+    SlickContextMenu,
     SlickDataView,
     SlickGrid,
+    SlickGridMenu,
+    SlickHeaderMenu,
     SlickGroupItemMetadataProvider,
     Utils,
   } from '../dist/esm/index.js';
@@ -178,12 +191,48 @@ <h2>View Source:</h2>
     },
   ];
 
+  // also add Header Menu options
+  for (var i = 0; i < columns.length; i++) {
+    columns[i].header = {
+      menu: {
+        commandItems: [
+          {
+            iconCssClass: 'sgi sgi-caret sgi-flip-v',
+            title: "Sort Ascending",
+            disabled: !columns[i].sortable,
+            // hidden: !columns[i].sortable, // you could disable or hide the command completely
+            command: "sort-asc"
+          },
+          {
+            iconCssClass: 'sgi sgi-caret',
+            title: "Sort Descending",
+            disabled: !columns[i].sortable,
+            // hidden: !columns[i].sortable, // you could disable or hide the command completely
+            cssClass: !columns[i].sortable ? 'italic' : '',
+            command: "sort-desc"
+          },
+          {
+            title: "Hide Column",
+            command: "hide",
+          },
+        ]
+      }
+    };
+  }
+
+  // keep a copy of all column for the array of visible columns
+  var visibleColumns = columns;
+
   const options = {
     editable: true,
     enableAddRow: true,
     enableCellNavigation: true,
     asyncEditorLoading: true,
     forceFitColumns: false,
+    gridMenu: {
+      iconCssClass: "sgi sgi-menu sgi-17px",
+      columnTitle: "Columns",
+    },
     topPanelHeight: 35,
     rowHeight: 28
   };
@@ -369,6 +418,18 @@ <h2>View Source:</h2>
     return floor ? Math.floor(number) : number;
   }
 
+  function removeColumnById(array, idVal) {
+    return array.filter(function (el, i) {
+      return el.id !== idVal;
+    });
+  }
+
+  function removeSortColumnById(array, idVal) {
+    return array.filter(function (el, i) {
+      return el.columnId !== idVal;
+    });
+  }
+
 document.addEventListener("DOMContentLoaded", () => {
   // prepare the data
   data = getData(200);
@@ -387,12 +448,55 @@ <h2>View Source:</h2>
   grid.setSelectionModel(new SlickRowSelectionModel());
 
   const columnpicker = new SlickColumnPicker(columns, grid, options);
+  const gridMenuControl = new SlickGridMenu(columns, grid, options);
+
+  const contextMenuOptions = {
+    commandTitle: "Commands",
+    commandItems: [
+      {
+        command: "group-collapse", iconCssClass: "sgi sgi-arrow-collapse", title: "Collapse all Groups",
+        action: () => toggleGrouping(false),
+        itemUsabilityOverride: () => dataView.getGrouping().length
+      },
+      {
+        command: "group-expand", iconCssClass: "sgi sgi-arrow-expand", title: "Expand all Groups",
+        action: () => toggleGrouping(true),
+        itemUsabilityOverride: () => dataView.getGrouping().length
+      },
+      {
+        command: "group-clearing", iconCssClass: "sgi sgi-close", title: "Clear Grouping",
+        action: () => dataView.setGrouping([]),
+        itemUsabilityOverride: () => dataView.getGrouping().length
+      },
+    ],
+  };
+  const contextMenuPlugin = new SlickContextMenu(contextMenuOptions);
+  const headerMenuPlugin = new SlickHeaderMenu({ buttonCssClass: 'sgi sgi-caret' });
+  grid.registerPlugin(contextMenuPlugin);
+  grid.registerPlugin(headerMenuPlugin);
+
+
+  headerMenuPlugin.onCommand.subscribe((e, args) => {
+    if (args.command === "hide") {
+      // hide column
+      visibleColumns = removeColumnById(visibleColumns, args.column.id);
+      grid.setColumns(visibleColumns);
+    } else if (args.command === "sort-asc" || args.command === "sort-desc") {
+      const isSortedAsc = (args.command === "sort-asc");
+      const sortCols = removeSortColumnById(grid.getSortColumns(), args.column.id);
+      sortCols.push({ sortAsc: isSortedAsc, columnId: args.column.id });
+      grid.setSortColumns(sortCols);
+      dataView.sort(comparer, isSortedAsc);
+    } else {
+      alert("Command: " + args.command);
+    }
+  });
 
-  grid.onCellChange.subscribe(function (e, args) {
+  grid.onCellChange.subscribe((e, args) => {
     dataView.updateItem(args.item.id, args.item);
   });
 
-  grid.onSort.subscribe(function (e, args) {
+  grid.onSort.subscribe((e, args) => {
     sortdir = args.sortAsc ? 1 : -1;
     sortcol = args.sortCol.field;
 
@@ -403,12 +507,12 @@ <h2>View Source:</h2>
   // wire up model events to drive the grid
   // !! both dataView.onRowCountChanged and dataView.onRowsChanged MUST be wired to correctly update the grid
   // see Issue#91
-  dataView.onRowCountChanged.subscribe(function (e, args) {
+  dataView.onRowCountChanged.subscribe((e, args) => {
     grid.updateRowCount();
     grid.render();
   });
 
-  dataView.onRowsChanged.subscribe(function (e, args) {
+  dataView.onRowsChanged.subscribe((e, args) => {
     grid.invalidateRows(args.rows);
     grid.render();
   });
diff --git a/src/styles/slick-icons.scss b/src/styles/slick-icons.scss
index 6e7405c36..79f964424 100644
--- a/src/styles/slick-icons.scss
+++ b/src/styles/slick-icons.scss
@@ -13,6 +13,8 @@ $slick-icon-width-max-size: 30 !default;
 @include createSvgClass("sgi-chevron-right", "M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42Z");
 @include createSvgClass("sgi-chevron-end", "M5.59 7.41 10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z");
 
+@include createSvgClass("sgi-arrow-collapse", "M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z");
+@include createSvgClass("sgi-arrow-expand", "M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z");
 @include createSvgClass("sgi-cancel", "M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z");
 @include createSvgClass("sgi-caret", "M7,10L12,15L17,10H7Z");
 @include createSvgClass("sgi-check", "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z");