forstok-ui-lib 5.11.11 → 5.11.13

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, AnchorHTMLAttributes, MouseEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent, ChangeEvent, DragEvent, InputHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, RefObject, ImgHTMLAttributes, JSX, TextareaHTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode, AnchorHTMLAttributes, MouseEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent, ChangeEvent, DragEvent, ClipboardEvent, InputHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, RefObject, ImgHTMLAttributes, JSX, TextareaHTMLAttributes } from 'react';
 import { OnChangeValue, ActionMeta, OptionProps, StylesConfig, CSSObjectWithLabel, ControlProps, GroupBase, SingleValueProps, MenuListProps } from 'react-select';
 export { components } from 'react-select';
 import { CSSObject } from '@emotion/serialize';
@@ -54,6 +54,7 @@ type TChangeEvent = (e: ChangeEvent) => void;
 type TDragEvent = (e: DragEvent) => void;
 type TEnterEvent = (e: KeyboardEvent<HTMLInputElement | HTMLElement> | FocusEvent<HTMLInputElement | HTMLElement | Element> | MouseEvent<HTMLElement>) => void;
 type TKeyboadEvent = (e: KeyboardEvent<HTMLInputElement>) => void;
+type TPasteEvent<T> = (e: ClipboardEvent<T>) => void;
 type TPage = {
     totalCount: number;
     totalPageCount: number;
@@ -995,4 +996,4 @@ declare const configDateRange: {
     minDate: string;
 };
 
-export { BoxContainer, BreadcrumbContainer, BulkActionWrapper, ButtonComponent, ButtonGroup, ButtonLabel, CardContainer, CardWrapper, CheckboxComponent, CollapseContainer, ContentLoaderAccountsList, ContentLoaderActivityList, ContentLoaderAddition, ContentLoaderAnalyticsMenu, ContentLoaderCategoryList, ContentLoaderChatAccounts, ContentLoaderChatMessages, ContentLoaderChatProducts, ContentLoaderChatStores, ContentLoaderDashboardCard, ContentLoaderEditBundle, ContentLoaderFilterCategories, ContentLoaderFilters, ContentLoaderInvoiceListPaymentreceiveDetail, ContentLoaderMasterBundleDetail, ContentLoaderMasterDetail, ContentLoaderMasterList, ContentLoaderMasterListingDetail, ContentLoaderNonOrderList, ContentLoaderNotifUpdate, ContentLoaderOneLinePromotion, ContentLoaderOnlyBodyDashboardCard, ContentLoaderOnlyBodyTableList, ContentLoaderOnlyHeaderTableList, ContentLoaderOrderDetail, ContentLoaderOrderList, ContentLoaderPOSCategory, ContentLoaderPOSItem, ContentLoaderPOSStore, ContentLoaderPagination, ContentLoaderPopupBundle, ContentLoaderPopupChooseStore, ContentLoaderPopupLinkedListing, ContentLoaderPopupListOrder, ContentLoaderPopupPaymentReceive, ContentLoaderPopupPaymentReceived, ContentLoaderPopupPicklist, ContentLoaderPopupReadyToShip, ContentLoaderPopupStoreSelect, ContentLoaderPosProductDetail, ContentLoaderPromotionHover, ContentLoaderReportingDashboard, ContentLoaderSetting, ContentLoaderTableList, CreateContainer, CreateHeaderWrapper, CreateToolWrapper, DateComponent, DateTimeComponent, DateWrapper, DetailItem, DetailItemAction, DetailItemInfo, DetailItemTitle, DetailItemWrapper, DetailList, DetailPanelWrapper, DetailWrapper, DropDownComponent, DropdownAction, DropdownItem, DropdownList, DropdownTitle, ErrorComponent, FigureWraper, FilterButton, FilterContainer, FilterItem, FilterList, FilterListTitle, FilterWrapper, FoContainer, FormContainer, HeaderContainer, IconComponent, IconDot, ImageComponent, InfoGroup, InitialContainer, InputComponent, InputGroup, InputWithRefComponent as InputRefComponent, IsNumeric, ItemPriceLabel, ItemTable, type KeysToSnakeCase, LabelComponent, LeftPanelContainer, LinkComponent, LinkContainer, ListAddItemContainer, ListComponent, ListContainer, ListTable, ListTableContainer, LoadingComponent, MasterTableActionWrapper, MasterTableComponent, MenuList, MessageComponent, MessageQuestionComponent, MultiPanelContainer, MuteLabel, NameLabel, NavChildItem, NavList, NavMainItem, NavMainItemWrapper, NavMobileOverlay, PageButton, PageDot, PageLabel, PageWrapper, PaginationContainer, PanelBody, PanelContainer, PanelWrapper, type PartialBy, PopupAddProductContainer, PopupBoxWrapper, PopupCard, PopupComponent, PopupDownloadWrapper, PopupExportCardWrapper, RadioComponent, RightPanelContainer, SearchDropdownContainer, SearchFilterContainer, SearchFormWrapper, SearchResultItem, SearchResultList, SearchResultWrapper, SearchWrapper, SearchWrapperPopup, SelectComponent, SingleFormContainer, SortByWrapper, SwitchComponent, type TActionMeta, type TCSSObject, type TCSSObjectWithLabel, type TChangeEvent, type TChannel, type TCloseDropdownFunction, type TControlPropsWithVariable, type TCustomStylesWithVariable, type TDetailNew, type TDragEvent, type TDropdown, type TEnterEvent, type TFile, type TFileImage, type TGroupBaseWithVariable, type THeadProps, type THierarchy, type TIdNum, type TIdStr, type TInData, type TInList, type TInListProps, type TInPart, type TInlistPart, type TKeyboadEvent, type TLoadOption, type TMasterProps, type TMessage, type TMessageFunction, type TMessageQuestion, type TMessageQuestionFunction, type TMouseEvent, type TNewFilterPartial, type TNewFunction, type TObjPage, type TObject, type TOnChangeValue, type TOnChangeValueFalse, type TOnChangeValueTrue, type TOption, type TOptionProps, type TOptionPropsWithVariable, type TPage, type TPageObj, type TPagination, type TPopup, type TPopupContainer, type TPopupFunction, type TPopupFunctionGroup, type TPopupFunctionParam, type TPopupOpenFunction, type TSelectAsyncPaginate, type TSingleValueProps, type TState, type TStateCallback, type TTimeFilter, type TUser, TableColumnGroup, TableHeadLabel, TableHeadWrapper, TableItemColumn, TableItemWrapper, TableLabel, TableRightGroup, TableRowGroup, TabsContainer, TabsContent, TabsHeader, TabsItem, TabsList, TabsWrapper, TextAreaComponent, TextAreaWithRefComponent as TextAreaRefComponent, TextComponent, Title, TotalLabel, UploadComponent, UploadDragDropComponent, type WithRequired, abbreviateNumber, boxBase, capitalize, clearList, colorCommonQuantity, colorStockAdjust, colorStockInboundQuantity, colorStockInboundStatus, colorStockQuantity, colorStockStatus, configDateRange, currencyNumber, dateRangeDays, dateRangeStatus, debounce, dropBase, elipsis, errorMessage, errorTitle, evCheckAllValidation, evExecuteError, evGenerateValueMatch, evHighlight, evKeyMapperScanner, evScrollTo, evUpdateInputRc, formLabel, formatNumber, generateMessage, generateMessageQuestion, generateValue, generateValueTable, getSizeContainer, getStorage, headTable, historyType, multiElipsis, pageMasterTable, removeStorage, responseWidth, setStorage, statusColor, thirdElipsis, typePage, unCamelCaseKeys, unescapeHTML, validateByApproveJs };
+export { BoxContainer, BreadcrumbContainer, BulkActionWrapper, ButtonComponent, ButtonGroup, ButtonLabel, CardContainer, CardWrapper, CheckboxComponent, CollapseContainer, ContentLoaderAccountsList, ContentLoaderActivityList, ContentLoaderAddition, ContentLoaderAnalyticsMenu, ContentLoaderCategoryList, ContentLoaderChatAccounts, ContentLoaderChatMessages, ContentLoaderChatProducts, ContentLoaderChatStores, ContentLoaderDashboardCard, ContentLoaderEditBundle, ContentLoaderFilterCategories, ContentLoaderFilters, ContentLoaderInvoiceListPaymentreceiveDetail, ContentLoaderMasterBundleDetail, ContentLoaderMasterDetail, ContentLoaderMasterList, ContentLoaderMasterListingDetail, ContentLoaderNonOrderList, ContentLoaderNotifUpdate, ContentLoaderOneLinePromotion, ContentLoaderOnlyBodyDashboardCard, ContentLoaderOnlyBodyTableList, ContentLoaderOnlyHeaderTableList, ContentLoaderOrderDetail, ContentLoaderOrderList, ContentLoaderPOSCategory, ContentLoaderPOSItem, ContentLoaderPOSStore, ContentLoaderPagination, ContentLoaderPopupBundle, ContentLoaderPopupChooseStore, ContentLoaderPopupLinkedListing, ContentLoaderPopupListOrder, ContentLoaderPopupPaymentReceive, ContentLoaderPopupPaymentReceived, ContentLoaderPopupPicklist, ContentLoaderPopupReadyToShip, ContentLoaderPopupStoreSelect, ContentLoaderPosProductDetail, ContentLoaderPromotionHover, ContentLoaderReportingDashboard, ContentLoaderSetting, ContentLoaderTableList, CreateContainer, CreateHeaderWrapper, CreateToolWrapper, DateComponent, DateTimeComponent, DateWrapper, DetailItem, DetailItemAction, DetailItemInfo, DetailItemTitle, DetailItemWrapper, DetailList, DetailPanelWrapper, DetailWrapper, DropDownComponent, DropdownAction, DropdownItem, DropdownList, DropdownTitle, ErrorComponent, FigureWraper, FilterButton, FilterContainer, FilterItem, FilterList, FilterListTitle, FilterWrapper, FoContainer, FormContainer, HeaderContainer, IconComponent, IconDot, ImageComponent, InfoGroup, InitialContainer, InputComponent, InputGroup, InputWithRefComponent as InputRefComponent, IsNumeric, ItemPriceLabel, ItemTable, type KeysToSnakeCase, LabelComponent, LeftPanelContainer, LinkComponent, LinkContainer, ListAddItemContainer, ListComponent, ListContainer, ListTable, ListTableContainer, LoadingComponent, MasterTableActionWrapper, MasterTableComponent, MenuList, MessageComponent, MessageQuestionComponent, MultiPanelContainer, MuteLabel, NameLabel, NavChildItem, NavList, NavMainItem, NavMainItemWrapper, NavMobileOverlay, PageButton, PageDot, PageLabel, PageWrapper, PaginationContainer, PanelBody, PanelContainer, PanelWrapper, type PartialBy, PopupAddProductContainer, PopupBoxWrapper, PopupCard, PopupComponent, PopupDownloadWrapper, PopupExportCardWrapper, RadioComponent, RightPanelContainer, SearchDropdownContainer, SearchFilterContainer, SearchFormWrapper, SearchResultItem, SearchResultList, SearchResultWrapper, SearchWrapper, SearchWrapperPopup, SelectComponent, SingleFormContainer, SortByWrapper, SwitchComponent, type TActionMeta, type TCSSObject, type TCSSObjectWithLabel, type TChangeEvent, type TChannel, type TCloseDropdownFunction, type TControlPropsWithVariable, type TCustomStylesWithVariable, type TDetailNew, type TDragEvent, type TDropdown, type TEnterEvent, type TFile, type TFileImage, type TGroupBaseWithVariable, type THeadProps, type THierarchy, type TIdNum, type TIdStr, type TInData, type TInList, type TInListProps, type TInPart, type TInlistPart, type TKeyboadEvent, type TLoadOption, type TMasterProps, type TMessage, type TMessageFunction, type TMessageQuestion, type TMessageQuestionFunction, type TMouseEvent, type TNewFilterPartial, type TNewFunction, type TObjPage, type TObject, type TOnChangeValue, type TOnChangeValueFalse, type TOnChangeValueTrue, type TOption, type TOptionProps, type TOptionPropsWithVariable, type TPage, type TPageObj, type TPagination, type TPasteEvent, type TPopup, type TPopupContainer, type TPopupFunction, type TPopupFunctionGroup, type TPopupFunctionParam, type TPopupOpenFunction, type TSelectAsyncPaginate, type TSingleValueProps, type TState, type TStateCallback, type TTimeFilter, type TUser, TableColumnGroup, TableHeadLabel, TableHeadWrapper, TableItemColumn, TableItemWrapper, TableLabel, TableRightGroup, TableRowGroup, TabsContainer, TabsContent, TabsHeader, TabsItem, TabsList, TabsWrapper, TextAreaComponent, TextAreaWithRefComponent as TextAreaRefComponent, TextComponent, Title, TotalLabel, UploadComponent, UploadDragDropComponent, type WithRequired, abbreviateNumber, boxBase, capitalize, clearList, colorCommonQuantity, colorStockAdjust, colorStockInboundQuantity, colorStockInboundStatus, colorStockQuantity, colorStockStatus, configDateRange, currencyNumber, dateRangeDays, dateRangeStatus, debounce, dropBase, elipsis, errorMessage, errorTitle, evCheckAllValidation, evExecuteError, evGenerateValueMatch, evHighlight, evKeyMapperScanner, evScrollTo, evUpdateInputRc, formLabel, formatNumber, generateMessage, generateMessageQuestion, generateValue, generateValueTable, getSizeContainer, getStorage, headTable, historyType, multiElipsis, pageMasterTable, removeStorage, responseWidth, setStorage, statusColor, thirdElipsis, typePage, unCamelCaseKeys, unescapeHTML, validateByApproveJs };

package/dist/index.js

@@ -135,7 +135,22 @@
   top: 50%;
   transform: translateY(-50%);
   color: var(--mt-clr);
-`,se=t=>{var n,r,{$mode:i,$aliasLabel:a,$isError:o,$iconLeft:s,$iconRight:c,reset:d,setReset:u,isForceUpdate:p,setForceUpdate:h,evChange:g,evBlur:f,isField:m,evChangeCustom:y,evEnter:b,evKeyUp:v}=t,w=l(t,["$mode","$aliasLabel","$isError","$iconLeft","$iconRight","reset","setReset","isForceUpdate","setForceUpdate","evChange","evBlur","isField","evChangeCustom","evEnter","evKeyUp"]);const{type:C,name:k,defaultValue:I,defaultChecked:A}=w,S="currency"===i?z(null!==(n=null==I?void 0:I.toString())&&void 0!==n?n:""):null!==(r=null==I?void 0:I.toString())&&void 0!==r?r:"",[j,D]=e.useState(S),[E,M]=e.useState(A||!1);e.useEffect((()=>{var e,t;if(p){const n="currency"===i?z(null!==(e=null==I?void 0:I.toString())&&void 0!==e?e:""):null!==(t=null==I?void 0:I.toString())&&void 0!==t?t:"";D(n),M(A||!1),h&&h(!1)}d&&(D(""),M(!1),u&&u(!1))}),[p,h,d,u,I,A,M,i]);const T=e=>{const t=e.target.value;D(t)};let N=Object.assign({},w);delete N.defaultValue,delete N.defaultChecked;const O=x.jsx(ie,Object.assign({$mode:i,$isError:o,$iconLeft:s,$iconRight:c,checked:E,value:j,onChange:e=>{T(e),g&&g(e)},onBlur:e=>{T(e),(e=>{if(f&&f(e),m&&b&&b(e),m&&k){const t="number"===C?parseInt(e.target.value):"currency"===i?e.target.value?parseInt(z(e.target.value,!1)):null:e.target.value.trim();y&&y(k,t)}})(e)},onKeyUp:e=>{v&&v(e),(e=>{"currency"===i&&(e.currentTarget.value=z(e.currentTarget.value)),"Enter"===e.key&&(e.preventDefault(),m&&b&&b(e))})(e)}},("number"===C||"currency"===i)&&{onKeyPress:e=>{const t=e.target;return"number"!==C&&"currency"!==i||(isNaN(Number(e.key))||void 0===e.key||""===e.key)&&e.preventDefault(),"currency"!==i||((1!==t.value.length||"0"!==e.key||"0"!==t.value)&&" "!==e.key||void e.preventDefault())}},"number"===C&&{onPaste:e=>{const t=(e.clipboardData||window.clipboardData).getData("text").replace(/[^0-9]/g,"");e.preventDefault(),document.execCommand("insertText",!1,t)}},"number"===C&&{onFocus:e=>e.target.addEventListener("wheel",(function(e){e.preventDefault()}),{passive:!1})},"number"===C&&{min:"0"},a&&{$aliasLabel:a},N));return"currency"===i?x.jsxs(ae,{children:[O,x.jsxs(oe,{children:[a||"","Rp"]})]}):O},le=e.forwardRef(((e,t)=>{var{$mode:n,$isError:r,$iconLeft:i,$iconRight:a}=e,o=l(e,["$mode","$isError","$iconLeft","$iconRight"]);const{type:s}=o,c=x.jsx(ie,Object.assign({ref:t,$mode:n,$isError:r,$iconLeft:i,$iconRight:a,onKeyUp:e=>{(e=>{"currency"===n&&(e.currentTarget.value=z(e.currentTarget.value))})(e)}},("number"===s||"currency"===n)&&{onKeyPress:e=>{const t=e.target;return"number"!==s&&"currency"!==n||(isNaN(Number(e.key))||void 0===e.key||""===e.key)&&e.preventDefault(),"currency"!==n||((1!==t.value.length||"0"!==e.key||"0"!==t.value)&&" "!==e.key||void e.preventDefault())}},"number"===s&&{onPaste:e=>{const t=(e.clipboardData||window.clipboardData).getData("text").replace(/[^0-9]/g,"");e.preventDefault(),document.execCommand("insertText",!1,t)}},"number"===s&&{onFocus:e=>e.target.addEventListener("wheel",(function(e){e.preventDefault()}),{passive:!1})},"number"===s&&{min:"0"},o));return"currency"===n?x.jsxs(ae,{children:[c,x.jsx(oe,{children:"Rp"})]}):c})),ce=t.css`
+`;o.default.input`
+  text-align: center;
+  height: 40px;
+  width: 38px;
+  font-size: 20px;
+  margin-right: 5px;
+  &:last-child {
+    margin-right: 0;
+  }
+  @media only screen and (min-width: 768px) {
+    height: 55px;
+    width: 45px;
+    font-size: 28px;
+    margin-right: 16px;
+  }
+`;const se=t=>{var n,r,{$mode:i,$aliasLabel:a,$isError:o,$iconLeft:s,$iconRight:c,reset:d,setReset:u,isForceUpdate:p,setForceUpdate:h,evChange:g,evBlur:f,isField:m,evChangeCustom:y,evEnter:b,evKeyUp:v}=t,w=l(t,["$mode","$aliasLabel","$isError","$iconLeft","$iconRight","reset","setReset","isForceUpdate","setForceUpdate","evChange","evBlur","isField","evChangeCustom","evEnter","evKeyUp"]);const{type:C,name:k,defaultValue:I,defaultChecked:A}=w,S="currency"===i?z(null!==(n=null==I?void 0:I.toString())&&void 0!==n?n:""):null!==(r=null==I?void 0:I.toString())&&void 0!==r?r:"",[j,D]=e.useState(S),[E,M]=e.useState(A||!1);e.useEffect((()=>{var e,t;if(p){const n="currency"===i?z(null!==(e=null==I?void 0:I.toString())&&void 0!==e?e:""):null!==(t=null==I?void 0:I.toString())&&void 0!==t?t:"";D(n),M(A||!1),h&&h(!1)}d&&(D(""),M(!1),u&&u(!1))}),[p,h,d,u,I,A,M,i]);const T=e=>{const t=e.target.value;D(t)};let N=Object.assign({},w);delete N.defaultValue,delete N.defaultChecked;const O=x.jsx(ie,Object.assign({$mode:i,$isError:o,$iconLeft:s,$iconRight:c,checked:E,value:j,onChange:e=>{T(e),g&&g(e)},onBlur:e=>{T(e),(e=>{if(f&&f(e),m&&b&&b(e),m&&k){const t="number"===C?parseInt(e.target.value):"currency"===i?e.target.value?parseInt(z(e.target.value,!1)):null:e.target.value.trim();y&&y(k,t)}})(e)},onKeyUp:e=>{v&&v(e),(e=>{"currency"===i&&(e.currentTarget.value=z(e.currentTarget.value)),"Enter"===e.key&&(e.preventDefault(),m&&b&&b(e))})(e)}},("number"===C||"currency"===i)&&{onKeyPress:e=>{const t=e.target;return"number"!==C&&"currency"!==i||(isNaN(Number(e.key))||void 0===e.key||""===e.key)&&e.preventDefault(),"currency"!==i||((1!==t.value.length||"0"!==e.key||"0"!==t.value)&&" "!==e.key||void e.preventDefault())}},"number"===C&&{onPaste:e=>{const t=(e.clipboardData||window.clipboardData).getData("text").replace(/[^0-9]/g,"");e.preventDefault(),document.execCommand("insertText",!1,t)}},"number"===C&&{onFocus:e=>e.target.addEventListener("wheel",(function(e){e.preventDefault()}),{passive:!1})},"number"===C&&{min:"0"},a&&{$aliasLabel:a},N));return"currency"===i?x.jsxs(ae,{children:[O,x.jsxs(oe,{children:[a||"","Rp"]})]}):O},le=e.forwardRef(((e,t)=>{var{$mode:n,$isError:r,$iconLeft:i,$iconRight:a}=e,o=l(e,["$mode","$isError","$iconLeft","$iconRight"]);const{type:s}=o,c=x.jsx(ie,Object.assign({ref:t,$mode:n,$isError:r,$iconLeft:i,$iconRight:a,onKeyUp:e=>{(e=>{"currency"===n&&(e.currentTarget.value=z(e.currentTarget.value))})(e)}},("number"===s||"currency"===n)&&{onKeyPress:e=>{const t=e.target;return"number"!==s&&"currency"!==n||(isNaN(Number(e.key))||void 0===e.key||""===e.key)&&e.preventDefault(),"currency"!==n||((1!==t.value.length||"0"!==e.key||"0"!==t.value)&&" "!==e.key||void e.preventDefault())}},"number"===s&&{onPaste:e=>{const t=(e.clipboardData||window.clipboardData).getData("text").replace(/[^0-9]/g,"");e.preventDefault(),document.execCommand("insertText",!1,t)}},"number"===s&&{onFocus:e=>e.target.addEventListener("wheel",(function(e){e.preventDefault()}),{passive:!1})},"number"===s&&{min:"0"},o));return"currency"===n?x.jsxs(ae,{children:[c,x.jsx(oe,{children:"Rp"})]}):c})),ce=t.css`
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -327,7 +342,7 @@
   &:before {
     display: grid;
   }
-  ${({$mode:e,$name:t,$width:n,onClick:r})=>{let i="";switch(t){case"search":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/search.svg'); \n        }\n      ";break;case"check":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/checkmark-tick.svg'); \n        }\n      ";break;case"check-grey":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/checkmark-tick-grey.svg'); \n        }\n      ";break;case"arrow-left-blue":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left-blue.svg'); \n        }\n      ";break;case"edit":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/edit.svg'); \n        }\n      ";break;case"arrow":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow.svg'); \n        }\n      ";break;case"discount":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/discount.svg'); \n        }\n      ";break;case"cash":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/cash.svg'); \n        }\n      ";break;case"credit":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/credit.svg'); \n        }\n      ";break;case"debit":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/debit.svg'); \n        }\n      ";break;case"bank":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/bank.svg'); \n        }\n      ";break;case"qris":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/qris.svg'); \n        }\n      ";break;case"wallet":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/wallet.svg'); \n        }\n      ";break;case"delivery":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/delivery.svg'); \n        }\n      ";break;case"success":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/success.svg'); \n        }\n      ";break;case"email":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/email.svg'); \n        }\n      ";break;case"print":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/print.svg'); \n        }\n      ";break;case"warning":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/warning.svg'); \n        }\n      ";break;case"alert":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/alert.svg'); \n        }\n      ";break;case"barcode":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/barcode.svg'); \n        }\n      ";break;case"arrow-upload":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-upload.svg'); \n        }\n      ";break;case"trash":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/trash.svg'); \n        }\n      ";break;case"arrow-left":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left.svg'); \n        }\n      ";break;case"arrow-left-double":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left-double.svg'); \n        }\n      ";break;case"arrow-right":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-right.svg'); \n        }\n      ";break;case"arrow-right-double":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-right-double.svg'); \n        }\n      ";break;case"calendar":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/calendar.svg'); \n        }\n      ";break;case"question":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/question.svg'); \n          filter: grayscale(100%);\n        }\n      ";break;case"sortby":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/sortby.svg'); \n        }\n      ";break;case"NotificationDownload":i+=`\n        ${Ie}\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/notif-download-white.svg'); \n        }`;break;case"NotificationUpload":i+=`\n        ${Ie}\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/notif-upload-white.svg'); \n        }`;break;case"bar":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/humberbars.svg'); \n        }";break;case"close":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/close.svg'); \n        }";break;case"person":i+="\n        &:before { \n          content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%22auto%22%20height%3D%22auto%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%202C6.48%202%202%206.48%202%2012C2%2017.52%206.48%2022%2012%2022C17.52%2022%2022%2017.52%2022%2012C22%206.48%2017.52%202%2012%202ZM7.07%2018.28C7.5%2017.38%2010.12%2016.5%2012%2016.5C13.88%2016.5%2016.51%2017.38%2016.93%2018.28C15.57%2019.36%2013.86%2020%2012%2020C10.14%2020%208.43%2019.36%207.07%2018.28ZM12%2014.5C13.46%2014.5%2016.93%2015.09%2018.36%2016.83C19.38%2015.49%2020%2013.82%2020%2012C20%207.59%2016.41%204%2012%204C7.59%204%204%207.59%204%2012C4%2013.82%204.62%2015.49%205.64%2016.83C7.07%2015.09%2010.54%2014.5%2012%2014.5ZM12%206C10.06%206%208.5%207.56%208.5%209.5C8.5%2011.44%2010.06%2013%2012%2013C13.94%2013%2015.5%2011.44%2015.5%209.5C15.5%207.56%2013.94%206%2012%206ZM10.5%209.5C10.5%2010.33%2011.17%2011%2012%2011C12.83%2011%2013.5%2010.33%2013.5%209.5C13.5%208.67%2012.83%208%2012%208C11.17%208%2010.5%208.67%2010.5%209.5Z%22%20fill%3D%22%238c969a%22%2F%3E%3C%2Fsvg%3E); \n        }";break;case"person-red":i+="\n        &:before { \n          content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%22auto%22%20height%3D%22auto%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%202C6.48%202%202%206.48%202%2012C2%2017.52%206.48%2022%2012%2022C17.52%2022%2022%2017.52%2022%2012C22%206.48%2017.52%202%2012%202ZM7.07%2018.28C7.5%2017.38%2010.12%2016.5%2012%2016.5C13.88%2016.5%2016.51%2017.38%2016.93%2018.28C15.57%2019.36%2013.86%2020%2012%2020C10.14%2020%208.43%2019.36%207.07%2018.28ZM12%2014.5C13.46%2014.5%2016.93%2015.09%2018.36%2016.83C19.38%2015.49%2020%2013.82%2020%2012C20%207.59%2016.41%204%2012%204C7.59%204%204%207.59%204%2012C4%2013.82%204.62%2015.49%205.64%2016.83C7.07%2015.09%2010.54%2014.5%2012%2014.5ZM12%206C10.06%206%208.5%207.56%208.5%209.5C8.5%2011.44%2010.06%2013%2012%2013C13.94%2013%2015.5%2011.44%2015.5%209.5C15.5%207.56%2013.94%206%2012%206ZM10.5%209.5C10.5%2010.33%2011.17%2011%2012%2011C12.83%2011%2013.5%2010.33%2013.5%209.5C13.5%208.67%2012.83%208%2012%208C11.17%208%2010.5%208.67%2010.5%209.5Z%22%20fill%3D%22%23fc5c64%22%2F%3E%3C%2Fsvg%3E); \n        }";break;case"cart":i+="\n        &:before { \n          content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%22auto%22%20height%3D%22auto%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.78571%205H18.2251C19.5903%205%2020.5542%206.33739%2020.1225%207.63246L18.4558%2012.6325C18.1836%2013.4491%2017.4193%2014%2016.5585%2014H6.07142M4.78571%205L4.74531%204.71716C4.60455%203.73186%203.76071%203%202.76541%203H2M4.78571%205L6.07142%2014M6.07142%2014L6.25469%2015.2828C6.39545%2016.2681%207.23929%2017%208.23459%2017H17M17%2017C15.8954%2017%2015%2017.8954%2015%2019C15%2020.1046%2015.8954%2021%2017%2021C18.1046%2021%2019%2020.1046%2019%2019C19%2017.8954%2018.1046%2017%2017%2017ZM11%2019C11%2020.1046%2010.1046%2021%209%2021C7.89543%2021%207%2020.1046%207%2019C7%2017.8954%207.89543%2017%209%2017C10.1046%2017%2011%2017.8954%2011%2019Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E); \n        }"}return n&&(i+=`\n      &:before { \n        width: ${n}; \n        height: ${n};\n      }\n    `),r&&(i+="\n      cursor: pointer;\n    "),"filter"===e?i+="\n      position: relative;\n    ":"disabled"===e&&(i+="\n      &, \n      &:before {\n        opacity: .7;\n      }\n    "),i}}
+  ${({$mode:e,$name:t,$width:n,onClick:r})=>{let i="";switch(t){case"search":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/search.svg'); \n        }\n      ";break;case"check":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/checkmark-tick.svg'); \n        }\n      ";break;case"check-grey":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/checkmark-tick-grey.svg'); \n        }\n      ";break;case"arrow-left-blue":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left-blue.svg'); \n        }\n      ";break;case"edit":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/edit.svg'); \n        }\n      ";break;case"arrow":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow.svg'); \n        }\n      ";break;case"discount":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/discount.svg'); \n        }\n      ";break;case"cash":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/cash.svg'); \n        }\n      ";break;case"credit":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/credit.svg'); \n        }\n      ";break;case"debit":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/debit.svg'); \n        }\n      ";break;case"bank":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/bank.svg'); \n        }\n      ";break;case"qris":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/qris.svg'); \n        }\n      ";break;case"wallet":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/wallet.svg'); \n        }\n      ";break;case"delivery":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/delivery.svg'); \n        }\n      ";break;case"success":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/success.svg'); \n        }\n      ";break;case"email":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/email.svg'); \n        }\n      ";break;case"print":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/print.svg'); \n        }\n      ";break;case"warning":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/warning.svg'); \n        }\n      ";break;case"alert":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/alert.svg'); \n        }\n      ";break;case"barcode":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/barcode.svg'); \n        }\n      ";break;case"arrow-upload":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-upload.svg'); \n        }\n      ";break;case"trash":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/trash.svg'); \n        }\n      ";break;case"arrow-left":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left.svg'); \n        }\n      ";break;case"arrow-left-double":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left-double.svg'); \n        }\n      ";break;case"arrow-right":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-right.svg'); \n        }\n      ";break;case"arrow-right-double":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-right-double.svg'); \n        }\n      ";break;case"calendar":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/calendar.svg'); \n        }\n      ";break;case"question":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/question.svg'); \n          filter: grayscale(100%);\n        }\n      ";break;case"sortby":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/sortby.svg'); \n        }\n      ";break;case"NotificationDownload":i+=`\n        ${Ie}\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/notif-download-white.svg'); \n        }`;break;case"NotificationUpload":i+=`\n        ${Ie}\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/notif-upload-white.svg'); \n        }`;break;case"bar":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/humberbars.svg'); \n        }";break;case"close":i+="\n        &:before { \n          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/close.svg'); \n        }";break;case"person":i+="\n        &:before { \n          content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%22auto%22%20height%3D%22auto%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%202C6.48%202%202%206.48%202%2012C2%2017.52%206.48%2022%2012%2022C17.52%2022%2022%2017.52%2022%2012C22%206.48%2017.52%202%2012%202ZM7.07%2018.28C7.5%2017.38%2010.12%2016.5%2012%2016.5C13.88%2016.5%2016.51%2017.38%2016.93%2018.28C15.57%2019.36%2013.86%2020%2012%2020C10.14%2020%208.43%2019.36%207.07%2018.28ZM12%2014.5C13.46%2014.5%2016.93%2015.09%2018.36%2016.83C19.38%2015.49%2020%2013.82%2020%2012C20%207.59%2016.41%204%2012%204C7.59%204%204%207.59%204%2012C4%2013.82%204.62%2015.49%205.64%2016.83C7.07%2015.09%2010.54%2014.5%2012%2014.5ZM12%206C10.06%206%208.5%207.56%208.5%209.5C8.5%2011.44%2010.06%2013%2012%2013C13.94%2013%2015.5%2011.44%2015.5%209.5C15.5%207.56%2013.94%206%2012%206ZM10.5%209.5C10.5%2010.33%2011.17%2011%2012%2011C12.83%2011%2013.5%2010.33%2013.5%209.5C13.5%208.67%2012.83%208%2012%208C11.17%208%2010.5%208.67%2010.5%209.5Z%22%20fill%3D%22%238c969a%22%2F%3E%3C%2Fsvg%3E); \n        }";break;case"person-red":i+="\n        &:before { \n          content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%22auto%22%20height%3D%22auto%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%202C6.48%202%202%206.48%202%2012C2%2017.52%206.48%2022%2012%2022C17.52%2022%2022%2017.52%2022%2012C22%206.48%2017.52%202%2012%202ZM7.07%2018.28C7.5%2017.38%2010.12%2016.5%2012%2016.5C13.88%2016.5%2016.51%2017.38%2016.93%2018.28C15.57%2019.36%2013.86%2020%2012%2020C10.14%2020%208.43%2019.36%207.07%2018.28ZM12%2014.5C13.46%2014.5%2016.93%2015.09%2018.36%2016.83C19.38%2015.49%2020%2013.82%2020%2012C20%207.59%2016.41%204%2012%204C7.59%204%204%207.59%204%2012C4%2013.82%204.62%2015.49%205.64%2016.83C7.07%2015.09%2010.54%2014.5%2012%2014.5ZM12%206C10.06%206%208.5%207.56%208.5%209.5C8.5%2011.44%2010.06%2013%2012%2013C13.94%2013%2015.5%2011.44%2015.5%209.5C15.5%207.56%2013.94%206%2012%206ZM10.5%209.5C10.5%2010.33%2011.17%2011%2012%2011C12.83%2011%2013.5%2010.33%2013.5%209.5C13.5%208.67%2012.83%208%2012%208C11.17%208%2010.5%208.67%2010.5%209.5Z%22%20fill%3D%22%23fc5c64%22%2F%3E%3C%2Fsvg%3E); \n        }";break;case"cart":i+="\n        &:before { \n          content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%22auto%22%20height%3D%22auto%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.78571%205H18.2251C19.5903%205%2020.5542%206.33739%2020.1225%207.63246L18.4558%2012.6325C18.1836%2013.4491%2017.4193%2014%2016.5585%2014H6.07142M4.78571%205L4.74531%204.71716C4.60455%203.73186%203.76071%203%202.76541%203H2M4.78571%205L6.07142%2014M6.07142%2014L6.25469%2015.2828C6.39545%2016.2681%207.23929%2017%208.23459%2017H17M17%2017C15.8954%2017%2015%2017.8954%2015%2019C15%2020.1046%2015.8954%2021%2017%2021C18.1046%2021%2019%2020.1046%2019%2019C19%2017.8954%2018.1046%2017%2017%2017ZM11%2019C11%2020.1046%2010.1046%2021%209%2021C7.89543%2021%207%2020.1046%207%2019C7%2017.8954%207.89543%2017%209%2017C10.1046%2017%2011%2017.8954%2011%2019Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E); \n        }";break;case"back":i+="\n        &:before { \n          content: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022.989%2016.009%22%20style%3D%22enable-background%3Anew%200%200%2022.989%2016.009%3B%20fill%3A%20rgb%2872%2C72%2C72%29%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%20%3Cg%3E%20%20%20%20%3Cpath%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%22%20d%3D%22M21.989%2C7.004H3.393l5.309-5.309c0.388-0.388%2C0.388-1.017%2C0-1.404%20%20%20%20%20%20c-0.388-0.388-1.017-0.388-1.404%2C0L0.342%2C7.247C0.321%2C7.264%2C0.295%2C7.271%2C0.275%2C7.291C0.047%2C7.519-0.03%2C7.829%2C0.01%2C8.127%20%20%20%20%20%20c0.005%2C0.049%2C0.014%2C0.091%2C0.027%2C0.139C0.073%2C8.39%2C0.133%2C8.505%2C0.219%2C8.61c0.026%2C0.033%2C0.026%2C0.077%2C0.057%2C0.108%20%20%20%20%20%20c0.019%2C0.019%2C0.044%2C0.025%2C0.064%2C0.041l6.958%2C6.959c0.388%2C0.388%2C1.017%2C0.388%2C1.404%2C0c0.388-0.388%2C0.388-1.017%2C0-1.404L3.393%2C9.004%20%20%20%20%20%20h18.595c0.552%2C0%2C1-0.448%2C1-1C22.989%2C7.452%2C22.541%2C7.004%2C21.989%2C7.004z%22%3E%3C%2Fpath%3E%20%20%3C%2Fg%3E%3C%2Fsvg%3E); \n        }\n      "}return n&&(i+=`\n      &:before { \n        width: ${n}; \n        height: ${n};\n      }\n    `),r&&(i+="\n      cursor: pointer;\n    "),"filter"===e?i+="\n      position: relative;\n    ":"disabled"===e&&(i+="\n      &, \n      &:before {\n        opacity: .7;\n      }\n    "),i}}
 `,Se=e=>{var{$width:t,$name:n,$mode:r,onClick:i,$isLoading:a=!1}=e,o=l(e,["$width","$name","$mode","onClick","$isLoading"]);return a?x.jsx(ke,{$mode:"small",$position:"center",$shape:"dot",$color:"#fc5c64"}):x.jsx(Ae,Object.assign({$mode:r,$name:n,$width:t,onClick:i},o))};function je({children:t,wrapperId:r="popup-portal"}){const[i,a]=e.useState();return e.useLayoutEffect((()=>{let e=document.getElementById(r),t=!1;return e||(t=!0,e=function(e){const t=document.createElement("div");return t.setAttribute("id",e),document.body.appendChild(t),t}(r)),a(e),()=>{t&&e&&e.parentNode&&e.parentNode.removeChild(e)}}),[r]),void 0===i?x.jsx(x.Fragment,{}):n.createPortal(t,i)}const De=o.default.section`
   ${j}
   position: fixed;