forstok-ui-lib 5.9.2 → 5.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/images/icons/cart.svg

@@ -1,17 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_15_35)">
-<rect width="24" height="24" fill="white"/>
-<path d="M5.33331 6H19.8672C20.4687 6 20.9341 6.52718 20.8595 7.12403L20.1095 13.124C20.0469 13.6245 19.6215 14 19.1172 14H16.5555H9.44442H7.99998" stroke="#000000" stroke-linejoin="round"/>
-<path d="M2 4H4.23362C4.68578 4 5.08169 4.30341 5.19924 4.74003L8.30076 16.26C8.41831 16.6966 8.81422 17 9.26638 17H19" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="10" cy="20" r="1" stroke="#000000" stroke-linejoin="round"/>
-<circle cx="17.5" cy="20" r="1" stroke="#000000" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_15_35">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
+<path d="M4.78571 5H18.2251C19.5903 5 20.5542 6.33739 20.1225 7.63246L18.4558 12.6325C18.1836 13.4491 17.4193 14 16.5585 14H6.07142M4.78571 5L4.74531 4.71716C4.60455 3.73186 3.76071 3 2.76541 3H2M4.78571 5L6.07142 14M6.07142 14L6.25469 15.2828C6.39545 16.2681 7.23929 17 8.23459 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM11 19C11 20.1046 10.1046 21 9 21C7.89543 21 7 20.1046 7 19C7 17.8954 7.89543 17 9 17C10.1046 17 11 17.8954 11 19Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/assets/images/icons/person.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM7.07 18.28C7.5 17.38 10.12 16.5 12 16.5C13.88 16.5 16.51 17.38 16.93 18.28C15.57 19.36 13.86 20 12 20C10.14 20 8.43 19.36 7.07 18.28ZM12 14.5C13.46 14.5 16.93 15.09 18.36 16.83C19.38 15.49 20 13.82 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12C4 13.82 4.62 15.49 5.64 16.83C7.07 15.09 10.54 14.5 12 14.5ZM12 6C10.06 6 8.5 7.56 8.5 9.5C8.5 11.44 10.06 13 12 13C13.94 13 15.5 11.44 15.5 9.5C15.5 7.56 13.94 6 12 6ZM10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8C11.17 8 10.5 8.67 10.5 9.5Z" fill="#000000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM7.07 18.28C7.5 17.38 10.12 16.5 12 16.5C13.88 16.5 16.51 17.38 16.93 18.28C15.57 19.36 13.86 20 12 20C10.14 20 8.43 19.36 7.07 18.28ZM12 14.5C13.46 14.5 16.93 15.09 18.36 16.83C19.38 15.49 20 13.82 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12C4 13.82 4.62 15.49 5.64 16.83C7.07 15.09 10.54 14.5 12 14.5ZM12 6C10.06 6 8.5 7.56 8.5 9.5C8.5 11.44 10.06 13 12 13C13.94 13 15.5 11.44 15.5 9.5C15.5 7.56 13.94 6 12 6ZM10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8C11.17 8 10.5 8.67 10.5 9.5Z" fill="#8c969a"/>
 </svg>

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

