diff --git a/.changeset/quick-peaches-fail.md b/.changeset/quick-peaches-fail.md
new file mode 100644
index 0000000000..a330058339
--- /dev/null
+++ b/.changeset/quick-peaches-fail.md
@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Fixes style inheritance issues by explicitly giving CSS custom properties an initial value.
diff --git a/.changeset/tough-rats-drive.md b/.changeset/tough-rats-drive.md
new file mode 100644
index 0000000000..661ae36055
--- /dev/null
+++ b/.changeset/tough-rats-drive.md
@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Remove `borderStyle` prop from Layout props.
diff --git a/.changeset/witty-pans-clean.md b/.changeset/witty-pans-clean.md
new file mode 100644
index 0000000000..7957ec3a5e
--- /dev/null
+++ b/.changeset/witty-pans-clean.md
@@ -0,0 +1,35 @@
+---
+"@channel.io/bezier-react": major
+---
+
+`AlphaStack` component has been changed to a `Stack` component, and `Stack` component has been changed to `LegacyStack` component. Changes to remove the dependency of `Stack` and `StackItem` to allow stack layouts to be configured without additional DOM elements. And improved the existing `AlphaStack` to support more Flex layout related properties like reverse, wrap, and more align options, etc. See StackProps for more information.
+
+We also added new `HStack` and `VStack` components, which are shorthand components that fix the direction prop of `AlphaStack`. As mentioned above, the existing components become `LegacyHStack`, `LegacyVStack`.
+
+The layout implemented by `StackItem` can be partially replaced by the Layout component's `grow`, `shrink` common properties and margin common properties. Note that the `align`, `justify` (align-self, justify-self in CSS flex) properties provided by `StackItem` are not provided by the Layout component.
+
+```jsx
+/* AS-IS */
+return (
+  <Stack direction="horizontal" spacing={8} style={{ width: 300, height: 50 }}>
+    <StackItem grow shrink weight={1} />
+    <StackItem weight={0} size={10} marginBefore={20}>
+      <Stack direction="vertical" />
+    </StackItem>
+  </Stack>
+)
+
+/* TO-BE */
+return (
+  <Stack direction="horizontal" spacing={8} width={300} height={50}>
+    <Box grow={1} shrink={1} />
+    <Stack direction="vertical" shrink={0} width={10} ml={12} />
+  </Stack>
+)
+```
+
+The changes also apply to other components that use `Stack` internally, and there are a few changes.
+
+- `RadioGroup` component no longer supports `as` prop.
+- `ButtonGroup` component now extends the interfaces of new `Stack`. It no longer supports `as` prop.
+- `FormGroup` component now extends the interfaces of new `Stack`. It no longer supports `as` prop.
diff --git a/packages/bezier-figma-plugin/package.json b/packages/bezier-figma-plugin/package.json
index 40ff45591a..79028cb87f 100644
--- a/packages/bezier-figma-plugin/package.json
+++ b/packages/bezier-figma-plugin/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@channel.io/bezier-icons": "^0.16.0",
-    "@channel.io/bezier-react": "workspace:^",
+    "@channel.io/bezier-react": "^1.19.0",
     "octokit": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx b/packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx
index 5a41945138..5e463ea732 100644
--- a/packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx
+++ b/packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx
@@ -11,6 +11,7 @@ import {
   ButtonStyleVariant,
   StackItem,
   Text,
+  Typography,
   VStack,
 } from '@channel.io/bezier-react'
 
