@channel.io/bezier-react 2.1.0 → 2.2.1

package/src/components/Banner/Banner.stories.tsx

@@ -45,6 +45,7 @@ const meta: Meta<typeof Banner> = {
       },
     },
   },
+  tags: ['!autodocs'],
 }
 export default meta
 

package/src/components/Button/Button.mdx

@@ -1,5 +1,7 @@
-import { ArgsTable, Canvas, Story } from '@storybook/addon-docs'
-import { Button } from '~/src/components/Button'
+import { ArgTypes, Canvas, Meta } from '@storybook/addon-docs'
+import * as ButtonStories from './Button.stories'
+
+<Meta of={ButtonStories} />
 
 # Button
 
@@ -9,13 +11,9 @@ import { Button } from '~/src/components/Button'
 
 버튼은 크게 4가지 사이즈로 나뉩니다. 그 중 M이 가장 보편적이며, 공간 절약을 위해 S가 쓰입니다. List나 Input 등 액션이 필요할 때는 XS도 사용할 수 있습니다. 가입, 초대 UX 등 굉장히 강조해야 할 버튼의 경우, L, XL 사이즈를 사용할 수 있습니다.
 
-<Canvas>
-  <Story id="components-button--overview-cta" />
-</Canvas>
+<Canvas of={ButtonStories.OverviewCTA} />
 
-<Canvas>
-  <Story id="components-button--overview-floating" />
-</Canvas>
+<Canvas of={ButtonStories.OverviewFloating} />
 
 ## Usage
 
@@ -24,13 +22,9 @@ import { Button } from '~/src/components/Button'
 - 한 화면 내에서 CTA 버튼은 가능한 한, 가장 중요한 버튼 1개만 primary로 지정합니다. 후순위로 colored button을 같이 넣어야 할 경우에는 secondary로 넣습니다. 그 외에는 secondary, tetiary button을 조합하여 넣습니다.
 - 버튼 사이의 간격은 0 또는 6으로 합니다. 둘 이상의 버튼을 활용할 때는, `<ButtonGroup>` 컴포넌트를 활용하는 것을 권장합니다.
 
-<Canvas>
-  <Story id="components-button--usage-cta" />
-</Canvas>
+<Canvas of={ButtonStories.UsageCTA} />
 
-<Canvas>
-  <Story id="components-button--usage-cta-2" />
-</Canvas>
+<Canvas of={ButtonStories.UsageCTA2} />
 
 ButtonGroup에 대해 더 알아보려면 [스토리](/docs/components-buttongroup--playground)를 참조하세요.
 
