```
diff --git a/apps/site/src/content/design-system/components/switch/code.mdoc b/apps/site/src/content/design-system/components/switch/code.mdoc
index ca7c7e359..ca4d7adcc 100644
--- a/apps/site/src/content/design-system/components/switch/code.mdoc
+++ b/apps/site/src/content/design-system/components/switch/code.mdoc
@@ -1,4 +1,4 @@
-## Default Switch
+### Default Switch
```jsx
-
+
+ Sizes
+
+
+
+
-
-```
-
----
-
-## Responsive sizing
-
-```jsx
-
+ Responsive sizing
+
```
----
-
-## Block switch
+### Block switch
```jsx
```
-
----
diff --git a/apps/site/src/content/design-system/components/switch/design/Switches/content.mdoc b/apps/site/src/content/design-system/components/switch/design/Switches/content.mdoc
deleted file mode 100644
index 4f058f25f..000000000
--- a/apps/site/src/content/design-system/components/switch/design/Switches/content.mdoc
+++ /dev/null
@@ -1,31 +0,0 @@
-**Sizes:** We have one simple switch style that is available in four sizes (heights), with the default being Medium 36px. These four sizes align with other form element sizes.
-
-```jsx
-
-
-
-
-
-
-```
-
-**Block switches:** Use Block switches in small break points to align the label and element to either side of the screen. This behaviour can be set up to work responsively, and change depending on breakpoint.
-
-```jsx
-
-
-
-```
-
-**Using responsive breakpoint control:** As well as determining if the switch is a Block switch, the switch's size can also change based on breakpoint.
-
-```jsx
-
-
-
-
-```
diff --git a/apps/site/src/content/design-system/components/switch/design/switches-design/content.mdoc b/apps/site/src/content/design-system/components/switch/design/switches-design/content.mdoc
new file mode 100644
index 000000000..0740670b6
--- /dev/null
+++ b/apps/site/src/content/design-system/components/switch/design/switches-design/content.mdoc
@@ -0,0 +1,39 @@
+**Sizes:** We have one simple switch style that is available in four sizes (heights), with the default being Medium 36px. These four sizes align with other form element sizes.
+
+```jsx
+
+
+
+
+
+
+```
+
+**Block switches:** Use Block switches in small break points to align the label and element to either side of the screen. This behaviour can be set up to work responsively, and change depending on breakpoint.
+
+```jsx
+
+
+
+
+```
+
+**Using responsive breakpoint control:** As well as determining if the switch is a Block switch, the switch's size can also change based on breakpoint.
+
+```jsx
+
+ Medium size switch becomes Extra large from the MD breakpoint
+
+
+
+ Extra large size switch becomes small from the SM breakpoint
+
+
+
+
+ Small size switch becomes medium at the SM breakpoint, large at the MD breakpoint and Extra large at the LG
+ breakpoint
+
+
+
+```
diff --git a/apps/site/src/content/design-system/components/switch/index.yaml b/apps/site/src/content/design-system/components/switch/index.yaml
index b31fc782b..2765877ba 100644
--- a/apps/site/src/content/design-system/components/switch/index.yaml
+++ b/apps/site/src/content/design-system/components/switch/index.yaml
@@ -5,7 +5,7 @@ description: >-
design:
- title:
name: Switches
- slug: switches
+ slug: switches-design
- title:
name: User experience
slug: user-experience
@@ -28,3 +28,4 @@ accessibility:
- title:
name: Accessibility API
slug: accessibility-api
+relatedInformation: ['checkbox-group', 'button-group']
\ No newline at end of file
diff --git a/apps/site/src/content/design-system/components/tabs/design/Tabset/content.mdoc b/apps/site/src/content/design-system/components/tabs/design/Tabset/content.mdoc
deleted file mode 100644
index b7d445e6a..000000000
--- a/apps/site/src/content/design-system/components/tabs/design/Tabset/content.mdoc
+++ /dev/null
@@ -1,97 +0,0 @@
-**Default tabset:** See Visual design for the usage recommendations for the default style. Tabsets can appear both ranged to the right, or justified.
-
-```jsx
-
-
- ‘It was much pleasanter at home,’ thought poor Alice, ‘when one wasn’t always growing
- larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t
- gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort
- of life! I do wonder what can have happened to me! When I used to read fairy-tales, I
- fancied that kind of thing never happened, and now here I am in the middle of one! There
- ought to be a book written about me, that there ought! And when I grow up, I’ll write one.
-
-
- The chief difficulty Alice found at first was in managing her flamingo: she succeeded in
- getting its body tucked away, comfortably enough, under her arm, with its legs hanging
- down, but generally, just as she had got its neck nicely straightened out, and was going
- to give the hedgehog a blow with its head, it would twist itself round and look up in her
- face, with such a puzzled expression that she could not help bursting out laughing: and
- when she had got its head down, and was going to begin again, it was very provoking to
- find that the hedgehog had unrolled itself, and was in the act of crawling away: besides
- all this, there was generally a ridge or furrow in the way wherever she wanted to send the
- hedgehog to, and, as the doubled-up soldiers were always getting up and walking off to
- other parts of the ground, Alice soon came to the conclusion that it was a very difficult
- game indeed.
-
-
- The Caterpillar and Alice looked at each other for some time in silence: at last the
- Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy
- voice.
-
- ‘Who are you?’ said the Caterpillar.
-
- This was not an encouraging opening for a conversation. Alice replied, rather shyly, ‘I —
- I hardly know, sir, just at present — at least I know who I was when I got up this
- morning, but I think I must have been changed several times since then.’
-
- ‘What do you mean by that?’ said the Caterpillar sternly. ‘Explain yourself!’
-
- ‘I can’t explain myself, I’m afraid, sir’ said Alice, ’because I’m not myself, you see.’
-
- ‘I don’t see,’ said the Caterpillar.
-
- ‘I’m afraid I can’t put it more clearly,’ Alice replied very politely, ‘for I can’t
- understand it myself to begin with; and being so many different sizes in a day is very
- confusing.’
-
-
-```
-
-**Lego tabset:** See Visual design for the usage recommendations for the lego style. Tabsets can appear both ranged to the right, or justified.
-
-```jsx
-
-
- ‘It was much pleasanter at home,’ thought poor Alice, ‘when one wasn’t always growing
- larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t
- gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort
- of life! I do wonder what can have happened to me! When I used to read fairy-tales, I
- fancied that kind of thing never happened, and now here I am in the middle of one! There
- ought to be a book written about me, that there ought! And when I grow up, I’ll write one.
-
-
- The chief difficulty Alice found at first was in managing her flamingo: she succeeded in
- getting its body tucked away, comfortably enough, under her arm, with its legs hanging
- down, but generally, just as she had got its neck nicely straightened out, and was going
- to give the hedgehog a blow with its head, it would twist itself round and look up in her
- face, with such a puzzled expression that she could not help bursting out laughing: and
- when she had got its head down, and was going to begin again, it was very provoking to
- find that the hedgehog had unrolled itself, and was in the act of crawling away: besides
- all this, there was generally a ridge or furrow in the way wherever she wanted to send the
- hedgehog to, and, as the doubled-up soldiers were always getting up and walking off to
- other parts of the ground, Alice soon came to the conclusion that it was a very difficult
- game indeed.
-
-
- The Caterpillar and Alice looked at each other for some time in silence: at last the
- Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy
- voice.
-
- ‘Who are you?’ said the Caterpillar.
-
- This was not an encouraging opening for a conversation. Alice replied, rather shyly, ‘I —
- I hardly know, sir, just at present — at least I know who I was when I got up this
- morning, but I think I must have been changed several times since then.’
-
- ‘What do you mean by that?’ said the Caterpillar sternly. ‘Explain yourself!’
-
- ‘I can’t explain myself, I’m afraid, sir’ said Alice, ’because I’m not myself, you see.’
-
- ‘I don’t see,’ said the Caterpillar.
-
- ‘I’m afraid I can’t put it more clearly,’ Alice replied very politely, ‘for I can’t
- understand it myself to begin with; and being so many different sizes in a day is very
- confusing.’
-
-
-```
diff --git a/apps/site/src/content/design-system/components/well/design/well/content.mdoc b/apps/site/src/content/design-system/components/well/design/well/content.mdoc
new file mode 100644
index 000000000..a23c2208f
--- /dev/null
+++ b/apps/site/src/content/design-system/components/well/design/well/content.mdoc
@@ -0,0 +1,23 @@
+Choose the colour of your well and the background it appears on to help your content either stand out or recede. Contrasting colours will always make an impact.
+
+```tsx
+
+ It was a bright morning in the early part of summer; the river had resumed its wonted banks and its accustomed pace,
+ and a hot sun seemed to be pulling everything green and bushy and spiky up out of the earth towards him, as if by
+ strings. The Mole and the Water Rat had been up since dawn, very busy on matters connected with boats and the opening
+ of the boating season; painting and varnishing, mending paddles, repairing cushions, hunting for missing boat-hooks,
+ and so on; and were finishing breakfast in their little parlour and eagerly discussing their plans for the day, when a
+ heavy knock sounded at the door.
+
+```
+
+```tsx
+
+ It was a bright morning in the early part of summer; the river had resumed its wonted banks and its accustomed pace,
+ and a hot sun seemed to be pulling everything green and bushy and spiky up out of the earth towards him, as if by
+ strings. The Mole and the Water Rat had been up since dawn, very busy on matters connected with boats and the opening
+ of the boating season; painting and varnishing, mending paddles, repairing cushions, hunting for missing boat-hooks,
+ and so on; and were finishing breakfast in their little parlour and eagerly discussing their plans for the day, when a
+ heavy knock sounded at the door.
+
+```
diff --git a/apps/site/src/content/design-system/components/well/index.yaml b/apps/site/src/content/design-system/components/well/index.yaml
index 9d73d296a..e8f06d403 100644
--- a/apps/site/src/content/design-system/components/well/index.yaml
+++ b/apps/site/src/content/design-system/components/well/index.yaml
@@ -25,3 +25,4 @@ accessibility:
- title:
name: Accessibility API
slug: accessibility-api
+relatedInformation: ['panel', 'accordion', 'tabs']
\ No newline at end of file
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Capitalisation/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Capitalisation/content.mdoc
deleted file mode 100644
index 90b8f7b51..000000000
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Capitalisation/content.mdoc
+++ /dev/null
@@ -1,65 +0,0 @@
-Always use capitalisation for:
-
-- Branded names (but not generic names of products or services)
-
-For example:
-
-> Westpac Life savings account
->
-> Altitude Platinum credit card
-
-- Page meta titles (for SEO)
-
-For example:
-
-> Personal | Bank Accounts
-
-- Guides
-
-For example:
-
-> First Home Buyers Guide
-
-- Holidays - see [People & Diversity](/design-system/content/people-diversity) for more.
-
-For example:
-
-> Christmas, Easter, Lunar New Year
-
-- Days and months
-
-For example:
-
-> Monday, Friday
->
-> January, December
-
-- Geographical names
-
-For example:
-
-> Sydney, Australia
-
-- Languages
-
-For example:
-
-> English, Cantonese, Vietnamese
-
-- Government departments
-
-For example:
-
-> Australian Taxation Office
-
-- Job titles (official titles only)
-
-For example:
-
-> Get in touch with your Relationship Manager
-
-- Awards
-
-For example:
-
-> Best Business Bank Award 2021
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Countries/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Countries/content.mdoc
deleted file mode 100644
index 4d10e88b6..000000000
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Countries/content.mdoc
+++ /dev/null
@@ -1,19 +0,0 @@
-Take note of the way we refer to certain countries.
-
-China – use China, not PRC
-
-United Kingdom - use UK or United Kingdom, not England or Great Britain
-
-United States - use US or United States, not USA, America or United States of America.
-
-_Note: For H1 headings, US reads as ‘us’, so use U.S._
-
-For example:
-
-> China trade deal
->
-> UK stock market recovery
->
-> US stocks hit a slump
->
-> INVEST IN U.S. STOCKS
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Headings/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Headings/content.mdoc
deleted file mode 100644
index ba8f15387..000000000
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Headings/content.mdoc
+++ /dev/null
@@ -1,9 +0,0 @@
-Headings always use sentence-case (not title-case), excluding H1 page headings which are all-caps.
-
-For example:
-
-> Do: Get $3k cashback when you refinance to us
->
-> Don’t: Get $3K Cashback When You Refinance To Us
-
-_Note: No full stops on the end of any headings – see_ [_Headings and subheadings_](/design-system/content/headings-subheadings)_._
diff --git a/apps/site/src/content/design-system/content/writing-for-digital/design/Principles/content.mdoc b/apps/site/src/content/design-system/content/writing-for-digital/design/Principles/content.mdoc
deleted file mode 100644
index 328757b02..000000000
--- a/apps/site/src/content/design-system/content/writing-for-digital/design/Principles/content.mdoc
+++ /dev/null
@@ -1,13 +0,0 @@
-Our writing principles guide the way we solve customer problems and make decisions across the Westpac brands. You should also follow the Westpac Tone of Voice guidelines.
-
-**Helpful**
-
-We create content that enables customers to get their banking done efficiently and effectively.
-
-**Simple**
-
-We help customers understand our offering and its implications, giving them control over their finances and personal data.
-
-**Accessible and inclusive**
-
-We write in a way that promotes empathy, understanding and acceptance of diverse backgrounds so that every customer can interact with ease.
diff --git a/apps/site/src/content/design-system/development/get-started/design/Pre-requisites/content.mdoc b/apps/site/src/content/design-system/development/get-started/design/Pre-requisites/content.mdoc
deleted file mode 100644
index e24f2f32a..000000000
--- a/apps/site/src/content/design-system/development/get-started/design/Pre-requisites/content.mdoc
+++ /dev/null
@@ -1,7 +0,0 @@
-All GEL components have a couple of peer dependencies so please ensure the following are installed:
-
-npm install react@^17.0.2 @react-spring/web@^9.2.4
-
-npm install react@^17.0.2 @react\-spring/web@^9.2.4
-
-/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } }
diff --git a/apps/site/src/content/design-system/development/get-started/design/Resources/content.mdoc b/apps/site/src/content/design-system/development/get-started/design/Resources/content.mdoc
deleted file mode 100644
index da9f79851..000000000
--- a/apps/site/src/content/design-system/development/get-started/design/Resources/content.mdoc
+++ /dev/null
@@ -1,5 +0,0 @@
-All our components can be found on [npm](https://www.npmjs.com/search?q=%40westpac) under the @westpac/ prefix.
-
-Please raise any issues on the [Github](https://github.com/WestpacGEL/GEL) repo.
-
-We use the css-in-js library emotion to style our components. Visit the [emotion docs](https://emotion.sh/docs/introduction) to learn more about installation and usage.
diff --git a/apps/site/src/content/design-system/development/guides/brand/design/useBrand/content.mdoc b/apps/site/src/content/design-system/development/guides/brand/design/useBrand/content.mdoc
deleted file mode 100644
index 0088f5bd6..000000000
--- a/apps/site/src/content/design-system/development/guides/brand/design/useBrand/content.mdoc
+++ /dev/null
@@ -1,13 +0,0 @@
-To easily access these brand variables within your application, we have created a useBrand() hook.
-
-\# Example usage import { useBrand } from '@westpac/core'; const { COLORS } = useBrand(); const Component = (props) =>
-
-\# Example usage
-
-import { useBrand } from '@westpac/core';
-
-const { COLORS } \= useBrand();
-
-const Component \= (props) \=>
-
-/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } }
diff --git a/apps/site/src/content/design-system/patterns/personal-details/email/design/Email/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/email/design/Email/content.mdoc
deleted file mode 100644
index df820f37f..000000000
--- a/apps/site/src/content/design-system/patterns/personal-details/email/design/Email/content.mdoc
+++ /dev/null
@@ -1,11 +0,0 @@
-### Base pattern
-
-This is email capture at its simplest with the hint text doing some of the work in order to ensure the user inputs their correct details. This base pattern can be used with additional fields and questions for specific use cases, ie when asking the user to update their details within our secure environment, you may need to allow them to add multiple email addresses.
-
-Loading...
-
-### Usage example
-
-If email communication is critical to the success of the form, requiring the user to confirm their details, may yield better results by managing mistakes - despite the higher level of user effort required to input their email address twice.
-
-Loading...
diff --git a/apps/site/src/content/design-system/patterns/personal-details/employment/design/Employment/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/employment/design/Employment/content.mdoc
deleted file mode 100644
index 357078b8b..000000000
--- a/apps/site/src/content/design-system/patterns/personal-details/employment/design/Employment/content.mdoc
+++ /dev/null
@@ -1,11 +0,0 @@
-### Base pattern
-
-This is the pattern in its simplest form, additional fields and questions can be added for specific use cases, ie the details required for completing a credit card application (see usage example below), as opposed updating your information within the secure environment.
-
-Loading...
-
-### Usage example
-
-This example shows the base pattern used with additional questions when further details of employment are required; Employer name and duration.
-
-Loading...
diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts
index b20e5bdc0..34663735f 100644
--- a/apps/site/tailwind.config.ts
+++ b/apps/site/tailwind.config.ts
@@ -48,6 +48,9 @@ const config: Config = withGEL({
'gel-muted': '#575F65',
'gel-hover': '#F9FAFB',
},
+ maxWidth: {
+ 'gel-container': '71.5rem',
+ },
},
},
safelist: [
diff --git a/packages/ui/src/components/grid/index.ts b/packages/ui/src/components/grid/index.ts
index 65679b03f..a0100565c 100644
--- a/packages/ui/src/components/grid/index.ts
+++ b/packages/ui/src/components/grid/index.ts
@@ -1,3 +1,4 @@
export { Grid } from './grid.component.js';
export { Container, Item } from './components/index.js';
export { type GridProps } from './grid.types.js';
+export { type ContainerProps } from './components/container/container.types.js';