Merge branch 'alpha' into refactor/bezier-codemod-directory

.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.

.changeset/tough-rats-drive.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Remove `borderStyle` prop from Layout props.

.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.

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",

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 */ }

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]"
     >