@@ -38,35 +32,27 @@ ButtonGroup에 대해 더 알아보려면 [스토리](/docs/components-buttongro
 
 - 보통의 경우, tertiary button을 적절한 icon과 함께 사용합니다.
 
-<Canvas>
-  <Story id="components-button--usage-web-links" />
-</Canvas>
+<Canvas of={ButtonStories.UsageWebLinks} />
 
 ### Recipe: Composite Usage
 
 - XS 크기의 버튼은 ListItem, SectionLabel 등 다른 컴포넌트에 함께 사용될 수 있습니다. 컴포넌트 좌우측에서 액션으로 사용됩니다.
 
-<Story id="components-button--usage-composite" />
+<Canvas of={ButtonStories.UsageComposite} />
 
 ### Recipe: Button with various contents
 
 - 기본적으로 `leftContent`, `rightContent` prop에 `BezierIcon`을 지정하여 좌우측에 아이콘이 들어가는 형태를 표현합니다.
 
-<Canvas>
-  <Story id="components-button--usage-various-contents-composite" />
-</Canvas>
+<Canvas of={ButtonStories.UsageVariousContentsComposite} />
 
 - 아이콘만 들어가는 버튼의 경우, `leftContent` prop만 사용합니다.
 
-<Canvas>
-  <Story id="components-button--usage-various-contents-icon-only" />
-</Canvas>
+<Canvas of={ButtonStories.UsageVariousContentsIconOnly} />
 
 - 아이콘 이외에 커스텀 컴포넌트가 들어가야 하는 상황에는, `leftContent`, `rightContent` prop에 `JSX.Element` 값을 지정할 수 있습니다.
 
-<Canvas>
-  <Story id="components-button--usage-various-contents-custom" />
-</Canvas>
+<Canvas of={ButtonStories.UsageVariousContentsCustom} />
 
 ### Recipe: Button with asynchronous actions
 
@@ -95,9 +81,7 @@ const AsyncActionButton = () => {
 }
 ```
 
-<Canvas>
-  <Story id="components-button--usage-async" />
-</Canvas>
+<Canvas of={ButtonStories.UsageAsync} />
 
 ### Recipe: Button with dropdown
 
@@ -125,9 +109,7 @@ const OpenDropdownButton = () => {
 }
 ```
 
-<Canvas>
-  <Story id="components-button--usage-dropdown" />
-</Canvas>
+<Canvas of={ButtonStories.UsageDropdown} />
 
 ## Variants
 
@@ -135,23 +117,23 @@ const OpenDropdownButton = () => {
 
 - `ButtonColorVariant` enum을 통해 정의되며, `colorVariant` prop으로 지정할 수 있습니다.
 
-<Story id="components-button--variants-color" />
+<Canvas of={ButtonStories.VariantsColor} />
 
 ### Style Variants
 
 - `ButtonStyleVariant` enum을 통해 정의되며, `styleVariant` prop으로 지정할 수 있습니다.
 
-<Story id="components-button--variants-style" />
+<Canvas of={ButtonStories.VariantsStyle} />
 
 ### Size
 
 - `ButtonSize` enum을 통해 정의되며, `size` prop으로 지정할 수 있습니다.
 
-<Story id="components-button--variants-size" />
+<Canvas of={ButtonStories.VariantsSize} />
 
 ## API
 
-<ArgsTable of={Button} />
+<ArgTypes of={ButtonStories} />
 
 ## Version
 

package/src/components/Button/Button.stories.tsx

@@ -53,6 +53,7 @@ const meta: Meta<typeof Button> = {
   argTypes: {
     onClick: { action: 'onClick' },
   },
+  tags: ['!autodocs'],
 }
 export default meta
 

package/src/components/ButtonGroup/ButtonGroup.mdx

@@ -1,6 +1,5 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
-import { ButtonGroup } from './ButtonGroup'
-import { Composition } from './ButtonGroup.stories'
+import { ArgTypes, Canvas } from '@storybook/addon-docs'
+import * as ButtonGroupStories from './ButtonGroup.stories'
 
 # ButtonGroup
 
@@ -10,13 +9,11 @@ import { Composition } from './ButtonGroup.stories'
 
 버튼 사이의 간격은 0px 혹은 6px 이며, 디폴트값은 6px 입니다.
 
-<Canvas>
-  <Story id="components-buttongroup--playground" />
-</Canvas>
+<Canvas of={ButtonGroupStories.Primary} />
 
 ## API
 
-<ArgsTable of={ButtonGroup} />
+<ArgTypes of={ButtonGroupStories} />
 
 ## Version
 

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -17,7 +17,9 @@ const meta: Meta<typeof ButtonGroup> = {
       page: mdx,
     },
   },
+  tags: ['!autodocs'],
 }
