@westpac/ui 0.22.0 → 0.23.0

package/dist/css/westpac-ui.min.css

@@ -2615,8 +2615,8 @@ video {
 }@media (min-width: 1200px) {.container {
     max-width: 1200px;
   }
-}@media (min-width: 1900px) {.container {
-    max-width: 1900px;
+}@media (min-width: 1584px) {.container {
+    max-width: 1584px;
   }
 }.linear-gradient-style {
   display: flex;
@@ -3341,6 +3341,8 @@ video {
   height: 0.625rem;
 }.h-\[0\.875rem\] {
   height: 0.875rem;
+}.h-\[1\.25rem\] {
+  height: 1.25rem;
 }.h-\[1\.75rem\] {
   height: 1.75rem;
 }.h-\[14px\] {
@@ -3559,8 +3561,8 @@ video {
   max-width: 300px;
 }.max-w-\[8\.75rem\] {
   max-width: 8.75rem;
-}.max-w-container {
-  max-width: 1320px;
+}.max-w-container-xs {
+  max-width: 35.35rem;
 }.max-w-full {
   max-width: 100%;
 }.max-w-none {
@@ -3968,9 +3970,6 @@ video {
 }.border-t-muted {
   --tw-border-opacity: 1;
   border-top-color: rgba(var(--colors-muted), var(--tw-border-opacity));
-}.border-t-primary {
-  --tw-border-opacity: 1;
-  border-top-color: rgba(var(--colors-primary), var(--tw-border-opacity));
 }.border-opacity-0 {
   --tw-border-opacity: 0;
 }.\!bg-light {
@@ -5793,7 +5792,7 @@ video {
   }.lg\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
-}@media (min-width: 1900px) {.xl\:typography-body-1 {
+}@media (min-width: 1584px) {.xl\:typography-body-1 {
     font-size: 3.75rem;
     line-height: 1.2;
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
@@ -6813,6 +6812,8 @@ video {
     height: 0.625rem;
   }.xsl\:h-\[0\.875rem\] {
     height: 0.875rem;
+  }.xsl\:h-\[1\.25rem\] {
+    height: 1.25rem;
   }.xsl\:h-\[1\.75rem\] {
     height: 1.75rem;
   }.xsl\:h-\[2\.125rem\] {
@@ -6895,6 +6896,13 @@ video {
     min-width: 15.625rem;
   }.xsl\:min-w-\[8\.125rem\] {
     min-width: 8.125rem;
+  }.xsl\:max-w-container-xs {
+    max-width: 35.35rem;
+  }.xsl\:max-w-container-xsl {
+    max-width: 47.25rem;
+  }@media (min-width: 576px) {.xsl\:xsl\:max-w-container-xsl {
+      max-width: 47.25rem;
+    }
   }.xsl\:flex-1 {
     flex: 1 1 0%;
   }.xsl\:translate-x-\[0\.125rem\] {
@@ -7182,6 +7190,10 @@ video {
   }.xsl\:py-\[0\.5rem\] {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
+  }@media (min-width: 576px) {.xsl\:xsl\:px-5 {
+      padding-left: 1.875rem;
+      padding-right: 1.875rem;
+    }
   }.xsl\:pb-12 {
     padding-bottom: 4.5rem;
   }.xsl\:pb-5 {
@@ -7234,6 +7246,8 @@ video {
     font-weight: 400;
   }.xsl\:uppercase {
     text-transform: uppercase;
+  }.xsl\:leading-\[1\.125rem\] {
+    line-height: 1.125rem;
   }.xsl\:leading-none {
     line-height: 1;
   }.xsl\:\!text-white {
@@ -7656,8 +7670,11 @@ video {
     }
   }@media (min-width: 768px) {.xsl\:sm\:relative {
       position: relative;
-    }.xsl\:sm\:max-w-xsl {
-      max-width: 576px;
+    }.xsl\:sm\:px-6 {
+      padding-left: 2.25rem;
+      padding-right: 2.25rem;
+    }.xsl\:sm\:max-w-container-sm {
+      max-width: 60.75rem;
     }.xsl\:sm\:inline-block {
       display: inline-block;
     }.xsl\:sm\:hidden {
@@ -7670,7 +7687,13 @@ video {
       vertical-align: middle;
     }
   }
-}@media (min-width: 768px) {.sm\:pointer-events-none {
+}@media (min-width: 768px) {@media (min-width: 576px) {.sm\:xsl\:max-w-container-xsl {
+      max-width: 47.25rem;
+    }.sm\:xsl\:px-5 {
+      padding-left: 1.875rem;
+      padding-right: 1.875rem;
+    }
+  }.sm\:pointer-events-none {
     pointer-events: none;
   }.sm\:fixed {
     position: fixed;
@@ -7852,6 +7875,8 @@ video {
     height: 0.625rem;
   }.sm\:h-\[0\.875rem\] {
     height: 0.875rem;
+  }.sm\:h-\[1\.25rem\] {
+    height: 1.25rem;
   }.sm\:h-\[1\.75rem\] {
     height: 1.75rem;
   }.sm\:h-\[2\.125rem\] {
@@ -7944,10 +7969,12 @@ video {
     min-width: 8.125rem;
   }.sm\:max-w-\[298px\] {
     max-width: 298px;
-  }.sm\:max-w-xsl {
-    max-width: 576px;
-  }@media (min-width: 768px) {.sm\:sm\:max-w-xsl {
-      max-width: 576px;
+  }.sm\:max-w-container-sm {
+    max-width: 60.75rem;
+  }.sm\:max-w-container-xs {
+    max-width: 35.35rem;
+  }@media (min-width: 768px) {.sm\:sm\:max-w-container-sm {
+      max-width: 60.75rem;
     }
   }.sm\:flex-1 {
     flex: 1 1 0%;
@@ -8244,6 +8271,10 @@ video {
   }.sm\:py-\[0\.5rem\] {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
+  }@media (min-width: 768px) {.sm\:sm\:px-6 {
+      padding-left: 2.25rem;
+      padding-right: 2.25rem;
+    }
   }.sm\:pb-12 {
     padding-bottom: 4.5rem;
   }.sm\:pb-5 {
@@ -8301,6 +8332,8 @@ video {
     font-weight: 400;
   }.sm\:uppercase {
     text-transform: uppercase;
+  }.sm\:leading-\[1\.125rem\] {
+    line-height: 1.125rem;
   }.sm\:leading-none {
     line-height: 1;
   }.sm\:\!text-white {
@@ -8734,26 +8767,38 @@ video {
       }
     }
   }
-}@media (min-width: 576px) {@media (min-width: 992px) {.xsl\:md\:px-6 {
+}@media (min-width: 576px) {@media (min-width: 992px) {.xsl\:md\:px-8 {
+      padding-left: 3rem;
+      padding-right: 3rem;
+    }.xsl\:md\:px-7 {
+      padding-left: 2.625rem;
+      padding-right: 2.625rem;
+    }.xsl\:md\:px-6 {
       padding-left: 2.25rem;
       padding-right: 2.25rem;
     }.xsl\:md\:ml-6 {
       margin-left: 2.25rem;
     }.xsl\:md\:mb-4 {
       margin-bottom: 1.5rem;
-    }.xsl\:md\:max-w-md {
-      max-width: 992px;
+    }.xsl\:md\:max-w-container-md {
+      max-width: 72.75rem;
     }
   }
-}@media (min-width: 768px) {@media (min-width: 992px) {.sm\:md\:px-6 {
+}@media (min-width: 768px) {@media (min-width: 992px) {.sm\:md\:px-8 {
+      padding-left: 3rem;
+      padding-right: 3rem;
+    }.sm\:md\:px-7 {
+      padding-left: 2.625rem;
+      padding-right: 2.625rem;
+    }.sm\:md\:px-6 {
       padding-left: 2.25rem;
       padding-right: 2.25rem;
     }.sm\:md\:ml-6 {
       margin-left: 2.25rem;
     }.sm\:md\:mb-4 {
       margin-bottom: 1.5rem;
-    }.sm\:md\:max-w-md {
-      max-width: 992px;
+    }.sm\:md\:max-w-container-md {
+      max-width: 72.75rem;
     }
   }
 }@media (min-width: 992px) {@media (min-width: 768px) {.md\:sm\:align-middle {
@@ -8766,11 +8811,20 @@ video {
       display: none;
     }.md\:sm\:inline-block {
       display: inline-block;
-    }.md\:sm\:max-w-xsl {
-      max-width: 576px;
+    }.md\:sm\:max-w-container-sm {
+      max-width: 60.75rem;
+    }.md\:sm\:px-6 {
+      padding-left: 2.25rem;
+      padding-right: 2.25rem;
     }.md\:sm\:relative {
       position: relative;
     }
+  }@media (min-width: 576px) {.md\:xsl\:max-w-container-xsl {
+      max-width: 47.25rem;
+    }.md\:xsl\:px-5 {
+      padding-left: 1.875rem;
+      padding-right: 1.875rem;
+    }
   }.md\:pointer-events-none {
     pointer-events: none;
   }.md\:fixed {
@@ -8933,6 +8987,8 @@ video {
     height: 0.625rem;
   }.md\:h-\[0\.875rem\] {
     height: 0.875rem;
+  }.md\:h-\[1\.25rem\] {
+    height: 1.25rem;
   }.md\:h-\[1\.75rem\] {
     height: 1.75rem;
   }.md\:h-\[2\.125rem\] {
@@ -9015,10 +9071,12 @@ video {
     min-width: 15.625rem;
   }.md\:min-w-\[8\.125rem\] {
     min-width: 8.125rem;
-  }.md\:max-w-md {
-    max-width: 992px;
-  }@media (min-width: 992px) {.md\:md\:max-w-md {
-      max-width: 992px;
+  }.md\:max-w-container-md {
+    max-width: 72.75rem;
+  }.md\:max-w-container-xs {
+    max-width: 35.35rem;
+  }@media (min-width: 992px) {.md\:md\:max-w-container-md {
+      max-width: 72.75rem;
     }
   }.md\:flex-1 {
     flex: 1 1 0%;
@@ -9261,6 +9319,12 @@ video {
   }@media (min-width: 992px) {.md\:md\:px-6 {
       padding-left: 2.25rem;
       padding-right: 2.25rem;
+    }.md\:md\:px-7 {
+      padding-left: 2.625rem;
+      padding-right: 2.625rem;
+    }.md\:md\:px-8 {
+      padding-left: 3rem;
+      padding-right: 3rem;
     }
   }.md\:px-0 {
     padding-left: 0rem;
@@ -9379,6 +9443,8 @@ video {
     font-weight: 400;
   }.md\:uppercase {
     text-transform: uppercase;
+  }.md\:leading-\[1\.125rem\] {
+    line-height: 1.125rem;
   }.md\:leading-none {
     line-height: 1;
   }.md\:\!text-white {
@@ -9800,26 +9866,35 @@ video {
       }
     }
   }
-}@media (min-width: 576px) {@media (min-width: 1200px) {.xsl\:lg\:mr-\[300px\] {
+}@media (min-width: 576px) {@media (min-width: 1200px) {.xsl\:lg\:px-10 {
+      padding-left: 3.75rem;
+      padding-right: 3.75rem;
+    }.xsl\:lg\:mr-\[300px\] {
       margin-right: 300px;
-    }.xsl\:lg\:max-w-lg {
-      max-width: 1200px;
+    }.xsl\:lg\:max-w-container-lg {
+      max-width: 97.5rem;
     }
   }
-}@media (min-width: 768px) {@media (min-width: 1200px) {.sm\:lg\:mr-\[300px\] {
+}@media (min-width: 768px) {@media (min-width: 1200px) {.sm\:lg\:px-10 {
+      padding-left: 3.75rem;
+      padding-right: 3.75rem;
+    }.sm\:lg\:mr-\[300px\] {
       margin-right: 300px;
-    }.sm\:lg\:max-w-lg {
-      max-width: 1200px;
+    }.sm\:lg\:max-w-container-lg {
+      max-width: 97.5rem;
     }
   }
-}@media (min-width: 992px) {@media (min-width: 1200px) {.md\:lg\:mr-\[300px\] {
+}@media (min-width: 992px) {@media (min-width: 1200px) {.md\:lg\:px-10 {
+      padding-left: 3.75rem;
+      padding-right: 3.75rem;
+    }.md\:lg\:mr-\[300px\] {
       margin-right: 300px;
-    }.md\:lg\:max-w-lg {
-      max-width: 1200px;
+    }.md\:lg\:max-w-container-lg {
+      max-width: 97.5rem;
     }
   }
-}@media (min-width: 1200px) {@media (min-width: 992px) {.lg\:md\:max-w-md {
-      max-width: 992px;
+}@media (min-width: 1200px) {@media (min-width: 992px) {.lg\:md\:max-w-container-md {
+      max-width: 72.75rem;
     }.lg\:md\:mb-4 {
       margin-bottom: 1.5rem;
     }.lg\:md\:ml-6 {
@@ -9827,6 +9902,12 @@ video {
     }.lg\:md\:px-6 {
       padding-left: 2.25rem;
       padding-right: 2.25rem;
+    }.lg\:md\:px-7 {
+      padding-left: 2.625rem;
+      padding-right: 2.625rem;
+    }.lg\:md\:px-8 {
+      padding-left: 3rem;
+      padding-right: 3rem;
     }
   }@media (min-width: 768px) {.lg\:sm\:align-middle {
       vertical-align: middle;
@@ -9838,11 +9919,20 @@ video {
       display: none;
     }.lg\:sm\:inline-block {
       display: inline-block;
-    }.lg\:sm\:max-w-xsl {
-      max-width: 576px;
+    }.lg\:sm\:max-w-container-sm {
+      max-width: 60.75rem;
+    }.lg\:sm\:px-6 {
+      padding-left: 2.25rem;
+      padding-right: 2.25rem;
     }.lg\:sm\:relative {
       position: relative;
     }
+  }@media (min-width: 576px) {.lg\:xsl\:max-w-container-xsl {
+      max-width: 47.25rem;
+    }.lg\:xsl\:px-5 {
+      padding-left: 1.875rem;
+      padding-right: 1.875rem;
+    }
   }.lg\:pointer-events-none {
     pointer-events: none;
   }.lg\:fixed {
@@ -10001,6 +10091,8 @@ video {
     height: 0.625rem;
   }.lg\:h-\[0\.875rem\] {
     height: 0.875rem;
+  }.lg\:h-\[1\.25rem\] {
+    height: 1.25rem;
   }.lg\:h-\[1\.75rem\] {
     height: 1.75rem;
   }.lg\:h-\[2\.125rem\] {
@@ -10083,11 +10175,13 @@ video {
     min-width: 15.625rem;
   }.lg\:min-w-\[8\.125rem\] {
     min-width: 8.125rem;
-  }@media (min-width: 1200px) {.lg\:lg\:max-w-lg {
-      max-width: 1200px;
+  }@media (min-width: 1200px) {.lg\:lg\:max-w-container-lg {
+      max-width: 97.5rem;
     }
-  }.lg\:max-w-lg {
-    max-width: 1200px;
+  }.lg\:max-w-container-lg {
+    max-width: 97.5rem;
+  }.lg\:max-w-container-xs {
+    max-width: 35.35rem;
   }.lg\:flex-1 {
     flex: 1 1 0%;
   }.lg\:translate-x-\[0\.125rem\] {
@@ -10324,6 +10418,10 @@ video {
   }.lg\:\!px-0 {
     padding-left: 0rem !important;
     padding-right: 0rem !important;
+  }@media (min-width: 1200px) {.lg\:lg\:px-10 {
+      padding-left: 3.75rem;
+      padding-right: 3.75rem;
+    }
   }.lg\:px-0 {
     padding-left: 0rem;
     padding-right: 0rem;
@@ -10433,6 +10531,8 @@ video {
     font-weight: 400;
   }.lg\:uppercase {
     text-transform: uppercase;
+  }.lg\:leading-\[1\.125rem\] {
+    line-height: 1.125rem;
   }.lg\:leading-none {
     line-height: 1;
   }.lg\:\!text-white {
@@ -10854,13 +10954,16 @@ video {
       }
     }
   }
-}@media (min-width: 1900px) {@media (min-width: 1200px) {.xl\:lg\:max-w-lg {
-      max-width: 1200px;
+}@media (min-width: 1584px) {@media (min-width: 1200px) {.xl\:lg\:max-w-container-lg {
+      max-width: 97.5rem;
     }.xl\:lg\:mr-\[300px\] {
       margin-right: 300px;
+    }.xl\:lg\:px-10 {
+      padding-left: 3.75rem;
+      padding-right: 3.75rem;
     }
-  }@media (min-width: 992px) {.xl\:md\:max-w-md {
-      max-width: 992px;
+  }@media (min-width: 992px) {.xl\:md\:max-w-container-md {
+      max-width: 72.75rem;
     }.xl\:md\:mb-4 {
       margin-bottom: 1.5rem;
     }.xl\:md\:ml-6 {
@@ -10868,6 +10971,12 @@ video {
     }.xl\:md\:px-6 {
       padding-left: 2.25rem;
       padding-right: 2.25rem;
+    }.xl\:md\:px-7 {
+      padding-left: 2.625rem;
+      padding-right: 2.625rem;
+    }.xl\:md\:px-8 {
+      padding-left: 3rem;
+      padding-right: 3rem;
     }
   }@media (min-width: 768px) {.xl\:sm\:align-middle {
       vertical-align: middle;
@@ -10879,11 +10988,20 @@ video {
       display: none;
     }.xl\:sm\:inline-block {
       display: inline-block;
-    }.xl\:sm\:max-w-xsl {
-      max-width: 576px;
+    }.xl\:sm\:max-w-container-sm {
+      max-width: 60.75rem;
+    }.xl\:sm\:px-6 {
+      padding-left: 2.25rem;
+      padding-right: 2.25rem;
     }.xl\:sm\:relative {
       position: relative;
     }
+  }@media (min-width: 576px) {.xl\:xsl\:max-w-container-xsl {
+      max-width: 47.25rem;
+    }.xl\:xsl\:px-5 {
+      padding-left: 1.875rem;
+      padding-right: 1.875rem;
+    }
   }.xl\:pointer-events-none {
     pointer-events: none;
   }.xl\:fixed {
@@ -11037,6 +11155,8 @@ video {
     height: 0.625rem;
   }.xl\:h-\[0\.875rem\] {
     height: 0.875rem;
+  }.xl\:h-\[1\.25rem\] {
+    height: 1.25rem;
   }.xl\:h-\[1\.75rem\] {
     height: 1.75rem;
   }.xl\:h-\[2\.125rem\] {
@@ -11119,6 +11239,8 @@ video {
     min-width: 15.625rem;
   }.xl\:min-w-\[8\.125rem\] {
     min-width: 8.125rem;
+  }.xl\:max-w-container-xs {
+    max-width: 35.35rem;
   }.xl\:flex-1 {
     flex: 1 1 0%;
   }.xl\:translate-x-\[0\.125rem\] {
@@ -11458,6 +11580,8 @@ video {
     font-weight: 400;
   }.xl\:uppercase {
     text-transform: uppercase;
+  }.xl\:leading-\[1\.125rem\] {
+    line-height: 1.125rem;
   }.xl\:leading-none {
     line-height: 1;
   }.xl\:\!text-white {

package/dist/tailwind/constants/breakpoints.js

@@ -3,5 +3,5 @@ export const BREAKPOINTS = {
     sm: '768px',
     md: '992px',
     lg: '1200px',
-    xl: '1900px'
+    xl: '1584px'
 };

package/dist/tailwind/tailwind-plugin.js

@@ -117,7 +117,11 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(function(options = {})
                     sm: BREAKPOINTS.sm,
                     md: BREAKPOINTS.md,
                     lg: BREAKPOINTS.lg,
-                    container: '1320px'
+                    'container-xs': '35.35rem',
+                    'container-xsl': '47.25rem',
+                    'container-sm': '60.75rem',
+                    'container-md': '72.75rem',
+                    'container-lg': '97.5rem'
                 },
                 transitionTimingFunction: {
                     ease: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -255,9 +255,9 @@
     "typescript": "^5.1.6",
     "vite": "^4.3.9",
     "vitest": "^0.30.1",
+    "@westpac/ts-config": "~0.0.0",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/eslint-config": "~0.2.1",
-    "@westpac/ts-config": "~0.0.0"
+    "@westpac/eslint-config": "~0.2.1"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

package/src/components/badge/badge.styles.ts

@@ -6,7 +6,7 @@ export const styles = tv(
     variants: {
       color: {
         danger: 'border-danger bg-danger text-white',
-        faint: 'border-border bg-border text-muted',
+        faint: 'border-border bg-border text-text',
         hero: 'border-hero bg-hero text-white',
         info: 'border-info bg-info text-white',
         neutral: 'border-neutral bg-neutral text-white',
@@ -25,7 +25,7 @@ export const styles = tv(
       },
       type: {
         pill: 'typography-body-10 h-4 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
-        default: 'h-3 rounded-sm px-1 text-[0.75rem] leading-none',
+        default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]',
       },
       soft: {
         true: 'bg-white',
@@ -40,7 +40,7 @@ export const styles = tv(
       {
         color: 'faint',
         soft: true,
-        className: 'text-muted',
+        className: 'text-text',
       },
       {
         color: 'hero',

package/src/components/footer/footer.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative overflow-hidden border-t-[1px] border-t-primary',
+      base: 'relative overflow-hidden border-t-[1px] border-t-border',
       wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
       topRow: '',
       link: 'float-right block',

package/src/components/grid/components/grid-container/grid-container.component.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { styles } from './grid-container.styles.js';
 import { type GridContainerProps } from './grid-container.types.js';
 
-export function GridContainer({ className, tag: Tag = 'div', fixed, children, ...props }: GridContainerProps) {
+export function GridContainer({ className, tag: Tag = 'div', fixed = false, children, ...props }: GridContainerProps) {
   return (
     <Tag className={styles({ fixed, className })} {...props}>
       {children}

package/src/components/grid/components/grid-container/grid-container.styles.ts

@@ -2,10 +2,11 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'mx-auto box-border w-full max-w-container px-4 xsl:px-5 sm:px-6 md:px-8 lg:px-10',
+    base: 'mx-auto box-border w-full',
     variants: {
       fixed: {
-        true: 'sm:max-w-xsl md:max-w-md lg:max-w-lg',
+        true: 'max-w-container-xs px-4 xsl:max-w-container-xsl xsl:px-5 sm:max-w-container-sm sm:px-6 md:max-w-container-md md:px-7 lg:max-w-container-lg lg:px-10',
+        false: 'px-4 xsl:px-5 sm:px-6 md:px-8 lg:px-10',
       },
     },
   },

package/src/tailwind/constants/breakpoints.ts

@@ -3,6 +3,6 @@ export const BREAKPOINTS = {
   sm: '768px',
   md: '992px',
   lg: '1200px',
-  xl: '1900px',
+  xl: '1584px',
 };
 export type Breakpoint = keyof typeof BREAKPOINTS;

package/src/tailwind/tailwind-plugin.ts

@@ -133,7 +133,11 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
             sm: BREAKPOINTS.sm,
             md: BREAKPOINTS.md,
             lg: BREAKPOINTS.lg,
-            container: '1320px', //1200 (lg) + 60 (paddingHorizontal) + 60 (paddingHorizontal)
+            'container-xs': '35.35rem',
+            'container-xsl': '47.25rem',
+            'container-sm': '60.75rem',
+            'container-md': '72.75rem',
+            'container-lg': '97.5rem',
           },
           transitionTimingFunction: {
             ease: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)', // based on css ease timing function used in GEL 3.0