diff --git a/src/components/spreadsheet/spreadsheet.ts b/src/components/spreadsheet/spreadsheet.ts
index 5ab1f37bf1..69814cd5e6 100644
--- a/src/components/spreadsheet/spreadsheet.ts
+++ b/src/components/spreadsheet/spreadsheet.ts
@@ -42,12 +42,498 @@ import { instantiateClipboard } from "./../../helpers/clipboard/navigator_clipbo
 // SpreadSheet
 // -----------------------------------------------------------------------------
 
+<<<<<<< 98073f1f3c34651d836925b13c22829f475f9bc7
 // FIXME Used in encoding in css
 // const CARET_DOWN_SVG = /*xml*/ `
 // <svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'>
 //   <polygon fill='%23374151' points='3.5 4 7 0 0 0'/>
 // </svg>
 // `;
+||||||| 9ca0c4c09f7815a592e18171b768ae112d2f4703
+const CARET_DOWN_SVG = /*xml*/ `
+<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'>
+  <polygon fill='%23374151' points='3.5 4 7 0 0 0'/>
+</svg>
+`;
+
+css/* scss */ `
+  .o-spreadsheet {
+    position: relative;
+    display: grid;
+    font-size: 14px;
+
+    .text-muted {
+      color: ${TEXT_BODY_MUTED} !important;
+    }
+    .o-disabled {
+      opacity: 0.4;
+      cursor: default;
+      pointer-events: none;
+    }
+
+    &,
+    *,
+    *:before,
+    *:after {
+      /* rtl not supported ATM */
+      direction: ltr;
+    }
+    .o-separator {
+      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
+      margin-top: ${MENU_SEPARATOR_PADDING}px;
+      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
+    }
+    .o-hoverable-button {
+      border-radius: 2px;
+      cursor: pointer;
+      .o-icon {
+        color: ${TEXT_BODY};
+      }
+      &:not(.o-disabled):not(.active):hover {
+        background-color: ${BUTTON_HOVER_BG};
+        color: ${BUTTON_HOVER_TEXT_COLOR};
+        .o-icon {
+          color: ${BUTTON_HOVER_TEXT_COLOR};
+        }
+      }
+      &.active {
+        background-color: ${BUTTON_ACTIVE_BG};
+        color: ${BUTTON_ACTIVE_TEXT_COLOR};
+        .o-icon {
+          color: ${BUTTON_ACTIVE_TEXT_COLOR};
+        }
+      }
+    }
+
+    .o-grid-container {
+      display: grid;
+      background-color: ${HEADER_GROUPING_BACKGROUND_COLOR};
+
+      .o-top-left {
+        border: 1px solid ${GRID_BORDER_COLOR};
+        margin-bottom: -1px;
+        margin-right: -1px;
+      }
+
+      .o-column-groups {
+        grid-column-start: 2;
+        border-top: 1px solid ${GRID_BORDER_COLOR};
+      }
+
+      .o-row-groups {
+        grid-row-start: 2;
+      }
+
+      .o-group-grid {
+        border-top: 1px solid ${GRID_BORDER_COLOR};
+        border-left: 1px solid ${GRID_BORDER_COLOR};
+      }
+    }
+
+    .o-input {
+      min-width: 0px;
+      padding: 1px 0;
+      width: 100%;
+      outline: none;
+      border-color: ${GRAY_300};
+      color: ${GRAY_900};
+
+      &::placeholder {
+        opacity: 0.5;
+      }
+      &:focus {
+        border-color: ${ACTION_COLOR};
+      }
+    }
+
+    select.o-input {
+      cursor: pointer;
+      border-width: 0 0 1px 0;
+      padding: 1px 6px 1px 0px;
+
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      background: transparent url("data:image/svg+xml,${encodeURIComponent(CARET_DOWN_SVG)}")
+        no-repeat right center;
+      text-overflow: ellipsis;
+
+      &:disabled {
+        color: ${DISABLED_TEXT_COLOR};
+        opacity: 0.4;
+        cursor: default;
+      }
+    }
+
+    .o-input[type="text"] {
+      border-width: 0 0 1px 0;
+    }
+
+    .o-input[type="number"],
+    .o-number-input {
+      border-width: 0 0 1px 0;
+      /* Remove number input arrows */
+      appearance: textfield;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+  }
+
+  .o-two-columns {
+    grid-column: 1 / 3;
+  }
+
+  .o-text-icon {
+    vertical-align: middle;
+  }
+`;
+
+// -----------------------------------------------------------------------------
+// GRID STYLE
+// -----------------------------------------------------------------------------
+
+css/* scss */ `
+  .o-grid {
+    position: relative;
+    overflow: hidden;
+    background-color: ${BACKGROUND_GRAY_COLOR};
+    &:focus {
+      outline: none;
+    }
+
+    > canvas {
+      box-sizing: content-box;
+      border-bottom: 1px solid #e2e3e3;
+      border-right: 1px solid #e2e3e3;
+    }
+
+    .o-grid-overlay {
+      position: absolute;
+      outline: none;
+    }
+  }
+
+  .o-button {
+    border: 1px solid;
+    border-radius: 4px;
+    font-weight: 500;
+    font-size: 14px;
+    height: 32px;
+    line-height: 16px;
+    flex-grow: 1;
+    background-color: ${BUTTON_BG};
+    border: 1px solid ${GRAY_200};
+    color: ${TEXT_BODY};
+
+    &:disabled {
+      color: ${DISABLED_TEXT_COLOR};
+    }
+
+    &.primary {
+      background-color: ${PRIMARY_BUTTON_BG};
+      border-color: ${PRIMARY_BUTTON_BG};
+      color: #fff;
+      &:hover:enabled {
+        color: #fff;
+        background-color: ${PRIMARY_BUTTON_HOVER_BG};
+      }
+      &:active:enabled {
+        background-color: ${PRIMARY_BUTTON_ACTIVE_BG};
+        color: ${PRIMARY_BUTTON_BG};
+      }
+      &.o-disabled,
+      &:disabled {
+        opacity: 0.5;
+      }
+    }
+
+    &:hover:enabled {
+      color: ${BUTTON_HOVER_TEXT_COLOR};
+      background-color: ${BUTTON_HOVER_BG};
+    }
+    &:active:enabled {
+      color: ${BUTTON_ACTIVE_TEXT_COLOR};
+      background-color: ${BUTTON_ACTIVE_BG};
+    }
+
+    &.o-disabled,
+    &:disabled {
+      opacity: 0.8;
+    }
+
+    &.o-button-danger:hover {
+      color: #ffffff;
+      background: ${ALERT_DANGER_BORDER};
+    }
+  }
+
+  .o-button-link {
+    cursor: pointer;
+    text-decoration: none;
+    color: ${ACTION_COLOR};
+    font-weight: 500;
+    &:hover,
+    &:active {
+      color: ${ACTION_COLOR_HOVER};
+    }
+  }
+
+  .o-button-icon {
+    cursor: pointer;
+    color: ${TEXT_BODY_MUTED};
+    font-weight: 500;
+    &:hover,
+    &:active {
+      color: ${TEXT_BODY};
+    }
+  }
+`;
+=======
+const CARET_DOWN_SVG = /*xml*/ `
+<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'>
+  <polygon fill='%23374151' points='3.5 4 7 0 0 0'/>
+</svg>
+`;
+
+css/* scss */ `
+  .o-spreadsheet {
+    position: relative;
+    display: grid;
+    font-size: 14px;
+
+    .text-muted {
+      color: ${TEXT_BODY_MUTED} !important;
+    }
+    .o-disabled {
+      opacity: 0.4;
+      cursor: default;
+      pointer-events: none;
+    }
+
+    &,
+    *,
+    *:before,
+    *:after {
+      /* rtl not supported ATM */
+      direction: ltr;
+    }
+    .o-separator {
+      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
+      margin-top: ${MENU_SEPARATOR_PADDING}px;
+      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
+    }
+    .o-hoverable-button {
+      border-radius: 2px;
+      cursor: pointer;
+      .o-icon {
+        color: ${TEXT_BODY};
+      }
+      &:not(.o-disabled):not(.active):hover {
+        background-color: ${BUTTON_HOVER_BG};
+        color: ${BUTTON_HOVER_TEXT_COLOR};
+        .o-icon {
+          color: ${BUTTON_HOVER_TEXT_COLOR};
+        }
+      }
+      &.active {
+        background-color: ${BUTTON_ACTIVE_BG};
+        color: ${BUTTON_ACTIVE_TEXT_COLOR};
+        .o-icon {
+          color: ${BUTTON_ACTIVE_TEXT_COLOR};
+        }
+      }
+    }
+
+    .o-grid-container {
+      display: grid;
+      background-color: ${HEADER_GROUPING_BACKGROUND_COLOR};
+
+      .o-top-left {
+        border: 1px solid ${GRID_BORDER_COLOR};
+        margin-bottom: -1px;
+        margin-right: -1px;
+      }
+
+      .o-column-groups {
+        grid-column-start: 2;
+        border-top: 1px solid ${GRID_BORDER_COLOR};
+      }
+
+      .o-row-groups {
+        grid-row-start: 2;
+      }
+
+      .o-group-grid {
+        border-top: 1px solid ${GRID_BORDER_COLOR};
+        border-left: 1px solid ${GRID_BORDER_COLOR};
+      }
+    }
+
+    .o-input {
+      min-width: 0px;
+      padding: 1px 0;
+      width: 100%;
+      outline: none;
+      border-color: ${GRAY_300};
+      color: ${GRAY_900};
+
+      &::placeholder {
+        opacity: 0.5;
+      }
+      &:focus {
+        border-color: ${ACTION_COLOR};
+      }
+    }
+
+    select.o-input {
+      cursor: pointer;
+      border-width: 0 0 1px 0;
+      padding: 1px 6px 1px 0px;
+
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      background: transparent url("data:image/svg+xml,${encodeURIComponent(CARET_DOWN_SVG)}")
+        no-repeat right center;
+      text-overflow: ellipsis;
+
+      &:disabled {
+        color: ${DISABLED_TEXT_COLOR};
+        opacity: 0.4;
+        cursor: default;
+      }
+    }
+
+    .o-input[type="text"] {
+      border-width: 0 0 1px 0;
+    }
+
+    .o-input[type="number"],
+    .o-number-input {
+      border-width: 0 0 1px 0;
+      /* Remove number input arrows */
+      appearance: textfield;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+  }
+
+  .o-two-columns {
+    grid-column: 1 / 3;
+  }
+
+  .o-text-icon {
+    vertical-align: middle;
+  }
+`;
+
+// -----------------------------------------------------------------------------
+// GRID STYLE
+// -----------------------------------------------------------------------------
+
+css/* scss */ `
+  .o-grid {
+    position: relative;
+    overflow: hidden;
+    background-color: ${BACKGROUND_GRAY_COLOR};
+    &:focus {
+      outline: none;
+    }
+
+    > canvas {
+      box-sizing: content-box;
+      border-bottom: 1px solid #e2e3e3;
+      border-right: 1px solid #e2e3e3;
+    }
+
+    .o-grid-overlay {
+      position: absolute;
+      outline: none;
+    }
+  }
+
+  .o-button {
+    border: 1px solid;
+    border-radius: 4px;
+    font-weight: 500;
+    font-size: 14px;
+    min-height: 32px;
+    line-height: 16px;
+    flex-grow: 1;
+    background-color: ${BUTTON_BG};
+    border: 1px solid ${GRAY_200};
+    color: ${TEXT_BODY};
+
+    &:disabled {
+      color: ${DISABLED_TEXT_COLOR};
+    }
+
+    &.primary {
+      background-color: ${PRIMARY_BUTTON_BG};
+      border-color: ${PRIMARY_BUTTON_BG};
+      color: #fff;
+      &:hover:enabled {
+        color: #fff;
+        background-color: ${PRIMARY_BUTTON_HOVER_BG};
+      }
+      &:active:enabled {
+        background-color: ${PRIMARY_BUTTON_ACTIVE_BG};
+        color: ${PRIMARY_BUTTON_BG};
+      }
+      &.o-disabled,
+      &:disabled {
+        opacity: 0.5;
+      }
+    }
+
+    &:hover:enabled {
+      color: ${BUTTON_HOVER_TEXT_COLOR};
+      background-color: ${BUTTON_HOVER_BG};
+    }
+    &:active:enabled {
+      color: ${BUTTON_ACTIVE_TEXT_COLOR};
+      background-color: ${BUTTON_ACTIVE_BG};
+    }
+
+    &.o-disabled,
+    &:disabled {
+      opacity: 0.8;
+    }
+
+    &.o-button-danger:hover {
+      color: #ffffff;
+      background: ${ALERT_DANGER_BORDER};
+    }
+  }
+
+  .o-button-link {
+    cursor: pointer;
+    text-decoration: none;
+    color: ${ACTION_COLOR};
+    font-weight: 500;
+    &:hover,
+    &:active {
+      color: ${ACTION_COLOR_HOVER};
+    }
+  }
+
+  .o-button-icon {
+    cursor: pointer;
+    color: ${TEXT_BODY_MUTED};
+    font-weight: 500;
+    &:hover,
+    &:active {
+      color: ${TEXT_BODY};
+    }
+  }
+`;
+>>>>>>> 5c868d9f38a4a1ffb6e2cbf4a0f43d5f06ee4dbe
 
 export interface SpreadsheetProps extends Partial<NotificationStoreMethods> {
   model: Model;