+
 export default meta
 
 const Template: StoryFn<ButtonGroupProps> = (props) => (

package/src/components/Icon/Icon.mdx

@@ -1,6 +1,6 @@
-import { ArgsTable, Canvas, Story } from '@storybook/addon-docs'
+import { Story, ArgTypes, Canvas } from '@storybook/addon-docs'
 import { ChannelBtnSmileFilledIcon } from '@channel.io/bezier-icons'
-import { Icon } from './Icon'
+import * as IconStories from './Icon.stories'
 
 # Icon
 
@@ -10,7 +10,7 @@ import { Icon } from './Icon'
 
 아이콘 단독으로 사용되거나, `bezier-react`의 다른 컴포넌트를 구성하는 기본 요소입니다.
 
-<Story id="components-icon--overview" />
+<Canvas of={IconStories.Overview} />
 
 ### Naming
 
@@ -51,7 +51,7 @@ import {
 `Icon` 컴포넌트에 color variant는 따로 정해져 있지 않습니다.
 Semantic 색상을 `color` prop에 지정하여 아이콘이 어떤 색상으로 렌더링할지 결정합니다.
 
-<Story id="components-icon--usage-color" />
+<Canvas of={IconStories.UsageColor} />
 
 ```tsx
 <Icon
@@ -66,7 +66,7 @@ Semantic 색상을 `color` prop에 지정하여 아이콘이 어떤 색상으로
 
 아이콘의 크기를 지정할 때는 `IconSize` enum을 사용합니다.
 
-<Story id="components-icon--usage-size" />
+<Canvas of={IconStories.UsageSize} />
 
 ```tsx
 <Icon
@@ -131,7 +131,7 @@ Semantic 색상을 `color` prop에 지정하여 아이콘이 어떤 색상으로
 아이콘 주위에 margin이 필요한 경우, `styled(Icon)` 처럼 스타일을 overriding하여 margin을 작성할 수 있으나,
 `marginTop`, `marginRight` 등의 prop을 지원하기 때문에 overriding 없이 작성할 수 있습니다.
 
-<Story id="components-icon--tips-margin" />
+<Canvas of={IconStories.TipsMargin} />
 
 ```tsx
 <Icon
@@ -146,7 +146,7 @@ Semantic 색상을 `color` prop에 지정하여 아이콘이 어떤 색상으로
 
 ## API
 
-<ArgsTable of={Icon} />
+<ArgTypes of={IconStories} />
 
 ## Version
 

package/src/components/Icon/Icon.stories.tsx

@@ -48,7 +48,9 @@ const meta: Meta<typeof Icon> = {
       page: mdx,
     },
   },
+  tags: ['!autodocs'],
 }
+
 export default meta
 
 export const Primary: StoryObj<IconProps> = {

package/src/components/Icon/Icon.types.ts

@@ -1,4 +1,4 @@
-import type React from 'react'
+import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import {
   type BezierComponentProps,
@@ -21,7 +21,7 @@ interface IconOwnProps {
    * <Icon source={HeartFilledIcon} {...} />
    * ```
    */
-  source: React.ElementType<React.SVGProps<SVGSVGElement>>
+  source: BezierIcon
 }
 
 export interface IconProps

package/src/components/LegacyStack/LegacyStack.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Story } from '@storybook/addon-docs'
+import { ArgTypes, Canvas, Story } from '@storybook/addon-docs'
 import {
   LegacyHStack,
   LegacyVStack,
@@ -6,6 +6,7 @@ import {
   LegacyStackItem,
   LegacySpacer,
 } from '~/src/components/LegacyStack'
+import * as LegacyStackStories from './LegacyStack.stories'
 
 # LegacyStack
 
@@ -21,9 +22,7 @@ Stack은 flex layout을 제공하는 컴포넌트입니다.
 
 Flexbox 내의 각 item을 `StackItem`으로 구성합니다. Flex layout 내에서 각 item의 weight, base size, item 간의 spacing을 컨트롤할 수 있습니다.
 
-<Canvas>
-  <Story id="components-legacystack--overview" />
-</Canvas>
+<Canvas of={LegacyStackStories.Overview} />
 
 ## Usage
 
@@ -46,13 +45,9 @@ Flexbox 내의 각 item을 `StackItem`으로 구성합니다. Flex layout 내에
 
 기본 컴포넌트인 `Stack`에 `direction` prop을 사용하여 방향을 결정할 수 있으나, 방향이 고정된 경우에는 `HStack`과 `VStack`을 바로 이용하는 것이 좋습니다.
 
-<Canvas>
-  <Story id="components-legacystack--direction-horizontal" />
-</Canvas>
+<Canvas of={LegacyStackStories.DirectionHorizontal} />
 
-<Canvas>
-  <Story id="components-legacystack--direction-vertical" />
-</Canvas>
+<Canvas of={LegacyStackStories.DirectionVertical} />
 
 ### Alignment
 
@@ -60,17 +55,15 @@ Flex container의 **주 방향** (`HStack`은 가로, `VStack`은 세로) 의
 
 기본적으로, `Stack` container에 지정하는 prop이 모든 child의 기본값이 됩니다. 각 `StackItem`에도 `justify`, `align` prop을 지정하여 parent `Stack`의 기본값을 overriding할 수 있습니다.
 
-<Story id="components-legacystack--alignment-justify" />
+<Canvas of={LegacyStackStories.AlignmentJustify} />
 
-<Story id="components-legacystack--alignment-align" />
+<Canvas of={LegacyStackStories.AlignmentAlign} />
 
 ### Spacing
 
 `Stack` 컴포넌트의 `spacing` prop으로 item 간의 기본 간격을 조정합니다. `StackItem`에 `marginBefore`, `marginAfter` prop으로 기본 간격을 오버라이딩할 수 있습니다.
 
-<Canvas>
-  <Story id="components-legacystack--spacing" />
-</Canvas>
+<Canvas of={LegacyStackStories.Spacing} />
 
 ### Weight
 
@@ -80,43 +73,37 @@ Flex layout의 특징은, container의 크기에 맞춰 item의 크기가 적절
 
 - Item 하나가 container의 여유 공간을 모두 차지하는 경우입니다. 이 경우, 해당 item에게 `grow shrink weight={1}` prop을 지정합니다.
 
-<Canvas>
-  <Story id="components-legacystack--expanded" />
-</Canvas>
+<Canvas of={LegacyStackStories.Expanded} />
 
 - CSS의 `justify-content: space-between`과 같이, item 사이에 공간을 두고자 하는 경우가 있습니다. 이 경우에는 `<Spacer />` 컴포넌트를 활용합니다. `Spacer`는 기본적으로 `grow shrink weight={1}` 을 가진 빈 `StackItem`입니다.
 
-<Canvas>
-  <Story id="components-legacystack--weight-spacer" />
-</Canvas>
+<Canvas of={LegacyStackStories.WeightSpacer} />
 
 - Item이 container의 크기와 무관하게 (특히, container 크기가 충분하지 않은 경우) 일정한 크기를 차지하고자 하는 경우, 기본값인 `grow={false} shrink={false} weight={0}` prop을 지정합니다. 그리고, 의도하는 크기를 `size` prop으로 지정합니다.
 
-<Canvas>
-  <Story id="components-legacystack--weight-fixed" />
-</Canvas>
+<Canvas of={LegacyStackStories.WeightFixed} />
 
 ## API
 
 ### Stack
 
-<ArgsTable of={LegacyStack} />
+<ArgTypes of={LegacyStack} />
 
 ### HStack
 
-<ArgsTable of={LegacyHStack} />
+<ArgTypes of={LegacyHStack} />
 
 ### VStack
 
-<ArgsTable of={LegacyVStack} />
+<ArgTypes of={LegacyVStack} />
 
 ### StackItem
 
-<ArgsTable of={LegacyStackItem} />
+<ArgTypes of={LegacyStackItem} />
 
 ### Spacer
 
-<ArgsTable of={LegacySpacer} />
+<ArgTypes of={LegacySpacer} />
 
 ## Version
 

package/src/components/LegacyStack/LegacyStack.stories.tsx

@@ -60,6 +60,7 @@ const meta: Meta<
       },
     },
   },
