@channel.io/bezier-react 2.1.0 → 2.2.1

package/dist/types/components/AlphaAvatarGroup/AvatarGroup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,aAAa,EACb,SAAS,EACV,0BAAyB;AAE1B,OAAO,EAEL,KAAK,eAAe,EACrB,uBAAoC;AAErC,KAAK,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,UAAU,mBAAmB;IAC3B;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAA;IAEX;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAA;CACvC;AAED,MAAM,WAAW,gBACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,aAAa,EACb,SAAS,CAAC,eAAe,CAAC,EAC1B,mBAAmB;CAAG"}
+{"version":3,"file":"AvatarGroup.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,aAAa,EACb,SAAS,EACV,0BAAyB;AAE1B,OAAO,EAAE,KAAK,eAAe,EAAE,uBAAoC;AAEnE,KAAK,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,UAAU,mBAAmB;IAC3B;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAA;IAEX;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAA;CACvC;AAED,MAAM,WAAW,gBACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,aAAa,EACb,SAAS,CAAC,eAAe,CAAC,EAC1B,mBAAmB;CAAG"}

package/dist/types/components/AlphaLoader/Loader.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type LoaderProps } from './Loader.types';
+export declare const LOADER_TEST_ID = "bezier-loader";
+export declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Loader.d.ts.map

package/dist/types/components/AlphaLoader/Loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaLoader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAIjD,eAAO,MAAM,cAAc,kBAAkB,CAAA;AAE7C,eAAO,MAAM,MAAM,qFAoCjB,CAAA"}

package/dist/types/components/AlphaLoader/Loader.types.d.ts

@@ -0,0 +1,13 @@
+import { type BezierComponentProps, type ColorProps, type SizeProps } from "../../types/props";
+type LoaderSize = 's' | 'm';
+interface LoaderOwnProps {
+    /**
+     * The style variant of Loader.
+     * @default 'secondary'
+     */
+    variant?: 'primary' | 'secondary' | 'on-overlay';
+}
+export interface LoaderProps extends Omit<BezierComponentProps<'span'>, keyof ColorProps>, SizeProps<LoaderSize>, ColorProps, LoaderOwnProps {
+}
+export {};
+//# sourceMappingURL=Loader.types.d.ts.map

package/dist/types/components/AlphaLoader/Loader.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaLoader/Loader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,0BAAyB;AAE1B,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,CAAA;AAE3B,UAAU,cAAc;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,YAAY,CAAA;CACjD;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,MAAM,UAAU,CAAC,EAC1D,SAAS,CAAC,UAAU,CAAC,EACrB,UAAU,EACV,cAAc;CAAG"}

package/dist/types/components/AlphaLoader/index.d.ts

