forstok-ui-lib 6.20.2 → 6.21.2

package/src/components/masterTable/styles.tsx

@@ -1,1011 +0,0 @@
-import styled, { css } from 'styled-components';
-import { formLabel, elipsis, thirdElipsis } from '../../assets/stylesheets/bases.styles';
-
-import IconEditWhite from '../../assets/images/icons/edit-white.svg'
-import IconLoadingRed from '../../assets/images/icons/loading-red.svg'
-
-const divHeaderCell = css`
-  overflow: hidden;
-  position: relative;
-  top: 0;
-  display: inline-block;
-  height: 50px;
-  padding: 10px 10px;
-  border-right: 1px solid var(--tab-clr-ln);
-  font-weight: 600;
-  line-height: 15px;
-  font-size: 1em
-  color: var(--hd-clr);
-  transition: width .25s ease-in-out;
-`
-const divCell = css`
-  overflow: hidden;
-  position: relative;
-  top: 0;
-  display: inline-block;
-  min-height: 82px;
-  padding: 16px 9px 10px 10px;
-  border-right: 1px solid var(--tab-clr-ln);
-  line-height: 1.2;
-  transition: width .25s ease-in-out, height .25s ease-in-out;
-  vertical-align: top;
-  i {
-    align-self: flex-start;
-    cursor: pointer;
-  }
-`
-const divCellReset = css`
-  overflow: auto;
-  top: auto;
-  height: auto;
-  padding: 0;
-  border: 0;
-  cursor: default;
-`
-const errrorLists = css`
-  input, textarea, .table-image-figure.is-error, .rc-cascader-selector, ._refCascaderContainer > div {
-    border: 1px solid var(--err-clr-ln) !important;
-  }
-  input.rc-cascader-selection-search-input {
-    border: none !important;
-  }
-  ._refContainer  > div > div {
-    border-color: var(--err-clr-ln);
-    input {
-      border: none !important;
-    }
-  }
-`
-const commonCSSLists = css`
-  .table-image-figure {
-    display: block;
-    overflow: hidden;
-    width: 56px;
-    height: 56px;
-    margin: 0px;
-    position: relative;
-    border: 1px solid var(--pri-clr-ln);
-    background-color: var(--pri-clr-bg);
-    border-radius: var(--ter-rd);
-    &.edit, &.add, &.loading {
-      width: 70px;
-      height: 70px;
-      cursor: pointer;
-      img {
-        object-fit: contain;
-        width: 100%;
-        height: 100%;
-        background-color: var(--pri-clr-bg);
-      }
-    }
-    &.add {
-      background-color: #fbfdff;
-      border: 1px dashed #828ea3;
-      span {
-        color: #828ea3;
-        font-size: 20px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-    }
-    &.edit {
-      border: 1px solid rgba(0, 0, 0, .04);
-      &:hover {
-        position: relative;
-        span { 
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: 1;
-          background-color: var(--ov-clr-bg);
-        }
-        &::after { 
-          content: url(${IconEditWhite});
-          height: 14px
-          width: 14px;
-          display: inline-block;
-          pointer-events: none;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          z-index: 10;
-        }
-      }
-    }
-    &.loading {
-      border: 1px solid rgba(0, 0, 0, .04);
-      cursor: default;
-      &::after { 
-        content: url(${IconLoadingRed});
-        height: 14px;
-        width: 14px;
-        display: inline-block;
-        pointer-events: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 10;
-      }
-    }
-    img {
-      object-fit: contain;
-      width: 100%;
-      height: 100%;
-      background-color: var(--pri-clr-bg);
-    }
-  }
-`
-const trancateCSS = css`
-  .truncate-overflow {
-    position: relative;
-    max-height: calc(16 * 3)px;
-    display: -webkit-box !important;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    word-break: break-all;
-    line-height: 16px;
-    p { 
-      line-height: 16px; 
-    }
-  }
-`
-
-const getTablePopupWrapperModifiedStyled = ({ $mode }:{ $mode?: string }) => {
-  let style = ``
-  if ($mode === 'image-listing') {
-    style += `
-      padding: 12px 12px 12px 12px;
-      overflow: visible;
-      max-width: 452px;
-      .table-image-figure {
-        &.edit, &.add, &.loading {
-          width: 46.5px;
-          height: 46.5px;
-        }
-      }
-      .image-list {
-        max-width: 452px;
-        grid-gap: 8px;
-        grid-template-columns: repeat(3,46.5px);
-        grid-template-rows: repeat(3,auto);
-      }
-      @media only screen and (min-width: 768px) {
-        .image-list {
-          grid-template-columns: repeat(8, 46.5px);
-          grid-auto-flow: unset;
-          grid-template-rows: auto;
-        }
-    
-      }
-    `
-  }
-  return style
-}
-const getCustomWrapperModifiedStyled = ({ $isExpand, $isEditable }:{ $isExpand?: boolean, $isEditable?: boolean }) => {
-  let style = ``
-  if ($isExpand) {
-    style += `
-      & ${CategoryByLabelContainer} {
-        padding-bottom: 8px;
-      }
-    `
-  }
-  if ($isEditable === false) {
-      style += `
-        grid-gap: 4px;
-        padding-left: 4px;
-        padding-top: 6px;
-      `
-  }
-  return style
-}
-const getFieldContainerModifiedStyled = ({ $isVariant, $isTotal }:{ $isVariant: boolean, $isTotal: number }) => {
-  if ($isVariant) {
-    return`
-      padding: 12px !important;
-      border-bottom: 1px solid #e3e3e3;
-      & ${FieldWrapper} {
-        grid-template-columns: 90px repeat(${$isTotal ? $isTotal : 4}, 114px);
-        > aside {
-          padding-left: 0;
-        }
-      }
-    `
-  }
-  else {
-    return `
-      padding-bottom: 8px;
-      ${FieldWrapper} {
-        grid-template-columns: repeat(4,150px);
-      }
-    `
-  }
-}
-const getMasterTableViewportModifiedStyled = ({ $mode }:{ $mode?: string }) => {
-  let style = ``
-  if ($mode === 'edit-master' || $mode === 'create-listing' || $mode==='edit-listing') {
-    style += `
-      height: calc(100vh - 120px);
-      @media only screen and (min-width: 768px) {
-        height: calc(100vh - 70px);
-      }
-    `
-    if ($mode === 'create-listing' || $mode === 'edit-listing') {
-      style += `
-        ${MasterTableBodyContent} .cell-colGroup {
-          &, > div {
-            min-height: 122px;
-          }
-          .cell-uneditable {
-            min-width: 449px;
-          }
-        }
-      `
-    } 
-  } else if($mode === 'create-inbound' || $mode === 'create-outbound' || $mode === 'create-adjustment') {
-    style += `
-      height: calc(100vh - 164px - 367px);
-      @media only screen and (min-width: 768px) {
-        height: calc(100vh - 70px - 239px);
-      }
-      @media only screen and (min-width: 1024px) {
-        height: calc(100vh - 70px - 180px);
-      }
-    `
-  } else if($mode === 'create-transfer') {
-    style += `
-      height: calc(100vh - 120px - 426px);
-      @media only screen and (min-width: 768px) {
-        height: calc(100vh - 76px - 249px);
-      }
-      @media only screen and (min-width: 1024px) {
-        height: calc(100vh - 76px - 180px);
-      }
-    `
-  }
-  return style
-}
-const getMasterTableBodyContentModifiedStyled = ({ $mode }:{ $mode?: string}) => {
-  let style = ``
-  if($mode === 'create-transfer' || $mode === 'confirm-inbound' || $mode === 'confirm-outbound' || $mode === 'confirm-adjustment') {
-      style +=`
-      > div {
-        min-height: 66px;
-        &.cell-colGroup {
-          > div { 
-            min-height: 66px; 
-          }
-        }
-        &.cell-rowGroup {
-          .cell-row {
-            &, > div { 
-              min-height: 66px; 
-            }
-          }
-        }
-        .cell {
-          &-label {
-            &:not([data-key="item"]) {
-              > span, .cell-wrapper {
-                padding-top: 6px;
-              }
-            }
-          }
-          &-trash {
-            > article, >div {
-              padding-top: 6px;
-            }
-          }
-          &-checkbox {
-            padding-top: 22px;
-          }
-        }
-      }
-    `
-  } else if($mode === 'create-return') {
-    style +=`
-      > div {
-        .cell {
-          &-label {
-            &:not([data-key="item"]) {
-              > span, .cell-wrapper {
-                padding-top: 6px;
-              }
-            }
-          }
-          &-trash {
-            > article, >div {
-              padding-top: 6px;
-            }
-          }
-          &-checkbox {
-            padding-top: 22px;
-          }
-        }
-      }
-    `
-  } else if($mode === 'create-price') {
-    style +=`
-      > div {
-        min-height: 100px;
-        &.cell-colGroup {
-          > div { 
-            min-height: 100px; 
-          }
-        }
-        &.cell-rowGroup {
-          .cell-row {
-            &, 
-            > div { 
-              min-height: 100px; 
-            }
-          }
-        }
-      }
-      ._refErrorContainer {
-        ${thirdElipsis}
-      }
-    `
-  } else if($mode === 'create-adjustment' || $mode === 'create-outbound') {
-    style +=` 
-      > div {
-        min-height: 90px;
-        &.cell-colGroup {
-          > div { 
-            min-height: 90px; 
-          }
-        }
-        &.cell-rowGroup {
-          .cell-row {
-            &, 
-            > div { 
-              min-height: 90px; 
-            }
-          }
-        }
-      }
-    `
-  }
-  return style
-}
-
-export const MasterTable = styled.section`
-  position: relative;
-`
-export const MasterTableWrapper = styled.article`
-  display: inline-block;
-  width: 100vw;
-  height: 100vh;
-  position: relative;
-`
-export const MasterTableViewport = styled.section<{ $mode?: string }>`
-  display: inline-block;
-  width: 100vw;
-  height: calc(100vh - 220px);
-  position: relative;
-  overflow: auto;
-  transition: all 1s ease;
-  @media only screen and (min-width: 768px) {
-    height: calc(100vh - 140px);
-  }
-  ${getMasterTableViewportModifiedStyled}
-`
-export const MasterTableCanvas = styled.article`
-  display: inline-grid;
-  grid-auto-flow: row;
-  padding-bottom: 1px;
-  min-width: 100vw;
-`
-export const MasterTableHeaderWrapper = styled.section`
-  display: inline-block;
-  width: 100%;
-  position: relative;
-  z-index: 99;
-  line-height: 7px;
-  transition: left 0s linear;
-  visibility: hidden;
-  > section > div {
-    ${divHeaderCell}
-    & >header {
-      position: absolute;
-      top: 50% !important;
-      transform: translateY(-50%);
-      left: 10px;
-      & img, & .initial-wrapper {
-        position: absolute;
-        left: 0;
-        top: -4px;
-      }
-    }
-  }
-  .headerCell-Checkbox > label{
-    position: absolute;
-    top: 50%; 
-    left: 20px;
-  }
-  .headerCell-img {
-    & >header {
-      padding-left: 30px;
-    }
-  }
-  &._refMasterTableHeaderClone {
-    position: fixed; 
-    z-index: 100;
-    background-color: var(--pri-clr-bg);
-    visibility: visible;
-    min-width: 100%;
-    overflow-y: hidden;
-  }
-`
-export const MasterTableHeaderContainer = styled.section`
-  display: inline-block;
-  width: 100%;
-  height: 50px;
-  overflow-y: hidden;
-  background-color: var(--ter-clr-bg);
-  line-height: 50px;
-  i[name='question'] {
-    display: inline-block;
-    margin-left: 2px;
-    position: relative;
-    top: 2px;
-  }
-`
-export const MasterTableBodyWrapper = styled.section`
-  display: inline-grid;
-  grid-auto-flow: row;
-  height: 100%;
-  align-content: start;
-`
-export const MasterTableBodyContent = styled.article<{ $mode?: string }>`
-  position: relative;
-  border-bottom: 1px solid var(--tab-clr-ln);
-  ${commonCSSLists}
-  ${trancateCSS}
-  &.is-highlighted, &.is-fullfilled {
-    background-color: rgba(232, 255, 237, .7);
-    .cell-rowGroup {
-      .cell-row {
-        .cell {
-          &, &-disabled { 
-            background-color: transparent; 
-          }
-        }
-      }
-    }
-    .cell-colGroup {
-      .cell {
-        &, &-uneditable { 
-          background-color: transparent; 
-        }
-        &-disabled {
-          background-color: rgb(250, 250, 250);
-          &, .cell-wrapper { 
-            cursor: default; 
-          }
-        }
-        &-label[data-key='promotionPrice'] {
-          background-color: transparent; 
-        }
-      }
-    }
-  }
-  > div {
-    ${divCell}
-  }
-  .custom-error {
-    ${errrorLists}
-  }
-  .cell {
-    > div:not(.truncate-overflow) {
-      ${elipsis}
-      height: 100%;
-      &.master-editor { 
-        overflow: unset; 
-      }
-    }
-    &.cell-trash { 
-      > div {
-        width: 100%;
-        display: inline-grid;
-        justify-content: center;
-      }
-    }
-    &:not(.cell-checkbox) {
-      > article, > section {
-        overflow-y: hidden;
-      }
-    }
-    > article, > section {
-      height: 100%;
-      position: relative;
-    }
-    > section {
-      &.master-editor { 
-        overflow: unset; 
-      }
-      > div {
-        overflow-wrap: break-word;
-        &:empty {
-          position: absolute;
-          top: 0;
-          left: 0;
-          height: 100%;
-          width: 100%;
-        }
-      }
-    }
-    &-tag {
-      span {
-        background-color: hsl(0,0%,90%);
-        border-radius: 2px;
-        display: flex;
-        margin: 2px;
-        min-width: 0;
-        padding: 3px 4px;
-        padding-left: 6px;
-        float: left;
-        font-size: 12px;
-      }
-    }
-    &-select { 
-      text-transform: capitalize; 
-    }
-    &-editing {
-      input, textarea, .table-image-figure {
-        border: 1px solid var(--pri-clr-ln__fc) !important;
-      }
-      ._refContainer  > div > div {
-        border-color: var(--pri-clr-ln__fc);
-        border-width: 1px;
-        input { border: none  !important; }
-      }
-    }
-    &-error {
-      &:not(.cell-custom_select):not(.cell-custom_input) {
-        ${errrorLists}
-      }
-    }
-    &-uneditable { 
-      background-color: rgb(250, 250, 250); 
-    }
-    &-label { 
-      cursor: default !important; 
-    }
-    &-switch { 
-      text-align: center; 
-    }
-    .cell-wrapper {
-      .is-less {
-        display: none !important;
-        width: 0 !important;
-        height: 0 !important;
-      }
-      ._refCustomContainer {
-        min-height: 32px;
-        ._refLoadingfield {
-          min-height: 32px;
-          display: inline-block;
-          width: 100%;
-        }
-      }
-    }
-    &:not(.cell-custom_select):not(.cell-custom_input):not(.cell-label):not(.cell-checkbox)  {
-      .cell-wrapper {
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        padding: 16px 10px 10px;
-      }
-    }
-  }
-  .cell-colGroup {
-    padding: 0;
-    border-right: 0;
-    line-height: 0;
-    > div {
-      ${divCell}
-      &:first-child {
-        > div {
-          display: grid;
-          justify-content: center;
-        }
-      }
-    }
-  }
-  .cell-rowGroup {
-    ${divCellReset}
-    position: absolute; 
-    top: 0;
-    display: inline-grid;
-    grid-auto-flow: row;
-    .cell-row {
-      position: relative;
-      border-bottom: 1px solid var(--tab-clr-ln);
-      min-height: 82px;
-      &:last-child { 
-        border-bottom: 0; 
-      }
-      > div {
-        ${divCell}
-      }
-      .cell-disabled {
-        background-color: rgb(250, 250, 250);
-        border-bottom: 1px solid var(--tab-clr-ln);
-        &, .cell-wrapper { 
-          cursor: default; 
-        }
-      }
-    }
-  }
-  .cell-checkbox {
-    &:not(.isChecked):hover , &.isChecked {
-      article > div {
-        &:first-child { 
-          display: none; 
-        }
-        &:last-child { 
-          display: block !important; 
-        }
-      }
-    }
-    > article {
-      overflow-y: unset;
-    }
-    article > div {
-      text-align: center;
-      &:first-child {
-        display: grid;
-        z-index: 10;
-        position: relative;
-      }
-      &:last-child {
-        display: none !important;
-        position: absolute;
-        top: 0;
-        left: 50%;
-        margin-left: -7px;
-        z-index: 1;
-        span { 
-          top: 0; 
-        }
-      }
-    }
-  }
-  .cell-custom_select, .cell-custom_input {
-    textarea {
-      resize: none;
-      min-height: 200px;
-      max-height: 200px;
-    }
-    div[class*="-placeholder"] { 
-      font-size: 13px; 
-    }
-  }
-  textarea {
-    resize: auto;
-    min-height: 50px;
-  }
-  input, textarea { 
-    padding: 8px; 
-  }
-  .popup-editor {
-    position: fixed;
-    z-index: 99;
-    & , &-overlay {
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-    }
-    &-overlay {
-      position: absolute;
-      z-index: 1;
-      background-color: var(--ov-clr-bg);
-    }
-    &-content {
-      background: #fff;
-      top: 50%;
-      left: 50%;
-      position: relative;
-      transform: translate(-50%, -50%);
-      z-index: 1;
-      &.ck-editor-wrapper {
-        width: 500px;
-        height: 400px;
-      }
-    }
-    &-header {
-      background-color: var(--pri-clr-bg);
-      border-bottom: 1px solid var(--sec-clr-ln);
-      h3 {
-        padding: 11px 30px;
-        color: var(---hd-clr);
-      }
-      button[mode="round-close"] {
-        position: absolute;
-        top: 16px;
-        right: 20px;
-      }
-    }
-  }
-  ${getMasterTableBodyContentModifiedStyled}
-`
-export const TablePopupWrapper = styled.section<{ $mode?: string }>`
-  overflow: hidden;
-  ${commonCSSLists}
-  .ck-editor__editable {
-    min-height: 200px;
-    max-height: 200px;
-  }
-  .image-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: inline-grid;
-    width: 100%;
-    grid-auto-flow: column;
-    grid-gap: 12px;
-    justify-content: left;
-    grid-template-columns: repeat(3,70px);
-    grid-template-rows: repeat(3,auto);
-    li {
-      position: relative;
-      .remove {
-        font-style: normal;
-        position: absolute;
-        top: -6px;
-        right: -6px;
-        background: #000;
-        color: var(--sec-clr);
-        border-radius: 50%;
-        width: 14px;
-        height: 14px;
-        padding: 3px 5px;
-        font-weight: 600;
-        font-size: 7px;
-        z-index: 1;
-        cursor: pointer;
-      }
-      aside {
-        font-size: 11px;
-        line-height: 15px;
-        padding-top: 6px;
-        text-align: center;
-        max-height: 36px;
-        overflow: hidden;
-      }
-      > input { 
-        display: none;  
-      }
-    }
-  }
-  @media only screen and (min-width: 768px) {
-    .image-list {
-      grid-template-rows: none;
-      grid-template-columns: repeat(auto-fill, 70px);
-    }
-  }
-  ${getTablePopupWrapperModifiedStyled}
-`
-export const BulkEditContainer = styled.section<{ $mode?: string }>`
-  display: grid;
-  grid-auto-flow: row;
-  grid-gap: 10px;
-  align-content: start;
-  margin-bottom: 1em;
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'switch') {
-      return css` 
-        grid-auto-flow: column;
-      `
-    }
-  }}
-`
-export const LabelContainer = styled.article`
-  display: inline-grid;
-  width: 100%;
-  grid-auto-flow: column;
-  grid-template-columns: max-content auto;
-  grid-gap: 10px;
-  align-items: center;
-`
-export const ProductByLabelContainer = styled.div`
-  display: inline-grid;
-  width: 100%;
-  grid-auto-flow: row;
-  grid-gap: 6px;
-  > section {
-    display: grid;
-    &:first-child {
-      grid-auto-flow: column;
-      grid-template-columns: 56px auto;
-      grid-gap: 10px;
-    }
-    &:last-child {
-      grid-auto-flow: row;
-      grid-gap: 2px;
-      font-size: 13px;
-    }
-    .counter-product-label {
-      display: inline-block;
-      width: auto;
-      margin-top: 4px;
-      background: #EBEBEB;
-      border-radius: var(--sec-rd);
-      padding: 2px 10px;
-      color: var(--mt-clr);
-      font-size: 12px;
-      line-height: 13px;
-    }
-  }
-`
-export const ProductByLabelName = styled.div`
-  height: auto;
-  max-height: 34px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  @supports (-webkit-line-clamp: 2) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: initial;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-`
-export const ActionByLabelContainer = styled.article<{ $mode?: string }>`
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'add') {
-      return css` 
-        div {
-          position: relative;
-          cursor: pointer;
-          text-align: center;
-        }
-      `
-    }
-  }}
-`
-export const CategoryByLabelContainer = styled.article<{ $mode?: string }>`
-  display: inline-grid;
-  position: relative;
-  width: 100%;
-  &, .ck.ck-editor, .rc-cascader, &._refCategoryContainer > div {
-    &:not([mode="image"]) {
-      width: 429px !important;
-    }
-  }
-  .ck-editor__editable {
-    min-height: 200px;
-    max-height: 200px;
-  }
-  input + i {
-    position: absolute;
-    right: 9px;
-    top: 29px;
-    z-index: 1;
-    ::before {
-      fill: #c7c7cc;
-      color:  #c7c7cc;
-      opacity: .5;
-    }
-  }
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'image') {
-      return css` 
-        width: 100% !important; 
-      `
-    }
-  }}
-`
-export const CustomWrapper = styled.div<{ $isExpand?: boolean, $isEditable?: boolean }>`
-  display: inline-grid;
-  width: auto;
-  grid-auto-flow: row;
-  grid-gap: 10px;
-  input, textarea { box-shadow: none; }
-  ${getCustomWrapperModifiedStyled}
-`
-export const CustomBox = styled.div`
-  width: 429px;
-  display: block;
-`
-export const CustomWrapperTitle = styled.aside`
-  margin-bottom: 6px;
-  padding: 0 6px;
-  position: relative;
-  ${formLabel}
-  &::first-letter { 
-    text-transform: uppercase; 
-  }
-`
-export const CustomWrapperTitleSub = styled.i`
-  font-weight: 400;
-  font-style: normal;
-`
-export const CustomRadioWrapper  = styled.div`
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: max-content;
-  grid-gap: 15px;
-`
-export const FieldContainer = styled.section<{ $isVariant: boolean, $isTotal: number }>`
-  display: inline-grid;
-  width: 100%;
-  grid-auto-flow: row;
-  grid-gap:8px;
-  font-size: 13px;
-  ${getFieldContainerModifiedStyled}
-`
-export const FieldWrapper = styled.div`
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: 110px auto;
-  grid-gap:10px;
-  align-items: baseline;
-  justify-content: start;
-`  
-export const IsMassContainer = styled.div`
-  grid-gap: 12px !important;
-  > a {
-    position: relative;
-    font-weight: 400;
-    font-size: 13px;
-    &:after {
-      content: '|';
-      right: -8px;
-      position: absolute;
-    }
-    &:last-child {
-      &:after {
-        display: none; 
-      }
-    }
-  }
-`
-export const StoreContainer = styled.div`
-  display: inline-grid;
-  width: 100%;
-  grid-auto-flow: row;
-  grid-gap: 6px;
-  > section {
-    display: grid;
-    &:first-child {
-      grid-auto-flow: column;
-      grid-template-columns: 30px auto;
-      grid-gap: 10px;
-    }
-    &:last-child {
-      grid-auto-flow: row;
-      grid-gap: 10px;
-      font-size: 13px;
-    }
-  }
-`
-export const AdjustedLabel = styled.span`
-  display: inline-block;
-  font-weight: 600;
-  margin-top: 5px;
-  width: 100%;
-`
-export const InfoLabel = styled.span`
-  display: flex;
-  margin-top: 5px;
-  font-size: 12px;
-  text-wrap: wrap;
-  word-wrap: break-word;
-`