diff --git a/.gitignore b/.gitignore
index c6bba59..c2f78f4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,6 +42,9 @@ build/Release
node_modules/
jspm_packages/
+# build
+build/
+
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
diff --git a/build/index.asset.php b/build/index.asset.php
deleted file mode 100644
index 2d3beee..0000000
--- a/build/index.asset.php
+++ /dev/null
@@ -1 +0,0 @@
- array('wp-block-editor', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '67ce8e610b87a437c3d6');
diff --git a/build/index.js b/build/index.js
deleted file mode 100644
index 572f379..0000000
--- a/build/index.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){"use strict";var e=window.wp.element,t=window.wp.i18n,n=window.wp.components,l=window.wp.data,o=window.wp.coreData;const a=(0,e.createContext)();function r(){return(0,e.useContext)(a)}var i=({children:t})=>{const[n,l]=(0,e.useState)(!1),[o,r]=(0,e.useState)(!1),[i,s]=(0,e.useState)(!1),[c,m]=(0,e.useState)({selectedIcon:"arrowUp",buttonPosition:"center"}),[d,g]=(0,e.useState)({padding:{top:"18px",left:"18px",bottom:"18px",right:"18px"},margin:{top:"30px",left:"30px",bottom:"30px",right:"30px"}}),[u,_]=(0,e.useState)({buttonColor:{default:"#000",hover:"#000000D4"},iconColor:{default:"#fff"}}),[p,b]=(0,e.useState)({radius:"100%"}),[S,E]=(0,e.useState)({}),[h,v]=(0,e.useState)({});return(0,e.createElement)(a.Provider,{value:{enabled:n,setEnabled:l,showNotice:o,setShowNotice:r,disableButton:i,setDisableButton:s,generalSetting:c,setGeneralSetting:m,dimensionSetting:d,setDimensionSetting:g,colorSetting:u,setColorSetting:_,borderSetting:p,setBorderSetting:b,advancedSetting:S,setAdvancedSetting:E,responsive:h,setResponsive:v}},t)},s=function(){const{enabled:a,setEnabled:i,setShowNotice:s,disableButton:c,setDisableButton:m,generalSetting:d,dimensionSetting:g,colorSetting:u,borderSetting:_,advancedSetting:p,responsive:b}=r();return(0,e.useEffect)((()=>{m(!1)}),[a,d,g,u,_,p,b]),(0,e.createElement)(n.Card,null,(0,e.createElement)(n.CardHeader,null,(0,e.createElement)(n.__experimentalHStack,null,(0,e.createElement)(n.__experimentalHStack,{justify:"left"},(0,e.createElement)(n.Icon,{icon:"arrow-up-alt",size:25}),(0,e.createElement)(n.__experimentalHeading,{upperCase:!0},"Go To Top")),(0,e.createElement)(n.__experimentalHStack,null,(0,e.createElement)(n.__experimentalHStack,{justify:"right"},(0,e.createElement)(n.__experimentalText,null,"Enable"),(0,e.createElement)(n.ToggleControl,{__nextHasNoMarginBottom:!0,checked:a,onChange:e=>i(e)})),(0,e.createElement)(n.Button,{label:(0,t.__)("Save"),variant:"primary",style:{padding:"10px 30px"},disabled:c,onClick:()=>{(0,l.dispatch)(o.store).saveEntityRecord("root","site",{go2top:{enabled:a,generalSetting:d,dimensionSetting:g,colorSetting:u,borderSetting:_,advancedSetting:p,responsive:b}}),s(!0),m(!0)}},"Save")))))},c=function(){const{generalSetting:l,dimensionSetting:o,colorSetting:a,borderSetting:i}=r(),{iconSize:s,margin:c,padding:d}=o,{selectedIcon:g,buttonPosition:u}=l,{buttonColor:_,iconColor:p}=a,b=i?.border?.width||"1px",S=i?.border?.style||"solid",E=i?.border?.color||"black",h=i.border?`border: ${b} ${S} ${E}`:"",v=i.radius?`border-radius: ${i.radius}`:"",x=_?.default?`background-color: ${_.default}`:"",C=_?.hover?`background-color: ${_.hover}`:"",w=p?.default?`fill: ${p.default}`:"",f=p?.hover?`fill: ${p.hover}`:"",k=d?`padding: ${d?.top||"0px"} ${d?.left||"0px"} ${d?.bottom||"0px"} ${d?.right||"0px"}`:"",B=c?`margin: ${c?.top||"0px"} ${c?.left||"0px"} ${c?.bottom||"0px"} ${c?.right||"0px"}`:"";return(0,e.createElement)(n.Flex,{justify:u},(0,e.createElement)(n.FlexItem,null,(0,e.createElement)(n.Button,{className:"ls_g2t_preview_button",label:(0,t.__)("Go To Top"),style:{height:"auto"}},(0,e.createElement)(n.Icon,{className:"ls_g2t_preview_icon",icon:m[g],size:s})),(0,e.createElement)("style",null,`\n .components-button.ls_g2t_preview_button{\n ${x};\n ${B};\n ${k};\n ${h};\n ${v};\n }\n .components-button.ls_g2t_preview_button:hover{\n ${C};\n }\n .components-button .ls_g2t_preview_icon{\n ${w}\n }\n .components-button.ls_g2t_preview_button:hover .ls_g2t_preview_icon{\n ${f}\n }\n `)))},m={angleUp:(0,e.createElement)("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 448 512"},(0,e.createElement)("path",{d:"M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"})),anglesUp:(0,e.createElement)("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 448 512"},(0,e.createElement)("path",{d:"M246.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L224 109.3 361.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160zm160 352l-160-160c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L224 301.3 361.4 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z"})),arrowUp:(0,e.createElement)("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 384 512"},(0,e.createElement)("path",{d:"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"})),turnUp:(0,e.createElement)("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 384 512"},(0,e.createElement)("path",{d:"M350 177.5c3.8-8.8 2-19-4.6-26l-136-144C204.9 2.7 198.6 0 192 0s-12.9 2.7-17.4 7.5l-136 144c-6.6 7-8.4 17.2-4.6 26s12.5 14.5 22 14.5h88l0 192c0 17.7-14.3 32-32 32H32c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32l80 0c70.7 0 128-57.3 128-128l0-192h88c9.6 0 18.2-5.7 22-14.5z"}))},d=function(){const{showNotice:t,setShowNotice:l}=r();return t?(0,e.createElement)(n.Snackbar,{className:"ls_g2top_notice",explicitDismiss:!0,onRemove:e=>l(e)},"Settings Saved."):null},g=function(){const{generalSetting:l,setGeneralSetting:o}=r();return(0,e.createElement)(n.PanelBody,{title:"General",initialOpen:!0},(0,e.createElement)(n.__experimentalToggleGroupControl,{label:(0,t.__)("Select an icon"),size:"__unstable-large",isBlock:!0,value:l.selectedIcon,onChange:e=>o({...l,selectedIcon:e})},Object.keys(m).map((t=>(0,e.createElement)(n.__experimentalToggleGroupControlOptionIcon,{key:t,icon:m[t],style:{width:"100%"},label:t,value:t})))),(0,e.createElement)(n.__experimentalToggleGroupControl,{label:(0,t.__)("Icon Position"),isBlock:!0,value:l.buttonPosition,onChange:e=>o({...l,buttonPosition:e})},["Center","Left","Right"].map((t=>(0,e.createElement)(n.__experimentalToggleGroupControlOption,{key:t,label:t,value:t.toLowerCase()})))))},u=function(){const{dimensionSetting:l,setDimensionSetting:o}=r();return(0,e.createElement)(n.__experimentalToolsPanel,{label:(0,t.__)("Dimension")},(0,e.createElement)(n.__experimentalToolsPanelItem,{label:(0,t.__)("Padding"),hasValue:()=>!!l.padding},(0,e.createElement)(n.__experimentalBoxControl,{label:(0,t.__)("Padding"),values:l.padding,onChange:e=>o({...l,padding:e})})),(0,e.createElement)(n.__experimentalToolsPanelItem,{label:(0,t.__)("Margin"),hasValue:()=>!!l.margin},(0,e.createElement)(n.__experimentalBoxControl,{label:(0,t.__)("Margin"),values:l.margin,onChange:e=>o({...l,margin:e})})),(0,e.createElement)(n.__experimentalToolsPanelItem,{label:(0,t.__)("Icon Size"),hasValue:()=>!!l.iconSize},(0,e.createElement)(n.FontSizePicker,{label:(0,t.__)("Icon Size"),fontSizes:[{name:"Small",size:12,slug:"small"},{name:"Medium",size:16,slug:"medium"},{name:"Large",size:22,slug:"large"},{name:"Extra Large",size:26,slug:"extra-large"}],withSlider:!0,value:l.iconSize,onChange:e=>o({...l,iconSize:e})})))};function _({label:t,colorValue:l,onChangeColor:o}){const[a,r]=(0,e.useState)("default");return(0,e.createElement)(n.Dropdown,{popoverProps:{placement:"left"},renderToggle:({isOpen:o,onToggle:a})=>(0,e.createElement)(n.Button,{"aria-expanded":o,onClick:a},(0,e.createElement)(n.__experimentalHStack,{justify:"left"},(0,e.createElement)(n.__experimentalZStack,{offset:10},(0,e.createElement)(n.ColorIndicator,{colorValue:l.default}),(0,e.createElement)(n.ColorIndicator,{colorValue:l.hover})),(0,e.createElement)("text",null,t))),renderContent:()=>(0,e.createElement)(n.TabPanel,{onSelect:e=>r(e),tabs:[{name:"default",title:"Default"},{name:"hover",title:"Hover"}]},(t=>(0,e.createElement)(n.ColorPalette,{__experimentalIsRenderedInSidebar:!0,value:l[t.name]||"",onChange:e=>{o({...l,[t.name]:e})},enableAlpha:!0})))})}var p=function(){const{colorSetting:l,setColorSetting:o}=r();return(0,e.createElement)(n.__experimentalToolsPanel,{label:(0,t.__)("Color"),hasInnerWrapper:!0},(0,e.createElement)("div",{className:"ls_gtp_color_container"},(0,e.createElement)(n.__experimentalToolsPanelItem,{label:(0,t.__)("Button"),hasValue:()=>!!l.buttonColor},(0,e.createElement)(_,{label:(0,t.__)("Button"),colorValue:l.buttonColor,onChangeColor:e=>o({...l,buttonColor:e})})),(0,e.createElement)(n.__experimentalToolsPanelItem,{label:(0,t.__)("Icon"),hasValue:()=>!!l.iconColor},(0,e.createElement)(_,{label:(0,t.__)("Icon"),colorValue:l.iconColor,onChangeColor:e=>o({...l,iconColor:e})}))))},b=window.wp.blockEditor,S=function(){const{borderSetting:l,setBorderSetting:o}=r();return(0,e.createElement)(n.__experimentalToolsPanel,{label:(0,t.__)("Border")},(0,e.createElement)(n.__experimentalToolsPanelItem,{label:(0,t.__)("Border"),hasValue:()=>!!l.border},(0,e.createElement)(n.__experimentalBorderControl,{withSlider:!0,value:l.border,onChange:e=>o({...l,border:e})})),(0,e.createElement)(n.__experimentalToolsPanelItem,{label:(0,t.__)("Radius"),hasValue:()=>!!l.radius},(0,e.createElement)(b.HeightControl,{label:(0,t.__)("Radius"),value:l.radius,onChange:e=>o({...l,radius:e})})))},E=function(){const{advancedSetting:l,setAdvancedSetting:o}=r();return(0,e.createElement)(n.PanelBody,{title:(0,t.__)("Advanced"),initialOpen:!1},(0,e.createElement)(n.__experimentalVStack,{spacing:2},(0,e.createElement)(n.__experimentalNumberControl,{label:(0,t.__)("Scroll offset"),value:l.scrollOffset,onChange:e=>o({...l,scrollOffset:e})}),(0,e.createElement)(n.__experimentalNumberControl,{label:(0,t.__)("Animation Speed"),value:l.animationSpeed,onChange:e=>o({...l,animationSpeed:e})})))},h=function(){const{responsive:l,setResponsive:o}=r();return(0,e.createElement)(n.PanelBody,{title:"Responsive",initialOpen:!1},(0,e.createElement)(n.ToggleControl,{label:(0,t.__)("Hide on Mobile"),checked:l.mobile,onChange:e=>o({...l,mobile:e})}),(0,e.createElement)(n.ToggleControl,{label:(0,t.__)("Hide on Deskptop"),checked:l.desktop,onChange:e=>o({...l,desktop:e})}),(0,e.createElement)(n.ToggleControl,{label:(0,t.__)("Hide on Tablet"),checked:l.tablet,onChange:e=>o({...l,tablet:e})}))},v=function(){return function(){const{setEnabled:t,generalSetting:n,setGeneralSetting:a,dimensionSetting:i,setDimensionSetting:s,colorSetting:c,setColorSetting:m,borderSetting:d,setBorderSetting:g,advancedSetting:u,setAdvancedSetting:_,responsive:p,setResponsive:b}=r(),S=(0,l.useSelect)((e=>({data:e(o.store).getEntityRecord("root","site"),hasFinishedResolution:e(o.store).hasFinishedResolution("getEntityRecord",["root","site"])})),[]);(0,e.useEffect)((()=>{if(S.hasFinishedResolution){const e=S.data?.go2top;e&&(t(e.enabled),a({...n,...e.generalSetting}),s({...i,...e.dimensionSetting}),m({...c,...e.colorSetting}),g({...d,...e.borderSetting}),_({...u,...e.advancedSetting}),b({...p,...e.responsive}))}}),[S.hasFinishedResolution])}(),(0,e.createElement)("div",{className:"ls_g2t_container"},(0,e.createElement)(s,null),(0,e.createElement)(n.__experimentalGrid,{className:"ls_g2t_section",columns:2,templateColumns:"3fr repeat(1,1fr)"},(0,e.createElement)(c,null),(0,e.createElement)(n.Panel,{className:"ls_g2t_sidepanel",header:(0,t.__)("Settings Panel")},(0,e.createElement)(g,null),(0,e.createElement)(u,null),(0,e.createElement)(p,null),(0,e.createElement)(S,null),(0,e.createElement)(E,null),(0,e.createElement)(h,null))),(0,e.createElement)(d,null))};window.addEventListener("load",(function(){(0,e.render)((0,e.createElement)(i,null,(0,e.createElement)(v,null)),document.querySelector("#go-to-top"))}),!1)}();
\ No newline at end of file
diff --git a/src/app.js b/src/app.js
index d762564..be1109a 100644
--- a/src/app.js
+++ b/src/app.js
@@ -30,7 +30,7 @@ function App() {
-
+
diff --git a/src/control/general.js b/src/control/general.js
index eb15aed..c9892fe 100644
--- a/src/control/general.js
+++ b/src/control/general.js
@@ -48,7 +48,7 @@ function GeneralControl() {
value={generalSetting.buttonPosition}
onChange={(value) => setGeneralSetting({ ...generalSetting, buttonPosition: value })}
>
- {['Center', 'Left', 'Right'].map((position) => (
+ {['Left', 'Center', 'Right'].map((position) => (