Add the basis prop for flex-basis style to Layout components (#2495)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

- Fixes #2457 

## Summary

<!-- Please brief explanation of the changes made -->

레이아웃 컴포넌트에 `basis` prop 추가

## Details

<!-- Please elaborate description of the changes -->

- `flex-basis` 를 지원하는 `basis` prop을 추가합니다.
- 기존 `grow`, `shrink` 와 동일하게 `flex-` prefix를 제거하는 방식으로 네이밍했습니다.

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

Author: sungik-choi

.changeset/large-mails-count.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': minor
+---
+
+Layout components support the `basis` (`flex-basis`) property.

packages/bezier-react/src/styles/components/layout.module.scss

@@ -17,6 +17,7 @@
   --b-right: var(--b-inset);
   --b-bottom: var(--b-inset);
   --b-left: var(--b-inset);
+  --b-basis: initial;
   --b-shrink: initial;
   --b-grow: initial;
   --b-background-color: initial;
@@ -29,8 +30,11 @@
 
   inset: var(--b-top) var(--b-right) var(--b-bottom) var(--b-left);
 
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+  flex-basis: var(--b-basis);
   flex-grow: var(--b-grow);
   flex-shrink: var(--b-shrink);
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
 
   box-sizing: border-box;
   width: var(--b-width);

packages/bezier-react/src/types/props-helpers.ts

@@ -60,6 +60,7 @@ export const splitByLayoutProps = <Props extends LayoutProps>({
   right,
   bottom,
   left,
+  basis,
   shrink,
   grow,
   backgroundColor,
@@ -97,6 +98,7 @@ export const splitByLayoutProps = <Props extends LayoutProps>({
     right,
     bottom,
     left,
+    basis,
     shrink,
     grow,
     backgroundColor,
@@ -169,6 +171,7 @@ export const getLayoutStyles = ({
   right,
   bottom,
   left,
+  basis,
   shrink,
   grow,
   backgroundColor,
@@ -204,6 +207,7 @@ export const getLayoutStyles = ({
     '--b-right': cssDimension(right),
     '--b-bottom': cssDimension(bottom),
     '--b-left': cssDimension(left),
+    '--b-basis': cssDimension(basis),
     '--b-shrink': shrink,
     '--b-grow': grow,
     '--b-background-color': tokenCssVar(backgroundColor),

packages/bezier-react/src/types/props.ts

@@ -342,12 +342,17 @@ export interface LayoutProps {
    */
   left?: React.CSSProperties['left']
   /**
-   * the flex-shrink factor of a flex item.
+   * the flex-basis value of a flex item.
+   * @default initial
+   */
+  basis?: React.CSSProperties['flexBasis']
+  /**
+   * the flex-shrink value of a flex item.
    * @default initial
    */
   shrink?: React.CSSProperties['flexShrink']
   /**
-   * the flex-grow factor of a flex item.
+   * the flex-grow value of a flex item.
    * @default initial
    */
   grow?: React.CSSProperties['flexGrow']