forstok-ui-lib 5.6.11 → 5.7.1

package/src/assets/stylesheets/shares.styles.ts

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { responseWidth, formLabel} from './bases.styles';
+import { responseWidth, formLabel, elipsis, multiElipsis, headTable, boxBase, clearList, dropBase} from './bases.styles';
 
 const initialStyles = css `
   width: 32px;
@@ -8,6 +8,10 @@ const initialStyles = css `
   display: grid;
   background-color: #000;
 `
+const fullGrid = css`
+  display: inline-grid;
+  width: 100%;
+`
 
 const getTabsContentModFunc = ({ $mode }:{ $mode?: string }) => {
   let style = ``
@@ -108,388 +112,3155 @@ const getBulkActionWrapperModifiedStyled = ({ $isOpen }:{ $isOpen?: boolean }) =
   }
   return style
 }
-
-export const PanelContainer = styled.section`
-  position: relative;
-  height: 100%;
-  padding-top: 20px;
-  > section:not(:first-child) {
-    margin-top: 1em;
-  }
-  @media only screen and (min-width: 1024px) {
-    padding: 20px 1em 0;
-    height: calc(100vh - 50px);
-  }
-  @media only screen and (min-width: 1366px) {
-    padding: 20px 2em 0;
-    height: 100%;
-  }
-`
-export const ListContainer = styled.section`
-  position: relative;
-  &:first-child {
-    margin-top: -4px;
-  }
-`
-export const PanelWrapper = styled.section<{ $mode?: string }>` 
-  ${responseWidth}
-  position: relative;
-  min-height: 1px;
-  margin: 0 auto;
-  padding-top: 16px;
-  padding-bottom: 10px;
-  @media only screen and (min-width: 768px) {
-    padding: 8px 30px 16px;
-  }
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'full') {
-      return css` 
-        width: 100%; 
-      `
-    }
-  }}
-`
-export const Title = styled.h1`
-  font-family: PT Sans;
-  font-size: 22px;
-  color: var(--ter-clr);
-  > aside {
-    color: var(--mt-clr);
-    font-size: 16px;
-    font-weight: 400;
-    margin-top: 5px;
-    letter-spacing: normal;
-  }
-  @media only screen and (min-width: 768px) {
-    font-size: 30px;
-    .tablet-fw {
-      display: inline !important;
-    }
-  }
-`
-export const HeaderContainer = styled.aside` 
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: 8px;
-  grid-template-columns: max-content max-content;
-  align-items: center;
-  @media only screen and (min-width: 400px) {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-  }
-  @media only screen and (min-width: 768px) {
-    top: 10px;
-  }
-  @media only screen and (min-width: 1366px) {
-    right: 20px;
-  }
-`
-export const TabsContainer = styled.section<{ $mode?: string }>`
-  width: 100%;
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'master-listing') {
-      return css` 
-        padding: 0 16px;
-      `
-    } else if ($mode === 'detail-master') {
-      return css` 
-        padding: 20px 10px 0 10px;
-      `
-    } else if ($mode === 'no-header') {
-      return css` 
-        padding-top: 0; 
-        @media only screen and (min-width: 1366px) {
-          padding-top: 12px; 
+const getTableHeaderModFunc = ({ $mode }:{ $mode?: string }) => {
+  let style = `
+    & ${TableHeadLabel} {
+      &:empty, 
+      &:last-child {
+        cursor: default;
+        &:after { 
+          display: none; 
         }
-      `
-    }
-  }}
-`
-export const TabsContent = styled.div<{ $mode?: string }>`
-  padding-top: 16px;
-  &._refNoTab {
-    padding-top: 9px;
-    @media only screen and (min-width: 768px) {
-      padding-top: 11px;
-    }
-  }
-  @media only screen and (min-width: 768px) {
-    padding-top: 24px;
-  }
-  ${getTabsContentModFunc}
-`
-export const FoContainer = styled.section<{ $mode?: string }>` 
-  position: relative;
-  > section, 
-  > article {
-    width: 100%;
-    > aside, 
-    > article {
-      ${responseWidth}
-      margin: 0 auto;
+      }
     }
-  }
-  > article {
-    height: calc(100vh - 50px);
-  }
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'detail') {
-      return css` 
-        margin-top: -4px;
-        @media only screen and (min-width: 768px) {
-          > section, 
-          > article {
-            > aside {
-              padding-left: 16px;
-              padding-right: 16px;
+  `
+  if ($mode === 'order-detail') {
+    style +=`
+      padding-top: 16px;
+      padding-bottom: 10px;
+      display: inline-grid;
+      width: 100%;
+      grid-gap: 8px;
+      @media only screen and (max-width: 767.9px) {
+        > div {
+          &:first-child {
+            position: absolute;
+            top: 16px;
+            letter-spacing: 0;
+          }
+          &:nth-child(2) { 
+            margin-left: 50px; 
+          }
+        }
+      }
+      @media only screen and (min-width: 768px) {
+        grid-template-columns: 40px 1fr max-content;
+        background-color: transparent;
+        border-bottom: 0;
+        &:hover {
+          background-color: transparent;
+        }
+        ${TableRowGroup}, 
+        ${TableRightGroup} { 
+          display: grid; 
+        }
+        > div {
+          &:nth-child(1) { 
+            display: grid; 
+          }
+          &:nth-child(2) {
+            > div:nth-child(2) {
+              > span:nth-child(1) { 
+                display: none; 
+              }
+            }
+          }
+          &:nth-child(3) {
+            > div:nth-child(1) { 
+              display: none; 
             }
           }
         }
-        @media only screen and (min-width: 1024px) {
-          > section, 
-          > article {
-            > aside {
-              padding-left: 0;
-              padding-right: 0;
+      }
+      @media only screen and (min-width: 1024px) {
+        > div {
+          &:nth-child(2) {
+            > div:nth-child(2) {
+              > span:nth-child(1) { 
+                display: block; 
+              }
+            }
+          }
+          &:nth-child(3) {
+            > div:nth-child(1) { 
+              display: grid; 
             }
           }
         }
-      `
-    }
-  }}
-`
-export const BreadcrumbContainer = styled.aside` 
-  position: relative;
-  padding: 18px 16px;
-  text-align: center;
-  > a {
-    &:first-child {
-      display: none;
-    }
-    &:nth-child(2) {
-      display: inline;
-      position: absolute;
-      top: 20px;
-      left: .625em;
-    }
-    > i {
-      float: left;
-      margin-right: 6px;
-    }
-  }
-  span { 
-    display: none; 
-  }
-  @media only screen and (min-width: 375px) {
-    > a {
-      &:nth-child(2) {
-        left: 16px;
       }
-    }
-  }
-  @media only screen and (min-width: 768px) {
-    padding: 8px 30px 20px;
-    text-align: left;
-    b {
-      font-size: .875rem;
-      line-height: 1;
-    }
-    span { 
-      display: inline; 
-    }
-    a {
-      &:first-child {
-        display: inline;
+    `
+  } else if ($mode === 'picklist-detail') {
+    style +=`
+      padding-top: 16px;
+      padding-bottom: 10px;
+      grid-template-columns: 1fr max-content;
+      background-color: transparent;
+      &:hover { 
+        background-color: transparent; 
       }
-      &:nth-child(2) {
-        display: none;
+      ${TableRightGroup} {
+        justify-content: start;
+        padding-top: 12px;
       }
-    }
-  }
-`
-export const InfoGroup = styled.div`
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-template-columns: minmax(140px, 150px) minmax(140px, 1fr);
-  grid-gap: 5px;
-  width: 100%;
-  justify-content: left;
-  margin-bottom: 14px;
-  > span:first-child {
-    position: relative;
-    &:after {
-      position: absolute;
-      right: 5px;
-      content: ":";
-    }
-  }
-  div {
-    overflow-wrap: break-word;
-    word-break: break-word;
-  }
-`
-export const MuteLabel = styled.span<{ $size?: string }>`
-  color: var(--mt-clr);
-  font-size: 12px;
-  word-break: break-all;
-  &._refWithIcon {
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: start;
-    grid-gap: 4px;
-    * { 
-      margin-right: 0; 
-    }
-  }
-  ${({ $size }:{ $size?: string }) => {
-    if ($size === 'medium') 
-      return css` 
-        font-size: 13px;
-        line-height: 12px;
-        * { 
-          margin-right: 4px; 
+      @media only screen and (min-width: 768px) {
+        border-bottom: 0;
+        ${TableRightGroup} {
+          justify-content: end;
+          padding-top: 0;
+        }
+      }
+    `
+  } else if ($mode === 'product-detail') {
+    style +=`
+      grid-gap: 10px;
+      padding-top: 16px;
+      padding-bottom: 10px;
+      & ${TableRightGroup} {
+        justify-content: start;
+      }
+      @media only screen and (min-width: 768px) {
+        grid-template-rows:none;
+        grid-template-columns: 1fr max-content;
+        min-height: 73px;
+        border-bottom: 0;
+      }
+    `
+  } else if ($mode === 'chat') {
+    style +=` 
+      padding: 0;
+      align-items: center;
+      grid-template-columns: 30px 1fr max-content;
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+      grid-gap: 8px;
+      margin-left: 16px;
+      ${TableRowGroup} {  
+        ${TableColumnGroup} {
+          span {
+            ${elipsis}
+          }
+        }
+      }
+      @media only screen and (min-width: 768px) {
+        border-bottom: 0;
+        grid-gap: 8px;
+      }
+      @media only screen and (min-width: 1280px) {
+        grid-template-columns: 30px 1fr max-content;
+        padding: 0 16px 0 16px;
+        top: 0;
+        transform: none;
+        margin-left: 0;
+        ${TableRowGroup}, 
+        ${TableRightGroup} {
+          display: grid;
+        }
+        ${TableRowGroup} {
+          ${TableColumnGroup} {
+            grid-template-columns: auto;
+            &:first-child {
+              margin-bottom: 3px;
+            }
+          }
+        }
+        > div {
+          position: relative;
+          padding: 0;
+          &:nth-child(2) {
+            display: block;
+          }
+          :nth-child(4) {
+            padding-top: 21px;
+          }
+        }
+      }
+    `
+  } else if ($mode === 'category') {
+    style +=`
+      & ${TableHeadLabel} {
+        &:last-child {
+          cursor: pointer;
+          &:after { 
+            display: inline-block; 
+          }
+        }
+      }
+    `
+  }
+  return style
+}
+const getTabsRowModFunc = ({ $content, $mode }:{ $content?: string, $mode?: string }) => {
+  let style = ``
+  if ($content === 'right') {
+    style +=`
+      grid-gap: 4px;
+      justify-content: right;
+      justify-items: right;
+      align-self: start;
+      span {
+        &:last-child {
+          text-align: right;
+        }
+      }
+    `
+  } else if ($content === 'right-amount') {
+    style += `
+      grid-gap: 10px;
+      justify-content: right;
+      justify-items: right;
+      align-self: center;
+    `
+  }
+  if ($mode === 'items') {
+    style +=`
+      padding-right: 2px;
+      grid-gap: 2px;
+      align-content: start;
+      display: grid !important;
+      margin-left: -6px;
+      > strong { 
+        ${multiElipsis} 
+      }
+    `
+  } else if ($mode === 'list-items') {
+    style +=`
+      position: relative;
+      grid-gap: 10px;
+    `
+  } else if ($mode === 'master-detail-img') {
+    style +=`
+      justify-items: center;
+      span {
+        text-align: center;
+        width: 50px;
+        overflow-wrap: break-word;
+      }
+    `
+  } else if ($mode === 'item-sale-price') {
+    style +=`
+      grid-gap: 2px;
+    `
+  }
+  return style
+}
+const getTabsColumnModFunc = ({ $mode, $content }:{ $mode?: string, $content?: string }) => {
+  let style = ``
+  if ($mode === 'items-detail') {
+    style +=`
+      grid-gap: 16px;
+      align-items: start;
+      grid-template-columns: 30px 1fr;
+      ${TableRowGroup} { 
+        display: block; 
+      }
+      @media only screen and (min-width: 768px) {
+        ${TableRowGroup} { 
+          display: grid; 
+        }
+      }
+    `
+  } else if ($mode === 'store') {
+    style +=`
+      align-items: center;
+      grid-gap: 4px;
+      > div > span {
+        font-size: 10px;
+      }
+      > div:first-child {
+        align-self: start;
+      }
+      > *:nth-child(2) {
+        ${elipsis}
+      }
+    `
+    } else if ($mode === 'store-static') {
+    style +=`
+      align-items: center;
+      grid-gap: 6px;
+      position: relative;
+      padding-left: 24px;
+      > div > span {
+        font-size: 10px;
+      }
+      > div:first-child {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        margin-top: -10px;
+      }
+      > *:nth-child(2) {
+        ${multiElipsis}
+      }
+    `
+  } else if ($mode === 'amount') {
+    style +=`
+      width: 100%;
+      grid-gap: 20px;
+      grid-template-columns: 180px 1fr;
+      justify-content: right;
+      justify-items: right;
+      font-size: 15px;
+      ${ItemPriceLabel} {
+        text-align: right;
+        display: block;
+        width: 100%;
+      }
+    `
+  }  else if ($mode === 'account-amount') {
+    style +=`
+      width: 100%;
+      grid-gap: 20px;
+      grid-template-columns: 360px 1fr;
+      justify-content: right;
+      justify-items: right;
+      font-size: 15px;
+      ${ItemPriceLabel} {
+        text-align: right;
+        display: block;
+        width: 100%;
+      }
+    `
+  } else if ($mode === 'product') {
+    style +=`
+      display: grid;
+      grid-auto-flow: column;
+      justify-content: left;
+      grid-gap: ${ $content === 'store' ? '6px' : '8px'};
+      grid-template-columns: ${ $content === 'store' ? '28px 1fr' : ($content === 'checkbox') ? '16px 34px 1fr' : '34px 1fr'};
+      align-items: start;
+      > div:first-child {
+        height: ${ $content === 'store' ? '28px' : '34px'};
+      }
+      > aside {
+        align-items: center;
+        display: grid;
+        line-height: 15px;
+      }
+      ${TableLabel} {
+        display: inline-grid;
+        grid-auto-flow: row;
+        grid-gap: 2px;
+        align-self: center;
+        > div:first-child { 
+          ${multiElipsis} 
+          line-height: ${ $content === 'store' ? '14px' : '17px'};
+        }
+        > span {
+          ${elipsis}
+        }
+        ${TableColumnGroup} {
+          > div:first-child {
+            line-height: 8px;
+          }
+        }
+      }
+    `
+  } else if ($mode === 'contra') {
+    style +=`
+      grid-auto-flow: row;
+      align-items: start;
+      @media only screen and (min-width: 1024px) {
+        grid-auto-flow: column;
+      }
+    `
+  }  
+  if ($content === 'right') {
+    style +=`
+      grid-gap: 10px;
+      justify-content: end;
+      align-items: center;
+      > div {
+        min-width: 170px;
+        width: 170px;
+      }
+    `
+  }
+  return style
+}
+const getNameModFunc = ({ $mode }:{ $mode?: string }) => {
+  let style = ``
+  if ($mode === 'dropship') {
+    style +=`
+      display: inline-grid;
+      grid-auto-flow: column;
+      grid-template-columns: auto max-content;
+      grid-gap: 8px;
+      align-items: center;
+    `
+  } else if ($mode === 'header') {
+    style +=`
+      font-size: 22px;
+      ${multiElipsis}
+      line-height: 1;
+    `
+  }
+  return style
+}
+const getTabsWrapperModFunc =({ $mode }:{ $mode?: string }) => {
+  let style = ``
+  if ($mode === 'detail') {
+    style += `
+      width: 100%;
+      > article {
+        min-width: auto;
+        width: 100%;
+      }
+    `
+  } else if ($mode === 'master-listing') {
+    style += `
+      width: 100%;
+      ${TabsList} {
+        width: 100%;
+        justify-content: start;
+        padding: 0;
+        border-bottom: 1px solid #DEE0E0;
+      }
+      ${TabsItem} {
+        font-size: 14px;
+      }
+    `
+  } else if ($mode === 'chat-account' || $mode === 'chat-complement') {
+    style += `
+      ${TabsHeader} {
+        width: 100vw;
+        margin: 0;
+      }
+      ${TabsList} {
+        border-bottom: 1px solid #DEE0E0;
+      }
+      ${TabsItem} {
+        padding-left: 10px; 
+        padding-right: 10px;
+      }
+      @media only screen and (min-width: 1024px) {
+        ${TabsHeader} {
+          width: 100%;
+          min-width: unset;
+          max-width: unset;
+        }
+      }
+      @media only screen and (min-width: 1280px) {
+        ${TabsList} {
+          padding-left: 1em;
+          padding-right: 1em;
+        }
+        ${TabsItem} {
+          font-size: 15px;
+          padding-left: 6px;
+          padding-right: 6px;
+        }
+      }
+      @media only screen and (min-width: 1366px) {
+        ${TabsItem} {
+          padding-left: 8px; 
+          padding-right: 8px;
+        }
+      }
+      @media only screen and (min-width: 1920px) {
+        ${TabsItem} {
+          padding-left: 10px; 
+          padding-right: 10px;
+        }
+      }
+    `
+  } else if ($mode === 'chat-complement') {
+    style += `
+      ${TabsItem} {
+        padding: 16px 10px 11px 10px; 
+      }
+    `
+  }
+  return style
+}
+const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: string, $isBorder?: boolean, $isPopup?: boolean }) => {
+  let style = `
+    ${TableItemColumn} {
+      width: 960px;
+      border-bottom: 1px solid var(--pri-clr-ln);
+      &:first-child {
+        border-bottom: 1px solid var(--sec-clr-ln);
+        display: grid;
+        > * { 
+          padding: 0 10px 12px; 
+        }
+      }
+      &:last-child { 
+        border-bottom: none; 
+      }
+      > * {
+        padding: 15px 10px;
+      }
+      &[role='rowheader'] {
+        ${headTable}
+        color: var(--mt-clr);
+      }
+    }
+    @media only screen and (min-width: 1024px) {
+      overflow-x: unset;
+      ${TableItemColumn} { 
+        width: unset 
+      }
+    }
+  `
+  if ($mode === 'order') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: auto var(--warehouse) var(--status-big) var(--qty-pd20-big) repeat(2, var(--price-pd20)); 
+        > div {
+          &:last-child, 
+          &:nth-last-child(2), 
+          &:nth-last-child(3) { 
+            text-align: right; 
+          }
+        }
+      }
+    `
+  } else if ($mode === 'picklist') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: auto var(--ref-pd20) var(--ref) var(--status) var(--status) repeat(3, var(--qty-small));
+        @media only screen and (min-width: 1366px) {
+          grid-template-columns: auto var(--ref-pd20) minmax(85px, 120px) minmax(105px, 155px) minmax(105px, 133px) repeat(3, var(--qty-small));
+        }
+        @media only screen and (min-width: 1512px) {
+          grid-template-columns: auto var(--ref-pd20) minmax(85px, 120px) minmax(105px, 155px) minmax(105px, 133px) repeat(3, minmax(88px, 103px));
+        }
+        @media only screen and (min-width: 1800px) {
+          grid-template-columns: auto var(--store) var(--ref-pd20) minmax(105px, 155px) minmax(105px, 155px) repeat(3, minmax(88px, 103px));
+        }
+        >div {
+          &:nth-child(n+6) { text-align: right; }
+        }
+      }
+    `
+  } else if ($mode === 'package') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: auto repeat(2, var(--qty-pd20-big));
+        > div:not(:first-child) { 
+          text-align: right; 
+        }
+      }
+    `
+  } else if ($mode === 'shipment') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: auto var(--ref-big) repeat(2, var(--qty-pd20-big)); 
+        > div:not(:first-child) { 
+          text-align: right; 
+        }
+      }
+    `
+  } else if ($mode === 'payment-receive') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: var(--id-big) var(--ref-pd20) var(--store) var(--ref-pd20) var(--time-pd20) 1fr;
+        > div {
+          &:last-child { 
+            text-align: right; 
+          }
+        }
+      }
+    `
+  } else if ($mode === 'item') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: var(--variant-pd20) var(--sku-pd20) var(--qty-pd20-big) repeat(2, var(--price-pd20)) var(--sku-pd20);
+      }
+    `
+  } else if ($mode === 'bundle') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: 1fr 145px 130px 130px 100px 130px 60px;
+        &:last-child { 
+          border-bottom: 1px solid var(--pri-clr-ln); 
+        }
+        > section {
+          display: grid;
+          align-items: center;
+          align-content: start;
+          &.list-price {
+            > div { 
+              padding-top: 8px; 
+            }
+          }
+          &:last-child {
+            padding-top: 20px;
+          }
+        }
+        > section, 
+        > div {
+          text-align: right;
+          &:first-child {
+            text-align: left; 
+          }
+        }
+        @media only screen and (min-width: 1280px) {
+          grid-template-columns: 1fr 145px 160px 150px 112px 130px 60px;
+        }
+      }
+    `
+  } else if ($mode === 'item-listing') {
+    style += `
+      &:not(:first-child) {
+        margin-top: 30px;
+      }
+      ${TableItemColumn} {
+        width: ${$isPopup ? '834px' : '940px' };
+        grid-template-columns: ${$isPopup ? 'auto var(--variant-small) var(var(--qty-small)) var(--price) var(--status-small) 90px' : 'auto var(--variant) var(--qty-big) var(--price) var(--status-small) minmax(90px, 100px)'};
+        &:last-child { 
+          ${$isPopup ? 'border-bottom: 0 !important' : ''} 
+        }
+        > *:nth-child(6) { 
+          text-align: right; 
+        }
+      }
+      @media only screen and (min-width: 1024px) {
+        ${TableItemColumn} { 
+          width: unset;
+        }
+      }
+    `
+  } else if ($mode === 'item-bundle') {
+    style += `
+      &:not(:first-child) {
+        margin-top: 30px;
+      }
+      ${TableItemColumn} {
+        width: ${$isPopup ? '834px' : '940px' };
+        grid-template-columns: ${$isPopup ? 'auto var(--variant-small) var(--qty-small) var(--qty-big)' : 'auto var(--variant) var(--qty-pd20-big) var(--qty-pd20-big)'};
+        &:last-child { 
+          ${$isPopup ? 'border-bottom: 0 !important' : ''} 
+        }
+      }
+      @media only screen and (min-width: 768px) {
+        ${TableItemColumn} { 
+          width: unset; 
+        }
+      }
+    `
+  } else if ($mode === 'invoice') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: auto var(--status) var(--qty-pd20-big) repeat(3, var(--price-pd20));
+        > *:not(:first-child) { 
+          text-align: right; 
+        }
+      }
+    `
+  } else if ($mode === 'stock') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: auto var(--variant-pd20) var(--sku-pd20) var(--qty-pd20-big) var(--qty-pd20-big); 
+        > div:not(:first-child) { 
+          text-align: right; 
+        }
+      }
+    `
+  } else if ($mode === 'inbound') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: var(--time-pd20) auto var(--variant-pd20) var(--sku-pd20) var(--status-big) minmax(110px, 150px) minmax(110px, 150px); 
+      }
+    `
+  } else if ($mode === 'priceadjustment') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: var(--sku) auto var(--store) var(--price-pd20) var(--price-pd20) var(--price) var(--price) var(--time) var(--time); 
+      }
+    `
+  } else if ($mode === 'add-item') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: 30px auto 100px 156px 128px;
+        &:first-child {
+          > div { 
+            padding-bottom: 16px; 
+          }
+        }
+        > div:first-child { 
+          padding-left: 16px; 
+          > label {
+            > span {
+              top: 0; 
+              margin-top: 0;
+            }
+          }
+        }
+        ._refCheckboxMark { 
+          top: 0; 
+          margin-top: 0; 
+        }
+      }
+      ${TableItemColumn}, 
+      ._refProductList {
+        width: 700px;
+      }
+    `
+  } else if ($mode === 'add-item-price') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: 30px auto 100px 156px 128px;
+        &:first-child {
+          > div { 
+            padding-bottom: 16px; 
+          }
+        }
+        > div:first-child { 
+          padding-left: 16px; 
+          > label {
+            > span {
+              top: 0; margin-top: 0;
+            }
+          }
+        }
+        ._refCheckboxMark { 
+          top: 0;
+          margin-top: 0; 
+        }
+      }
+      ${TableItemColumn}, ._refProductList {
+        width: 700px;
+      }
+    `
+  } else if ($mode === 'inventory-qty') {
+    style += `
+      overflow: auto;
+      ${TableItemColumn} {
+        display: flex;
+        &:first-child {
+          display: flex;
+        }
+        &:last-child { 
+          border-bottom: 1px solid var(--pri-clr-ln); 
+        }
+        .column-batch-id {
+          min-width: 95px;
+          max-width: 110px;
+          flex: 1;
+        }
+        .column-created-date {
+          min-width: var(--time-pd20-min);
+          max-width: var(--time-pd20-max);
+          flex: 1;
+        }
+        .column-expiry-date {
+          min-width: var(--time-pd20-min);
+          max-width: var(--time-pd20-max);
+          flex: 1;
+        }
+        .column-location {
+          min-width: 85px;
+          max-width: 100px;
+          flex: 1;
+        }
+        .column-serial-numbers {
+          min-width: 120px;
+          max-width: 250px;
+          flex: 1;
+        }
+        .column-qty-on-hand-total {
+          min-width: 115px;
+          max-width: 120px;
+          flex: 1;
+        }
+        .column-qty-on-hand-damage {
+          min-width: var(--qty-pd20-big-min);
+          max-width: var(--qty-pd20-big-max);
+          flex: 1;
+        }
+        .column-qty-on-hand-normal {
+          min-width: var(--qty-pd20-big-min);
+          max-width: var(--qty-pd20-big-max);
+          flex: 1;
+        }
+        .column-qty-reserved {
+          min-width: var(--qty-pd20-big-min);
+          max-width: var(--qty-pd20-big-max);
+          flex: 1;
+        }
+        .column-qty-picked {
+          min-width: var(--qty-pd20-big-min);
+          max-width: var(--qty-pd20-big-max);
+          flex: 1;
+        }
+        .column-qty-packed {
+          min-width: var(--qty-pd20-big-min);
+          max-width: var(--qty-pd20-big-max);
+          flex: 1;
+        }
+        .column-qty-handover {
+          min-width: var(--qty-pd20-big-min);
+          max-width: var(--qty-pd20-big-max);
+          flex: 1;
+        }
+        .column-qty-promotions {
+          min-width: 125px;
+          max-width: 130px;
+          flex: 1;
+        }
+        .column-qty-available-to-sell {
+          min-width: var(--qty-pd20-big-min);
+          max-width: var(--qty-pd20-big-max);
+          flex: 1;
+        }
+        .column-qty-in-transit {
+          min-width: var(--qty-pd20-big-min);
+          max-width: var(--qty-pd20-big-max);
+          flex: 1;
+        }
+        .column-qty-waiting-inbound {
+          min-width: var(--qty-pd20-big-min);
+          max-width: var(--qty-pd20-big-max);
+          flex: 1;
+        }
+        .column-qty-inbounded {
+          min-width: 120px;
+          max-width: 130px;
+          flex: 1;
+        }
+        .column-qty-waiting-outbound {
+          min-width: var(--qty-pd20-big-min);
+          max-width: var(--qty-pd20-big-max);
+          flex: 1;
+        }
+      }
+    `
+  } else if ($mode === 'putaway') {
+    style += `
+      ${TableItemColumn} {
+        &[role=rowheader] {
+          grid-template-columns: var(--item) var(--variant-pd20) var(--sku-pd20) max-content;
+          > div[role=group] {
+            padding: 0;
+            display: grid;
+            grid-template-columns: var(--time) minmax(110px, 200px) var(--id) var(--status) var(--status) var(--status) var(--status-big) var(--qty-big) var(--qty-big);
+            > div {
+              padding: 0 10px 12px;
+            }
+          }
+        }
+        &[role=row] {
+          grid-template-columns: var(--item) var(--variant-pd20) var(--sku-pd20) max-content;
+          > div[role=group] {
+            padding: 0;
+            > div[role=rowgroup] {
+              display: grid;
+              grid-template-columns: var(--time) minmax(110px, 200px) var(--id) var(--status) var(--status) var(--status) var(--status-big) var(--qty-big) var(--qty-big);
+              > div {
+                padding: 15px 10px;
+              }
+            }
+          }
+        }
+      }
+    `
+  } else if ($mode === 'stock-adjustment') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: auto var(--variant-pd20) var(--sku-pd20) var(--qty-pd20-big) minmax(135px, 140px) var(--qty-pd20-big); 
+      }
+    `
+  } else if ($mode === 'confirm') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: auto 120px 120px 100px 120px; 
+      }
+    `
+  } else if ($mode === 'confirm-adjustment') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: auto 120px 120px 90px 90px 90px; 
+      }
+    `
+  } else if ($mode === 'add-item' || $mode === 'add-item-price' || $mode === 'add-location') {
+    const columnStyle = ($mode === 'add-item-price' || $mode === 'add-item') ? '30px auto 100px 156px 128px' : '30px 115px 105px 130px 110px 110px'
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: ${columnStyle};
+        &:first-child {
+          > div { 
+            padding-bottom: 16px; 
+          }
+        }
+        > div:first-child { 
+          padding-left: 16px; 
+          > label {
+            > span {
+              top: 0; margin-top: 0;
+            }
+          }
+        }
+        ._refCheckboxMark { 
+          top: 0; 
+          margin-top: 0; 
+        }
+      }
+      ${TableItemColumn}._refProductList {
+        width: 700px;
+      }
+    `
+  } else if ($mode === 'priceadjustment') {
+    style += `
+      ${TableItemColumn} {
+        grid-template-columns: auto var(--price-pd20) var(--price-pd20); 
+        > div:not(:first-child) { 
+          text-align: right; 
+        }
+      }
+    `
+  } else if ($mode === 'link-master') {
+    style += `
+      &:not(:first-child) {
+        margin-top: 30px;
+      }
+      ${TableItemColumn} {
+        grid-template-columns: 1fr 120px 105px; 
+      }
+    `
+  } else if ($mode === 'promotion') {
+    style += `
+      padding-top: 16px;
+      ${TableItemColumn} {
+        grid-template-columns: auto var(--price) var(--price) minmax(150px, 175px) var(--qty-pd20-big); 
+        > *:not(:first-child) { 
+          text-align: right; 
+        }
+      }
+    `
+  } else if ($mode === 'warehouse') {
+    style += `
+      ${TableItemColumn} {
+        >*:last-child { text-align: right; }
+        grid-template-columns: var(--warehouse) auto var(--time-pd20) minmax(120px, 150px); 
+      }
+    `
+  } else if ($mode === 'item-stock') {
+    style += `
+      ${TableItemColumn} {
+        &[role=rowheader] {
+          grid-template-columns: 310px 270px var(--qty-pd20); 
+        }
+        &[role=row] {
+          grid-template-columns: 310px auto; 
+        }
+        &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+        ._refCollapse > div, 
+        ._refCollapseContainer > div {
+          padding-bottom: 1em;
+          &:nth-child(n+2) {
+            border-top: 1px solid rgb(245, 245, 245);
+            padding-top: 16px;
+          }
+          &:last-child {
+            padding-bottom: 0;
+          }
+        }
+        &[role=rowheader] > div[role=group], 
+        &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: 270px var(--qty-pd20);
+        }
+        
+      }
+    `
+  }
+  if ($isBorder) {
+    style += `
+      ${TableItemColumn} {
+        &:last-child { 
+          border-bottom: 1px solid var(--pri-clr-ln); 
+        }
+      }
+    `
+  }    
+  return style
+}
+const getTableItemModFunc = ({ $mode }:{ $mode?: string }) => {
+  let style = `
+    &._refItemContainer {
+      ${TableColumnGroup} {
+        grid-gap: 10px;
+      }
+    }
+  `
+  if ($mode === 'amount') {
+    style += `
+      grid-auto-flow: column;
+      grid-template-columns: 1fr;
+      > aside { 
+        padding: 20px 10px; 
+      }
+      > aside.list-price {
+        display: grid;
+        grid-gap: 11px;
+      }
+      > aside.list-info { 
+        display: none; 
+      }
+      @media only screen and (min-width: 768px) {
+        > aside.list-info {
+          display: grid;
+          span { 
+            color: var(--hd-clr); 
+          }
+        }
+      }
+    `
+  } else if ($mode === 'detail-amount') {
+    style +=`
+      grid-auto-flow: column;
+      grid-template-columns: 1fr;
+      > aside {
+        padding: 20px 10px;
+      }
+      > aside.list-price {
+        display: grid;
+        grid-gap: 11px;
+      }
+      > aside.list-info {
+        display: none;
+      }
+      @media only screen and (min-width: 768px) {
+        > aside.list-info {
+          display: grid;
+        }
+      }
+    `
+  }
+  return style;
+}
+const getPageWrapperModFunc = ({ $mode }:{ $mode?: string }) => {
+  let style = ``;
+  if ($mode === 'noPageOption') {
+    style += ` 
+      @media only screen and (min-width: 768px) {
+        > div:first-child {
+          justify-content: center;
+        }
+      }
+    `
+  }
+  return style;
+}
+const getPageButtonModFunc = ({ $activated, $disabled }:{ $activated?: boolean, $disabled?: boolean }) => {
+  let style = ``;
+  if ($activated) {
+    style +=`
+      border-color: var(--act-clr-ln);
+      color: var(--sta-clr);
+      font-weight: 600;
+    `
+  } else if ($disabled) {
+    style +=`
+      background: var(--mt-clr-bg);
+      border-color: var(--ck-clr-ln);
+      opacity: .5;
+      cursor: auto;
+    `
+  }
+  return style;
+}
+const getSearchFilterContainerModFunc = ({ $mode }:{ $mode?: string }) => {
+  let style = ``
+  if ($mode === 'detail') {
+    style +=`
+      padding-bottom: 10px;
+    `
+  }
+  return style
+}
+const getSearchWrapperModFunc = ({ width }:{ width?: string }) => {
+  let style = ``
+  if (width) {
+    const _width = width ? parseInt(width) : 0
+    style += ` 
+      grid-template-columns: ${(_width + 5)+'px'} 1fr;
+      button {
+        width: ${width};
+      }
+    `
+  }
+  return style
+}
+const getListTableFunc = ({ $mode }:{ $mode?: string }) => {
+  let style = `` 
+  if ($mode === 'item') { 
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--checkbox) var(--item) minmax(auto, max-content) var(--time) minmax(88px, auto);
+        &[role=rowheader] > div[role=group], 
+        &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: var(--variant) var(--sku) var(--qty-big) var(--price) var(--status-small);
+        }
+        input[name=checkbox-list] {
+          & + span { 
+            top: 8px;
+          }
+        }
+      }
+    `
+  } else if ($mode === 'listing') { 
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--checkbox) var(--item) minmax(auto, max-content) minmax(88px, auto);
+        &[role=rowheader] > div[role=group], 
+        &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: var(--variant) var(--sku) var(--sku) var(--qty-big) var(--price) var(--status-small);
+        }
+        input[name=checkbox-list] {
+          & + span { 
+            top: 8px;
+          }
+        }
+      }
+    `
+  } else if ($mode === 'quantity') { 
+    style += `
+      overflow: hidden;
+      padding: 0 10px;
+      > div {
+        overflow: auto;
+      }
+      ${ItemTable} {
+        width: 100%;
+        display: flex;
+        margin: 0;
+        padding: 0;
+        grid-gap: 0;
+        &[role=rowheader] > div[role=group], 
+        &[role=row] > div[role=group], 
+        &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+        &[role=row] > div[role=cellgroup], 
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          display: flex;
+          flex: 2;
+          grid-gap: 0;
+        }
+        &[role=row] > div[role=cellgroup] {
+          flex-direction: column;
+        }
+        &[role=rowheader] > div[role=columnheader], 
+        &[role=rowheader] > div[role=group] > div[role=cell], 
+        &[role=row] > div[role=cell], 
+        &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell], 
+        ._refCollapse > div:not(._refCollapseContainer) > div[role=cell], 
+        ._refCollapseContainer > div > div[role=cell]  {
+          flex-direction: column;
+          padding: 16px 6px;
+          align-self: stretch;
+          width: 100%;
+        }
+        &[role=rowheader] > div[role=columnheader], 
+        &[role=rowheader] > div[role=group] > div[role=cell] {
+          padding: 27px 6px 18px;
+        }
+        &[role=rowheader] {
+          padding: 0;
+        }
+        &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+        ._refCollapse > div, 
+        ._refCollapseContainer > div {
+          padding-bottom: 0;
+          padding-top: 0;
+          &:nth-child(n+2) {
+            padding-top: 0;
+          }
+          &:last-child {
+            padding-bottom: 0;
+          }
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+        .column-product {
+          min-width: calc(var(--item-min) + 25px);
+          max-width: calc(var(--item-max) + 25px);
+          flex: 1;
+          padding-left: 19px !important;
+        }
+        .column-master-sku {
+          min-width: calc(var(--sku-min) + 12px);
+          max-width: calc(var(--sku-max) + 12px);
+          flex: 1;
+        }
+        .column-warehouse {
+          min-width: calc(var(--warehouse-min) + 12px);
+          max-width: calc(var(--warehouse-max) + 12px);
+          flex: 3;
+        }
+        .column-on-hand-total {
+          min-width: 87px;
+          max-width: 97px;
+          flex: 2;
+        }
+        .column-on-hand-damage {
+          min-width: 97px;
+          max-width: 102px;
+          flex: 2;
+        }
+        .column-on-hand-normal {
+          min-width: 97px;
+          max-width: 102px;
+          flex: 2;
+        }
+        .column-reserved-orders {
+          min-width: 87px;
+          max-width: 97px;
+          flex: 2;
+        }
+        .column-picked {
+          min-width: 87px;
+          max-width: 97px;
+          flex: 2;
+        }
+        .column-packed {
+          min-width: 87px;
+          max-width: 97px;
+          flex: 2;
+        }
+        .column-handover {
+          min-width: calc(var(--qty-big-min) + 12px);
+          max-width: calc(var(--qty-big-max) + 12px);
+          flex: 2;
+        }
+        .column-promotion-allocation {
+          min-width: calc(var(--qty-big-min) + 12px);
+          max-width: calc(var(--qty-big-max) + 12px);
+          flex: 2;
+        }
+        .column-available-to-sell {
+          min-width: 95px;
+          max-width: 97px;
+          flex: 2;
+        }
+        .column-in-transit {
+          min-width: 95px;
+          max-width: 97px;
+          flex: 2;
+        }
+        .column-waiting-inbound {
+          min-width: 95px;
+          max-width: 97px;
+          flex: 2;
+        }
+        .column-inbounded {
+          min-width: 110px;
+          max-width: 112px;
+          flex: 2;
+        }
+        .column-waiting-outbound {
+          min-width: 110px;
+          max-width: 112px;
+          flex: 2;
+        }
+        .column-last-updated {
+          min-width: calc(var(--time-min) + 12px);
+          max-width: calc(var(--time-max) + 12px);
+          flex: 2;
+        }
+        .column-actions {
+          min-width: 96px;
+          flex: 1;
+          padding-right: 12px !important;
+        }
+      }
+    `
+  } else if ($mode === 'picklist') { 
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--checkbox) var(--time) var(--id) var(--status) var(--person) var(--warehouse) var(--ref) var(--time) minmax(185px, auto);
+      }
+    `
+  } else if ($mode === 'package') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--checkbox) var(--time) var(--id) var(--status) var(--person) var(--warehouse) var(--person) var(--ref) var(--time) minmax(110px, auto);
+      }
+    `
+  } else if ($mode === 'shipment') { 
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--checkbox) var(--time) var(--id-big) var(--status) minmax(80px, 160px) minmax(80px, 160px) minmax(95px, 160px) var(--ref) minmax(140px, auto);
+      }
+    `
+  } else if ($mode === 'invoice') { 
+    style += `
+      ${ItemTable} {
+        @media only screen and (max-width: 1279px) {
+          width: unset;
+        }
+        grid-template-columns: var(--checkbox) var(--id-big) var(--status-small) var(--store) var(--price) var(--price) var(--ref) var(--person) var(--time) minmax(180px, auto);
+      }
+    `
+  } else if ($mode === 'payment-receive') { 
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--time) 155px var(--person) var(--qty) var(--price) minmax(110px, auto);
+      }
+    `
+  } else if($mode ==='sales-return') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--id-big) var(--status) var(--warehouse) var(--person) var(--person) var(--ref-big) var(--time) minmax(120px, auto);
+      }
+    `
+  } else if ($mode === 'activity') { 
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--time) var(--id-big) var(--item) var(--status) var(--email) var(--status)  var(--status) minmax(110px, auto);
+      }
+    `
+  } else if ($mode === 'putaway') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--id) var(--status-big) var(--warehouse) var(--ref) var(--person) var(--time) minmax(60px, auto);
+      }
+    `
+  } else if ($mode === 'inbound') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--id-pd20) var(--status-big) var(--warehouse) var(--ref) minmax(140px, 160px) var(--person) var(--time) minmax(170px, auto);
+      }
+    `
+  } else if ($mode === 'lowstock') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--checkbox) var(--item) var(--variant) var(--sku) var(--warehouse) var(--qty-big) var(--statusnow) var(--time) minmax(60px, auto);
+      }
+    `
+  } else if ($mode === 'price') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--time) var(--id-big) var(--status) var(--qty) var(--email) var(--status) minmax(60px, auto);
+      }
+    `
+  } else if ($mode === 'stock-adjustment') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--id-pd20) var(--status-big) var(--warehouse) var(--ref) minmax(140px, 150px) var(--person) var(--time) minmax(160px, auto);
+      }
+    `
+  } else if ($mode === 'stock-outbound') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--id-pd20) var(--status-big) var(--warehouse) var(--ref) minmax(150px,160px) var(--person) var(--time) minmax(160px, auto);
+      }
+    `
+  } else if ($mode === 'stock-transfer') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--id) var(--status-big) var(--warehouse) var(--warehouse) minmax(120px, 130px) var(--person) var(--time) minmax(140px, auto);
+      }
+    `
+  } else if ($mode === 'promotion') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--store) var(--id-big) var(--ref-big) minmax(95px,150px) var(--status-small) var(--time) var(--time) minmax(50px, 88px) var(--time) minmax(88px, auto);
+      }
+    `
+  } else if ($mode === 'stock-history') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: minmax(120px, 360px) var(--sku) var(--warehouse) minmax(85px,120px) minmax(105px,190px) var(--qty-small) var(--qty-small) var(--qty-big) var(--time) minmax(75px, 88px);
+        > *:last-child {
+          display: unset;
+          justify-content: unset;
+        }
+        @media only screen and (max-width: 1279px) {
+          width: unset;
+        }
+      }
+    `
+  } else if ($mode === 'price-history') {
+    style += `
+      ${ItemTable} {
+        @media only screen and (max-width: 1279px) {
+          width: unset;
+        }
+        > *:last-child {
+          display: unset;
+          justify-content: unset;
+        }
+        grid-template-columns: minmax(135px,145px) minmax(120px,360px) var(--sku) var(--store) var(--price) var(--price) minmax(75px,120px) minmax(80px,120px) var(--time) var(--status) minmax(75px,88px);
+      }
+    `
+  } else if ($mode === 'turnover') {
+    style += `
+      ${ItemTable} {
+        @media only screen and (max-width: 1279px) {
+          width: unset;
+        }
+        > *:last-child {
+          display: unset;
+          justify-content: unset;
+        }
+        grid-template-columns: minmax(120px,360px) var(--sku) var(--warehouse) repeat(4, var(--qty)) minmax(75px,88px);
+      }
+    `
+  }
+  else if ($mode === 'days-outofstock') {
+    style += `
+      ${ItemTable} {
+        @media only screen and (max-width: 1279px) {
+          width: unset;
+        }
+        > *:last-child {
+          display: unset;
+          justify-content: unset;
+        }
+        grid-template-columns: minmax(120px,360px) var(--sku) var(--warehouse) var(--qty-big) var(--qty) var(--qty-big) var(--time) minmax(75px,88px);
+      }
+    `
+  } else if ($mode === 'warehouses') {
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--warehouse) var(--status) var(--id-big) var(--qty-big) var(--time) minmax(110px, auto);
+      }
+    `
+  } else if ($mode === 'archived') { 
+    style += `
+      ${ItemTable} {
+        grid-template-columns: var(--time-pd20) minmax(auto, max-content) minmax(88px, auto);
+        &[role=rowheader] > div[role=group], &[role=row] > div[role=cellgroup] > div[role=rowgroup], ._refCollapse > div:not(._refCollapseContainer), ._refCollapseContainer > div {
+          grid-template-columns: var(--sku) var(--item);
+        }
+      }
+    `
+  } else if ($mode === 'pos-order') { 
+    style += `
+      ${ItemTable} {
+        @media only screen and (max-width: 1279px) {
+          width: unset;
+        }
+        grid-template-columns: var(--id-pd20) minmax(80px, 120px) var(--time)  var(--person) var(--qty) var(--price) var(--status) minmax(180px, auto);
+      }
+    `
+  }
+  return style
+}
+const getIconDotModifiedStyled = ({ $mode }:{ $mode?: string }) => {
+  let style = ``
+  if ($mode === 'list' || $mode === 'header') {
+    style +=`
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform: scale(1) translate(-50%, -50%);
+      transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      transform-origin: 100% 0%; 
+    `
+    if ($mode === 'header') {
+      style +=` 
+        left: unset;
+        right: 0;
+        z-index: 99;
+        transform: scale(1) translate(50%, -50%);
+      `
+    }
+  } 
+  return style
+}
+const getCardModFunc = ({ $mode }:{ $mode?: string }) => {
+  const globalEmptyCss = css`
+    text-align: center;
+    color: var(--mt-clr);
+  `
+  let style = ``
+  if ($mode === 'empty') {
+    style +=`
+      ${globalEmptyCss}
+    `
+  } else if ($mode === 'empty-invoice') {
+    style +=` 
+      ${globalEmptyCss}
+      > div {
+        display: grid;
+        align-content: center;
+        grid-gap: 4px;
+        margin: 0 16px;
+      }
+    `
+  } else {
+    style += `
+      width: 958px;
+      @media only screen and (min-width: 1024px) { 
+        width: unset; 
+      }
+    `
+  }
+  return style;
+}
+const getListModFunc = ({ $mode }:{ $mode?: string }) => {
+  let style = ``
+  if ($mode === 'shipment') {
+    style +=`
+      ${DetailItem} {
+        ${DetailItemWrapper} { 
+          grid-template-columns: var(--status) var(--warehouse) minmax(80px, 160px) minmax(80px, 160px)  minmax(95px, 200px); 
+        }
+      }
+    `
+  } else if ($mode === 'picklist') {
+    style +=`
+      ${DetailItem} {
+        ${DetailItemWrapper} { 
+          grid-template-columns: var(--status) var(--warehouse) var(--person); 
+        }
+      }
+    `
+  } else if ($mode === 'invoice') {
+    style +=`
+      ${DetailItem} {
+        ${DetailItemWrapper} { 
+          grid-template-columns:  var(--status) var(--price); 
+        }
+      }
+    `
+  } else if ($mode === 'payment') {
+    style +=` 
+      ${DetailItem} {
+        ${DetailItemWrapper} { 
+          grid-template-columns: var(--status) var(--ref-big) var(--price) auto; 
+        }
+        > article:first-child {
+          > span { 
+            position: relative; }
+        }
+      }
+    `
+  } else if ($mode === 'promotion') {
+    style +=`
+      ${DetailItem} {
+        grid-template-columns: auto;
+        padding-left: 18px;
+        ${DetailItemWrapper} { 
+          grid-template-columns: minmax(95px, 150px) var(--store) var(--ref-big) minmax(180px, 300px) var(--status-small) minmax(50px, 88px); 
+        }
+      }
+    `
+  } else if ($mode === 'return') {
+    style +=`
+      ${DetailItem} {
+        ${DetailItemWrapper} { 
+        grid-template-columns: var(--status) var(--warehouse) var(--qty) var(--qty); 
+      }
+    `
+  }
+  return style
+}
+const getCreateContainerModFunc = ({ $mode }:{ $mode?: string }) => {
+  let style = ``
+  if ($mode === 'master' || $mode === 'listing' || $mode === 'paymentreceive' || $mode === 'picklist') {
+    style += `
+      height: 100vh;
+      overflow: hidden;
+    `
+  } else if ($mode ==='bundle') {
+    style +=`
+      ${CreateHeaderWrapper} {
+        position: fixed;
+        z-index: 10;
+        aside { grid-template-rows: none; }
+      }
+    `
+  }
+  return style
+}
+const getCreateHeaderWrapperModFunc = ({ $mode }:{ $mode?: string }) => {
+  let style = ``
+  if ($mode === 'edit-master') {
+    style +=`
+      aside { 
+        grid-template-rows: none; 
+      }
+    `
+  }
+  return style
+}
+const getPopupCardModFunc = ({ $mode }:{ $mode?: string }) => {
+  let style = ''
+  if ($mode === 'mass-payment') {
+    style += `
+      margin: 0;
+      @media only screen and (min-width: 768px) {
+        padding: 1em 24px;
+      }
+    `
+  }
+  return style;
+}
+
+export const PanelContainer = styled.section`
+  position: relative;
+  height: 100%;
+  padding-top: 20px;
+  > section:not(:first-child) {
+    margin-top: 1em;
+  }
+  @media only screen and (min-width: 1024px) {
+    padding: 20px 1em 0;
+    height: calc(100vh - 50px);
+  }
+  @media only screen and (min-width: 1366px) {
+    padding: 20px 2em 0;
+    height: 100%;
+  }
+`
+export const ListContainer = styled.section`
+  position: relative;
+  &:first-child {
+    margin-top: -4px;
+  }
+`
+export const PanelWrapper = styled.section<{ $mode?: string }>` 
+  ${responseWidth}
+  position: relative;
+  min-height: 1px;
+  margin: 0 auto;
+  padding-top: 16px;
+  padding-bottom: 10px;
+  @media only screen and (min-width: 768px) {
+    padding: 8px 30px 16px;
+  }
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'full') {
+      return css` 
+        width: 100%; 
+      `
+    }
+  }}
+`
+export const Title = styled.h1`
+  font-family: PT Sans;
+  font-size: 22px;
+  color: var(--ter-clr);
+  > aside {
+    color: var(--mt-clr);
+    font-size: 16px;
+    font-weight: 400;
+    margin-top: 5px;
+    letter-spacing: normal;
+  }
+  @media only screen and (min-width: 768px) {
+    font-size: 30px;
+    .tablet-fw {
+      display: inline !important;
+    }
+  }
+`
+export const HeaderContainer = styled.aside` 
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 8px;
+  grid-template-columns: max-content max-content;
+  align-items: center;
+  @media only screen and (min-width: 400px) {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+  }
+  @media only screen and (min-width: 768px) {
+    top: 10px;
+  }
+  @media only screen and (min-width: 1366px) {
+    right: 20px;
+  }
+`
+export const TabsContainer = styled.section<{ $mode?: string }>`
+  width: 100%;
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'master-listing') {
+      return css` 
+        padding: 0 16px;
+      `
+    } else if ($mode === 'detail-master') {
+      return css` 
+        padding: 20px 10px 0 10px;
+      `
+    } else if ($mode === 'no-header') {
+      return css` 
+        padding-top: 0; 
+        @media only screen and (min-width: 1366px) {
+          padding-top: 12px; 
+        }
+      `
+    }
+  }}
+`
+export const TabsContent = styled.div<{ $mode?: string }>`
+  padding-top: 16px;
+  &._refNoTab {
+    padding-top: 9px;
+    @media only screen and (min-width: 768px) {
+      padding-top: 11px;
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    padding-top: 24px;
+  }
+  ${getTabsContentModFunc}
+`
+export const FoContainer = styled.section<{ $mode?: string }>` 
+  position: relative;
+  > section, 
+  > article {
+    width: 100%;
+    > aside, 
+    > article {
+      ${responseWidth}
+      margin: 0 auto;
+    }
+  }
+  > article {
+    height: calc(100vh - 50px);
+  }
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'detail') {
+      return css` 
+        margin-top: -4px;
+        @media only screen and (min-width: 768px) {
+          > section, 
+          > article {
+            > aside {
+              padding-left: 16px;
+              padding-right: 16px;
+            }
+          }
+        }
+        @media only screen and (min-width: 1024px) {
+          > section, 
+          > article {
+            > aside {
+              padding-left: 0;
+              padding-right: 0;
+            }
+          }
+        }
+      `
+    }
+  }}
+`
+export const BreadcrumbContainer = styled.aside` 
+  position: relative;
+  padding: 18px 16px;
+  text-align: center;
+  > a {
+    &:first-child {
+      display: none;
+    }
+    &:nth-child(2) {
+      display: inline;
+      position: absolute;
+      top: 20px;
+      left: .625em;
+    }
+    > i {
+      float: left;
+      margin-right: 6px;
+    }
+  }
+  span { 
+    display: none; 
+  }
+  @media only screen and (min-width: 375px) {
+    > a {
+      &:nth-child(2) {
+        left: 16px;
+      }
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    padding: 8px 30px 20px;
+    text-align: left;
+    b {
+      font-size: .875rem;
+      line-height: 1;
+    }
+    span { 
+      display: inline; 
+    }
+    a {
+      &:first-child {
+        display: inline;
+      }
+      &:nth-child(2) {
+        display: none;
+      }
+    }
+  }
+`
+export const InfoGroup = styled.div`
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-template-columns: minmax(140px, 150px) minmax(140px, 1fr);
+  grid-gap: 5px;
+  width: 100%;
+  justify-content: left;
+  margin-bottom: 14px;
+  > span:first-child {
+    position: relative;
+    &:after {
+      position: absolute;
+      right: 5px;
+      content: ":";
+    }
+  }
+  div {
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+`
+export const MuteLabel = styled.span<{ $size?: string }>`
+  color: var(--mt-clr);
+  font-size: 12px;
+  word-break: break-all;
+  &._refWithIcon {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: start;
+    grid-gap: 4px;
+    * { 
+      margin-right: 0; 
+    }
+  }
+  ${({ $size }:{ $size?: string }) => {
+    if ($size === 'medium') 
+      return css` 
+        font-size: 13px;
+        line-height: 12px;
+        * { 
+          margin-right: 4px; 
+        }
+      `
+  }}
+`
+export const InputGroup = styled.article<{ $mode?: string, $required?: boolean }>`
+  > label, 
+  > aside {
+    ${formLabel}
+    margin-bottom: 6px;
+    padding: 0 6px;
+    display: block;
+    font-size: 14px;
+  }
+  > div { 
+    display: grid; 
+  }
+  ${getInputGroupModFunc}
+`
+export const BoxContainer = styled.aside` 
+  position: relative;
+  @media only screen and (min-width: 768px) {
+    padding-bottom: 16px;
+  }
+`
+export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
+  position: fixed;
+  z-index: 101;
+  bottom: -100%;
+  left: 0px;
+  width: 100%;
+  background-color: var(--ter-clr-bg);
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-template-columns: max-content auto;
+  justify-content: start;
+  grid-gap: 10px;
+  padding: 14px 1em 8px;
+  transition: bottom .2s ease-in-out;
+  overflow: auto;
+  white-space: nowrap;
+  i {
+    position: relative;
+    top: 5px;
+  }
+  span {
+    position: relative;
+    top: 7px;
+  }
+  button, a {
+    padding: 6px 16px;
+    font-size: 13px;
+    min-height: unset;
+    height: auto;
+    margin: 0;
+  }
+  @media (max-width: 767.9px) {
+    &._refMasterTableBulkWrapper {
+      position: fixed;
+      width: 100vw;
+      border: 1px solid #E3E3E3;
+      background: #FFFFFF;
+      z-index: 102;
+      box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
+      border-radius: 10px 10px 0px 0px;
+      display: none;
+      >i, >span, >button { display: none; }
+      >section {
+        padding: 1em;
+        >section >article {
+          display: inline-grid;
+          grid-auto-flow: row;
+          grid-gap: 12px;
+          width: 100%;
+        }
+      }
+      & + ._refDropdownOverlay {
+        display:none;
+      }
+    }
+  }
+  ${getBulkActionWrapperModifiedStyled}
+`
+export const InitialContainer = styled.span`
+  ${initialStyles}
+  align-items: center;
+  display: grid;
+  color: #fff;
+  text-align: center;
+  border-radius: var(--ter-rd);
+`
+export const MasterTableActionWrapper = styled.section<{ $mode?: string }>`
+  height: 35px;
+  border-bottom: 1px solid var(--tab-clr-ln);
+  background-color: var(--pri-clr-bg);
+  > div {
+    height: 35px !important;
+    > div {
+      display: inline-grid;
+      width: 100%;
+      grid-auto-flow: column;
+      grid-template-columns: min-content;
+      grid-gap: 5px;
+    }
+  }
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'picklist') {
+      return css` 
+        background-color: var(--ter-clr-bg);
+        border-top: 1px solid var(--tab-clr-ln);
+        height: 50px;
+        > div {
+          height: 50px !important;
+        }
+      `
+    }
+  }}
+`
+export const FigureWraper = styled.figure<{ $size?: string, $mode?: string }>` 
+  margin: 0;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--pri-clr-ln);
+  background-color: var(--pri-clr-bg);
+  border-radius: var(--ter-rd);
+  width: 30px;
+  height: 30px;
+  align-self: start;
+  > img {
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+    background-color: var(--pri-clr-bg);
+  }
+  ${({ $size }:{ $size?: string }) => {
+    let style = ``;
+    if ($size) {
+      style += ` 
+        width:${$size};  
+        height:${$size};
+      `
+    }
+    return style;
+  }}
+`
+export const PanelBody = styled.section`
+  ${PanelContainer} {
+    overflow-y: auto;
+  }
+`
+export const MultiPanelContainer = styled.main`
+  display: inline-grid;
+  width: 100%;
+  grid-template-columns: calc(100vw - 450px) 450px;
+  > section {
+    display: inline-grid;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+  @media (min-width: 1024px) {
+    height: calc(100vh - 50px);
+  }
+`
+export const RightPanelContainer = styled.section`
+  border-right: 2px solid var(--lay-clr-ln);
+  background-color: #f9fafb;
+`
+export const LeftPanelContainer = styled.section``
+export const SearchFormWrapper = styled.div`
+  position: relative;
+  i {
+    position: absolute;
+    top: 6px;
+    left: 12px;
+    pointer-events: none;
+    z-index: 1;
+    &:last-child {
+      left: auto;
+      right: 6px;
+    }
+  }
+  ._refLoading {
+    position: absolute;
+    right: 12px;
+    top: 6px;
+  }
+`
+export const TableHeadLabel = styled.span` 
+  color: var(--mt-clr);
+  position: relative;
+  cursor: pointer;
+  line-height: 1;
+  i {
+    display: inline-block;
+    vertical-align: text-top;
+    margin-left: 2px;
+  }
+  dt {
+    display: inline;
+    width: auto;
+  }
+`
+export const TableHeadWrapper = styled.div<{ $mode?: string }>` 
+  display: grid;
+  border-bottom: 2px solid var(--ter-clr-ln);
+  >span:last-child { justify-self: right; }
+  padding-top: 22px;
+  padding-bottom: 22px;
+  align-items: center;
+  & ${TableHeadLabel} {
+    &:empty, &:last-child {
+      cursor: default;
+      &:after { display: none; }
+    }
+  }
+  @media only screen and (min-width: 1366px) {
+    padding-top: 28px;
+  }
+  ${getTableHeaderModFunc}
+`
+export const TableRowGroup = styled.div<{ $content?: string, $mode?: string }>` 
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 4px;
+  align-content: flex-start;
+  ${getTabsRowModFunc}
+`
+export const TableRightGroup = styled.div` 
+  display:grid;
+  grid-auto-flow: column;
+  grid-gap: 6px;
+  align-items: center;
+  justify-content: end;
+  > a {
+    padding: 7px 16px;
+    font-size: 14px;
+    margin: 0;
+  }
+  @media only screen and (min-width: 1366px) {
+    grid-gap: 8px;
+  }
+`
+export const TableColumnGroup = styled.div<{ $mode?: string, $content?: string }>` 
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 4px;
+  justify-content: left;
+  align-items: end;
+  &._refActionContainer {
+    justify-content: right;
+    min-height: 30px;
+    align-items: center;
+  }
+  ${getTabsColumnModFunc}
+`
+export const ItemPriceLabel = styled.span<{ $mode?: string }>` 
+  ${({$mode}:{$mode?: string}) => {
+    if ($mode === 'correct') {
+      return css` 
+        text-decoration: line-through; 
+        color: var(--mt-clr);
+      `
+    }
+  }}
+`
+export const TableLabel = styled.span<{ $mode?: string }>` 
+  line-height: 16px;
+  &._refWithIcon {
+    > a, 
+    > span {
+      grid-auto-flow: column;
+      grid-template-columns: fit-content(95%) 15px;
+      display: inline-grid;
+      grid-gap: 4px;
+      > span { 
+        padding-top: 2px; 
+      }
+    }
+  }
+  i[name=arrow-left-blue] {
+    transform: scaleX(-1);
+    position: absolute;
+  }
+  input[name=checkbox-list] {
+    & + span {
+      top: 0;
+    }
+  }
+  > a {
+    > span {
+      overflow-wrap: anywhere; 
+    }
+  }
+  @media only screen and (max-width: 767px) {
+    input[name=checkbox-list] {
+      & + span {
+        left: 0;
+      }
+    }
+  }
+  ${({ $mode }: { $mode?: string }) => {
+    if ($mode === 'product') {
+      return css` 
+        line-height: 15px;
+        align-items: center;
+        padding-right: 8px;
+        margin-left: -6px;
+      `
+    }
+  }}
+`
+export const NameLabel = styled.span<{ $mode?: string }>` 
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--hd-clr);
+  > aside {
+    border-left: 1px solid var(--ck-clr-ln);
+    padding-left: 5px;
+    display: inline;
+  }
+  ${getNameModFunc}
+`
+export const TabsHeader = styled.article`
+  margin: 0 auto;
+  ${responseWidth}
+`
+export const TabsItem = styled.div<{ $activated?: boolean }>`
+  font-family: var(--sec-ft-fm);
+  cursor: pointer;
+  letter-spacing: 0.6px;
+  position: relative;
+  padding: 9px;
+  color: ${({ $activated }:{ $activated?: boolean }) => $activated ? 'var(--sec-clr-lnk__hvr)' : 'var(--pri-clr-lnk)'};
+
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: #FF585C;
+    left: 0;
+    height: 2px;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    transition: all 250ms ease 0s;
+    transform: ${({ $activated }:{ $activated?: boolean }) => $activated ? 'scale(1)' : 'scale(0)'};
+  }
+  @media only screen and (min-width: 768px) {
+    font-size: 16px;
+    font-weight: 600;
+    padding: 16px 15px 11px 15px;
+  }
+`
+export const TabsList = styled.div` 
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-gap: 4px;
+  grid-auto-columns: max-content;
+  width: auto;
+  min-width: 100%;
+`
+export const TabsWrapper = styled.section<{ $mode?: string }>`
+  width: 100%;
+  overflow: auto;
+  &.is-sticky {
+    position: fixed; 
+    top: 0;
+    z-index: 9;
+    background-color:#FFF;
+    & + div {
+      margin-top: 40px;
+    }
+    > article {
+      position: relative;
+      z-index: 10;
+    }
+    @media only screen and (min-width: 768px) {
+      top: 50px;
+    }
+  }
+  ${getTabsWrapperModFunc}
+`
+export const TableItemColumn = styled.div<{ $mode?: string }>` 
+  display: grid;
+  > div {
+    padding: 10px 0;
+    &:last-child {
+      border-right: none;
+    }
+    &.list-item {
+      display: grid;
+      grid-gap: 11px;
+      align-items: center;
+    }
+    &.list-center {
+      padding: 15px 25px;
+      display: grid;
+      align-items: center;
+    }
+    &.cell-action {
+      display: grid;
+      align-items: start;
+    }
+  }
+  &._refFooterContainer {
+    font-weight: 600;
+    border-top: 1px solid var(--pri-clr-ln);
+  }
+  &._refItemContainer {
+    ${TableColumnGroup} {
+      grid-gap: 10px;
+    }
+  }
+  ${getTableItemModFunc}
+`
+export const TableItemWrapper = styled.section<{ $mode: string, $isBorder?: boolean, $isPopup?: boolean }>`
+  overflow-x: auto;
+  ${TableItemColumn} {
+    width: 960px;
+    border-bottom: 1px solid var(--pri-clr-ln);
+    >* {
+      padding: 15px 10px;
+    }
+    &:first-child {
+      border-bottom: 1px solid var(--sec-clr-ln);
+      display: grid;
+      > * { padding: 0 10px 12px; }
+    }
+    &:last-child { border-bottom: none; }
+    &[role='rowheader'] {
+      ${headTable}
+      color: var(--mt-clr);
+    }
+  }
+  @media only screen and (min-width: 1024px) {
+    overflow-x: unset;
+    ${TableItemColumn} { width: unset; }
+  }
+  ${getTableItemWrapperModFunc}
+`
+export const CollapseContainer = styled.div<{ $mode?: string }>` 
+  position: relative;
+  top: 0;
+  overflow-y: hidden;
+  transition: height .35s ease; 
+  display: grid;
+  grid-gap: 10px;
+  &.collapsed {
+    position: absolute;
+    top: -999999%;
+  }
+  &.is-loading {
+    height: 0 !important;
+  }
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'nav') {
+      return css` 
+        display: block;
+        padding-top: 1.2em;
+        > div:last-child {
+          margin-bottom: 4px;
+        }
+      `
+    }
+  }}
+`
+export const PaginationContainer = styled.div`
+  margin: 10px auto;
+  display: inline-grid;
+  width: 100%;
+  grid-gap: 12px;
+  @media only screen and (min-width: 768px) {
+    margin: 20px auto 60px;
+  }
+`
+export const PageWrapper = styled.div<{ $mode?: string }>`
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  > div {
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: 5px;
+    grid-template-columns: max-content;
+    justify-content: center;
+    ._refPageButton:first-child, 
+    ._refPageButton:last-child {
+      display: none;
+    }
+    @media only screen and (min-width: 375px) {
+      ._refPageButton:first-child, 
+      ._refPageButton:last-child {
+        display: grid;
+      }
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    margin-left: 20px;
+    margin-right: 20px;
+    grid-auto-flow: column;
+    grid-gap: 5px;
+    > div:first-child {
+      justify-content: end;
+    }
+    > div:last-child {
+      justify-content: start;
+    }
+  }
+  ${getPageWrapperModFunc}
+`
+export const PageButton = styled.div<{ $activated?: boolean, $disabled?: boolean }>`
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  padding: 4px;
+  height: 28px;
+  width: auto;
+  min-width: 28px;
+  border: 1px solid var(--ck-clr-ln);
+  cursor: pointer;
+  border-radius: var(--ter-rd);
+  i {
+    margin-top: -3px;
+  }
+  ${getPageButtonModFunc}
+`
+export const PageLabel = styled.span`
+  font-size: 12px;
+  text-align: center;
+`
+export const PageDot = styled.div`
+  padding-top: 3px;
+  height: 28px;
+  width: 28px;
+  text-align: center;
+`
+export const ButtonLabel = styled.span` 
+  font-size: 14px;
+  font-weight: 400;
+`
+export const LinkContainer = styled.article<{ $align?: string }>` 
+  display: inline-grid;
+  grid-auto-flow: row;
+  grid-gap: 14px;
+  width: 100%;
+  a, 
+  span { 
+    text-align: ${({ $align }:{ $align?: string }) => $align === 'right' ? 'right' : 'left'}; 
+    text-transform: capitalize;
+    cursor: pointer;
+  }
+  hr {
+    margin: 0 -1em;
+    border: 0;
+    border-top: 1px solid var(--pri-clr-ln);
+  }
+`
+export const FilterContainer = styled.article` 
+  > div {
+    justify-content: left;
+  }
+`
+export const SearchFilterContainer = styled.div<{ $mode?: string }>` 
+  width: 100%;
+  margin-bottom: 16px !important;
+  > article {
+    display: grid;
+    align-items: center;
+    margin-top: 10px;
+    justify-items: end;
+  }
+  @media only screen and (min-width: 768px) {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: auto auto 1fr auto;
+    justify-content: left;
+    > article {
+      padding-left: 8px;
+      margin-top: 0px;
+      justify-items: unset;
+    }
+  } 
+  ${getSearchFilterContainerModFunc}
+`
+export const SearchWrapper = styled.div<{ width?: string }>`
+  display: grid;
+  grid-template-columns: 148px 1fr;
+  position: relative;
+  width: 100%;
+  border-radius: var(--sec-rd);
+  background-color: var(--ter-clr-bg);
+  i {
+    position: absolute;
+    top: 50%;
+    margin-top: -8px;
+    right: 13px;
+    z-index: 1;
+  }
+  input {
+    padding-right: 30px;
+    padding-left: 7px;
+    &::placeholder {
+      font-style: normal;
+    }
+  }
+  button { 
+    width: 148px; 
+    padding: 6px 23px 6px 12px;
+  }
+  ._refContainer { 
+    border-right: 1px solid var(--sec-clr-ln); 
+  }
+  @media only screen and (min-width: 1280px) {
+    width: 350px;
+  }
+  @media only screen and (min-width: 1366px) {
+    width: 400px;
+  }
+  ${getSearchWrapperModFunc}
+`
+export const ButtonGroup = styled.div` 
+  position: relative;
+  display: grid;
+  grid-auto-flow: column;
+  border-radius: var(--sec-rd);
+  box-shadow: none;
+  background-color: var(--ter-clr-bg);
+  > button {
+    width: auto;
+    min-width: auto;
+    border-radius: 0;
+    color: var(--mt-clr);
+  }
+  > button , 
+  ._refContainer {
+    border-right: 1px solid var(--sec-clr-ln);
+    &:last-child {
+      border-right: 0;
+    }
+  }
+  ._refContainer {
+    max-width: 200px;
+  }
+`
+export const FilterWrapper = styled.section` 
+  display: inline-block;
+  padding-left: 0;
+  width: 100%;
+  margin-top: 10px;
+  > section {
+    width: 48.35% !important;
+  }
+  > article {
+    margin-top: 10px;
+  }
+  ${ButtonGroup} {
+    margin-bottom: 10px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  @media only screen and (max-width: 767.9px) {
+    > section {
+      display: block;
+      float: left;
+      margin-right: 9px;
+      &:nth-of-type(even) {
+        margin-right: 0;
+      }
+      &:nth-of-type(n+3) {
+        margin-top: 10px;
+      }
+      > section > button, 
+      > div > button {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: block;
+        max-width: 100%;
+      }
+    }
+    > article {
+      float: left
+    }
+  }
+  @media only screen and (min-width: 425px) {
+    > section {
+      width: 48.725% !important;
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    margin-top: 0;
+    padding-left: 8px;
+    grid-auto-flow: column;
+    grid-gap: 10px;
+    display: grid;
+    > section {
+      width: auto !important;
+    }
+    > article {
+      display: grid;
+      align-items: center;
+      margin-top: 0px;
+    }
+    ${ButtonGroup} {
+      margin-bottom: 0;
+    }
+  }
+`
+export const ListTableContainer = styled.div` 
+  display: grid;
+  grid-gap: 16px;
+  padding: 0 .625em 10px;
+  @media only screen and (min-width: 375px) {
+    padding: 0 16px 10px;
+  }
+  @media only screen and (min-width: 1024px) {
+    padding: 0;
+  }
+`
+export const ItemTable = styled.section``
+export const ListTable = styled.main<{ $mode?: string }>` 
+  ${boxBase}
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  ${ItemTable} {
+    width: calc(100% - 19px);
+    min-width: 975px;
+    border-top: 1px solid var(--ter-clr-ln);
+    margin: 9px 9px 9px 10px;
+    padding: 16px 12px 16px 19px;
+    display: inline-grid;
+    grid-gap: 12px;
+    align-items: start;
+    &[role=rowheader] > div[role=group], 
+    &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+    ._refCollapse > div:not(._refCollapseContainer), 
+    ._refCollapseContainer > div {
+      display: grid;
+      align-items: start;
+      grid-gap: 12px;
+    }
+    &[role=rowheader], 
+    &:nth-child(2) {
+      border-top: 0;
+    }
+    &[role=rowheader] {
+      padding: 18px 12px 18px 19px;
+      border-bottom: 2px solid var(--ter-clr-ln);
+      color: var(--mt-clr);
+      position: relative;
+      cursor: pointer;
+      line-height: 1;
+    }
+    &[role=row] {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    &:last-child {
+      margin-bottom: 9px;
+    }
+    &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+    ._refCollapse > div, 
+    ._refCollapseContainer > div {
+      padding-bottom: 1em;
+      &:nth-child(n+2) {
+        border-top: 1px solid rgb(245, 245, 245);
+        padding-top: 16px;
+      }
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+    > *:last-child {
+      display: grid;
+      justify-content: end;
+    }
+    input[name=checkbox-selectAll]  {
+      & + span { 
+        top: 50%; 
+      }
+    }
+    input[name=checkbox-list] {
+      & + span { 
+        top: 0;
+      }
+    }
+    ._refCollapseContainer {
+      padding-bottom: 0;
+    }
+  }
+  ${getListTableFunc}
+`
+export const DateWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 16px 125px;
+  position: relative;
+  width: 100%;
+  border-radius: var(--sec-rd);
+  background-color: var(--ter-clr-bg);
+  padding: 0 10px;
+  gap: 4px;
+  > i {
+    margin-top: 6px;
+  }
+  input {
+    &, &:focus, &:active {
+      border: none !important;
+      background: transparent;
+      cursor: pointer;
+    }
+  }
+`
+export const DropdownTitle = styled.div` 
+  padding: 1em 1em .8em;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--sec-clr-ln);
+  i { 
+    font-style: normal; 
+  }
+`
+export const DropdownList = styled.ul<{ $mode?: string }>` 
+  ${clearList}
+  max-height: 44vh;
+  overflow: auto;
+  > li {
+    padding: 8px 1em;
+    border-bottom: ${({ $mode }:{ $mode?: string }) => $mode === 'no-border' ? 'none' : '1px solid var(--pri-clr-ln)'};
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  @media only screen and (min-width: 1366px) {
+    max-height: 50vh;
+  }
+`
+export const DropdownItem = styled.li<{ $mode?: string }>` 
+  display: inline-grid;
+  width: 100%;
+  grid-gap: 10px; 
+  min-height: 48px;
+  grid-auto-flow: row;
+  @media only screen and (min-width: 768px) {
+    grid-auto-flow: column;
+    grid-template-columns: 100px auto;
+  }
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'categories') {
+      return css` 
+        grid-auto-flow: column;
+        grid-template-columns: 22px auto;
+        min-height: 33px;
+        align-items: center;
+        grid-gap: 0;
+        > label {
+          cursor: pointer;
+          text-transform: capitalize;
+        }
+        @media only screen and (min-width: 768px) {
+          grid-template-columns: 22px auto;
         }
       `
+    }
   }}
 `
-export const InputGroup = styled.article<{ $mode?: string, $required?: boolean }>`
-  > label, 
-  > aside {
-    ${formLabel}
-    margin-bottom: 6px;
-    padding: 0 6px;
+export const DropdownAction = styled.div` 
+  padding: .8em 1em 1em;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: end;
+  grid-gap: 8px;
+  border-top: 1px solid var(--sec-clr-ln);
+`
+
+export const FilterList = styled.ul` 
+  ${clearList}
+` 
+export const FilterItem = styled.li` 
+  > input {
+    display: none;
+  }
+  > label {
     display: block;
-    font-size: 14px;
+    float: left;
+    padding: 8px 10px;
+    margin-right: 4px;
+    margin-bottom: 8px;
+    border: 1px solid transparent;
+    outline: 1px solid transparent;
+    cursor: pointer;
+    font-size: 13px;
   }
-  > div { 
-    display: grid; 
+  > input:checked + label {
+    border: 1px solid var(--sel-clr-ln);
+    outline: 1px solid var(--sel-clr-ln);
+    color: var(--ter-clr);
+    border-radius: var(--sec-rd);
   }
-  ${getInputGroupModFunc}
 `
-export const BoxContainer = styled.aside` 
-  position: relative;
+export const FilterListTitle = styled.strong` 
+  padding-top: 8px;
+`
+export const FilterButton = styled.div` 
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr auto;
+  gap: 4px;
+`
+export const IconDot = styled.span<{ $mode?: string }>`
+  display: grid;
+  min-width: 18px;
+  height: 18px;
+  align-items: center;
+  z-index: 1;
+  background-color: var(--act-clr-bg);
+  color: var(--act-clr);
+  font-size: 12px;
+  text-align: center;
+  padding: 0px 4px;
+  border-radius: var(--ter-rd);
+  ${getIconDotModifiedStyled}
+`
+export const SortByWrapper = styled.section`
+  justify-self: end;
+  margin-top: 10px;
+  display: grid;
+  justify-content: end;
   @media only screen and (min-width: 768px) {
-    padding-bottom: 16px;
+    margin-top: 0;
+    padding-left: 10px;
   }
 `
-export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
-  position: fixed;
-  z-index: 101;
-  bottom: -100%;
-  left: 0px;
+export const DetailWrapper = styled.section`
   width: 100%;
-  background-color: var(--ter-clr-bg);
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-template-columns: max-content auto;
-  justify-content: start;
-  grid-gap: 10px;
-  padding: 14px 1em 8px;
-  transition: bottom .2s ease-in-out;
-  overflow: auto;
-  white-space: nowrap;
-  i {
-    position: relative;
-    top: 5px;
+  border-top: 1px solid var(--lay-clr-ln);
+  padding-bottom: 16px;
+  @media only screen and (min-width: 768px) {
+    ${boxBase}
+    padding-bottom: 16px;
   }
-  span {
-    position: relative;
-    top: 7px;
+  @media only screen and (min-width: 1366px) {
+    padding-bottom: 28px;
   }
-  button, a {
-    padding: 6px 16px;
-    font-size: 13px;
-    min-height: unset;
-    height: auto;
-    margin: 0;
+`
+export const CardContainer = styled.section`
+  margin-bottom: 16px;
+  background: #FFFFFF;
+  border: 1px solid rgb(232, 232, 232);
+  border-radius: var(--sec-rd);
+  margin-bottom: 20px;
+  min-height: 72px;
+  display: grid;
+  align-items: center;
+  overflow-x: auto;
+  @media only screen and (min-width: 1366px) {
+    min-height: 92px;
   }
-  @media (max-width: 767.9px) {
-    &._refMasterTableBulkWrapper {
-      position: fixed;
-      width: 100vw;
-      border: 1px solid #E3E3E3;
-      background: #FFFFFF;
-      z-index: 102;
-      box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
-      border-radius: 10px 10px 0px 0px;
+`
+export const CardWrapper = styled.div<{ $mode?: string }>`
+  ${getCardModFunc}
+`
+export const DetailList = styled.ul<{ $mode?: string }>`
+  ${clearList}
+  ${getListModFunc}
+`
+export const DetailItemTitle = styled.article`
+  position: relative;
+  display: grid;
+  padding-left: 24px;
+  padding-right: 10px;
+  grid-gap: 6px;
+  align-self: baseline;
+  a, 
+  div, 
+  span {
+    font-size: 16px;
+    font-weight: 600;
+    svg {
       display: none;
-      >i, >span, >button { display: none; }
-      >section {
-        padding: 1em;
-        >section >article {
-          display: inline-grid;
-          grid-auto-flow: row;
-          grid-gap: 12px;
-          width: 100%;
-        }
-      }
-      & + ._refDropdownOverlay {
-        display:none;
+    }
+  }
+  span {
+    font-size: 12px;
+    overflow-wrap: break-word;
+  }
+  @media only screen and (min-width: 768px) {
+    a, 
+    div, 
+    span {
+      svg {
+        display: inline;
+        margin-left: 10px;
       }
     }
+    span { 
+      font-size: 14px; 
+    }
   }
-  ${getBulkActionWrapperModifiedStyled}
 `
-export const InitialContainer = styled.span`
-  ${initialStyles}
-  align-items: center;
+export const DetailItemAction = styled.article`
   display: grid;
-  color: #fff;
-  text-align: center;
-  border-radius: var(--ter-rd);
+  grid-auto-flow: column;
+  grid-template-columns: max-content;
+  justify-items: center;
+  justify-content: center;
+  align-self: center;
 `
-export const MasterTableActionWrapper = styled.section<{ $mode?: string }>`
-  height: 35px;
-  border-bottom: 1px solid var(--tab-clr-ln);
+export const DetailItemInfo = styled.article` 
+  display: grid;
+  grid-gap: 4px;
+  > span > span {
+    display: inline;
+  }
+  span {
+    text-transform: capitalize;
+    overflow-wrap: anywhere;
+  }
+`
+export const DetailItem = styled.li`
+  position: relative;
+  display: inline-grid;
+  align-content: center;
+  width: 100%;
+  grid-auto-flow: column;
+  grid-template-columns: var(--idate) auto var(--action);
+  min-height: 70px;
+  &:not(:only-child) {
+    border-bottom: 2px solid #f5f5f5;
+    &:last-child { 
+      border-bottom: 0; 
+    }
+  }
+  ${DetailItemInfo} {
+    align-self: flex-start;
+    grid-gap: 2px;
+  }
+`
+export const DetailItemWrapper = styled.article`
+  display: grid;
+  grid-auto-flow: column;
+  align-self: center;
+  > article { 
+    padding: 0 5px; 
+  }
+  @media only screen and (min-width: 1366px) {
+    grid-gap: 5px;
+  }
+`
+export const DetailPanelWrapper = styled.section`
+  min-height: 66px;
+`
+export const PopupBoxWrapper = styled.article`
+  display: grid;
+  padding-bottom: 1em;
+  grid-auto-flow: row;
+  grid-gap: 16px;
+  border-bottom: 1px solid var(--pri-clr-ln);
+  &:last-child {
+    padding-top: .5em;
+    border-bottom: none;
+  }
+  > button {
+    height: 30px;
+    justify-self: left;
+  }
+`
+export const PopupDownloadWrapper = styled.article`
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 1.2em;
+  @media only screen and (min-width: 768px) {
+    grid-template-columns: 1.25fr .75fr;
+  }
+`
+export const CreateContainer = styled.section<{ $mode?: string }>`
+  height: 100vh;
+  overflow: auto;
   background-color: var(--pri-clr-bg);
-  > div {
-    height: 35px !important;
-    > div {
-      display: inline-grid;
-      width: 100%;
+  ${getCreateContainerModFunc}
+`
+export const CreateHeaderWrapper = styled.article<{ $mode?: string }>`
+  ${fullGrid}
+  padding: 26px 15px 14px;
+  background-color: var(--hd-clr-bg);
+  grid-auto-flow: row;
+  grid-template-rows: auto auto;
+  grid-gap: 16px;
+  article {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: 350px 1fr;
+    grid-gap: 10;
+    align-items: center;
+    label { 
+      font-weight: 600; 
+    }
+  }
+  aside {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 1fr;
+    button {
+      padding: 7px 16px;
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    padding: 26px 30px 14px;
+    grid-auto-flow: column;
+    grid-template-rows: none;
+    grid-template-columns: auto max-content max-content;
+    aside {
+      grid-template-rows: none;
+      grid-template-columns: auto;
       grid-auto-flow: column;
-      grid-template-columns: min-content;
-      grid-gap: 5px;
+    }
+    .title {
+      font-size: 30px;
     }
   }
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'picklist') {
+  ${getCreateHeaderWrapperModFunc} 
+`
+
+export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string }>`
+  padding: 20px 15px;
+  margin: .5em 0; 
+  > section {
+    display: inline-grid;
+    width: 100%;
+    grid-auto-flow: row;
+    grid-gap: 10px 12px;
+    &:first-child { 
+      padding-bottom: 20px;
+      margin-bottom: 20px; 
+      border-bottom: 1px solid var(--ter-clr-ln);
+    }
+    &:last-child {
+      margin-bottom: 0 !important;
+      padding-bottom: 0 !important;
+      border-bottom: none !important;
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    padding: 20px 30px;
+    grid-template-columns: repeat(2,1fr);
+  }
+  ${({ $mode, $type }:{ $mode?: string, $type?: string }) => {
+    if ($mode === 'promotion') {
       return css` 
-        background-color: var(--ter-clr-bg);
-        border-top: 1px solid var(--tab-clr-ln);
-        height: 50px;
-        > div {
-          height: 50px !important;
+        margin: .5em 0; 
+        > section {
+          &:last-child {
+            > article:last-child {
+              div {
+                display: grid;
+                align-items: center;
+                grid-auto-flow: column;
+                grid-template-columns: max-content;
+                grid-gap: 10px;
+                button { 
+                  width: 130px; 
+                }
+              }
+            }
+          }
+          @media only screen and (min-width: 1024px) {
+            grid-template-columns: repeat(3,290px);
+            > article:nth-child(3) {
+              grid-area: 2 / 1;
+            }
+            > article:nth-child(4) {
+              grid-area: 2 / 2;
+            }
+            > article:nth-child(5) {
+              grid-area: 2 / 3;
+            }
+          }
+          @media only screen and (min-width: 1366px) { 
+            grid-template-columns: repeat(3,320px);
+          }
+        }
+      `
+    } else if ($mode === 'paymentreceive') {
+      return css` 
+        > section {
+          @media only screen and (min-width: 1024px) {
+            grid-auto-flow: column;
+            grid-template-columns: repeat(3,290px);
+          }
+          @media only screen and (min-width: 1366px) { 
+            grid-template-columns: repeat(3,320px);
+          }
+        }
+      `
+    } else if ($mode === 'picklist') {
+      return css` 
+        > section {
+          @media only screen and (min-width: 1024px) {
+            grid-template-areas: 
+              "a b e e"
+              "c d . .";
+            grid-template-columns: 290px 290px 360px;
+            > article {
+              &:nth-child(1) {
+                grid-area: a;
+              }
+              &:nth-child(2) {
+                grid-area: b;
+              }
+              &:nth-child(3) {
+                grid-area: c;
+              }
+              &:nth-child(4) {
+                grid-area: d;
+              }
+              &:nth-child(5) {
+                grid-area: e;
+                position: relative; 
+                > div {
+                  width: 360px;
+                  position: absolute;
+                }
+              }
+            }
+          }
+          @media only screen and (min-width: 1366px) { 
+            grid-template-columns: 320px 320px 400px;
+            > article {
+              &:nth-child(5) {
+                > div {
+                  width: 400px;
+                }
+              }
+            }
+          }
+        }
+      `
+    } else if ($mode === 'stock') {    
+      return css` 
+        > section {
+          @media only screen and (min-width: 1024px) {
+            grid-template-columns: ${$type === 'transfer' ? 'repeat(4,290px)' : ($type === 'price' ? 'repeat(2,290px)' : 'repeat(3,290px)')};
+          }
+          @media only screen and (min-width: 1366px) { 
+            grid-template-columns: ${$type === 'transfer' ? 'repeat(4,320px)' : ($type === 'price' ? 'repeat(2,320px)' : 'repeat(3,320px)')};
+          }
         }
       `
     }
-  }}
+  }}  
 `
-export const FigureWraper = styled.figure<{ $size?: string, $mode?: string }>` 
-  margin: 0;
+
+export const SearchDropdownContainer = styled.section`
   position: relative;
-  overflow: hidden;
-  border: 1px solid var(--pri-clr-ln);
-  background-color: var(--pri-clr-bg);
-  border-radius: var(--ter-rd);
-  width: 30px;
-  height: 30px;
-  align-self: start;
-  > img {
-    object-fit: contain;
-    width: 100%;
-    height: 100%;
-    background-color: var(--pri-clr-bg);
+`
+export const SearchResultWrapper = styled.aside`
+  ${dropBase}
+  position: absolute;
+  z-index: 101;
+  top: 34px;
+  width: 100%;
+`
+export const SearchResultList = styled.section`
+  display: block;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: auto;
+  max-height: 300px;
+`
+export const SearchResultItem = styled.div`
+  border-bottom: 1px solid var(--ter-clr-ln);
+  padding: 12px;
+  display: inline-grid;
+  width: 100%;
+  grid-template-columns: 30px auto;
+  grid-gap: 12px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--hg-clr-bg);
+  }
+`
+export const ListAddItemContainer = styled.div`
+  overflow: auto;
+  height: 400px;
+`
+export const SearchWrapperPopup = styled.div`
+  position: relative;
+  margin-top: 16px;
+  padding: 0 16px 16px 16px;
+  border-bottom: 1px solid var(--pri-clr-ln);
+  input {
+    height: 38px;
+  }
+  i:first-child {
+    position: absolute;
+    top: .75em;
+    left: 1.75em;
+    pointer-events: none;
+    z-index: 1;
+  }
+`
+export const PopupAddProductContainer = styled.section`
+  margin-top: 1em;
+` 
+export const PopupCard = styled.section<{ $mode?: string }>`
+  padding: 1em;
+  background-color: var(--sec-clr-bg);
+  margin-bottom: 1em;
+  @media only screen and (min-width: 768px) {
+    padding: 1em 120px;
+  }
+  ${getPopupCardModFunc}
+`
+
+export const PopupExportCardWrapper = styled.article`
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 1.2em;
+  @media only screen and (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
   }
-  ${({ $size }:{ $size?: string }) => {
-    let style = ``;
-    if ($size) {
-      style += ` 
-        width:${$size};  
-        height:${$size};
-      `
-    }
-    return style;
-  }}
 `