@@ -0,0 +1,3 @@
+export { Loader as AlphaLoader } from './Loader';
+export { type LoaderProps as AlphaLoaderProps } from './Loader.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/AlphaLoader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaLoader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,KAAK,WAAW,IAAI,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/types/components/Icon/Icon.types.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { type BezierIcon } from '@channel.io/bezier-icons';
 import { type BezierComponentProps, type ColorProps, type MarginProps, type SizeProps } from "../../types/props";
 export type IconSize = 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
 interface IconOwnProps {
@@ -13,7 +13,7 @@ interface IconOwnProps {
      * <Icon source={HeartFilledIcon} {...} />
      * ```
      */
-    source: React.ElementType<React.SVGProps<SVGSVGElement>>;
+    source: BezierIcon;
 }
 export interface IconProps extends Omit<BezierComponentProps<'svg'>, keyof ColorProps>, MarginProps, SizeProps<IconSize>, ColorProps, IconOwnProps {
 }

package/dist/types/components/Icon/Icon.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,0BAAyB;AAE1B,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AAErE,UAAU,YAAY;IACpB;;;;;;;;;;OAUG;IACH,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAA;CACzD;AAED,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,MAAM,UAAU,CAAC,EACzD,WAAW,EACX,SAAS,CAAC,QAAQ,CAAC,EACnB,UAAU,EACV,YAAY;CAAG"}
+{"version":3,"file":"Icon.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,0BAAyB;AAE1B,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AAErE,UAAU,YAAY;IACpB;;;;;;;;;;OAUG;IACH,MAAM,EAAE,UAAU,CAAA;CACnB;AAED,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,MAAM,UAAU,CAAC,EACzD,WAAW,EACX,SAAS,CAAC,QAAQ,CAAC,EACnB,UAAU,EACV,YAAY;CAAG"}

package/dist/types/hooks/useMergeRefs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMergeRefs.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMergeRefs.ts"],"names":[],"mappings":";AAEA,KAAK,QAAQ,CAAC,IAAI,IACd,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,GACvB,KAAK,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,CAAA;AAEvC,KAAK,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAA;AAClD,KAAK,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAA;AA2BlC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,+BAG7D"}
+{"version":3,"file":"useMergeRefs.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMergeRefs.ts"],"names":[],"mappings":";AAEA,KAAK,QAAQ,CAAC,IAAI,IACd,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,GACvB,KAAK,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,CAAA;AAEvC,KAAK,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAA;AAClD,KAAK,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAA;AA4BlC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,+BAG7D"}

package/dist/types/index.d.ts

@@ -7,7 +7,7 @@ export * from "./components/AlphaDialogPrimitive";
 export * from "./components/AlphaFloatingButton";
 export * from "./components/AlphaFloatingIconButton";
 export * from "./components/AlphaIconButton";
-export * from "./components/AlphaSpinner";
+export * from "./components/AlphaLoader";
 export * from "./components/AlphaToggleButton";
 export * from "./components/AlphaToggleButtonGroup";
 export * from "./components/AlphaTooltipPrimitive";

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAGlD,yCAA4C;AAC5C,8CAAiD;AACjD,yCAA4C;AAC5C,kDAAqD;AACrD,iDAAoD;AACpD,qDAAwD;AACxD,6CAAgD;AAChD,0CAA6C;AAC7C,+CAAkD;AAClD,oDAAuD;AACvD,mDAAsD;AACtD,yCAA4C;AAC5C,uCAA0C;AAC1C,oCAAuC;AACvC,yCAA4C;AAC5C,mCAAsC;AACtC,oCAAuC;AACvC,iCAAoC;AACpC,oCAAuC;AACvC,yCAA4C;AAC5C,oCAAuC;AACvC,6CAAgD;AAChD,sCAAyC;AACzC,0CAA6C;AAC7C,qCAAwC;AACxC,mCAAsC;AACtC,6CAAgD;AAChD,yCAA4C;AAC5C,uCAA0C;AAC1C,4CAA+C;AAC/C,uCAA0C;AAC1C,kCAAqC;AACrC,kCAAqC;AACrC,0CAA6C;AAC7C,wCAA2C;AAC3C,yCAA4C;AAC5C,2CAA8C;AAC9C,sCAAyC;AACzC,mCAAsC;AACtC,sCAAyC;AACzC,qCAAwC;AACxC,yCAA4C;AAC5C,qCAAwC;AACxC,yCAA4C;AAC5C,wCAA2C;AAC3C,0CAA6C;AAC7C,8CAAiD;AACjD,oCAAuC;AACvC,oCAAuC;AACvC,8CAAiD;AACjD,qCAAwC;AACxC,mCAAsC;AACtC,oCAAuC;AACvC,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,kCAAqC;AACrC,sCAAyC;AACzC,uCAA0C;AAC1C,2CAA8C;AAC9C,mCAAsC;AACtC,qCAAwC;AACxC,4CAA+C;AAC/C,4CAA+C;AAG/C,8DAAiE;AAGjE,8BAAiC;AACjC,+BAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAGlD,yCAA4C;AAC5C,8CAAiD;AACjD,yCAA4C;AAC5C,kDAAqD;AACrD,iDAAoD;AACpD,qDAAwD;AACxD,6CAAgD;AAChD,yCAA4C;AAC5C,+CAAkD;AAClD,oDAAuD;AACvD,mDAAsD;AACtD,yCAA4C;AAC5C,uCAA0C;AAC1C,oCAAuC;AACvC,yCAA4C;AAC5C,mCAAsC;AACtC,oCAAuC;AACvC,iCAAoC;AACpC,oCAAuC;AACvC,yCAA4C;AAC5C,oCAAuC;AACvC,6CAAgD;AAChD,sCAAyC;AACzC,0CAA6C;AAC7C,qCAAwC;AACxC,mCAAsC;AACtC,6CAAgD;AAChD,yCAA4C;AAC5C,uCAA0C;AAC1C,4CAA+C;AAC/C,uCAA0C;AAC1C,kCAAqC;AACrC,kCAAqC;AACrC,0CAA6C;AAC7C,wCAA2C;AAC3C,yCAA4C;AAC5C,2CAA8C;AAC9C,sCAAyC;AACzC,mCAAsC;AACtC,sCAAyC;AACzC,qCAAwC;AACxC,yCAA4C;AAC5C,qCAAwC;AACxC,yCAA4C;AAC5C,wCAA2C;AAC3C,0CAA6C;AAC7C,8CAAiD;AACjD,oCAAuC;AACvC,oCAAuC;AACvC,8CAAiD;AACjD,qCAAwC;AACxC,mCAAsC;AACtC,oCAAuC;AACvC,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,kCAAqC;AACrC,sCAAyC;AACzC,uCAA0C;AAC1C,2CAA8C;AAC9C,mCAAsC;AACtC,qCAAwC;AACxC,4CAA+C;AAC/C,4CAA+C;AAG/C,8DAAiE;AAGjE,8BAAiC;AACjC,+BAAkC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -63,23 +63,25 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@channel.io/bezier-icons": "0.28.0",
+    "@channel.io/bezier-icons": "0.30.0",
+    "@chromatic-com/storybook": "^1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "7.5.3",
-    "@storybook/addon-actions": "7.5.3",
-    "@storybook/addon-controls": "7.5.3",
-    "@storybook/addon-docs": "7.5.3",
-    "@storybook/addon-measure": "7.5.3",
-    "@storybook/addon-outline": "7.5.3",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/manager-api": "7.5.3",
-    "@storybook/react": "7.5.3",
-    "@storybook/react-webpack5": "7.5.3",
-    "@storybook/theming": "7.5.3",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-controls": "^8.1.10",
+    "@storybook/addon-docs": "^8.1.10",
+    "@storybook/addon-measure": "^8.1.10",
+    "@storybook/addon-outline": "^8.1.10",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/manager-api": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@storybook/theming": "^8.1.10",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
@@ -108,7 +110,8 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.71.1",
-    "storybook": "7.5.3",
+    "sass-loader": "^14.2.1",
+    "storybook": "^8.1.10",
     "ts-patch": "^3.1.2",
     "ts-prune": "^0.10.3",
     "tsconfig": "workspace:*",

package/src/components/AlphaAvatarGroup/AvatarGroup.types.ts

@@ -4,10 +4,7 @@ import type {
   SizeProps,
 } from '~/src/types/props'
 
-import {
-  type AlphaAvatarProps,
-  type AlphaAvatarSize,
-} from '~/src/components/AlphaAvatar'
+import { type AlphaAvatarSize } from '~/src/components/AlphaAvatar'
 
 type AvatarGroupEllipsisType = 'icon' | 'count'
 

package/src/components/AlphaButton/Button.module.scss

@@ -272,7 +272,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     @each $size, $value in $size-map {
       &:where(.size-#{$size}) {
-        & :is(.Spinner) {
+        & :is(.Loader) {
           @include dimension.square(#{$value}px);
         }
       }

package/src/components/AlphaButton/Button.tsx

@@ -7,7 +7,7 @@ import {
   type ButtonProps,
   type ButtonSize,
 } from '~/src/components/AlphaButton/Button.types'
-import { AlphaSpinner } from '~/src/components/AlphaSpinner'
+import { AlphaLoader } from '~/src/components/AlphaLoader'
 import { BaseButton } from '~/src/components/BaseButton'
 import { Icon, type IconSize } from '~/src/components/Icon'
 import { Text } from '~/src/components/Text'
@@ -121,8 +121,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
               styles[`size-${getIconSize(size)}`]
             )}
           >
-            <AlphaSpinner
-              className={styles.Spinner}
+            <AlphaLoader
+              className={styles.Loader}
               variant="on-overlay"
             />
           </div>

package/src/components/AlphaDialogPrimitive/AlphaDialogPrimitive.stories.tsx

@@ -46,6 +46,7 @@ function DialogComposition() {
 
 const meta: Meta<typeof DialogComposition> = {
   component: DialogComposition,
+  tags: ['!autodocs'],
 }
 
 export const Primary: StoryObj = {}

package/src/components/AlphaFloatingButton/FloatingButton.module.scss

@@ -207,7 +207,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     @each $size, $value in $size-map {
       &:where(.size-#{$size}) {
-        & :is(.Spinner) {
+        & :is(.Loader) {
           @include dimension.square(#{$value}px);
         }
       }

package/src/components/AlphaFloatingButton/FloatingButton.tsx

@@ -7,7 +7,7 @@ import {
   type FloatingButtonProps,
   type FloatingButtonSize,
 } from '~/src/components/AlphaFloatingButton/FloatingButton.types'
-import { AlphaSpinner } from '~/src/components/AlphaSpinner'
+import { AlphaLoader } from '~/src/components/AlphaLoader'
 import { BaseButton } from '~/src/components/BaseButton'
 import { Icon, type IconSize } from '~/src/components/Icon'
 import { Text } from '~/src/components/Text'
@@ -120,8 +120,8 @@ export const FloatingButton = forwardRef<
             styles[`size-${getIconSize(size)}`]
           )}
         >
-          <AlphaSpinner
-            className={styles.Spinner}
+          <AlphaLoader
+            className={styles.Loader}
             variant="on-overlay"
           />
         </div>

package/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss

@@ -176,7 +176,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     @each $size, $value in $size-map {
       &:where(.size-#{$size}) {
-        & :is(.Spinner) {
+        & :is(.Loader) {
           @include dimension.square(#{$value}px);
         }
       }

package/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx

@@ -4,7 +4,7 @@ import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 
 import { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'
-import { AlphaSpinner } from '~/src/components/AlphaSpinner'
+import { AlphaLoader } from '~/src/components/AlphaLoader'
 import { BaseButton } from '~/src/components/BaseButton'
 import { type ButtonSize } from '~/src/components/Button'
 import { Icon } from '~/src/components/Icon'
@@ -75,8 +75,8 @@ export const FloatingIconButton = forwardRef<
             styles[`size-${getIconSize(size)}`]
           )}
         >
-          <AlphaSpinner
-            className={styles.Spinner}
+          <AlphaLoader
+            className={styles.Loader}
             variant="on-overlay"
           />
         </div>

package/src/components/AlphaIconButton/IconButton.module.scss

@@ -253,7 +253,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     @each $size, $value in $size-map {
       &:where(.size-#{$size}) {
-        & :is(.Spinner) {
+        & :is(.Loader) {
           @include dimension.square(#{$value}px);
         }
       }

package/src/components/AlphaIconButton/IconButton.tsx

@@ -4,7 +4,7 @@ import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 
 import { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'
-import { AlphaSpinner } from '~/src/components/AlphaSpinner'
+import { AlphaLoader } from '~/src/components/AlphaLoader'
 import { BaseButton } from '~/src/components/BaseButton'
 import { type ButtonSize } from '~/src/components/Button'
 import { Icon } from '~/src/components/Icon'
@@ -79,8 +79,8 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
               styles[`size-${getIconSize(size)}`]
             )}
           >
-            <AlphaSpinner
-              className={styles.Spinner}
+            <AlphaLoader
+              className={styles.Loader}
               variant="on-overlay"
             />
           </div>

package/src/components/AlphaLoader/AlphaLoader.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { type Meta, type StoryFn } from '@storybook/react'
+
+import { Loader } from './Loader'
+import { type LoaderProps } from './Loader.types'
+
+const meta: Meta<typeof Loader> = {
+  component: Loader,
+}
+
+export default meta
+
+const Template: StoryFn<LoaderProps> = ({ ...args }) => <Loader {...args} />
+
+export const Primary = {
+  render: Template,
+
+  args: {
+    size: 'm',
+    variant: 'secondary',
+  },
+}

package/src/components/AlphaLoader/Loader.module.scss

@@ -0,0 +1,75 @@
+@use '../../styles/mixins/dimension';
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.Loader {
+  --b-loader-size: initial;
+  --b-loader-track-color: initial;
+  --b-loader-indicator-color: initial;
+  --b-loader-stroke-thickness: initial;
+
+  /* NOTE: stroke-width is fixed for the exceptional case of use inside buttons */
+  --b-loader-stroke-width: 2px;
+  --b-loader-view-box-size: 16;
+  --b-loader-stroke-dasharray: 16 9999;
+
+  @include dimension.square(calc(1px * var(--b-loader-size)));
+
+  display: inline-flex;
+  animation: rotate 1s linear infinite;
+
+  & :where(.track) {
+    fill: none;
+    stroke: var(--b-loader-track-color);
+    stroke-linecap: round;
+    stroke-width: var(--b-loader-stroke-width);
+  }
+
+  & :where(.indicator) {
+    fill: none;
+    stroke: var(--b-loader-indicator-color);
+    stroke-dasharray: var(--b-loader-stroke-dasharray);
+    stroke-linecap: round;
+    stroke-width: var(--b-loader-stroke-width);
+  }
+
+  &:where(.size-s, .size-m) {
+    --b-loader-stroke-width: calc(
+      var(--b-loader-stroke-thickness) * var(--b-loader-view-box-size) /
+        var(--b-loader-size)
+    );
+  }
+
+  &:where(.size-s) {
+    --b-loader-size: 28;
+    --b-loader-stroke-thickness: 4px;
+  }
+
+  &:where(.size-m) {
+    --b-loader-size: 50;
+    --b-loader-stroke-thickness: 6px;
+  }
+
+  &:where(.variant-primary) {
+    --b-loader-track-color: var(--alpha-color-primary-bg-lightest);
+    --b-loader-indicator-color: var(--alpha-color-fg-blue-normal);
+  }
+
+  &:where(.variant-secondary) {
+    --b-loader-track-color: var(--alpha-color-bg-black-light);
+    --b-loader-indicator-color: var(--alpha-color-fg-black-light);
+  }
+
+  &:where(.variant-on-overlay) {
+    --b-loader-track-color: var(--alpha-color-bg-absolute-white-lightest);
+    --b-loader-indicator-color: var(--alpha-color-fg-absolute-white-light);
+  }
+}

package/src/components/AlphaLoader/Loader.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { render } from '~/src/utils/test'
+
+import { LOADER_TEST_ID, Loader } from './Loader'
+
+describe('Loader >', () => {
+  const renderLoader = (props?: React.ComponentProps<typeof Loader>) =>
+    render(<Loader {...props} />)
+
+  it('should render', () => {
+    const { getByTestId } = renderLoader()
+    const renderedLoader = getByTestId(LOADER_TEST_ID)
+    expect(renderedLoader).toBeInTheDocument()
+  })
+
+  it('should render as a span element by default', () => {
+    const { getByTestId } = renderLoader()
+    const renderedLoader = getByTestId(LOADER_TEST_ID)
+    expect(renderedLoader.tagName).toBe('SPAN')
+  })
+
+  it('should forward ref', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    renderLoader({ ref })
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('should receive size', () => {
+    const { getByTestId } = renderLoader({ size: 'm' })
+    const renderedLoader = getByTestId(LOADER_TEST_ID)
+    expect(renderedLoader).toHaveClass('size-m')
+  })
+})

package/src/components/AlphaLoader/Loader.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react'
+
+import classNames from 'classnames'
+
+import { type LoaderProps } from './Loader.types'
+
+import styles from './Loader.module.scss'
+
+export const LOADER_TEST_ID = 'bezier-loader'
+
+export const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(
+  { className, size, variant = 'secondary', ...rest },
+  forwardedRef
+) {
+  return (
+    <span
+      className={classNames(
+        styles.Loader,
+        size && styles[`size-${size}`],
+        styles[`variant-${variant}`],
+        className
+      )}
+      ref={forwardedRef}
+      data-testid={LOADER_TEST_ID}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+      >
+        <circle
+          cx="8"
+          cy="8"
+          r="6.5"
+          className={styles.track}
+        />
+
+        <circle
+          cx="8"
+          cy="8"
+          r="6.5"
+          className={styles.indicator}
+        />
+      </svg>
+    </span>
+  )
+})

package/src/components/{AlphaSpinner/Spinner.types.ts → AlphaLoader/Loader.types.ts}

@@ -4,18 +4,18 @@ import {
   type SizeProps,
 } from '~/src/types/props'
 
-type SpinnerSize = 's' | 'm'
+type LoaderSize = 's' | 'm'
 
-interface SpinnerOwnProps {
+interface LoaderOwnProps {
   /**
-   * The style variant of Spinner.
+   * The style variant of Loader.
    * @default 'secondary'
    */
   variant?: 'primary' | 'secondary' | 'on-overlay'
 }
 
-export interface SpinnerProps
+export interface LoaderProps
   extends Omit<BezierComponentProps<'span'>, keyof ColorProps>,
-    SizeProps<SpinnerSize>,
+    SizeProps<LoaderSize>,
     ColorProps,
-    SpinnerOwnProps {}
+    LoaderOwnProps {}

package/src/components/AlphaLoader/index.ts

@@ -0,0 +1,2 @@
+export { Loader as AlphaLoader } from './Loader'
+export { type LoaderProps as AlphaLoaderProps } from './Loader.types'

package/src/components/AlphaToggleButton/ToggleButton.module.scss

@@ -104,7 +104,7 @@
     justify-content: center;
 
     &:where(.size-s) {
-      & :is(.Spinner) {
+      & :is(.Loader) {
         @include dimension.square(#{map.get($size-map, 's')}px);
       }
     }

package/src/components/AlphaToggleButton/ToggleButton.tsx

@@ -4,7 +4,7 @@ import { isBezierIcon } from '@channel.io/bezier-icons'
 import * as TogglePrimitive from '@radix-ui/react-toggle'
 import classNames from 'classnames'
 
-import { AlphaSpinner } from '~/src/components/AlphaSpinner'
+import { AlphaLoader } from '~/src/components/AlphaLoader'
 import { useToggleButtonContext } from '~/src/components/AlphaToggleButton/ToggleButtonContext'
 import { BaseButton } from '~/src/components/BaseButton'
 import { Icon, type IconSize } from '~/src/components/Icon'
@@ -104,8 +104,8 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
                 styles[`size-${ICON_SIZE}`]
               )}
             >
-              <AlphaSpinner
-                className={styles.Spinner}
+              <AlphaLoader
+                className={styles.Loader}
                 variant="secondary"
               />
             </div>

package/src/components/AlphaTooltipPrimitive/AlphaTooltipPrimitive.stories.tsx

@@ -29,6 +29,7 @@ function TooltipComposition() {
 
 const meta: Meta<typeof TooltipComposition> = {
   component: TooltipComposition,
+  tags: ['!autodocs'],
 }
 
 export const Primary: StoryObj = {}

package/src/components/Banner/Banner.mdx

@@ -1,6 +1,8 @@
-import { ArgsTable, Canvas, Story } from '@storybook/addon-docs'
-import { Banner, BannerVariant } from '~/src/components/Banner'
 import { StackItem, VStack } from '~/src/components/Stack'
+import * as BannerStories from './Banner.stories'
+import { ArgTypes, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+<Meta of={BannerStories} />
 
 # Banner
 
@@ -8,57 +10,41 @@ import { StackItem, VStack } from '~/src/components/Stack'
 
 안내, 경고, 추천 등의 다양한 정보를 잘 전달하고 싶을 때 사용합니다.
 
-<Canvas>
-  <Story id="components-banner--overview" />
-</Canvas>
+<Canvas of={BannerStories.Overview} />
 
 ## Usage
 
 - 최소 너비는 200px입니다.
 
-<Canvas>
-  <Story id="components-banner--usage-min-width" />
-</Canvas>
+<Canvas of={BannerStories.UsageMinWidth} />
 
 - Parent의 너비를 가득 채웁니다.
 
-<Canvas>
-  <Story id="components-banner--usage-full-width" />
-</Canvas>
+<Canvas of={BannerStories.UsageFullWidth} />
 
 - 최대 너비는 없으나, Banner의 텍스트 영역은 좌측 상단에 위치합니다.
 
-<Canvas>
-  <Story id="components-banner--usage-max-width" />
-</Canvas>
+<Canvas of={BannerStories.UsageMaxWidth} />
 
 - 연속으로 보여줘야 하는 경우, Banner 간의 간격은 6px 입니다.
 
-<Canvas>
-  <Story id="components-banner--usage-consecutive" />
-</Canvas>
+<Canvas of={BannerStories.UsageConsecutive} />
 
 - 아이콘을 제거하여 사용할 수 있습니다.
 
-<Canvas>
-  <Story id="components-banner--usage-no-icon" />
-</Canvas>
+<Canvas of={BannerStories.UsageNoIcon} />
 
 ### Link
 
 - 링크가 필요한 경우, 마지막에 bold, underlined text로 들어가게 됩니다.
 - `hasLink={true}` prop을 통해 링크를 enable하고, `linkText` prop으로 링크의 텍스트를 설정할 수 있습니다.
 
-<Canvas>
-  <Story id="components-banner--usage-link" />
-</Canvas>
+<Canvas of={BannerStories.UsageLink} />
 
 - `linkTo` prop을 활용하면, 링크를 클릭했을 때 이동할 location을 지정할 수 있습니다.
 - 기본적으로, 링크를 클릭하면 새 탭으로 해당 location이 열리게 됩니다. (`<a>` 태그, `target="_blank"`, `rel="noopener noreferrer"` 를 기본으로 합니다.)
 
-<Canvas>
-  <Story id="components-banner--usage-link-to" />
-</Canvas>
+<Canvas of={BannerStories.UsageLinkTo} />
 
 - Default로 제공되는 링크 메커니즘을 이용할 수 없는 경우가 있습니다. (대표적인 usecase는, SPA에서 `react-router`와 같은 라이브러리가 제공하는 링크 컴포넌를 활용하는 경우입니다.) 이 경우, `renderLink` prop을 지정하여 링크를 어떤 컴포넌트로 렌더링할지 결정할 수 있습니다.
 
@@ -69,13 +55,13 @@ const renderLink = ({ content, linkTo }) => <Link to={linkTo}>{ content }</Link>
 
 <Banner
   ...
-  renderLink={renerLink}
+  renderLink={renderLink}
 />
 ```
 
 ## API
 
-<ArgsTable of={Banner} />
+<ArgTypes of={BannerStories} />
 
 ## Version