@westpac/ui 0.7.0 → 0.8.0

package/.storybook/global.css

@@ -2,107 +2,108 @@
 @tailwind components;
 @tailwind utilities;
 
-/* BOM fonts */
-@font-face {
-  src: url('/fonts/lineto-brown-pro-light.woff2') format('woff2'),
-    url('/fonts/lineto-brown-pro-light.woff') format('woff');
-  font-family: 'Brown Pro';
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'),
-    url('/fonts/lineto-brown-pro-regular.woff') format('woff');
-  font-family: 'Brown Pro';
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'),
-    url('/fonts/lineto-brown-pro-bold.woff') format('woff');
-  font-family: 'Brown Pro';
-  font-weight: 700;
-  font-style: normal;
-}
+@layer base {
+  /* BOM fonts */
+  @font-face {
+    src: url('/fonts/lineto-brown-pro-light.woff2') format('woff2'),
+      url('/fonts/lineto-brown-pro-light.woff') format('woff');
+    font-family: 'Brown Pro';
+    font-weight: 300;
+    font-style: normal;
+  }
+  @font-face {
+    src: url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'),
+      url('/fonts/lineto-brown-pro-regular.woff') format('woff');
+    font-family: 'Brown Pro';
+    font-weight: 400;
+    font-style: normal;
+  }
+  @font-face {
+    src: url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'),
+      url('/fonts/lineto-brown-pro-bold.woff') format('woff');
+    font-family: 'Brown Pro';
+    font-weight: 700;
+    font-style: normal;
+  }
 
-/* BSA fonts */
-@font-face {
-  src: url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff');
-  font-family: 'Aller';
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff');
-  font-family: 'Aller';
-  font-weight: 700;
-  font-style: normal;
-}
-
-/* RAMS fonts */
-@font-face {
-  src: url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'),
-    url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
-  font-family: 'Source Sans Pro';
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'),
-    url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff');
-  font-family: 'Source Sans Pro';
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'),
-    url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff');
-  font-family: 'Source Sans Pro';
-  font-weight: 700;
-  font-style: normal;
-}
+  /* BSA fonts */
+  @font-face {
+    src: url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff');
+    font-family: 'Aller';
+    font-weight: 300;
+    font-style: normal;
+  }
+  @font-face {
+    src: url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff');
+    font-family: 'Aller';
+    font-weight: 700;
+    font-style: normal;
+  }
 
-/* STG fonts */
-@font-face {
-  src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'),
-    url('/fonts/dragonbold-bold-webfont.woff') format('woff');
-  font-family: 'Dragon Bold';
-  font-weight: 400;
-  font-style: normal;
-}
+  /* RAMS fonts */
+  @font-face {
+    src: url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'),
+      url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
+    font-family: 'Source Sans Pro';
+    font-weight: normal;
+    font-style: normal;
+  }
+  @font-face {
+    src: url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'),
+      url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff');
+    font-family: 'Source Sans Pro';
+    font-weight: 600;
+    font-style: normal;
+  }
+  @font-face {
+    src: url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'),
+      url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff');
+    font-family: 'Source Sans Pro';
+    font-weight: 700;
+    font-style: normal;
+  }
 
-/* WBC fonts */
-@font-face {
-  src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff');
-  font-family: 'Westpac';
-  font-weight: 400;
-  font-style: normal;
-}
+  /* STG fonts */
+  @font-face {
+    src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'),
+      url('/fonts/dragonbold-bold-webfont.woff') format('woff');
+    font-family: 'Dragon Bold';
+    font-weight: 400;
+    font-style: normal;
+  }
 
-/* WBG fonts */
-@font-face {
-  src: url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'),
-    url('/fonts/montserrat-v14-latin-300.woff') format('woff');
-  font-family: 'Montserrat';
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
-    url('/fonts/montserrat-v14-latin-regular.woff') format('woff');
-  font-family: 'Montserrat';
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'),
-    url('/fonts/montserrat-v14-latin-700.woff') format('woff');
-  font-family: 'Montserrat';
-  font-weight: 700;
-  font-style: normal;
-}
+  /* WBC fonts */
+  @font-face {
+    src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff');
+    font-family: 'Westpac';
+    font-weight: 400;
+    font-style: normal;
+  }
 
+  /* WBG fonts */
+  @font-face {
+    src: url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'),
+      url('/fonts/montserrat-v14-latin-300.woff') format('woff');
+    font-family: 'Montserrat';
+    font-weight: 300;
+    font-style: normal;
+  }
+  @font-face {
+    src: url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
+      url('/fonts/montserrat-v14-latin-regular.woff') format('woff');
+    font-family: 'Montserrat';
+    font-weight: 400;
+    font-style: normal;
+  }
+  @font-face {
+    src: url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'),
+      url('/fonts/montserrat-v14-latin-700.woff') format('woff');
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-style: normal;
+  }
 
-body {
-  @apply typography-body-10;
+  body {
+    @apply typography-body-11;
+  }
 }

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @westpac/ui
 
+## 0.8.0
+
+### Minor Changes
+
+- 842f28d: misc style fixes and removed stories from node package
+
+## 0.7.1
+
+### Patch Changes
+
+- d159d41: miscellaneous visual fixes based on ux feedback
+
 ## 0.7.0
 
 ### Minor Changes

package/assets/icons/filled/credit-cards-filled.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 2H5.99999C4.88999 2 4.00999 2.89 4.00999 4L4.00916 5H5.99999V4H22V16H21V18H22C23.11 18 24 17.11 24 16V4C24 2.89 23.11 2 22 2Z" fill="#0000FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 6H2C0.89 6 0.01 6.89 0.01 8L0 20C0 21.11 0.89 22 2 22H18C19.11 22 20 21.11 20 20V8C20 6.89 19.11 6 18 6ZM1 10H19V12H1V10Z" fill="#0000FF"/>
+</svg>

package/assets/icons/filled/exit-filled.svg

@@ -1,4 +1,4 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 12C0 5.373 5.37225 0 12 0V2C6.47714 2 2 6.47714 2 12C2 17.5229 6.47714 22 12 22C17.5229 22 22 17.5229 22 12H24C24 18.627 18.6278 24 12 24C5.37225 24 0 18.627 0 12Z" fill="#0000FF"/>
-<path d="M22.0144 8V3.41682L12.4142 13.017L11 11.6028L20.6028 2H16.0144V0H24.0144V8H22.0144Z" fill="#0000FF"/>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.51677 4.50981C8.20277 -0.176183 15.8008 -0.176713 20.4873 4.50981L19.0731 5.92403C15.1679 2.01878 8.83623 2.01878 4.93098 5.92403C1.02573 9.82928 1.02573 16.1609 4.93098 20.0662C8.83623 23.9714 15.1679 23.9714 19.0731 20.0662L20.4873 21.4804C15.8013 26.1664 8.2033 26.1669 3.51677 21.4804C-1.16976 16.7938 -1.16922 9.19581 3.51677 4.50981Z" fill="#0000FF"/>
+<path d="M16.9117 17.2479L20.1525 14.0071H12L12.0391 12.0071L20.1562 12.0071L16.9118 8.76266L18.326 7.34844L24 13L18.326 18.6621L16.9117 17.2479Z" fill="#0000FF"/>
 </svg>

package/assets/icons/filled/office-filled.svg

@@ -1,6 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 10H16V12H20V10Z" fill="#0000FF"/>
-<path d="M16 14H20V16H16V14Z" fill="#0000FF"/>
-<path d="M20 18H16V20H20V18Z" fill="#0000FF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 6H24V24H0V0H14V6ZM14 8H22V22H14V8ZM2 4H6V8H2V4ZM12 4H8V8H12V4ZM2 10H6V14H2V10ZM12 10H8V14H12V10ZM2 16H6V20H2V16ZM12 16H8V20H12V16Z" fill="#0000FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 0L0 4V24H24V6H14V0ZM4 10H10V12H4V10ZM4 14H10V16H4V14ZM10 18H4V20H10V18ZM16 10H20V12H16V10ZM16 14H20V16H16V14ZM20 18H16V20H20V18Z" fill="#0000FF"/>
 </svg>

package/assets/icons/filled/pay-to-filled.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Size=Md-24px, Style=Filled">
+<path id="pay-to" d="M18.5761 0H5.42394C3.9858 0.00123817 2.60692 0.573085 1.59 1.59C0.573085 2.60692 0.00123817 3.9858 0 5.42394V18.5807C0 20.0193 0.571449 21.3989 1.58864 22.416C2.60582 23.4332 3.98542 24.0047 5.42394 24.0047H18.5761C20.0146 24.0047 21.3942 23.4332 22.4114 22.416C23.4285 21.3989 24 20.0193 24 18.5807V5.42862C24.0006 4.71594 23.8608 4.01013 23.5885 3.35153C23.3162 2.69293 22.9167 2.09444 22.413 1.59029C21.9093 1.08613 21.3112 0.686191 20.6528 0.41332C19.9944 0.140449 19.2887 -2.64817e-07 18.5761 0ZM13.9517 17.9158C13.3451 17.9245 12.7428 17.8125 12.1799 17.5864C11.617 17.3603 11.1046 17.0245 10.6726 16.5986C10.2406 16.1727 9.89753 15.6652 9.66337 15.1056C9.42922 14.5459 9.30864 13.9453 9.30864 13.3387C9.30864 12.732 9.42922 12.1314 9.66337 11.5718C9.89753 11.0122 10.2406 10.5047 10.6726 10.0788C11.1046 9.65288 11.617 9.31711 12.1799 9.09098C12.7428 8.86485 13.3451 8.75286 13.9517 8.76153H19.1156V7.33915L21.7706 9.54894L19.111 11.7615V10.3092H13.8853C12.2852 10.3092 10.962 11.7391 10.962 13.3382C10.9445 13.7417 11.0089 14.1446 11.1512 14.5226C11.2936 14.9005 11.511 15.2458 11.7903 15.5375C12.0697 15.8292 12.4052 16.0613 12.7766 16.2199C13.1481 16.3785 13.5478 16.4603 13.9517 16.4603C14.3556 16.4603 14.7553 16.3785 15.1267 16.2199C15.4982 16.0613 15.8337 15.8292 16.113 15.5375C16.3924 15.2458 16.6098 14.9005 16.7521 14.5226C16.8945 14.1446 16.9589 13.7417 16.9414 13.3382C16.9327 12.6562 16.7289 11.991 16.3541 11.4211H18.1085C18.3852 12.0224 18.5287 12.6763 18.5293 13.3382C18.5345 13.9408 18.4197 14.5384 18.1915 15.0962C17.9633 15.6539 17.6263 16.1606 17.2002 16.5868C16.7741 17.0129 16.2674 17.3499 15.7096 17.5781C15.1519 17.8062 14.5543 17.9211 13.9517 17.9158ZM7.59258 16.3261C7.95868 16.308 8.3204 16.2384 8.66708 16.1194V17.6923C8.32503 17.8303 7.96124 17.9066 7.59258 17.9177C6.83494 17.9115 6.11066 17.6051 5.5786 17.0657C5.04654 16.5263 4.75013 15.7979 4.75436 15.0402V10.3092H2.9654V8.76153H4.75623V6.79769H6.30954V8.76153H10.5486C9.94358 9.17639 9.42204 9.70143 9.01122 10.3092H6.30954V15.0383C6.31174 15.3785 6.44779 15.7042 6.68826 15.9448C6.92872 16.1854 7.25427 16.3217 7.59445 16.3242L7.59258 16.3261Z" fill="#0000FF"/>
+</g>
+</svg>

package/assets/icons/filled/tiles-filled.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2C2.89543 2 2 2.89543 2 4V9C2 10.1046 2.89543 11 4 11H9C10.1046 11 11 10.1046 11 9V4C11 2.89543 10.1046 2 9 2H4Z" fill="#0000FF"/>
+<path d="M4 13C2.89543 13 2 13.8954 2 15V20C2 21.1046 2.89543 22 4 22H9C10.1046 22 11 21.1046 11 20V15C11 13.8954 10.1046 13 9 13H4Z" fill="#0000FF"/>
+<path d="M13 4C13 2.89543 13.8954 2 15 2H20C21.1046 2 22 2.89543 22 4V9C22 10.1046 21.1046 11 20 11H15C13.8954 11 13 10.1046 13 9V4Z" fill="#0000FF"/>
+<path d="M15 13C13.8954 13 13 13.8954 13 15V20C13 21.1046 13.8954 22 15 22H20C21.1046 22 22 21.1046 22 20V15C22 13.8954 21.1046 13 20 13H15Z" fill="#0000FF"/>
+</svg>

package/assets/icons/outlined/credit-cards-outlined.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 2H22C23.11 2 24 2.89 24 4V16C24 17.11 23.11 18 22 18H21V16H22V4H6V5H4.00917L4.01 4C4.01 2.89 4.89 2 6 2Z" fill="#0000FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6H18C19.11 6 20 6.89 20 8V20C20 21.11 19.11 22 18 22H2C0.89 22 0 21.11 0 20L0.00999999 8C0.00999999 6.89 0.89 6 2 6ZM2 20H18V12H2V20ZM2 10V8H18V10H2Z" fill="#0000FF"/>
+</svg>

package/assets/icons/outlined/exit-outlined.svg

@@ -1,4 +1,4 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 12C0 5.373 5.37225 0 12 0V2C6.47714 2 2 6.47714 2 12C2 17.5229 6.47714 22 12 22C17.5229 22 22 17.5229 22 12H24C24 18.627 18.6278 24 12 24C5.37225 24 0 18.627 0 12Z" fill="#0000FF"/>
-<path d="M22.0144 8V3.41682L12.4142 13.017L11 11.6028L20.6028 2H16.0144V0H24.0144V8H22.0144Z" fill="#0000FF"/>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.51677 4.50981C8.20277 -0.176183 15.8008 -0.176713 20.4873 4.50981L19.0731 5.92403C15.1679 2.01878 8.83623 2.01878 4.93098 5.92403C1.02573 9.82928 1.02573 16.1609 4.93098 20.0662C8.83623 23.9714 15.1679 23.9714 19.0731 20.0662L20.4873 21.4804C15.8013 26.1664 8.2033 26.1669 3.51677 21.4804C-1.16976 16.7938 -1.16922 9.19581 3.51677 4.50981Z" fill="#0000FF"/>
+<path d="M16.9117 17.2479L20.1525 14.0071H12L12.0391 12.0071L20.1562 12.0071L16.9118 8.76266L18.326 7.34844L24 13L18.326 18.6621L16.9117 17.2479Z" fill="#0000FF"/>
 </svg>

package/assets/icons/outlined/office-outlined.svg

@@ -1,6 +1,9 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 10H4V12H10V10Z" fill="#0000FF"/>
+<path d="M10 14H4V16H10V14Z" fill="#0000FF"/>
+<path d="M4 18H10V20H4V18Z" fill="#0000FF"/>
 <path d="M20 10H16V12H20V10Z" fill="#0000FF"/>
 <path d="M16 14H20V16H16V14Z" fill="#0000FF"/>
 <path d="M20 18H16V20H20V18Z" fill="#0000FF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 6H24V24H0V0H14V6ZM14 8H22V22H14V8ZM2 4H6V8H2V4ZM12 4H8V8H12V4ZM2 10H6V14H2V10ZM12 10H8V14H12V10ZM2 16H6V20H2V16ZM12 16H8V20H12V16Z" fill="#0000FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 6V0L0 4V24H24V6H14ZM2 22V5.5086L12 2.65146V22H2ZM14 22V8H22V22H14Z" fill="#0000FF"/>
 </svg>

package/assets/icons/outlined/pay-to-outlined.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Size=Md-24px, Style=Outlined">
+<path id="pay-to" d="M18.5761 0H5.42394C3.9858 0.00123817 2.60692 0.573085 1.59 1.59C0.573085 2.60692 0.00123817 3.9858 0 5.42394V18.5807C0 20.0193 0.571449 21.3989 1.58864 22.416C2.60582 23.4332 3.98542 24.0047 5.42394 24.0047H18.5761C20.0146 24.0047 21.3942 23.4332 22.4114 22.416C23.4285 21.3989 24 20.0193 24 18.5807V5.42862C24.0006 4.71594 23.8608 4.01013 23.5885 3.35153C23.3162 2.69293 22.9167 2.09444 22.413 1.59029C21.9093 1.08613 21.3112 0.686191 20.6528 0.41332C19.9944 0.140449 19.2887 -2.64817e-07 18.5761 0ZM13.9517 17.9158C13.3451 17.9245 12.7428 17.8125 12.1799 17.5864C11.617 17.3603 11.1046 17.0245 10.6726 16.5986C10.2406 16.1727 9.89753 15.6652 9.66337 15.1056C9.42922 14.5459 9.30864 13.9453 9.30864 13.3387C9.30864 12.732 9.42922 12.1314 9.66337 11.5718C9.89753 11.0122 10.2406 10.5047 10.6726 10.0788C11.1046 9.65288 11.617 9.31711 12.1799 9.09098C12.7428 8.86485 13.3451 8.75286 13.9517 8.76153H19.1156V7.33915L21.7706 9.54894L19.111 11.7615V10.3092H13.8853C12.2852 10.3092 10.962 11.7391 10.962 13.3382C10.9445 13.7417 11.0089 14.1446 11.1512 14.5226C11.2936 14.9005 11.511 15.2458 11.7903 15.5375C12.0697 15.8292 12.4052 16.0613 12.7766 16.2199C13.1481 16.3785 13.5478 16.4603 13.9517 16.4603C14.3556 16.4603 14.7553 16.3785 15.1267 16.2199C15.4982 16.0613 15.8337 15.8292 16.113 15.5375C16.3924 15.2458 16.6098 14.9005 16.7521 14.5226C16.8945 14.1446 16.9589 13.7417 16.9414 13.3382C16.9327 12.6562 16.7289 11.991 16.3541 11.4211H18.1085C18.3852 12.0224 18.5287 12.6763 18.5293 13.3382C18.5345 13.9408 18.4197 14.5384 18.1915 15.0962C17.9633 15.6539 17.6263 16.1606 17.2002 16.5868C16.7741 17.0129 16.2674 17.3499 15.7096 17.5781C15.1519 17.8062 14.5543 17.9211 13.9517 17.9158ZM7.59258 16.3261C7.95868 16.308 8.3204 16.2384 8.66708 16.1194V17.6923C8.32503 17.8303 7.96124 17.9066 7.59258 17.9177C6.83494 17.9115 6.11066 17.6051 5.5786 17.0657C5.04654 16.5263 4.75013 15.7979 4.75436 15.0402V10.3092H2.9654V8.76153H4.75623V6.79769H6.30954V8.76153H10.5486C9.94358 9.17639 9.42204 9.70143 9.01122 10.3092H6.30954V15.0383C6.31174 15.3785 6.44779 15.7042 6.68826 15.9448C6.92872 16.1854 7.25427 16.3217 7.59445 16.3242L7.59258 16.3261Z" fill="#0000FF"/>
+</g>
+</svg>

package/assets/icons/outlined/tiles-outlined.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 20V15C11 13.8954 10.1046 13 9 13H4C2.89543 13 2 13.8954 2 15V20C2 21.1046 2.89543 22 4 22H9C10.1046 22 11 21.1046 11 20ZM4 4V9H9V4H4ZM4 15V20H9V15H4ZM20 4H15V9H20V4ZM15 15V20H20V15H15ZM2 4C2 2.89543 2.89543 2 4 2H9C10.1046 2 11 2.89543 11 4V9C11 10.1046 10.1046 11 9 11H4C2.89543 11 2 10.1046 2 9V4ZM13 4C13 2.89543 13.8954 2 15 2H20C21.1046 2 22 2.89543 22 4V9C22 10.1046 21.1046 11 20 11H15C13.8954 11 13 10.1046 13 9V4ZM13 15C13 13.8954 13.8954 13 15 13H20C21.1046 13 22 13.8954 22 15V20C22 21.1046 21.1046 22 20 22H15C13.8954 22 13 21.1046 13 20V15Z" fill="#0000FF"/>
+</svg>