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

package/dist/stories/callout/Callout.stories.jsx

@@ -70,136 +70,136 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Callout {...args}>
-    <CalloutIcon {...args} iconType="information"/>
-    <CalloutText {...args}>시스템 점검이 예정되어 있습니다.</CalloutText>
+    return (<Callout {...args}>
+    <CalloutIcon {...args} iconType="information"/>
+    <CalloutText {...args}>시스템 점검이 예정되어 있습니다.</CalloutText>
   </Callout>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {radiusOptions.map(function (radius) { return (<Callout {...args} radius={radius} key={radius}>
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>시스템 점검이 예정되어 있습니다.</CalloutText>
-      </Callout>); })}
+    return (<div className="flex flex-col space-y-3">
+    {radiusOptions.map(function (radius) { return (<Callout {...args} radius={radius} key={radius}>
+        <CalloutIcon {...args} iconType="information"/>
+        <CalloutText {...args}>시스템 점검이 예정되어 있습니다.</CalloutText>
+      </Callout>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-5">
-    <Callout {...args} size={'small'}>
-      <CalloutIcon {...args} iconType="information"/>
-      <CalloutText {...args}>
-        새로운 업데이트가 있습니다. 최신 버전을 다운로드하여 사용해 주세요.
-      </CalloutText>
-    </Callout>
-
-    <Callout {...args}>
-      <CalloutIcon {...args} iconType="information"/>
-      <CalloutText {...args}>
-        새로운 업데이트가 있습니다. 최신 버전을 다운로드하여 사용해 주세요.
-      </CalloutText>
-    </Callout>
-
-    <Callout {...args} size="large">
-      <CalloutIcon {...args} iconType="information"/>
-      <CalloutText {...args}>
-        새로운 업데이트가 있습니다. 최신 버전을 다운로드하여 사용해 주세요.
-      </CalloutText>
-    </Callout>
+    return (<div className="flex flex-col space-y-5">
+    <Callout {...args} size={'small'}>
+      <CalloutIcon {...args} iconType="information"/>
+      <CalloutText {...args}>
+        새로운 업데이트가 있습니다. 최신 버전을 다운로드하여 사용해 주세요.
+      </CalloutText>
+    </Callout>
+
+    <Callout {...args}>
+      <CalloutIcon {...args} iconType="information"/>
+      <CalloutText {...args}>
+        새로운 업데이트가 있습니다. 최신 버전을 다운로드하여 사용해 주세요.
+      </CalloutText>
+    </Callout>
+
+    <Callout {...args} size="large">
+      <CalloutIcon {...args} iconType="information"/>
+      <CalloutText {...args}>
+        새로운 업데이트가 있습니다. 최신 버전을 다운로드하여 사용해 주세요.
+      </CalloutText>
+    </Callout>
   </div>);
 };
 export var Color = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-5">
-    <Callout {...args} color="information">
-      <CalloutIcon {...args} iconType="information"/>
-      <CalloutText {...args}>정보 메세지</CalloutText>
-    </Callout>
-
-    <Callout {...args} color="danger">
-      <CalloutIcon {...args} iconType="danger"/>
-      <CalloutText {...args}>위험 메세지</CalloutText>
-    </Callout>
-
-    <Callout {...args} color="warning">
-      <CalloutIcon {...args} iconType="warning"/>
-      <CalloutText {...args}>경고 메세지</CalloutText>
-    </Callout>
-
-    <Callout {...args} color="success">
-      <CalloutIcon {...args} iconType="success"/>
-      <CalloutText {...args}>성공 메세지</CalloutText>
-    </Callout>
+    return (<div className="flex space-x-5">
+    <Callout {...args} color="information">
+      <CalloutIcon {...args} iconType="information"/>
+      <CalloutText {...args}>정보 메세지</CalloutText>
+    </Callout>
+
+    <Callout {...args} color="danger">
+      <CalloutIcon {...args} iconType="danger"/>
+      <CalloutText {...args}>위험 메세지</CalloutText>
+    </Callout>
+
+    <Callout {...args} color="warning">
+      <CalloutIcon {...args} iconType="warning"/>
+      <CalloutText {...args}>경고 메세지</CalloutText>
+    </Callout>
+
+    <Callout {...args} color="success">
+      <CalloutIcon {...args} iconType="success"/>
+      <CalloutText {...args}>성공 메세지</CalloutText>
+    </Callout>
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-5">
-    <div className="flex flex-col space-y-1">
-      <Text>Soft(기준)</Text>
-      <Callout {...args} appearance="soft">
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>새로운 업데이트가 있습니다. </CalloutText>
-      </Callout>
-    </div>
-    <div className="flex flex-col space-y-1">
-      <Text>Surface</Text>
-      <Callout {...args} appearance="surface">
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>새로운 업데이트가 있습니다. </CalloutText>
-      </Callout>
-    </div>
-    <div className="flex flex-col space-y-1">
-      <Text>Outline</Text>
-      <Callout {...args} appearance="outline">
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>새로운 업데이트가 있습니다. </CalloutText>
-      </Callout>
-    </div>
+    return (<div className="flex space-x-5">
+    <div className="flex flex-col space-y-1">
+      <Text>Soft(기준)</Text>
+      <Callout {...args} appearance="soft">
+        <CalloutIcon {...args} iconType="information"/>
+        <CalloutText {...args}>새로운 업데이트가 있습니다. </CalloutText>
+      </Callout>
+    </div>
+    <div className="flex flex-col space-y-1">
+      <Text>Surface</Text>
+      <Callout {...args} appearance="surface">
+        <CalloutIcon {...args} iconType="information"/>
+        <CalloutText {...args}>새로운 업데이트가 있습니다. </CalloutText>
+      </Callout>
+    </div>
+    <div className="flex flex-col space-y-1">
+      <Text>Outline</Text>
+      <Callout {...args} appearance="outline">
+        <CalloutIcon {...args} iconType="information"/>
+        <CalloutText {...args}>새로운 업데이트가 있습니다. </CalloutText>
+      </Callout>
+    </div>
   </div>);
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-5">
-    {scalingOptions.map(function (scaling) { return (<Callout {...args} scaling={scaling} key={scaling}>
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>관리자에게 문의하세요.</CalloutText>
-      </Callout>); })}
+    return (<div className="flex flex-col space-y-5">
+    {scalingOptions.map(function (scaling) { return (<Callout {...args} scaling={scaling} key={scaling}>
+        <CalloutIcon {...args} iconType="information"/>
+        <CalloutText {...args}>관리자에게 문의하세요.</CalloutText>
+      </Callout>); })}
   </div>);
 };
 export var IconTypes = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-5">
-    <div className="flex flex-col space-y-1">
-      <Text>Danger</Text>
-      <Callout {...args} color="danger">
-        <CalloutIcon {...args} iconType="danger" color="danger"/>
-        <CalloutText {...args} color="danger">
-          위험 아이콘
-        </CalloutText>
-      </Callout>
-    </div>
-    <div className="flex flex-col space-y-1">
-      <Text>Warning</Text>
-      <Callout {...args} color="warning">
-        <CalloutIcon {...args} iconType="warning"/>
-        <CalloutText {...args}>경고 아이콘</CalloutText>
-      </Callout>
-    </div>
-    <div className="flex flex-col space-y-1">
-      <Text>Success</Text>
-      <Callout {...args} color="success">
-        <CalloutIcon {...args} iconType="success"/>
-        <CalloutText {...args}>성공 아이콘</CalloutText>
-      </Callout>
-    </div>
-    <div className="flex flex-col space-y-1">
-      <Text>Info</Text>
-      <Callout {...args} color="information">
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>정보 아이콘</CalloutText>
-      </Callout>
-    </div>
+    return (<div className="flex space-x-5">
+    <div className="flex flex-col space-y-1">
+      <Text>Danger</Text>
+      <Callout {...args} color="danger">
+        <CalloutIcon {...args} iconType="danger" color="danger"/>
+        <CalloutText {...args} color="danger">
+          위험 아이콘
+        </CalloutText>
+      </Callout>
+    </div>
+    <div className="flex flex-col space-y-1">
+      <Text>Warning</Text>
+      <Callout {...args} color="warning">
+        <CalloutIcon {...args} iconType="warning"/>
+        <CalloutText {...args}>경고 아이콘</CalloutText>
+      </Callout>
+    </div>
+    <div className="flex flex-col space-y-1">
+      <Text>Success</Text>
+      <Callout {...args} color="success">
+        <CalloutIcon {...args} iconType="success"/>
+        <CalloutText {...args}>성공 아이콘</CalloutText>
+      </Callout>
+    </div>
+    <div className="flex flex-col space-y-1">
+      <Text>Info</Text>
+      <Callout {...args} color="information">
+        <CalloutIcon {...args} iconType="information"/>
+        <CalloutText {...args}>정보 아이콘</CalloutText>
+      </Callout>
+    </div>
   </div>);
 };

package/dist/stories/card/Card.stories.jsx

@@ -63,72 +63,72 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Card {...args}>
-    <Avatar {...args} size={args.size === 'small' ? '3' : args.size === 'large' ? '5' : '4'} appearance="solid" 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"/>
-    <div className="flex flex-col">
-      <Text {...args} weight={'bold'} size={args.size === 'small' ? '3' : args.size === 'large' ? '5' : '4'}>
-        Title
-      </Text>
-      <Text {...args} size={args.size === 'small' ? '3' : args.size === 'large' ? '5' : '4'}>
-        Content
-      </Text>
-    </div>
+    return (<Card {...args}>
+    <Avatar {...args} size={args.size === 'small' ? '3' : args.size === 'large' ? '5' : '4'} appearance="solid" 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"/>
+    <div className="flex flex-col">
+      <Text {...args} weight={'bold'} size={args.size === 'small' ? '3' : args.size === 'large' ? '5' : '4'}>
+        Title
+      </Text>
+      <Text {...args} size={args.size === 'small' ? '3' : args.size === 'large' ? '5' : '4'}>
+        Content
+      </Text>
+    </div>
   </Card>);
 };
 export var NoAvatar = function (_a) {
     var args = __rest(_a, []);
-    return (<Card {...args}>
-    <div className="flex flex-col">
-      <Text {...args} weight={'bold'}>
-        Typography
-      </Text>
-      <Text {...args}>{"is the art and technique of arranging type to make written language legible, \n        readable and appealing when displayed."}</Text>
-    </div>
+    return (<Card {...args}>
+    <div className="flex flex-col">
+      <Text {...args} weight={'bold'}>
+        Typography
+      </Text>
+      <Text {...args}>{"is the art and technique of arranging type to make written language legible, \n        readable and appealing when displayed."}</Text>
+    </div>
   </Card>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-4">
-    <Card {...args} appearance="surface">
-      <Text>surface style card (default)</Text>
-    </Card>
-    <Card {...args} appearance="classic">
-      <Text>classic style card</Text>
-    </Card>
-    <Card {...args} appearance="ghost">
-      <Text> ghost style card</Text>
-    </Card>
+    return (<div className="flex flex-col space-y-4">
+    <Card {...args} appearance="surface">
+      <Text>surface style card (default)</Text>
+    </Card>
+    <Card {...args} appearance="classic">
+      <Text>classic style card</Text>
+    </Card>
+    <Card {...args} appearance="ghost">
+      <Text> ghost style card</Text>
+    </Card>
   </div>);
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col items-center space-y-4">
-    {scalingOptions.map(function (scaling) { return (<div key={scaling}>
-        <Card {...args} scaling={scaling}>
-          <Avatar {...args} radius={'full'} 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"/>
-          <div className="flex flex-col">
-            <Text {...args} weight={'bold'}>
-              Title
-            </Text>
-            <Text {...args}>Content</Text>
-          </div>
-        </Card>
-      </div>); })}
+    return (<div className="flex flex-col items-center space-y-4">
+    {scalingOptions.map(function (scaling) { return (<div key={scaling}>
+        <Card {...args} scaling={scaling}>
+          <Avatar {...args} radius={'full'} 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"/>
+          <div className="flex flex-col">
+            <Text {...args} weight={'bold'}>
+              Title
+            </Text>
+            <Text {...args}>Content</Text>
+          </div>
+        </Card>
+      </div>); })}
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col items-center space-y-3">
-    {radiusOptions.map(function (radius) { return (<div key={radius}>
-        <Card {...args} radius={radius}>
-          <Avatar {...args} radius={radius} 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"/>
-          <div className="flex flex-col">
-            <Text {...args} weight={'bold'}>
-              Title
-            </Text>
-            <Text {...args}>Content</Text>
-          </div>
-        </Card>
-      </div>); })}
+    return (<div className="flex flex-col items-center space-y-3">
+    {radiusOptions.map(function (radius) { return (<div key={radius}>
+        <Card {...args} radius={radius}>
+          <Avatar {...args} radius={radius} 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"/>
+          <div className="flex flex-col">
+            <Text {...args} weight={'bold'}>
+              Title
+            </Text>
+            <Text {...args}>Content</Text>
+          </div>
+        </Card>
+      </div>); })}
   </div>);
 };

package/dist/stories/checkbox/Checkbox.stories.jsx

@@ -85,82 +85,82 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Checkbox id="checkbox" {...args} defaultChecked>
-    체크박스
+    return (<Checkbox id="checkbox" {...args} defaultChecked>
+    체크박스
   </Checkbox>);
 };
 export var Types = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    <Checkbox id="defaultCheckbox" {...args} defaultChecked>
-      default
-    </Checkbox>
-    <Checkbox id="disabledCheckedCheckbox" {...args} disabled defaultChecked>
-      disabled
-    </Checkbox>
-    <Checkbox id="indeterminate" {...args} indeterminate defaultChecked>
-      indeterminate
-    </Checkbox>
+    return (<div className="flex flex-col space-y-3">
+    <Checkbox id="defaultCheckbox" {...args} defaultChecked>
+      default
+    </Checkbox>
+    <Checkbox id="disabledCheckedCheckbox" {...args} disabled defaultChecked>
+      disabled
+    </Checkbox>
+    <Checkbox id="indeterminate" {...args} indeterminate defaultChecked>
+      indeterminate
+    </Checkbox>
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-5">
-    <Checkbox id="size-s" {...args} size="small" defaultChecked>
-      small
-    </Checkbox>
-    <Checkbox id="size-m" {...args} size="medium" defaultChecked>
-      medium
-    </Checkbox>
-    <Checkbox id="size-l" {...args} size="large" defaultChecked>
-      large
-    </Checkbox>
+    return (<div className="flex space-x-5">
+    <Checkbox id="size-s" {...args} size="small" defaultChecked>
+      small
+    </Checkbox>
+    <Checkbox id="size-m" {...args} size="medium" defaultChecked>
+      medium
+    </Checkbox>
+    <Checkbox id="size-l" {...args} size="large" defaultChecked>
+      large
+    </Checkbox>
   </div>);
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-5">
-    {scalingOptions.map(function (scaling) { return (<Checkbox key={scaling} id={scaling} {...args} scaling={scaling} defaultChecked>
-        {scaling}
-      </Checkbox>); })}
+    return (<div className="flex space-x-5">
+    {scalingOptions.map(function (scaling) { return (<Checkbox key={scaling} id={scaling} {...args} scaling={scaling} defaultChecked>
+        {scaling}
+      </Checkbox>); })}
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-5">
-    {radiusOptions.map(function (radius) { return (<Checkbox key={radius} id={radius} {...args} radius={radius} defaultChecked>
-        {radius}
-      </Checkbox>); })}
+    return (<div className="flex space-x-5">
+    {radiusOptions.map(function (radius) { return (<Checkbox key={radius} id={radius} {...args} radius={radius} defaultChecked>
+        {radius}
+      </Checkbox>); })}
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    <div className="flex space-x-3">
-      <div className="w-[60px]">
-        <Text>Surface</Text>
-      </div>
-      <Checkbox id={'uncheckedSurface'} {...args} appearance={'surface'}/>
-      <Checkbox id={'checkedSurface'} {...args} appearance={'surface'} defaultChecked/>
-      <Checkbox id={'checkedIndeterminate'} {...args} appearance={'surface'} indeterminate defaultChecked/>
-    </div>
-
-    <div className="flex space-x-3">
-      <div className="w-[60px]">
-        <Text>Classic</Text>
-      </div>
-      <Checkbox id={'uncheckedClassic'} {...args} appearance={'classic'}/>
-      <Checkbox id={'checkedClassic'} {...args} appearance={'classic'} defaultChecked/>
-      <Checkbox id={'indeterminateClassic'} {...args} appearance={'classic'} indeterminate defaultChecked/>
-    </div>
-
-    <div className="flex space-x-3">
-      <div className="w-[60px]">
-        <Text>Soft</Text>
-      </div>
-      <Checkbox id={'uncheckedSoft'} {...args} appearance={'soft'}/>
-      <Checkbox id={'checkedSoft'} {...args} appearance={'soft'} defaultChecked/>
-      <Checkbox id={'indeterminateSoft'} {...args} appearance={'soft'} indeterminate defaultChecked/>
-    </div>
+    return (<div className="flex flex-col space-y-3">
+    <div className="flex space-x-3">
+      <div className="w-[60px]">
+        <Text>Surface</Text>
+      </div>
+      <Checkbox id={'uncheckedSurface'} {...args} appearance={'surface'}/>
+      <Checkbox id={'checkedSurface'} {...args} appearance={'surface'} defaultChecked/>
+      <Checkbox id={'checkedIndeterminate'} {...args} appearance={'surface'} indeterminate defaultChecked/>
+    </div>
+
+    <div className="flex space-x-3">
+      <div className="w-[60px]">
+        <Text>Classic</Text>
+      </div>
+      <Checkbox id={'uncheckedClassic'} {...args} appearance={'classic'}/>
+      <Checkbox id={'checkedClassic'} {...args} appearance={'classic'} defaultChecked/>
+      <Checkbox id={'indeterminateClassic'} {...args} appearance={'classic'} indeterminate defaultChecked/>
+    </div>
+
+    <div className="flex space-x-3">
+      <div className="w-[60px]">
+        <Text>Soft</Text>
+      </div>
+      <Checkbox id={'uncheckedSoft'} {...args} appearance={'soft'}/>
+      <Checkbox id={'checkedSoft'} {...args} appearance={'soft'} defaultChecked/>
+      <Checkbox id={'indeterminateSoft'} {...args} appearance={'soft'} indeterminate defaultChecked/>
+    </div>
   </div>);
 };

package/dist/stories/checkbox/CheckboxCard.stories.jsx

@@ -69,57 +69,57 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    <CheckboxCard id="defaultCheckboxCard" {...args} defaultChecked>
-      default
-    </CheckboxCard>
-    <CheckboxCard id="disabledCheckboxCard" {...args} disabled defaultChecked>
-      disabled
-    </CheckboxCard>
+    return (<div className="flex flex-col space-y-3">
+    <CheckboxCard id="defaultCheckboxCard" {...args} defaultChecked>
+      default
+    </CheckboxCard>
+    <CheckboxCard id="disabledCheckboxCard" {...args} disabled defaultChecked>
+      disabled
+    </CheckboxCard>
   </div>);
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {scalingOptions.map(function (scaling) { return (<div key={scaling}>
-        <CheckboxCard id={scaling} {...args} scaling={scaling}>
-          {scaling}
-        </CheckboxCard>
-      </div>); })}
+    return (<div className="flex flex-col space-y-3">
+    {scalingOptions.map(function (scaling) { return (<div key={scaling}>
+        <CheckboxCard id={scaling} {...args} scaling={scaling}>
+          {scaling}
+        </CheckboxCard>
+      </div>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    <CheckboxCard id="size-s" {...args} size="small" defaultChecked>
-      small
-    </CheckboxCard>
-    <CheckboxCard id="size-m" {...args} size="medium" defaultChecked>
-      medium
-    </CheckboxCard>
-    <CheckboxCard id="size-l" {...args} size="large" defaultChecked>
-      large
-    </CheckboxCard>
+    return (<div className="flex flex-col space-y-3">
+    <CheckboxCard id="size-s" {...args} size="small" defaultChecked>
+      small
+    </CheckboxCard>
+    <CheckboxCard id="size-m" {...args} size="medium" defaultChecked>
+      medium
+    </CheckboxCard>
+    <CheckboxCard id="size-l" {...args} size="large" defaultChecked>
+      large
+    </CheckboxCard>
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {radiusOptions.map(function (radius) { return (<div key={radius}>
-        <CheckboxCard id={radius} {...args} radius={radius}>
-          {radius}
-        </CheckboxCard>
-      </div>); })}
+    return (<div className="flex flex-col space-y-3">
+    {radiusOptions.map(function (radius) { return (<div key={radius}>
+        <CheckboxCard id={radius} {...args} radius={radius}>
+          {radius}
+        </CheckboxCard>
+      </div>); })}
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-4">
-    <CheckboxCard id={'classic'} {...args} appearance={'classic'}>
-      classic
-    </CheckboxCard>
-    <CheckboxCard id={'surface'} {...args} appearance={'surface'}>
-      surface
-    </CheckboxCard>
+    return (<div className="flex space-x-4">
+    <CheckboxCard id={'classic'} {...args} appearance={'classic'}>
+      classic
+    </CheckboxCard>
+    <CheckboxCard id={'surface'} {...args} appearance={'surface'}>
+      surface
+    </CheckboxCard>
   </div>);
 };