@@ -576,7 +576,7 @@ const getTabsWrapperModFunc =({ $mode }:{ $mode?: string }) => {
 const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: string, $isBorder?: boolean, $isPopup?: boolean }) => {
   let style = `
     ${TableItemColumn} {
-      width: 960px;
+      width: 100%;
       border-bottom: 1px solid var(--pri-clr-ln);
       &:first-child {
         border-bottom: 1px solid var(--sec-clr-ln);
@@ -1040,10 +1040,10 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
     style += `
       ${TableItemColumn} {
         &[role=rowheader] {
-          grid-template-columns: 310px 270px var(--qty-pd20); 
+          grid-template-columns: 270px 270px var(--qty-pd20); 
         }
         &[role=row] {
-          grid-template-columns: 310px auto; 
+          grid-template-columns: 270px auto; 
         }
         &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
         ._refCollapse > div, 
@@ -1063,7 +1063,16 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
         ._refCollapseContainer > div {
           grid-template-columns: 270px var(--qty-pd20);
         }
-        
+      }
+      @media only screen and (min-width: 1024px) {
+        ${TableItemColumn} {
+          &[role=rowheader] {
+            grid-template-columns: 310px 270px var(--qty-pd20); 
+          }
+          &[role=row] {
+            grid-template-columns: 310px auto; 
+          }
+        }
       }
     `
   }
@@ -1775,10 +1784,6 @@ export const HeaderContainer = styled.aside`
 `
 export const TabsContainer = styled.section<{ $mode?: string }>`
   width: 100%;
-  @media only screen and (max-width: 767.9px) {
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
   ${({ $mode }:{ $mode?: string }) => {
     if ($mode === 'master-listing') {
       return css` 

package/src/components/button/styles.ts

@@ -1,11 +1,4 @@
 import styled, { css } from 'styled-components';
-import IconArrowDownload from '../../assets/images/icons/arrow-download.svg';
-import IconArrowUpload from '../../assets/images/icons/arrow-white-upload.svg';
-import IconDotted from '../../assets/images/icons/dotted.svg';
-import IconClose from '../../assets/images/icons/close.svg';
-import IconCloseWhite from '../../assets/images/icons/close-white.svg';
-import IconFilter from '../../assets/images/icons/filter.svg';
-import IconCalendar from '../../assets/images/icons/calendar.svg';
 
 const IconStyles = css`
   display: inline-block;
@@ -129,7 +122,7 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
       padding: 8px;
       background-color: var(--mt-clr-bg__fc);
       &:before { 
-        content: url(${IconDotted});
+        content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/dotted.svg');
         height: 14px;
         width: 14px;
         ${IconStyles}
@@ -139,7 +132,7 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
     style += `
       background-color: transparent;
       &:before { 
-        content: url(${IconClose});
+        content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/close.svg');
         width: 12px;
         ${IconStyles}
       }  
@@ -148,7 +141,7 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
     style += `
       background-color: transparent;
       &:before { 
-        content: url(${IconCloseWhite});
+        content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/close-white.svg');
         width: 8px;
         ${IconStyles}
       }  
@@ -183,7 +176,7 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
     if ($iconLeft === 'export') {
       style += `
         &:before { 
-          content: url(${IconArrowDownload}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-download.svg'); 
           position: absolute;
           left: 12px;
           top: 7px;
@@ -194,7 +187,7 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
     } else if ($iconLeft === 'import') {
       style += `
         &:before { 
-          content: url(${IconArrowUpload}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-white-upload.svg'); 
           position: absolute;
           left: 50%;
           top: 8px;
@@ -206,7 +199,7 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
     } else if ($iconLeft === 'filter') {
       style += `
         &:before { 
-          content: url(${IconFilter}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/filter.svg'); 
           position: absolute;
           left: 12px;
           top: 50%;
@@ -218,7 +211,7 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
     } else if ($iconLeft === 'calendar') {
       style += `
         &:before { 
-          content: url(${IconCalendar}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/calendar.svg'); 
           position: absolute;
           left: 12px;
           top: 50%;

package/src/components/date/index.tsx

@@ -1,7 +1,6 @@
 import { forwardRef, useState, useEffect } from 'react';
 import DatePicker from 'react-datepicker';
 import moment from 'moment';
-import './react.datepicker.css';
 import { DateContainer, DateIndicatorContainer } from './styles';
 import type { TState } from '../../typeds/base.typed'
 

package/src/components/icon/styles.ts

@@ -1,38 +1,5 @@
 import type { MouseEvent } from 'react';
 import styled, { css } from 'styled-components';
-import IconArrowLeftBlue from '../../assets/images/icons/arrow-left-blue.svg';
-import IconSearch from '../../assets/images/icons/search.svg';
-import IconCheckGrey from '../../assets/images/icons/checkmark-tick-grey.svg';
-import IconCheck from '../../assets/images/icons/checkmark-tick.svg';
-import IconEdit from '../../assets/images/icons/edit.svg';
-import IconArrow from '../../assets/images/icons/arrow.svg';
-import IconArrowUpload from '../../assets/images/icons/arrow-upload.svg'
-import IconDiscount from '../../assets/images/icons/discount.svg';
-import IconCash from '../../assets/images/icons/cash.svg';
-import IconCredit from '../../assets/images/icons/credit.svg';
-import IconDebit from '../../assets/images/icons/debit.svg';
-import IconBank from '../../assets/images/icons/bank.svg';
-import IconQris from '../../assets/images/icons/qris.svg';
-import IconWallet from '../../assets/images/icons/wallet.svg';
-import IconDelivery from '../../assets/images/icons/delivery.svg';
-import IconSuccess from '../../assets/images/icons/success.svg';
-import IconEmail from '../../assets/images/icons/email.svg';
-import IconPrint from '../../assets/images/icons/print.svg';
-import IconWarning from '../../assets/images/icons/warning.svg';
-import IconAlert from '../../assets/images/icons/alert.svg';
-import IconBarcode from '../../assets/images/icons/barcode.svg';
-import IconTrash from '../../assets/images/icons/trash.svg'
-import IconArrowLeft from '../../assets/images/icons/arrow-left.svg'
-import IconArrowLeftDouble from '../../assets/images/icons/arrow-left-double.svg'
-import IconArrowRight from '../../assets/images/icons/arrow-right.svg'
-import IconArrowRightDouble from '../../assets/images/icons/arrow-right-double.svg'
-import IconCalendar from '../../assets/images/icons/calendar.svg'
-import IconQuestion from '../../assets/images/icons/question.svg';
-import IconSortby from '../../assets/images/icons/sortby.svg';
-import IconNotificationDownload from '../../assets/images/icons/notif-download-white.svg';
-import IconNotificationUpload from '../../assets/images/icons/notif-upload-white.svg';
-import IconBar from '../../assets/images/icons/humberbars.svg';
-import IconClose from '../../assets/images/icons/close.svg';
 import IconPerson from '../../assets/images/icons/person.svg';
 import IconCart from '../../assets/images/icons/cart.svg';
 
@@ -54,196 +21,196 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
     case 'search': 
       style += `
         &:before { 
-          content: url(${IconSearch}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/search.svg'); 
         }
       `
       break;
     case 'check': 
       style += `
         &:before { 
-          content: url(${IconCheck}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/checkmark-tick.svg'); 
         }
       `
       break;
     case 'check-grey': 
       style += `
         &:before { 
-          content: url(${IconCheckGrey}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/checkmark-tick-grey.svg'); 
         }
       `
       break;   
     case 'arrow-left-blue': 
       style += `
         &:before { 
-          content: url(${IconArrowLeftBlue}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left-blue.svg'); 
         }
       `
       break;
     case 'edit': 
       style += `
         &:before { 
-          content: url(${IconEdit}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/edit.svg'); 
         }
       `
       break;
     case 'arrow': 
       style += `
         &:before { 
-          content: url(${IconArrow}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow.svg'); 
         }
       `
       break;
     case 'discount': 
       style += `
         &:before { 
-          content: url(${IconDiscount}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/discount.svg'); 
         }
       `
       break;  
     case 'cash': 
       style += `
         &:before { 
-          content: url(${IconCash}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/cash.svg'); 
         }
       `
       break; 
     case 'credit': 
       style += `
         &:before { 
-          content: url(${IconCredit}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/credit.svg'); 
         }
       `
       break; 
     case 'debit': 
       style += `
         &:before { 
-          content: url(${IconDebit}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/debit.svg'); 
         }
       `
       break; 
     case 'bank': 
       style += `
         &:before { 
-          content: url(${IconBank}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/bank.svg'); 
         }
       `
       break; 
     case 'qris': 
       style += `
         &:before { 
-          content: url(${IconQris}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/qris.svg'); 
         }
       `
       break; 
     case 'wallet': 
       style += `
         &:before { 
-          content: url(${IconWallet}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/wallet.svg'); 
         }
       `
       break; 
     case 'delivery': 
       style += `
         &:before { 
-          content: url(${IconDelivery}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/delivery.svg'); 
         }
       `
       break;  
     case 'success': 
       style += `
         &:before { 
-          content: url(${IconSuccess}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/success.svg'); 
         }
       `
       break;  
     case 'email': 
       style += `
         &:before { 
-          content: url(${IconEmail}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/email.svg'); 
         }
       `
       break;  
     case 'print': 
       style += `
         &:before { 
-          content: url(${IconPrint}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/print.svg'); 
         }
       `
       break;  
     case 'warning': 
       style += `
         &:before { 
-          content: url(${IconWarning}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/warning.svg'); 
         }
       `
       break; 
     case 'alert': 
       style += `
         &:before { 
-          content: url(${IconAlert}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/alert.svg'); 
         }
       `
       break;
     case 'barcode': 
       style += `
         &:before { 
-          content: url(${IconBarcode}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/barcode.svg'); 
         }
       `
       break; 
     case 'arrow-upload': 
       style += `
         &:before { 
-          content: url(${IconArrowUpload}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-upload.svg'); 
         }
       `
       break;
     case 'trash': 
       style += `
         &:before { 
-          content: url(${IconTrash}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/trash.svg'); 
         }
       `
       break;
     case 'arrow-left': 
       style += `
         &:before { 
-          content: url(${IconArrowLeft}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left.svg'); 
         }
       `
       break;
     case 'arrow-left-double': 
       style += `
         &:before { 
-          content: url(${IconArrowLeftDouble}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left-double.svg'); 
         }
       `
       break;
     case 'arrow-right': 
       style += `
         &:before { 
-          content: url(${IconArrowRight}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-right.svg'); 
         }
       `
       break;
     case 'arrow-right-double': 
       style += `
         &:before { 
-          content: url(${IconArrowRightDouble}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-right-double.svg'); 
         }
       `
       break;
     case 'calendar': 
       style += `
         &:before { 
-          content: url(${IconCalendar}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/calendar.svg'); 
         }
       `
       break;
     case 'question': 
       style += `
         &:before { 
-          content: url(${IconQuestion}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/question.svg'); 
           filter: grayscale(100%);
         }
       `
@@ -251,7 +218,7 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
     case 'sortby': 
       style += `
         &:before { 
-          content: url(${IconSortby}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/sortby.svg'); 
         }
       `
       break;
@@ -259,26 +226,26 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
       style += `
         ${NotificationStyled}
         &:before { 
-          content: url(${IconNotificationDownload}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/notif-download-white.svg'); 
         }`
       break;
     case 'NotificationUpload' :
       style += `
         ${NotificationStyled}
         &:before { 
-          content: url(${IconNotificationUpload}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/notif-upload-white.svg'); 
         }`
       break;
     case 'bar': 
       style += `
         &:before { 
-          content: url(${IconBar}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/humberbars.svg'); 
         }`
       break;
     case 'close': 
       style += `
         &:before { 
-          content: url(${IconClose}); 
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/close.svg'); 
         }`
       break;
     case 'person': 

package/src/components/link/styles.ts

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
 import { multiElipsis } from '../../assets/stylesheets/bases.styles';
-import IconXls from '../../assets/images/icons/xls.svg';
 
 const ClearStyles = css`
   color: var(--pri-clr-lnk);
@@ -140,7 +139,7 @@ const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, $iconRight
       position: relative;
       padding-right: 21px;
       &:before { 
-        content: url(${IconXls}); 
+        content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/xls.svg'); 
         position: absolute;
         right: 0px;
         top: -4px;

package/src/components/masterTable/styles.tsx

@@ -1,7 +1,5 @@
 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;
@@ -103,7 +101,7 @@ const commonCSSLists = css`
           background-color: var(--ov-clr-bg);
         }
         &::after { 
-          content: url(${IconEditWhite});
+          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/edit-white.svg');
           height: 14px
           width: 14px;
           display: inline-block;
@@ -120,7 +118,7 @@ const commonCSSLists = css`
       border: 1px solid rgba(0, 0, 0, .04);
       cursor: default;
       &::after { 
-        content: url(${IconLoadingRed});
+        content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/loading-red.svg');
         height: 14px;
         width: 14px;
         display: inline-block;

package/src/components/message/styles.ts

@@ -1,8 +1,5 @@
 import styled, { css } from 'styled-components';
 import { dropBase } from '../../assets/stylesheets/bases.styles';
-import IconCheck from '../../assets/images/icons/check-white.svg';
-import IconWarning from '../../assets/images/icons/warning.svg';
-import IconWarningWhite from '../../assets/images/icons/warning-white.svg';
 
 const RightButtonStyles = css`
   button {
@@ -47,7 +44,7 @@ const getMessageContentModifiedStyled = ({ $type }:{ $type?: string }) => {
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            content: url(${IconCheck}); 
+            content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/check-white.svg'); 
           }
         }
         ${RightButtonStyles}
@@ -62,7 +59,7 @@ const getMessageContentModifiedStyled = ({ $type }:{ $type?: string }) => {
             height: 1em;
             top: 0;
             left: 0;
-            content: url(${IconWarningWhite}); 
+            content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/warning-white.svg'); 
           }
         }
         ${RightButtonStyles}
@@ -77,7 +74,7 @@ const getMessageContentModifiedStyled = ({ $type }:{ $type?: string }) => {
             height: 1em;
             top: 0;
             left: 0;
-            content: url(${IconWarningWhite}); 
+            content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/warning-white.svg'); 
           }
         }
         ${RightButtonStyles}
@@ -93,7 +90,7 @@ const getMessageContentModifiedStyled = ({ $type }:{ $type?: string }) => {
           &:before { 
             width: 21px;
             height: 21px;
-            content: url(${IconWarning}); 
+            content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/warning.svg'); 
           }
         }
         span {

package/src/components/radio/styles.ts

@@ -1,7 +1,5 @@
 import styled, { css } from 'styled-components'
 
-import IconCheckmarkTick from '../../assets/images/icons/checkmark-tick.svg'
-
 export const RadioContainer = styled.div`
   display: grid;
   grid-auto-flow: column;
@@ -75,7 +73,7 @@ export const RadioInput = styled.input<{ $mode?: string }>`
             background: none;
           }
           &:before {
-            content: url(${IconCheckmarkTick});
+            content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/checkmark-tick.svg');
             width: 14px;
           }
         }

package/src/components/upload/styles.tsx

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import IconRedUpload from '../../assets/images/icons/arrow-red-upload.svg';
 
 const IconStyles = css`
   display: inline-block;
@@ -48,7 +47,7 @@ export const UploadIcon = styled.i`
   left: 10px;
   &:before { 
     ${IconStyles}
-    content: url(${IconRedUpload});
+    content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-red-upload.svg');
     width: 12px;
   }  
 `
@@ -120,7 +119,7 @@ export const UploadDragDropFileName = styled.div`
 `
 export const UploadDragDropIcon = styled.i`
   &:before { 
-    content: url(${IconRedUpload});
+    content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-red-upload.svg');
     width: 14px;
     ${IconStyles}
   }