diff --git a/.changeset/eighty-dots-agree.md b/.changeset/eighty-dots-agree.md
index 5aa85b46a5..aaf7fe617b 100644
--- a/.changeset/eighty-dots-agree.md
+++ b/.changeset/eighty-dots-agree.md
@@ -9,8 +9,8 @@ new:
**Column:** Add `component` support
-With `Columns` no longer adding intermidiary elements, consumers are free to control the underlying HTML element of the `Column` themselves via the `component` prop.
-The list is kept to a white list of relevant elements to the component that do not require other HTML attributes, keeping in mind that props are not blindly spread in Braid.
+With `Columns` no longer adding intermediary elements, consumers are free to control the underlying HTML element of the `Column` themselves via the `component` prop.
+Valid options are kept to a white list of elements relevant to `Column` that do not require other HTML attributes, keeping in mind that props are not blindly spread in Braid.
**EXAMPLE USAGE:**
```jsx
diff --git a/.changeset/fair-donuts-worry.md b/.changeset/fair-donuts-worry.md
new file mode 100644
index 0000000000..1cb040333d
--- /dev/null
+++ b/.changeset/fair-donuts-worry.md
@@ -0,0 +1,33 @@
+---
+'braid-design-system': major
+---
+
+Drop support for React 17.x
+
+To enable Braid to leverage newer React APIs, we are no longer providing support for React v17.x.
+React 18 was released in March 2022 and consumers were encouraged to upgrade to this as part of the Braid v32 release in Feb 2023 (which dropped React 16 support).
+
+Removing support for React 17 allows us to simplify and streamline a lot of our component APIs, which will have downstream improvements on consumer codebases.
+
+### MIGRATION GUIDE:
+Consumers still on v17 should follow the [How to Upgrade to React 18 guide].
+
+For [sku] consumers who upgraded to Braid v32 and added the "`jsx-runtime` workaround for ESM incompatibility", this can now be safely removed from their webpack configuration once updated to React 18:
+
+```diff
+// sku.config.ts
+{
+ dangerouslySetWebpackConfig: (config) =>
+ webpackMerge(config, {
+- resolve: {
+- fallback: {
+- 'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+- },
+- },
+ }),
+}
+```
+
+[sku]: https://seek-oss.github.io/sku/
+[How to Upgrade to React 18 guide]: https://react.dev/blog/2022/03/08/react-18-upgrade-guide
+[migration guide]: https://seek-oss.github.io/braid-design-system/releases#32.0.0
diff --git a/.changeset/heavy-donuts-hug.md b/.changeset/heavy-donuts-hug.md
new file mode 100644
index 0000000000..20bbf733cb
--- /dev/null
+++ b/.changeset/heavy-donuts-hug.md
@@ -0,0 +1,15 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+ - Column
+---
+
+**Column:** Prevent growing when `content` width specified
+
+Ensure that when a column `width` is specified, the column does not grow or shrink.
+Only a column with no `width` specified will fluidly adapt to the available space.
+
+Fixes a bug when all `Column` components have a defined `width`, a column specifying `content` width would incorrectly grow to consume the available space.
diff --git a/.changeset/red-ladybugs-doubt.md b/.changeset/red-ladybugs-doubt.md
new file mode 100644
index 0000000000..daf10aab3e
--- /dev/null
+++ b/.changeset/red-ladybugs-doubt.md
@@ -0,0 +1,14 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+ - Stack
+---
+
+**Stack:** Set default text alignment based on `align`
+
+As a convenience, the `align` prop sets the text alignment for the container, meaning any nested `Text` or `Heading` components will inherit this alignment by default.
+
+This can be overridden by setting the alignment explicitly on the relevant `Text` or `Heading` component.
diff --git a/packages/braid-design-system/package.json b/packages/braid-design-system/package.json
index 9202f20850..79d44634ee 100644
--- a/packages/braid-design-system/package.json
+++ b/packages/braid-design-system/package.json
@@ -253,8 +253,8 @@
"title-case": "^3.0.3"
},
"peerDependencies": {
- "react": "^17 || ^18",
- "react-dom": "^17 || ^18",
+ "react": "^18",
+ "react-dom": "^18",
"sku": ">=10.13.1"
},
"skuSkipConfigure": true,
diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx
index dbb596c205..08f2bd5bf0 100644
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx
+++ b/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import type { ComponentDocs } from 'site/types';
-import { Stack, Text, TextLink, Strong, Divider } from '../';
+import { Stack, Text, TextLink, Strong, Divider, Notice } from '../';
import { Placeholder } from '../private/Placeholder/Placeholder';
import source from '@braid-design-system/source.macro';
@@ -66,11 +66,23 @@ const docs: ComponentDocs = {
{
label: 'Horizontal alignment',
description: (
-
- Items can be aligned horizontally using the align{' '}
- prop. Responsive values are supported, e.g.{' '}
- {"align={{ mobile: 'center', tablet: 'left' }}"}
-
+ <>
+
+ Items can be aligned horizontally using the align{' '}
+ prop. Responsive values are supported, e.g.{' '}
+ {"align={{ mobile: 'center', tablet: 'left' }}"}
+
+
+
+ As a convenience, the align prop also sets the
+ text alignment for the container. This can be overridden by
+ setting alignment explicitly on the relevant{' '}
+ Text or{' '}
+ Heading{' '}
+ component.
+
+
+ >
),
Example: () =>
source(
diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.screenshots.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.screenshots.tsx
index 66844bf743..ecfb053ad2 100644
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.screenshots.tsx
+++ b/packages/braid-design-system/src/lib/components/Stack/Stack.screenshots.tsx
@@ -1,6 +1,6 @@
import React, { type ReactNode, Fragment } from 'react';
import type { ComponentScreenshot } from 'site/types';
-import { Box, Stack, Hidden } from '../';
+import { Box, Stack, Hidden, Heading, Text, Strong } from '../';
import { Placeholder } from '../private/Placeholder/Placeholder';
import { spaces } from '../../utils/docsHelpers';
@@ -161,5 +161,56 @@ export const screenshots: ComponentScreenshot = {
),
},
+ {
+ label: 'Test - Default text alignment (left)',
+ Container,
+ Example: () => (
+
+ Default heading alignment (left).
+
+ Default text alignment (left). Est quis incididunt
+ do laboris eiusmod et..
+
+
+ Explicit right alignment. Pariatur ad aute esse
+ esse sunt aliqua.
+
+
+ ),
+ },
+ {
+ label: 'Test - Default text alignment (center)',
+ Container,
+ Example: () => (
+
+ Default heading alignment (center).
+
+ Default text alignment (center). Est quis
+ incididunt do laboris eiusmod et..
+
+
+ Explicit right alignment. Pariatur ad aute esse
+ esse sunt aliqua.
+
+
+ ),
+ },
+ {
+ label: 'Test - Default text alignment (right)',
+ Container,
+ Example: () => (
+
+ Default heading alignment (right).
+
+ Default text alignment (right). Est quis incididunt
+ do laboris eiusmod et..
+
+
+ Explicit center alignment. Pariatur ad aute esse
+ esse sunt aliqua.
+
+
+ ),
+ },
],
};
diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.tsx
index 54d0924a94..1433886148 100644
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.tsx
+++ b/packages/braid-design-system/src/lib/components/Stack/Stack.tsx
@@ -39,18 +39,28 @@ export const Stack = ({
component = 'div',
children,
space = 'none',
- align = 'left',
+ align: alignProp,
data,
...restProps
-}: StackProps) => (
-
- {children}
-
-);
+}: StackProps) => {
+ /**
+ * Creating a seam between the provided prop and the default value
+ * to enable only setting the text alignment when the `align` prop
+ * is provided — not when it's defaulted.
+ */
+ const align = alignProp || 'left';
+
+ return (
+
+ {children}
+
+ );
+};