+  tags: ['!autodocs'],
 }
 export default meta
 

package/src/components/ProgressBar/ProgressBar.mdx

@@ -1,5 +1,5 @@
-import { ArgsTable, Canvas, Story } from '@storybook/addon-docs'
-import { ProgressBar } from '~/src/components/ProgressBar'
+import { ArgTypes, Canvas, Story } from '@storybook/addon-docs'
+import * as ProgressBarStories from './ProgressBar.stories'
 
 # ProgressBar
 
@@ -7,9 +7,7 @@ import { ProgressBar } from '~/src/components/ProgressBar'
 
 진행도를 나타낼 때 사용합니다.
 
-<Canvas>
-  <Story id="components-progressbar--overview" />
-</Canvas>
+<Canvas of={ProgressBarStories.Overview} />
 
 ## Usage
 
@@ -17,9 +15,7 @@ import { ProgressBar } from '~/src/components/ProgressBar'
 
 `width` prop을 통해 ProgressBar의 너비를 지정할 수 있습니다. 기본값은 36px입니다.
 
-<Canvas>
-  <Story id="components-progressbar--usage-width" />
-</Canvas>
+<Canvas of={ProgressBarStories.UsageWidth} />
 
 ### Value
 
@@ -27,9 +23,7 @@ import { ProgressBar } from '~/src/components/ProgressBar'
 
 진행도를 나타내는 `value`는 0보다 크거나 같고 1보다 작거나 같은 수입니다. 0보다 작은 값은 0으로, 1보다 큰 값은 1로 처리합니다.
 
