+`;
+
+exports[`ItemGroup ItemGroup component should show rounded corners when the isRounded prop is true 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -1,7 +1,7 @@
+
+
{
+ describe( 'ItemGroup component', () => {
+ it( 'should render correctly', () => {
+ const wrapper = render(
+
+ - Code is poetry
+
+ );
+ expect( wrapper.container.firstChild ).toMatchSnapshot();
+ } );
+
+ it( 'should show borders when the isBordered prop is true', () => {
+ // By default, `isBordered` is `false`
+ const { container: noBorders } = render(
+
+ - Code is poetry
+
+ );
+
+ const { container: withBorders } = render(
+
+ - Code is poetry
+
+ );
+
+ expect( noBorders.firstChild ).toMatchDiffSnapshot(
+ withBorders.firstChild
+ );
+ } );
+
+ it( 'should show rounded corners when the isRounded prop is true', () => {
+ // By default, `isRounded` is `true`
+ const { container: roundCorners } = render(
+
+ - Code is poetry
+
+ );
+
+ const { container: squaredCorners } = render(
+
+ - Code is poetry
+
+ );
+
+ expect( roundCorners.firstChild ).toMatchDiffSnapshot(
+ squaredCorners.firstChild
+ );
+ } );
+
+ it( 'should render items individually when the isSeparated prop is true', () => {
+ // By default, `isSeparated` is `false`
+ const { container: groupedItems } = render(
+
+ - Code is poetry
+
+ );
+
+ const { container: seperatedItems } = render(
+
+ - Code is poetry
+
+ );
+
+ expect( groupedItems.firstChild ).toMatchDiffSnapshot(
+ seperatedItems.firstChild
+ );
+ } );
+ } );
+
+ describe( 'Item', () => {
+ it( 'should render a button with the isAction prop is true', () => {
+ // By default, `isAction` is `false`
+ const { container: normalItem } = render(
+ - Code is poetry
+ );
+ const { container: actionItem } = render(
+ - Code is poetry
+ );
+
+ expect( normalItem.firstChild ).toMatchDiffSnapshot(
+ actionItem.firstChild
+ );
+ } );
+
+ it( 'should use different amounts of padding depending on the value of the size prop', () => {
+ // By default, `size` is `medium`
+ const { container: mediumSize } = render(
+ - Code is poetry
+ );
+
+ const { container: largeSize } = render(
+ - Code is poetry
+ );
+
+ expect( mediumSize.firstChild ).toMatchDiffSnapshot(
+ largeSize.firstChild
+ );
+ } );
+
+ it( 'should read the value of the size prop from context when the prop is not defined', () => {
+ // By default, `size` is `medium`.
+ // The instances of `Item` that don't specify a `size` prop, should
+ // fallback to the value defined on `ItemGroup` via the context.
+ const { container: mediumSize } = render(
+
+ - Code
+ - Is
+ - Poetry
+
+ );
+
+ const { container: largeSize } = render(
+
+ - Code
+ - Is
+ - Poetry
+
+ );
+
+ expect( mediumSize.firstChild ).toMatchDiffSnapshot(
+ largeSize.firstChild
+ );
+ } );
+ } );
+} );
diff --git a/packages/components/src/item-group/types.ts b/packages/components/src/item-group/types.ts
new file mode 100644
index 00000000000000..ed07be8a133f17
--- /dev/null
+++ b/packages/components/src/item-group/types.ts
@@ -0,0 +1,67 @@
+type ItemSize = 'small' | 'medium' | 'large';
+
+export interface ItemGroupProps {
+ /**
+ * Renders a border around the itemgroup.
+ *
+ * @default false
+ */
+ isBordered?: boolean;
+ /**
+ * Renders with rounded corners.
+ *
+ * @default true
+ */
+ isRounded?: boolean;
+ /**
+ * Renders a separator between each item.
+ *
+ * @default false
+ */
+ isSeparated?: boolean;
+ /**
+ * Determines the amount of padding within the component.
+ *
+ * @default 'medium'
+ */
+ size?: ItemSize;
+ /**
+ * The children elements.
+ */
+ children: React.ReactNode;
+}
+
+export interface ItemProps {
+ /**
+ * Renders the item as an interactive `button` element.
+ *
+ * @default false
+ */
+ isAction?: boolean;
+ /**
+ * Determines the amount of padding within the component.
+ *
+ * @default 'medium'
+ */
+ size?: ItemSize;
+ /**
+ * The children elements.
+ */
+ children: React.ReactNode;
+}
+
+export type ItemGroupContext = {
+ /**
+ * When true, each `Item` will be styled as an individual item (e.g. with rounded
+ * borders), instead of being part of the same UI block with the rest of the items.
+ *
+ * @default false
+ */
+ spacedAround: boolean;
+ /**
+ * Determines the amount of padding within the component.
+ *
+ * @default 'medium'
+ */
+ size: ItemSize;
+};
diff --git a/packages/components/src/ui/item-group/item.ts b/packages/components/src/ui/item-group/item.ts
deleted file mode 100644
index 7f87fe62ebc94e..00000000000000
--- a/packages/components/src/ui/item-group/item.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import { createComponent } from '../utils';
-import { useItem } from './use-item';
-
-export default createComponent( {
- useHook: useItem,
- as: 'div',
- name: 'Item',
-} );
diff --git a/packages/components/src/ui/item-group/types.ts b/packages/components/src/ui/item-group/types.ts
deleted file mode 100644
index f6273259fbf099..00000000000000
--- a/packages/components/src/ui/item-group/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-type ItemSize = 'small' | 'medium' | 'large';
-
-export interface ItemGroupProps {
- isBordered?: boolean;
- isRounded?: boolean;
- isSeparated?: boolean;
- size?: ItemSize;
-}
-
-export interface ItemProps {
- isAction?: boolean;
- size?: ItemSize;
-}
-
-export type ItemGroupContext = {
- spacedAround: boolean;
- size: ItemSize;
-};
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index d01a781b3f9c91..777590326f26cb 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -35,6 +35,7 @@
"src/h-stack/**/*",
"src/heading/**/*",
"src/icon/**/*",
+ "src/item-group/**/*",
"src/scroll-lock/**/*",
"src/scrollable/**/*",
"src/segmented-control/**/*",