@@ -26,7 +27,7 @@ function ExtractSuccess() {
   return (
     <VStack align="center" justify="center" spacing={2}>
       <StackItem>
-        <Text typo="18">아이콘 추출 성공!</Text>
+        <Text typo={Typography.Size18}>아이콘 추출 성공!</Text>
       </StackItem>
       <StackItem>
         { /* @ts-ignore */ }
diff --git a/packages/bezier-react/src/components/AlphaStack/AlphaStack.stories.tsx b/packages/bezier-react/src/components/AlphaStack/AlphaStack.stories.tsx
deleted file mode 100644
index 264c908e59..0000000000
--- a/packages/bezier-react/src/components/AlphaStack/AlphaStack.stories.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react'
-
-import {
-  type Meta,
-  type StoryFn,
-  type StoryObj,
-} from '@storybook/react'
-
-import { css } from '~/src/foundation/FoundationStyledComponent'
-
-import { range } from '~/src/utils/number'
-
-import { AlphaStack } from './AlphaStack'
-
-const FLEX_PROPERTIES = ['start', 'center', 'end', 'stretch']
-
-const meta = {
-  component: AlphaStack,
-  argTypes: {
-    spacing: {
-      control: {
-        type: 'number',
-      },
-    },
-    direction: {
-      control: {
-        type: 'radio',
-      },
-      options: ['horizontal', 'vertical'],
-    },
-    justify: {
-      control: {
-        type: 'radio',
-      },
-      options: FLEX_PROPERTIES,
-    },
-    align: {
-      control: {
-        type: 'radio',
-      },
-      options: FLEX_PROPERTIES,
-    },
-  },
-} satisfies Meta<typeof AlphaStack>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-const Template: StoryFn<typeof AlphaStack> = (args) => (
-  <AlphaStack {...args}>
-    <>
-      { range(4).map((i) =>
-        <div style={{ height: '30px', width: '30px', backgroundColor: 'red' }} key={`item-${i}`}>{ i }</div>,
-      ) }
-    </>
-  </AlphaStack>
-)
-
-export const Primary: Story = {
-  render: Template,
-
-  args: {
-    direction: 'vertical',
-    style: {
-      width: '200px',
-      height: '200px',
-    },
-    interpolation: css`
-      background-color: blue;
-    `,
-  },
-}
diff --git a/packages/bezier-react/src/components/AlphaStack/AlphaStack.styled.ts b/packages/bezier-react/src/components/AlphaStack/AlphaStack.styled.ts
deleted file mode 100644
index ed6748bc86..0000000000
--- a/packages/bezier-react/src/components/AlphaStack/AlphaStack.styled.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { styled } from '~/src/foundation'
-
-import type { AlphaStackProps } from './AlphaStack.types'
-
-interface ContainerProps extends
-  Required<Pick<AlphaStackProps, 'interpolation' | 'direction' | 'justify' | 'align' | 'spacing'>> {}
-
-export const Container = styled.div<ContainerProps>`
-  display: flex;
-  flex-direction: var(--b-alpha-stack-direction);
-  gap: var(--b-alpha-stack-spacing);
-  align-items: var(--b-alpha-stack-align);
-  justify-content: var(--b-alpha-stack-justify);
-
-  @supports not(gap: var(--b-alpha-stack-spacing)) {
-    margin-top: calc(var(--b-alpha-stack-spacing) * -1);
-    margin-left: calc(var(--b-alpha-stack-spacing) * -1);
-
-    > * {
-      margin-top: var(--b-alpha-stack-spacing);
-      margin-left: var(--b-alpha-stack-spacing);
-    }
-  }
-  ${({ interpolation }) => interpolation}
-`
diff --git a/packages/bezier-react/src/components/AlphaStack/AlphaStack.test.tsx b/packages/bezier-react/src/components/AlphaStack/AlphaStack.test.tsx
deleted file mode 100644
index 12f6197775..0000000000
--- a/packages/bezier-react/src/components/AlphaStack/AlphaStack.test.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react'
-
-import { css } from '~/src/foundation'
-
-import { render } from '~/src/utils/test'
-
-import { AlphaStack } from './AlphaStack'
-
-describe('alpha-Stack', () => {
-  describe('Flex layout', () => {
-    it('creates a flexbox', () => {
-      const { getByTestId } = render(<AlphaStack direction="horizontal" testId="alpha-stack" />)
-
-      expect(getByTestId('alpha-stack')).toHaveStyle('display: flex')
-    })
-
-    it('creates a horizontal flexbox when given direction="horizontal"', () => {
-      const { getByTestId } = render(<AlphaStack direction="horizontal" testId="alpha-stack" spacing={10} />)
-
-      expect(getByTestId('alpha-stack')).toHaveStyle('flex-direction: var(--b-alpha-stack-direction)')
-      expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-direction: row')
-      expect(getByTestId('alpha-stack')).toHaveStyle('gap: var(--b-alpha-stack-spacing)')
-      expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-spacing: 10px')
-    })
-
-    it('creates a vertical flexbox when given direction="vertical"', () => {
-      const { getByTestId } = render(<AlphaStack direction="vertical" testId="alpha-stack" spacing={10} />)
-
-      expect(getByTestId('alpha-stack')).toHaveStyle('flex-direction: var(--b-alpha-stack-direction)')
-      expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-direction: column')
-      expect(getByTestId('alpha-stack')).toHaveStyle('gap: var(--b-alpha-stack-spacing)')
-      expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-spacing: 10px')
-    })
-  })
-
-  describe('Supports BezierComponentProps interface', () => {
-    it('supports as prop', () => {
-      const { getByTestId } = render(<AlphaStack direction="horizontal" testId="alpha-stack" as="main" />)
-
-      expect(getByTestId('alpha-stack').tagName).toBe('MAIN')
-    })
-
-    it('supports style prop', () => {
-      const { getByTestId } = render(<AlphaStack direction="horizontal" testId="alpha-stack" style={{ backgroundColor: 'red' }} />)
-
-      expect(getByTestId('alpha-stack')).toHaveStyle({ 'background-color': 'red' })
-    })
-
-    it('supports className prop', () => {
-      const { getByTestId } = render(<AlphaStack direction="horizontal" testId="alpha-stack" className="foo" />)
-
-      expect(getByTestId('alpha-stack')).toHaveClass('foo')
-    })
-
-    it('supports interpolation prop', () => {
-      const { getByTestId } = render(<AlphaStack direction="horizontal" testId="alpha-stack" interpolation={css`background-color: red;`} />)
-
-      expect(getByTestId('alpha-stack')).toHaveStyle({ 'background-color': 'red' })
-    })
-  })
-})
diff --git a/packages/bezier-react/src/components/AlphaStack/AlphaStack.tsx b/packages/bezier-react/src/components/AlphaStack/AlphaStack.tsx
deleted file mode 100644
index 304978096f..0000000000
--- a/packages/bezier-react/src/components/AlphaStack/AlphaStack.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, {
-  type Ref,
-  forwardRef,
-  useMemo,
-} from 'react'
-
-import { px } from '~/src/utils/style'
-
-import { flex } from '~/src/components/Stack/util'
-
-import type { AlphaStackProps } from './AlphaStack.types'
-
-import * as Styled from './AlphaStack.styled'
-
-/**
- * `AlphaStack` provides an abstraction of **flex layout** so that
- * rendering of child elements **linearly** can be done
- * with simplified options.
- *
- * `AlphaStack` always fills the parent element.
- *
- * Be reminded that the first depth children element of AlphaStack would be StackItem that is adjusted by flex layout
- *
- * @example
- *
- * ```tsx
- * <AlphaStack direction="horizontal" spacing={8}>
- *  <div>{ ... }</div>
- *  <div>{ ... }</div>
- * </AlphaStack>
- * ```
- */
-export const AlphaStack = forwardRef(function AlphaStack(
-  {
-    as = 'div',
-    testId = 'bezier-react-alpha-stack',
-    className,
-    interpolation,
-    style,
-    children,
-    direction,
-    justify = 'start',
-    align = 'stretch',
-    spacing = 0,
-    ...rest
-  }: AlphaStackProps,
-  forwardedRef: Ref<HTMLElement>,
-) {
-  const stackStyle = useMemo(() => ({
-    ...style,
-    '--b-alpha-stack-direction': direction === 'horizontal' ? 'row' : 'column',
-    '--b-alpha-stack-justify': flex(justify),
-    '--b-alpha-stack-align': flex(align),
-    '--b-alpha-stack-spacing': px(spacing),
-  } as React.CSSProperties),
-  [
-    align,
-    direction,
-    justify,
-    spacing,
-    style,
-  ])
-
-  return (
-    <Styled.Container
-      ref={forwardedRef}
-      as={as}
-      data-testid={testId}
-      style={stackStyle}
-      className={className}
-      interpolation={interpolation}
-      {...rest}
-    >
-      { children }
-    </Styled.Container>
-  )
-})
diff --git a/packages/bezier-react/src/components/AlphaStack/AlphaStack.types.ts b/packages/bezier-react/src/components/AlphaStack/AlphaStack.types.ts
deleted file mode 100644
index d538d17df5..0000000000
--- a/packages/bezier-react/src/components/AlphaStack/AlphaStack.types.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type {
-  BezierComponentProps,
-  ChildrenProps,
-} from '~/src/types/ComponentProps'
-
-import type { AxisAlignment } from '~/src/components/Stack/types'
-
-interface AlphaStackOptions {
-  /**
-   * Direction of this stack.
-   */
-  direction: 'horizontal' | 'vertical'
-
-  /**
-   * Determines the default aligning of children along the main axis.
-   *
-   * @default start
-   */
-  justify?: AxisAlignment
-
-  /**
-   * Determines the default aligning of children along the cross axis.
-   *
-   * @default stretch
-   */
-  align?: AxisAlignment
-
-  /**
-   * Default spacing between children, in pixels.
-   *
-   * @remarks
-   * `spacing` could be enumerated in later design, if bezier design system
-   * decides to define a guideline for linear layout.
-   *
-   * @default 0
-   */
-  spacing?: number
-}
-
-export interface AlphaStackProps extends
-  BezierComponentProps,
-  ChildrenProps,
-  React.HTMLAttributes<HTMLElement>,
-  AlphaStackOptions {}
diff --git a/packages/bezier-react/src/components/AlphaStack/index.ts b/packages/bezier-react/src/components/AlphaStack/index.ts
deleted file mode 100644
index f91ccf7ed5..0000000000
--- a/packages/bezier-react/src/components/AlphaStack/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { AlphaStack } from './AlphaStack'
-export type { AlphaStackProps } from './AlphaStack.types'
diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap b/packages/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
index 2c50c92202..ef07a19d51 100644
--- a/packages/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
+++ b/packages/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
@@ -246,7 +246,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     style="--b-avatar-group-ellipsis-mr: 5px; --b-avatar-group-ellipsis-ml: 4px;"
   >
     <span
-      class="margin Text typo-13 c5"
+      class="Text typo-13 margin c5"
       data-testid="bezier-react-text"
       foundation="[object Object]"
     >
diff --git a/packages/bezier-react/src/components/Avatars/Avatars.stories.tsx b/packages/bezier-react/src/components/Avatars/Avatars.stories.tsx
index 36e6c13499..60ce1be6e8 100644
--- a/packages/bezier-react/src/components/Avatars/Avatars.stories.tsx
+++ b/packages/bezier-react/src/components/Avatars/Avatars.stories.tsx
@@ -24,10 +24,10 @@ import {
   EmojiSize,
 } from '~/src/components/Emoji'
 import {
-  HStack,
-  StackItem,
-  VStack,
-} from '~/src/components/Stack'
+  LegacyHStack,
+  LegacyStackItem,
+  LegacyVStack,
+} from '~/src/components/LegacyStack'
 import { StatusType } from '~/src/components/Status'
 import { Text } from '~/src/components/Text'
 
@@ -85,35 +85,35 @@ const NAVER_TALK_AVATAR = {
 }
 
 export const Overview: StoryFn<{}> = () => (
-  <VStack spacing={16}>
-    <StackItem>
-      <HStack spacing={16}>
+  <LegacyVStack spacing={16}>
+    <LegacyStackItem>
+      <LegacyHStack spacing={16}>
         { [AvatarSize.Size20, AvatarSize.Size36, AvatarSize.Size72, AvatarSize.Size120]
           .map(size => (
-            <StackItem key={size}>
+            <LegacyStackItem key={size}>
               <Avatar
                 {...SAMPLE_AVATARS[0]}
                 size={size}
               />
-            </StackItem>
+            </LegacyStackItem>
           )) }
-      </HStack>
-    </StackItem>
+      </LegacyHStack>
+    </LegacyStackItem>
 
-    <StackItem>
-      <HStack spacing={16}>
+    <LegacyStackItem>
+      <LegacyHStack spacing={16}>
         { [StatusType.Online, StatusType.Offline, StatusType.Lock]
           .map(status => (
-            <StackItem key={status}>
+            <LegacyStackItem key={status}>
               <Avatar
                 {...SAMPLE_AVATARS[0]}
                 status={status}
                 size={AvatarSize.Size36}
               />
-            </StackItem>
+            </LegacyStackItem>
           )) }
 
-        <StackItem>
+        <LegacyStackItem>
           <Avatar
             {...SAMPLE_AVATARS[0]}
             size={AvatarSize.Size36}
@@ -124,45 +124,45 @@ export const Overview: StoryFn<{}> = () => (
               showBorder
             />
           </Avatar>
-        </StackItem>
-      </HStack>
-    </StackItem>
+        </LegacyStackItem>
+      </LegacyHStack>
+    </LegacyStackItem>
 
-    <StackItem>
-      <HStack spacing={16}>
+    <LegacyStackItem>
+      <LegacyHStack spacing={16}>
         { [AvatarSize.Size24, AvatarSize.Size36, AvatarSize.Size42, AvatarSize.Size48]
           .map((size, i) => (
-            <StackItem key={size}>
+            <LegacyStackItem key={size}>
               <CheckableAvatar
                 {...SAMPLE_AVATARS[0]}
                 size={size}
                 checked={i % 2 === 0}
                 disabled={i % 3 === 1}
               />
-            </StackItem>
+            </LegacyStackItem>
           )) }
-      </HStack>
-    </StackItem>
+      </LegacyHStack>
+    </LegacyStackItem>
 
-    <StackItem>
-      <HStack spacing={16}>
-        <StackItem>
+    <LegacyStackItem>
+      <LegacyHStack spacing={16}>
+        <LegacyStackItem>
           <AvatarGroup max={4} size={AvatarSize.Size36}>
             { range(6).map((i) => (
               <Avatar key={i} {...SAMPLE_AVATARS[0]} />
             )) }
           </AvatarGroup>
-        </StackItem>
+        </LegacyStackItem>
 
-        <StackItem>
+        <LegacyStackItem>
           <AvatarGroup max={4} spacing={-8} size={AvatarSize.Size36}>
             { range(6).map((i) => (
               <Avatar key={i} {...SAMPLE_AVATARS[0]} />
             )) }
           </AvatarGroup>
-        </StackItem>
+        </LegacyStackItem>
 
-        <StackItem>
+        <LegacyStackItem>
           <AvatarGroup
             max={4}
             spacing={-8}
@@ -173,21 +173,21 @@ export const Overview: StoryFn<{}> = () => (
               <Avatar key={i} {...SAMPLE_AVATARS[0]} />
             )) }
           </AvatarGroup>
-        </StackItem>
-      </HStack>
-    </StackItem>
-  </VStack>
+        </LegacyStackItem>
+      </LegacyHStack>
+    </LegacyStackItem>
+  </LegacyVStack>
 )
 
 export const UsageBasic: StoryObj<{}> = {
   render: () => (
-    <HStack spacing={16}>
+    <LegacyHStack spacing={16}>
       { SAMPLE_AVATARS.map((avatar) => (
-        <StackItem key={avatar.name}>
+        <LegacyStackItem key={avatar.name}>
           <Avatar {...avatar} size={AvatarSize.Size36} />
-        </StackItem>
+        </LegacyStackItem>
       )) }
-    </HStack>
+    </LegacyHStack>
   ),
 
   name: 'Usage (basic)',
@@ -195,7 +195,7 @@ export const UsageBasic: StoryObj<{}> = {
 
 export const UsagePresetStatus: StoryObj<{}> = {
   render: () => (
-    <HStack spacing={16}>
+    <LegacyHStack spacing={16}>
       { [
         StatusType.Online,
         StatusType.Offline,
@@ -203,15 +203,15 @@ export const UsagePresetStatus: StoryObj<{}> = {
         StatusType.OnlineCrescent,
         StatusType.OfflineCrescent,
       ].map((status) => (
-        <StackItem key={status}>
+        <LegacyStackItem key={status}>
           <Avatar
             {...SAMPLE_AVATARS[0]}
             status={status}
             size={AvatarSize.Size24}
           />
-        </StackItem>
+        </LegacyStackItem>
       )) }
-    </HStack>
+    </LegacyHStack>
   ),
 
   name: 'Usage (with preset status)',
@@ -219,17 +219,17 @@ export const UsagePresetStatus: StoryObj<{}> = {
 
 export const UsagePresetStatusWithSize: StoryObj<{}> = {
   render: () => (
-    <HStack spacing={16}>
+    <LegacyHStack spacing={16}>
       { [AvatarSize.Size24, AvatarSize.Size36, AvatarSize.Size48].map((size) => (
-        <StackItem key={size}>
+        <LegacyStackItem key={size}>
           <Avatar
             {...SAMPLE_AVATARS[0]}
             status={StatusType.Online}
             size={size}
           />
-        </StackItem>
+        </LegacyStackItem>
       )) }
-    </HStack>
+    </LegacyHStack>
   ),
 
   name: 'Usage (with preset status and size)',
@@ -247,26 +247,26 @@ const EmojiStatusWrapper = styled.div`
 
 export const UsageCustomStatus: StoryObj<{}> = {
   render: () => (
-    <HStack spacing={16}>
-      <StackItem>
+    <LegacyHStack spacing={16}>
+      <LegacyStackItem>
         <Avatar {...SAMPLE_AVATARS[0]} size={AvatarSize.Size36}>
           <Avatar {...KAKAO_AVATAR} size={AvatarSize.Size20} showBorder />
         </Avatar>
-      </StackItem>
+      </LegacyStackItem>
 
-      <StackItem>
+      <LegacyStackItem>
         <Avatar {...SAMPLE_AVATARS[0]} size={AvatarSize.Size36}>
           <Avatar {...NAVER_TALK_AVATAR} size={AvatarSize.Size20} showBorder />
         </Avatar>
-      </StackItem>
+      </LegacyStackItem>
 
-      <StackItem>
+      <LegacyStackItem>
         <Avatar {...SAMPLE_AVATARS[0]} size={AvatarSize.Size36}>
           <Avatar {...SAMPLE_AVATARS[0]} size={AvatarSize.Size20} showBorder />
         </Avatar>
-      </StackItem>
+      </LegacyStackItem>
 
-      <StackItem>
+      <LegacyStackItem>
         <Avatar {...SAMPLE_AVATARS[0]} size={AvatarSize.Size36}>
           <EmojiStatusWrapper>
             <Emoji
@@ -276,8 +276,8 @@ export const UsageCustomStatus: StoryObj<{}> = {
             />
           </EmojiStatusWrapper>
         </Avatar>
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Usage (with custom status)',
@@ -303,53 +303,53 @@ export const UsageDisabled: StoryObj<{}> = {
 
 export const UsageCheckableAvatar: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16}>
-      <StackItem>
-        <HStack align="center" spacing={24}>
-          <StackItem size={270}>
+    <LegacyVStack spacing={16}>
+      <LegacyStackItem>
+        <LegacyHStack align="center" spacing={24}>
+          <LegacyStackItem size={270}>
             <Text color="txt-black-darkest">Checkable (checked=false)</Text>
-          </StackItem>
+          </LegacyStackItem>
 
-          <StackItem>
+          <LegacyStackItem>
             <CheckableAvatar {...SAMPLE_AVATARS[0]} size={AvatarSize.Size36} />
-          </StackItem>
-        </HStack>
-      </StackItem>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
 
-      <StackItem>
-        <HStack align="center" spacing={24}>
-          <StackItem size={270}>
+      <LegacyStackItem>
+        <LegacyHStack align="center" spacing={24}>
+          <LegacyStackItem size={270}>
             <Text color="txt-black-darkest">
               Checkable (checked=false, disabled)
             </Text>
-          </StackItem>
+          </LegacyStackItem>
 
-          <StackItem>
+          <LegacyStackItem>
             <CheckableAvatar
               {...SAMPLE_AVATARS[0]}
               size={AvatarSize.Size36}
               disabled
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
 
-      <StackItem>
-        <HStack align="center" spacing={24}>
-          <StackItem size={270}>
+      <LegacyStackItem>
+        <LegacyHStack align="center" spacing={24}>
+          <LegacyStackItem size={270}>
             <Text color="txt-black-darkest">Checkable (checked=true)</Text>
-          </StackItem>
+          </LegacyStackItem>
 
-          <StackItem>
+          <LegacyStackItem>
             <CheckableAvatar
               {...SAMPLE_AVATARS[0]}
               size={AvatarSize.Size36}
               checked
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-    </VStack>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Usage (checkable avatars)',
@@ -357,37 +357,37 @@ export const UsageCheckableAvatar: StoryObj<{}> = {
 
 export const UsageGroupEllipsis: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16}>
-      <StackItem>
-        <HStack align="center" spacing={24}>
-          <StackItem size={150}>
+    <LegacyVStack spacing={16}>
+      <LegacyStackItem>
+        <LegacyHStack align="center" spacing={24}>
+          <LegacyStackItem size={150}>
             <Text color="txt-black-darkest">Ellipsis type = Icon</Text>
-          </StackItem>
+          </LegacyStackItem>
 
-          <StackItem>
+          <LegacyStackItem>
             <AvatarGroup max={4} size={AvatarSize.Size36}>
               { SAMPLE_AVATARS.map((avatar) => (
                 <Avatar key={avatar.name} {...avatar} />
               )) }
             </AvatarGroup>
-          </StackItem>
-        </HStack>
-      </StackItem>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
 
-      <StackItem>
-        <HStack align="center" spacing={24}>
-          <StackItem size={150}>
+      <LegacyStackItem>
+        <LegacyHStack align="center" spacing={24}>
+          <LegacyStackItem size={150}>
             <Text color="txt-black-darkest">Ellipsis type = Count</Text>
-          </StackItem>
+          </LegacyStackItem>
 
-          <StackItem>
+          <LegacyStackItem>
             <AvatarGroup max={4} size={AvatarSize.Size36} ellipsisType={AvatarGroupEllipsisType.Count}>
               { SAMPLE_AVATARS.map(avatar => <Avatar key={avatar.name} {...avatar} />) }
             </AvatarGroup>
-          </StackItem>
-        </HStack>
-      </StackItem>
-    </VStack>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Usage (avatar group with ellipsis)',
@@ -395,27 +395,27 @@ export const UsageGroupEllipsis: StoryObj<{}> = {
 
 export const UsageGroupSpacing: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16}>
-      <StackItem>
+    <LegacyVStack spacing={16}>
+      <LegacyStackItem>
         <AvatarGroup max={4} spacing={8}>
           { SAMPLE_AVATARS.map((avatar) => (
             <Avatar key={avatar.name} {...avatar} />
           )) }
         </AvatarGroup>
-      </StackItem>
+      </LegacyStackItem>
 
-      <StackItem>
+      <LegacyStackItem>
         <AvatarGroup max={4} spacing={2}>
           { SAMPLE_AVATARS.map(avatar => <Avatar key={avatar.name} {...avatar} />) }
         </AvatarGroup>
-      </StackItem>
+      </LegacyStackItem>
 
-      <StackItem>
+      <LegacyStackItem>
         <AvatarGroup max={4} spacing={-8}>
           { SAMPLE_AVATARS.map(avatar => <Avatar key={avatar.name} {...avatar} />) }
         </AvatarGroup>
-      </StackItem>
-    </VStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Usage (avatar group with spacing)',
@@ -423,7 +423,7 @@ export const UsageGroupSpacing: StoryObj<{}> = {
 
 export const VariantsSize: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16}>
+    <LegacyVStack spacing={16}>
       { [
         AvatarSize.Size20,
         AvatarSize.Size24,
@@ -436,21 +436,21 @@ export const VariantsSize: StoryObj<{}> = {
         AvatarSize.Size120,
       ]
         .map(size => (
-          <StackItem key={size}>
-            <HStack spacing={24}>
-              <StackItem>
+          <LegacyStackItem key={size}>
+            <LegacyHStack spacing={24}>
+              <LegacyStackItem>
                 <Text color="txt-black-darkest">{ `Size${size}` }</Text>
-              </StackItem>
-              <StackItem>
+              </LegacyStackItem>
+              <LegacyStackItem>
                 <Avatar
                   {...SAMPLE_AVATARS[0]}
                   size={size}
                 />
-              </StackItem>
-            </HStack>
-          </StackItem>
+              </LegacyStackItem>
+            </LegacyHStack>
+          </LegacyStackItem>
         )) }
-    </VStack>
+    </LegacyVStack>
   ),
 
   name: 'Variants (size)',
diff --git a/packages/bezier-react/src/components/Banner/Banner.stories.tsx b/packages/bezier-react/src/components/Banner/Banner.stories.tsx
index 8484a769d1..f3d32e9969 100644
--- a/packages/bezier-react/src/components/Banner/Banner.stories.tsx
+++ b/packages/bezier-react/src/components/Banner/Banner.stories.tsx
@@ -21,9 +21,9 @@ import { noop } from '~/src/utils/function'
 import { getObjectFromEnum } from '~/src/utils/story'
 
 import {
-  StackItem,
-  VStack,
-} from '~/src/components/Stack'
+  LegacyStackItem,
+  LegacyVStack,
+} from '~/src/components/LegacyStack'
 
 import { Banner } from './Banner'
 import mdx from './Banner.mdx'
@@ -76,71 +76,71 @@ export const Playground: StoryObj<BannerProps> = {
 }
 
 export const Overview: StoryFn<{}> = () => (
-  <VStack spacing={6} align="stretch">
-    <StackItem>
+  <LegacyVStack spacing={6} align="stretch">
+    <LegacyStackItem>
       <Banner
         variant={BannerVariant.Default}
         icon={LightbulbIcon}
         content="Information here."
         actionIcon={CancelIcon}
       />
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Banner
         variant={BannerVariant.Blue}
         icon={LightbulbIcon}
         content="Information here."
       />
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Banner
         variant={BannerVariant.Cobalt}
         icon={InfoIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Banner
         variant={BannerVariant.Green}
         icon={CheckCircleFilledIcon}
         content="Now Running..."
       />
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Banner
         variant={BannerVariant.Orange}
         icon={ErrorTriangleFilledIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Banner
         variant={BannerVariant.Red}
         icon={BlockIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Banner
         variant={BannerVariant.Alt}
         icon={Hourglass3Icon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
-    </StackItem>
-  </VStack>
+    </LegacyStackItem>
+  </LegacyVStack>
 )
 
 export const UsageMinWidth: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={6} align="start">
-      <StackItem>
+    <LegacyVStack spacing={6} align="start">
+      <LegacyStackItem>
         <Banner
           variant={BannerVariant.Orange}
           icon={ErrorTriangleFilledIcon}
           content="네."
         />
-      </StackItem>
-    </VStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Usage (min width)',
@@ -148,29 +148,29 @@ export const UsageMinWidth: StoryObj<{}> = {
 
 export const UsageFullWidth: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={6} align="start">
-      <StackItem style={{ width: 360, border: '1px solid red' }}>
+    <LegacyVStack spacing={6} align="start">
+      <LegacyStackItem style={{ width: 360, border: '1px solid red' }}>
         <Banner
           variant={BannerVariant.Orange}
           icon={ErrorTriangleFilledIcon}
           content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
         />
-      </StackItem>
-      <StackItem style={{ width: 480, border: '1px solid red' }}>
+      </LegacyStackItem>
+      <LegacyStackItem style={{ width: 480, border: '1px solid red' }}>
         <Banner
           variant={BannerVariant.Orange}
           icon={ErrorTriangleFilledIcon}
           content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
         />
-      </StackItem>
-      <StackItem style={{ width: 720, border: '1px solid red' }}>
+      </LegacyStackItem>
+      <LegacyStackItem style={{ width: 720, border: '1px solid red' }}>
         <Banner
           variant={BannerVariant.Orange}
           icon={ErrorTriangleFilledIcon}
           content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
         />
-      </StackItem>
-    </VStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Usage (full width)',
@@ -178,8 +178,8 @@ export const UsageFullWidth: StoryObj<{}> = {
 
 export const UsageMaxWidth: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={6} align="start">
-      <StackItem>
+    <LegacyVStack spacing={6} align="start">
+      <LegacyStackItem>
         <Banner
           variant={BannerVariant.Cobalt}
           icon={InfoIcon}
@@ -188,8 +188,8 @@ export const UsageMaxWidth: StoryObj<{}> = {
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis laoreet felis. Fusce sit amet blandit sem. Aliquam erat volutpat. Pellentesque tempor arcu non scelerisque rutrum. Proin placerat imperdiet gravida. In efficitur augue ut maximus placerat. Quisque vitae pellentesque urna. Sed sagittis enim quis laoreet dictum. Morbi fringilla, justo sit amet dapibus bibendum, nisl nisl suscipit dolor, eget venenatis urna velit in dolor.\n\nNunc accumsan ligula sit amet interdum accumsan. Etiam gravida est risus, in interdum elit egestas ut. Aliquam sit amet lorem malesuada, commodo tortor eu, semper dui. Integer ultricies porta ex sed tincidunt. Sed accumsan orci eu arcu facilisis congue ac hendrerit lacus. Etiam erat velit, interdum auctor cursus at, interdum vel augue. Integer gravida, nibh vel lacinia blandit, ex quam dapibus lectus, at sollicitudin lorem purus vel nulla. Suspendisse ac tellus eget risus condimentum facilisis sed vitae turpis. Fusce fringilla commodo aliquam. Quisque eget justo purus. Suspendisse ut lobortis turpis, vitae fermentum augue. Donec viverra, orci ut lobortis euismod, est nibh iaculis metus, sit amet mattis ex elit eget tellus.'
           }
         />
-      </StackItem>
-    </VStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Usage (max width)',
@@ -197,8 +197,8 @@ export const UsageMaxWidth: StoryObj<{}> = {
 
 export const UsageConsecutive: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={6} align="stretch">
-      <StackItem>
+    <LegacyVStack spacing={6} align="stretch">
+      <LegacyStackItem>
         <Banner
           variant={BannerVariant.Cobalt}
           icon={InfoIcon}
@@ -206,15 +206,15 @@ export const UsageConsecutive: StoryObj<{}> = {
           hasLink
           linkText="설정하기"
         />
-      </StackItem>
-      <StackItem>
+      </LegacyStackItem>
+      <LegacyStackItem>
         <Banner
           variant={BannerVariant.Orange}
           icon={ErrorTriangleFilledIcon}
           content="빠진 내용을 모두 입력해주세요."
         />
-      </StackItem>
-      <StackItem>
+      </LegacyStackItem>
+      <LegacyStackItem>
         <Banner
           variant={BannerVariant.Default}
           icon={InfoIcon}
@@ -223,8 +223,8 @@ export const UsageConsecutive: StoryObj<{}> = {
           linkText="사용안내"
           actionIcon={CancelIcon}
         />
-      </StackItem>
-    </VStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Usage (consecutive)',
diff --git a/packages/bezier-react/src/components/Banner/Banner.styled.ts b/packages/bezier-react/src/components/Banner/Banner.styled.ts
index 57de471ffe..6d8070ad7a 100644
--- a/packages/bezier-react/src/components/Banner/Banner.styled.ts
+++ b/packages/bezier-react/src/components/Banner/Banner.styled.ts
@@ -5,9 +5,9 @@ import type { VariantProps } from '~/src/types/ComponentProps'
 import { Icon } from '~/src/components/Icon'
 import { LegacyIcon } from '~/src/components/LegacyIcon'
 import {
-  StackItem as BaseStackItem,
-  HStack,
-} from '~/src/components/Stack'
+  LegacyStackItem as BaseStackItem,
+  LegacyHStack,
+} from '~/src/components/LegacyStack'
 import { Text } from '~/src/components/Text'
 
 import {
@@ -32,7 +32,7 @@ const Link = styled(Text)`
   cursor: pointer;
 `
 
-const Stack = styled(HStack)<BannerVariantProps>`
+const Stack = styled(LegacyHStack)<BannerVariantProps>`
   width: auto;
   min-width: 200px;
   height: auto;
diff --git a/packages/bezier-react/src/components/Banner/Banner.tsx b/packages/bezier-react/src/components/Banner/Banner.tsx
index 5e724594d7..fcff67b6c4 100644
--- a/packages/bezier-react/src/components/Banner/Banner.tsx
+++ b/packages/bezier-react/src/components/Banner/Banner.tsx
@@ -15,7 +15,7 @@ import {
 } from '~/src/components/Button'
 import { IconSize } from '~/src/components/Icon'
 import { isIconName } from '~/src/components/LegacyIcon'
-import { StackItem } from '~/src/components/Stack'
+import { LegacyStackItem } from '~/src/components/LegacyStack'
 import { Text } from '~/src/components/Text'
 
 import {
@@ -119,7 +119,7 @@ export const Banner = forwardRef(function Banner(
         </Styled.StackItem>
       ) }
 
-      <StackItem
+      <LegacyStackItem
         grow
         shrink
         weight={1}
@@ -136,7 +136,7 @@ export const Banner = forwardRef(function Banner(
             </Text>
           ) : content }
         </Styled.ContentWrapper>
-      </StackItem>
+      </LegacyStackItem>
 
       { !isNil(actionIcon) && (
         <Styled.StackItem>
diff --git a/packages/bezier-react/src/components/Box/Box.tsx b/packages/bezier-react/src/components/Box/Box.tsx
index ed1a688f1d..750fa3e9ab 100644
--- a/packages/bezier-react/src/components/Box/Box.tsx
+++ b/packages/bezier-react/src/components/Box/Box.tsx
@@ -12,14 +12,12 @@ import {
   splitByMarginProps,
 } from '~/src/utils/props'
 
-import sharedStyles from '~/src/components/shared.module.scss'
-
 import { type BoxProps } from './Box.types'
 
 import styles from './Box.module.scss'
 
 /**
- * `Box` is the primitive component responsible for layout. It provides an easy way to access design tokens.
+ * `Box` is a primitive layout component. It provides an easy way to access design tokens.
  *
  * @example
  *
@@ -38,6 +36,9 @@ import styles from './Box.module.scss'
 export const Box = forwardRef<HTMLElement, BoxProps>(function Box(props, forwardedRef) {
   const [marginProps, marginRest] = splitByMarginProps(props)
   const [layoutProps, layoutRest] = splitByLayoutProps(marginRest)
+  const marginStyle = getMarginStyle(marginProps)
+  const layoutStyle = getLayoutStyle(layoutProps)
+
   const {
     children,
     style,
@@ -55,15 +56,15 @@ export const Box = forwardRef<HTMLElement, BoxProps>(function Box(props, forward
   return createElement(as, {
     ref: forwardedRef,
     style: {
-      ...getMarginStyle(marginProps),
-      ...getLayoutStyle(layoutProps),
+      ...marginStyle.style,
+      ...layoutStyle.style,
       ...style,
     },
     className: classNames(
-      sharedStyles.margin,
-      sharedStyles.layout,
       styles.Box,
       display && styles[`display-${display}`],
+      marginStyle.className,
+      layoutStyle.className,
       className,
     ),
     'data-testid': testId,
diff --git a/packages/bezier-react/src/components/Box/Box.types.ts b/packages/bezier-react/src/components/Box/Box.types.ts
index 33c5146fc2..c21fcd6f2b 100644
--- a/packages/bezier-react/src/components/Box/Box.types.ts
+++ b/packages/bezier-react/src/components/Box/Box.types.ts
@@ -8,7 +8,7 @@ import {
 
 type Display = 'block' | 'inline' | 'inline-block'
 
-type BoxElementType = 'div' | 'span' | 'section' | 'legend' | 'ul' | 'li'
+type BoxElementType = 'div' | 'span' | 'section' | 'legend' | 'ul' | 'ol' | 'li'
 
 interface BoxOwnProps {
   /**
diff --git a/packages/bezier-react/src/components/Button/Button.stories.tsx b/packages/bezier-react/src/components/Button/Button.stories.tsx
index 18d7146567..e796e6259d 100644
--- a/packages/bezier-react/src/components/Button/Button.stories.tsx
+++ b/packages/bezier-react/src/components/Button/Button.stories.tsx
@@ -28,17 +28,17 @@ import { styled } from '~/src/foundation'
 
 import { Avatar } from '~/src/components/Avatars/Avatar'
 import { ButtonGroup } from '~/src/components/ButtonGroup'
+import {
+  LegacyHStack,
+  LegacyStackItem,
+  LegacyVStack,
+} from '~/src/components/LegacyStack'
 import { ListItem } from '~/src/components/ListItem'
 import {
   Overlay,
   OverlayPosition,
 } from '~/src/components/Overlay'
 import { SectionLabel } from '~/src/components/SectionLabel'
-import {
-  HStack,
-  StackItem,
-  VStack,
-} from '~/src/components/Stack'
 import { StatusType } from '~/src/components/Status'
 import { Text } from '~/src/components/Text'
 
@@ -110,32 +110,32 @@ export const WithCustomComponent: StoryObj<ButtonProps> = {
 
 export const OverviewCTA: StoryObj<{}> = {
   render: () => (
-    <HStack justify="center" spacing={6}>
-      <StackItem>
+    <LegacyHStack justify="center" spacing={6}>
+      <LegacyStackItem>
         <Button
           disabled
           text="Cancel"
           colorVariant={ButtonColorVariant.MonochromeLight}
           styleVariant={ButtonStyleVariant.Secondary}
         />
-      </StackItem>
-      <StackItem>
+      </LegacyStackItem>
+      <LegacyStackItem>
         <Button
           leftContent={OpenInNewIcon}
           text="Open link"
           colorVariant={ButtonColorVariant.Blue}
           styleVariant={ButtonStyleVariant.Secondary}
         />
-      </StackItem>
-      <StackItem>
+      </LegacyStackItem>
+      <LegacyStackItem>
         <Button
           leftContent={CheckIcon}
           text="Publish"
           colorVariant={ButtonColorVariant.Green}
           styleVariant={ButtonStyleVariant.Primary}
         />
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Overview (as CTA)',
@@ -143,16 +143,16 @@ export const OverviewCTA: StoryObj<{}> = {
 
 export const OverviewFloating: StoryObj<{}> = {
   render: () => (
-    <HStack justify="center">
-      <StackItem>
+    <LegacyHStack justify="center">
+      <LegacyStackItem>
         <Button
           leftContent={ChevronDownIcon}
           text="New messages"
           colorVariant={ButtonColorVariant.Cobalt}
           styleVariant={ButtonStyleVariant.Floating}
         />
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Overview (as floating button)',
@@ -211,30 +211,30 @@ export const UsageCTA2: StoryObj<{}> = {
 
 export const UsageWebLinks: StoryObj<{}> = {
   render: () => (
-    <HStack justify="center" spacing={6}>
-      <StackItem>
+    <LegacyHStack justify="center" spacing={6}>
+      <LegacyStackItem>
         <Button
           leftContent={OpenInNewIcon}
           text="See guide"
           rightContent={ArrowRightIcon}
           styleVariant={ButtonStyleVariant.Tertiary}
         />
-      </StackItem>
-      <StackItem>
+      </LegacyStackItem>
+      <LegacyStackItem>
         <Button
           text="See guide"
           rightContent={ArrowRightIcon}
           styleVariant={ButtonStyleVariant.Tertiary}
         />
-      </StackItem>
-      <StackItem>
+      </LegacyStackItem>
+      <LegacyStackItem>
         <Button
           leftContent={OpenInNewIcon}
           text="See guide"
           styleVariant={ButtonStyleVariant.Tertiary}
         />
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Usage (as web link)',
@@ -249,11 +249,11 @@ const Card = styled.div`
 
 export const UsageComposite: StoryObj<{}> = {
   render: () => (
-    <HStack justify="center">
-      <StackItem>
+    <LegacyHStack justify="center">
+      <LegacyStackItem>
         <Card>
-          <VStack align="stretch">
-            <StackItem>
+          <LegacyVStack align="stretch">
+            <LegacyStackItem>
               <SectionLabel
                 leftContent={{ icon: PeopleIcon }}
                 content="태그 ∙ 2"
@@ -266,63 +266,63 @@ export const UsageComposite: StoryObj<{}> = {
                   />
                 )}
               />
-            </StackItem>
-            <StackItem>
+            </LegacyStackItem>
+            <LegacyStackItem>
               <ListItem
                 leftIcon={TagIcon}
                 content="KR/Product"
                 rightContent={(
-                  <HStack>
-                    <StackItem>
+                  <LegacyHStack>
+                    <LegacyStackItem>
                       <Button
                         size={ButtonSize.XS}
                         leftContent={EditIcon}
                         styleVariant={ButtonStyleVariant.Tertiary}
                         colorVariant={ButtonColorVariant.MonochromeLight}
                       />
-                    </StackItem>
-                    <StackItem>
+                    </LegacyStackItem>
+                    <LegacyStackItem>
                       <Button
                         size={ButtonSize.XS}
                         leftContent={CancelIcon}
                         styleVariant={ButtonStyleVariant.Tertiary}
                         colorVariant={ButtonColorVariant.MonochromeLight}
                       />
-                    </StackItem>
-                  </HStack>
+                    </LegacyStackItem>
+                  </LegacyHStack>
                 )}
               />
-            </StackItem>
-            <StackItem>
+            </LegacyStackItem>
+            <LegacyStackItem>
               <ListItem
                 leftIcon={TagIcon}
                 content="KR/Design"
                 rightContent={(
-                  <HStack>
-                    <StackItem>
+                  <LegacyHStack>
+                    <LegacyStackItem>
                       <Button
                         size={ButtonSize.XS}
                         leftContent={EditIcon}
                         styleVariant={ButtonStyleVariant.Tertiary}
                         colorVariant={ButtonColorVariant.MonochromeLight}
                       />
-                    </StackItem>
-                    <StackItem>
+                    </LegacyStackItem>
+                    <LegacyStackItem>
                       <Button
                         size={ButtonSize.XS}
                         leftContent={CancelIcon}
                         styleVariant={ButtonStyleVariant.Tertiary}
                         colorVariant={ButtonColorVariant.MonochromeLight}
                       />
-                    </StackItem>
-                  </HStack>
+                    </LegacyStackItem>
+                  </LegacyHStack>
                 )}
               />
-            </StackItem>
-          </VStack>
+            </LegacyStackItem>
+          </LegacyVStack>
         </Card>
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Usage (in composite components)',
@@ -330,16 +330,16 @@ export const UsageComposite: StoryObj<{}> = {
 
 export const UsageVariousContentsComposite: StoryObj<{}> = {
   render: () => (
-    <HStack justify="center">
-      <StackItem>
+    <LegacyHStack justify="center">
+      <LegacyStackItem>
         <Button
           leftContent={PlayIcon}
           text="퍼블리시"
           rightContent={ArrowRightIcon}
           colorVariant={ButtonColorVariant.Green}
         />
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Usage (with left/right contents)',
@@ -347,15 +347,15 @@ export const UsageVariousContentsComposite: StoryObj<{}> = {
 
 export const UsageVariousContentsIconOnly: StoryObj<{}> = {
   render: () => (
-    <HStack justify="center">
-      <StackItem>
+    <LegacyHStack justify="center">
+      <LegacyStackItem>
         <Button
           leftContent={PlusIcon}
           colorVariant={ButtonColorVariant.MonochromeLight}
           styleVariant={ButtonStyleVariant.Secondary}
         />
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Usage (icon only button)',
@@ -373,8 +373,8 @@ const AlertBadge = styled.div`
 
 export const UsageVariousContentsCustom: StoryObj<{}> = {
   render: () => (
-    <HStack justify="center">
-      <StackItem>
+    <LegacyHStack justify="center">
+      <LegacyStackItem>
         <Button
           leftContent={(
             <Avatar
@@ -394,8 +394,8 @@ export const UsageVariousContentsCustom: StoryObj<{}> = {
           colorVariant={ButtonColorVariant.Red}
           styleVariant={ButtonStyleVariant.Floating}
         />
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Usage (with custom contents)',
@@ -424,11 +424,11 @@ const AsyncActionButton = () => {
 
 export const UsageAsync: StoryObj<{}> = {
   render: () => (
-    <HStack justify="center">
-      <StackItem>
+    <LegacyHStack justify="center">
+      <LegacyStackItem>
         <AsyncActionButton />
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Usage (with asyncrhonous actions)',
@@ -474,11 +474,11 @@ const OpenDropdownButton = () => {
 
 export const UsageDropdown: StoryObj<{}> = {
   render: () => (
-    <HStack justify="center">
-      <StackItem>
+    <LegacyHStack justify="center">
+      <LegacyStackItem>
         <OpenDropdownButton />
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Usage (with dropdown)',
@@ -486,134 +486,134 @@ export const UsageDropdown: StoryObj<{}> = {
 
 export const VariantsColor: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16} align="start">
-      <StackItem>
-        <HStack spacing={24} align="center">
-          <StackItem size={80}>
+    <LegacyVStack spacing={16} align="start">
+      <LegacyStackItem>
+        <LegacyHStack spacing={24} align="center">
+          <LegacyStackItem size={80}>
             <Text typo="13">Blue</Text>
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <Button
               leftContent={PlusIcon}
               text="Invite"
               colorVariant={ButtonColorVariant.Blue}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={24} align="center">
-          <StackItem size={80}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={24} align="center">
+          <LegacyStackItem size={80}>
             <Text typo="13">Red</Text>
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <Button
               leftContent={TrashIcon}
               text="Remove"
               colorVariant={ButtonColorVariant.Red}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={24} align="center">
-          <StackItem size={80}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={24} align="center">
+          <LegacyStackItem size={80}>
             <Text typo="13">Green</Text>
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <Button
               leftContent={PlayIcon}
               text="Publish"
               colorVariant={ButtonColorVariant.Green}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={24} align="center">
-          <StackItem size={80}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={24} align="center">
+          <LegacyStackItem size={80}>
             <Text typo="13">Cobalt</Text>
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <Button
               leftContent={VideocamIcon}
               text="Join"
               colorVariant={ButtonColorVariant.Cobalt}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={24} align="center">
-          <StackItem size={80}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={24} align="center">
+          <LegacyStackItem size={80}>
             <Text typo="13">Orange</Text>
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <Button
               leftContent={HeartFilledIcon}
               text="Warn"
               colorVariant={ButtonColorVariant.Orange}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={24} align="center">
-          <StackItem size={80}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={24} align="center">
+          <LegacyStackItem size={80}>
             <Text typo="13">Pink</Text>
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <Button
               leftContent={VideocamIcon}
               text="Pink"
               colorVariant={ButtonColorVariant.Pink}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={24} align="center">
-          <StackItem size={80}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={24} align="center">
+          <LegacyStackItem size={80}>
             <Text typo="13">Purple</Text>
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <Button
               leftContent={VideocamIcon}
               text="Purple"
               colorVariant={ButtonColorVariant.Purple}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={24} align="center">
-          <StackItem size={80}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={24} align="center">
+          <LegacyStackItem size={80}>
             <Text typo="13">Monochrome Dark</Text>
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <Button
               leftContent={LightningIcon}
               text="Dark"
               colorVariant={ButtonColorVariant.MonochromeDark}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={24} align="center">
-          <StackItem size={80}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={24} align="center">
+          <LegacyStackItem size={80}>
             <Text typo="13">Monochrome Light</Text>
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <Button
               leftContent={LightningIcon}
               text="Light alpha"
               colorVariant={ButtonColorVariant.MonochromeLight}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-    </VStack>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Color variants',
@@ -621,14 +621,14 @@ export const VariantsColor: StoryObj<{}> = {
 
 export const VariantsStyle: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16} align="start">
+    <LegacyVStack spacing={16} align="start">
       { Object.entries(ButtonStyleVariant).map(([key, styleVariant]) => (
-        <StackItem key={styleVariant}>
-          <HStack spacing={24} align="center">
-            <StackItem size={80}>
+        <LegacyStackItem key={styleVariant}>
+          <LegacyHStack spacing={24} align="center">
+            <LegacyStackItem size={80}>
               <Text typo="13">{ key }</Text>
-            </StackItem>
-            <StackItem>
+            </LegacyStackItem>
+            <LegacyStackItem>
               <Button
                 leftContent={PlusIcon}
                 rightContent={ChevronRightIcon}
@@ -636,11 +636,11 @@ export const VariantsStyle: StoryObj<{}> = {
                 colorVariant={ButtonColorVariant.Blue}
                 styleVariant={styleVariant}
               />
-            </StackItem>
-          </HStack>
-        </StackItem>
+            </LegacyStackItem>
+          </LegacyHStack>
+        </LegacyStackItem>
       )) }
-    </VStack>
+    </LegacyVStack>
   ),
 
   name: 'Style variants',
@@ -648,14 +648,14 @@ export const VariantsStyle: StoryObj<{}> = {
 
 export const VariantsSize: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16} align="start">
+    <LegacyVStack spacing={16} align="start">
       { Object.entries(ButtonSize).map(([key, size]) => (
-        <StackItem key={key}>
-          <HStack spacing={24} align="center">
-            <StackItem size={80}>
+        <LegacyStackItem key={key}>
+          <LegacyHStack spacing={24} align="center">
+            <LegacyStackItem size={80}>
               <Text typo="13">{ key }</Text>
-            </StackItem>
-            <StackItem>
+            </LegacyStackItem>
+            <LegacyStackItem>
               <Button
                 leftContent={CalendarIcon}
                 rightContent={TriangleDownIcon}
@@ -663,11 +663,11 @@ export const VariantsSize: StoryObj<{}> = {
                 size={size}
                 colorVariant={ButtonColorVariant.Blue}
               />
-            </StackItem>
-          </HStack>
-        </StackItem>
+            </LegacyStackItem>
+          </LegacyHStack>
+        </LegacyStackItem>
       )) }
-    </VStack>
+    </LegacyVStack>
   ),
 
   name: 'Size variants',
diff --git a/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap
index 9772d4a807..ae1fae6dc2 100644
--- a/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`Button Test > Active Test > Active prop change Button to hover style 1`
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -172,7 +172,7 @@ exports[`Button Test > Disabled Test > Button can have disabled attribute 1`] =
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -284,7 +284,7 @@ exports[`Button Test > Loading Test > Active prop change Button to hover style 1
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -384,7 +384,7 @@ exports[`Button Test > Reset CSS 1`] = `
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -483,7 +483,7 @@ exports[`Button Test > Size Test > with text > Size L - styleVariant: Floating 1
   >
     <span
       buttonsize="L"
-      class="margin Text typo-15 bold c2"
+      class="Text typo-15 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -575,7 +575,7 @@ exports[`Button Test > Size Test > with text > Size L 1`] = `
   >
     <span
       buttonsize="L"
-      class="margin Text typo-15 bold c2"
+      class="Text typo-15 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -674,7 +674,7 @@ exports[`Button Test > Size Test > with text > Size M - styleVariant: Floating 1
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -766,7 +766,7 @@ exports[`Button Test > Size Test > with text > Size M 1`] = `
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -865,7 +865,7 @@ exports[`Button Test > Size Test > with text > Size S - styleVariant: Floating 1
   >
     <span
       buttonsize="S"
-      class="margin Text typo-13 bold c2"
+      class="Text typo-13 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -957,7 +957,7 @@ exports[`Button Test > Size Test > with text > Size S 1`] = `
   >
     <span
       buttonsize="S"
-      class="margin Text typo-13 bold c2"
+      class="Text typo-13 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -1056,7 +1056,7 @@ exports[`Button Test > Size Test > with text > Size XL - styleVariant: Floating
   >
     <span
       buttonsize="XL"
-      class="margin Text typo-18 bold c2"
+      class="Text typo-18 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -1148,7 +1148,7 @@ exports[`Button Test > Size Test > with text > Size XL 1`] = `
   >
     <span
       buttonsize="XL"
-      class="margin Text typo-18 bold c2"
+      class="Text typo-18 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -1247,7 +1247,7 @@ exports[`Button Test > Size Test > with text > Size XS - styleVariant: Floating
   >
     <span
       buttonsize="XS"
-      class="margin Text typo-13 bold c2"
+      class="Text typo-13 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -1339,7 +1339,7 @@ exports[`Button Test > Size Test > with text > Size XS 1`] = `
   >
     <span
       buttonsize="XS"
-      class="margin Text typo-13 bold c2"
+      class="Text typo-13 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -1431,7 +1431,7 @@ exports[`Button Test > Size Test > with text > size prop not given, default size
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -1925,7 +1925,7 @@ exports[`Button Test > StyleVariant Test > Floating 1`] = `
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -2024,7 +2024,7 @@ exports[`Button Test > StyleVariant Test > FloatingAlt 1`] = `
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -2116,7 +2116,7 @@ exports[`Button Test > StyleVariant Test > Primary 1`] = `
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -2208,7 +2208,7 @@ exports[`Button Test > StyleVariant Test > Secondary 1`] = `
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
@@ -2301,7 +2301,7 @@ exports[`Button Test > StyleVariant Test > Tertiary 1`] = `
   >
     <span
       buttonsize="M"
-      class="margin Text typo-14 bold c2"
+      class="Text typo-14 bold margin c2"
       data-testid="bezier-react-button-text"
       foundation="[object Object]"
     >
diff --git a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.stories.tsx b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.stories.tsx
index c4a54fee58..21f23a372c 100644
--- a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -13,9 +13,9 @@ import {
   ButtonStyleVariant,
 } from '~/src/components/Button'
 import {
-  Spacer,
-  StackItem,
-} from '~/src/components/Stack'
+  LegacySpacer,
+  LegacyStackItem,
+} from '~/src/components/LegacyStack'
 
 import { ButtonGroup } from './ButtonGroup'
 import mdx from './ButtonGroup.mdx'
@@ -41,14 +41,14 @@ const Wrapper = styled.div`
 
 const Template: StoryFn<ButtonGroupProps> = (props) => (
   <Wrapper>
-    <Spacer />
-    <StackItem>
+    <LegacySpacer />
+    <LegacyStackItem>
       <ButtonGroup {...props}>
         <Button text="취소" styleVariant={ButtonStyleVariant.Secondary} />
         <Button text="확인" styleVariant={ButtonStyleVariant.Primary} />
       </ButtonGroup>
-    </StackItem>
-    <Spacer />
+    </LegacyStackItem>
+    <LegacySpacer />
   </Wrapper>
 )
 
diff --git a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.test.tsx b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.test.tsx
index 6bdbfdea33..947c35f7b5 100644
--- a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.test.tsx
+++ b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.test.tsx
@@ -20,9 +20,7 @@ describe('ButtonGroup', () => {
       </ButtonGroup>)
 
     const buttonGroup = getByRole('group')
-
-    expect(buttonGroup).toHaveStyle('gap: var(--b-alpha-stack-spacing)')
-    expect(buttonGroup).toHaveStyle('--b-alpha-stack-spacing: 6px')
+    expect(buttonGroup).toHaveStyle('--b-stack-spacing: 6px')
   })
 
   it('creates a button group without spacing', () => {
@@ -37,8 +35,6 @@ describe('ButtonGroup', () => {
       </ButtonGroup>)
 
     const buttonGroup = getByRole('group')
-
-    expect(buttonGroup).toHaveStyle('gap: var(--b-alpha-stack-spacing)')
-    expect(buttonGroup).toHaveStyle('--b-alpha-stack-spacing: 0')
+    expect(buttonGroup).toHaveStyle('--b-stack-spacing: 0')
   })
 })
diff --git a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.tsx b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.tsx
index 901c20e29a..d9f56ff0c4 100644
--- a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 
-import { AlphaStack } from '~/src/components/AlphaStack'
+import { Stack } from '~/src/components/Stack'
 
 import type ButtonGroupProps from './ButtonGroup.types'
 
@@ -16,7 +16,7 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
   const spacing = withoutSpacing ? 0 : 6
 
   return (
-    <AlphaStack
+    <Stack
       direction="horizontal"
       spacing={spacing}
       justify={justify}
@@ -25,6 +25,6 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
       {...props}
     >
       { children }
-    </AlphaStack>
+    </Stack>
   )
 })
diff --git a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.types.ts b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.types.ts
index c7ef4a3afd..a2a2f1277c 100644
--- a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.types.ts
+++ b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.types.ts
@@ -1,9 +1,9 @@
 import {
-  type BezierComponentProps,
+  type AlphaBezierComponentProps,
   type ChildrenProps,
 } from '~/src/types/ComponentProps'
 
-import { type HStackProps } from '~/src/components/Stack'
+import { type StackProps } from '~/src/components/Stack'
 
 interface ButtonGroupOptions {
   /**
@@ -14,7 +14,7 @@ interface ButtonGroupOptions {
 }
 
 export default interface ButtonGroupProps extends
-  BezierComponentProps,
+  AlphaBezierComponentProps,
   ChildrenProps,
-  Pick<HStackProps, 'justify'>,
+  Pick<StackProps, 'justify'>,
   ButtonGroupOptions {}
diff --git a/packages/bezier-react/src/components/Forms/FormControl/FormControl.tsx b/packages/bezier-react/src/components/Forms/FormControl/FormControl.tsx
index bd7893b774..a8c9e597ea 100644
--- a/packages/bezier-react/src/components/Forms/FormControl/FormControl.tsx
+++ b/packages/bezier-react/src/components/Forms/FormControl/FormControl.tsx
@@ -10,7 +10,7 @@ import { splitByBezierComponentProps } from '~/src/utils/props'
 import { px } from '~/src/utils/style'
 import { isNil } from '~/src/utils/type'
 
-import { AlphaStack } from '~/src/components/AlphaStack'
+import { Stack } from '~/src/components/Stack'
 
 // eslint-disable-next-line no-restricted-imports
 import FormFieldSize from '../FormFieldSize'
@@ -39,21 +39,21 @@ const Container = forwardRef<HTMLElement, ContainerProps>(function Container({
   switch (labelPosition) {
     case 'top':
       return (
-        <AlphaStack
+        <Stack
           ref={forwardedRef}
           direction="vertical"
           testId={testId}
           {...rest}
         >
           { children }
-        </AlphaStack>
+        </Stack>
       )
 
     case 'left':
     default:
       return (
         <Styled.Grid
-          ref={forwardedRef}
+          ref={forwardedRef as React.ForwardedRef<HTMLDivElement>}
           data-testid={testId}
           {...rest}
         >
diff --git a/packages/bezier-react/src/components/Forms/FormControl/FormControl.types.ts b/packages/bezier-react/src/components/Forms/FormControl/FormControl.types.ts
index 592f0fb80a..448adc6fd3 100644
--- a/packages/bezier-react/src/components/Forms/FormControl/FormControl.types.ts
+++ b/packages/bezier-react/src/components/Forms/FormControl/FormControl.types.ts
@@ -1,4 +1,5 @@
 import type {
+  AlphaBezierComponentProps,
   BezierComponentProps,
   ChildrenProps,
   IdentifierProps,
@@ -56,7 +57,7 @@ export interface FormControlContextValue extends FormComponentProps {
 }
 
 export interface ContainerProps extends
-  BezierComponentProps,
+  AlphaBezierComponentProps,
   ChildrenProps,
   Pick<FormControlOptions, 'labelPosition'> {}
 
diff --git a/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap b/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap
index 4b963d6bfc..774e62d208 100644
--- a/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap
+++ b/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap
@@ -2,56 +2,31 @@
 
 exports[`FormControl > Snapshot > With multiple field 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: var(--b-alpha-stack-direction);
-  -ms-flex-direction: var(--b-alpha-stack-direction);
-  flex-direction: var(--b-alpha-stack-direction);
-  gap: var(--b-alpha-stack-spacing);
-  -webkit-align-items: var(--b-alpha-stack-align);
-  -webkit-box-align: var(--b-alpha-stack-align);
-  -ms-flex-align: var(--b-alpha-stack-align);
-  align-items: var(--b-alpha-stack-align);
-  -webkit-box-pack: var(--b-alpha-stack-justify);
-  -webkit-justify-content: var(--b-alpha-stack-justify);
-  -ms-flex-pack: var(--b-alpha-stack-justify);
-  justify-content: var(--b-alpha-stack-justify);
-}
-
-.c1 {
   position: relative;
 }
 
-.c2 {
+.c1 {
   padding: 0 2px;
   margin-bottom: 4px;
 }
 
-.c9 {
+.c7 {
   padding: 0 2px;
   margin-top: 4px;
 }
 
-.c4 {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.c10 {
+.c8 {
   display: block;
   text-align: left;
 }
 
-.c3 {
+.c2 {
   display: block;
   text-align: left;
   word-break: break-word;
 }
 
-.c7 {
+.c5 {
   width: 100%;
   height: 100%;
   padding: 0;
@@ -64,23 +39,23 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
   color: #000000D9;
 }
 
-.c7::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   color: #00000066;
 }
 
-.c7::-moz-placeholder {
+.c5::-moz-placeholder {
   color: #00000066;
 }
 
-.c7:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   color: #00000066;
 }
 
-.c7::placeholder {
+.c5::placeholder {
   color: #00000066;
 }
 
-.c5 {
+.c3 {
   position: relative;
   box-sizing: border-box;
   display: -webkit-box;
@@ -107,12 +82,12 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
   transition-property: border-color,box-shadow;
 }
 
-.c5 .c6 {
+.c3 .c4 {
   font-size: 1.4rem;
   line-height: 1.8rem;
 }
 
-.c8 {
+.c6 {
   position: relative;
   box-sizing: border-box;
   display: -webkit-box;
@@ -140,34 +115,22 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
   transition-property: border-color,box-shadow;
 }
 
-.c8 .c6 {
+.c6 .c4 {
   font-size: 1.4rem;
   line-height: 1.8rem;
 }
 
-@supports not(gap:var(--b-alpha-stack-spacing)) {
-  .c0 {
-    margin-top: calc(var(--b-alpha-stack-spacing) * -1);
-    margin-left: calc(var(--b-alpha-stack-spacing) * -1);
-  }
-
-  .c0 > * {
-    margin-top: var(--b-alpha-stack-spacing);
-    margin-left: var(--b-alpha-stack-spacing);
-  }
-}
-
 <div>
   <div
-    class="c0"
+    class="Stack display-flex direction-vertical margin layout"
     data-testid="bezier-react-form-control"
-    style="--b-form-control-left-label-wrapper-height: 36px; --b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 0;"
+    style="--b-form-control-left-label-wrapper-height: 36px;"
   >
     <div
-      class="c1 c2"
+      class="c0 c1"
     >
       <label
-        class="margin Text typo-13 bold c3"
+        class="Text typo-13 bold margin c2"
         data-testid="bezier-react-form-label"
         foundation="[object Object]"
         id="form-label"
@@ -179,22 +142,22 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
     <div
       aria-describedby="form-help-text"
       aria-labelledby="form-label"
-      class="c0 c4"
+      class="Stack display-flex direction-vertical justify-start align-stretch wrap margin layout"
       data-testid="bezier-react-form-group"
       id="form-group"
       role="group"
-      style="--b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 6px;"
+      style="--b-stack-spacing: 6px;"
     >
       <div
-        class="c0"
+        class="Stack display-flex direction-vertical margin layout"
         data-testid="bezier-react-form-control"
-        style="--b-form-control-left-label-wrapper-height: 36px; --b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 0;"
+        style="--b-form-control-left-label-wrapper-height: 36px;"
       >
         <div
-          class="c1 c2"
+          class="c0 c1"
         >
           <label
-            class="margin Text typo-13 bold c3"
+            class="Text typo-13 bold margin c2"
             data-testid="bezier-react-form-label"
             for="field-:r3:"
             foundation="[object Object]"
@@ -205,13 +168,13 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
           </label>
         </div>
         <div
-          class="c5"
+          class="c3"
           data-testid="bezier-react-text-input"
           size="36"
         >
           <input
             autocomplete="off"
-            class="c6 c7"
+            class="c4 c5"
             id="field-:r3:"
             size="36"
             value=""
@@ -219,15 +182,15 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
         </div>
       </div>
       <div
-        class="c0"
+        class="Stack display-flex direction-vertical margin layout"
         data-testid="bezier-react-form-control"
-        style="--b-form-control-left-label-wrapper-height: 36px; --b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 0;"
+        style="--b-form-control-left-label-wrapper-height: 36px;"
       >
         <div
-          class="c1 c2"
+          class="c0 c1"
         >
           <label
-            class="margin Text typo-13 bold c3"
+            class="Text typo-13 bold margin c2"
             data-testid="bezier-react-form-label"
             for="field-:r4:"
             foundation="[object Object]"
@@ -238,14 +201,14 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
           </label>
         </div>
         <div
-          class="c8"
+          class="c6"
           data-testid="bezier-react-text-input"
           size="36"
         >
           <input
             aria-invalid="true"
             autocomplete="off"
-            class="c6 c7"
+            class="c4 c5"
             id="field-:r4:"
             size="36"
             value=""
@@ -254,10 +217,10 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
       </div>
     </div>
     <div
-      class="c1 c9"
+      class="c0 c7"
     >
       <p
-        class="margin Text typo-13 c10"
+        class="Text typo-13 margin c8"
         data-testid="bezier-react-form-helper-text"
         foundation="[object Object]"
         id="form-help-text"
@@ -271,35 +234,16 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
 `;
 
 exports[`FormControl > Snapshot > With multiple field and left label position 1`] = `
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: var(--b-alpha-stack-direction);
-  -ms-flex-direction: var(--b-alpha-stack-direction);
-  flex-direction: var(--b-alpha-stack-direction);
-  gap: var(--b-alpha-stack-spacing);
-  -webkit-align-items: var(--b-alpha-stack-align);
-  -webkit-box-align: var(--b-alpha-stack-align);
-  -ms-flex-align: var(--b-alpha-stack-align);
-  align-items: var(--b-alpha-stack-align);
-  -webkit-box-pack: var(--b-alpha-stack-justify);
-  -webkit-justify-content: var(--b-alpha-stack-justify);
-  -ms-flex-pack: var(--b-alpha-stack-justify);
-  justify-content: var(--b-alpha-stack-justify);
-}
-
 .c0 {
   position: relative;
 }
 
-.c6 {
+.c4 {
   padding: 0 2px;
   margin-bottom: 4px;
 }
 
-.c11 {
+.c9 {
   padding: 0 2px;
   margin-top: 4px;
 }
@@ -332,18 +276,12 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
   height: var(--b-form-control-left-label-wrapper-height);
 }
 
-.c12 {
+.c10 {
   grid-row: 2 / 2;
   grid-column: 2;
 }
 
-.c5 {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.c13 {
+.c11 {
   display: block;
   text-align: left;
 }
@@ -354,7 +292,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
   word-break: break-word;
 }
 
-.c9 {
+.c7 {
   width: 100%;
   height: 100%;
   padding: 0;
@@ -367,23 +305,23 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
   color: #000000D9;
 }
 
-.c9::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   color: #00000066;
 }
 
-.c9::-moz-placeholder {
+.c7::-moz-placeholder {
   color: #00000066;
 }
 
-.c9:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   color: #00000066;
 }
 
-.c9::placeholder {
+.c7::placeholder {
   color: #00000066;
 }
 
-.c7 {
+.c5 {
   position: relative;
   box-sizing: border-box;
   display: -webkit-box;
@@ -410,12 +348,12 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
   transition-property: border-color,box-shadow;
 }
 
-.c7 .c8 {
+.c5 .c6 {
   font-size: 1.4rem;
   line-height: 1.8rem;
 }
 
-.c10 {
+.c8 {
   position: relative;
   box-sizing: border-box;
   display: -webkit-box;
@@ -443,23 +381,11 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
   transition-property: border-color,box-shadow;
 }
 
-.c10 .c8 {
+.c8 .c6 {
   font-size: 1.4rem;
   line-height: 1.8rem;
 }
 
-@supports not(gap:var(--b-alpha-stack-spacing)) {
-  .c4 {
-    margin-top: calc(var(--b-alpha-stack-spacing) * -1);
-    margin-left: calc(var(--b-alpha-stack-spacing) * -1);
-  }
-
-  .c4 > * {
-    margin-top: var(--b-alpha-stack-spacing);
-    margin-left: var(--b-alpha-stack-spacing);
-  }
-}
-
 <div>
   <div
     class="c0 c1"
@@ -470,7 +396,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
       class="c0 c2"
     >
       <label
-        class="margin Text typo-14 bold c3"
+        class="Text typo-14 bold margin c3"
         data-testid="bezier-react-form-label"
         foundation="[object Object]"
         id="form-label"
@@ -482,22 +408,22 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
     <div
       aria-describedby="form-help-text"
       aria-labelledby="form-label"
-      class="c4 c5"
+      class="Stack display-flex direction-vertical justify-start align-stretch wrap margin layout"
       data-testid="bezier-react-form-group"
       id="form-group"
       role="group"
-      style="--b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 6px;"
+      style="--b-stack-spacing: 6px;"
     >
       <div
-        class="c4"
+        class="Stack display-flex direction-vertical margin layout"
         data-testid="bezier-react-form-control"
-        style="--b-form-control-left-label-wrapper-height: 36px; --b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 0;"
+        style="--b-form-control-left-label-wrapper-height: 36px;"
       >
         <div
-          class="c0 c6"
+          class="c0 c4"
         >
           <label
-            class="margin Text typo-13 bold c3"
+            class="Text typo-13 bold margin c3"
             data-testid="bezier-react-form-label"
             for="field-:r6:"
             foundation="[object Object]"
@@ -508,13 +434,13 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
           </label>
         </div>
         <div
-          class="c7"
+          class="c5"
           data-testid="bezier-react-text-input"
           size="36"
         >
           <input
             autocomplete="off"
-            class="c8 c9"
+            class="c6 c7"
             id="field-:r6:"
             size="36"
             value=""
@@ -522,15 +448,15 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
         </div>
       </div>
       <div
-        class="c4"
+        class="Stack display-flex direction-vertical margin layout"
         data-testid="bezier-react-form-control"
-        style="--b-form-control-left-label-wrapper-height: 36px; --b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 0;"
+        style="--b-form-control-left-label-wrapper-height: 36px;"
       >
         <div
-          class="c0 c6"
+          class="c0 c4"
         >
           <label
-            class="margin Text typo-13 bold c3"
+            class="Text typo-13 bold margin c3"
             data-testid="bezier-react-form-label"
             for="field-:r7:"
             foundation="[object Object]"
@@ -541,14 +467,14 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
           </label>
         </div>
         <div
-          class="c10"
+          class="c8"
           data-testid="bezier-react-text-input"
           size="36"
         >
           <input
             aria-invalid="true"
             autocomplete="off"
-            class="c8 c9"
+            class="c6 c7"
             id="field-:r7:"
             size="36"
             value=""
@@ -557,10 +483,10 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
       </div>
     </div>
     <div
-      class="c0 c11 c12"
+      class="c0 c9 c10"
     >
       <p
-        class="margin Text typo-13 c13"
+        class="Text typo-13 margin c11"
         data-testid="bezier-react-form-helper-text"
         foundation="[object Object]"
         id="form-help-text"
@@ -575,50 +501,31 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
 
 exports[`FormControl > Snapshot > With single field 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: var(--b-alpha-stack-direction);
-  -ms-flex-direction: var(--b-alpha-stack-direction);
-  flex-direction: var(--b-alpha-stack-direction);
-  gap: var(--b-alpha-stack-spacing);
-  -webkit-align-items: var(--b-alpha-stack-align);
-  -webkit-box-align: var(--b-alpha-stack-align);
-  -ms-flex-align: var(--b-alpha-stack-align);
-  align-items: var(--b-alpha-stack-align);
-  -webkit-box-pack: var(--b-alpha-stack-justify);
-  -webkit-justify-content: var(--b-alpha-stack-justify);
-  -ms-flex-pack: var(--b-alpha-stack-justify);
-  justify-content: var(--b-alpha-stack-justify);
-}
-
-.c1 {
   position: relative;
 }
 
-.c2 {
+.c1 {
   padding: 0 2px;
   margin-bottom: 4px;
 }
 
-.c7 {
+.c6 {
   padding: 0 2px;
   margin-top: 4px;
 }
 
-.c8 {
+.c7 {
   display: block;
   text-align: left;
 }
 
-.c3 {
+.c2 {
   display: block;
   text-align: left;
   word-break: break-word;
 }
 
-.c6 {
+.c5 {
   width: 100%;
   height: 100%;
   padding: 0;
@@ -631,23 +538,23 @@ exports[`FormControl > Snapshot > With single field 1`] = `
   color: #000000D9;
 }
 
-.c6::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   color: #00000066;
 }
 
-.c6::-moz-placeholder {
+.c5::-moz-placeholder {
   color: #00000066;
 }
 
-.c6:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   color: #00000066;
 }
 
-.c6::placeholder {
+.c5::placeholder {
   color: #00000066;
 }
 
-.c4 {
+.c3 {
   position: relative;
   box-sizing: border-box;
   display: -webkit-box;
@@ -674,33 +581,21 @@ exports[`FormControl > Snapshot > With single field 1`] = `
   transition-property: border-color,box-shadow;
 }
 
-.c4 .c5 {
+.c3 .c4 {
   font-size: 1.4rem;
   line-height: 1.8rem;
 }
 
-@supports not(gap:var(--b-alpha-stack-spacing)) {
-  .c0 {
-    margin-top: calc(var(--b-alpha-stack-spacing) * -1);
-    margin-left: calc(var(--b-alpha-stack-spacing) * -1);
-  }
-
-  .c0 > * {
-    margin-top: var(--b-alpha-stack-spacing);
-    margin-left: var(--b-alpha-stack-spacing);
-  }
-}
-
 <div
-  class="c0"
+  class="Stack display-flex direction-vertical margin layout"
   data-testid="bezier-react-form-control"
-  style="--b-form-control-left-label-wrapper-height: 36px; --b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 0;"
+  style="--b-form-control-left-label-wrapper-height: 36px;"
 >
   <div
-    class="c1 c2"
+    class="c0 c1"
   >
     <label
-      class="margin Text typo-13 bold c3"
+      class="Text typo-13 bold margin c2"
       data-testid="bezier-react-form-label"
       for="form"
       foundation="[object Object]"
@@ -711,24 +606,24 @@ exports[`FormControl > Snapshot > With single field 1`] = `
     </label>
   </div>
   <div
-    class="c4"
+    class="c3"
     data-testid="bezier-react-text-input"
     size="36"
   >
     <input
       aria-describedby="form-help-text"
       autocomplete="off"
-      class="c5 c6"
+      class="c4 c5"
       id="form"
       size="36"
       value=""
     />
   </div>
   <div
-    class="c1 c7"
+    class="c0 c6"
   >
     <p
-      class="margin Text typo-13 c8"
+      class="Text typo-13 margin c7"
       data-testid="bezier-react-form-helper-text"
       foundation="[object Object]"
       id="form-help-text"
@@ -864,7 +759,7 @@ exports[`FormControl > Snapshot > With single field and left label position 1`]
     class="c0 c2"
   >
     <label
-      class="margin Text typo-14 bold c3"
+      class="Text typo-14 bold margin c3"
       data-testid="bezier-react-form-label"
       for="form"
       foundation="[object Object]"
@@ -892,7 +787,7 @@ exports[`FormControl > Snapshot > With single field and left label position 1`]
     class="c0 c7 c8"
   >
     <p
-      class="margin Text typo-13 c9"
+      class="Text typo-13 margin c9"
       data-testid="bezier-react-form-helper-text"
       foundation="[object Object]"
       id="form-help-text"
diff --git a/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.styled.ts b/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.styled.ts
deleted file mode 100644
index 7499380f6f..0000000000
--- a/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.styled.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { styled } from '~/src/foundation'
-
-import { AlphaStack } from '~/src/components/AlphaStack'
-
-export const Stack = styled(AlphaStack)`
-  flex-wrap: wrap;
-`
diff --git a/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx b/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx
index efc9eb51f2..9a77c7818a 100644
--- a/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx
+++ b/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx
@@ -4,11 +4,10 @@ import useMergeRefs from '~/src/hooks/useMergeRefs'
 import { noop } from '~/src/utils/function'
 
 import { useFormControlContext } from '~/src/components/Forms/FormControl'
+import { Stack } from '~/src/components/Stack'
 
 import type FormGroupProps from './FormGroup.types'
 
-import * as Styled from './FormGroup.styled'
-
 const FORM_GROUP_TEST_ID = 'bezier-react-form-group'
 
 function FormGroup({
@@ -34,10 +33,11 @@ forwardedRef: React.Ref<HTMLDivElement>,
   const mergedRef = useMergeRefs(ref, forwardedRef)
 
   return (
-    <Styled.Stack
+    <Stack
       {...ownProps}
       data-testid={testId}
       ref={mergedRef}
+      wrap
       justify="start"
       align="stretch"
       spacing={spacing}
@@ -45,7 +45,7 @@ forwardedRef: React.Ref<HTMLDivElement>,
       role={role}
     >
       { children }
-    </Styled.Stack>
+    </Stack>
   )
 }
 
diff --git a/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.types.ts b/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.types.ts
index fa52527c6e..15813af091 100644
--- a/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.types.ts
+++ b/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.types.ts
@@ -1,12 +1,12 @@
 import type {
-  BezierComponentProps,
+  AlphaBezierComponentProps,
   ChildrenProps,
 } from '~/src/types/ComponentProps'
 
 import type { StackProps } from '~/src/components/Stack'
 
 interface FormGroupProps extends
-  BezierComponentProps,
+  AlphaBezierComponentProps,
   ChildrenProps,
   Partial<Pick<StackProps, 'direction' | 'spacing'>>,
   React.HTMLAttributes<HTMLDivElement> {}
diff --git a/packages/bezier-react/src/components/Forms/FormGroup/__snapshots__/FormGroup.test.tsx.snap b/packages/bezier-react/src/components/Forms/FormGroup/__snapshots__/FormGroup.test.tsx.snap
index 9683e1a96c..14cceb0f06 100644
--- a/packages/bezier-react/src/components/Forms/FormGroup/__snapshots__/FormGroup.test.tsx.snap
+++ b/packages/bezier-react/src/components/Forms/FormGroup/__snapshots__/FormGroup.test.tsx.snap
@@ -1,47 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormGroup > Snapshot > 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: var(--b-alpha-stack-direction);
-  -ms-flex-direction: var(--b-alpha-stack-direction);
-  flex-direction: var(--b-alpha-stack-direction);
-  gap: var(--b-alpha-stack-spacing);
-  -webkit-align-items: var(--b-alpha-stack-align);
-  -webkit-box-align: var(--b-alpha-stack-align);
-  -ms-flex-align: var(--b-alpha-stack-align);
-  align-items: var(--b-alpha-stack-align);
-  -webkit-box-pack: var(--b-alpha-stack-justify);
-  -webkit-justify-content: var(--b-alpha-stack-justify);
-  -ms-flex-pack: var(--b-alpha-stack-justify);
-  justify-content: var(--b-alpha-stack-justify);
-}
-
-.c1 {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-@supports not(gap:var(--b-alpha-stack-spacing)) {
-  .c0 {
-    margin-top: calc(var(--b-alpha-stack-spacing) * -1);
-    margin-left: calc(var(--b-alpha-stack-spacing) * -1);
-  }
-
-  .c0 > * {
-    margin-top: var(--b-alpha-stack-spacing);
-    margin-left: var(--b-alpha-stack-spacing);
-  }
-}
-
 <div
-  class="c0 c1"
+  class="Stack display-flex direction-vertical justify-start align-stretch wrap margin layout"
   data-testid="bezier-react-form-group"
   role="group"
-  style="--b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 6px;"
+  style="--b-stack-spacing: 6px;"
 />
 `;
diff --git a/packages/bezier-react/src/components/Forms/FormHelperText/__snapshots__/FormHelperText.test.tsx.snap b/packages/bezier-react/src/components/Forms/FormHelperText/__snapshots__/FormHelperText.test.tsx.snap
index 6217353f0c..c5d7371dc9 100644
--- a/packages/bezier-react/src/components/Forms/FormHelperText/__snapshots__/FormHelperText.test.tsx.snap
+++ b/packages/bezier-react/src/components/Forms/FormHelperText/__snapshots__/FormHelperText.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`FormErrorMessage > Snapshot > 1`] = `
 
 <p
   aria-live="polite"
-  class="margin Text typo-13 c0"
+  class="Text typo-13 margin c0"
   data-testid="bezier-react-form-error-message"
   foundation="[object Object]"
   id="test"
@@ -25,7 +25,7 @@ exports[`FormHelperText > Snapshot > 1`] = `
 }
 
 <p
-  class="margin Text typo-13 c0"
+  class="Text typo-13 margin c0"
   data-testid="bezier-react-form-helper-text"
   foundation="[object Object]"
   id="test"
diff --git a/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx b/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx
index 344aa5c4cc..af75066bf0 100644
--- a/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx
+++ b/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx
@@ -9,9 +9,9 @@ import { useFormControlContext } from '~/src/components/Forms/FormControl'
 import { Help } from '~/src/components/Help'
 import { HELP_DISPLAY_NAME } from '~/src/components/Help/Help'
 import {
-  HStack,
-  StackItem,
-} from '~/src/components/Stack'
+  LegacyHStack,
+  LegacyStackItem,
+} from '~/src/components/LegacyStack'
 
 import type FormLabelProps from './FormLabel.types'
 
@@ -86,14 +86,14 @@ forwardedRef: React.Ref<HTMLLabelElement>,
       { !HelpComponent
         ? LabelComponent
         : (
-          <HStack align="center" spacing={6}>
-            <StackItem shrink weight={1}>
+          <LegacyHStack align="center" spacing={6}>
+            <LegacyStackItem shrink weight={1}>
               { LabelComponent }
-            </StackItem>
-            <StackItem>
+            </LegacyStackItem>
+            <LegacyStackItem>
               { HelpComponent }
-            </StackItem>
-          </HStack>
+            </LegacyStackItem>
+          </LegacyHStack>
         ) }
     </Wrapper>
   )
diff --git a/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap b/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap
index b60d474bb0..0f14eed726 100644
--- a/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap
+++ b/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`FormLabel > Snapshot > 1`] = `
 }
 
 <label
-  class="margin Text typo-13 bold c0"
+  class="Text typo-13 bold margin c0"
   data-testid="bezier-react-form-label"
   foundation="[object Object]"
   style="--b-text-color: var(--txt-black-darkest);"
diff --git a/packages/bezier-react/src/components/Forms/Inputs/Select/__snapshots__/Select.test.tsx.snap b/packages/bezier-react/src/components/Forms/Inputs/Select/__snapshots__/Select.test.tsx.snap
index 62d34127c6..981acbcbee 100644
--- a/packages/bezier-react/src/components/Forms/Inputs/Select/__snapshots__/Select.test.tsx.snap
+++ b/packages/bezier-react/src/components/Forms/Inputs/Select/__snapshots__/Select.test.tsx.snap
@@ -99,7 +99,7 @@ exports[`Select Test > Default Style > Snapshot > 1`] = `
       class="c2"
     >
       <span
-        class="margin Text typo-14 truncated"
+        class="Text typo-14 truncated margin"
         data-testid="bezier-react-select-trigger-text"
         style="--b-text-color: var(--txt-black-darkest);"
       >
@@ -231,7 +231,7 @@ exports[`Select Test > rightContent > Snapshot > 1`] = `
       class="c2"
     >
       <span
-        class="margin Text typo-14 truncated"
+        class="Text typo-14 truncated margin"
         data-testid="bezier-react-select-trigger-text"
         style="--b-text-color: var(--txt-black-darkest);"
       >
diff --git a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx
index c9f3ca6df6..1e4131b647 100644
--- a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx
+++ b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx
@@ -2,8 +2,8 @@ import React, { forwardRef } from 'react'
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 
-import { AlphaStack } from '~/src/components/AlphaStack'
 import useFormFieldProps from '~/src/components/Forms/useFormFieldProps'
+import { Stack } from '~/src/components/Stack'
 
 import { type RadioGroupProps } from './RadioGroup.types'
 
@@ -20,7 +20,7 @@ function RadioGroupImpl<Value extends string>({
       asChild
       {...formFieldProps}
     >
-      <AlphaStack
+      <Stack
         ref={forwardedRef}
         justify="start"
         align="stretch"
@@ -28,7 +28,7 @@ function RadioGroupImpl<Value extends string>({
         direction={direction}
       >
         { children }
-      </AlphaStack>
+      </Stack>
     </RadioGroupPrimitive.Root>
   )
 }
diff --git a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts
index 2068020386..ccb60bfb7b 100644
--- a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts
+++ b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts
@@ -1,6 +1,7 @@
 import type * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 
 import {
+  type AlphaBezierComponentProps,
   type BezierComponentProps,
   type ChildrenProps,
 } from '~/src/types/ComponentProps'
@@ -55,7 +56,7 @@ interface RadioOptions<Value extends string> {
 type RadioFormComponentProps = Pick<FormComponentProps, 'disabled' | 'required'>
 
 export interface RadioGroupProps<Value extends string> extends
-  BezierComponentProps,
+  AlphaBezierComponentProps,
   ChildrenProps,
   RadioFormComponentProps,
   Omit<React.HTMLAttributes<HTMLDivElement>, keyof RadioGroupOptions<Value> | keyof RadioGroupPrimitive.RadioGroupProps>,
diff --git a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.styled.ts b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.styled.ts
index be30284c45..23a7c455a2 100644
--- a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.styled.ts
+++ b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.styled.ts
@@ -7,8 +7,8 @@ import {
 
 import { ZIndex } from '~/src/constants/ZIndex'
 
-import { AlphaStack } from '~/src/components/AlphaStack'
 import { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'
+import { Stack } from '~/src/components/Stack'
 import { Text } from '~/src/components/Text'
 
 import { SegmentedControlSize } from './SegmentedControl.types'
@@ -47,7 +47,7 @@ export const Indicator = styled.div`
   ${({ foundation }) => foundation?.transition?.getTransitionsCSS('transform', TransitionDuration.M)}
 `
 
-export const ItemContainer = styled(AlphaStack).attrs({
+export const ItemContainer = styled(Stack).attrs({
   direction: 'horizontal',
   align: 'center',
   spacing: 2,
@@ -114,7 +114,7 @@ export const Item = styled.button`
   }
 `
 
-export const Container = styled(AlphaStack).attrs({ direction: 'horizontal' })`
+export const Container = styled(Stack).attrs({ direction: 'horizontal' })`
   --b-segmented-control-width: auto;
 
   position: relative;
diff --git a/packages/bezier-react/src/components/Icon/Icon.stories.tsx b/packages/bezier-react/src/components/Icon/Icon.stories.tsx
index ab3d5ece5b..b19955f133 100644
--- a/packages/bezier-react/src/components/Icon/Icon.stories.tsx
+++ b/packages/bezier-react/src/components/Icon/Icon.stories.tsx
@@ -39,12 +39,12 @@ import {
 import { camelCase } from '~/src/utils/string'
 
 import { Select } from '~/src/components/Forms/Inputs/Select'
-import { ListItem } from '~/src/components/ListItem'
 import {
-  HStack,
-  StackItem,
-  VStack,
-} from '~/src/components/Stack'
+  LegacyHStack,
+  LegacyStackItem,
+  LegacyVStack,
+} from '~/src/components/LegacyStack'
+import { ListItem } from '~/src/components/ListItem'
 import { Text } from '~/src/components/Text'
 
 import { Icon } from './Icon'
@@ -115,9 +115,9 @@ export const AllIcons: StoryObj<Omit<IconProps, 'source'>> = {
 }
 
 export const Overview: StoryFn<{}> = () => (
-  <VStack spacing={16}>
-    <StackItem>
-      <HStack spacing={8}>
+  <LegacyVStack spacing={16}>
+    <LegacyStackItem>
+      <LegacyHStack spacing={8}>
         {
           [
             ChannelBtnSmileFilledIcon,
@@ -139,15 +139,15 @@ export const Overview: StoryFn<{}> = () => (
           ]
             .map((source, i) => (
               // eslint-disable-next-line react/no-array-index-key
-              <StackItem key={`item-${i}`}>
+              <LegacyStackItem key={`item-${i}`}>
                 <Icon source={source} color="txt-black-darkest" />
-              </StackItem>
+              </LegacyStackItem>
             ))
         }
-      </HStack>
-    </StackItem>
-    <StackItem>
-      <HStack spacing={8}>
+      </LegacyHStack>
+    </LegacyStackItem>
+    <LegacyStackItem>
+      <LegacyHStack spacing={8}>
         {
           [
             'txt-black-darkest' as const,
@@ -164,15 +164,15 @@ export const Overview: StoryFn<{}> = () => (
             'bgtxt-navy-normal' as const,
           ]
             .map(semanticName => (
-              <StackItem key={semanticName}>
+              <LegacyStackItem key={semanticName}>
                 <Icon source={ChannelBtnSmileFilledIcon} color={semanticName} size={IconSize.L} />
-              </StackItem>
+              </LegacyStackItem>
             ))
         }
-      </HStack>
-    </StackItem>
-    <StackItem>
-      <HStack spacing={8}>
+      </LegacyHStack>
+    </LegacyStackItem>
+    <LegacyStackItem>
+      <LegacyHStack spacing={8}>
         { [
           IconSize.XXXS,
           IconSize.XXS,
@@ -182,17 +182,17 @@ export const Overview: StoryFn<{}> = () => (
           IconSize.L,
           IconSize.XL,
         ].map((size) => (
-          <StackItem key={size}>
+          <LegacyStackItem key={size}>
             <Icon
               source={ChannelBtnSmileFilledIcon}
               color="txt-black-darkest"
               size={size}
             />
-          </StackItem>
+          </LegacyStackItem>
         )) }
-      </HStack>
-    </StackItem>
-  </VStack>
+      </LegacyHStack>
+    </LegacyStackItem>
+  </LegacyVStack>
 )
 
 export const UsageColor: StoryObj<{}> = {
@@ -200,15 +200,15 @@ export const UsageColor: StoryObj<{}> = {
     const [color, setColor] = useState<SemanticNames>('bgtxt-blue-normal')
 
     return (
-      <VStack spacing={16}>
-        <StackItem>
+      <LegacyVStack spacing={16}>
+        <LegacyStackItem>
           <Icon
             source={ChannelBtnSmileFilledIcon}
             color={color}
             size={IconSize.L}
           />
-        </StackItem>
-        <StackItem>
+        </LegacyStackItem>
+        <LegacyStackItem>
           <Select text={color} style={{ width: 200 }}>
             <div style={{ padding: 6, maxHeight: 200, overflowY: 'auto' }}>
               { Object.keys(LightFoundation.theme).map((semanticName) => (
@@ -220,8 +220,8 @@ export const UsageColor: StoryObj<{}> = {
               )) }
             </div>
           </Select>
-        </StackItem>
-      </VStack>
+        </LegacyStackItem>
+      </LegacyVStack>
     )
   },
 
@@ -229,7 +229,7 @@ export const UsageColor: StoryObj<{}> = {
 }
 
 export const UsageSize: StoryFn<{}> = () => (
-  <VStack spacing={16}>
+  <LegacyVStack spacing={16}>
     { [
       { label: 'XXXS', size: IconSize.XXXS },
       { label: 'XXS', size: IconSize.XXS },
@@ -239,24 +239,24 @@ export const UsageSize: StoryFn<{}> = () => (
       { label: 'L', size: IconSize.L },
       { label: 'XL', size: IconSize.XL },
     ].map(({ label, size }) => (
-      <StackItem key={size}>
-        <HStack spacing={24}>
-          <StackItem size={100}>
+      <LegacyStackItem key={size}>
+        <LegacyHStack spacing={24}>
+          <LegacyStackItem size={100}>
             <Text typo="13" color="txt-black-darkest">
               { `${label} (${size}x${size})` }
             </Text>
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <Icon
               source={ChannelBtnSmileFilledIcon}
               color="txt-black-darkest"
               size={size}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
     )) }
-  </VStack>
+  </LegacyVStack>
 )
 
 export const TipsMargin: StoryObj<{}> = {
diff --git a/packages/bezier-react/src/components/KeyValueListItem/__snapshots__/KeyValueListItem.test.tsx.snap b/packages/bezier-react/src/components/KeyValueListItem/__snapshots__/KeyValueListItem.test.tsx.snap
index 0b678b5840..4a408c27b5 100644
--- a/packages/bezier-react/src/components/KeyValueListItem/__snapshots__/KeyValueListItem.test.tsx.snap
+++ b/packages/bezier-react/src/components/KeyValueListItem/__snapshots__/KeyValueListItem.test.tsx.snap
@@ -140,7 +140,7 @@ exports[`KeyValueListItem Snapshot > 1`] = `
         />
       </svg>
       <div
-        class="margin Text typo-12 bold truncated c6"
+        class="Text typo-12 bold truncated margin c6"
         data-testid="bezier-react-text"
         foundation="[object Object]"
         style="--b-text-color: var(--txt-black-dark);"
diff --git a/packages/bezier-react/src/components/Stack/HStack/HStack.test.tsx b/packages/bezier-react/src/components/LegacyStack/HStack/HStack.test.tsx
similarity index 100%
rename from packages/bezier-react/src/components/Stack/HStack/HStack.test.tsx
rename to packages/bezier-react/src/components/LegacyStack/HStack/HStack.test.tsx
diff --git a/packages/bezier-react/src/components/Stack/HStack/HStack.tsx b/packages/bezier-react/src/components/LegacyStack/HStack/HStack.tsx
similarity index 66%
rename from packages/bezier-react/src/components/Stack/HStack/HStack.tsx
rename to packages/bezier-react/src/components/LegacyStack/HStack/HStack.tsx
index 108bacba1f..e9e701730b 100644
--- a/packages/bezier-react/src/components/Stack/HStack/HStack.tsx
+++ b/packages/bezier-react/src/components/LegacyStack/HStack/HStack.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import type { Ref } from 'react'
 
-import { Stack } from '~/src/components/Stack/Stack'
+import { LegacyStack } from '~/src/components/LegacyStack/Stack'
 
 import type HStackProps from './HStack.types'
 
@@ -12,5 +12,5 @@ export const HStack = forwardRef(function HStack(
   props: HStackProps,
   forwardedRef: Ref<HTMLElement>,
 ) {
-  return (<Stack ref={forwardedRef} direction="horizontal" {...props} />)
+  return (<LegacyStack ref={forwardedRef} direction="horizontal" {...props} />)
 })
diff --git a/packages/bezier-react/src/components/LegacyStack/HStack/HStack.types.ts b/packages/bezier-react/src/components/LegacyStack/HStack/HStack.types.ts
new file mode 100644
index 0000000000..97720b21b6
--- /dev/null
+++ b/packages/bezier-react/src/components/LegacyStack/HStack/HStack.types.ts
@@ -0,0 +1,3 @@
+import type { LegacyStackProps } from '~/src/components/LegacyStack/Stack'
+
+export default interface HStackProps extends Omit<LegacyStackProps, 'direction'> {}
diff --git a/packages/bezier-react/src/components/LegacyStack/HStack/index.ts b/packages/bezier-react/src/components/LegacyStack/HStack/index.ts
new file mode 100644
index 0000000000..e20c8b2c8d
--- /dev/null
+++ b/packages/bezier-react/src/components/LegacyStack/HStack/index.ts
@@ -0,0 +1,2 @@
+export { HStack as LegacyHStack } from './HStack'
+export type { default as LegacyHStackProps } from './HStack.types'
diff --git a/packages/bezier-react/src/components/Stack/Spacer/Spacer.tsx b/packages/bezier-react/src/components/LegacyStack/Spacer/Spacer.tsx
similarity index 79%
rename from packages/bezier-react/src/components/Stack/Spacer/Spacer.tsx
rename to packages/bezier-react/src/components/LegacyStack/Spacer/Spacer.tsx
index aff4da0e49..fa1e579da0 100644
--- a/packages/bezier-react/src/components/Stack/Spacer/Spacer.tsx
+++ b/packages/bezier-react/src/components/LegacyStack/Spacer/Spacer.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import type { Ref } from 'react'
 
-import { StackItem } from '~/src/components/Stack/StackItem'
+import { LegacyStackItem } from '~/src/components/LegacyStack/StackItem'
 
 import type SpacerProps from './Spacer.types'
 
@@ -10,7 +10,7 @@ export const Spacer = forwardRef(function Spacer(
   forwardedRef: Ref<HTMLElement>,
 ) {
   return (
-    <StackItem
+    <LegacyStackItem
       ref={forwardedRef}
       size={0}
       weight={1}
diff --git a/packages/bezier-react/src/components/Stack/Spacer/Spacer.types.ts b/packages/bezier-react/src/components/LegacyStack/Spacer/Spacer.types.ts
similarity index 100%
rename from packages/bezier-react/src/components/Stack/Spacer/Spacer.types.ts
rename to packages/bezier-react/src/components/LegacyStack/Spacer/Spacer.types.ts
diff --git a/packages/bezier-react/src/components/LegacyStack/Spacer/index.ts b/packages/bezier-react/src/components/LegacyStack/Spacer/index.ts
new file mode 100644
index 0000000000..e7c423c395
--- /dev/null
+++ b/packages/bezier-react/src/components/LegacyStack/Spacer/index.ts
@@ -0,0 +1,2 @@
+export { Spacer as LegacySpacer } from './Spacer'
+export type { default as LegacySpacerProps } from './Spacer.types'
diff --git a/packages/bezier-react/src/components/Stack/Stack.mdx b/packages/bezier-react/src/components/LegacyStack/Stack.mdx
similarity index 100%
rename from packages/bezier-react/src/components/Stack/Stack.mdx
rename to packages/bezier-react/src/components/LegacyStack/Stack.mdx
diff --git a/packages/bezier-react/src/components/LegacyStack/Stack.stories.tsx b/packages/bezier-react/src/components/LegacyStack/Stack.stories.tsx
new file mode 100644
index 0000000000..8acf0fa66e
--- /dev/null
+++ b/packages/bezier-react/src/components/LegacyStack/Stack.stories.tsx
@@ -0,0 +1,645 @@
+import React, { useState } from 'react'
+
+import type {
+  Meta,
+  StoryFn,
+  StoryObj,
+} from '@storybook/react'
+
+import { type SemanticNames } from '~/src/foundation'
+
+import { LightTheme } from '~/src/foundation/Colors/Theme'
+
+import { range } from '~/src/utils/number'
+
+import {
+  Button,
+  ButtonSize,
+} from '~/src/components/Button'
+import { Text } from '~/src/components/Text'
+
+import { LegacyHStack } from './HStack'
+import { LegacySpacer } from './Spacer'
+import {
+  LegacyStack,
+  type LegacyStackProps,
+} from './Stack'
+import mdx from './Stack.mdx'
+import { LegacyStackItem } from './StackItem'
+import { LegacyVStack } from './VStack'
+import type { AxisAlignment } from './types'
+
+const meta: Meta<LegacyStackProps & {
+  containerSize: number
+}> = {
+  component: LegacyStack,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+  argTypes: {
+    containerSize: {
+      control: {
+        type: 'range',
+        min: 400,
+        max: 1200,
+        step: 10,
+      },
+    },
+    direction: {
+      control: {
+        type: 'radio',
+      },
+      options: ['horizontal', 'vertical'],
+    },
+    justify: {
+      control: {
+        type: 'radio',
+      },
+      options: ['start', 'center', 'end', 'stretch'],
+    },
+    align: {
+      control: {
+        type: 'radio',
+      },
+      options: ['start', 'center', 'end', 'stretch'],
+    },
+    spacing: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 32,
+        step: 4,
+      },
+    },
+  },
+}
+export default meta
+
+const randomColor = (): SemanticNames =>
+  Object.values(LightTheme)[Math.floor(Math.random() * Object.keys(LightTheme).length)] as SemanticNames
+const randomSize = (): number => Math.floor((Math.random() * 240) + 120)
+
+const Item = ({
+  fixedSize,
+  direction,
+}: {
+  fixedSize: boolean
+  direction: 'horizontal' | 'vertical'
+}) => {
+  const [color] = useState(() => randomColor())
+  const [alignSize] = useState(() => randomSize())
+
+  return (
+    <div
+      style={{
+        width: fixedSize && direction === 'vertical' ? alignSize : '100%',
+        height: fixedSize && direction === 'horizontal' ? alignSize : '100%',
+        backgroundColor: color,
+        borderRadius: '4px',
+        boxShadow: 'inset 0 0 1px #c0c0c0',
+      }}
+    />
+  )
+}
+
+interface StackPreviewProps {
+  containerSize: number
+
+  /* Stack Props */
+  direction: 'horizontal' | 'vertical'
+  justify: AxisAlignment
+  align: AxisAlignment
+  spacing: number
+
+  /* Item Props */
+  itemJustifies: (AxisAlignment | undefined)[]
+  itemAligns: (AxisAlignment | undefined)[]
+  itemSizes: (number | undefined)[]
+  itemWeights: (number | undefined)[]
+  itemGrows: (boolean | undefined)[]
+  itemShrinks: (boolean | undefined)[]
+  itemMarginBefores: (number | undefined)[]
+  itemMarginAfters: (number | undefined)[]
+}
+
+const Template: StoryFn<StackPreviewProps> = ({
+  containerSize,
+
+  direction,
+  justify,
+  align,
+  spacing,
+
+  itemJustifies,
+  itemAligns,
+  itemSizes,
+  itemWeights,
+  itemGrows,
+  itemShrinks,
+  itemMarginBefores,
+  itemMarginAfters,
+}: StackPreviewProps) => (
+  <>
+    <div
+      style={{
+        border: '1px solid #e0e0e0',
+        borderRadius: 4,
+        ...(
+          direction === 'horizontal'
+            ? { width: containerSize, height: 480 }
+            : { width: 480, height: containerSize }
+        ),
+      }}
+    >
+      <LegacyStack
+        direction={direction}
+        justify={justify}
+        align={align}
+        spacing={spacing}
+      >
+        { range(4)
+          .map(i => (
+            <LegacyStackItem
+              key={`item-${i}`}
+              justify={itemJustifies[i]}
+              align={itemAligns[i]}
+              size={itemSizes[i]}
+              weight={itemWeights[i]}
+              grow={itemGrows[i]}
+              shrink={itemShrinks[i]}
+              marginBefore={itemMarginBefores[i]}
+              marginAfter={itemMarginAfters[i]}
+            >
+              <Item direction={direction} fixedSize={(align ?? itemAligns[i]) !== 'stretch'} />
+            </LegacyStackItem>
+          )) }
+      </LegacyStack>
+    </div>
+  </>
+)
+
+export const Primary: StoryObj<StackPreviewProps> = {
+  render: Template,
+
+  args: {
+    containerSize: 800,
+
+    direction: 'horizontal',
+    justify: 'start',
+    align: 'start',
+    spacing: 0,
+
+    itemJustifies: [],
+    itemAligns: [],
+    itemSizes: [120, 240, 180, 120],
+    itemWeights: [],
+    itemGrows: [],
+    itemShrinks: [],
+    itemMarginBefores: [],
+    itemMarginAfters: [],
+  },
+}
+
+export const Overview: StoryFn<{}> = () => (
+  <LegacyVStack style={{ width: '400px' }} spacing={16} align="stretch">
+    <LegacyStackItem>
+      <Text
+        as="h3"
+        style={{
+          border: '1px solid #ccc',
+        }}
+        typo="24"
+        bold
+      >
+        스택에 대해 더 자세히 알아보세요.
+      </Text>
+    </LegacyStackItem>
+    <LegacyStackItem>
+      <Text
+        as="p"
+        style={{
+          border: '1px solid #ccc',
+        }}
+        typo="13"
+        color="txt-black-darker"
+      >
+        스택은 flex layout을 서술하는 컴포넌트입니다. 스택과 함께라면 뭐든지 만들 수 있어요. 누가 만들었는지는 모르겠지만, 정말 잘 만든 컴포넌트에요. FormControl과 함께 싸드세요!
+      </Text>
+    </LegacyStackItem>
+    <LegacyStackItem>
+      <div
+        style={{
+          border: '1px solid #ccc',
+        }}
+      >
+        <Button
+          size={ButtonSize.L}
+          text="스택에 대해 더 자세히 알아보기"
+        />
+      </div>
+    </LegacyStackItem>
+  </LegacyVStack>
+)
+
+export const DirectionHorizontal: StoryObj<{}> = {
+  render: () => (
+    <LegacyHStack
+      style={{ width: '720px', height: '60px', border: '1px solid #ffc0c0' }}
+      align="stretch"
+    >
+      <LegacyStackItem size={120} style={{ backgroundColor: '#ccc' }}>
+        <Text typo="18">Item 1</Text>
+      </LegacyStackItem>
+      <LegacyStackItem size={180} style={{ backgroundColor: '#eee' }}>
+        <Text typo="18">Item 2</Text>
+      </LegacyStackItem>
+      <LegacyStackItem size={180} style={{ backgroundColor: '#888' }}>
+        <Text typo="18">Item 3</Text>
+      </LegacyStackItem>
+      <LegacyStackItem size={80} style={{ backgroundColor: '#aaa' }}>
+        <Text typo="18">Item 4</Text>
+      </LegacyStackItem>
+    </LegacyHStack>
+  ),
+
+  name: 'Horizontal stack',
+}
+
+export const DirectionVertical: StoryObj<{}> = {
+  render: () => (
+    <LegacyVStack
+      style={{ width: '200px', height: '600px', border: '1px solid #ffc0c0' }}
+      align="start"
+    >
+      <LegacyStackItem size={120} style={{ width: '80px', backgroundColor: '#ccc' }}>
+        <Text typo="18">Item 1</Text>
+      </LegacyStackItem>
+      <LegacyStackItem size={180} style={{ width: '150px', backgroundColor: '#eee' }}>
+        <Text typo="18">Item 2</Text>
+      </LegacyStackItem>
+      <LegacyStackItem size={180} style={{ width: '200px', backgroundColor: '#888' }}>
+        <Text typo="18">Item 3</Text>
+      </LegacyStackItem>
+      <LegacyStackItem size={80} style={{ width: '120px', backgroundColor: '#aaa' }}>
+        <Text typo="18">Item 4</Text>
+      </LegacyStackItem>
+    </LegacyVStack>
+  ),
+
+  name: 'Vertical stack',
+}
+
+export const AlignmentJustify: StoryObj<{}> = {
+  render: () => (
+    <LegacyVStack align="stretch" spacing={8}>
+      <LegacyStackItem>
+        <Text typo="14">justify = &quot;start&quot;</Text>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack
+          style={{
+            width: '720px',
+            height: '60px',
+            border: '1px solid #ffc0c0',
+          }}
+          justify="start"
+          align="stretch"
+        >
+          <LegacyStackItem size={120} style={{ backgroundColor: '#ccc' }}>
+            <Text typo="18">Item 1</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={180} style={{ backgroundColor: '#eee' }}>
+            <Text typo="18">Item 2</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={180} style={{ backgroundColor: '#888' }}>
+            <Text typo="18">Item 3</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={80} style={{ backgroundColor: '#aaa' }}>
+            <Text typo="18">Item 4</Text>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem marginBefore={16}>
+        <Text typo="14">justify = &quot;center&quot;</Text>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack
+          style={{
+            width: '720px',
+            height: '60px',
+            border: '1px solid #ffc0c0',
+          }}
+          justify="center"
+          align="stretch"
+        >
+          <LegacyStackItem size={120} style={{ backgroundColor: '#ccc' }}>
+            <Text typo="18">Item 1</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={180} style={{ backgroundColor: '#eee' }}>
+            <Text typo="18">Item 2</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={180} style={{ backgroundColor: '#888' }}>
+            <Text typo="18">Item 3</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={80} style={{ backgroundColor: '#aaa' }}>
+            <Text typo="18">Item 4</Text>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem marginBefore={16}>
+        <Text typo="14">justify = &quot;end&quot;</Text>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack
+          style={{
+            width: '720px',
+            height: '60px',
+            border: '1px solid #ffc0c0',
+          }}
+          justify="end"
+          align="stretch"
+        >
+          <LegacyStackItem size={120} style={{ backgroundColor: '#ccc' }}>
+            <Text typo="18">Item 1</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={180} style={{ backgroundColor: '#eee' }}>
+            <Text typo="18">Item 2</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={180} style={{ backgroundColor: '#888' }}>
+            <Text typo="18">Item 3</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={80} style={{ backgroundColor: '#aaa' }}>
+            <Text typo="18">Item 4</Text>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+    </LegacyVStack>
+  ),
+
+  name: 'Alignment (justify)',
+}
+
+export const AlignmentAlign: StoryObj<{}> = {
+  render: () => (
+    <LegacyVStack align="stretch" spacing={8}>
+      <LegacyStackItem>
+        <Text typo="14">align = &quot;start&quot;</Text>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack
+          style={{
+            width: '720px',
+            height: '80px',
+            border: '1px solid #ffc0c0',
+          }}
+          justify="start"
+          align="start"
+        >
+          <LegacyStackItem
+            size={120}
+            style={{ height: '40px', backgroundColor: '#ccc' }}
+          >
+            <Text typo="18">Item 1</Text>
+          </LegacyStackItem>
+          <LegacyStackItem
+            size={180}
+            style={{ height: '60px', backgroundColor: '#eee' }}
+          >
+            <Text typo="18">Item 2</Text>
+          </LegacyStackItem>
+          <LegacyStackItem
+            size={180}
+            style={{ height: '50px', backgroundColor: '#888' }}
+          >
+            <Text typo="18">Item 3</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={80} style={{ backgroundColor: '#aaa' }}>
+            <Text typo="18">Item 4</Text>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem marginBefore={16}>
+        <Text typo="14">align = &quot;center&quot;</Text>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack
+          style={{
+            width: '720px',
+            height: '80px',
+            border: '1px solid #ffc0c0',
+          }}
+          justify="start"
+          align="center"
+        >
+          <LegacyStackItem
+            size={120}
+            style={{ height: '40px', backgroundColor: '#ccc' }}
+          >
+            <Text typo="18">Item 1</Text>
+          </LegacyStackItem>
+          <LegacyStackItem
+            size={180}
+            style={{ height: '60px', backgroundColor: '#eee' }}
+          >
+            <Text typo="18">Item 2</Text>
+          </LegacyStackItem>
+          <LegacyStackItem
+            size={180}
+            style={{ height: '50px', backgroundColor: '#888' }}
+          >
+            <Text typo="18">Item 3</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={80} style={{ backgroundColor: '#aaa' }}>
+            <Text typo="18">Item 4</Text>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem marginBefore={16}>
+        <Text typo="14">align = &quot;end&quot;</Text>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack
+          style={{
+            width: '720px',
+            height: '80px',
+            border: '1px solid #ffc0c0',
+          }}
+          justify="start"
+          align="end"
+        >
+          <LegacyStackItem
+            size={120}
+            style={{ height: '40px', backgroundColor: '#ccc' }}
+          >
+            <Text typo="18">Item 1</Text>
+          </LegacyStackItem>
+          <LegacyStackItem
+            size={180}
+            style={{ height: '60px', backgroundColor: '#eee' }}
+          >
+            <Text typo="18">Item 2</Text>
+          </LegacyStackItem>
+          <LegacyStackItem
+            size={180}
+            style={{ height: '50px', backgroundColor: '#888' }}
+          >
+            <Text typo="18">Item 3</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={80} style={{ backgroundColor: '#aaa' }}>
+            <Text typo="18">Item 4</Text>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem marginBefore={16}>
+        <Text typo="14">align = &quot;stretch&quot;</Text>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack
+          style={{
+            width: '720px',
+            height: '80px',
+            border: '1px solid #ffc0c0',
+          }}
+          justify="start"
+          align="stretch"
+        >
+          <LegacyStackItem
+            size={120}
+            style={{ height: '40px', backgroundColor: '#ccc' }}
+          >
+            <Text typo="18">Item 1</Text>
+          </LegacyStackItem>
+          <LegacyStackItem
+            size={180}
+            style={{ height: '60px', backgroundColor: '#eee' }}
+          >
+            <Text typo="18">Item 2</Text>
+          </LegacyStackItem>
+          <LegacyStackItem
+            size={180}
+            style={{ height: '50px', backgroundColor: '#888' }}
+          >
+            <Text typo="18">Item 3</Text>
+          </LegacyStackItem>
+          <LegacyStackItem size={80} style={{ backgroundColor: '#aaa' }}>
+            <Text typo="18">Item 4</Text>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+    </LegacyVStack>
+  ),
+
+  name: 'Alignment (align)',
+}
+
+export const Spacing: StoryFn<{}> = () => (
+  <LegacyHStack
+    style={{ width: '720px', height: '80px', border: '1px solid #ffc0c0' }}
+    justify="start"
+    align="stretch"
+    spacing={16}
+  >
+    <LegacyStackItem
+      size={120}
+      style={{ backgroundColor: '#ccc' }}
+    >
+      <Text typo="18">Item 1</Text>
+    </LegacyStackItem>
+    <LegacyStackItem
+      size={180}
+      style={{ backgroundColor: '#eee' }}
+    >
+      <Text typo="18">Item 2</Text>
+    </LegacyStackItem>
+    <LegacyStackItem
+      size={180}
+      style={{ backgroundColor: '#888' }}
+    >
+      <Text typo="18">Item 3</Text>
+    </LegacyStackItem>
+    <LegacyStackItem
+      size={80}
+      style={{ backgroundColor: '#aaa' }}
+      marginBefore={40}
+    >
+      <Text typo="18">Item 4</Text>
+    </LegacyStackItem>
+  </LegacyHStack>
+)
+
+export const Expanded: StoryFn<{}> = () => (
+  <LegacyHStack
+    style={{ width: '720px', height: '80px', border: '1px solid #ffc0c0' }}
+    justify="start"
+    align="stretch"
+  >
+    <LegacyStackItem
+      size={120}
+      style={{ backgroundColor: '#ccc' }}
+    >
+      <Text typo="18">Item 1</Text>
+    </LegacyStackItem>
+    <LegacyStackItem
+      size={180}
+      style={{ backgroundColor: '#eee' }}
+    >
+      <Text typo="18">Item 2</Text>
+    </LegacyStackItem>
+    <LegacyStackItem
+      grow
+      shrink
+      weight={1}
+      style={{ backgroundColor: '#ffa0a0' }}
+    >
+      <Text typo="18">Item 3 (Expanded)</Text>
+    </LegacyStackItem>
+    <LegacyStackItem
+      size={80}
+      style={{ backgroundColor: '#aaa' }}
+    >
+      <Text typo="18">Item 4</Text>
+    </LegacyStackItem>
+  </LegacyHStack>
+)
+
+export const WeightSpacer: StoryObj<{}> = {
+  render: () => (
+    <LegacyHStack
+      style={{ width: '720px', height: '80px', border: '1px solid #ffc0c0' }}
+      justify="start"
+      align="stretch"
+    >
+      <LegacyStackItem size={120} style={{ backgroundColor: '#ccc' }}>
+        <Text typo="18">Item 1</Text>
+      </LegacyStackItem>
+      <LegacySpacer />
+      <LegacyStackItem size={80} style={{ backgroundColor: '#aaa' }}>
+        <Text typo="18">Item 2</Text>
+      </LegacyStackItem>
+    </LegacyHStack>
+  ),
+
+  name: 'Spacer',
+}
+
+export const WeightFixed: StoryObj<{}> = {
+  render: () => (
+    <LegacyHStack
+      style={{ width: '100px', height: '80px', border: '1px solid #ffc0c0' }}
+      justify="start"
+      align="stretch"
+    >
+      <LegacyStackItem size={80} style={{ backgroundColor: '#ccc' }}>
+        <Text typo="18">Item 1</Text>
+      </LegacyStackItem>
+      <LegacySpacer />
+      <LegacyStackItem size={80} style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}>
+        <Text typo="18">Item 2</Text>
+      </LegacyStackItem>
+    </LegacyHStack>
+  ),
+
+  name: 'Fix-sized item',
+}
diff --git a/packages/bezier-react/src/components/Stack/Stack/Stack.styled.ts b/packages/bezier-react/src/components/LegacyStack/Stack/Stack.styled.ts
similarity index 91%
rename from packages/bezier-react/src/components/Stack/Stack/Stack.styled.ts
rename to packages/bezier-react/src/components/LegacyStack/Stack/Stack.styled.ts
index f470520393..99ad0de7fa 100644
--- a/packages/bezier-react/src/components/Stack/Stack/Stack.styled.ts
+++ b/packages/bezier-react/src/components/LegacyStack/Stack/Stack.styled.ts
@@ -3,7 +3,7 @@ import {
   styled,
 } from '~/src/foundation'
 
-import { flex } from '~/src/components/Stack/util'
+import { flex } from '~/src/components/LegacyStack/util'
 
 import type StackProps from './Stack.types'
 
diff --git a/packages/bezier-react/src/components/Stack/Stack/Stack.test.tsx b/packages/bezier-react/src/components/LegacyStack/Stack/Stack.test.tsx
similarity index 89%
rename from packages/bezier-react/src/components/Stack/Stack/Stack.test.tsx
rename to packages/bezier-react/src/components/LegacyStack/Stack/Stack.test.tsx
index 50571f2cdd..2df97af793 100644
--- a/packages/bezier-react/src/components/Stack/Stack/Stack.test.tsx
+++ b/packages/bezier-react/src/components/LegacyStack/Stack/Stack.test.tsx
@@ -4,7 +4,7 @@ import { css } from '~/src/foundation'
 
 import { render } from '~/src/utils/test'
 
-import { StackItem } from '~/src/components/Stack/StackItem'
+import { LegacyStackItem } from '~/src/components/LegacyStack/StackItem'
 
 import { Stack } from './Stack'
 
@@ -60,9 +60,9 @@ describe('Stack', () => {
 
     const { getByTestId } = render(
       <Stack direction="horizontal" spacing={spacing}>
-        <StackItem testId="one" />
-        <StackItem testId="two" />
-        <StackItem testId="three" />
+        <LegacyStackItem testId="one" />
+        <LegacyStackItem testId="two" />
+        <LegacyStackItem testId="three" />
       </Stack>,
     )
 
@@ -79,9 +79,9 @@ describe('Stack', () => {
         { false }
         { null }
         abc
-        <StackItem testId="one" />
-        <StackItem testId="two" />
-        <StackItem testId="three" />
+        <LegacyStackItem testId="one" />
+        <LegacyStackItem testId="two" />
+        <LegacyStackItem testId="three" />
       </Stack>,
     )
 
diff --git a/packages/bezier-react/src/components/Stack/Stack/Stack.tsx b/packages/bezier-react/src/components/LegacyStack/Stack/Stack.tsx
similarity index 100%
rename from packages/bezier-react/src/components/Stack/Stack/Stack.tsx
rename to packages/bezier-react/src/components/LegacyStack/Stack/Stack.tsx
diff --git a/packages/bezier-react/src/components/Stack/Stack/Stack.types.ts b/packages/bezier-react/src/components/LegacyStack/Stack/Stack.types.ts
similarity index 94%
rename from packages/bezier-react/src/components/Stack/Stack/Stack.types.ts
rename to packages/bezier-react/src/components/LegacyStack/Stack/Stack.types.ts
index 6ab0359356..8465d71549 100644
--- a/packages/bezier-react/src/components/Stack/Stack/Stack.types.ts
+++ b/packages/bezier-react/src/components/LegacyStack/Stack/Stack.types.ts
@@ -3,7 +3,7 @@ import type {
   ChildrenProps,
 } from '~/src/types/ComponentProps'
 
-import type { AxisAlignment } from '~/src/components/Stack/types'
+import type { AxisAlignment } from '~/src/components/LegacyStack/types'
 
 interface StackOptions {
   /**
diff --git a/packages/bezier-react/src/components/LegacyStack/Stack/index.ts b/packages/bezier-react/src/components/LegacyStack/Stack/index.ts
new file mode 100644
index 0000000000..8b7c355202
--- /dev/null
+++ b/packages/bezier-react/src/components/LegacyStack/Stack/index.ts
@@ -0,0 +1,2 @@
+export { Stack as LegacyStack } from './Stack'
+export type { default as LegacyStackProps } from './Stack.types'
diff --git a/packages/bezier-react/src/components/Stack/StackItem/StackItem.styled.ts b/packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.styled.ts
similarity index 94%
rename from packages/bezier-react/src/components/Stack/StackItem/StackItem.styled.ts
rename to packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.styled.ts
index ade840c17a..bd64f35a15 100644
--- a/packages/bezier-react/src/components/Stack/StackItem/StackItem.styled.ts
+++ b/packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.styled.ts
@@ -5,7 +5,7 @@ import {
 
 import { isNil } from '~/src/utils/type'
 
-import { flex } from '~/src/components/Stack/util'
+import { flex } from '~/src/components/LegacyStack/util'
 
 import type StackItemProps from './StackItem.types'
 
diff --git a/packages/bezier-react/src/components/Stack/StackItem/StackItem.test.tsx b/packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.test.tsx
similarity index 90%
rename from packages/bezier-react/src/components/Stack/StackItem/StackItem.test.tsx
rename to packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.test.tsx
index 04e13eb749..27117b5250 100644
--- a/packages/bezier-react/src/components/Stack/StackItem/StackItem.test.tsx
+++ b/packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.test.tsx
@@ -4,7 +4,7 @@ import { css } from '~/src/foundation'
 
 import { render } from '~/src/utils/test'
 
-import { Stack } from '~/src/components/Stack'
+import { LegacyStack } from '~/src/components/LegacyStack'
 
 import { StackItem } from './StackItem'
 
@@ -37,11 +37,11 @@ describe('StackItem', () => {
 
   it('inherits main axis alignment of parent stack-item component', () => {
     const { getByTestId } = render(
-      <Stack direction="horizontal" justify="start">
+      <LegacyStack direction="horizontal" justify="start">
         <StackItem testId="item">
           <div />
         </StackItem>
-      </Stack>,
+      </LegacyStack>,
     )
 
     expect(getByTestId('item')).toHaveStyle({ 'justify-content': '' })
@@ -50,7 +50,7 @@ describe('StackItem', () => {
 
   it('can override main axis alignment of parent stack component', () => {
     const { getByTestId } = render(
-      <Stack direction="horizontal" justify="start">
+      <LegacyStack direction="horizontal" justify="start">
         <StackItem testId="item-start" justify="start">
           <div />
         </StackItem>
@@ -66,7 +66,7 @@ describe('StackItem', () => {
         <StackItem testId="item-stretch" justify="stretch">
           <div />
         </StackItem>
-      </Stack>,
+      </LegacyStack>,
     )
 
     expect(getByTestId('item-start')).toHaveStyle({ 'justify-self': 'flex-start' })
@@ -77,11 +77,11 @@ describe('StackItem', () => {
 
   it('inherits cross axis alignment of parent stack component', () => {
     const { getByTestId } = render(
-      <Stack direction="horizontal" align="start">
+      <LegacyStack direction="horizontal" align="start">
         <StackItem testId="item">
           <div />
         </StackItem>
-      </Stack>,
+      </LegacyStack>,
     )
 
     expect(getByTestId('item')).toHaveStyle({ 'align-items': '' })
@@ -90,7 +90,7 @@ describe('StackItem', () => {
 
   it('can override cross axis alignment of parent stack component', () => {
     const { getByTestId } = render(
-      <Stack direction="horizontal" align="center">
+      <LegacyStack direction="horizontal" align="center">
         <StackItem testId="item-start" align="start">
           <div />
         </StackItem>
@@ -106,7 +106,7 @@ describe('StackItem', () => {
         <StackItem testId="item-stretch" align="stretch">
           <div />
         </StackItem>
-      </Stack>,
+      </LegacyStack>,
     )
 
     expect(getByTestId('item-start')).toHaveStyle({ 'align-self': 'flex-start' })
@@ -128,12 +128,12 @@ describe('StackItem', () => {
       const TEST_IDS = ['one', 'two', 'three', 'four']
 
       const { getByTestId } = render(
-        <Stack direction="horizontal">
+        <LegacyStack direction="horizontal">
           <StackItem testId="one" />
           <StackItem testId="two" grow shrink weight={1} />
           <StackItem testId="three" marginBefore={16} shrink weight={2} />
           <StackItem testId="four" style={{ color: 'red' }} marginAfter={20} size={32} />
-        </Stack>,
+        </LegacyStack>,
       )
 
       TEST_IDS
diff --git a/packages/bezier-react/src/components/Stack/StackItem/StackItem.tsx b/packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.tsx
similarity index 100%
rename from packages/bezier-react/src/components/Stack/StackItem/StackItem.tsx
rename to packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.tsx
diff --git a/packages/bezier-react/src/components/Stack/StackItem/StackItem.types.ts b/packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.types.ts
similarity index 96%
rename from packages/bezier-react/src/components/Stack/StackItem/StackItem.types.ts
rename to packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.types.ts
index e42ebc4ab9..68d13aa98f 100644
--- a/packages/bezier-react/src/components/Stack/StackItem/StackItem.types.ts
+++ b/packages/bezier-react/src/components/LegacyStack/StackItem/StackItem.types.ts
@@ -3,7 +3,7 @@ import type {
   ChildrenProps,
 } from '~/src/types/ComponentProps'
 
-import type { AxisAlignment } from '~/src/components/Stack/types'
+import type { AxisAlignment } from '~/src/components/LegacyStack/types'
 
 interface StackItemOptions {
   /**
diff --git a/packages/bezier-react/src/components/LegacyStack/StackItem/index.ts b/packages/bezier-react/src/components/LegacyStack/StackItem/index.ts
new file mode 100644
index 0000000000..840fc3dfa3
--- /dev/null
+++ b/packages/bezier-react/src/components/LegacyStack/StackItem/index.ts
@@ -0,0 +1,2 @@
+export { StackItem as LegacyStackItem } from './StackItem'
+export type { default as LegacyStackItemProps } from './StackItem.types'
diff --git a/packages/bezier-react/src/components/Stack/VStack/VStack.test.tsx b/packages/bezier-react/src/components/LegacyStack/VStack/VStack.test.tsx
similarity index 100%
rename from packages/bezier-react/src/components/Stack/VStack/VStack.test.tsx
rename to packages/bezier-react/src/components/LegacyStack/VStack/VStack.test.tsx
diff --git a/packages/bezier-react/src/components/Stack/VStack/VStack.tsx b/packages/bezier-react/src/components/LegacyStack/VStack/VStack.tsx
similarity index 66%
rename from packages/bezier-react/src/components/Stack/VStack/VStack.tsx
rename to packages/bezier-react/src/components/LegacyStack/VStack/VStack.tsx
index 2074bb8b7c..21ba3239c6 100644
--- a/packages/bezier-react/src/components/Stack/VStack/VStack.tsx
+++ b/packages/bezier-react/src/components/LegacyStack/VStack/VStack.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import type { Ref } from 'react'
 
-import { Stack } from '~/src/components/Stack/Stack'
+import { LegacyStack } from '~/src/components/LegacyStack/Stack'
 
 import type VStackProps from './VStack.types'
 
@@ -12,5 +12,5 @@ export const VStack = forwardRef(function VStack(
   props: VStackProps,
   forwardedRef: Ref<HTMLElement>,
 ) {
-  return (<Stack ref={forwardedRef} direction="vertical" {...props} />)
+  return (<LegacyStack ref={forwardedRef} direction="vertical" {...props} />)
 })
diff --git a/packages/bezier-react/src/components/LegacyStack/VStack/VStack.types.ts b/packages/bezier-react/src/components/LegacyStack/VStack/VStack.types.ts
new file mode 100644
index 0000000000..cbc79ff28f
--- /dev/null
+++ b/packages/bezier-react/src/components/LegacyStack/VStack/VStack.types.ts
@@ -0,0 +1,3 @@
+import type { LegacyStackProps } from '~/src/components/LegacyStack/Stack'
+
+export default interface VStackProps extends Omit<LegacyStackProps, 'direction'> {}
diff --git a/packages/bezier-react/src/components/LegacyStack/VStack/index.ts b/packages/bezier-react/src/components/LegacyStack/VStack/index.ts
new file mode 100644
index 0000000000..6d2ec8f867
--- /dev/null
+++ b/packages/bezier-react/src/components/LegacyStack/VStack/index.ts
@@ -0,0 +1,2 @@
+export { VStack as LegacyVStack } from './VStack'
+export type { default as LegacyVStackProps } from './VStack.types'
diff --git a/packages/bezier-react/src/components/LegacyStack/index.ts b/packages/bezier-react/src/components/LegacyStack/index.ts
new file mode 100644
index 0000000000..4a2539fad0
--- /dev/null
+++ b/packages/bezier-react/src/components/LegacyStack/index.ts
@@ -0,0 +1,7 @@
+export * from './HStack'
+export * from './Spacer'
+export * from './Stack'
+export * from './StackItem'
+export * from './VStack'
+
+export type { AxisAlignment } from './types'
diff --git a/packages/bezier-react/src/components/Stack/types/alignment.ts b/packages/bezier-react/src/components/LegacyStack/types/alignment.ts
similarity index 100%
rename from packages/bezier-react/src/components/Stack/types/alignment.ts
rename to packages/bezier-react/src/components/LegacyStack/types/alignment.ts
diff --git a/packages/bezier-react/src/components/Stack/types/index.ts b/packages/bezier-react/src/components/LegacyStack/types/index.ts
similarity index 100%
rename from packages/bezier-react/src/components/Stack/types/index.ts
rename to packages/bezier-react/src/components/LegacyStack/types/index.ts
diff --git a/packages/bezier-react/src/components/Stack/util/flexAdapter.ts b/packages/bezier-react/src/components/LegacyStack/util/flexAdapter.ts
similarity index 77%
rename from packages/bezier-react/src/components/Stack/util/flexAdapter.ts
rename to packages/bezier-react/src/components/LegacyStack/util/flexAdapter.ts
index 070bc28a25..5406413d46 100644
--- a/packages/bezier-react/src/components/Stack/util/flexAdapter.ts
+++ b/packages/bezier-react/src/components/LegacyStack/util/flexAdapter.ts
@@ -1,4 +1,4 @@
-import type { AxisAlignment } from '~/src/components/Stack/types'
+import type { AxisAlignment } from '~/src/components/LegacyStack/types'
 
 const MAPPED_FLEX_PROPERTIES: Record<AxisAlignment, string> = {
   start: 'flex-start',
diff --git a/packages/bezier-react/src/components/Stack/util/index.ts b/packages/bezier-react/src/components/LegacyStack/util/index.ts
similarity index 100%
rename from packages/bezier-react/src/components/Stack/util/index.ts
rename to packages/bezier-react/src/components/LegacyStack/util/index.ts
diff --git a/packages/bezier-react/src/components/LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap b/packages/bezier-react/src/components/LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap
index a70e4e6414..ff4bb2df76 100644
--- a/packages/bezier-react/src/components/LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap
+++ b/packages/bezier-react/src/components/LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`Tooltip test > Tooltip with contentInterpolation prop 1`] = `
         class="c3"
       >
         <span
-          class="margin Text typo-14"
+          class="Text typo-14 margin"
           data-testid="bezier-react-text"
         >
           Hovered
@@ -136,7 +136,7 @@ exports[`Tooltip test > Tooltip with default props 1`] = `
         class="c3"
       >
         <span
-          class="margin Text typo-14"
+          class="Text typo-14 margin"
           data-testid="bezier-react-text"
         >
           Hovered
diff --git a/packages/bezier-react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap b/packages/bezier-react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap
index 1d56ab5e57..08471fdf0b 100644
--- a/packages/bezier-react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap
+++ b/packages/bezier-react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`ListItem Snapshot > 1`] = `
         class="c3"
       >
         <span
-          class="margin Text typo-14"
+          class="Text typo-14 margin"
           data-testid="bezier-react-text"
         >
           this is content
diff --git a/packages/bezier-react/src/components/Navigator/NavGroup/__snapshots__/NavGroup.test.tsx.snap b/packages/bezier-react/src/components/Navigator/NavGroup/__snapshots__/NavGroup.test.tsx.snap
index 04b368e60d..3d1afd43f5 100644
--- a/packages/bezier-react/src/components/Navigator/NavGroup/__snapshots__/NavGroup.test.tsx.snap
+++ b/packages/bezier-react/src/components/Navigator/NavGroup/__snapshots__/NavGroup.test.tsx.snap
@@ -122,7 +122,7 @@ exports[`NavGroup Test > Snapshot > Active 1`] = `
     </svg>
   </div>
   <span
-    class="margin Text typo-14 truncated"
+    class="Text typo-14 truncated margin"
     data-testid="bezier-react-text"
   >
     test-content
@@ -285,7 +285,7 @@ exports[`NavGroup Test > Snapshot > Not active 1`] = `
     </svg>
   </div>
   <span
-    class="margin Text typo-14 truncated"
+    class="Text typo-14 truncated margin"
     data-testid="bezier-react-text"
   >
     test-content
diff --git a/packages/bezier-react/src/components/Navigator/NavItem/__snapshots__/NavItem.test.tsx.snap b/packages/bezier-react/src/components/Navigator/NavItem/__snapshots__/NavItem.test.tsx.snap
index 86de842331..b4e43ac94b 100644
--- a/packages/bezier-react/src/components/Navigator/NavItem/__snapshots__/NavItem.test.tsx.snap
+++ b/packages/bezier-react/src/components/Navigator/NavItem/__snapshots__/NavItem.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`NavItem Test > Snapshot > Active 1`] = `
     </svg>
   </div>
   <span
-    class="margin Text typo-14 truncated"
+    class="Text typo-14 truncated margin"
     data-testid="bezier-react-text"
   >
     test-content
@@ -183,7 +183,7 @@ exports[`NavItem Test > Snapshot > Not active 1`] = `
     </svg>
   </div>
   <span
-    class="margin Text typo-14 truncated"
+    class="Text typo-14 truncated margin"
     data-testid="bezier-react-text"
   >
     test-content
diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx b/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx
index 93e5d32e1a..a40a3387d6 100644
--- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -8,11 +8,11 @@ import type {
 
 import { Button } from '~/src/components/Button'
 import {
-  HStack,
-  Spacer,
-  StackItem,
-  VStack,
-} from '~/src/components/Stack'
+  LegacyHStack,
+  LegacySpacer,
+  LegacyStackItem,
+  LegacyVStack,
+} from '~/src/components/LegacyStack'
 import { Text } from '~/src/components/Text'
 
 import { ProgressBar } from './ProgressBar'
@@ -71,87 +71,87 @@ export const Overview: StoryFn<{}> = () => {
   }
 
   return (
-    <VStack spacing={12} align="center">
-      <StackItem>
-        <VStack spacing={6} align="stretch">
-          <StackItem>
+    <LegacyVStack spacing={12} align="center">
+      <LegacyStackItem>
+        <LegacyVStack spacing={6} align="stretch">
+          <LegacyStackItem>
             <ProgressBar
               size="m"
               variant="green"
               width={200}
               value={values[0]}
             />
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <ProgressBar
               size="m"
               variant="monochrome"
               width={200}
               value={values[1]}
             />
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <ProgressBar
               size="s"
               variant="green"
               width={200}
               value={values[2]}
             />
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <ProgressBar
               size="s"
               variant="monochrome"
               width={200}
               value={values[3]}
             />
-          </StackItem>
-        </VStack>
-      </StackItem>
-      <StackItem>
+          </LegacyStackItem>
+        </LegacyVStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
         <Button
           text="Set random values"
           onClick={handleSetRandomValues}
         />
-      </StackItem>
-    </VStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   )
 }
 
 export const UsageWidth: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={6} align="stretch">
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem style={{ width: 120 }}>
+    <LegacyVStack spacing={6} align="stretch">
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem style={{ width: 120 }}>
             <Text color="txt-black-darkest">36px (default)</Text>
-          </StackItem>
-          <StackItem grow shrink weight={1}>
+          </LegacyStackItem>
+          <LegacyStackItem grow shrink weight={1}>
             <ProgressBar value={0.5} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem style={{ width: 120 }}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem style={{ width: 120 }}>
             <Text color="txt-black-darkest">80px</Text>
-          </StackItem>
-          <StackItem grow shrink weight={1}>
+          </LegacyStackItem>
+          <LegacyStackItem grow shrink weight={1}>
             <ProgressBar width={80} value={0.5} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem style={{ width: 120 }}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem style={{ width: 120 }}>
             <Text color="txt-black-darkest">200px</Text>
-          </StackItem>
-          <StackItem grow shrink weight={1}>
+          </LegacyStackItem>
+          <LegacyStackItem grow shrink weight={1}>
             <ProgressBar width={200} value={0.5} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-    </VStack>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Usage (width)',
@@ -159,78 +159,78 @@ export const UsageWidth: StoryObj<{}> = {
 
 export const UsageValue: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={6} align="stretch">
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem style={{ width: 120 }}>
+    <LegacyVStack spacing={6} align="stretch">
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem style={{ width: 120 }}>
             <Text color="txt-black-darkest">0 (default)</Text>
-          </StackItem>
-          <StackItem grow shrink weight={1}>
+          </LegacyStackItem>
+          <LegacyStackItem grow shrink weight={1}>
             <ProgressBar width={200} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem style={{ width: 120 }}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem style={{ width: 120 }}>
             <Text color="txt-black-darkest">0.25</Text>
-          </StackItem>
-          <StackItem grow shrink weight={1}>
+          </LegacyStackItem>
+          <LegacyStackItem grow shrink weight={1}>
             <ProgressBar width={200} value={0.25} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem style={{ width: 120 }}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem style={{ width: 120 }}>
             <Text color="txt-black-darkest">0.5</Text>
-          </StackItem>
-          <StackItem grow shrink weight={1}>
+          </LegacyStackItem>
+          <LegacyStackItem grow shrink weight={1}>
             <ProgressBar width={200} value={0.5} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem style={{ width: 120 }}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem style={{ width: 120 }}>
             <Text color="txt-black-darkest">0.75</Text>
-          </StackItem>
-          <StackItem grow shrink weight={1}>
+          </LegacyStackItem>
+          <LegacyStackItem grow shrink weight={1}>
             <ProgressBar width={200} value={0.75} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem style={{ width: 120 }}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem style={{ width: 120 }}>
             <Text color="txt-black-darkest">1</Text>
-          </StackItem>
-          <StackItem grow shrink weight={1}>
+          </LegacyStackItem>
+          <LegacyStackItem grow shrink weight={1}>
             <ProgressBar width={200} value={1} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem style={{ width: 120 }}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem style={{ width: 120 }}>
             <Text color="txt-black-darkest">-1 (invalid value)</Text>
-          </StackItem>
-          <StackItem grow shrink weight={1}>
+          </LegacyStackItem>
+          <LegacyStackItem grow shrink weight={1}>
             <ProgressBar width={200} value={-1} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem style={{ width: 120 }}>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem style={{ width: 120 }}>
             <Text color="txt-black-darkest">3 (invalid value)</Text>
-          </StackItem>
-          <StackItem grow shrink weight={1}>
+          </LegacyStackItem>
+          <LegacyStackItem grow shrink weight={1}>
             <ProgressBar width={200} value={3} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-    </VStack>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Usage (value)',
@@ -238,30 +238,30 @@ export const UsageValue: StoryObj<{}> = {
 
 export const SizeVariant: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16} align="stretch">
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem>
+    <LegacyVStack spacing={16} align="stretch">
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem>
             <Text color="txt-black-darkest">M (6px)</Text>
-          </StackItem>
-          <Spacer />
-          <StackItem>
+          </LegacyStackItem>
+          <LegacySpacer />
+          <LegacyStackItem>
             <ProgressBar size="m" variant="green" width={200} value={0.5} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem>
             <Text color="txt-black-darkest">S (4px)</Text>
-          </StackItem>
-          <Spacer />
-          <StackItem>
+          </LegacyStackItem>
+          <LegacySpacer />
+          <LegacyStackItem>
             <ProgressBar size="s" variant="green" width={200} value={0.5} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-    </VStack>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Variant (size)',
@@ -269,46 +269,46 @@ export const SizeVariant: StoryObj<{}> = {
 
 export const Variant: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16} align="stretch">
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem>
+    <LegacyVStack spacing={16} align="stretch">
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem>
             <Text color="txt-black-darkest">green</Text>
-          </StackItem>
-          <Spacer />
-          <StackItem>
+          </LegacyStackItem>
+          <LegacySpacer />
+          <LegacyStackItem>
             <ProgressBar size="m" variant="green" width={200} value={0.5} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem>
             <Text color="txt-black-darkest">monochrome</Text>
-          </StackItem>
-          <Spacer />
-          <StackItem>
+          </LegacyStackItem>
+          <LegacySpacer />
+          <LegacyStackItem>
             <ProgressBar
               size="m"
               variant="monochrome"
               width={200}
               value={0.5}
             />
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem>
-        <HStack spacing={8} align="center">
-          <StackItem>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+      <LegacyStackItem>
+        <LegacyHStack spacing={8} align="center">
+          <LegacyStackItem>
             <Text color="txt-black-darkest">green-alt</Text>
-          </StackItem>
-          <Spacer />
-          <StackItem>
+          </LegacyStackItem>
+          <LegacySpacer />
+          <LegacyStackItem>
             <ProgressBar size="m" variant="green-alt" width={200} value={0.5} />
-          </StackItem>
-        </HStack>
-      </StackItem>
-    </VStack>
+          </LegacyStackItem>
+        </LegacyHStack>
+      </LegacyStackItem>
+    </LegacyVStack>
   ),
 
   name: 'Variant (color)',
diff --git a/packages/bezier-react/src/components/Stack/HStack/HStack.types.ts b/packages/bezier-react/src/components/Stack/HStack/HStack.types.ts
deleted file mode 100644
index 906f4a30ca..0000000000
--- a/packages/bezier-react/src/components/Stack/HStack/HStack.types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { StackProps } from '~/src/components/Stack/Stack'
-
-export default interface HStackProps extends Omit<StackProps, 'direction'> {}
diff --git a/packages/bezier-react/src/components/Stack/HStack/index.ts b/packages/bezier-react/src/components/Stack/HStack/index.ts
deleted file mode 100644
index 26e3c1c7d2..0000000000
--- a/packages/bezier-react/src/components/Stack/HStack/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { HStack } from './HStack'
-export type { default as HStackProps } from './HStack.types'
diff --git a/packages/bezier-react/src/components/Stack/Spacer/index.ts b/packages/bezier-react/src/components/Stack/Spacer/index.ts
deleted file mode 100644
index c3e8914ebc..0000000000
--- a/packages/bezier-react/src/components/Stack/Spacer/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Spacer } from './Spacer'
-export type { default as SpacerProps } from './Spacer.types'
diff --git a/packages/bezier-react/src/components/Stack/Stack.module.scss b/packages/bezier-react/src/components/Stack/Stack.module.scss
new file mode 100644
index 0000000000..b42a3c7fd0
--- /dev/null
+++ b/packages/bezier-react/src/components/Stack/Stack.module.scss
@@ -0,0 +1,76 @@
+@layer components {
+  .Stack {
+    --b-stack-spacing: initial;
+
+    box-sizing: border-box;
+    gap: var(--b-stack-spacing);
+
+    &.display-flex {
+      display: flex;
+    }
+
+    &.display-inline-flex {
+      display: inline-flex;
+    }
+
+    &.direction-horizontal {
+      flex-direction: row;
+
+      &.reverse {
+        flex-direction: row-reverse;
+      }
+    }
+
+    &.direction-vertical {
+      flex-direction: column;
+
+      &.reverse {
+        flex-direction: column-reverse;
+      }
+    }
+
+    &.justify-start {
+      justify-content: flex-start;
+    }
+
+    &.justify-end {
+      justify-content: flex-end;
+    }
+
+    &.justify-center {
+      justify-content: center;
+    }
+
+    &.justify-stretch {
+      justify-content: stretch;
+    }
+
+    &.justify-between {
+      justify-content: space-between;
+    }
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-stretch {
+      align-items: stretch;
+    }
+
+    &.align-baseline {
+      align-items: baseline;
+    }
+
+    &.wrap {
+      flex-wrap: wrap;
+    }
+  }
+}
diff --git a/packages/bezier-react/src/components/Stack/Stack.stories.tsx b/packages/bezier-react/src/components/Stack/Stack.stories.tsx
index 431a25f4af..86a2e4dce1 100644
--- a/packages/bezier-react/src/components/Stack/Stack.stories.tsx
+++ b/packages/bezier-react/src/components/Stack/Stack.stories.tsx
@@ -1,645 +1,50 @@
-import React, { useState } from 'react'
+import React from 'react'
 
-import type {
-  Meta,
-  StoryFn,
-  StoryObj,
+import {
+  type Meta,
+  type StoryFn,
+  type StoryObj,
 } from '@storybook/react'
 
-import { type SemanticNames } from '~/src/foundation'
-
-import { LightTheme } from '~/src/foundation/Colors/Theme'
-
 import { range } from '~/src/utils/number'
 
-import {
-  Button,
-  ButtonSize,
-} from '~/src/components/Button'
-import { Text } from '~/src/components/Text'
+import { Box } from '~/src/components/Box'
 
-import { HStack } from './HStack'
-import { Spacer } from './Spacer'
-import {
-  Stack,
-  type StackProps,
-} from './Stack'
-import mdx from './Stack.mdx'
-import { StackItem } from './StackItem'
-import { VStack } from './VStack'
-import type { AxisAlignment } from './types'
+import { Stack } from './Stack'
 
-const meta: Meta<StackProps & {
-  containerSize: number
-}> = {
+const meta = {
   component: Stack,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-  argTypes: {
-    containerSize: {
-      control: {
-        type: 'range',
-        min: 400,
-        max: 1200,
-        step: 10,
-      },
-    },
-    direction: {
-      control: {
-        type: 'radio',
-      },
-      options: ['horizontal', 'vertical'],
-    },
-    justify: {
-      control: {
-        type: 'radio',
-      },
-      options: ['start', 'center', 'end', 'stretch'],
-    },
-    align: {
-      control: {
-        type: 'radio',
-      },
-      options: ['start', 'center', 'end', 'stretch'],
-    },
-    spacing: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 32,
-        step: 4,
-      },
-    },
-  },
-}
-export default meta
+} satisfies Meta<typeof Stack>
 
-const randomColor = (): SemanticNames =>
-  Object.values(LightTheme)[Math.floor(Math.random() * Object.keys(LightTheme).length)] as SemanticNames
-const randomSize = (): number => Math.floor((Math.random() * 240) + 120)
-
-const Item = ({
-  fixedSize,
-  direction,
-}: {
-  fixedSize: boolean
-  direction: 'horizontal' | 'vertical'
-}) => {
-  const [color] = useState(() => randomColor())
-  const [alignSize] = useState(() => randomSize())
+type Story = StoryObj<typeof meta>
 
+function DecorativeBox() {
   return (
-    <div
-      style={{
-        width: fixedSize && direction === 'vertical' ? alignSize : '100%',
-        height: fixedSize && direction === 'horizontal' ? alignSize : '100%',
-        backgroundColor: color,
-        borderRadius: '4px',
-        boxShadow: 'inset 0 0 1px #c0c0c0',
-      }}
+    <Box
+      width={50}
+      height={50}
+      bgColor="bg-black-light"
+      borderRadius="8"
+      borderWidth={1}
+      borderColor="bdr-black-light"
     />
   )
 }
 
-interface StackPreviewProps {
-  containerSize: number
-
-  /* Stack Props */
-  direction: 'horizontal' | 'vertical'
-  justify: AxisAlignment
-  align: AxisAlignment
-  spacing: number
-
-  /* Item Props */
-  itemJustifies: (AxisAlignment | undefined)[]
-  itemAligns: (AxisAlignment | undefined)[]
-  itemSizes: (number | undefined)[]
-  itemWeights: (number | undefined)[]
-  itemGrows: (boolean | undefined)[]
-  itemShrinks: (boolean | undefined)[]
-  itemMarginBefores: (number | undefined)[]
-  itemMarginAfters: (number | undefined)[]
-}
-
-const Template: StoryFn<StackPreviewProps> = ({
-  containerSize,
-
-  direction,
-  justify,
-  align,
-  spacing,
-
-  itemJustifies,
-  itemAligns,
-  itemSizes,
-  itemWeights,
-  itemGrows,
-  itemShrinks,
-  itemMarginBefores,
-  itemMarginAfters,
-}: StackPreviewProps) => (
-  <>
-    <div
-      style={{
-        border: '1px solid #e0e0e0',
-        borderRadius: 4,
-        ...(
-          direction === 'horizontal'
-            ? { width: containerSize, height: 480 }
-            : { width: 480, height: containerSize }
-        ),
-      }}
-    >
-      <Stack
-        direction={direction}
-        justify={justify}
-        align={align}
-        spacing={spacing}
-      >
-        { range(4)
-          .map(i => (
-            <StackItem
-              key={`item-${i}`}
-              justify={itemJustifies[i]}
-              align={itemAligns[i]}
-              size={itemSizes[i]}
-              weight={itemWeights[i]}
-              grow={itemGrows[i]}
-              shrink={itemShrinks[i]}
-              marginBefore={itemMarginBefores[i]}
-              marginAfter={itemMarginAfters[i]}
-            >
-              <Item direction={direction} fixedSize={(align ?? itemAligns[i]) !== 'stretch'} />
-            </StackItem>
-          )) }
-      </Stack>
-    </div>
-  </>
+const Template: StoryFn<typeof Stack> = (args) => (
+  <Stack {...args}>
+    { range(4).map((i) => (
+      <DecorativeBox key={`item-${i}`} />
+    )) }
+  </Stack>
 )
 
-export const Primary: StoryObj<StackPreviewProps> = {
+export const Primary: Story = {
   render: Template,
-
   args: {
-    containerSize: 800,
-
     direction: 'horizontal',
-    justify: 'start',
-    align: 'start',
-    spacing: 0,
-
-    itemJustifies: [],
-    itemAligns: [],
-    itemSizes: [120, 240, 180, 120],
-    itemWeights: [],
-    itemGrows: [],
-    itemShrinks: [],
-    itemMarginBefores: [],
-    itemMarginAfters: [],
+    spacing: 6,
   },
 }
 
-export const Overview: StoryFn<{}> = () => (
-  <VStack style={{ width: '400px' }} spacing={16} align="stretch">
-    <StackItem>
-      <Text
-        as="h3"
-        style={{
-          border: '1px solid #ccc',
-        }}
-        typo="24"
-        bold
-      >
-        스택에 대해 더 자세히 알아보세요.
-      </Text>
-    </StackItem>
-    <StackItem>
-      <Text
-        as="p"
-        style={{
-          border: '1px solid #ccc',
-        }}
-        typo="13"
-        color="txt-black-darker"
-      >
-        스택은 flex layout을 서술하는 컴포넌트입니다. 스택과 함께라면 뭐든지 만들 수 있어요. 누가 만들었는지는 모르겠지만, 정말 잘 만든 컴포넌트에요. FormControl과 함께 싸드세요!
-      </Text>
-    </StackItem>
-    <StackItem>
-      <div
-        style={{
-          border: '1px solid #ccc',
-        }}
-      >
-        <Button
-          size={ButtonSize.L}
-          text="스택에 대해 더 자세히 알아보기"
-        />
-      </div>
-    </StackItem>
-  </VStack>
-)
-
-export const DirectionHorizontal: StoryObj<{}> = {
-  render: () => (
-    <HStack
-      style={{ width: '720px', height: '60px', border: '1px solid #ffc0c0' }}
-      align="stretch"
-    >
-      <StackItem size={120} style={{ backgroundColor: '#ccc' }}>
-        <Text typo="18">Item 1</Text>
-      </StackItem>
-      <StackItem size={180} style={{ backgroundColor: '#eee' }}>
-        <Text typo="18">Item 2</Text>
-      </StackItem>
-      <StackItem size={180} style={{ backgroundColor: '#888' }}>
-        <Text typo="18">Item 3</Text>
-      </StackItem>
-      <StackItem size={80} style={{ backgroundColor: '#aaa' }}>
-        <Text typo="18">Item 4</Text>
-      </StackItem>
-    </HStack>
-  ),
-
-  name: 'Horizontal stack',
-}
-
-export const DirectionVertical: StoryObj<{}> = {
-  render: () => (
-    <VStack
-      style={{ width: '200px', height: '600px', border: '1px solid #ffc0c0' }}
-      align="start"
-    >
-      <StackItem size={120} style={{ width: '80px', backgroundColor: '#ccc' }}>
-        <Text typo="18">Item 1</Text>
-      </StackItem>
-      <StackItem size={180} style={{ width: '150px', backgroundColor: '#eee' }}>
-        <Text typo="18">Item 2</Text>
-      </StackItem>
-      <StackItem size={180} style={{ width: '200px', backgroundColor: '#888' }}>
-        <Text typo="18">Item 3</Text>
-      </StackItem>
-      <StackItem size={80} style={{ width: '120px', backgroundColor: '#aaa' }}>
-        <Text typo="18">Item 4</Text>
-      </StackItem>
-    </VStack>
-  ),
-
-  name: 'Vertical stack',
-}
-
-export const AlignmentJustify: StoryObj<{}> = {
-  render: () => (
-    <VStack align="stretch" spacing={8}>
-      <StackItem>
-        <Text typo="14">justify = &quot;start&quot;</Text>
-      </StackItem>
-      <StackItem>
-        <HStack
-          style={{
-            width: '720px',
-            height: '60px',
-            border: '1px solid #ffc0c0',
-          }}
-          justify="start"
-          align="stretch"
-        >
-          <StackItem size={120} style={{ backgroundColor: '#ccc' }}>
-            <Text typo="18">Item 1</Text>
-          </StackItem>
-          <StackItem size={180} style={{ backgroundColor: '#eee' }}>
-            <Text typo="18">Item 2</Text>
-          </StackItem>
-          <StackItem size={180} style={{ backgroundColor: '#888' }}>
-            <Text typo="18">Item 3</Text>
-          </StackItem>
-          <StackItem size={80} style={{ backgroundColor: '#aaa' }}>
-            <Text typo="18">Item 4</Text>
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem marginBefore={16}>
-        <Text typo="14">justify = &quot;center&quot;</Text>
-      </StackItem>
-      <StackItem>
-        <HStack
-          style={{
-            width: '720px',
-            height: '60px',
-            border: '1px solid #ffc0c0',
-          }}
-          justify="center"
-          align="stretch"
-        >
-          <StackItem size={120} style={{ backgroundColor: '#ccc' }}>
-            <Text typo="18">Item 1</Text>
-          </StackItem>
-          <StackItem size={180} style={{ backgroundColor: '#eee' }}>
-            <Text typo="18">Item 2</Text>
-          </StackItem>
-          <StackItem size={180} style={{ backgroundColor: '#888' }}>
-            <Text typo="18">Item 3</Text>
-          </StackItem>
-          <StackItem size={80} style={{ backgroundColor: '#aaa' }}>
-            <Text typo="18">Item 4</Text>
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem marginBefore={16}>
-        <Text typo="14">justify = &quot;end&quot;</Text>
-      </StackItem>
-      <StackItem>
-        <HStack
-          style={{
-            width: '720px',
-            height: '60px',
-            border: '1px solid #ffc0c0',
-          }}
-          justify="end"
-          align="stretch"
-        >
-          <StackItem size={120} style={{ backgroundColor: '#ccc' }}>
-            <Text typo="18">Item 1</Text>
-          </StackItem>
-          <StackItem size={180} style={{ backgroundColor: '#eee' }}>
-            <Text typo="18">Item 2</Text>
-          </StackItem>
-          <StackItem size={180} style={{ backgroundColor: '#888' }}>
-            <Text typo="18">Item 3</Text>
-          </StackItem>
-          <StackItem size={80} style={{ backgroundColor: '#aaa' }}>
-            <Text typo="18">Item 4</Text>
-          </StackItem>
-        </HStack>
-      </StackItem>
-    </VStack>
-  ),
-
-  name: 'Alignment (justify)',
-}
-
-export const AlignmentAlign: StoryObj<{}> = {
-  render: () => (
-    <VStack align="stretch" spacing={8}>
-      <StackItem>
-        <Text typo="14">align = &quot;start&quot;</Text>
-      </StackItem>
-      <StackItem>
-        <HStack
-          style={{
-            width: '720px',
-            height: '80px',
-            border: '1px solid #ffc0c0',
-          }}
-          justify="start"
-          align="start"
-        >
-          <StackItem
-            size={120}
-            style={{ height: '40px', backgroundColor: '#ccc' }}
-          >
-            <Text typo="18">Item 1</Text>
-          </StackItem>
-          <StackItem
-            size={180}
-            style={{ height: '60px', backgroundColor: '#eee' }}
-          >
-            <Text typo="18">Item 2</Text>
-          </StackItem>
-          <StackItem
-            size={180}
-            style={{ height: '50px', backgroundColor: '#888' }}
-          >
-            <Text typo="18">Item 3</Text>
-          </StackItem>
-          <StackItem size={80} style={{ backgroundColor: '#aaa' }}>
-            <Text typo="18">Item 4</Text>
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem marginBefore={16}>
-        <Text typo="14">align = &quot;center&quot;</Text>
-      </StackItem>
-      <StackItem>
-        <HStack
-          style={{
-            width: '720px',
-            height: '80px',
-            border: '1px solid #ffc0c0',
-          }}
-          justify="start"
-          align="center"
-        >
-          <StackItem
-            size={120}
-            style={{ height: '40px', backgroundColor: '#ccc' }}
-          >
-            <Text typo="18">Item 1</Text>
-          </StackItem>
-          <StackItem
-            size={180}
-            style={{ height: '60px', backgroundColor: '#eee' }}
-          >
-            <Text typo="18">Item 2</Text>
-          </StackItem>
-          <StackItem
-            size={180}
-            style={{ height: '50px', backgroundColor: '#888' }}
-          >
-            <Text typo="18">Item 3</Text>
-          </StackItem>
-          <StackItem size={80} style={{ backgroundColor: '#aaa' }}>
-            <Text typo="18">Item 4</Text>
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem marginBefore={16}>
-        <Text typo="14">align = &quot;end&quot;</Text>
-      </StackItem>
-      <StackItem>
-        <HStack
-          style={{
-            width: '720px',
-            height: '80px',
-            border: '1px solid #ffc0c0',
-          }}
-          justify="start"
-          align="end"
-        >
-          <StackItem
-            size={120}
-            style={{ height: '40px', backgroundColor: '#ccc' }}
-          >
-            <Text typo="18">Item 1</Text>
-          </StackItem>
-          <StackItem
-            size={180}
-            style={{ height: '60px', backgroundColor: '#eee' }}
-          >
-            <Text typo="18">Item 2</Text>
-          </StackItem>
-          <StackItem
-            size={180}
-            style={{ height: '50px', backgroundColor: '#888' }}
-          >
-            <Text typo="18">Item 3</Text>
-          </StackItem>
-          <StackItem size={80} style={{ backgroundColor: '#aaa' }}>
-            <Text typo="18">Item 4</Text>
-          </StackItem>
-        </HStack>
-      </StackItem>
-      <StackItem marginBefore={16}>
-        <Text typo="14">align = &quot;stretch&quot;</Text>
-      </StackItem>
-      <StackItem>
-        <HStack
-          style={{
-            width: '720px',
-            height: '80px',
-            border: '1px solid #ffc0c0',
-          }}
-          justify="start"
-          align="stretch"
-        >
-          <StackItem
-            size={120}
-            style={{ height: '40px', backgroundColor: '#ccc' }}
-          >
-            <Text typo="18">Item 1</Text>
-          </StackItem>
-          <StackItem
-            size={180}
-            style={{ height: '60px', backgroundColor: '#eee' }}
-          >
-            <Text typo="18">Item 2</Text>
-          </StackItem>
-          <StackItem
-            size={180}
-            style={{ height: '50px', backgroundColor: '#888' }}
-          >
-            <Text typo="18">Item 3</Text>
-          </StackItem>
-          <StackItem size={80} style={{ backgroundColor: '#aaa' }}>
-            <Text typo="18">Item 4</Text>
-          </StackItem>
-        </HStack>
-      </StackItem>
-    </VStack>
-  ),
-
-  name: 'Alignment (align)',
-}
-
-export const Spacing: StoryFn<{}> = () => (
-  <HStack
-    style={{ width: '720px', height: '80px', border: '1px solid #ffc0c0' }}
-    justify="start"
-    align="stretch"
-    spacing={16}
-  >
-    <StackItem
-      size={120}
-      style={{ backgroundColor: '#ccc' }}
-    >
-      <Text typo="18">Item 1</Text>
-    </StackItem>
-    <StackItem
-      size={180}
-      style={{ backgroundColor: '#eee' }}
-    >
-      <Text typo="18">Item 2</Text>
-    </StackItem>
-    <StackItem
-      size={180}
-      style={{ backgroundColor: '#888' }}
-    >
-      <Text typo="18">Item 3</Text>
-    </StackItem>
-    <StackItem
-      size={80}
-      style={{ backgroundColor: '#aaa' }}
-      marginBefore={40}
-    >
-      <Text typo="18">Item 4</Text>
-    </StackItem>
-  </HStack>
-)
-
-export const Expanded: StoryFn<{}> = () => (
-  <HStack
-    style={{ width: '720px', height: '80px', border: '1px solid #ffc0c0' }}
-    justify="start"
-    align="stretch"
-  >
-    <StackItem
-      size={120}
-      style={{ backgroundColor: '#ccc' }}
-    >
-      <Text typo="18">Item 1</Text>
-    </StackItem>
-    <StackItem
-      size={180}
-      style={{ backgroundColor: '#eee' }}
-    >
-      <Text typo="18">Item 2</Text>
-    </StackItem>
-    <StackItem
-      grow
-      shrink
-      weight={1}
-      style={{ backgroundColor: '#ffa0a0' }}
-    >
-      <Text typo="18">Item 3 (Expanded)</Text>
-    </StackItem>
-    <StackItem
-      size={80}
-      style={{ backgroundColor: '#aaa' }}
-    >
-      <Text typo="18">Item 4</Text>
-    </StackItem>
-  </HStack>
-)
-
-export const WeightSpacer: StoryObj<{}> = {
-  render: () => (
-    <HStack
-      style={{ width: '720px', height: '80px', border: '1px solid #ffc0c0' }}
-      justify="start"
-      align="stretch"
-    >
-      <StackItem size={120} style={{ backgroundColor: '#ccc' }}>
-        <Text typo="18">Item 1</Text>
-      </StackItem>
-      <Spacer />
-      <StackItem size={80} style={{ backgroundColor: '#aaa' }}>
-        <Text typo="18">Item 2</Text>
-      </StackItem>
-    </HStack>
-  ),
-
-  name: 'Spacer',
-}
-
-export const WeightFixed: StoryObj<{}> = {
-  render: () => (
-    <HStack
-      style={{ width: '100px', height: '80px', border: '1px solid #ffc0c0' }}
-      justify="start"
-      align="stretch"
-    >
-      <StackItem size={80} style={{ backgroundColor: '#ccc' }}>
-        <Text typo="18">Item 1</Text>
-      </StackItem>
-      <Spacer />
-      <StackItem size={80} style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}>
-        <Text typo="18">Item 2</Text>
-      </StackItem>
-    </HStack>
-  ),
-
-  name: 'Fix-sized item',
-}
+export default meta
diff --git a/packages/bezier-react/src/components/Stack/Stack.test.tsx b/packages/bezier-react/src/components/Stack/Stack.test.tsx
new file mode 100644
index 0000000000..f76f5a7a5b
--- /dev/null
+++ b/packages/bezier-react/src/components/Stack/Stack.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { render } from '~/src/utils/test'
+
+import { Stack } from './Stack'
+
+import styles from './Stack.module.scss'
+
+describe('Stack', () => {
+  describe('Flex layout', () => {
+    it('creates a flexbox', () => {
+      const { getByTestId } = render(<Stack direction="horizontal" testId="stack" />)
+      expect(getByTestId('stack')).toHaveClass(styles.Stack)
+      expect(getByTestId('stack')).toHaveClass(styles['display-flex'])
+    })
+
+    it('creates a horizontal flexbox when given direction="horizontal"', () => {
+      const { getByTestId } = render(<Stack direction="horizontal" testId="stack" spacing={10} />)
+      expect(getByTestId('stack')).toHaveClass(styles['direction-horizontal'])
+      expect(getByTestId('stack')).toHaveStyle('--b-stack-spacing: 10px')
+    })
+
+    it('creates a vertical flexbox when given direction="vertical"', () => {
+      const { getByTestId } = render(<Stack direction="vertical" testId="stack" spacing={10} />)
+      expect(getByTestId('stack')).toHaveClass(styles['direction-vertical'])
+      expect(getByTestId('stack')).toHaveStyle('--b-stack-spacing: 10px')
+    })
+  })
+
+  describe('Supports BezierComponentProps interface', () => {
+    it('supports style prop', () => {
+      const { getByTestId } = render(<Stack direction="horizontal" testId="stack" style={{ backgroundColor: 'red' }} />)
+      expect(getByTestId('stack')).toHaveStyle({ 'background-color': 'red' })
+    })
+
+    it('supports className prop', () => {
+      const { getByTestId } = render(<Stack direction="horizontal" testId="stack" className="foo" />)
+      expect(getByTestId('stack')).toHaveClass('foo')
+    })
+  })
+})
diff --git a/packages/bezier-react/src/components/Stack/Stack.tsx b/packages/bezier-react/src/components/Stack/Stack.tsx
new file mode 100644
index 0000000000..d5613f9d77
--- /dev/null
+++ b/packages/bezier-react/src/components/Stack/Stack.tsx
@@ -0,0 +1,108 @@
+import {
+  createElement,
+  forwardRef,
+} from 'react'
+
+import classNames from 'classnames'
+
+import {
+  getLayoutStyle,
+  getMarginStyle,
+  splitByLayoutProps,
+  splitByMarginProps,
+} from '~/src/utils/props'
+import { cssDimension } from '~/src/utils/style'
+
+import type {
+  HStackProps,
+  StackProps,
+  VStackProps,
+} from './Stack.types'
+
+import styles from './Stack.module.scss'
+
+/**
+ * `Stack` is a layout component used to group elements together and apply a space between them.
+ *
+ * @example
+ *
+ * ```tsx
+ * <Stack
+ *   direction="horizontal"
+ *   spacing={6}
+ * >
+ *   <div>{ ... }</div>
+ *   <div>{ ... }</div>
+ * </Stack>
+ * ```
+ */
+export const Stack = forwardRef<HTMLElement, StackProps>(function Stack(props, forwardedRef) {
+  const [marginProps, marginRest] = splitByMarginProps(props)
+  const [layoutProps, layoutRest] = splitByLayoutProps(marginRest)
+  const marginStyle = getMarginStyle(marginProps)
+  const layoutStyle = getLayoutStyle(layoutProps)
+
+  const {
+    children,
+    style,
+    className,
+    as = 'div',
+    display = 'flex',
+    direction,
+    justify,
+    align,
+    spacing,
+    reverse,
+    wrap,
+    testId = 'bezier-react-stack',
+    ...rest
+  } = layoutRest
+
+  return createElement(as, {
+    ref: forwardedRef,
+    style: {
+      '--b-stack-spacing': cssDimension(spacing),
+      ...marginStyle.style,
+      ...layoutStyle.style,
+      ...style,
+    },
+    className: classNames(
+      styles.Stack,
+      display && styles[`display-${display}`],
+      direction && styles[`direction-${direction}`],
+      justify && styles[`justify-${justify}`],
+      align && styles[`align-${align}`],
+      reverse && styles.reverse,
+      wrap && styles.wrap,
+      marginStyle.className,
+      layoutStyle.className,
+      className,
+    ),
+    'data-testid': testId,
+    ...rest,
+  }, children)
+})
+
+/**
+ * `HStack` is a shorthand component equivalent to `Stack` with a horizontal direction property.
+ * @see Stack
+ */
+export const HStack = forwardRef<HTMLElement, HStackProps>(function HStack(props, forwardedRef) {
+  return createElement(Stack, {
+    ...props,
+    direction: 'horizontal',
+    ref: forwardedRef,
+  })
+})
+
+/**
+ * `VStack` is a shorthand component equivalent to `Stack` with a vertical direction property.
+ * @see Stack
+ */
+export const VStack = forwardRef<HTMLElement, VStackProps>(function VStack(props, forwardedRef) {
+  return createElement(Stack, {
+    ...props,
+    direction: 'vertical',
+    ref: forwardedRef,
+  })
+})
diff --git a/packages/bezier-react/src/components/Stack/Stack.types.ts b/packages/bezier-react/src/components/Stack/Stack.types.ts
new file mode 100644
index 0000000000..49cc10a261
--- /dev/null
+++ b/packages/bezier-react/src/components/Stack/Stack.types.ts
@@ -0,0 +1,64 @@
+import {
+  type AlphaBezierComponentProps,
+  type ChildrenProps,
+  type LayoutProps,
+  type MarginProps,
+  type PolymorphicProps,
+} from '~/src/types/ComponentProps'
+
+type Display = 'flex' | 'inline-flex'
+
+type Direction = 'horizontal' | 'vertical'
+
+type BaseAlignment = 'start' | 'center' | 'end' | 'stretch'
+type Align = BaseAlignment | 'baseline'
+type Justify = BaseAlignment | 'between'
+
+type StackElementType = 'div' | 'section' | 'ul' | 'ol'
+
+interface StackOwnProps {
+  /**
+   * Display type of the stack.
+   * @default 'flex'
+   */
+  display?: Display
+  /**
+   * Direction of the stack.
+   */
+  direction: Direction
+  /**
+   * Determines the default aligning of children along the main axis.
+   */
+  justify?: Justify
+  /**
+   * Determines the default aligning of children along the cross axis.
+   */
+  align?: Align
+  /**
+   * Spacing between children.
+   */
+  spacing?: string | number
+  /**
+   * Whether to reverse the order of children.
+   */
+  reverse?: boolean
+  /**
+   * Whether to wrap children to additional rows as needed on small screens.
+   */
+  wrap?: boolean
+}
+
+export interface StackProps extends
+  AlphaBezierComponentProps,
+  React.HTMLAttributes<HTMLElement>,
+  PolymorphicProps<StackElementType>,
+  ChildrenProps,
+  LayoutProps,
+  MarginProps,
+  StackOwnProps {}
+
+export interface HStackProps extends
+  Omit<StackProps, 'direction'> {}
+
+export interface VStackProps extends
+  Omit<StackProps, 'direction'> {}
diff --git a/packages/bezier-react/src/components/Stack/Stack/index.ts b/packages/bezier-react/src/components/Stack/Stack/index.ts
deleted file mode 100644
index ca4f41bc9c..0000000000
--- a/packages/bezier-react/src/components/Stack/Stack/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Stack } from './Stack'
-export type { default as StackProps } from './Stack.types'
diff --git a/packages/bezier-react/src/components/Stack/StackItem/index.ts b/packages/bezier-react/src/components/Stack/StackItem/index.ts
deleted file mode 100644
index 19e4bdc7bb..0000000000
--- a/packages/bezier-react/src/components/Stack/StackItem/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { StackItem } from './StackItem'
-export type { default as StackItemProps } from './StackItem.types'
diff --git a/packages/bezier-react/src/components/Stack/VStack/VStack.types.ts b/packages/bezier-react/src/components/Stack/VStack/VStack.types.ts
deleted file mode 100644
index 5f28de5af6..0000000000
--- a/packages/bezier-react/src/components/Stack/VStack/VStack.types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { StackProps } from '~/src/components/Stack/Stack'
-
-export default interface VStackProps extends Omit<StackProps, 'direction'> {}
diff --git a/packages/bezier-react/src/components/Stack/VStack/index.ts b/packages/bezier-react/src/components/Stack/VStack/index.ts
deleted file mode 100644
index d575ba835e..0000000000
--- a/packages/bezier-react/src/components/Stack/VStack/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { VStack } from './VStack'
-export type { default as VStackProps } from './VStack.types'
diff --git a/packages/bezier-react/src/components/Stack/index.ts b/packages/bezier-react/src/components/Stack/index.ts
index 4a2539fad0..dcbd338317 100644
--- a/packages/bezier-react/src/components/Stack/index.ts
+++ b/packages/bezier-react/src/components/Stack/index.ts
@@ -1,7 +1,11 @@
-export * from './HStack'
-export * from './Spacer'
-export * from './Stack'
-export * from './StackItem'
-export * from './VStack'
+export {
+  Stack,
+  HStack,
+  VStack,
+} from './Stack'
 
-export type { AxisAlignment } from './types'
+export type {
+  StackProps,
+  HStackProps,
+  VStackProps,
+} from './Stack.types'
diff --git a/packages/bezier-react/src/components/TagBadge/TagBadge.stories.tsx b/packages/bezier-react/src/components/TagBadge/TagBadge.stories.tsx
index ab029a2d9e..833f5bc665 100644
--- a/packages/bezier-react/src/components/TagBadge/TagBadge.stories.tsx
+++ b/packages/bezier-react/src/components/TagBadge/TagBadge.stories.tsx
@@ -27,10 +27,10 @@ import { noop } from '~/src/utils/function'
 import { gap } from '~/src/utils/style'
 
 import {
-  HStack,
-  StackItem,
-  VStack,
-} from '~/src/components/Stack'
+  LegacyHStack,
+  LegacyStackItem,
+  LegacyVStack,
+} from '~/src/components/LegacyStack'
 import {
   Badge,
   Tag,
@@ -57,8 +57,8 @@ const Container = styled.div`
 `
 
 export const Overview: StoryFn<{}> = () => (
-  <VStack spacing={16}>
-    <StackItem>
+  <LegacyVStack spacing={16}>
+    <LegacyStackItem>
       <Container>
         <Tag variant={TagBadgeVariant.Default}>default</Tag>
         <Tag variant={TagBadgeVariant.Blue}>blue</Tag>
@@ -73,8 +73,8 @@ export const Overview: StoryFn<{}> = () => (
         <Tag variant={TagBadgeVariant.Red}>red</Tag>
         <Tag variant={TagBadgeVariant.Purple}>purple</Tag>
       </Container>
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Container>
         <Badge icon={ClockIcon} variant={TagBadgeVariant.Default}>default</Badge>
         <Badge icon={BookmarkFilledIcon} variant={TagBadgeVariant.Blue}>blue</Badge>
@@ -91,26 +91,26 @@ export const Overview: StoryFn<{}> = () => (
         <Badge icon={ClockIcon} variant={TagBadgeVariant.MonochromeDark}>monochrome-dark</Badge>
         <Badge icon={CancelIcon} variant={TagBadgeVariant.MonochromeLight}>monochrome-light</Badge>
       </Container>
-    </StackItem>
-  </VStack>
+    </LegacyStackItem>
+  </LegacyVStack>
 )
 
 export const BadgeWithoutText: StoryObj<{}> = {
   render: () => (
-    <HStack spacing={4}>
-      <StackItem>
+    <LegacyHStack spacing={4}>
+      <LegacyStackItem>
         <Badge variant={TagBadgeVariant.Red} icon={BlockIcon} />
-      </StackItem>
-      <StackItem>
+      </LegacyStackItem>
+      <LegacyStackItem>
         <Badge
           variant={TagBadgeVariant.Orange}
           icon={ErrorTriangleFilledIcon}
         />
-      </StackItem>
-      <StackItem>
+      </LegacyStackItem>
+      <LegacyStackItem>
         <Badge variant={TagBadgeVariant.Green} icon={LightningFilledIcon} />
-      </StackItem>
-    </HStack>
+      </LegacyStackItem>
+    </LegacyHStack>
   ),
 
   name: 'Usage (badges without text)',
@@ -118,7 +118,7 @@ export const BadgeWithoutText: StoryObj<{}> = {
 
 export const DismissibleTag: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={4}>
+    <LegacyVStack spacing={4}>
       { [
         [TagBadgeVariant.Red, 'red'] as const,
         [TagBadgeVariant.Orange, 'orange'] as const,
@@ -129,11 +129,11 @@ export const DismissibleTag: StoryObj<{}> = {
         [TagBadgeVariant.Purple, 'purple'] as const,
       ]
         .map(([variant, label]) => (
-          <StackItem key={variant}>
+          <LegacyStackItem key={variant}>
             <Tag variant={variant} onDelete={noop}>{ label }</Tag>
-          </StackItem>
+          </LegacyStackItem>
         )) }
-    </VStack>
+    </LegacyVStack>
   ),
 
   name: 'Usage (dismissible tags)',
@@ -200,7 +200,7 @@ export const Gap: StoryObj<{}> = {
 
 export const SizeVariant: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16}>
+    <LegacyVStack spacing={16}>
       { [
         [TagBadgeSize.XS, 'XS (18px)'] as const,
         [TagBadgeSize.S, 'S (20px)'] as const,
@@ -208,18 +208,18 @@ export const SizeVariant: StoryObj<{}> = {
         [TagBadgeSize.L, 'L (22px)'] as const,
       ]
         .map(([size, label]) => (
-          <StackItem key={size}>
-            <HStack spacing={4}>
-              <StackItem>
+          <LegacyStackItem key={size}>
+            <LegacyHStack spacing={4}>
+              <LegacyStackItem>
                 <Tag size={size}>{ label }</Tag>
-              </StackItem>
-              <StackItem>
+              </LegacyStackItem>
+              <LegacyStackItem>
                 <Badge size={size} icon={ClockIcon}>{ label }</Badge>
-              </StackItem>
-            </HStack>
-          </StackItem>
+              </LegacyStackItem>
+            </LegacyHStack>
+          </LegacyStackItem>
         )) }
-    </VStack>
+    </LegacyVStack>
   ),
 
   name: 'Variant (size)',
@@ -227,7 +227,7 @@ export const SizeVariant: StoryObj<{}> = {
 
 export const Variant: StoryObj<{}> = {
   render: () => (
-    <VStack spacing={16}>
+    <LegacyVStack spacing={16}>
       { [
         [TagBadgeVariant.Default, 'default'] as const,
         [TagBadgeVariant.Blue, 'blue'] as const,
@@ -245,18 +245,18 @@ export const Variant: StoryObj<{}> = {
         [TagBadgeVariant.MonochromeLight, 'monochrome-light'] as const,
       ]
         .map(([variant, label]) => (
-          <StackItem key={variant}>
-            <HStack spacing={4}>
-              <StackItem>
+          <LegacyStackItem key={variant}>
+            <LegacyHStack spacing={4}>
+              <LegacyStackItem>
                 <Tag variant={variant}>{ label }</Tag>
-              </StackItem>
-              <StackItem>
+              </LegacyStackItem>
+              <LegacyStackItem>
                 <Badge icon={ClockIcon} variant={variant}>{ label }</Badge>
-              </StackItem>
-            </HStack>
-          </StackItem>
+              </LegacyStackItem>
+            </LegacyHStack>
+          </LegacyStackItem>
         )) }
-    </VStack>
+    </LegacyVStack>
   ),
 
   name: 'Variant (color)',
diff --git a/packages/bezier-react/src/components/Text/Text.module.scss b/packages/bezier-react/src/components/Text/Text.module.scss
index b53978dfb0..42334f8b4e 100644
--- a/packages/bezier-react/src/components/Text/Text.module.scss
+++ b/packages/bezier-react/src/components/Text/Text.module.scss
@@ -1,6 +1,8 @@
 @layer components {
   .Text {
-    color: var(--b-text-color, inherit);
+    --b-text-color: inherit;
+
+    color: var(--b-text-color);
     font-style: normal;
     font-weight: var(--font-weight-400);
     transition: color var(--transition-s);
diff --git a/packages/bezier-react/src/components/Text/Text.tsx b/packages/bezier-react/src/components/Text/Text.tsx
index 0a09beaaf3..84648a0d45 100644
--- a/packages/bezier-react/src/components/Text/Text.tsx
+++ b/packages/bezier-react/src/components/Text/Text.tsx
@@ -11,8 +11,6 @@ import {
 } from '~/src/utils/props'
 import { tokenCssVar } from '~/src/utils/style'
 
-import sharedStyles from '~/src/components/shared.module.scss'
-
 import { type TextProps } from './Text.types'
 
 import styles from './Text.module.scss'
@@ -33,6 +31,8 @@ import styles from './Text.module.scss'
  */
 export const Text = forwardRef<HTMLElement, TextProps>(function Text(props, forwardedRef) {
   const [marginProps, marginRest] = splitByMarginProps(props)
+  const marginStyle = getMarginStyle(marginProps)
+
   const {
     children,
     style,
@@ -47,21 +47,22 @@ export const Text = forwardRef<HTMLElement, TextProps>(function Text(props, forw
     align,
     ...rest
   } = marginRest
+
   return createElement(as, {
     ref: forwardedRef,
     style: {
       '--b-text-color': tokenCssVar(color),
-      ...getMarginStyle(marginProps),
+      ...marginStyle.style,
       ...style,
     },
     className: classNames(
-      sharedStyles.margin,
       styles.Text,
       styles[`typo-${typo}`],
       bold && styles.bold,
       italic && styles.italic,
       truncated && styles.truncated,
       align && styles[`align-${align}`],
+      marginStyle.className,
       className,
     ),
     'data-testid': testId,
diff --git a/packages/bezier-react/src/components/Toast/Toast.stories.tsx b/packages/bezier-react/src/components/Toast/Toast.stories.tsx
index 556c73a2af..ba00d1380b 100644
--- a/packages/bezier-react/src/components/Toast/Toast.stories.tsx
+++ b/packages/bezier-react/src/components/Toast/Toast.stories.tsx
@@ -22,11 +22,11 @@ import {
   ButtonColorVariant,
   ButtonStyleVariant,
 } from '~/src/components/Button'
-import { ProgressBar } from '~/src/components/ProgressBar'
 import {
-  StackItem,
-  VStack,
-} from '~/src/components/Stack'
+  LegacyStackItem,
+  LegacyVStack,
+} from '~/src/components/LegacyStack'
+import { ProgressBar } from '~/src/components/ProgressBar'
 
 import type ToastProps from './Toast.types'
 import { type ToastOptions } from './Toast.types'
@@ -239,22 +239,22 @@ function CustomContentToastController() {
 
   const handleClick = useCallback((option?: ToastOptions) => {
     toast.addToast((
-      <VStack spacing={6} align="stretch">
-        <StackItem>
+      <LegacyVStack spacing={6} align="stretch">
+        <LegacyStackItem>
           <Button
             text="Close All Toasts"
             styleVariant={ButtonStyleVariant.Primary}
             colorVariant={ButtonColorVariant.Blue}
             onClick={onClickCustomButtonInToast}
           />
-        </StackItem>
-        <StackItem>
+        </LegacyStackItem>
+        <LegacyStackItem>
           <ProgressBar
             width="100%"
             value={Math.random()}
           />
-        </StackItem>
-      </VStack>
+        </LegacyStackItem>
+      </LegacyVStack>
     ), {
       preset: ToastPreset.Default,
       ...option,
@@ -290,22 +290,22 @@ function UpdateContentToastController() {
 
   const handleOpenToast = useCallback((option?: ToastOptions) => {
     toastId.current = toast.addToast((
-      <VStack spacing={6} align="stretch">
-        <StackItem>
+      <LegacyVStack spacing={6} align="stretch">
+        <LegacyStackItem>
           <Button
             text="Close All Toasts"
             styleVariant={ButtonStyleVariant.Primary}
             colorVariant={ButtonColorVariant.Blue}
             onClick={onClickCustomButtonInToast}
           />
-        </StackItem>
-        <StackItem>
+        </LegacyStackItem>
+        <LegacyStackItem>
           <ProgressBar
             width="100%"
             value={Math.random()}
           />
-        </StackItem>
-      </VStack>
+        </LegacyStackItem>
+      </LegacyVStack>
     ), {
       preset: ToastPreset.Default,
       ...option,
@@ -318,22 +318,22 @@ function UpdateContentToastController() {
   const handleUpdateToast = useCallback((option?: ToastOptions) => {
     if (toastId.current) {
       toast.updateToast(toastId.current, (
-        <VStack spacing={6} align="stretch">
-          <StackItem>
+        <LegacyVStack spacing={6} align="stretch">
+          <LegacyStackItem>
             <Button
               text="Close All Toasts"
               styleVariant={ButtonStyleVariant.Primary}
               colorVariant={ButtonColorVariant.Blue}
               onClick={onClickCustomButtonInToast}
             />
-          </StackItem>
-          <StackItem>
+          </LegacyStackItem>
+          <LegacyStackItem>
             <ProgressBar
               width="100%"
               value={Math.random()}
             />
-          </StackItem>
-        </VStack>
+          </LegacyStackItem>
+        </LegacyVStack>
       ), {
         preset: ToastPreset.Default,
         ...option,
diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.styled.ts b/packages/bezier-react/src/components/Tooltip/Tooltip.styled.ts
index 5f2d3d2e31..b8464ee849 100644
--- a/packages/bezier-react/src/components/Tooltip/Tooltip.styled.ts
+++ b/packages/bezier-react/src/components/Tooltip/Tooltip.styled.ts
@@ -6,16 +6,16 @@ import {
 
 import { ZIndex } from '~/src/constants/ZIndex'
 
-import { AlphaStack } from '~/src/components/AlphaStack'
 import {
   Icon as BaseIcon,
   IconSize,
 } from '~/src/components/Icon'
+import { Stack } from '~/src/components/Stack'
 import { Text } from '~/src/components/Text'
 
 import { type TooltipProps } from './Tooltip.types'
 
-export const TooltipContent = styled(AlphaStack).attrs({
+export const TooltipContent = styled(Stack).attrs({
   direction: 'horizontal',
   spacing: 4,
 })<TooltipProps>`
diff --git a/packages/bezier-react/src/components/shared.module.scss b/packages/bezier-react/src/components/shared.module.scss
deleted file mode 100644
index ef3201515c..0000000000
--- a/packages/bezier-react/src/components/shared.module.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@layer components {
-  .margin {
-    --margin-all: var(--b-margin-all, 0);
-
-    margin:
-      var(--b-margin-top, var(--b-margin-y, var(--margin-all)))
-      var(--b-margin-right, var(--b-margin-x, var(--margin-all)))
-      var(--b-margin-bottom, var(--b-margin-y, var(--margin-all)))
-      var(--b-margin-left, var(--b-margin-x, var(--margin-all)));
-  }
-
-  .layout {
-    --padding-all: var(--b-padding-all, 0);
-    --border-width: var(--b-border-width, 0);
-    --overflow: var(--b-overflow, visible);
-
-    padding:
-      var(--b-padding-top, var(--b-padding-y, var(--padding-all)))
-      var(--b-padding-right, var(--b-padding-x, var(--padding-all)))
-      var(--b-padding-bottom, var(--b-padding-y, var(--padding-all)))
-      var(--b-padding-left, var(--b-padding-x, var(--padding-all)));
-    width: var(--b-width, auto);
-    height: var(--b-height, auto);
-    max-width: var(--b-max-width, none);
-    max-height: var(--b-max-height, none);
-    min-width: var(--b-min-width, none);
-    min-height: var(--b-min-height, none);
-    position: var(--b-position, static);
-    inset: var(--b-inset, auto);
-    top: var(--b-top, auto);
-    right: var(--b-right, auto);
-    bottom: var(--b-bottom, auto);
-    left: var(--b-left, auto);
-    flex-shrink: var(--b-shrink, 1);
-    flex-grow: var(--b-grow, 0);
-    background-color: var(--b-bg-color, transparent);
-    border-color: var(--b-border-color, transparent);
-    border-radius: var(--b-border-radius, 0);
-    border-top-width: var(--b-border-top-width, var(--border-width));
-    border-right-width: var(--b-border-right-width, var(--border-width));
-    border-bottom-width: var(--b-border-bottom-width, var(--border-width));
-    border-left-width: var(--b-border-left-width, var(--border-width));
-    border-style: var(--b-border-style, solid);
-    box-shadow: var(--b-elevation, none);
-    z-index: var(--b-z-index, auto);
-    overflow-x: var(--b-overflow-x, var(--overflow));
-    overflow-y: var(--b-overflow-y, var(--overflow));
-  }
-}
diff --git a/packages/bezier-react/src/foundation/Typography.stories.tsx b/packages/bezier-react/src/foundation/Typography.stories.tsx
index 9f122b3cd4..f23d9acbaa 100644
--- a/packages/bezier-react/src/foundation/Typography.stories.tsx
+++ b/packages/bezier-react/src/foundation/Typography.stories.tsx
@@ -9,9 +9,9 @@ import {
 import { styled } from '~/src/foundation'
 
 import {
-  StackItem,
-  VStack,
-} from '~/src/components/Stack'
+  LegacyStackItem,
+  LegacyVStack,
+} from '~/src/components/LegacyStack'
 import { Text } from '~/src/components/Text'
 
 import { Typography } from './Typography'
@@ -54,88 +54,88 @@ export const Primary: StoryObj<{
 }
 
 export const Overview: StoryFn<{}> = () => (
-  <VStack spacing={16}>
-    <StackItem>
+  <LegacyVStack spacing={16}>
+    <LegacyStackItem>
       <Text
         typo="11"
         color="txt-black-darkest"
       >
         11Aa한글 <b>11Aa한글</b>
       </Text>
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Text
         typo="12"
         color="txt-black-darkest"
       >
         12Aa한글 <b>12Aa한글</b>
       </Text>
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Text
         typo="13"
         color="txt-black-darkest"
       >
         13Aa한글 <b>13Aa한글</b>
       </Text>
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Text
         typo="14"
         color="txt-black-darkest"
       >
         14Aa한글 <b>14Aa한글</b>
       </Text>
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Text
         typo="15"
         color="txt-black-darkest"
       >
         15Aa한글 <b>15Aa한글</b>
       </Text>
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Text
         typo="16"
         color="txt-black-darkest"
       >
         16Aa한글 <b>16Aa한글</b>
       </Text>
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Text
         typo="17"
         color="txt-black-darkest"
       >
         17Aa한글 <b>17Aa한글</b>
       </Text>
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Text
         typo="18"
         color="txt-black-darkest"
       >
         18Aa한글 <b>18Aa한글</b>
       </Text>
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Text
         typo="22"
         color="txt-black-darkest"
       >
         22Aa한글 <b>22Aa한글</b>
       </Text>
-    </StackItem>
-    <StackItem>
+    </LegacyStackItem>
+    <LegacyStackItem>
       <Text
         typo="24"
         color="txt-black-darkest"
       >
         24Aa한글 <b>24Aa한글</b>
       </Text>
-    </StackItem>
-  </VStack>
+    </LegacyStackItem>
+  </LegacyVStack>
 )
 
 export const UsageText: StoryObj<{}> = {
diff --git a/packages/bezier-react/src/index.ts b/packages/bezier-react/src/index.ts
index 1c6ce5b479..5755354902 100644
--- a/packages/bezier-react/src/index.ts
+++ b/packages/bezier-react/src/index.ts
@@ -67,11 +67,11 @@ export * from '~/src/components/Tooltip'
 export * from '~/src/components/VisuallyHidden'
 
 export * from '~/src/components/AlphaCenter'
-export * from '~/src/components/AlphaStack'
 export * from '~/src/components/AlphaSmoothCornersBox'
 
 export * from '~/src/components/LegacyIcon'
 export * from '~/src/components/LegacyRadio'
+export * from '~/src/components/LegacyStack'
 export * from '~/src/components/LegacyTooltip'
 
 /* Hooks for Component */
diff --git a/packages/bezier-react/src/styles/components/layout.module.scss b/packages/bezier-react/src/styles/components/layout.module.scss
new file mode 100644
index 0000000000..2e6a1035ee
--- /dev/null
+++ b/packages/bezier-react/src/styles/components/layout.module.scss
@@ -0,0 +1,128 @@
+@layer components {
+  .layout {
+    --b-padding: 0;
+    --b-padding-x: var(--b-padding);
+    --b-padding-y: var(--b-padding);
+    --b-padding-top: var(--b-padding-y);
+    --b-padding-right: var(--b-padding-x);
+    --b-padding-bottom: var(--b-padding-y);
+    --b-padding-left: var(--b-padding-x);
+    --b-width: initial;
+    --b-height: initial;
+    --b-max-width: initial;
+    --b-max-height: initial;
+    --b-min-width: initial;
+    --b-min-height: initial;
+    --b-inset: auto;
+    --b-top: var(--b-inset);
+    --b-right: var(--b-inset);
+    --b-bottom: var(--b-inset);
+    --b-left: var(--b-inset);
+    --b-bg-color: initial;
+    --b-border-color: initial;
+    --b-border-radius: initial;
+    --b-border-width: 0;
+    --b-border-top-width: var(--b-border-width);
+    --b-border-right-width: var(--b-border-width);
+    --b-border-bottom-width: var(--b-border-width);
+    --b-border-left-width: var(--b-border-width);
+    --b-elevation: initial;
+    --b-z-index: initial;
+
+    padding: var(--b-padding-top) var(--b-padding-right) var(--b-padding-bottom) var(--b-padding-left);
+    width: var(--b-width);
+    height: var(--b-height);
+    max-width: var(--b-max-width);
+    max-height: var(--b-max-height);
+    min-width: var(--b-min-width);
+    min-height: var(--b-min-height);
+    inset: var(--b-top) var(--b-right) var(--b-bottom) var(--b-left);
+    background-color: var(--b-bg-color);
+    border-color: var(--b-border-color);
+    border-radius: var(--b-border-radius);
+    border-style: solid;
+    border-width: var(--b-border-top-width) var(--b-border-right-width) var(--b-border-bottom-width) var(--b-border-left-width);
+    box-shadow: var(--b-elevation);
+    z-index: var(--b-z-index);
+
+    &.position-relative {
+      position: relative;
+    }
+
+    &.position-absolute {
+      position: absolute;
+    }
+
+    &.position-fixed {
+      position: fixed;
+    }
+
+    &.position-sticky {
+      position: sticky;
+    }
+
+    &.shrink-0 {
+      flex-shrink: 0;
+    }
+
+    &.shrink-1 {
+      flex-shrink: 1;
+    }
+
+    &.grow-0 {
+      flex-grow: 0;
+    }
+
+    &.grow-1 {
+      flex-grow: 1;
+    }
+
+    &.overflow-visible {
+      overflow: visible;
+    }
+
+    &.overflow-hidden {
+      overflow: hidden;
+    }
+
+    &.overflow-scroll {
+      overflow: scroll;
+    }
+
+    &.overflow-auto {
+      overflow: auto;
+    }
+
+    &.overflow-x-visible {
+      overflow-x: visible;
+    }
+
+    &.overflow-x-hidden {
+      overflow-x: hidden;
+    }
+
+    &.overflow-x-scroll {
+      overflow-x: scroll;
+    }
+
+    &.overflow-x-auto {
+      overflow-x: auto;
+    }
+
+    &.overflow-y-visible {
+      overflow-y: visible;
+    }
+
+    &.overflow-y-hidden {
+      overflow-y: hidden;
+    }
+
+    &.overflow-y-scroll {
+      overflow-y: scroll;
+    }
+
+    &.overflow-y-auto {
+      overflow-y: auto;
+    }
+  }
+}
diff --git a/packages/bezier-react/src/styles/components/margin.module.scss b/packages/bezier-react/src/styles/components/margin.module.scss
new file mode 100644
index 0000000000..61a8825c8c
--- /dev/null
+++ b/packages/bezier-react/src/styles/components/margin.module.scss
@@ -0,0 +1,13 @@
+@layer components {
+  .margin {
+    --b-margin: 0;
+    --b-margin-x: var(--b-margin);
+    --b-margin-y: var(--b-margin);
+    --b-margin-top: var(--b-margin-y);
+    --b-margin-right: var(--b-margin-x);
+    --b-margin-bottom: var(--b-margin-y);
+    --b-margin-left: var(--b-margin-x);
+
+    margin: var(--b-margin-top) var(--b-margin-right) var(--b-margin-bottom) var(--b-margin-left);
+  }
+}
diff --git a/packages/bezier-react/src/types/ComponentProps.ts b/packages/bezier-react/src/types/ComponentProps.ts
index fc184d6f48..1c2f2eb266 100644
--- a/packages/bezier-react/src/types/ComponentProps.ts
+++ b/packages/bezier-react/src/types/ComponentProps.ts
@@ -48,6 +48,9 @@ export interface StylableComponentProps {
   interpolation?: InjectedInterpolation
 }
 
+/**
+ * @deprecated Migration to `AlphaBezierComponentProps` is in progress.
+ */
 export type BezierComponentProps = RenderConfigProps & StylableComponentProps
 
 /* Component Additional Props */
@@ -132,7 +135,7 @@ export interface LinkProps {
 }
 
 /**
- * TODO: Migrate to `BezierComponentProps` after removing styled-components dependency.
+ * TODO: Remove Alpha prefix after removing styled-components dependency.
  */
 export interface AlphaBezierComponentProps extends
   Omit<RenderConfigProps, 'as'>,
@@ -158,6 +161,11 @@ export interface MarginProps {
   ml?: CSSProperties['marginLeft']
 }
 
+type Position = 'absolute' | 'fixed' | 'relative' | 'sticky'
+type Overflow = 'auto' | 'hidden' | 'scroll' | 'visible'
+type Shrink = 0 | 1
+type Grow = 0 | 1
+
 /**
  * TODO: Add JSDoc
  */
@@ -175,14 +183,14 @@ export interface LayoutProps {
   minWidth?: CSSProperties['minWidth']
   maxHeight?: CSSProperties['maxHeight']
   minHeight?: CSSProperties['minHeight']
-  position?: CSSProperties['position']
+  position?: Position
   inset?: CSSProperties['inset']
   top?: CSSProperties['top']
   right?: CSSProperties['right']
   bottom?: CSSProperties['bottom']
   left?: CSSProperties['left']
-  shrink?: CSSProperties['flexShrink']
-  grow?: CSSProperties['flexGrow']
+  shrink?: Shrink
+  grow?: Grow
   bgColor?: BackgroundSemanticColor | BackgroundTextSemanticColor
   borderColor?: BorderSemanticColor
   borderRadius?: Radius
@@ -191,10 +199,9 @@ export interface LayoutProps {
   borderRightWidth?: CSSProperties['borderRightWidth']
   borderBottomWidth?: CSSProperties['borderBottomWidth']
   borderLeftWidth?: CSSProperties['borderLeftWidth']
-  borderStyle?: CSSProperties['borderStyle']
   elevation?: Elevation
   zIndex?: ZIndex
-  overflow?: CSSProperties['overflow']
-  overflowX?: CSSProperties['overflowX']
-  overflowY?: CSSProperties['overflowY']
+  overflow?: Overflow
+  overflowX?: Overflow
+  overflowY?: Overflow
 }
diff --git a/packages/bezier-react/src/utils/props.ts b/packages/bezier-react/src/utils/props.ts
index 5bc92de4d9..f02ce71d3d 100644
--- a/packages/bezier-react/src/utils/props.ts
+++ b/packages/bezier-react/src/utils/props.ts
@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import {
   type BezierComponentProps,
   type LayoutProps,
@@ -5,11 +7,18 @@ import {
 } from '~/src/types/ComponentProps'
 import { TokenPrefix } from '~/src/types/Token'
 
+// NOTE: 'typescript-plugin-css-modules' does not support path alias
+/* eslint-disable no-restricted-imports */
+import layoutStyles from '../styles/components/layout.module.scss'
+import marginStyles from '../styles/components/margin.module.scss'
+/* eslint-enable no-restricted-imports */
+
 import {
   cssDimension,
   cssVar,
   tokenCssVar,
 } from './style'
+import { isNumber } from './type'
 
 export const splitByBezierComponentProps = <
   Props extends BezierComponentProps,
@@ -83,7 +92,6 @@ export const splitByLayoutProps = <Props extends LayoutProps>({
   borderRightWidth,
   borderBottomWidth,
   borderLeftWidth,
-  borderStyle,
   elevation,
   zIndex,
   overflow,
@@ -121,7 +129,6 @@ export const splitByLayoutProps = <Props extends LayoutProps>({
       borderRightWidth,
       borderBottomWidth,
       borderLeftWidth,
-      borderStyle,
       elevation,
       zIndex,
       overflow,
@@ -131,7 +138,7 @@ export const splitByLayoutProps = <Props extends LayoutProps>({
     rest,
   ]
 
-export const getMarginStyle = <Props extends MarginProps>({
+export const getMarginStyle = ({
   m,
   mx,
   my,
@@ -139,17 +146,22 @@ export const getMarginStyle = <Props extends MarginProps>({
   mr,
   mb,
   ml,
-}: Props) => ({
-    '--b-margin-all': cssDimension(m),
-    '--b-margin-x': cssDimension(mx),
-    '--b-margin-y': cssDimension(my),
-    '--b-margin-top': cssDimension(mt),
-    '--b-margin-right': cssDimension(mr),
-    '--b-margin-bottom': cssDimension(mb),
-    '--b-margin-left': cssDimension(ml),
-  })
+}: MarginProps) => (
+  {
+    style: {
+      '--b-margin': cssDimension(m),
+      '--b-margin-x': cssDimension(mx),
+      '--b-margin-y': cssDimension(my),
+      '--b-margin-top': cssDimension(mt),
+      '--b-margin-right': cssDimension(mr),
+      '--b-margin-bottom': cssDimension(mb),
+      '--b-margin-left': cssDimension(ml),
+    },
+    className: marginStyles.margin,
+  }
+)
 
-export const getLayoutStyle = <Props extends LayoutProps>({
+export const getLayoutStyle = ({
   p,
   px,
   py,
@@ -179,46 +191,51 @@ export const getLayoutStyle = <Props extends LayoutProps>({
   borderRightWidth,
   borderBottomWidth,
   borderLeftWidth,
-  borderStyle,
   elevation,
   zIndex,
   overflow,
   overflowX,
   overflowY,
-}: Props) => ({
-    '--b-padding-all': cssDimension(p),
-    '--b-padding-x': cssDimension(px),
-    '--b-padding-y': cssDimension(py),
-    '--b-padding-top': cssDimension(pt),
-    '--b-padding-right': cssDimension(pr),
-    '--b-padding-bottom': cssDimension(pb),
-    '--b-padding-left': cssDimension(pl),
-    '--b-width': cssDimension(width),
-    '--b-height': cssDimension(height),
-    '--b-max-width': cssDimension(maxWidth),
-    '--b-min-width': cssDimension(minWidth),
-    '--b-max-height': cssDimension(maxHeight),
-    '--b-min-height': cssDimension(minHeight),
-    '--b-position': position,
-    '--b-inset': cssDimension(inset),
-    '--b-top': cssDimension(top),
-    '--b-right': cssDimension(right),
-    '--b-bottom': cssDimension(bottom),
-    '--b-left': cssDimension(left),
-    '--b-shrink': shrink,
-    '--b-grow': grow,
-    '--b-bg-color': cssVar(bgColor),
-    '--b-border-color': cssVar(borderColor),
-    '--b-border-radius': tokenCssVar(borderRadius && `${TokenPrefix.Radius}-${borderRadius}`),
-    '--b-border-width': cssDimension(borderWidth),
-    '--b-border-top-width': cssDimension(borderTopWidth),
-    '--b-border-right-width': cssDimension(borderRightWidth),
-    '--b-border-bottom-width': cssDimension(borderBottomWidth),
-    '--b-border-left-width': cssDimension(borderLeftWidth),
-    '--b-border-style': borderStyle,
-    '--b-elevation': tokenCssVar(elevation && `${TokenPrefix.Elevation}-${elevation}`),
-    '--b-z-index': tokenCssVar(zIndex && `${TokenPrefix.ZIndex}-${zIndex}`),
-    '--b-overflow': overflow,
-    '--b-overflow-x': overflowX,
-    '--b-overflow-y': overflowY,
-  })
+}: LayoutProps) => (
+  {
+    style: {
+      '--b-padding': cssDimension(p),
+      '--b-padding-x': cssDimension(px),
+      '--b-padding-y': cssDimension(py),
+      '--b-padding-top': cssDimension(pt),
+      '--b-padding-right': cssDimension(pr),
+      '--b-padding-bottom': cssDimension(pb),
+      '--b-padding-left': cssDimension(pl),
+      '--b-width': cssDimension(width),
+      '--b-height': cssDimension(height),
+      '--b-max-width': cssDimension(maxWidth),
+      '--b-min-width': cssDimension(minWidth),
+      '--b-max-height': cssDimension(maxHeight),
+      '--b-min-height': cssDimension(minHeight),
+      '--b-inset': cssDimension(inset),
+      '--b-top': cssDimension(top),
+      '--b-right': cssDimension(right),
+      '--b-bottom': cssDimension(bottom),
+      '--b-left': cssDimension(left),
+      '--b-bg-color': cssVar(bgColor),
+      '--b-border-color': cssVar(borderColor),
+      '--b-border-radius': tokenCssVar(borderRadius && `${TokenPrefix.Radius}-${borderRadius}`),
+      '--b-border-width': cssDimension(borderWidth),
+      '--b-border-top-width': cssDimension(borderTopWidth),
+      '--b-border-right-width': cssDimension(borderRightWidth),
+      '--b-border-bottom-width': cssDimension(borderBottomWidth),
+      '--b-border-left-width': cssDimension(borderLeftWidth),
+      '--b-elevation': tokenCssVar(elevation && `${TokenPrefix.Elevation}-${elevation}`),
+      '--b-z-index': tokenCssVar(zIndex && `${TokenPrefix.ZIndex}-${zIndex}`),
+    },
+    className: classNames(
+      layoutStyles.layout,
+      position && layoutStyles[`position-${position}`],
+      isNumber(shrink) && layoutStyles[`shrink-${shrink}`],
+      isNumber(grow) && layoutStyles[`grow-${grow}`],
+      overflow && layoutStyles[`overflow-${overflow}`],
+      overflowX && layoutStyles[`overflow-x-${overflowX}`],
+      overflowY && layoutStyles[`overflow-y-${overflowY}`],
+    ),
+  }
+)
diff --git a/yarn.lock b/yarn.lock
index fd21cd9a74..7b0b811fd4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2888,7 +2888,39 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@channel.io/bezier-react@workspace:^, @channel.io/bezier-react@workspace:packages/bezier-react":
+"@channel.io/bezier-react@npm:^1.19.0":
+  version: 1.19.0
+  resolution: "@channel.io/bezier-react@npm:1.19.0"
+  dependencies:
+    "@radix-ui/react-checkbox": ^1.0.4
+    "@radix-ui/react-dialog": ^1.0.4
+    "@radix-ui/react-radio-group": ^1.1.3
+    "@radix-ui/react-separator": ^1.0.3
+    "@radix-ui/react-slider": ^1.1.2
+    "@radix-ui/react-slot": ^1.0.2
+    "@radix-ui/react-switch": ^1.0.3
+    "@radix-ui/react-tabs": ^1.0.4
+    "@radix-ui/react-toolbar": ^1.0.4
+    "@radix-ui/react-tooltip": ^1.0.6
+    "@radix-ui/react-visually-hidden": ^1.0.3
+    classnames: ^2.3.2
+    react-resize-detector: ^9.1.0
+    react-textarea-autosize: 8.3.4
+    ssr-window: ^4.0.2
+    uuid: ^9.0.0
+  peerDependencies:
+    "@channel.io/bezier-icons": ">=0.2.0"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    styled-components: ">=5"
+  peerDependenciesMeta:
+    "@channel.io/bezier-icons":
+      optional: true
+  checksum: a54568d3258c0dd5b53572201fad69702d05eb70dc1e2727be180a478155473728997264de2d36294e3b63d452d330a0aff9d959607d615f0a2fee261e332a6e
+  languageName: node
+  linkType: hard
+
+"@channel.io/bezier-react@workspace:packages/bezier-react":
   version: 0.0.0-use.local
   resolution: "@channel.io/bezier-react@workspace:packages/bezier-react"
   dependencies:
@@ -9760,7 +9792,7 @@ __metadata:
   resolution: "bezier-figma-plugin@workspace:packages/bezier-figma-plugin"
   dependencies:
     "@channel.io/bezier-icons": ^0.16.0
-    "@channel.io/bezier-react": "workspace:^"
+    "@channel.io/bezier-react": ^1.19.0
     "@figma/plugin-typings": ^1.76.0
     "@types/react": ^18.2.21
     "@types/react-dom": ^18.2.7
@@ -20246,6 +20278,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-resize-detector@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "react-resize-detector@npm:9.1.0"
+  dependencies:
+    lodash: ^4.17.21
+  peerDependencies:
+    react: ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 05b263e141fd428eea433e399f88c3e1a379b4a2293958f59b5a5c75dd86c621ce60583724257cc3dc1f5c120a664666ff3fa53d41e6c283687676dc55afa02b
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:^6.15.0":
   version: 6.15.0
   resolution: "react-router-dom@npm:6.15.0"