-<Canvas>
-  <Story id="components-progressbar--usage-value" />
-</Canvas>
+<Canvas of={ProgressBarStories.UsageValue} />
 
 ## Variants
 
@@ -39,7 +33,7 @@ S, M 2개의 size가 있으며, 기본값은 M입니다.
 
 `size` prop을 통해 ProgressBar의 높이를 선택할 수 있습니다.
 
-<Story id="components-progressbar--size-variant" />
+<Canvas of={ProgressBarStories.SizeVariant} />
 
 ### Color
 
@@ -47,13 +41,13 @@ Green, Monochrome, GreenAlt 3개의 color가 있으며, 기본값은 Green입니
 
 `variant` prop을 통해 ProgressBar의 색상을 선택할 수 있습니다.
 
-<Story id="components-progressbar--variant" />
+<Canvas of={ProgressBarStories.Variant} />
 
 ## API
 
 ### ProgressBar
 
-<ArgsTable of={ProgressBar} />
+<ArgTypes of={ProgressBarStories} />
 
 ## Version
 

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -47,7 +47,9 @@ const meta: Meta<typeof ProgressBar> = {
       },
     },
   },
+  tags: ['!autodocs'],
 }
+
 export default meta
 
 export const Primary: StoryObj<ProgressBarProps> = {

package/src/components/Slider/Slider.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof Slider> = {
   argTypes: {
     value: {
       control: {
-        type: 'array',
+        type: 'object',
       },
     },
     minStepsBetweenThumbs: {

package/src/components/TextField/TextField.module.scss

@@ -71,7 +71,8 @@
     box-shadow: var(--input-box-shadow-focused);
   }
 
-  &:where(:has(.TextFieldInput:focus, :hover)) .CloseIcon {
+  &:where(:has(.TextFieldInput:focus, :hover, .CloseIconWrapper:focus))
+    .CloseIcon {
     visibility: visible;
   }
 

package/src/components/TextField/TextField.test.tsx

@@ -237,7 +237,8 @@ describe('TextField', () => {
   describe('show remove button only when it is filled and focused/hovered', () => {
     /**
      * FIXME: This test is not working properly.
-     * @see https://github.com/testing-library/jest-dom/issues/444
+     * Jest-dom does not support css which is not inline.
+     * @see https://github.com/testing-library/jest-dom/issues/113#issuecomment-496971128
      */
     // it('disappear when empty & focused/hovered', async () => {
     //   const { getByTestId } = renderComponent({ value: '', allowClear: true })
@@ -296,5 +297,19 @@ describe('TextField', () => {
       )
       expect(clearButton).toBeVisible()
     })
+
+    it('should focus the clear button when Tab key is pressed', async () => {
+      const { getByTestId } = renderComponent({
+        value: 'test',
+        allowClear: true,
+      })
+      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
+      const input = rendered.getElementsByTagName('input')[0]
+
+      input.focus()
+      await user.tab()
+
+      expect(document.activeElement).toHaveClass('CloseIconWrapper')
+    })
   })
 })

package/src/components/TextField/TextField.tsx

@@ -409,7 +409,7 @@ export const TextField = forwardRef<TextFieldRef, TextFieldProps>(
         {activeClear && (
           <BaseButton
             className={styles.CloseIconWrapper}
-            tabIndex={-1}
+            tabIndex={0}
             onClick={handleClear}
           >
             <Icon

package/src/hooks/useMergeRefs.ts

@@ -19,6 +19,7 @@ function assignRef<Node>(ref: Ref<Node>, value: Node | null) {
 
   try {
     ref.current = value
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (error) {
     throw new Error(`Cannot assign value '${value}' to ref '${ref}'`)
   }

package/src/index.ts

@@ -12,7 +12,7 @@ export * from '~/src/components/AlphaDialogPrimitive'
 export * from '~/src/components/AlphaFloatingButton'
 export * from '~/src/components/AlphaFloatingIconButton'
 export * from '~/src/components/AlphaIconButton'
-export * from '~/src/components/AlphaSpinner'
+export * from '~/src/components/AlphaLoader'
 export * from '~/src/components/AlphaToggleButton'
 export * from '~/src/components/AlphaToggleButtonGroup'
 export * from '~/src/components/AlphaTooltipPrimitive'

package/dist/cjs/components/AlphaSpinner/Spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.js","sources":["../../../../src/components/AlphaSpinner/Spinner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { type SpinnerProps } from './Spinner.types'\n\nimport styles from './Spinner.module.scss'\n\nexport const SPINNER_TEST_ID = 'bezier-spinner'\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(\n  function Spinner(\n    { className, size, variant = 'secondary', ...rest },\n    forwardedRef\n  ) {\n    return (\n      <span\n        className={classNames(\n          styles.Spinner,\n          size && styles[`size-${size}`],\n          styles[`variant-${variant}`],\n          className\n        )}\n        ref={forwardedRef}\n        data-testid={SPINNER_TEST_ID}\n        {...rest}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n        >\n          <circle\n            cx=\"8\"\n            cy=\"8\"\n            r=\"6.5\"\n            className={styles.track}\n          />\n\n          <circle\n            cx=\"8\"\n            cy=\"8\"\n            r=\"6.5\"\n            className={styles.indicator}\n          />\n        </svg>\n      </span>\n    )\n  }\n)\n"],"names":["SPINNER_TEST_ID","Spinner","forwardRef","className","size","variant","rest","forwardedRef","React","createElement","Object","assign","classNames","styles","ref","xmlns","viewBox","cx","cy","r","track","indicator"],"mappings":";;;;;;AAQO,MAAMA,eAAe,GAAG,iBAAgB;MAElCC,OAAO,gBAAGC,gBAAU,CAC/B,SAASD,OAAOA,CACd;EAAEE,SAAS;EAAEC,IAAI;AAAEC,EAAAA,OAAO,GAAG,WAAW;EAAE,GAAGC,IAAAA;AAAK,CAAC,EACnDC,YAAY,EACZ;AACA,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAAAC,MAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;IACER,SAAS,EAAES,aAAU,CACnBC,sBAAM,CAACZ,OAAO,EACdG,IAAI,IAAIS,sBAAM,CAAC,CAAA,KAAA,EAAQT,IAAI,CAAE,CAAA,CAAC,EAC9BS,sBAAM,CAAC,CAAA,QAAA,EAAWR,OAAO,CAAE,CAAA,CAAC,EAC5BF,SACF,CAAE;AACFW,IAAAA,GAAG,EAAEP,YAAa;IAClB,aAAaP,EAAAA,eAAAA;AAAgB,GAAA,EACzBM,IAAI,CAAA,eAERE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEM,IAAAA,KAAK,EAAC,4BAA4B;AAClCC,IAAAA,OAAO,EAAC,WAAA;GAERR,eAAAA,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,CAAC,EAAC,KAAK;IACPhB,SAAS,EAAEU,sBAAM,CAACO,KAAAA;AAAM,GACzB,CAAC,eAEFZ,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,CAAC,EAAC,KAAK;IACPhB,SAAS,EAAEU,sBAAM,CAACQ,SAAAA;GACnB,CACE,CACD,CAAC,CAAA;AAEX,CACF;;;;;"}

package/dist/cjs/components/AlphaSpinner/Spinner.module.scss.js

@@ -1,8 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styles = {"Spinner":"b-JiZuz","rotate":"b--s0vl","track":"b-yJ2yV","indicator":"b-ZDWx3","size-s":"b-RnjP3","size-m":"b-ZRPEJ","variant-primary":"b-awyMq","variant-secondary":"b-ur-vE","variant-on-overlay":"b-5H4Ga"};
-
-exports.default = styles;
-//# sourceMappingURL=Spinner.module.scss.js.map

package/dist/cjs/components/AlphaSpinner/Spinner.module.scss.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/components/AlphaSpinner/Spinner.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.mjs","sources":["../../../../src/components/AlphaSpinner/Spinner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { type SpinnerProps } from './Spinner.types'\n\nimport styles from './Spinner.module.scss'\n\nexport const SPINNER_TEST_ID = 'bezier-spinner'\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(\n  function Spinner(\n    { className, size, variant = 'secondary', ...rest },\n    forwardedRef\n  ) {\n    return (\n      <span\n        className={classNames(\n          styles.Spinner,\n          size && styles[`size-${size}`],\n          styles[`variant-${variant}`],\n          className\n        )}\n        ref={forwardedRef}\n        data-testid={SPINNER_TEST_ID}\n        {...rest}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n        >\n          <circle\n            cx=\"8\"\n            cy=\"8\"\n            r=\"6.5\"\n            className={styles.track}\n          />\n\n          <circle\n            cx=\"8\"\n            cy=\"8\"\n            r=\"6.5\"\n            className={styles.indicator}\n          />\n        </svg>\n      </span>\n    )\n  }\n)\n"],"names":["SPINNER_TEST_ID","Spinner","forwardRef","className","size","variant","rest","forwardedRef","React","createElement","Object","assign","classNames","styles","ref","xmlns","viewBox","cx","cy","r","track","indicator"],"mappings":";;;;AAQO,MAAMA,eAAe,GAAG,iBAAgB;MAElCC,OAAO,gBAAGC,UAAU,CAC/B,SAASD,OAAOA,CACd;EAAEE,SAAS;EAAEC,IAAI;AAAEC,EAAAA,OAAO,GAAG,WAAW;EAAE,GAAGC,IAAAA;AAAK,CAAC,EACnDC,YAAY,EACZ;AACA,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAAAC,MAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;IACER,SAAS,EAAES,UAAU,CACnBC,MAAM,CAACZ,OAAO,EACdG,IAAI,IAAIS,MAAM,CAAC,CAAA,KAAA,EAAQT,IAAI,CAAE,CAAA,CAAC,EAC9BS,MAAM,CAAC,CAAA,QAAA,EAAWR,OAAO,CAAE,CAAA,CAAC,EAC5BF,SACF,CAAE;AACFW,IAAAA,GAAG,EAAEP,YAAa;IAClB,aAAaP,EAAAA,eAAAA;AAAgB,GAAA,EACzBM,IAAI,CAAA,eAERE,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEM,IAAAA,KAAK,EAAC,4BAA4B;AAClCC,IAAAA,OAAO,EAAC,WAAA;GAERR,eAAAA,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,CAAC,EAAC,KAAK;IACPhB,SAAS,EAAEU,MAAM,CAACO,KAAAA;AAAM,GACzB,CAAC,eAEFZ,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,CAAC,EAAC,KAAK;IACPhB,SAAS,EAAEU,MAAM,CAACQ,SAAAA;GACnB,CACE,CACD,CAAC,CAAA;AAEX,CACF;;;;"}

package/dist/esm/components/AlphaSpinner/Spinner.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {"Spinner":"b-JiZuz","rotate":"b--s0vl","track":"b-yJ2yV","indicator":"b-ZDWx3","size-s":"b-RnjP3","size-m":"b-ZRPEJ","variant-primary":"b-awyMq","variant-secondary":"b-ur-vE","variant-on-overlay":"b-5H4Ga"};
-
-export { styles as default };
-//# sourceMappingURL=Spinner.module.scss.mjs.map

package/dist/esm/components/AlphaSpinner/Spinner.module.scss.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/types/components/AlphaSpinner/Spinner.d.ts

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

package/dist/types/components/AlphaSpinner/Spinner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaSpinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAInD,eAAO,MAAM,eAAe,mBAAmB,CAAA;AAE/C,eAAO,MAAM,OAAO,sFAsCnB,CAAA"}

package/dist/types/components/AlphaSpinner/Spinner.types.d.ts

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

package/dist/types/components/AlphaSpinner/Spinner.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaSpinner/Spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,0BAAyB;AAE1B,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,CAAA;AAE5B,UAAU,eAAe;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,YAAY,CAAA;CACjD;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,MAAM,UAAU,CAAC,EAC1D,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,EACV,eAAe;CAAG"}

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

@@ -1,3 +0,0 @@
-export { Spinner as AlphaSpinner } from './Spinner';
-export { type SpinnerProps as AlphaSpinnerProps } from './Spinner.types';
-//# sourceMappingURL=index.d.ts.map

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

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

package/src/components/AlphaSpinner/AlphaSpinner.stories.tsx

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