@lotte-innovate/ui-component-test 0.0.11 → 0.0.12

package/dist/components/Tooltip/index.jsx

@@ -24,7 +24,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../utils/utils';
+import { cn } from 'utils/utils';
 import { primaryColorStyle, radiusVariants, scalingOptions, weightVariants } from '../../constants';
 var tooltipVariants = cva('bg-slate-12 text-slate-1 dark:bg-slateDark-12 dark:text-slateDark-1 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade select-none rounded-[4px] px-[9px] py-[6px] text-[12px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]', {
     variants: {
@@ -43,16 +43,16 @@ export var Tooltip = React.forwardRef(function (_a) {
     var arrowColor = color
         ? "fill-".concat(color, "-9 dark:fill-").concat(color, "Dark-9")
         : 'fill-slate-12 dark:fill-slateDark-12';
-    return (<TooltipPrimitive.Provider>
-        <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-          <TooltipPrimitive.Trigger className="cursor-pointer text-slate-12 dark:text-slateDark-12" asChild>
-            {children}
-          </TooltipPrimitive.Trigger>
-          <TooltipPrimitive.Content align="center" {...props} side={side} className={cn('mr-2', tooltipVariants({ scaling: scaling, weight: weight, radius: radius, color: color }), className)} sideOffset={5}>
-            {content}
-            <TooltipPrimitive.Arrow width={11} height={5} className={arrowColor}/>
-          </TooltipPrimitive.Content>
-        </TooltipPrimitive.Root>
+    return (<TooltipPrimitive.Provider>
+        <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+          <TooltipPrimitive.Trigger className="cursor-pointer text-slate-12 dark:text-slateDark-12" asChild>
+            {children}
+          </TooltipPrimitive.Trigger>
+          <TooltipPrimitive.Content align="center" {...props} side={side} className={cn('mr-2', tooltipVariants({ scaling: scaling, weight: weight, radius: radius, color: color }), className)} sideOffset={5}>
+            {content}
+            <TooltipPrimitive.Arrow width={11} height={5} className={arrowColor}/>
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Root>
       </TooltipPrimitive.Provider>);
 });
 Tooltip.displayName = TooltipPrimitive.Root.displayName;

package/dist/components/index.d.ts

@@ -40,8 +40,6 @@ export { default as Toast } from './Toast';
 export { default as Toggle } from './Toggle';
 export { default as ToggleGroup } from './ToggleGroup';
 export { default as ToggleSwitch } from './ToggleSwitch';
-export { default as Header } from '../Typography/Header';
-export { default as Text } from '../Typography/Text';
 export { default as BubbleChart } from './BubbleChart';
 export { default as RadarChart } from './RadarChart';
 export { default as PieChart } from './PieChart';

package/dist/index.d.ts

@@ -1,5 +1,2 @@
-// components 디렉토리 내의 모든 타입 선언을 내보냄
-export * from './components';
-
-// typography 디렉토리 내의 모든 타입 선언을 내보냄
-export * from './Typography';
+export * from './components';
+export * from './Typography';

package/dist/index.js

@@ -1,5 +1,2 @@
-// components 디렉토리 내의 모든 파일을 내보냄
 export * from './components';
-
-// typography 디렉토리 내의 모든 파일을 내보냄
 export * from './Typography';

package/dist/stories/Welcome.jsx

@@ -24,25 +24,25 @@ var Welcome = function () {
     var navigateToFigma = function () {
         window.open('https://www.figma.com/design/tlcB7UYdvUNzPk5T66FqLf/UI-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EA%B3%B5%EC%9C%A0%EC%9A%A9?node-id=0-1&t=k7fMSU17MKc42lzy-0', '_blank');
     };
-    return (<div className="welcome-wrap">
-      <div>
-        <div>
-          <Image className="w-[150px] h-auto" layout="fixed" src={Logo} alt="LOTTE INNOVATE"/>
-          <p className="welcome-sub">Style Guide UI Kit</p>
-          <h1 className="welcome-title">LOTTE UI Library</h1>
-        </div>
-        <div className="flex gap-2 pt-[40px]">
-          <Button color="slate" radius="medium" scaling="100%" weight="medium" size={'x-large'} appearance={'outline'} onClick={navigateToGitlab} className="relative z-10">
-            <Image src={Gitlab} width={0} height={0} alt="Gitlab" className="mr-2"/>
-            GitLab
-          </Button>
-          <Button color="slate" radius="medium" scaling="100%" weight="medium" size={'x-large'} appearance={'outline'} onClick={navigateToFigma} className="relative z-10">
-            <Image src={Figma} width={0} height={0} alt="Figma" className="mr-2"/>
-            Figma
-          </Button>
-        </div>
-      </div>
-      <Image className="absolute bottom-0 w-auto" src={Landing} width={0} height={0} alt="컴포넌트 이미지입니다."/>
+    return (<div className="welcome-wrap">
+      <div>
+        <div>
+          <Image className="w-[150px] h-auto" layout="fixed" src={Logo} alt="LOTTE INNOVATE"/>
+          <p className="welcome-sub">Style Guide UI Kit</p>
+          <h1 className="welcome-title">LOTTE UI Library</h1>
+        </div>
+        <div className="flex gap-2 pt-[40px]">
+          <Button color="slate" radius="medium" scaling="100%" weight="medium" size={'x-large'} appearance={'outline'} onClick={navigateToGitlab} className="relative z-10">
+            <Image src={Gitlab} width={0} height={0} alt="Gitlab" className="mr-2"/>
+            GitLab
+          </Button>
+          <Button color="slate" radius="medium" scaling="100%" weight="medium" size={'x-large'} appearance={'outline'} onClick={navigateToFigma} className="relative z-10">
+            <Image src={Figma} width={0} height={0} alt="Figma" className="mr-2"/>
+            Figma
+          </Button>
+        </div>
+      </div>
+      <Image className="absolute bottom-0 w-auto" src={Landing} width={0} height={0} alt="컴포넌트 이미지입니다."/>
     </div>);
 };
 export default Welcome;

package/dist/stories/accordion/Accordion.stories.jsx

@@ -56,24 +56,24 @@ export default meta;
 export var Default = function (_a) {
     var _b;
     var args = __rest(_a, []);
-    return (<Accordion defaultValue="item-1" type={(_b = args.type) !== null && _b !== void 0 ? _b : 'single'} {...args}>
-    <AccordionItem value="item-1">
-      <AccordionTrigger {...args}>리액트는 무엇인가요?</AccordionTrigger>
-      <AccordionContent>
-        리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
-      </AccordionContent>
-    </AccordionItem>
-
-    <AccordionItem value="item-2">
-      <AccordionTrigger {...args}>자바스크립트란 무엇인가요?</AccordionTrigger>
-      <AccordionContent>자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다.</AccordionContent>
-    </AccordionItem>
-
-    <AccordionItem value="item-3" disabled={true}>
-      <AccordionTrigger {...args}>Can it be animated?</AccordionTrigger>
-      <AccordionContent>
-        Yes! You can animate the Accordion with CSS or JavaScript.
-      </AccordionContent>
-    </AccordionItem>
+    return (<Accordion defaultValue="item-1" type={(_b = args.type) !== null && _b !== void 0 ? _b : 'single'} {...args}>
+    <AccordionItem value="item-1">
+      <AccordionTrigger {...args}>리액트는 무엇인가요?</AccordionTrigger>
+      <AccordionContent>
+        리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
+      </AccordionContent>
+    </AccordionItem>
+
+    <AccordionItem value="item-2">
+      <AccordionTrigger {...args}>자바스크립트란 무엇인가요?</AccordionTrigger>
+      <AccordionContent>자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다.</AccordionContent>
+    </AccordionItem>
+
+    <AccordionItem value="item-3" disabled={true}>
+      <AccordionTrigger {...args}>Can it be animated?</AccordionTrigger>
+      <AccordionContent>
+        Yes! You can animate the Accordion with CSS or JavaScript.
+      </AccordionContent>
+    </AccordionItem>
   </Accordion>);
 };

package/dist/stories/alert-dialog/AlertDialog.stories.jsx

@@ -55,19 +55,19 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<AlertDialog>
-    <AlertDialogTrigger>
-      <Button>버튼을 클릭해주세요</Button>
-    </AlertDialogTrigger>
-    <AlertDialogContent {...args}>
-      <AlertDialogTitle {...args}>AlertDialog 제목</AlertDialogTitle>
-      <AlertDialogDescription {...args}>
-        AlertDialog 내용이 들어갈 공간입니다.
-      </AlertDialogDescription>
-      <div className="flex justify-end">
-        <AlertDialogCancel {...args}>취소</AlertDialogCancel>
-        <AlertDialogAction {...args}>확인</AlertDialogAction>
-      </div>
-    </AlertDialogContent>
+    return (<AlertDialog>
+    <AlertDialogTrigger>
+      <Button>버튼을 클릭해주세요</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent {...args}>
+      <AlertDialogTitle {...args}>AlertDialog 제목</AlertDialogTitle>
+      <AlertDialogDescription {...args}>
+        AlertDialog 내용이 들어갈 공간입니다.
+      </AlertDialogDescription>
+      <div className="flex justify-end">
+        <AlertDialogCancel {...args}>취소</AlertDialogCancel>
+        <AlertDialogAction {...args}>확인</AlertDialogAction>
+      </div>
+    </AlertDialogContent>
   </AlertDialog>);
 };

package/dist/stories/aspect-ratio/AspectRatio.stories.jsx

@@ -65,42 +65,42 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-[300px]">
-    <AspectRatio id="defaultAspectRatio" {...args}>
-      <Image className="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={100} height={100}/>
-    </AspectRatio>
+    return (<div className="w-[300px]">
+    <AspectRatio id="defaultAspectRatio" {...args}>
+      <Image className="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={100} height={100}/>
+    </AspectRatio>
   </div>);
 };
 export var Ratio = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-2">
-    <div className="flex flex-col w-[200px] items-center">
-      <Text>{'3 / 1'}</Text>
-      <AspectRatio id="defaultAspectRatio" {...args} ratio={3 / 1}>
-        <Image className="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={100} height={100}/>
-      </AspectRatio>
-    </div>
-    <div className="flex flex-col w-[200px] items-center">
-      <Text>{'3 / 2'}</Text>
-      <AspectRatio id="defaultAspectRatio" {...args} ratio={3 / 2}>
-        <Image className="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={100} height={100}/>
-      </AspectRatio>
-    </div>
-    <div className="flex flex-col w-[200px] items-center">
-      <Text>{'3 / 3'}</Text>
-      <AspectRatio id="defaultAspectRatio" {...args} ratio={3 / 3}>
-        <Image className="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={100} height={100}/>
-      </AspectRatio>
-    </div>
+    return (<div className="flex space-x-2">
+    <div className="flex flex-col w-[200px] items-center">
+      <Text>{'3 / 1'}</Text>
+      <AspectRatio id="defaultAspectRatio" {...args} ratio={3 / 1}>
+        <Image className="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={100} height={100}/>
+      </AspectRatio>
+    </div>
+    <div className="flex flex-col w-[200px] items-center">
+      <Text>{'3 / 2'}</Text>
+      <AspectRatio id="defaultAspectRatio" {...args} ratio={3 / 2}>
+        <Image className="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={100} height={100}/>
+      </AspectRatio>
+    </div>
+    <div className="flex flex-col w-[200px] items-center">
+      <Text>{'3 / 3'}</Text>
+      <AspectRatio id="defaultAspectRatio" {...args} ratio={3 / 3}>
+        <Image className="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={100} height={100}/>
+      </AspectRatio>
+    </div>
   </div>);
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-row space-x-5">
-    {scalingOptions.map(function (scaling) { return (<div className="w-[130px] border border-red-9" key={scaling}>
-        <AspectRatio id={scaling} scaling={scaling} {...args}>
-          <Image className="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={100} height={100}/>
-        </AspectRatio>
-      </div>); })}
+    return (<div className="flex flex-row space-x-5">
+    {scalingOptions.map(function (scaling) { return (<div className="w-[130px] border border-red-9" key={scaling}>
+        <AspectRatio id={scaling} scaling={scaling} {...args}>
+          <Image className="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={100} height={100}/>
+        </AspectRatio>
+      </div>); })}
   </div>);
 };

package/dist/stories/avatar/Avatar.stories.jsx

@@ -73,33 +73,33 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-4">
-    <Avatar imagePath="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80" {...args}/>
-    <Avatar fallbackText="A" {...args}/>
+    return (<div className="flex space-x-4">
+    <Avatar imagePath="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80" {...args}/>
+    <Avatar fallbackText="A" {...args}/>
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-4">
-    {radiusOptions.map(function (radius) { return (<Avatar key={radius} radius={radius} imagePath="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80" {...args}/>); })}
+    return (<div className="flex space-x-4">
+    {radiusOptions.map(function (radius) { return (<Avatar key={radius} radius={radius} imagePath="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80" {...args}/>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-4">
-    {typoSizeOptions.map(function (size) { return (<Avatar key={size} size={size} fallbackText="A" {...args}/>); })}
+    return (<div className="flex space-x-4">
+    {typoSizeOptions.map(function (size) { return (<Avatar key={size} size={size} fallbackText="A" {...args}/>); })}
   </div>);
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-4">
-    {scalingOptions.map(function (scaling) { return (<Avatar key={scaling} scaling={scaling} imagePath="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" {...args}/>); })}
+    return (<div className="flex space-x-4">
+    {scalingOptions.map(function (scaling) { return (<Avatar key={scaling} scaling={scaling} imagePath="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" {...args}/>); })}
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-4">
-    <Avatar appearance="solid" fallbackText={'A'} {...args}/>
-    <Avatar appearance="soft" fallbackText={'A'} {...args}/>
+    return (<div className="flex space-x-4">
+    <Avatar appearance="solid" fallbackText={'A'} {...args}/>
+    <Avatar appearance="soft" fallbackText={'A'} {...args}/>
   </div>);
 };

package/dist/stories/badge/Badge.stories.jsx

@@ -66,65 +66,65 @@ export var Default = function (_a) {
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex gap-3">
-    {radiusOptions.map(function (radius) { return (<Badge key={radius} {...args} radius={radius}>
-        {radius}
-      </Badge>); })}
+    return (<div className="flex gap-3">
+    {radiusOptions.map(function (radius) { return (<Badge key={radius} {...args} radius={radius}>
+        {radius}
+      </Badge>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <Badge {...args} size={'small'}>
-      small
-    </Badge>
-    <Badge {...args} size={'medium'}>
-      medium
-    </Badge>
-    <Badge {...args} size={'large'}>
-      large
-    </Badge>
+    return (<div className="flex items-center gap-3">
+    <Badge {...args} size={'small'}>
+      small
+    </Badge>
+    <Badge {...args} size={'medium'}>
+      medium
+    </Badge>
+    <Badge {...args} size={'large'}>
+      large
+    </Badge>
   </div>);
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    {scalingOptions.map(function (scaling) { return (<Badge key={scaling} {...args} scaling={scaling}>
-        {scaling}
-      </Badge>); })}
+    return (<div className="flex items-center gap-3">
+    {scalingOptions.map(function (scaling) { return (<Badge key={scaling} {...args} scaling={scaling}>
+        {scaling}
+      </Badge>); })}
   </div>);
 };
 export var Weight = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <Badge {...args} weight="regular">
-      regular
-    </Badge>
-    <Badge {...args} weight="medium">
-      medium
-    </Badge>
-    <Badge {...args} weight="semibold">
-      semibold
-    </Badge>
-    <Badge {...args} weight="bold">
-      bold
-    </Badge>
+    return (<div className="flex items-center gap-3">
+    <Badge {...args} weight="regular">
+      regular
+    </Badge>
+    <Badge {...args} weight="medium">
+      medium
+    </Badge>
+    <Badge {...args} weight="semibold">
+      semibold
+    </Badge>
+    <Badge {...args} weight="bold">
+      bold
+    </Badge>
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <Badge {...args} appearance="solid">
-      solid
-    </Badge>
-    <Badge {...args} appearance="soft">
-      soft
-    </Badge>
-    <Badge {...args} appearance="surface">
-      surface
-    </Badge>
-    <Badge {...args} appearance="outline">
-      outline
-    </Badge>
+    return (<div className="flex items-center gap-3">
+    <Badge {...args} appearance="solid">
+      solid
+    </Badge>
+    <Badge {...args} appearance="soft">
+      soft
+    </Badge>
+    <Badge {...args} appearance="surface">
+      surface
+    </Badge>
+    <Badge {...args} appearance="outline">
+      outline
+    </Badge>
   </div>);
 };

package/dist/stories/bubble-chart/BubbleChart.stories.jsx

@@ -109,8 +109,8 @@ export var Default = function (_a) {
             },
         },
     };
-    return (<div className="w-[500px] h-[400px]">
-      <BubbleChart width={400} height={300} datasets={args.datasets} options={options} {...args}/>
+    return (<div className="w-[500px] h-[400px]">
+      <BubbleChart width={400} height={300} datasets={args.datasets} options={options} {...args}/>
     </div>);
 };
 export var MultiDatasets = function (_a) {
@@ -165,12 +165,12 @@ export var PointStyles = function (_a) {
     var options = {
         responsive: false,
     };
-    return (<div className="space-y-3">
-      <div className="flex items-center space-x-3">
-        {['cross', 'crossRot'].map(function (style, index) { return (<BubbleChart key={index} options={options} width={350} height={250} {...args} datasets={datasets(style, style)}/>); })}
-      </div>
-      <div className="flex items-center space-x-3">
-        {['dash', 'rect'].map(function (style, index) { return (<BubbleChart key={index} options={options} width={350} height={250} {...args} datasets={datasets(style, style)}/>); })}
-      </div>
+    return (<div className="space-y-3">
+      <div className="flex items-center space-x-3">
+        {['cross', 'crossRot'].map(function (style, index) { return (<BubbleChart key={index} options={options} width={350} height={250} {...args} datasets={datasets(style, style)}/>); })}
+      </div>
+      <div className="flex items-center space-x-3">
+        {['dash', 'rect'].map(function (style, index) { return (<BubbleChart key={index} options={options} width={350} height={250} {...args} datasets={datasets(style, style)}/>); })}
+      </div>
     </div>);
 };

package/dist/stories/button/Button.stories.jsx

@@ -56,43 +56,43 @@ var meta = {
 };
 export default meta;
 export var Default = function (args) { return <Button {...args}>버튼</Button>; };
-export var Radius = function (args) { return (<div className="flex space-x-2">
-    {radiusOptions.map(function (radius) { return (<Button key={radius} {...args} radius={radius}>
-        {radius}
-      </Button>); })}
+export var Radius = function (args) { return (<div className="flex space-x-2">
+    {radiusOptions.map(function (radius) { return (<Button key={radius} {...args} radius={radius}>
+        {radius}
+      </Button>); })}
   </div>); };
-export var Size = function (args) { return (<div className="flex items-center space-x-3">
-    {sizeOptions.map(function (size) { return (<Button key={"".concat(size, "-size")} {...args} size={size}>
-        {size}
-      </Button>); })}
+export var Size = function (args) { return (<div className="flex items-center space-x-3">
+    {sizeOptions.map(function (size) { return (<Button key={"".concat(size, "-size")} {...args} size={size}>
+        {size}
+      </Button>); })}
   </div>); };
-export var Scaling = function (args) { return (<div className="flex items-center space-x-3">
-    {scalingOptions.map(function (scaling) { return (<Button key={scaling} {...args} scaling={scaling}>
-        {scaling}
-      </Button>); })}
+export var Scaling = function (args) { return (<div className="flex items-center space-x-3">
+    {scalingOptions.map(function (scaling) { return (<Button key={scaling} {...args} scaling={scaling}>
+        {scaling}
+      </Button>); })}
   </div>); };
-export var Weight = function (args) { return (<div className="flex items-center space-x-3">
-    {weightOptions.map(function (weight) { return (<Button key={weight} {...args} weight={weight}>
-        {weight}
-      </Button>); })}
+export var Weight = function (args) { return (<div className="flex items-center space-x-3">
+    {weightOptions.map(function (weight) { return (<Button key={weight} {...args} weight={weight}>
+        {weight}
+      </Button>); })}
   </div>); };
-export var Appearance = function (args) { return (<div className="flex items-center space-x-3">
-    {appearanceOptions.map(function (appearance) { return (<Button key={appearance} {...args} appearance={appearance}>
-        {appearance}
-      </Button>); })}
+export var Appearance = function (args) { return (<div className="flex items-center space-x-3">
+    {appearanceOptions.map(function (appearance) { return (<Button key={appearance} {...args} appearance={appearance}>
+        {appearance}
+      </Button>); })}
   </div>); };
-export var WithIcon = function (args) { return (<div className="flex flex-col items-center space-y-3">
-    <div className="flex items-center space-x-3">
-      {appearanceOptions.map(function (appearance) { return (<Button key={appearance} {...args} appearance={appearance}>
-          <BookmarkIcon className="w-4 h-4 mr-2"/>
-          북마크
-        </Button>); })}
-    </div>
-
-    <div className="flex items-center space-x-3">
-      {appearanceOptions.map(function (appearance) { return (<Button key={appearance} {...args} appearance={appearance}>
-          More
-          <ArrowRightIcon className="w-4 h-4 ml-2"/>
-        </Button>); })}
-    </div>
+export var WithIcon = function (args) { return (<div className="flex flex-col items-center space-y-3">
+    <div className="flex items-center space-x-3">
+      {appearanceOptions.map(function (appearance) { return (<Button key={appearance} {...args} appearance={appearance}>
+          <BookmarkIcon className="w-4 h-4 mr-2"/>
+          북마크
+        </Button>); })}
+    </div>
+
+    <div className="flex items-center space-x-3">
+      {appearanceOptions.map(function (appearance) { return (<Button key={appearance} {...args} appearance={appearance}>
+          More
+          <ArrowRightIcon className="w-4 h-4 ml-2"/>
+        </Button>); })}
+    </div>
   </div>); };

package/dist/stories/button/IconButton.stories.jsx

@@ -63,31 +63,31 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<IconButton {...args}>
-      <MagnifyingGlassIcon />
+    return (<IconButton {...args}>
+      <MagnifyingGlassIcon />
     </IconButton>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {sizeOptions.map(function (size) { return (<IconButton key={size} {...args} size={size}>
-        <MagnifyingGlassIcon />
-      </IconButton>); })}
+    return (<div className="flex items-center space-x-4">
+    {sizeOptions.map(function (size) { return (<IconButton key={size} {...args} size={size}>
+        <MagnifyingGlassIcon />
+      </IconButton>); })}
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {radiusOptions.map(function (radius) { return (<IconButton key={radius} {...args} radius={radius}>
-        <MagnifyingGlassIcon />
-      </IconButton>); })}
+    return (<div className="flex items-center space-x-4">
+    {radiusOptions.map(function (radius) { return (<IconButton key={radius} {...args} radius={radius}>
+        <MagnifyingGlassIcon />
+      </IconButton>); })}
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {appearanceOptions.map(function (appearance) { return (<IconButton key={appearance} {...args} appearance={appearance}>
-        <MagnifyingGlassIcon />
-      </IconButton>); })}
+    return (<div className="flex items-center space-x-4">
+    {appearanceOptions.map(function (appearance) { return (<IconButton key={appearance} {...args} appearance={appearance}>
+        <MagnifyingGlassIcon />
+      </IconButton>); })}
   </div>);
 };